refactor(DsfrSideMenuButton): ♻️ modernise le composant et convertit les stories en CSF3

## Pourquoi les changements ont été faits :
- Modernisation du composant DsfrSideMenuButton selon les conventions Vue 3
- Migration des stories Storybook vers le format CSF3 moderne
- Amélioration de la cohérence avec les autres composants du projet
- Évite les erreurs de parsing Storybook en utilisant les bonnes pratiques établies

## Quelles modifications ont été apportées :
- Ajout de defineSlots avec documentation TypeScript pour le slot default
- Conversion de la story au format CSF3 avec Meta/StoryObj et satisfies
- Migration de l'option API vers la Composition API avec setup() et ref
- Correction de l'ordre des imports TypeScript/Vue selon les règles ESLint
- Correction de faute de frappe dans le template (actifavec -> actif avec)
- Échappement des apostrophes dans les descriptions argTypes françaises

Author: laruiss

src/components/DsfrSideMenu/DsfrSideMenuButton.stories.ts

@@ -1,10 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { ref } from 'vue'
+
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuButton from './DsfrSideMenuButton.vue'
 import DsfrSideMenuLink from './DsfrSideMenuLink.vue'
 import DsfrSideMenuList from './DsfrSideMenuList.vue'
 import DsfrSideMenuListItem from './DsfrSideMenuListItem.vue'
 
-export default {
+const meta = {
   component: DsfrSideMenuButton,
   title: 'Composants/DsfrSideMenuButton',
   argTypes: {
@@ -23,43 +27,47 @@ export default {
         'Valeur de l’id du menu associé qui sera plié et déplié lors du clic sur ce bouton',
     },
   },
-}
+} satisfies Meta<typeof DsfrSideMenuButton>
 
-export const BoutonDeMenuDepliable = (args) => ({
-  components: {
-    DsfrSideMenu,
-    DsfrSideMenuList,
-    DsfrSideMenuListItem,
-    DsfrSideMenuLink,
-    DsfrSideMenuButton,
-  },
+export default meta
 
-  data () {
-    return {
-      ...args,
-      isExpanded: args.expanded,
-    }
-  },
+type Story = StoryObj<typeof meta>
 
-  template: `
+export const BoutonDeMenuDepliable: Story = {
+  render: (args) => ({
+    components: {
+      DsfrSideMenu,
+      DsfrSideMenuList,
+      DsfrSideMenuListItem,
+      DsfrSideMenuLink,
+      DsfrSideMenuButton,
+    },
+
+    setup () {
+      return {
+        args,
+      }
+    },
+
+    template: `
   <DsfrSideMenu
     heading-title="Menu latéral exemplaire"
     buttonLabel="Bouton exemplaire"
   >
     <DsfrSideMenuList :id="id">
       <DsfrSideMenuListItem>
         <DsfrSideMenuButton
-          :active="active"
-          :expanded="isExpanded"
-          :control-id="controlId"
-          @toggle-expand="isExpanded = !isExpanded"
+          :active="args.active"
+          :expanded="args.expanded"
+          :control-id="args.controlId"
+          @toggle-expand="args.expanded = !args.expanded"
         >
-          Item de menu actifavec sous-menu
+          Item de menu actif avec sous-menu
         </DsfrSideMenuButton>
         <DsfrSideMenuList
-          :id="controlId"
-          :expanded="expanded"
-          :collapsable="true"
+          :id="args.controlId"
+          :expanded="args.expanded"
+          collapsable
         >
           <DsfrSideMenuListItem>
             <DsfrSideMenuLink
@@ -80,10 +88,11 @@ export const BoutonDeMenuDepliable = (args) => ({
     </DsfrSideMenuList>
   </DsfrSideMenu>
   `,
-})
-BoutonDeMenuDepliable.args = {
-  active: false,
-  expanded: false,
-  controlId: 'sidemenu-1',
-  id: 'list-id',
+  }),
+  args: {
+    active: false,
+    expanded: false,
+    controlId: 'sidemenu-1',
+    id: 'list-id',
+  },
 }

src/components/DsfrSideMenu/DsfrSideMenuButton.vue

@@ -5,7 +5,15 @@ export type { DsfrSideMenuButtonProps }
 
 defineProps<DsfrSideMenuButtonProps>()
 
-defineEmits<{ (e: 'toggleExpand', payload: string): void }>()
+defineEmits<{
+  /** Émis lors du clic sur le bouton */
+  toggleExpand: [string]
+}>()
+
+defineSlots<{
+  /** Slot par défaut pour le texte du bouton */
+  default?: () => any
+}>()
 </script>
 
 <template>
@@ -16,7 +24,6 @@ defineEmits<{ (e: 'toggleExpand', payload: string): void }>()
     :aria-controls="controlId"
     @click="$emit('toggleExpand', controlId)"
   >
-    <!-- @slot Slot par défaut pour le texte du bouton -->
     <slot />
   </button>
 </template>