refactor(DsfrFileUpload): ♻️ met à jour imports Storybook

- Met à jour DsfrFileUpload stories avec les imports Storybook 9
- Corrige les échappements d'apostrophes dans les descriptions
- Améliore le typage avec Meta et StoryObj

- Met à jour les imports avec Meta et StoryObj depuis @storybook/vue3-vite
- Transforme export default en const meta avec satisfies Meta<typeof DsfrFileUpload>
- Ajoute le type Story = StoryObj<typeof meta>
- Corrige les apostrophes échappées dans les descriptions

Author: laruiss

src/components/DsfrFileUpload/DsfrFileUpload.stories.ts

@@ -1,9 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrFileUpload from './DsfrFileUpload.vue'
 
 /**
- * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/ajout-de-fichier)
+ * [Voir quand l\'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/ajout-de-fichier)
  */
-export default {
+const meta = {
   component: DsfrFileUpload,
   title: 'Composants/DsfrFileUpload',
   tags: ['formulaire'],
@@ -48,122 +50,134 @@ export default {
     },
     change: {
       description:
-        'Événement émis lors du changement de valeur de `modelValue` : le paramètre passé est la valeur de la propriété `files` de l’input',
+        'Événement émis lors du changement de valeur de `modelValue` : le paramètre passé est la valeur de la propriété `files` de l\'input',
     },
   },
-}
+} satisfies Meta<typeof DsfrFileUpload>
 
-export const Televersement = (args) => ({
-  components: {
-    DsfrFileUpload,
-  },
-  data () {
-    return args
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Televersement: Story = {
+  args: {
+    id: undefined,
+    label: 'Ajouter un fichier',
+    hint: 'Pas trop volumineux svp',
+    error: undefined,
+    validMessage: undefined,
+    disabled: false,
+    accept: '.pdf,.doc,.docx',
   },
-  template: `
+  render: (args) => ({
+    components: {
+      DsfrFileUpload,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
     <DsfrFileUpload
-      :id="id"
-      :label="label"
-      :hint="hint"
-      :error="error"
-      :validMessage="validMessage"
-      :disabled="disabled"
-      :accept="accept"
+      :id="args.id"
+      :label="args.label"
+      :hint="args.hint"
+      :error="args.error"
+      :valid-message="args.validMessage"
+      :disabled="args.disabled"
+      :accept="args.accept"
     />
   `,
-})
-Televersement.args = {
-  id: undefined,
-  label: 'Ajouter un fichier',
-  hint: 'Pas trop volumineux svp',
-  error: undefined,
-  validMessage: undefined,
-  disabled: false,
-  accept: '.pdf,.doc,.docx',
+  }),
 }
 
-export const TeleversementAvecErreur = (args) => ({
-  components: {
-    DsfrFileUpload,
-  },
-  data () {
-    return args
+export const TeleversementAvecErreur: Story = {
+  args: {
+    id: undefined,
+    label: 'Ajouter un fichier',
+    hint: 'Pas trop volumineux svp',
+    error: 'Message d\'erreur',
+    accept: ['.pdf', '.doc', '.docx'],
   },
-  template: `
-  <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50);">
+  render: (args) => ({
+    components: {
+      DsfrFileUpload,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+  <div style="background-color: var(--grey-1000-50);">
     <DsfrFileUpload
-      :id="id"
-      :label="label"
-      :hint="hint"
-      :error="error"
-      :accept="accept"
+      :id="args.id"
+      :label="args.label"
+      :hint="args.hint"
+      :error="args.error"
+      :accept="args.accept"
       required
     />
   </div>
   `,
-})
-TeleversementAvecErreur.args = {
-  id: undefined,
-  label: 'Ajouter un fichier',
-  hint: 'Pas trop volumineux svp',
-  error: 'Message d’erreur',
-  accept: ['.pdf', '.doc', '.docx'],
+  }),
 }
 
-export const TeleversementAvecSucces = (args) => ({
-  components: {
-    DsfrFileUpload,
+export const TeleversementAvecSucces: Story = {
+  args: {
+    id: undefined,
+    label: 'Ajouter un fichier',
+    hint: 'Pas trop volumineux svp',
+    error: undefined,
+    validMessage: 'Téléversement effectué !',
+    disabled: false,
   },
-  data () {
-    return args
-  },
-  template: `
-  <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50);">
+  render: (args) => ({
+    components: {
+      DsfrFileUpload,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+  <div style="background-color: var(--grey-1000-50);">
     <DsfrFileUpload
-      :id="id"
-      :label="label"
-      :hint="hint"
-      :error="error"
-      :validMessage="validMessage"
-      :disabled="disabled"
+      :id="args.id"
+      :label="args.label"
+      :hint="args.hint"
+      :error="args.error"
+      :valid-message="args.validMessage"
+      :disabled="args.disabled"
     />
   </div>
   `,
-})
-TeleversementAvecSucces.args = {
-  id: undefined,
-  label: 'Ajouter un fichier',
-  hint: 'Pas trop volumineux svp',
-  error: undefined,
-  validMessage: 'Téléversement effectué !',
-  disabled: false,
+  }),
 }
 
-export const TeleversementDesactive = (args) => ({
-  components: {
-    DsfrFileUpload,
-  },
-  data () {
-    return args
+export const TeleversementDesactive: Story = {
+  args: {
+    id: undefined,
+    label: 'Ajouter un fichier',
+    hint: 'Pas trop volumineux svp',
+    error: undefined,
+    validMessage: undefined,
+    disabled: true,
   },
-  template: `
-  <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50);">
+  render: (args) => ({
+    components: {
+      DsfrFileUpload,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+  <div style="background-color: var(--grey-1000-50);">
     <DsfrFileUpload
-      :id="id"
-      :label="label"
-      :hint="hint"
-      :error="error"
-      :validMessage="validMessage"
-      :disabled="disabled"
+      :id="args.id"
+      :label="args.label"
+      :hint="args.hint"
+      :error="args.error"
+      :valid-message="args.validMessage"
+      :disabled="args.disabled"
     />
   </div>
   `,
-})
-TeleversementDesactive.args = {
-  id: undefined,
-  label: 'Ajouter un fichier',
-  hint: 'Pas trop volumineux svp',
-  error: undefined,
-  validMessage: undefined,
-  disabled: true,
+  }),
 }