refactor(DsfrTableHeader): ♻️ convertit les stories au format CSF3

laruiss · laruiss · commit 4edda6c67b78 · 2025-11-03T13:18:44.000+01:00
## Pourquoi les changements ont été faits :
- migration vers Storybook 9 avec format CSF3
- passage de l'Options API à la Composition API dans les stories

## Quelles modifications ont été apportées :
- définit la meta avec typage Meta&lt;typeof DsfrTableHeader&gt;
- convertit 2 stories en StoryObj avec render functions
- remplace data() par setup() avec état réactif
- EnTeteDeTableau utilise computedHeaderAttrs pour gérer onClick
- EnTeteDeTableauAvecIcone utilise ref(currentIcon) pour basculer les icônes de tri
- DsfrTableHeader.vue conserve son withDefaults (valeurs par défaut présentes)
diff --git a/src/components/DsfrDataTable/DsfrDataTable.stories.ts b/src/components/DsfrDataTable/DsfrDataTable.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { ref } from 'vue'
 
diff --git a/src/components/DsfrFileDownload/DsfrFileDownloadList.stories.ts b/src/components/DsfrFileDownload/DsfrFileDownloadList.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrFileDownloadList from './DsfrFileDownloadList.vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.stories.ts b/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { ref } from 'vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuItem.stories.ts b/src/components/DsfrNavigation/DsfrNavigationMenuItem.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { ref } from 'vue'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuLink.stories.ts b/src/components/DsfrNavigation/DsfrNavigationMenuLink.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 DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
diff --git a/src/components/DsfrShare/DsfrShare.stories.ts b/src/components/DsfrShare/DsfrShare.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrShare from './DsfrShare.vue'
 
diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.stories.ts b/src/components/DsfrSideMenu/DsfrSideMenu.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { fn } from 'storybook/test'
 import { ref } from 'vue'
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuButton.stories.ts b/src/components/DsfrSideMenu/DsfrSideMenuButton.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuButton from './DsfrSideMenuButton.vue'
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuLink.stories.ts b/src/components/DsfrSideMenu/DsfrSideMenuLink.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuLink from './DsfrSideMenuLink.vue'
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuList.stories.ts b/src/components/DsfrSideMenu/DsfrSideMenuList.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuList from './DsfrSideMenuList.vue'
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuListItem.stories.ts b/src/components/DsfrSideMenu/DsfrSideMenuListItem.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuLink from './DsfrSideMenuLink.vue'
diff --git a/src/components/DsfrSkipLinks/DsfrSkipLinks.stories.ts b/src/components/DsfrSkipLinks/DsfrSkipLinks.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { expect, userEvent, within } from 'storybook/test'
 
diff --git a/src/components/DsfrStepper/DsfrStepper.stories.ts b/src/components/DsfrStepper/DsfrStepper.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrStepper from './DsfrStepper.vue'
 
diff --git a/src/components/DsfrSummary/DsfrSummary.stories.ts b/src/components/DsfrSummary/DsfrSummary.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrSummary from './DsfrSummary.vue'
 
diff --git a/src/components/DsfrTable/DsfrTable.stories.ts b/src/components/DsfrTable/DsfrTable.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { setup } from '@storybook/vue3-vite'
 import { fn } from 'storybook/test'
diff --git a/src/components/DsfrTable/DsfrTableCell.stories.ts b/src/components/DsfrTable/DsfrTableCell.stories.ts
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { fn } from '@storybook/test'
 import { setup } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
 
 import DsfrTag from '../DsfrTag/DsfrTag.vue'
 
diff --git a/src/components/DsfrTable/DsfrTableHeader.stories.ts b/src/components/DsfrTable/DsfrTableHeader.stories.ts
@@ -1,4 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import { fn } from 'storybook/test'
+import { ref } from 'vue'
 
 import VIcon from '../VIcon/VIcon.vue'
 
@@ -7,7 +10,7 @@ import DsfrTableHeader from './DsfrTableHeader.vue'
 
 import './table.stories.css'
 
-export default {
+const meta = {
   component: DsfrTableHeader,
   title: 'Composants/DsfrTableHeader',
   argTypes: {
@@ -30,40 +33,45 @@ export default {
       description: 'Fonction pour montrer le clic sur un en-tête',
     },
   },
-}
+} as Meta<typeof DsfrTableHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
 
 const header = 'En-tête'
 const headerAttrs = {
   class: 'ns-resize',
   onClick: () => {},
 }
 
