Merge pull request #1135 from dnum-mi/fix/reparer-controles-dans-storybook

fix/reparer controles dans storybook

Author: laruiss

.github/copilot-instructions.md

@@ -3,6 +3,10 @@
 ## Vue d'ensemble du projet
 VueDsfr est une bibliothèque de composants Vue 3 qui porte le Système de Design Français (DSFR) vers Vue.js. Elle fournit ~50 composants accessibles et prêts pour la production suivant les normes de design du gouvernement français.
 
+## Pour les tâches que je vais te demander
+
+Voir le fichier `.github/copilot-tasks.instructions.md` pour les instructions spécifiques aux tâches.
+
 ## Architecture et structure des fichiers
 
 ### Organisation des composants
@@ -91,9 +95,10 @@ pnpm format              # Corriger automatiquement ESLint
 ## 🎯 Conventions Git & Commits
 
 ### Format des commits
+
 Utilise **TOUJOURS** le format : `type(scope): gitmoji description`
 
-**Exemple** : `feat(auth): ✨ add user authentication system`
+**Exemple** : `feat(auth): ✨ ajoute la fonctionnalité de connexion OAuth2`
 
 ### Types de commits conventionnels
 - `feat`: ✨ Nouvelles fonctionnalités

.github/copilot-tasks.instructions.md

