refactor(storybook): ✨ migration vers Storybook moderne et harmonisation des imports

laruiss · laruiss · commit e4c1be0cae0f · 2025-11-03T13:17:26.000+01:00
## Pourquoi les changements ont été faits :
- Mise à jour vers Storybook moderne avec support Vite optimisé
- Uniformisation des imports pour une meilleure cohérence du codebase
- Amélioration des performances et de l'expérience développeur
- Préparation pour les futures versions de Storybook

## Quelles modifications ont été apportées :
- Migration de @storybook/vue3 vers @storybook/vue3-vite dans tous les fichiers stories
- Changement des imports @storybook/test vers storybook/test pour l'uniformité
- Ajout de la documentation complète des événements avec actions Storybook
- Amélioration du typage TypeScript pour les stories avec interface étendue
- Harmonisation du format CSF3 pour tous les composants
diff --git a/package.json b/package.json
@@ -93,19 +93,17 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.1.1",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@iconify/vue": "^4.3.0",
     "@playwright/test": "1.49.1",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/test": "9.0.0-alpha.2",
-    "@storybook/test-runner": "^0.23.0",
-    "@storybook/vue3": "9.1.13",
-    "@storybook/vue3-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.2",
+    "@storybook/addon-docs": "^10.0.2",
+    "@storybook/addon-links": "^10.0.2",
+    "@storybook/addon-themes": "^10.0.2",
+    "@storybook/test-runner": "^0.24.1",
+    "@storybook/vue3-vite": "^10.0.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
@@ -126,7 +124,7 @@
     "commitlint": "^19.7.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.20.0",
-    "eslint-plugin-storybook": "9.1.13",
+    "eslint-plugin-storybook": "10.0.2",
     "eslint-plugin-vue": "^9.32.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
@@ -142,7 +140,7 @@
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.1",
     "start-server-and-test": "^2.0.10",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.2",
     "typescript": "~5.7.3",
     "unplugin-lightningcss": "^0.3.0",
     "vite": "^6.1.0",
@@ -178,4 +176,4 @@
   "volta": {
     "node": "22.13.1"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/DsfrAccordion/DsfrAccordion.stories.ts b/src/components/DsfrAccordion/DsfrAccordion.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrAccordion from './DsfrAccordion.vue'
diff --git a/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.ts b/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrAccordion from './DsfrAccordion.vue'
 import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
diff --git a/src/components/DsfrAlert/DsfrAlert.stories.ts b/src/components/DsfrAlert/DsfrAlert.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrAlert from './DsfrAlert.vue'
diff --git a/src/components/DsfrAlert/DsfrAlert.vue b/src/components/DsfrAlert/DsfrAlert.vue
@@ -15,7 +15,10 @@ const props = withDefaults(defineProps<DsfrAlertProps>(), {
   closeButtonLabel: 'Fermer le message',
 })
 
-const emit = defineEmits<{ (e: 'close'): void }>()
+const emit = defineEmits<{
+  /** Émis lors de la fermeture de l’alerte */
+  close: []
+}>()
 
 defineSlots<{
   /** Slot par défaut pour le contenu de l’alerte. Utilisable si pas de description en props */
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.ts b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrBreadcrumb from './DsfrBreadcrumb.vue'
 
diff --git a/src/components/DsfrButton/DsfrButton.stories.ts b/src/components/DsfrButton/DsfrButton.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, within } from '@storybook/test'
+import { expect, fn, within } from 'storybook/test'
 
 import VIcon from '../VIcon/VIcon.vue'
 
diff --git a/src/components/DsfrButton/DsfrButtonGroup.stories.ts b/src/components/DsfrButton/DsfrButtonGroup.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import VIcon from '../VIcon/VIcon.vue'
 
diff --git a/src/components/DsfrCallout/DsfrCallout.stories.ts b/src/components/DsfrCallout/DsfrCallout.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, userEvent, within } from '@storybook/test'
+import { expect, fn, userEvent, within } from 'storybook/test'
 
 import VIcon from '../VIcon/VIcon.vue'
 
