refactor(DsfrNavigationMenuItem): ♻️ 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

## Quelles modifications ont été apportées :
- convertit la meta definition avec Meta<typeof DsfrNavigationMenuItem>
- convertit la story ItemDeMenuDeNavigation au format StoryObj
- utilise setup() avec ref() pour expandedId au lieu de data()
- remplace methods.toggle par une fonction dans setup()
- ajout de types TypeScript pour les paramètres de toggle

Author: laruiss

src/components/DsfrNavigation/DsfrNavigationMenuItem.stories.ts

@@ -1,10 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { ref } from 'vue'
+
 import DsfrNavigation from './DsfrNavigation.vue'
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
 import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 
-export default {
+const meta = {
   component: DsfrNavigationMenuItem,
   title: 'Composants/DsfrNavigationMenuItem',
   argTypes: {
@@ -29,54 +33,57 @@ export default {
         'Indique si l’élément est actif (l’utilisateur est actuellement sur la page pointée par cet item de menu de navigation).',
     },
   },
-}
+} as Meta<typeof DsfrNavigationMenuItem>
 
-export const ItemDeMenuDeNavigation = (args) => ({
-  components: {
-    DsfrNavigation,
-    DsfrNavigationItem,
-    DsfrNavigationMenu,
-    DsfrNavigationMenuItem,
-    DsfrNavigationMenuLink,
-  },
+export default meta
+type Story = StoryObj<typeof meta>
 
-  data () {
-    return args
+export const ItemDeMenuDeNavigation: Story = {
+  args: {
+    active: false,
+    expandedId: '',
+    id: undefined,
+    menuId: 'test-menu-id',
   },
+  render: (args) => ({
+    components: {
+      DsfrNavigation,
+      DsfrNavigationItem,
+      DsfrNavigationMenu,
+      DsfrNavigationMenuItem,
+      DsfrNavigationMenuLink,
+    },
 
-  methods: {
-    toggle (id) {
-      if (id === this.expandedId) {
-        this.expandedId = undefined
-        return
+    setup () {
+      const expandedId = ref(args.expandedId)
+      const toggle = (id: string | undefined) => {
+        if (id === expandedId.value) {
+          expandedId.value = undefined
+          return
+        }
+        expandedId.value = id
       }
-      this.expandedId = id
+      return { args, expandedId, toggle }
     },
-  },
 
-  template: `
-  <DsfrNavigation>
-    <DsfrNavigationItem>
-      <DsfrNavigationMenu
-        title="Titre de menu"
-        @toggle-id="toggle($event)"
-        :expanded-id="expandedId"
-        :id="menuId"
-      >
-        <DsfrNavigationMenuItem :id="id" :active="active">
-          <DsfrNavigationMenuLink
-            to="/"
-            text="Texte du lien de l’item de menu"
-          />
-        </DsfrNavigationMenuItem>
-      </DsfrNavigationMenu>
-    </DsfrNavigationItem>
-  </DsfrNavigation>
-  `,
-})
-ItemDeMenuDeNavigation.args = {
-  active: false,
-  expandedId: '',
-  id: undefined,
-  menuId: 'test-menu-id',
+    template: `
+      <DsfrNavigation>
+        <DsfrNavigationItem>
+          <DsfrNavigationMenu
+            title="Titre de menu"
+            @toggle-id="toggle($event)"
+            :expanded-id="expandedId"
+            :id="args.menuId"
+          >
+            <DsfrNavigationMenuItem :id="args.id" :active="args.active">
+              <DsfrNavigationMenuLink
+                to="/"
+                text="Texte du lien de l'item de menu"
+              />
+            </DsfrNavigationMenuItem>
+          </DsfrNavigationMenu>
+        </DsfrNavigationItem>
+      </DsfrNavigation>
+    `,
+  }),
 }