@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -1,60 +1,55 @@
 <script lang="ts" setup>
-	import { defineProps, defineEmits, withDefaults, computed } from 'vue'
+	import { computed } from 'vue'
 	import SyBtnSelect from '../Customs/SyBtnSelect/SyBtnSelect.vue'
 	import { useDisplay } from 'vuetify'
 	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { defaultOptions } from './config'
 
+	type MenuItem = { text: string, value: string, link?: string }
+
 	const props = withDefaults(defineProps<CustomizableOptions & {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		modelValue: string | Record<string, any> | null | undefined
-		menuItems?: { text: string, value: string }[]
+		menuItems?: MenuItem[]
 		additionalInformation?: string
 		fullName?: string
 		hideLogoutBtn?: boolean
-		logoutIcon?: string
 		isMobileView?: boolean
 		hideUserIcon?: boolean
 	}>(), {
-		modelValue: null,
 		menuItems: () => [],
 		additionalInformation: 'Information supplémentaire',
 		fullName: 'Prénom Nom',
 		hideLogoutBtn: false,
-		logoutIcon: 'mdiLoginVariant',
 		isMobileView: false,
 		hideUserIcon: false,
 	})
 
-	const emit = defineEmits(['update:modelValue', 'logout'])
+	const modelValue = defineModel<MenuItem | null>({
+		default: null,
+	})
+
+	defineEmits(['logout'])
+
 	const { smAndDown } = useDisplay()
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	const options = useCustomizableOptions(defaultOptions, props) as any
+	const options = useCustomizableOptions(defaultOptions, props)
 
 	const isMobileView = computed(() => {
 		return props.isMobileView || smAndDown.value
 	})
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	function updateModelValue(value: any) {
-		emit('update:modelValue', value)
-	}
 </script>
 
 <template>
 	<SyBtnSelect
-		:is-mobile-view="isMobileView"
+		v-model="modelValue"
+		:hide-icon="hideUserIcon"
 		:icon-only="isMobileView"
+		:is-mobile-view="isMobileView"
 		:menu-items="menuItems"
-		:model-value="props.modelValue ?? undefined"
 		:options="options"
 		:primary-info="fullName"
 		:secondary-info="additionalInformation"
-		:hide-icon="hideUserIcon"
 		class="user-menu-btn"
-		@update:model-value="updateModelValue"
 	>
 		<template #append-icon>
 			<VIcon
@@ -88,18 +83,19 @@
 	</SyBtnSelect>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 @use '@/assets/tokens.scss';
+
 .vd-user-icon {
-  width: 40px;
-  height: 40px;
-  background: tokens.$grey-lighten-90;
-  border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	background: tokens.$grey-lighten-90;
+	border-radius: 50%;
 
-  svg,
-  .v-icon__svg {
-    width: 24px;
-    height: 24px;
-  }
+	svg,
+	.v-icon__svg {
+		width: 24px;
+		height: 24px;
+	}
 }
 </style>

package/src/components/UserMenuBtn/config.ts

@@ -21,4 +21,4 @@ export const defaultOptions = {
 		color: 'primary',
 		class: 'mr-4',
 	},
-}
+} as const

package/src/components/UserMenuBtn/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/index.ts

@@ -1,12 +1,12 @@
-export { default as Alert } from './Alert/Alert.vue'
+export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
 export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
-export { default as SyInputSelect } from '@/components/Customs/SyInputSelect/SyInputSelect.vue'
-export { default as SySelect } from '@/components/Customs/SySelect/SySelect.vue'
-export { default as SyTextField } from '@/components/Customs/SyTextField/SyTextField.vue'
+export { default as SyInputSelect } from './Customs/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from './Customs/SySelect/SySelect.vue'
+export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DataListItem } from './DataListItem/DataListItem.vue'
@@ -30,6 +30,8 @@ export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
 export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
 export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
+export { default as NirField } from './NirField/NirField.vue'
+export * from './NirField/nirValidation'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
@@ -38,3 +40,7 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
+export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
+export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
+export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
+export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -1,82 +1,84 @@
-import { useFieldValidation } from '../useFieldValidation'
 import { describe, it, expect } from 'vitest'
