refactor(DsfrBadge): ♻️ migre DsfrBadge.stories.ts vers le format Storybook 9

- Mettre à jour les imports pour utiliser les types Meta/StoryObj depuis @storybook/vue3-vite
- Transformer les stories pour utiliser render() au lieu de data()
- Ajouter la prop ellipsis manquante dans argTypes
- Assurer la conformité TypeScript avec satisfies Meta<typeof DsfrBadge>

Author: laruiss

src/components/DsfrAlert/DsfrAlert.stories.ts

@@ -37,9 +37,6 @@ const meta = {
       control: 'boolean',
       description: 'Permet d\'obtenir une version minimaliste de l\'alerte',
     },
-    close: {
-      description: 'Event de fermeture de l\'alerte',
-    },
     closed: {
       control: 'boolean',
       description: 'Permet d\'alterner entre l\'état ouvert ou fermé de l\'alerte',

src/components/DsfrBadge/DsfrBadge.stories.ts

@@ -1,9 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrBadge from './DsfrBadge.vue'
 
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/badge)
  */
-export default {
+const meta = {
   component: DsfrBadge,
   title: 'Composants/DsfrBadge',
   tags: ['chip'],
@@ -26,56 +28,67 @@ export default {
       control: 'boolean',
       description: 'Permet d’afficher une petite icône (si `true`)',
     },
+    ellipsis: {
+      control: 'boolean',
+      description: 'Permet de couper le texte avec des points de suspension si le texte est trop long',
+    },
   },
-}
+} satisfies Meta<typeof DsfrBadge>
 
-export const Badge = (args) => ({
-  components: {
-    DsfrBadge,
-  },
-  data () {
-    return args
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Badge: Story = {
+  args: {
+    small: false,
+    type: 'success',
+    label: 'Succès au chocolat vert',
+    noIcon: false,
   },
-  template: `
-    <DsfrBadge :label="label" :small="small" :type="type" :no-icon="noIcon" />
-  `,
-})
-Badge.args = {
-  small: false,
-  type: 'success',
-  label: 'Succès au chocolat vert',
-  noIcon: false,
+  render: (args) => ({
+    components: {
+      DsfrBadge,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+      <DsfrBadge :label="args.label" :small="args.small" :type="args.type" :no-icon="args.noIcon" />
+    `,
+  }),
 }
 
-export const TousLesBadges = (args) => ({
-  components: {
-    DsfrBadge,
+export const TousLesBadges: Story = {
+  args: {
+    label: 'Exemple', // Valeur par défaut, non utilisée car hardcodée dans le template
   },
-  data () {
-    return args
-  },
-  template: `
-    <p>
-      <DsfrBadge label="Simple" />
-    </p>
-    <p>
-      <DsfrBadge style="width: 300px" ellipsis label="Label très long qui, normalement, devrait être coupé par une ellipse" />
-    </p>
-    <p>
-      <DsfrBadge label="Succès" type="success" />
-    </p>
-    <p>
-      <DsfrBadge label="Erreur" type="error" />
-    </p>
-    <p>
-      <DsfrBadge label="Attention !" type="warning" />
-    </p>
-    <p>
-      <DsfrBadge label="Information" type="info" />
-    </p>
-    <p>
-      <DsfrBadge label="Nouveauté" type="new" />
-    </p>
-  `,
-})
-TousLesBadges.args = {}
+  render: () => ({
+    components: {
+      DsfrBadge,
+    },
+    template: `
+      <p>
+        <DsfrBadge label="Simple" />
+      </p>
+      <p>
+        <DsfrBadge style="width: 300px" ellipsis label="Label très long qui, normalement, devrait être coupé par une ellipse" />
+      </p>
+      <p>
+        <DsfrBadge label="Succès" type="success" />
+      </p>
+      <p>
+        <DsfrBadge label="Erreur" type="error" />
+      </p>
+      <p>
+        <DsfrBadge label="Attention !" type="warning" />
+      </p>
+      <p>
+        <DsfrBadge label="Information" type="info" />
+      </p>
+      <p>
+        <DsfrBadge label="Nouveauté" type="new" />
+      </p>
+    `,
+  }),
+}