diff --git a/src/components/DsfrCard/DsfrCard.stories.ts b/src/components/DsfrCard/DsfrCard.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrBadge from './../DsfrBadge/DsfrBadge.vue'
 import DsfrTags from './../DsfrTag/DsfrTags.vue'
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts b/src/components/DsfrCheckbox/DsfrCheckbox.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, within } from '@storybook/test'
+import { expect, fn, within } from 'storybook/test'
 
 import DsfrCheckbox from './DsfrCheckbox.vue'
 
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts b/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrCheckboxSet from './DsfrCheckboxSet.vue'
 
diff --git a/src/components/DsfrConsent/DsfrConsent.stories.ts b/src/components/DsfrConsent/DsfrConsent.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 
 import DsfrConsent from './DsfrConsent.vue'
 
diff --git a/src/components/DsfrFollow/DsfrFollow.stories.ts b/src/components/DsfrFollow/DsfrFollow.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrFollow from './DsfrFollow.vue'
 
diff --git a/src/components/DsfrFollow/DsfrNewsLetter.stories.ts b/src/components/DsfrFollow/DsfrNewsLetter.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrNewsLetter from './DsfrNewsLetter.vue'
 
diff --git a/src/components/DsfrFooter/DsfrFooter.stories.ts b/src/components/DsfrFooter/DsfrFooter.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import VIcon from '../VIcon/VIcon.vue'
 
diff --git a/src/components/DsfrFranceConnect/DsfrFranceConnect.stories.ts b/src/components/DsfrFranceConnect/DsfrFranceConnect.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrFranceConnect from './DsfrFranceConnect.vue'
 
diff --git a/src/components/DsfrHeader/DsfrHeader.stories.ts b/src/components/DsfrHeader/DsfrHeader.stories.ts
@@ -1,7 +1,7 @@
 import type { DsfrHeaderProps } from './DsfrHeader.types'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, userEvent, within } from '@storybook/test'
+import { expect, fn, userEvent, within } from 'storybook/test'
 import { ref, watch } from 'vue'
 
 import DsfrNavigation from '../DsfrNavigation/DsfrNavigation.vue'
diff --git a/src/components/DsfrHighlight/DsfrHighlight.stories.ts b/src/components/DsfrHighlight/DsfrHighlight.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrHighlight from './DsfrHighlight.vue'
 
diff --git a/src/components/DsfrInput/DsfrInput.stories.ts b/src/components/DsfrInput/DsfrInput.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, userEvent, within } from '@storybook/test'
+import { expect, fn, userEvent, within } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrAlert from '../DsfrAlert/DsfrAlert.vue'
diff --git a/src/components/DsfrInput/DsfrInputGroup.stories.ts b/src/components/DsfrInput/DsfrInputGroup.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 import { ref, watch } from 'vue'
 
 import DsfrInput from './DsfrInput.vue'
diff --git a/src/components/DsfrLanguageSelector/DsfrLanguageSelector.stories.ts b/src/components/DsfrLanguageSelector/DsfrLanguageSelector.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, within } from 'storybook/test'
 import { ref, watch } from 'vue'
 
 import DsfrLanguageSelector from './DsfrLanguageSelector.vue'
diff --git a/src/components/DsfrLogo/DsfrLogo.stories.ts b/src/components/DsfrLogo/DsfrLogo.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrLogo from './DsfrLogo.vue'
 
diff --git a/src/components/DsfrMedia/DsfrPicture.stories.ts b/src/components/DsfrMedia/DsfrPicture.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, within } from '@storybook/test'
+import { expect, within } from 'storybook/test'
 
 import DsfrPicture from './DsfrPicture.vue'
 
diff --git a/src/components/DsfrMedia/DsfrVideo.stories.ts b/src/components/DsfrMedia/DsfrVideo.stories.ts
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, within } from '@storybook/test'
-import { setup } from '@storybook/vue3'
+import { expect, fn, within } from 'storybook/test'
+import { setup } from '@storybook/vue3-vite'
 
 import DsfrModal from '../DsfrModal/DsfrModal.vue'
 import VIcon from '../VIcon/VIcon.vue'
