refactor(DsfrNavigationMegaMenuCategory): ♻️ convertit les stories au format CSF3

## Pourquoi les changements ont été faits :
- migration vers Storybook 9 avec format CSF3
- remplacement de l'Options API par la Composition API
- amélioration du typage TypeScript
- nettoyage du composant Vue en enlevant withDefaults inutile

## Quelles modifications ont été apportées :
- convertit la meta definition avec Meta<typeof DsfrNavigationMegaMenuCategory>
- convertit la story NavigationMegaMenuCategorie au format StoryObj
- utilise setup() avec ref() pour expandedMenuId au lieu de data()
- remplace methods.toggle par une fonction dans setup()
- retire withDefaults vide dans le composant .vue

Author: laruiss

src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.stories.ts

@@ -1,9 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { ref } from 'vue'
+
 import DsfrNavigation from './DsfrNavigation.vue'
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
 import DsfrNavigationMegaMenuCategory from './DsfrNavigationMegaMenuCategory.vue'
 
-export default {
+const meta = {
   component: DsfrNavigationMegaMenuCategory,
   title: 'Composants/DsfrNavigationMegaMenuCategory',
   argTypes: {
@@ -14,80 +18,78 @@ export default {
     links: {
       control: 'object',
       description:
-        'Liste d’objets contenant les props de lien direct <a href="/?path=/docs/composants-dsfrnavigationmenulink--docs">DsfrNavigationMenuLink</a> de navigation (`to` et `text`)',
+        'Liste d\'objets contenant les props de lien direct <a href="/?path=/docs/composants-dsfrnavigationmenulink--docs">DsfrNavigationMenuLink</a> de navigation (`to` et `text`)',
     },
   },
-}
+} as Meta<typeof DsfrNavigationMegaMenuCategory>
 
-export const NavigationMegaMenuCategorie = (args) => ({
-  components: {
-    DsfrNavigation,
-    DsfrNavigationItem,
-    DsfrNavigationMegaMenu,
-    DsfrNavigationMegaMenuCategory,
-  },
+export default meta
+type Story = StoryObj<typeof meta>
 
-  data () {
-    return {
-      ...args,
-      expandedMenuId: undefined,
-    }
+export const NavigationMegaMenuCategorie: Story = {
+  args: {
+    description: 'Description du mega-menu',
+    link: undefined,
+    megaMenutitle: 'Titre du mega-menu',
+    title: 'Titre du catégorie',
+    links: [
+      {
+        to: '#',
+        text: 'Lien 1 de la catégorie',
+      },
+      {
+        to: '#',
+        text: 'Lien 2 de la catégorie',
+      },
+      {
+        to: '#',
+        text: 'Lien 3 de la catégorie',
+      },
+      {
+        to: '#',
+        text: 'Lien 4 de la catégorie',
+      },
+      {
+        to: '#',
+        text: 'Lien 5 de la catégorie',
+      },
+    ],
   },
-
-  methods: {
-    toggle (id) {
-      if (id === this.expandedMenuId) {
-        this.expandedMenuId = undefined
-        return
-      }
-      this.expandedMenuId = id
+  render: (args) => ({
+    components: {
+      DsfrNavigation,
+      DsfrNavigationItem,
+      DsfrNavigationMegaMenu,
+      DsfrNavigationMegaMenuCategory,
     },
-  },
-
-  template: `
-    <DsfrNavigation>
-      <DsfrNavigationItem>
-        <DsfrNavigationMegaMenu
-          :title="megaMenutitle"
-          :description="description"
-          :link="link"
-          :expanded-id="expandedMenuId"
-          @toggle-id="toggle($event)"
-        >
-          <DsfrNavigationMegaMenuCategory
-            :title="title"
-            :links="links"
-          />
-        </DsfrNavigationMegaMenu>
-      </DsfrNavigationItem>
-    </DsfrNavigation>
-  `,
-})
-NavigationMegaMenuCategorie.args = {
-  description: 'Description du mega-menu',
-  link: undefined,
-  megaMenutitle: 'Titre du mega-menu',
-  title: 'Titre du catégorie',
-  links: [
-    {
-      to: '#',
-      text: 'Lien 1 de la catégorie',
-    },
-    {
-      to: '#',
-      text: 'Lien 2 de la catégorie',
-    },
-    {
-      to: '#',
-      text: 'Lien 3 de la catégorie',
-    },
-    {
-      to: '#',
-      text: 'Lien 4 de la catégorie',
-    },
-    {
-      to: '#',
-      text: 'Lien 5 de la catégorie',
+    setup () {
+      const expandedMenuId = ref(undefined)
+      const toggle = (id: string | undefined) => {
+        if (id === expandedMenuId.value) {
+          expandedMenuId.value = undefined
+          return
+        }
+        expandedMenuId.value = id
+      }
+      return { args, expandedMenuId, toggle }
     },
-  ],
+    template: `
+      <DsfrNavigation>
+        <DsfrNavigationItem>
+          <DsfrNavigationMegaMenu
+            :title="args.megaMenutitle"
+            :description="args.description"
+            :link="args.link"
+            :expanded-id="expandedMenuId"
+            @toggle-id="toggle($event)"
+          >
+            <DsfrNavigationMegaMenuCategory
+              :title="args.title"
+              :links="args.links"
+            />
+          </DsfrNavigationMegaMenu>
+        </DsfrNavigationItem>
+      </DsfrNavigation>
+    `,
+  }),
 }

src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.vue

@@ -5,9 +5,7 @@ import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 
 export type { DsfrNavigationMegaMenuCategoryProps }
 
-withDefaults(defineProps<DsfrNavigationMegaMenuCategoryProps>(), {
-
-})
+defineProps<DsfrNavigationMegaMenuCategoryProps>()
 </script>
 
 <template>