@cnamts/synapse 1.0.9 → 1.0.10

package/src/composables/validation/FormValidation.stories.ts

@@ -0,0 +1,402 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import SyForm from '@/components/Customs/SyForm/SyForm.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import { VBtn, VTextField } from 'vuetify/components'
+
+/**
+ * La documentation sur le système de validation en cascade de Synapse Design System.
+ */
+export default {
+	title: 'Composables/ValidationSystem',
+	component: SyForm,
+	argTypes: {
+		validateOnSubmit: {
+			control: 'boolean',
+			description: 'Active ou désactive la validation automatique lors de la soumission',
+			defaultValue: true,
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				component: 'Le système de validation en cascade permet de gérer facilement la validation de formulaires complexes et imbriqués.',
+			},
+		},
+	},
+} satisfies Meta<typeof SyForm>
+
+type Story = StoryObj<typeof SyForm>
+
+// Exemple de base
+export const SimpleForm: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, VBtn },
+		setup() {
+			const name = ref('')
+			const email = ref('')
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { name, email, onSubmit, args }
+		},
+		template: `
+      <SyForm v-bind="args" @submit="onSubmit">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required />
+          <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+          <v-btn type="submit" color="primary">Soumettre</v-btn>
+        </div>
+      </SyForm>
+    `,
+	}),
+	args: {
+		validateOnSubmit: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyForm @submit="onSubmit">
+    <div class="d-flex flex-column gap-4">
+      <SyTextField v-model="name" label="Nom" required />
+      <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+      <v-btn type="submit" color="primary">Soumettre</v-btn>
+    </div>
+  </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyForm from '@cnamts/synapse'
+import SyTextField from '@cnamts/synapse'
+
+const name = ref('')
+const email = ref('')
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Formulaire valide !')
+  }
+}
+</script>
+`,
+			},
+		],
+	},
+}
+
+// Exemple de formulaire avec composants mixtes
+export const MixedComponentsForm: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, SySelect, SyCheckbox, DatePicker, VBtn, VTextField },
+		setup() {
+			const user = ref({
+				name: '',
+				birthDate: null,
+				country: '',
+				acceptTerms: false,
+			})
+
+			const countries = [
+				{ text: 'France', value: 'fr' },
+				{ text: 'Allemagne', value: 'de' },
+				{ text: 'Espagne', value: 'es' },
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide ! Données : ' + JSON.stringify(user.value))
+				}
+			}
+
+			return { user, countries, onSubmit, args }
+		},
+		template: `
+      <SyForm v-bind="args" @submit="onSubmit" class="form-mixed">
+        <div class="d-flex flex-column gap-4">
+          <!-- Composant personnalisé avec useValidatable -->
+          <SyTextField v-model="user.name" label="Nom" required />
+          
+          <!-- Composant personnalisé avec useValidatable -->
+          <DatePicker v-model="user.birthDate" label="Date de naissance" required />
+          
+          <!-- Composant personnalisé avec useValidatable -->
+          <SySelect v-model="user.country" :items="countries" label="Pays" required />
+          
+          <!-- Composant natif Vuetify -->
+          <v-text-field v-model="user.city" label="Ville" :rules="[v => !!v || 'Ville requise']"></v-text-field>
+          
+          <!-- Composant personnalisé avec useValidatable -->
+          <SyCheckbox v-model="user.acceptTerms" label="J'accepte les conditions" required />
+          
+          <v-btn type="submit" color="primary">Soumettre</v-btn>
+        </div>
+      </SyForm>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyForm @submit="onSubmit" class="form-mixed">
+    <div class="d-flex flex-column gap-4">
+      <!-- Composant personnalisé avec useValidatable -->
+      <SyTextField v-model="user.name" label="Nom" required />
+      
+      <!-- Composant personnalisé avec useValidatable -->
+      <DatePicker v-model="user.birthDate" label="Date de naissance" required />
+      
+      <!-- Composant personnalisé avec useValidatable -->
+      <SySelect v-model="user.country" :items="countries" label="Pays" required />
+      
+      <!-- Composant natif Vuetify -->
+      <v-text-field v-model="user.city" label="Ville" :rules="[v => !!v || 'Ville requise']"></v-text-field>
+      
+      <!-- Composant personnalisé avec useValidatable -->
+      <SyCheckbox v-model="user.acceptTerms" label="J'accepte les conditions" required />
+      
+      <v-btn type="submit" color="primary">Soumettre</v-btn>
+    </div>
+  </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyForm from '@cnamts/synapse'
+import SyTextField from '@cnamts/synapse'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import { VTextField } from 'vuetify/components'
+
+const user = ref({
+  name: '',
+  birthDate: null,
+  country: '',
+  city: '',
+  acceptTerms: false,
+})
+
+const countries = [
+  { text: 'France', value: 'fr' },
+  { text: 'Allemagne', value: 'de' },
+  { text: 'Espagne', value: 'es' },
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Formulaire valide ! Données : ' + JSON.stringify(user.value))
+  }
+}
+</script>
+`,
+			},
+		],
+	},
+}
+
+// Exemple de formulaire imbriqué
+export const NestedForm: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, VBtn },
+		setup() {
+			const user = ref({
+				name: '',
+				address: {
+					street: '',
+					city: '',
+					zipcode: '',
+				},
+			})
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide ! Données : ' + JSON.stringify(user.value))
+				}
+			}
+
+			return { user, onSubmit, args }
+		},
+		template: `
+      <SyForm v-bind="args" @submit="onSubmit">
+        <div class="d-flex flex-column gap-4">
+          <h3>Informations personnelles</h3>
+          <SyTextField v-model="user.name" label="Nom" required />
+          
+          <fieldset style="border: 1px solid #ccc; padding: 16px; border-radius: 4px;">
+            <legend>Adresse</legend>
+            <div class="d-flex flex-column gap-4">
+              <SyTextField v-model="user.address.street" label="Rue" required />
+              <SyTextField v-model="user.address.city" label="Ville" required />
+              <SyTextField v-model="user.address.zipcode" label="Code postal" required />
+            </div>
+          </fieldset>
+          
+          <v-btn type="submit" color="primary">Soumettre</v-btn>
+        </div>
+      </SyForm>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyForm @submit="onSubmit">
+    <div class="d-flex flex-column gap-4">
+      <h3>Informations personnelles</h3>
+      <SyTextField v-model="user.name" label="Nom" required />
+      
+      <fieldset style="border: 1px solid #ccc; padding: 16px; border-radius: 4px;">
+        <legend>Adresse</legend>
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="user.address.street" label="Rue" required />
+          <SyTextField v-model="user.address.city" label="Ville" required />
+          <SyTextField v-model="user.address.zipcode" label="Code postal" required />
+        </div>
+      </fieldset>
+      
+      <v-btn type="submit" color="primary">Soumettre</v-btn>
+    </div>
+  </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyForm from '@cnamts/synapse'
+import SyTextField from '@cnamts/synapse'
+
+const user = ref({
+  name: '',
+  address: {
+    street: '',
+    city: '',
+    zipcode: '',
+  },
+})
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Formulaire valide ! Données : ' + JSON.stringify(user.value))
+  }
+}
+</script>
+`,
+			},
+		],
+	},
+}
+
+// Exemple d'implémentation personnalisée
+export const CustomImplementation: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, VBtn },
+		setup() {
+			const email = ref('')
+			const password = ref('')
+			const confirmPassword = ref('')
+
+			const validatePasswordMatch = () => {
+				return password.value === confirmPassword.value || 'Les mots de passe ne correspondent pas'
+			}
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Inscription réussie !')
+				}
+			}
+
+			return { email, password, confirmPassword, validatePasswordMatch, onSubmit, args }
+		},
+		template: `
+      <SyForm v-bind="args" @submit="onSubmit">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="email" label="Email" type="email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+          <SyTextField v-model="password" label="Mot de passe" type="password" required :rules="[v => v.length >= 8 || 'Minimum 8 caractères']" />
+          <SyTextField 
+            v-model="confirmPassword" 
+            label="Confirmer le mot de passe" 
+            type="password" 
+            required 
+            :rules="[validatePasswordMatch]" 
+          />
+          <v-btn type="submit" color="primary">S'inscrire</v-btn>
+        </div>
+      </SyForm>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyForm @submit="onSubmit">
+    <div class="d-flex flex-column gap-4">
+      <SyTextField v-model="email" label="Email" type="email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+      <SyTextField v-model="password" label="Mot de passe" type="password" required :rules="[v => v.length >= 8 || 'Minimum 8 caractères']" />
+      <SyTextField 
+        v-model="confirmPassword" 
+        label="Confirmer le mot de passe" 
+        type="password" 
+        required 
+        :rules="[validatePasswordMatch]" 
+      />
+      <v-btn type="submit" color="primary">S'inscrire</v-btn>
+    </div>
+  </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyForm from '@cnamts/synapse'
+import SyTextField from '@cnamts/synapse'
+
+const email = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+
+const validatePasswordMatch = () => {
+  return password.value === confirmPassword.value || 'Les mots de passe ne correspondent pas'
+}
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Inscription réussie !')
+  }
+}
+</script>
+`,
+			},
+		],
+	},
+}

package/src/composables/validation/useFormValidation.ts

@@ -0,0 +1,91 @@
+import { provide, inject, ref, type InjectionKey, type Ref } from 'vue'
+
+// Type pour les composants pouvant être validés
+export interface ValidatableComponent {
+	validateOnSubmit: () => Promise<boolean> | boolean
+}
+
+// Clé d'injection pour le registre des composants validables
+const ValidatableComponentsKey: InjectionKey<{
+	register: (component: ValidatableComponent) => void
+	unregister: (component: ValidatableComponent) => void
+	components: Ref<ValidatableComponent[]>
+}> = Symbol('ValidatableComponents')
+
+/**
+ * Hook pour le formulaire parent qui fournit un registre pour les composants validables
+ * @returns Fonctions pour gérer la validation des composants enfants
+ */
+export function useFormValidation() {
+	// Liste des composants validables enregistrés
+	const validatableComponents = ref<ValidatableComponent[]>([])
+
+	// Fonction pour enregistrer un composant validable
+	const register = (component: ValidatableComponent) => {
+		if (!validatableComponents.value.includes(component)) {
+			validatableComponents.value.push(component)
+		}
+	}
+
+	// Fonction pour supprimer un composant validable du registre
+	const unregister = (component: ValidatableComponent) => {
+		const index = validatableComponents.value.indexOf(component)
+		if (index !== -1) {
+			validatableComponents.value.splice(index, 1)
+		}
+	}
+
+	// Fournir le registre aux composants enfants
+	provide(ValidatableComponentsKey, {
+		register,
+		unregister,
+		components: validatableComponents,
+	})
+
+	/**
+	 * Valide tous les composants enfants enregistrés
+	 * @returns Promise<boolean> - true si tous les composants sont valides
+	 */
+	const validateAll = async (): Promise<boolean> => {
+		if (validatableComponents.value.length === 0) {
+			return true
+		}
+
+		// Valider tous les composants et collecter les résultats
+		const results = await Promise.all(
+			validatableComponents.value.map(component =>
+				Promise.resolve(component.validateOnSubmit()),
+			),
+		)
+
+		// Retourner true uniquement si tous les composants sont valides
+		return results.every(result => result === true)
+	}
+
+	return {
+		validateAll,
+		validatableComponents,
+	}
+}
+
+/**
+ * Hook pour les composants enfants qui doivent s'enregistrer auprès du formulaire parent
+ * @returns Fonction pour s'enregistrer et se désinscrire du formulaire parent
+ */
+export function useValidatableComponent() {
+	// Récupérer le registre du formulaire parent
+	const formRegistry = inject(ValidatableComponentsKey, null)
+
+	// Si le composant n'est pas dans un formulaire avec useFormValidation, ne rien faire
+	if (!formRegistry) {
+		return {
+			register: () => {},
+			unregister: () => {},
+		}
+	}
+
+	return {
+		register: formRegistry.register,
+		unregister: formRegistry.unregister,
+	}
+}

package/src/composables/validation/useValidatable.ts

@@ -0,0 +1,41 @@
+import { onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { useValidatableComponent } from './useFormValidation'
+
+/**
+ * Hook pour rendre un composant validable automatiquement dans un SyForm
+ * Ce composable permet à un composant de s'auto-enregistrer auprès d'un formulaire parent
+ * sans avoir à modifier manuellement le code de chaque composant.
+ *
+ * @param validateMethod Fonction de validation à appeler lors de la soumission du formulaire
+ * @example
+ * // Dans un composant
+ * const validateOnSubmit = () => {
+ *   // Logique de validation
+ *   return isValid
+ * }
+ *
+ * // Enregistrer le composant auprès du formulaire parent
+ * useValidatable(validateOnSubmit)
+ */
+export function useValidatable(validateMethod: () => Promise<boolean> | boolean) {
+	const { register, unregister } = useValidatableComponent()
+	const instance = getCurrentInstance()
+
+	onMounted(() => {
+		if (instance) {
+			register({
+				validateOnSubmit: validateMethod,
+			})
+		}
+	})
+
+	onBeforeUnmount(() => {
+		if (instance) {
+			unregister({
+				validateOnSubmit: validateMethod,
+			})
+		}
+	})
+
+	// Aucune valeur de retour nécessaire car ce hook gère uniquement l'enregistrement/désenregistrement
+}

package/src/stories/Accessibilite/Avancement/Avancement.stories.ts

@@ -27,7 +27,7 @@ const ITEMS: AuditItem[] = [
 	{ composant: 'LogoBrandSection', status: STATUS.AUDITED },
 	{ composant: 'SubHeader', status: STATUS.AUDITED },
 	{ composant: 'HeaderLoading', status: STATUS.AUDITED },
-	{ composant: 'HeaderToolbar', status: STATUS.IN_PROGRESS },
+	{ composant: 'HeaderToolbar', status: STATUS.AUDITED },
 	{ composant: 'Footer', status: STATUS.AUDITED },
 	{ composant: 'SySelect', status: STATUS.AUDITED },
 	{ composant: 'SyInputSelect', status: STATUS.NOT_AUDITED },
@@ -40,7 +40,7 @@ const ITEMS: AuditItem[] = [
 	{ composant: 'CookieBanner', status: STATUS.AUDITED },
 	{ composant: 'ContextualMenu', status: STATUS.AUDITED },
 	{ composant: 'DialogBox', status: STATUS.NOT_AUDITED },
-	{ composant: 'PasswordField', status: STATUS.IN_PROGRESS },
+	{ composant: 'PasswordField', status: STATUS.AUDITED },
 	{ composant: 'PhoneField', status: STATUS.AUDITED },
 	{ composant: 'UserMenuBtn', status: STATUS.NOT_AUDITED },
 	{ composant: 'SyBtnSelect', status: STATUS.NOT_AUDITED },

package/src/stories/Accessibilite/KitDePreAudit/Outils/Introduction.mdx

@@ -362,7 +362,7 @@ import '../../../styles/shared.css';
         <p className="tool-card-description">
           Lecteur d'écran open-source pour Windows conçu pour les personnes malvoyantes ou aveugles. Il rend accessibles les interfaces graphiques en lisant à haute voix les éléments affichés à l'écran.
         </p>
-        <a href="/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#nvda-windows" className="tool-card-link">
+        <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs" className="tool-card-link">
           Guide rapide de NVDA
           <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
         </a>
@@ -378,7 +378,7 @@ import '../../../styles/shared.css';
         <p className="tool-card-description">
           Lecteur d'écran intégré aux appareils Android qui fournit des retours vocaux sur les éléments affichés. Essentiel pour tester l'accessibilité de vos applications mobiles.
         </p>
-        <a href="/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#talkback-android" className="tool-card-link">
+        <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#talkback-android" className="tool-card-link">
           Guide rapide de TalkBack
           <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
         </a>

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -205,7 +205,7 @@ import '../../styles/shared.css';
 </div>
 
 <div className="alert">
-  <p><strong>🔔 Rappel important :</strong> Avant de lancer votre pré-audit, vous devez définir l'échantillon de votre audit. Vous trouverez toutes les informations associées <a href="/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-%C3%A9chantillonnage--docs">ici</a>.</p>
+  <p><strong>🔔 Rappel important :</strong> Avant de lancer votre pré-audit, vous devez définir l'échantillon de votre audit. Vous trouverez toutes les informations associées <a href="/?path=/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-%C3%A9chantillonnage--docs">ici</a>.</p>
 </div>
 
 <div className="info-section">
@@ -213,7 +213,7 @@ import '../../styles/shared.css';
   
   <div className="verification-card">
     <h3>📦 Utilisation de Tanaguru</h3>
-    <p>Lancez Tanaguru sur chaque page de l'échantillon de test. Vous pouvez retrouver une documentation d'utilisation de Tanaguru <a href="/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-outils-tanaguru--docs">ici</a>.</p>
+    <p>Lancez Tanaguru sur chaque page de l'échantillon de test. Vous pouvez retrouver une documentation d'utilisation de Tanaguru <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-tanaguru-utilisation--docs">ici</a>.</p>
     
     <div className="alert">
       <p><strong>Capacité de l'outil :</strong> Tanaguru peut contrôler <span className="highlight">158 tests sur les 258</span> du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>

package/src/stories/Demarrer/Accueil.stories.ts

@@ -1,7 +1,7 @@
 import { VBtn, VIcon, VRow, VCol, VCard, VCardText, VCardTitle } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 
-import { mdiGithub, mdiArrowRight } from '@mdi/js'
+import { mdiArrowRight, mdiNpm } from '@mdi/js'
 
 import { version } from '../../../package.json'
 
@@ -17,7 +17,7 @@ export const Header: StoryObj = {
 				const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam'
 				return {
 					arrowRight: mdiArrowRight,
-					githubIcon: mdiGithub,
+					npmIcon: mdiNpm,
 					version,
 					theme,
 				}
@@ -67,13 +67,13 @@ export const Header: StoryObj = {
 							<img src="/figma.svg" alt="Figma" width="auto" height="17" />
 						</VBtn>
 						<VBtn
-							aria-label="GitHub"
-							href="https://github.com/assurance-maladie-digital/design-system-v3"
+							aria-label="NPM"
+							href="https://www.npmjs.com/package/@cnamts/synapse"
 							target="_blank"
 							rel="noopener noreferrer"
 							class="d-flex align-center justify-center text-lowercase ml-2"
 						>
-							<VIcon size="large" class="mr-2">{{ githubIcon }}</VIcon>
+							<VIcon size="large" class="mr-2">{{ npmIcon }}</VIcon>
 							<b>v{{ version }}</b>
 						</VBtn>
 					</div>
@@ -204,7 +204,7 @@ export const List: StoryObj = {
 			components: { VRow, VCol },
 			setup() {
 				return {
-					githubIcon: mdiGithub,
+					npmIcon: mdiNpm,
 					version,
 				}
 			},

package/src/stories/GuideDuDev/Installation.mdx

@@ -0,0 +1,13 @@
+import {Meta, Source} from '@storybook/addon-docs/blocks';
+import '../styles/shared.css';
+
+<Meta title="Guide Du Dev/Installation"/>
+
+
+<div className="header">
+    <h1>Installation</h1>
+</div>
+
+- Pour un nouveau projet, téléchargez le Starter Kit <a href="https://gitlab.cnqd.cnamts.fr/human/developpement/sksn_x" target="_blank" rel="noopener noreferrer">Starter Kit Synapse</a>, le Design System est déjà intégré dans le projet et prêt à l'emploi.
+- Pour migrer un projet existant depuis Bridge (Vue3) vers Synapse, suivez le guide [Migration depuis Bridge](/docs/guide-du-dev-migration-migration-depuis-bridge--docs).
+- Pour migrer un projet existant depuis VueDot (Vue2) vers Synapse, suivez le guide [Migration depuis Vue2](/docs/guide-du-dev-migration-migration-depuis-vue2--docs).

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -1,7 +1,7 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 import '../styles/shared.css';
 
-<Meta title="Guide Du Dev/Breaking changes"/>
+<Meta title="Guide Du Dev/Migration/Breaking changes"/>
 
 
 

package/src/stories/GuideDuDev/MigrationDepuisBridge.mdx

@@ -1,7 +1,7 @@
 import {Meta, Source} from '@storybook/addon-docs/blocks';
 import '../styles/shared.css';
 
-<Meta title="Guide Du Dev/Migration depuis Bridge"/>
+<Meta title="Guide Du Dev/Migration/Migration depuis Bridge"/>
 
 
 <div className="header">

package/src/stories/GuideDuDev/MigrationDepuisVue2.mdx

@@ -1,7 +1,7 @@
 import {Meta, Source} from '@storybook/addon-docs/blocks';
 import '../styles/shared.css';
 
-<Meta title="Guide Du Dev/Migration depuis Vue2"/>
+<Meta title="Guide Du Dev/Migration/Migration depuis Vue2"/>
 
 
 <div className="header">