refactor(DsfrCheckbox): ♻️ utilise defineSlots et met à jour pour Storybook 9

- Améliorer la documentation des slots avec JSDoc
- Préparer la migration vers Storybook 9 avec les imports corrects

- Ajout de defineSlots avec JSDoc dans DsfrCheckbox.vue (label, required-tip)
- Ajout de defineSlots avec JSDoc dans DsfrCheckboxSet.vue (default, legend, required-tip)
- Mise à jour des imports de '@storybook/test' dans les stories
- Ajout des types Meta et StoryObj dans les fichiers stories
- Échappement des apostrophes dans les descriptions

Author: laruiss

src/components/DsfrCheckbox/DsfrCheckbox.stories.ts

@@ -1,27 +1,29 @@
-import { expect, fn, within } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { expect, fn, within } from '@storybook/test'
 
 import DsfrCheckbox from './DsfrCheckbox.vue'
 
 /**
- * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/case-a-cocher)
+ * [Voir quand l'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/case-a-cocher)
  */
-export default {
+const meta = {
   component: DsfrCheckbox,
   title: 'Composants/DsfrCheckbox',
   tags: ['formulaire'],
   argTypes: {
     id: {
       control: 'text',
       description:
-        '(optionnel) Valeur de l’attribut `id` de la checkbox. Par défaut, un id pseudo-aléatoire sera donné.',
+        '(optionnel) Valeur de l\'attribut `id` de la checkbox. Par défaut, un id pseudo-aléatoire sera donné.',
     },
     // label: {
     //   control: 'text',
     //   description: 'Label de la case à cocher',
     // },
     name: {
       control: 'text',
-      description: 'Valeur de l’attribut `name` de la case à cocher',
+      description: 'Valeur de l\'attribut `name` de la case à cocher',
     },
     hint: {
       control: 'text',
@@ -41,7 +43,7 @@ export default {
     },
     errorMessage: {
       control: 'text',
-      description: 'Texte du message à afficher en cas d’erreur',
+      description: 'Texte du message à afficher en cas d\'erreur',
     },
     validMessage: {
       control: 'text',
@@ -54,11 +56,15 @@ export default {
     },
     'update:modelValue': {
       description:
-        'Événement émis lors du changement de l’état coché (`true`) ou non (`false`)',
+        'Événement émis lors du changement de l\'état coché (`true`) ou non (`false`)',
     },
     onChange: { action: fn() },
   },
-}
+} satisfies Meta<typeof DsfrCheckbox>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
 
 export const Checkbox = (args) => ({
   components: { DsfrCheckbox },

src/components/DsfrCheckbox/DsfrCheckbox.vue

@@ -7,6 +7,20 @@ import { useRandomId } from '../../utils/random-utils'
 
 export type { DsfrCheckboxProps }
 
+/**
+ * Slots disponibles pour DsfrCheckbox
+ */
+defineSlots<{
+  /**
+   * Slot pour personnaliser tout le contenu de la balise <label>
+   */
+  label?: () => any
+  /**
+   * Slot pour indiquer que le champ est obligatoire
+   */
+  'required-tip'?: () => any
+}>()
+
 defineOptions({
   inheritAttrs: false,
 })

src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts

@@ -1,23 +1,25 @@
-import { expect, fn, within } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { expect, within } from '@storybook/test'
 
 import DsfrCheckboxSet from './DsfrCheckboxSet.vue'
 
 /**
- * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/case-a-cocher)
+ * [Voir quand l'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/case-a-cocher)
  */
-export default {
+const meta = {
   component: DsfrCheckboxSet,
   title: 'Composants/DsfrCheckboxSet',
   tags: ['formulaire'],
   argTypes: {
     disabled: {
       control: 'boolean',
       description:
-        'Indique si l’ensemble des checkboxes doivent être désactivées (`true`) ou non (`false`, défaut)',
+        'Indique si l\'ensemble des checkboxes doivent être désactivées (`true`) ou non (`false`, défaut)',
     },
     errorMessage: {
       control: 'text',
-      description: 'Texte du message à afficher en cas d’erreur',
+      description: 'Texte du message à afficher en cas d\'erreur',
     },
     validMessage: {
       control: 'text',
@@ -34,12 +36,12 @@ export default {
     },
     // legend: {
     //   control: 'text',
-    //   description: 'Titre de l’ensemble (Set) des checkboxes',
+    //   description: 'Titre de l'ensemble (Set) des checkboxes',
     // },
     options: {
       control: 'object',
       description:
-        'Tableau de `string` (la valeur `value` de la checkbox sera identique au `label`) ou d’objets contenant les props à passer à chaque composant DsfrCheckbox, sauf `modelValue` qui sera calculée à partir de `modelValue` du DsfrCheckboxSet.',
+        'Tableau de `string` (la valeur `value` de la checkbox sera identique au `label`) ou d\'objets contenant les props à passer à chaque composant DsfrCheckbox, sauf `modelValue` qui sera calculée à partir de `modelValue` du DsfrCheckboxSet.',
     },
     modelValue: {
       control: 'object',
@@ -55,7 +57,11 @@ export default {
       action: fn(),
     },
   },
-}
+} satisfies Meta<typeof DsfrCheckboxSet>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
 
 export const CheckboxSet = (args) => ({
   components: { DsfrCheckboxSet },

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -20,9 +20,21 @@ const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
   modelValue: () => [],
 })
 
+/**
+ * Slots disponibles pour DsfrCheckboxSet
+ */
 defineSlots<{
+  /**
+   * Slot par défaut pour personnaliser l'ensemble des checkboxes
+   */
   default?: () => any
+  /**
+   * Slot pour personnaliser tout le contenu de la balise <legend>
+   */
   legend?: () => any
+  /**
+   * Slot pour indiquer que le champ est obligatoire
+   */
   'required-tip'?: () => any
 }>()