-export const EnTeteDeTableau = (args) => ({
-  components: {
-    DsfrTable,
-    DsfrTableHeader,
-    VIcon,
+export const EnTeteDeTableau: Story = {
+  args: {
+    header,
+    headerAttrs,
+    onClickHeader: fn(),
   },
-
-  data () {
-    return {
-      ...args,
-      headerAttrs: {
+  render: (args) => ({
+    components: {
+      DsfrTable,
+      DsfrTableHeader,
+      VIcon,
+    },
+    setup () {
+      const computedHeaderAttrs = {
         ...args.headerAttrs,
         onClick () {
           args.onClickHeader(args.header)
         },
-      },
-    }
-  },
-
-  template: `
+      }
+      return { args, computedHeaderAttrs }
+    },
+    template: `
       <DsfrTable
         title="Titre du tableau"
       >
         <template v-slot:header>
           <tr>
-            <DsfrTableHeader :header="header" :header-attrs="headerAttrs" />
+            <DsfrTableHeader :header="args.header" :header-attrs="computedHeaderAttrs" />
           </tr>
         </template>
         <tr>
@@ -72,51 +80,56 @@ export const EnTeteDeTableau = (args) => ({
           </td>
         </tr>
       </DsfrTable>
-  `,
-})
-
-EnTeteDeTableau.args = {
-  header,
-  headerAttrs,
+    `,
+  }),
 }
 
 const icon = {
   name: 'ri-sort-desc',
 }
 
-export const EnTeteDeTableauAvecIcone = (args) => ({
-  components: {
-    DsfrTable,
-    DsfrTableHeader,
-    VIcon,
+export const EnTeteDeTableauAvecIcone: Story = {
+  args: {
+    header,
+    headerAttrs: {
+      ...headerAttrs,
+      style: 'display: flex; justify-content: space-between; align-items: center',
+    },
+    icon,
+    onClickHeader: fn(),
   },
+  render: (args) => ({
+    components: {
+      DsfrTable,
+      DsfrTableHeader,
+      VIcon,
+    },
+    setup () {
+      const currentIcon = ref(args.icon)
 
-  data () {
-    return {
-      ...args,
-      headerAttrs: {
+      const computedHeaderAttrs = {
         ...args.headerAttrs,
         onClick: () => {
-          const iconName = this.icon?.name
-          this.icon =
+          const iconName = currentIcon.value?.name
+          currentIcon.value =
             iconName === 'ri-sort-desc'
               ? { name: 'ri-sort-asc' }
               : iconName === 'ri-sort-asc'
                 ? undefined
                 : { name: 'ri-sort-desc' }
           args.onClickHeader(args.header)
         },
-      },
-    }
-  },
+      }
 
-  template: `
+      return { args, computedHeaderAttrs, currentIcon }
+    },
+    template: `
       <DsfrTable
         title="Titre du tableau"
       >
         <template v-slot:header>
           <tr>
-            <DsfrTableHeader :header="header" :header-attrs="headerAttrs" :icon="icon" />
+            <DsfrTableHeader :header="args.header" :header-attrs="computedHeaderAttrs" :icon="currentIcon" />
           </tr>
         </template>
         <tr>
@@ -125,13 +138,6 @@ export const EnTeteDeTableauAvecIcone = (args) => ({
           </td>
         </tr>
       </DsfrTable>
-  `,
-})
-EnTeteDeTableauAvecIcone.args = {
-  header,
-  headerAttrs: {
-    ...headerAttrs,
-    style: 'display: flex; justify-content: space-between; align-items: center',
-  },
-  icon,
+    `,
+  }),
 }
diff --git a/src/components/DsfrTabs/DsfrTabContent.stories.ts b/src/components/DsfrTabs/DsfrTabContent.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrTabContent from './DsfrTabContent.vue'
 import DsfrTabs from './DsfrTabs.vue'
diff --git a/src/components/DsfrTabs/DsfrTabItem.stories.ts b/src/components/DsfrTabs/DsfrTabItem.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { setup } from '@storybook/vue3-vite'
 
diff --git a/src/components/DsfrTabs/DsfrTabs.stories.ts b/src/components/DsfrTabs/DsfrTabs.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { expect, userEvent, within } from 'storybook/test'
 import { ref } from 'vue'
diff --git a/src/components/DsfrTag/DsfrTag.stories.ts b/src/components/DsfrTag/DsfrTag.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/vue3'
+import type { Meta } from '@storybook/vue3-vite'
 
 import DsfrTag from './DsfrTag.vue'
 
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.ts b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { expect, fn, within } from 'storybook/test'
 import { watch } from 'vue'
diff --git a/src/components/DsfrTooltip/DsfrTooltip.stories.ts b/src/components/DsfrTooltip/DsfrTooltip.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DsfrTooltip from './DsfrTooltip.vue'
 
diff --git a/src/components/DsfrTranscription/DsfrTranscription.stories.ts b/src/components/DsfrTranscription/DsfrTranscription.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { setup } from '@storybook/vue3-vite'
 
diff --git a/src/components/VIcon/VIcon.stories.ts b/src/components/VIcon/VIcon.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import VIcon from './VIcon.vue'
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from '@storybook/vue3'`
	`1`	`+import type { Meta, StoryObj } from '@storybook/vue3-vite'`
`2`	`2`
`3`	`3`	`import { ref } from 'vue'`
`4`	`4`