diff --git a/src/components/DsfrModal/DsfrModal.stories.ts b/src/components/DsfrModal/DsfrModal.stories.ts
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, userEvent, within } from '@storybook/test'
-import { setup } from '@storybook/vue3'
+import { expect, fn, userEvent, within } from 'storybook/test'
+import { setup } from '@storybook/vue3-vite'
 import { computed, ref } from 'vue'
 
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
diff --git a/src/components/DsfrMultiselect/DsfrMultiSelect.stories.ts b/src/components/DsfrMultiselect/DsfrMultiSelect.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 import { ref, watch } from 'vue'
 
 import DsfrMultiSelect from './DsfrMultiselect.vue'
diff --git a/src/components/DsfrNavigation/DsfrNavigation.stories.ts b/src/components/DsfrNavigation/DsfrNavigation.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrNavigation from './DsfrNavigation.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationItem.stories.ts b/src/components/DsfrNavigation/DsfrNavigationItem.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrNavigation from './DsfrNavigation.vue'
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.ts b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrNavigation from './DsfrNavigation.vue'
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenu.stories.ts b/src/components/DsfrNavigation/DsfrNavigationMenu.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrNavigation from './DsfrNavigation.vue'
diff --git a/src/components/DsfrPagination/DsfrPagination.stories.ts b/src/components/DsfrPagination/DsfrPagination.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, within } from '@storybook/test'
+import { expect, fn, within } from 'storybook/test'
 import { ref, watch } from 'vue'
 
 import DsfrPagination from './DsfrPagination.vue'
diff --git a/src/components/DsfrQuote/DsfrQuote.stories.ts b/src/components/DsfrQuote/DsfrQuote.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrQuote from './DsfrQuote.vue'
 
diff --git a/src/components/DsfrRadioButton/DsfrRadioButton.stories.ts b/src/components/DsfrRadioButton/DsfrRadioButton.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { expect, fn, within } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, within } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrRadioButton from './DsfrRadioButton.vue'
diff --git a/src/components/DsfrRange/DsfrRange.stories.ts b/src/components/DsfrRange/DsfrRange.stories.ts
@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrRange from './DsfrRange.vue'
@@ -66,8 +67,14 @@ const meta = {
       control: 'boolean',
       description: 'Désactivé',
     },
-    'onUpdate:modelValue': { action: fn() },
-    'onUpdate:lowerValue': { action: fn() },
+    'onUpdate:modelValue': {
+      description: 'Appelé à chaque changement de valeur (visible dans l’onglet ***Actions*** de Storybook)',
+      action: fn(),
+    },
+    'onUpdate:lowerValue': {
+      description: 'Appelé à chaque changement de valeur basse (visible dans l’onglet ***Actions*** de Storybook)',
+      action: fn(),
+    },
   },
 } satisfies Meta<typeof DsfrRange>
 
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.stories.ts b/src/components/DsfrSearchBar/DsfrSearchBar.stories.ts
@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
 import DsfrSearchBar from './DsfrSearchBar.vue'
diff --git a/src/components/DsfrSegmented/DsfrSegmented.stories.ts b/src/components/DsfrSegmented/DsfrSegmented.stories.ts
diff --git a/src/components/DsfrSegmented/DsfrSegmented.vue b/src/components/DsfrSegmented/DsfrSegmented.vue
diff --git a/src/components/DsfrSegmented/DsfrSegmentedSet.stories.ts b/src/components/DsfrSegmented/DsfrSegmentedSet.stories.ts
diff --git a/src/components/DsfrSegmented/DsfrSegmentedSet.vue b/src/components/DsfrSegmented/DsfrSegmentedSet.vue
diff --git a/src/stories/fondamentaux/titles.stories.ts b/src/stories/fondamentaux/titles.stories.ts