@@ -19,10 +19,35 @@ Elles respectent les conventions définies dans `copilot-instructions.md`, `fron
 > Explique ce code comme si tu parlais à un développeur junior TypeScript.
 > Précise les concepts clés (types, inférences, hooks Vue, schémas Fastify, etc.).
 
+### Storybook
+
+**Objectif :** Générer des stories pour les composants Vue.
+
+> Analyse les composants Vue et crée des stories correspondantes dans Storybook.
+> Assure-toi que chaque état et variation du composant est couvert.
+
+*Fréquence recommandée : à chaque ajout ou modification de composant.*
+
+#### Remanier (refactor) les stories existantes
+
+> Il faut s’assurer que les stories sont au format attendu par Storybook 9, CSF3, et qu’elles utilisent les bonnes pratiques du projet.
+> Utilise les conventions de nommage et d’organisation du projet.
+> Génère des exemples d’utilisation clairs et typés.
+> Utilise les apostrophes françaises `’` et les espaces insécables ` ` devant `:` et les espaces fines insécables ` ` devant les autres ponctuations doubles `; ! ?` dans les stories et les commentaires.
+> Garde les règles typographiques françaises comme les apostrophes françaises `’` et les espaces insécables ` ` devant `:` et les espaces fines insécables ` ` devant les autres ponctuations doubles `; ! ?` dans tes refactorisations.
+> Les apostrophes françaises `’` ne posent pas de problème dans le code TypeScript ou les fichiers stories et doivent être utilisées partout où c’est pertinent, et laissées inchangées lors de la refactorisation.
+> Prends exemple sur les stories de DsfrAlert.stories.ts
+> Il faut s’assurer que les stories sont au format attendu par Storybook 9.
+> Il faut aussi remanier le fichier Vue correspondant (il porte le même nom que la story, mais avec l’extension .vue au lieu de .stories.ts) pour qu’il utilise defineSlots au lieu du commentaire HTML pour documenter les slots : `<!-- @slotName Ici la description -->`
+> Dans le commit, si les fichiers remaniés ne concernent qu’un seul composant (par exemple DsfrAlert.vue et DsfrAlert.stories.ts), indique le nom du composant en entier dans le scope du message de commit : `refactor(DsfrAlert): remanie les stories et ajoute defineSlots`
+
+---
+
 ### ✏️ Refactorisation
 
 > Refactorise ce code selon nos conventions (TypeScript strict, composition API, fonctions pures, etc.).
 > Garde la même logique métier.
+> Garde les règles typographiques françaises comme les apostrophes françaises `’` et les espaces insécables ` ` devant `:` et les espaces fines insécables ` ` devant les autres ponctuations doubles `; ! ?`.
 
 ---
 

.storybook/main.ts

@@ -4,16 +4,18 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     '@storybook/addon-themes',
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
+    '@storybook/addon-docs',
   ],
   framework: {
     name: '@storybook/vue3-vite',
-    options: {},
+    options: {
+      docgen: 'vue-component-meta',
+    },
   },
   docs: {},
+  staticDirs: ['../public'],
 }
 export default config

.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api'
-import { themes } from '@storybook/theming'
+import { addons } from 'storybook/manager-api'
+import { themes } from 'storybook/theming'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'
 

.storybook/preview.ts

@@ -1,8 +1,8 @@
-import type { Preview } from '@storybook/vue3'
+import type { Preview } from '@storybook/vue3-vite'
 
-import { themes } from '@storybook/theming'
-import { setup } from '@storybook/vue3'
+import { setup } from '@storybook/vue3-vite'
 import { FocusTrap } from 'focus-trap-vue'
+import { themes } from 'storybook/theming'
 import { defineComponent } from 'vue'
 
 import VIcon from '../src/components/VIcon/VIcon.vue'
@@ -23,7 +23,7 @@ import './theme.css'
 const preview: Preview = {
   parameters: {
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
     docs: {
       theme: { ...themes.normal, ...VueDsfrTheme },
@@ -35,7 +35,7 @@ const preview: Preview = {
       },
     },
     viewport: {
-      viewports: {
+      options: {
         DSFR_XS: {
           name: 'DSFR XS',
           styles: {

.storybook/vue-dsfr-theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming'
+import { create } from 'storybook/theming'
 
 import brandImage from '../src/assets/icone-marianne-seule.png'
 

demo-app/App.vue

@@ -274,6 +274,19 @@ const ecosystemLinks = [
 
 const search = ref('')
 const currentRoute = computed(() => route.name)
+const language = ref('fr')
+const languageSelector = ref({
+  currentLanguage: 'fr',
+  languages: [
+    { label: 'Français', codeIso: 'fr' },
+    { label: 'English', codeIso: 'en' },
+    { label: 'Español', codeIso: 'es' },
+  ],
+  onLanguageSelect: (languageCode: string) => {
+    toaster.addMessage({ description: `Langue changée en ${languageCode}`, type: 'info' })
+    language.value = languageCode
+  },
+})
 </script>
 
 <template>
@@ -287,6 +300,8 @@ const currentRoute = computed(() => route.name)
       show-search
       service-title="VueDSFR demo App"
       placeholder="Rechercher placeholder"
+      :language-selector="languageSelector"
+      @language-select="languageSelector.currentLanguage = $event.codeIso"
     >
       <template #mainnav>
         <DsfrNavigation

eslint.config.js

@@ -1,3 +1,5 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+
 import antfu from '@antfu/eslint-config'
 
 export default antfu({

package.json

@@ -93,24 +93,17 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.1.1",
-    "@chromatic-com/storybook": "^3.2.4",
+    "@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": "^8.5.3",
-    "@storybook/addon-docs": "^8.5.3",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
-    "@storybook/addon-mdx-gfm": "^8.5.3",
-    "@storybook/addon-themes": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@storybook/test-runner": "^0.21.0",
-    "@storybook/theming": "^8.5.3",
-    "@storybook/vue3": "^8.5.3",
-    "@storybook/vue3-vite": "^8.5.3",
+    "@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",
@@ -131,6 +124,7 @@
     "commitlint": "^19.7.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.20.0",
+    "eslint-plugin-storybook": "10.0.2",
     "eslint-plugin-vue": "^9.32.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
@@ -146,7 +140,7 @@
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.1",
     "start-server-and-test": "^2.0.10",
-    "storybook": "^8.5.3",
+    "storybook": "^10.0.2",
     "typescript": "~5.7.3",
     "unplugin-lightningcss": "^0.3.0",
     "vite": "^6.1.0",