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

## Pourquoi les changements ont été faits :
- Migration vers Storybook 9 nécessitant le format CSF3 moderne
- Amélioration de la maintenabilité avec TypeScript strict
- Documentation des slots avec defineSlots pour DsfrTile.vue

## Quelles modifications ont été apportées :
- DsfrTile.stories.ts : conversion au format CSF3 avec Meta/StoryObj
- DsfrTiles.stories.ts : conversion au format CSF3 avec Meta/StoryObj
- Migration de data()/this vers setup()/ref() (Composition API)
- DsfrTile.vue : ajout de defineSlots pour documenter les slots (start-details, header)
- Suppression des commentaires HTML @slot remplacés par defineSlots
- Respect des conventions typographiques françaises

Author: laruiss

src/components/DsfrTile/DsfrTile.stories.ts

@@ -1,11 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrTile from './DsfrTile.vue'
 
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tuile)
  *
  * Nous vous invitons à regarder plutôt la [nouvelle documentation](https://vue-ds.fr/composants/DsfrTile) pour ce composant
  */
-export default {
+const meta = {
   component: DsfrTile,
   title: 'Composants/DsfrTile',
   argTypes: {
@@ -82,53 +84,55 @@ export default {
       description: 'Permet de passer le fond de la tuile en gris',
     },
   },
-}
+} as Meta<typeof DsfrTile>
 
-export const TuileSimple = (args) => ({
-  components: {
-    DsfrTile,
-  },
+export default meta
 
-  data () {
-    return {
-      ...args,
-    }
-  },
+type Story = StoryObj<typeof meta>
 
-  template: `
-    <DsfrTile
-      :title="title"
-      :imgSrc="imgSrc"
-      :description="description"
-      :details="details"
-      :horizontal="horizontal"
-      :vertical="vertical"
-      :disabled="false"
-      :to="to"
-      :title-tag="titleTag"
-      :download="download"
-      :small="small"
-      :icon="icon"
-      :no-border="noBorder"
-      :shadow="shadow"
-      :no-background="noBackground"
-      :grey="grey"
-    />
-  `,
-})
-TuileSimple.args = {
-  title: 'Ma formidable tuile',
-  imgSrc: 'https://loremflickr.com/80/80/cat',
-  description: 'Une tuile absolument formidable',
-  horizontal: false,
-  disabled: false,
-  to: '#',
-  titleTag: 'h2',
-  download: false,
-  small: false,
-  icon: false,
-  noBorder: false,
-  shadow: false,
-  noBackground: false,
-  grey: false,
+export const TuileSimple: Story = {
+  render: (args) => ({
+    components: {
+      DsfrTile,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+      <DsfrTile
+        :title="args.title"
+        :imgSrc="args.imgSrc"
+        :description="args.description"
+        :details="args.details"
+        :horizontal="args.horizontal"
+        :vertical="args.vertical"
+        :disabled="args.disabled"
+        :to="args.to"
+        :title-tag="args.titleTag"
+        :download="args.download"
+        :small="args.small"
+        :icon="args.icon"
+        :no-border="args.noBorder"
+        :shadow="args.shadow"
+        :no-background="args.noBackground"
+        :grey="args.grey"
+      />
+    `,
+  }),
+  args: {
+    title: 'Ma formidable tuile',
+    imgSrc: 'https://loremflickr.com/80/80/cat',
+    description: 'Une tuile absolument formidable',
+    horizontal: false,
+    disabled: false,
+    to: '#',
+    titleTag: 'h2',
+    download: false,
+    small: false,
+    icon: false,
+    noBorder: false,
+    shadow: false,
+    noBackground: false,
+    grey: false,
+  },
 }

src/components/DsfrTile/DsfrTile.vue

@@ -19,6 +19,13 @@ const props = withDefaults(defineProps<DsfrTileProps>(), {
   icon: true,
 })
 
+defineSlots<{
+  /** Slot pour les détails d’une tuile sous forme de tags (cliquables ou non) ou de badges (4 maximum) */
+  'start-details'?: (props: Record<string, never>) => void
+  /** Slot pour l’en-tête d’une tuile */
+  header?: (props: Record<string, never>) => void
+}>()
+
 const defaultSvgAttrs = { viewBox: '0 0 80 80', width: '80px', height: '80px' }
 
 const isExternalLink = computed(() => {
@@ -84,7 +91,6 @@ const isExternalLink = computed(() => {
           v-if="$slots['start-details']"
           class="fr-tile__start"
         >
-          <!-- @slot Slot pour les détails d’une tuile sous forme de tags (cliquables ou non) ou de badges (4 maximum) -->
           <slot name="start-details" />
         </div>
       </div>

src/components/DsfrTile/DsfrTiles.stories.ts

@@ -1,9 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrTiles from './DsfrTiles.vue'
 
 /**
- * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tuile)
+ * [Voir quand l'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/tuile)
  */
-export default {
+const meta = {
   component: DsfrTiles,
   title: 'Composants/DsfrTiles',
   argTypes: {
@@ -15,51 +17,53 @@ export default {
     horizontal: {
       control: 'boolean',
       description:
-        'Permet de mettre chaque tuile sur une ligne entière, et d’envoyer aussi par défaut cette valeur à chacune des tuiles enfant (Surchargeable éventuellement par chaque objet du tableau `tiles`)',
+        'Permet de mettre chaque tuile sur une ligne entière, et d\'envoyer aussi par défaut cette valeur à chacune des tuiles enfant (Surchargeable éventuellement par chaque objet du tableau `tiles`)',
     },
   },
-}
+} as Meta<typeof DsfrTiles>
 
-export const JeuDeTuiles = (args) => ({
-  components: {
-    DsfrTiles,
-  },
+export default meta
 
-  data () {
-    return {
-      ...args,
-    }
-  },
+type Story = StoryObj<typeof meta>
 
-  template: `
-    <DsfrTiles
-      :tiles="tiles"
-      :horizontal="horizontal"
-    />
-  `,
-})
-JeuDeTuiles.args = {
-  tiles: [
-    {
-      title: 'Ma formidable tuile 1',
-      imgSrc: 'https://loremflickr.com/80/80/cat?random=1',
-      description: 'Une tuile absolument formidable',
-    },
-    {
-      title: 'Ma formidable tuile 2',
-      imgSrc: 'https://loremflickr.com/80/80/cat?random=2',
-      description: 'Une tuile absolument formidable',
-    },
-    {
-      title: 'Ma formidable tuile 3',
-      imgSrc: 'https://loremflickr.com/80/80/cat?random=3',
-      description: 'Une tuile absolument formidable',
+export const JeuDeTuiles: Story = {
+  args: {
+    tiles: [
+      {
+        title: 'Ma formidable tuile 1',
+        imgSrc: 'https://loremflickr.com/80/80/cat?random=1',
+        description: 'Une tuile absolument formidable',
+      },
+      {
+        title: 'Ma formidable tuile 2',
+        imgSrc: 'https://loremflickr.com/80/80/cat?random=2',
+        description: 'Une tuile absolument formidable',
+      },
+      {
+        title: 'Ma formidable tuile 3',
+        imgSrc: 'https://loremflickr.com/80/80/cat?random=3',
+        description: 'Une tuile absolument formidable',
+      },
+      {
+        title: 'Ma formidable tuile 4',
+        imgSrc: 'https://loremflickr.com/80/80/cat?random=4',
+        description: 'Une tuile absolument formidable',
+      },
+    ],
+    horizontal: false,
+  },
+  render: (args) => ({
+    components: {
+      DsfrTiles,
     },
-    {
-      title: 'Ma formidable tuile 4',
-      imgSrc: 'https://loremflickr.com/80/80/cat?random=4',
-      description: 'Une tuile absolument formidable',
+    setup () {
+      return { args }
     },
-  ],
-  horizontal: false,
+    template: `
+      <DsfrTiles
+        :tiles="args.tiles"
+        :horizontal="args.horizontal"
+      />
+    `,
+  }),
 }