refactor(DsfrTag): ♻️ migre les stories vers Storybook 9 et CSF3

- Mise à jour vers la syntaxe CSF3 pour Storybook 9
- Amélioration du typage et de la maintenabilité
- Harmonisation avec les autres composants du projet

- Ajout des imports de types Meta depuis @storybook/vue3
- Conversion de la story Etiquette du format fonction vers le format objet CSF3
- Utilisation de la syntaxe `as Meta<typeof DsfrTag>` pour gérer le composant générique
- Suppression du template inline au profit du rendu direct des args
- Conservation de tous les argTypes et descriptions existants

Author: laruiss

src/components/DsfrTag/DsfrTag.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta } from '@storybook/vue3'
+
+import DsfrTag from './DsfrTag.vue'
+
+/**
+ * [Voir quand l'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tag)
+ */
+const meta = {
+  component: DsfrTag,
+  title: 'Composants/DsfrTag',
+  tags: ['chip'],
+  argTypes: {
+    class: {
+      control: 'text',
+      description: 'Classe CSS (facultative) pour utiliser les icônes du DSFR',
+      table: {
+        category: 'Attributs',
+      },
+    },
+    label: {
+      control: 'text',
+      description: '**Texte** du tag',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Indique si le tag est **inactivé**',
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Indique si le tag est **selectionné**',
+      table: {
+        category: 'PROPS',
+      },
+    },
+    selectable: {
+      control: 'boolean',
+      description: 'Indique si le tag est **selectionnable**',
+    },
+    icon: {
+      control: 'text',
+      description:
+        '**Nom de l’icône** (tel que sur le site [RemixIcon](https://remixicon.com), exemple: `"ri-checkbox-circle-line"`) à afficher à côté du texte du bouton.\n\n Par défaut, l’icône est',
+    },
+    iconOnly: {
+      control: 'boolean',
+      description:
+        'Indique si l’icône doit apparaître seule (le `label` sera dans l’`aria-label` de l’icône)',
+    },
+    link: {
+      control: 'text',
+      description:
+        'URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à `to` de `RouterLink` pour un lien interne',
+    },
+    small: {
+      control: 'boolean',
+      description: 'Indique si le tag doit être petit',
+    },
+    tagName: {
+      control: 'text',
+      description: `Balise ou composant à utiliser (e.g. : \`"p"\`, \`"button"\`, \`"strong"\`, \`"em"\`).
+- \`"p"\` par défaut
+- si \`link\` est indiqué, le défaut est \`"a"\` si le lien est externe et \`"RouterLink"\`  si le lien est interne
+- si \`disabled\` est à \`true\` et qu'il n'y a pas de lien, le défaut est \`"button".\`
+      `,
+    },
+  },
+} satisfies Meta<typeof DsfrTag>
+
+export default meta
+
+export const Etiquette = {
+  render: (args: typeof meta.args) => ({
+    components: { DsfrTag },
+
+    setup () {
+      return args
+    },
+
+    template: `
+    <DsfrTag
+      :label="label"
+      :icon="icon"
+      :tag-name="tagName"
+      :icon-only="iconOnly"
+      :disabled="disabled"
+      :selected="selected"
+      :selectable="selectable"
+      :small="small"
+      @select="selected = !selected"
+
+    />
+  `,
+  }),
+  args: {
+    label: 'Étiquette',
+    icon: 'ri-arrow-right-line',
+    iconOnly: false,
+    disabled: false,
+    small: false,
+    selected: false,
+    selectable: true,
+    tagName: 'button',
+  },
+}

src/components/DsfrTag/DsfrTag.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<DsfrTagProps<T>>(), {
 })
 
 defineEmits<{
+  /** Émis lors de la sélection et désélection du tag */
   select: [[unknown, boolean]]
 }>()
 

src/components/DsfrTag/DsfrTags.stories.ts

@@ -9,10 +9,6 @@ export default {
   title: 'Composants/DsfrTags',
   tags: ['chip'],
   argTypes: {
-    class: {
-      control: 'text',
-      description: 'Classe CSS (facultative) pour utiliser les icônes du DSFR',
-    },
     label: {
       control: 'text',
       description: '**Texte** du tag',
@@ -60,11 +56,6 @@ export default {
   },
 }
 
-const tagGroup = [
-  { label: 'Tag sans icône' },
-  { label: 'Tag avec icône', icon: 'ri-arrow-right-line' },
-]
-
 const tags = [
   [
     { label: 'Tag sans icône' },
@@ -111,40 +102,6 @@ const tags = [
   ],
 ]
 
-export const Etiquette = (args) => ({
-  components: { DsfrTag },
-  data () {
-    const obj = {
-      ...args,
-      className: args.class,
-    }
-    delete obj.class
-    return obj
-  },
-  template: `
-    <DsfrTag
-      :class="className"
-      :label="label"
-      :icon="icon"
-      :tagName="tagName"
-      :iconOnly="iconOnly"
-      :disabled="disabled"
-      :selected="selected"
-      :small="small"
-    />
-  `,
-})
-Etiquette.args = {
-  label: 'Étiquette',
-  class: '',
-  icon: '',
-  iconOnly: false,
-  disabled: false,
-  small: false,
-  selected: false,
-  tagName: 'button',
-}
-
 export const GroupeDEtiquettes = (args) => ({
   components: { DsfrTags },
   data () {
@@ -157,7 +114,7 @@ export const GroupeDEtiquettes = (args) => ({
   `,
 })
 GroupeDEtiquettes.args = {
-  tags: tagGroup,
+  tags: tags[0],
 }
 
 export const EtiquettesSimples = (args) => ({

src/components/DsfrTag/DsfrTags.types.ts

@@ -10,8 +10,8 @@ export type DsfrTagProps<T = string> = {
   iconOnly?: boolean
 } & ({
   selectable: true
-  selected?: boolean
-  value?: T
+  selected: boolean
+  value: T
 } | {
   selectable?: false
 })