+import { useFieldValidation } from '../useFieldValidation'
 
 describe('useFieldValidation', () => {
 	const { generateRules } = useFieldValidation()
 
-	describe('createRule', () => {
-		it('should validate required rule', () => {
-			const rules = generateRules([{ type: 'required', options: { fieldName: 'Nom' } }])
-			const requiredRule = rules[0]
+	it('should validate required rule', () => {
+		const rules = generateRules([{ type: 'required', options: { message: 'This field is required.' } }])
+		const rule = rules[0]
 
-			expect(requiredRule('')).toBe('Vous devez renseigner Nom.')
-			expect(requiredRule('Test')).toBe(true)
-		})
+		expect(rule('')).toEqual({ error: 'This field is required.' })
+		expect(rule('value')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate min rule', () => {
-			const rules = generateRules([{ type: 'min', options: { value: 5 } }])
-			const minRule = rules[0]
+	it('should validate min rule', () => {
+		const rules = generateRules([{ type: 'min', options: { value: 5, message: 'Value must be at least 5.' } }])
+		const rule = rules[0]
 
-			expect(minRule(3)).toBe('La valeur doit être supérieure ou égale à 5.')
-			expect(minRule(5)).toBe(true)
-			expect(minRule(10)).toBe(true)
-		})
+		expect(rule(3)).toEqual({ error: 'Value must be at least 5.' })
+		expect(rule(5)).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate minLength rule', () => {
-			const rules = generateRules([{ type: 'minLength', options: { length: 3 } }])
-			const minLengthRule = rules[0]
+	it('should validate max rule', () => {
+		const rules = generateRules([{ type: 'max', options: { value: 10, message: 'Value must be at most 10.' } }])
+		const rule = rules[0]
 
-			expect(minLengthRule('ab')).toBe('Ce champ doit avoir au moins 3 caractères.')
-			expect(minLengthRule('abc')).toBe(true)
-		})
+		expect(rule(15)).toEqual({ error: 'Value must be at most 10.' })
+		expect(rule(10)).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate max rule', () => {
-			const rules = generateRules([{ type: 'max', options: { value: 10 } }])
-			const maxRule = rules[0]
+	it('should validate minLength rule', () => {
+		const rules = generateRules([{ type: 'minLength', options: { length: 5, message: 'Minimum length is 5.' } }])
+		const rule = rules[0]
 
-			expect(maxRule(15)).toBe('La valeur doit être inférieure ou égale à 10.')
-			expect(maxRule(10)).toBe(true)
-			expect(maxRule(5)).toBe(true)
-		})
+		expect(rule('1234')).toEqual({ error: 'Minimum length is 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate maxLength rule', () => {
-			const rules = generateRules([{ type: 'maxLength', options: { length: 5 } }])
-			const maxLengthRule = rules[0]
+	it('should validate maxLength rule', () => {
+		const rules = generateRules([{ type: 'maxLength', options: { length: 5, message: 'Maximum length is 5.' } }])
+		const rule = rules[0]
 
-			expect(maxLengthRule('abcdef')).toBe('Ce champ ne doit pas dépasser 5 caractères.')
-			expect(maxLengthRule('abc')).toBe(true)
-		})
+		expect(rule('123456')).toEqual({ error: 'Maximum length is 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate exactLength rule', () => {
-			const rules = generateRules([{ type: 'exactLength', options: { length: 4 } }])
-			const exactLengthRule = rules[0]
+	it('should validate exactLength rule', () => {
+		const rules = generateRules([{ type: 'exactLength', options: { length: 5, message: 'Length must be exactly 5.' } }])
+		const rule = rules[0]
 
-			expect(exactLengthRule('abc')).toBe('Ce champ doit avoir exactement 4 caractères.')
-			expect(exactLengthRule('abcd')).toBe(true)
-		})
+		expect(rule('1234')).toEqual({ error: 'Length must be exactly 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate email rule', () => {
-			const rules = generateRules([{ type: 'email' }])
-			const emailRule = rules[0]
+	it('should validate email rule', () => {
+		const rules = generateRules([{ type: 'email', options: { message: 'Invalid email address.' } }])
+		const rule = rules[0]
 
-			expect(emailRule('invalid-email')).toBe('Veuillez entrer un email valide.')
-			expect(emailRule('test@example.com')).toBe(true)
-		})
+		expect(rule('invalid-email')).toEqual({ error: 'Invalid email address.' })
+		expect(rule('test@example.com')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should validate matchPattern rule', () => {
-			const rules = generateRules([{ type: 'matchPattern', options: { pattern: /^[a-z]+$/ } }])
-			const matchPatternRule = rules[0]
+	it('should validate matchPattern rule', () => {
+		const rules = generateRules([{
+			type: 'matchPattern',
+			options: { pattern: /^[a-z]+$/, message: 'Invalid format.' },
+		}])
+		const rule = rules[0]
 
-			expect(matchPatternRule('123')).toBe('Format invalide.')
-			expect(matchPatternRule('abc')).toBe(true)
-		})
+		expect(rule('123')).toEqual({ error: 'Invalid format.' })
+		expect(rule('abc')).toEqual({ success: 'Le champ est valide.' })
+	})
 
-		it('should handle ignoreSpace option in length rules', () => {
-			const rules = generateRules([{ type: 'minLength', options: { length: 3, ignoreSpace: true } }])
-			const minLengthRule = rules[0]
+	it('should validate custom rule', () => {
+		const rules = generateRules([{
+			type: 'custom',
+			options: { validate: value => value === 'valid', message: 'Custom validation failed.' },
+		}])
+		const rule = rules[0]
 
-			expect(minLengthRule('a b')).toBe('Ce champ doit avoir au moins 3 caractères.')
-			expect(minLengthRule('ab c')).toBe(true)
-		})
+		expect(rule('invalid')).toEqual({ error: 'Custom validation failed.' })
+		expect(rule('valid')).toEqual({ success: 'Le champ est valide.' })
 	})
 })

package/src/composables/rules/useFieldValidation.ts

@@ -1,50 +1,87 @@
 type RuleOptions = {
 	fieldName?: string
 	message?: string
+	successMessage?: string
 	length?: number
 	value?: number
 	pattern?: RegExp
 	ignoreSpace?: boolean
+	fieldIdentifier?: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	validate?: (value: any) => boolean | string
 }
 
+type ValidationResult = {
+	success?: string
+	error?: string
+}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-type ValidationRule = (value: any) => string | boolean
+type ValidationRule = (value: any) => ValidationResult
 
 export function useFieldValidation() {
 	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
 		const getValueLength = (value: string) => {
 			return options.ignoreSpace ? value.replace(/\s/g, '').length : value.length
 		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		return (value: any) => {
+			if (type !== 'required' && typeof value === 'string' && value.trim() === '') {
+				return {}
+			}
+			switch (type) {
+				case 'required':
+					return typeof value === 'string' && value.trim()
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.` }
+
+				case 'min':
+					return typeof value === 'number' && value >= (options.value ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `La valeur doit être supérieure ou égale à ${options.value}.` }
+
+				case 'minLength':
+					return typeof value === 'string' && getValueLength(value) >= (options.length ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ doit avoir au moins ${options.length} caractères.` }
+
+				case 'max':
+					return typeof value === 'number' && value <= (options.value ?? Infinity)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `La valeur doit être inférieure ou égale à ${options.value}.` }
+
+				case 'maxLength':
+					return typeof value === 'string' && getValueLength(value) <= (options.length ?? Infinity)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.` }
 
-		switch (type) {
-			case 'required':
-				return (value: string) =>
-					!!value || options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.`
-			case 'min':
-				return (value: number) =>
-					value >= (options.value ?? 0) || options.message || `La valeur doit être supérieure ou égale à ${options.value}.`
-			case 'minLength':
-				return (value: string) =>
-					getValueLength(value) >= (options.length ?? 0) || options.message || `Ce champ doit avoir au moins ${options.length} caractères.`
-			case 'max':
-				return (value: number) =>
-					value <= (options.value ?? Infinity) || options.message || `La valeur doit être inférieure ou égale à ${options.value}.`
-			case 'maxLength':
-				return (value: string) =>
-					getValueLength(value) <= (options.length ?? Infinity) || options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.`
-			case 'exactLength':
-				return (value: string) =>
-					getValueLength(value) === (options.length ?? 0) || options.message || `Ce champ doit avoir exactement ${options.length} caractères.`
-			case 'email':
-				return (value: string) =>
-					/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || options.message || `Veuillez entrer un email valide.`
-			case 'matchPattern':
-				return (value: string) =>
-					options.pattern ? options.pattern.test(value) || options.message || `Format invalide.` : `Format invalide.`
-			default:
-				return () => `La règle spécifiée n'existe pas.`
+				case 'exactLength':
+					return typeof value === 'string' && getValueLength(value) === (options.length ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ doit avoir exactement ${options.length} caractères.` }
+
+				case 'email':
+					return typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Veuillez entrer un email valide.` }
+
+				case 'matchPattern':
+					return typeof value === 'string' && options.pattern?.test(value)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Format invalide.` }
+
+				case 'custom': {
+					const result = options.validate?.(value)
+					return result === true
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: typeof result === 'string' ? result : options.message || `Validation échouée.` }
+				}
+
+				default:
+					return { error: `La règle spécifiée n'existe pas.` }
+			}
 		}
 	}
+
 	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>) => {
 		return fieldRules.map(rule => createRule(rule.type, rule.options))
 	}

package/src/main.ts

@@ -1,4 +1,5 @@
 import '../src/assets/tokens.scss'
+import '../src/assets/settings.scss'
 
 export * from './components'
 export * from './services'

package/src/stories/GuideDuDev/CommentUtiliserLesRules.mdx

@@ -18,16 +18,29 @@ Le composable `useFieldValidation` vous permet de définir des règles de valida
 
 ### Type `RuleOptions`
 
-    <Source dark code={`
+<Source dark code={`
 type RuleOptions = {
-fieldName?: string; // Nom du champ utilisé dans les messages d'erreur
-message?: string; // Message personnalisé pour la règle
-length?: number; // Longueur minimale ou maximale
-value?: number; // Valeur minimale ou maximale
-pattern?: RegExp; // Motif à valider
-ignoreSpace?: boolean; // Ignorer les espaces lors de la validation de longueur
+  fieldName?: string; // Nom du champ utilisé dans les messages d'erreur
+  message?: string; // Message personnalisé pour la règle
+  successMessage?: string; // Message personnalisé de validation réussie
+  length?: number; // Longueur minimale ou maximale
+  value?: number; // Valeur minimale ou maximale
+  pattern?: RegExp; // Motif à valider
+  ignoreSpace?: boolean; // Ignorer les espaces lors de la validation de longueur
+  validate?: (value: any) => boolean | string; // Validation personnalisée
 };
-`} />
+`}
+/>
+
+### Type `ValidationResult`
+
+<Source dark code={`
+type ValidationResult = {
+  success?: string; // Message de validation réussie
+  error?: string; // Message d'erreur
+};
+`}
+/>
 
 ---
 
@@ -35,98 +48,73 @@ ignoreSpace?: boolean; // Ignorer les espaces lors de la validation de longueur
 
 ### Script Vue.js
 
-    <Source dark code={`
+<Source dark code={`
 <script lang="ts" setup>
-    import {ref} from 'vue';
-    import {useFieldValidation} from '@cnamts/synapse';
-
-    const {generateRules} = useFieldValidation();
-
-    const firstName = ref('');
-    const email = ref('');
-    const age = ref('');
-
-    const rules = {
-    firstName: generateRules([
-{type: 'required', options: {message: 'Ce champ est requis.'}},
-{type: 'minLength', options: {length: 3, ignoreSpace: true}},
-{type: 'maxLength', options: {length: 20}},
-    ]),
-    email: generateRules([
-{type: 'required', options: {fieldName: 'Email'}},
-{type: 'email'},
-    ]),
-    age: generateRules([
-{type: 'min', options: {value: 18}},
-{type: 'max', options: {value: 99}},
-    ]),
+import { ref } from 'vue';
+import { useFieldValidation } from '@cnamts/synapse';
+
+const { generateRules } = useFieldValidation();
+
+const firstName = ref('');
+const email = ref('');
+const age = ref('');
+
+const rules = {
+  firstName: generateRules([
+    { type: 'required', options: { message: 'Ce champ est requis.' } },
+    { type: 'minLength', options: { length: 3, ignoreSpace: true } },
+    { type: 'maxLength', options: { length: 20 } },
+  ]),
+  email: generateRules([
+    { type: 'required', options: { fieldName: 'Email' } },
+    { type: 'email' },
+  ]),
+  age: generateRules([
+    { type: 'min', options: { value: 18 } },
+    { type: 'max', options: { value: 99 } },
+  ]),
 };
 
-    const validateField = (field: string) => {
-    return rules[field].every((rule) => rule(field));
+const validateField = (field: string) => {
+  return rules[field].every((rule) => rule(field));
 };
 
-    const handleSubmit = () => {
-    if (validateField('firstName') && validateField('email') && validateField('age')) {
+const handleSubmit = () => {
+  if (validateField('firstName') && validateField('email') && validateField('age')) {
     alert('Formulaire valide.');
-} else {
+  } else {
     alert('Merci de vérifier les champs.');
-}
+  }
 };
 </script>
-`} />
----
+`}
+/>
+
+Vous pouvez retrouver un exemple complet sur le [NirField](/docs/composants-formulaires-nirfield--docs).
 
-### Template Vue.js
-
-    <Source dark code={`
-<template>
-    <v-form
-    @submit.prevent="handleSubmit">
-    <v-text-field
-        v-model="firstName"
-    :rules="rules.firstName"
-    label="Prénom"
-    @blur="validateField('firstName')"
-    />
-    <v-text-field
-        v-model="email"
-    :rules="rules.email"
-    label="Email"
-    @blur="validateField('email')"
-    />
-    <v-text-field
-        v-model="age"
-    :rules="rules.age"
-    label="Âge"
-    @blur="validateField('age')"
-    />
-    <v-btn block class="mt-2" type="submit">Soumettre</v-btn>
-</v-form>
-</template>
-`} />
 ---
 
 ## Fonctionnalités supportées
 
-- **Validation requise** (`required`)
-- **Longueur minimale** (`minLength`)
-- **Longueur maximale** (`maxLength`)
-- **Valeur minimale** (`min`)
-- **Valeur maximale** (`max`)
-- **Validation par motif** (`matchPattern`)
-- **Validation d'email** (`email`)
+- **Validation requise** (`required`) : Assurez-vous qu'un champ est rempli.
+- **Longueur minimale** (`minLength`) : Validez un champ avec un nombre minimal de caractères.
+- **Longueur maximale** (`maxLength`) : Limitez un champ à un nombre maximal de caractères.
+- **Valeur minimale** (`min`) : Assurez-vous que la valeur est au moins égale à une valeur définie.
+- **Valeur maximale** (`max`) : Assurez-vous que la valeur ne dépasse pas une valeur définie.
+- **Validation par motif** (`matchPattern`) : Validez un champ à l'aide d'une expression régulière.
+- **Validation d'email** (`email`) : Assurez-vous que la valeur est une adresse email valide.
+- **Validation personnalisée** (`custom`) : Implémentez des règles spécifiques via une fonction.
 
 ---
 
 ## Bonnes pratiques
 
-- Toujours tester les messages d'erreur personnalisés pour garantir une bonne expérience utilisateur.
-- Centraliser la logique de validation pour une meilleure maintenance.
-- Documenter les règles complexes pour aider votre équipe à comprendre leur fonctionnement.
+- **Centralisation** : Centralisez la logique de validation pour garantir une maintenance facile.
+- **Accessibilité** : Vérifiez que les messages d'erreur sont clairs et concis pour tous les utilisateurs.
 
 ---
 
 ## Conclusion
 
-Avec `useFieldValidation`, vous disposez d'un moyen simple et flexible pour gérer vos validations de formulaires dans Vue.js. Combinez-le avec des bibliothèques comme Vuetify pour une expérience utilisateur optimisée.
+Avec `useFieldValidation`, vous disposez d'un outil pour gérer les validations de vos formulaires dans Vue.js. Ce composable est idéal pour créer des validations personnalisées et intégrer des champs avec des bibliothèques comme Vuetify.
+

package/src/stories/GuideDuDev/components.stories.ts

@@ -1,21 +1,21 @@
-import Alert from '../../components/Alert/Alert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 export default {
 	title: 'Guide Du Dev/Rapport de bug',
-	component: Alert,
+	component: SyAlert,
 }
 export const Info = {
 	render: () => {
 		return {
-			components: { Alert },
+			components: { SyAlert },
 			setup() {
 				return { }
 			},
 			template: `
-				<Alert type="info" variant="tonal" :closable="false">
+				<SyAlert type="info" variant="tonal" :closable="false">
 					<template #default>Lorsque vous créez une reproduction minimale, supprimez tous les éléments, propriétés, variables, données et autres qui ne sont pas nécessaires pour reproduire le bug. Cela facilitera le traitement du rapport et le temps qu’il faudra pour identifier puis résoudre le bug.
 					</template>
-				</Alert>
+				</SyAlert>
 			`,
 		}
 	},

package/src/stories/GuideDuDev/moduleDeNotification.mdx

@@ -122,7 +122,7 @@ Utilisation dans un composant Vue
 <Source dark code={`
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
-	import NotificationBar from '@cnamts/synapse'
+	import { NotificationBar } from '@cnamts/synapse'
 	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
 	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'