@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -1,217 +1,313 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import { VIcon } from 'vuetify/components'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
+import { VBtn } from 'vuetify/components'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
 	component: SyTextField,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
+		controls: { exclude: ['modelValue', 'appendInnerIconColor', 'errorMessages', 'warningMessages', 'successMessages'] },
+		docs: {
+			description: {
+				component: `SyTextField`,
+			},
+		},
 	},
 	argTypes: {
-		modelValue: { control: 'text' },
-		label: { control: 'text' },
-		prependIcon: {
+		'modelValue': { control: 'text' },
+		'label': {
+			description: 'Texte affiché comme label du champ',
+			control: 'text',
+		},
+		'prependIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
 		},
-		appendIcon: {
+		'appendIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
 		},
-		prependInnerIcon: {
+		'prependInnerIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
 		},
-		appendInnerIcon: {
+		'appendInnerIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
 		},
-		variantStyle: {
+		'variantStyle': {
 			control: 'select',
 			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
 		},
-		color: {
+		'color': {
 			control: 'select',
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
 			description: 'Couleur du champ',
 		},
-		density: {
+		'density': {
 			control: 'select',
 			options: ['default', 'comfortable', 'compact'],
 			description: 'Densité du champ',
 		},
-		direction: {
-			control: 'select',
-			options: ['horizontal', 'vertical'],
-			description: 'Direction d\'affichage',
+		'customRules': {
+			description: 'Règles de validation personnalisées',
+			control: 'object',
 		},
-		type: {
-			control: 'select',
-			options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'date', 'time', 'datetime-local'],
-			description: 'Type d\'input HTML',
+		'customWarningRules': {
+			description: 'Règles d\'avertissement personnalisées',
+			control: 'object',
 		},
-		baseColor: {
-			control: 'color',
-			description: 'Couleur de base personnalisée',
+		'showSuccessMessages': {
+			description: 'Afficher les messages de succès',
+			control: 'boolean',
 		},
-		bgColor: {
-			control: 'color',
-			description: 'Couleur de fond personnalisée',
+		'isValidateOnBlur': {
+			description: 'Vérifie la validité lors de la perte de focus',
+			control: 'boolean',
+			default: true,
 		},
-		width: {
-			control: 'text',
-			description: 'Largeur du champ (px, %, vh, etc.)',
+		'isActive': {
+			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
+			control: 'boolean',
+			default: false,
 		},
-		maxWidth: {
+		'isClearable': {
+			description: 'Affiche un bouton pour effacer le contenu du champ',
+			control: 'boolean',
+			default: false,
+		},
+		'prependTooltip': {
+			description: 'Si le texte du prepend tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
 			control: 'text',
-			description: 'Largeur maximale (px, %, vh, etc.)',
 		},
-		minWidth: {
+		'appendTooltip': {
+			description: 'Si le texte du append tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
 			control: 'text',
-			description: 'Largeur minimale (px, %, vh, etc.)',
 		},
-		rounded: {
+		'tooltipLocation': {
+			description: 'Position des tooltips',
 			control: 'select',
-			options: [true, false, 0, 'sm', 'lg', 'xl', 'pill'],
-			description: 'Style des coins arrondis',
+			options: ['top', 'bottom', 'start', 'end'],
+			default: 'top',
 		},
-		required: {
+		'required': {
+			description: 'Indique si le champ est obligatoire',
 			control: 'boolean',
-			description: 'Champ obligatoire',
+			default: false,
 		},
-		isReadOnly: {
+		'displayAsterisk': {
+			description: 'Affiche un astérisque à côté du label',
 			control: 'boolean',
-			description: 'Mode lecture seule',
+			default: false,
 		},
-		isDisabled: {
-			control: 'boolean',
+		'isDisabled': {
 			description: 'Désactive le champ',
-		},
-		isClearable: {
 			control: 'boolean',
-			description: 'Affiche un bouton pour effacer',
+			default: false,
 		},
-		isTiled: {
+		'isReadOnly': {
+			description: 'Rend le champ en lecture seule',
 			control: 'boolean',
-			description: 'Style tuile',
+			default: false,
 		},
-		isFlat: {
-			control: 'boolean',
-			description: 'Sans élévation',
+		'baseColor': {
+			description: 'Couleur de base du champ (par défaut hérite de color)',
+			control: 'text',
 		},
-		isActive: {
-			control: 'boolean',
-			description: 'Force l\'état actif',
+		'bgColor': {
+			description: 'Couleur de fond du champ',
+			control: 'text',
 		},
-		isFocused: {
+		'centerAffix': {
+			description: 'Centre verticalement les éléments ajoutés avant/après le champ',
 			control: 'boolean',
-			description: 'Force l\'état focus',
 		},
-		isDirty: {
+		'counter': {
+			description: 'Affiche un compteur de caractères',
 			control: 'boolean',
-			description: 'Indique si modifié',
 		},
-		isOnError: {
-			control: 'boolean',
-			description: 'Force l\'état erreur',
+		'counterValue': {
+			description: 'Fonction personnalisée pour calculer la valeur du compteur',
+			control: 'object',
 		},
-		displayAsterisk: {
+		'direction': {
+			description: 'Direction du champ (horizontal ou vertical)',
+			control: 'select',
+			options: ['horizontal', 'vertical'],
+		},
+		'isDirty': {
+			description: 'Indique si le champ a été modifié',
 			control: 'boolean',
-			description: 'Affiche l\'astérisque requis',
 		},
-		displayPersistentClear: {
+		'isFlat': {
+			description: 'Supprime l\'élévation du champ',
 			control: 'boolean',
-			description: 'Bouton effacer toujours visible',
 		},
-		displayPersistentCounter: {
+		'isFocused': {
+			description: 'Force l\'état focus du champ',
 			control: 'boolean',
-			description: 'Compteur toujours visible',
 		},
-		displayPersistentHint: {
+		'areDetailsHidden': {
+			description: 'Masque la section des détails (messages d\'erreur, compteur)',
 			control: 'boolean',
-			description: 'Aide toujours visible',
 		},
-		displayPersistentPlaceholder: {
+		'areSpinButtonsHidden': {
+			description: 'Masque les boutons d\'incrémentation pour les champs numériques',
 			control: 'boolean',
-			description: 'Placeholder toujours visible',
 		},
-		areDetailsHidden: {
-			control: 'select',
-			options: [true, false, 'auto'],
-			description: 'Masque les détails',
+		'hint': {
+			description: 'Texte d\'aide affiché sous le champ',
+			control: 'text',
 		},
-		areSpinButtonsHidden: {
+		'loading': {
+			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
-			description: 'Masque les boutons number',
 		},
-		noIcon: {
-			control: 'boolean',
-			description: 'Masque toutes les icônes',
+		'maxErrors': {
+			description: 'Nombre maximum de messages d\'erreur à afficher',
+			control: { type: 'text' },
 		},
-		centerAffix: {
-			control: 'boolean',
-			description: 'Centre les affixes',
+		'maxWidth': {
+			description: 'Largeur maximale du champ',
+			control: { type: 'text' },
 		},
-		counter: {
-			control: 'select',
-			options: [true, false, 'words', 'characters'],
-			description: 'Type de compteur',
+		'minWidth': {
+			description: 'Largeur minimale du champ',
+			control: { type: 'text' },
 		},
-		counterValue: {
-			control: 'number',
-			description: 'Valeur du compteur',
+		'name': {
+			description: 'Nom du champ pour les formulaires',
+			control: 'text',
 		},
-		maxErrors: {
-			control: 'number',
-			description: 'Nombre max d\'erreurs',
+		'displayPersistentClear': {
+			description: 'Affiche toujours le bouton de réinitialisation',
+			control: 'boolean',
+			default: false,
 		},
-		errorMessages: {
-			control: 'object',
-			description: 'Messages d\'erreur',
+		'displayPersistentCounter': {
+			description: 'Affiche toujours le compteur',
+			control: 'boolean',
+			default: false,
 		},
-		messages: {
-			control: 'object',
-			description: 'Messages additionnels',
+		'displayPersistentHint': {
+			description: 'Affiche toujours le texte d\'aide',
+			control: 'boolean',
+			default: false,
 		},
-		hint: {
-			control: 'text',
-			description: 'Message d\'aide',
+		'displayPersistentPlaceholder': {
+			description: 'Garde le placeholder visible même avec une valeur',
+			control: 'boolean',
+			default: false,
 		},
-		placeholder: {
+		'placeholder': {
+			description: 'Texte affiché quand le champ est vide',
 			control: 'text',
-			description: 'Texte indicatif',
 		},
-		prefix: {
+		'prefix': {
+			description: 'Texte affiché avant la valeur: prefix="€" : affichera "€" avant la valeur saisie',
 			control: 'text',
-			description: 'Texte avant la valeur',
 		},
-		suffix: {
-			control: 'text',
-			description: 'Texte après la valeur',
+		'isReversed': {
+			description: 'Inverse l\'ordre des éléments',
+			control: 'boolean',
+			default: false,
 		},
-		id: {
+		'role': {
+			description: 'Rôle ARIA du champ',
 			control: 'text',
-			description: 'ID HTML',
 		},
-		name: {
-			control: 'text',
-			description: 'Nom du champ',
+		'rounded': {
+			description: 'Arrondit les coins du champ',
+			control: { type: 'text' },
 		},
-		role: {
+		'isOnSingleLine': {
+			description: 'Force l\'affichage sur une seule ligne',
+			control: 'boolean',
+			default: false,
+		},
+		'suffix': {
+			description: 'Texte affiché après la valeur',
 			control: 'text',
-			description: 'Rôle ARIA',
 		},
-		theme: {
+		'theme': {
+			description: 'Thème à appliquer au champ',
 			control: 'text',
-			description: 'Thème personnalisé',
 		},
-		loading: {
+		'isTiled': {
+			description: 'Applique un style tuile',
 			control: 'boolean',
-			description: 'État de chargement',
+			default: false,
+		},
+		'type': {
+			description: 'Type du champ de saisie',
+			control: 'select',
+			options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search'],
+			default: 'text',
+		},
+		'width': {
+			description: 'Largeur du champ',
+			control: { type: 'text' },
+		},
+		'validation': {
+			description: 'Valide le champ avec la valeur donnée',
+			type: '(value: string | number | null) => void',
+		},
+		'validateOnSubmit': {
+			description: 'Valide le champ lors de la soumission du formulaire',
+			type: '() => void',
+		},
+		'checkErrorOnBlur': {
+			description: 'Vérifie les erreurs lors de la perte de focus',
+			type: '() => void',
+		},
+		'append': {
+			description: 'Slot pour ajouter du contenu à droite du champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
+		'prepend': {
+			description: 'Slot pour ajouter du contenu à gauche du champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
+		'append-inner': {
+			description: 'Slot pour ajouter du contenu à droite dans le champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
+		'prepend-inner': {
+			description: 'Slot pour ajouter du contenu à gauche dans le champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
+		'details': {
+			description: 'Slot pour personnaliser la section des détails (messages d\'erreur, compteur)',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
 		},
 	},
 } as Meta<typeof SyTextField>
@@ -252,11 +348,14 @@ export const Default: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				const value = ref('')
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
 				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
@@ -265,116 +364,83 @@ export const Default: Story = {
 }
 
 export const Required: Story = {
+	args: {
+		...Default.args,
+		required: true,
+	},
 	parameters: {
+		docs: {
+			description: {
+				story: `
+### Champ requis sans astérisque
+
+Cette story montre un champ requis sans astérisque.
+Pour afficher l'astérisque sur un champ requis, il faut activer la prop \`displayAsterisk\`.`,
+			},
+		},
 		sourceCode: [
 			{
 				name: 'Template',
-				code: `
-				<template>
-					<SyTextField 
-						v-model="value" 
-						required
-					/>
-				</template>
-				`,
+				code: `<template>
+	<SyTextField
+		v-model="value"
+		required
+		label="Champ requis sans astérisque"
+	/>
+</template>`,
 			},
 			{
 				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { SyTextField } from '@cnamts/synapse'
-				</script>
-				`,
+				code: `<script setup lang="ts">
+	import { SyTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('')
+</script>`,
 			},
 		],
 	},
+}
+
+export const RequiredWithAsterisk: Story = {
 	args: {
-		showDivider: false,
-		variantStyle: 'outlined',
-		color: 'primary',
-		isClearable: true,
-		label: 'Label',
+		...Default.args,
 		required: true,
-		modelValue: '',
-	},
-	render: (args) => {
-		return {
-			components: { SyTextField, VIcon },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField v-bind="args" />
-				</div>
-			`,
-		}
+		displayAsterisk: true,
 	},
-}
-
-export const WithCustomError: Story = {
 	parameters: {
+		docs: {
+			description: {
+				story: `
+### Champ requis avec astérisque
+
+Cette story montre un champ requis avec astérisque.
+L'astérisque ne peut être affiché que sur un champ requis, en activant la prop \`displayAsterisk\`.`,
+			},
+		},
 		sourceCode: [
 			{
 				name: 'Template',
-				code: `
-				<template>
-					<SyTextField 
-						v-model="value" 
-						:error-messages="errorMessages"
-					/>
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</template>
-				`,
+				code: `<template>
+	<SyTextField
+		v-model="value"
+		required
+		display-asterisk
+		label="Champ requis avec astérisque"
+	/>
+</template>`,
 			},
 			{
 				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { SyTextField } from '@cnamts/synapse'
-					
-					const errorMessages = ref([])
-					
-					const triggerError = () => {
-						errorMessages.value = ['This is a test error message']
-					}
-				</script>
-				`,
+				code: `<script setup lang="ts">
+	import { SyTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('')
+</script>`,
 			},
 		],
 	},
-	args: {
-		showDivider: false,
-		variantStyle: 'outlined',
-		color: 'primary',
-		isClearable: true,
-		label: 'Label',
-		required: false,
-		modelValue: '',
-	},
-	render: (args) => {
-		return {
-			components: { SyTextField, VIcon },
-			setup() {
-				const errorMessages = ref([])
-				const triggerError = () => {
-					// @ts-expect-error test error message
-					errorMessages.value = ['This is a test error message']
-				}
-				return { args, errorMessages, triggerError }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField v-bind="args" :error-messages="errorMessages" />
-				</div>
-				<VBtn class="ml-8" @click="triggerError">
-					Trigger Error
-				</VBtn>
-			`,
-		}
-	},
 }
 
 export const SlotPrepend: Story = {
@@ -414,15 +480,15 @@ export const SlotPrepend: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-						:label="args.label"
-						:prepend-icon="args.prependIcon"
-					/>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -466,14 +532,15 @@ export const SlotAppend: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-						:append-icon="args.appendIcon"
-					/>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -517,14 +584,15 @@ export const SlotPrependInner: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-						:prepend-inner-icon="args.prependInnerIcon"
-					/>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -569,15 +637,15 @@ export const SlotPrependInnerDivider: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-						:prepend-inner-icon="args.prependInnerIcon"
-						:show-divider="args.showDivider"
-					/>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -621,14 +689,15 @@ export const SlotAppendInner: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-						:append-inner-icon="args.appendInnerIcon"
-					/>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -677,15 +746,17 @@ export const SlotCustomIcon: Story = {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
 				const iconName = ref(mdiAccountBox)
 
-				return { args, iconName }
+				return { args, value, iconName }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField
-						v-bind="args"
-					>
+				<div class="d-flex flex-wrap align-center">
+					<SyTextField v-bind="args" v-model="value">
 						<template #append-inner>
 							<VIcon>
 								{{ iconName }}
@@ -697,3 +768,594 @@ export const SlotCustomIcon: Story = {
 		}
 	},
 }
+
+export const ValidationRules: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec règles standard
+
+Cette story montre l'utilisation des règles de validation standard. Le champ :
+- Est requis
+- Doit contenir au moins 3 caractères
+- Affiche un message de succès quand valide
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTextField
+	v-model="value"
+	label="Champ avec validation"
+	:customRules="[
+		{
+			type: 'minLength',
+			options: {
+				length: 3,
+				message: 'Le champ doit contenir au moins 3 caractères'
+			}
+		}
+	]"
+	showSuccessMessages
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+			<SyTextField
+				v-model="value"
+				v-bind="args"
+				label="Champ avec validation"
+				:customRules="[
+					{
+						type: 'minLength',
+						options: {
+							length: 3,
+							message: 'Le champ doit contenir au moins 3 caractères'
+						}
+					}
+				]"
+				showSuccessMessages
+			/>
+		`,
+	}),
+}
+
+export const ValidationWithWarnings: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec avertissements
+
+Cette story montre l'utilisation combinée des règles standard et d'avertissement. Le champ :
+- Est requis (règle standard)
+- Affiche un avertissement si le texte dépasse 10 caractères
+- Les avertissements sont affichés en orange et n'empêchent pas la validation
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTextField
+	v-model="value"
+	label="Champ avec avertissements"
+	required
+	:customWarningRules="[
+		{
+			type: 'minLength',
+			options: {
+				length: 10,
+				message: 'Le texte doit comporter plus de 10 caracteres'
+			}
+		}
+	]"
+	showSuccessMessages
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+			<SyTextField
+				v-model="value"
+				v-bind="args"
+				label="avec avertissements"
+				required
+				:customWarningRules="[
+					{
+						type: 'minLength',
+						options: {
+							length: 10,
+							message: 'Le texte doit comporter plus de 10 caracteres'
+						}
+					}
+				]"
+				showSuccessMessages
+			/>
+		`,
+	}),
+}
+
+export const EmailValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation d'email
+
+Cette story montre un cas d'usage courant : la validation d'une adresse email. Le champ :
+- Est requis
+- Vérifie le format de l'email
+- Affiche un message de succès quand l'email est valide
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTextField
+	v-model="value"
+	label="Email"
+	required
+	:customRules="[
+		{
+			type: 'email',
+			options: {
+				message: 'L'email n'est pas valide',
+				successMessage: 'L'email est valide'
+			}
+		}
+	]"
+	showSuccessMessages
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+			<SyTextField
+				v-model="value"
+				v-bind="args"
+				label="Email"
+				required
+				:customRules="[
+					{
+						type: 'email',
+						options: {
+							message: 'L\\'email n\\'est pas valide',
+							successMessage: 'L\\'email est valide'
+						}
+					}
+				]"
+				showSuccessMessages
+			/>
+		`,
+	}),
+}
+
+export const PatternValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation par expression régulière
+
+Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un format spécifique. Ici, un code postal français :
+- Doit contenir exactement 5 chiffres
+- Utilise une expression régulière pour la validation
+- Affiche des messages personnalisés
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<SyTextField
+	v-model="value"
+	label="Code postal"
+	required
+	:customRules="[
+		{
+			type: 'matchPattern',
+			options: {
+				pattern: /^\\d{5}$/,
+				message: 'Le code postal doit contenir exactement 5 chiffres',
+				successMessage: 'Le format du code postal est valide'
+			}
+		}
+	]"
+	showSuccessMessages
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+			<SyTextField
+				v-model="value"
+				v-bind="args"
+				label="Code postal"
+				required
+				:customRules="[
+					{
+						type: 'matchPattern',
+						options: {
+							pattern: /^\\d{5}$/,
+							message: 'Le code postal doit contenir exactement 5 chiffres',
+							successMessage: 'Le format du code postal est valide'
+						}
+					}
+				]"
+				showSuccessMessages
+			/>
+		`,
+	}),
+}
+
+export const WithTooltips: Story = {
+	args: {
+		modelValue: '',
+		label: 'Champ avec tooltips',
+		prependTooltip: 'Information à gauche du champ',
+		appendTooltip: 'Information à droite du champ',
+		tooltipLocation: 'top',
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref(args.modelValue)
+			return { args, value }
+		},
+		template: `
+			<div>
+				<p class="mb-4">
+					Des icônes d'information avec tooltips sont affichées de chaque côté du champ.
+					Survolez-les pour voir les messages d'aide qui apparaissent en haut grâce à la prop tooltipLocation="top".
+				</p>
+				<SyTextField
+					v-model="value"
+					v-bind="args"
+				/>
+			</div>
+		`,
+	}),
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyTextField
+		v-model="value"
+		label="Champ avec tooltips"
+		prependTooltip="Information à gauche du champ"
+		appendTooltip="Information à droite du champ"
+		tooltipLocation="top"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+}
+
+/**
+ * Story avec validation désactivée au blur
+ */
+export const ValidateOnBlur: Story = {
+	args: {
+		modelValue: '',
+		label: 'Champ texte',
+		required: true,
+		isValidateOnBlur: true,
+		customRules: [
+			{
+				type: 'custom',
+				options: {
+					message: 'Le champ doit contenir au moins 3 caractères',
+					validate: (value: string) => value.length >= 3,
+				},
+			},
+		],
+	},
+	render: args => ({
+		components: { SyTextField, VBtn },
+		setup() {
+			const value = ref(args.modelValue)
+			const fieldRef = ref()
+
+			function handleSubmit() {
+				const isValid = fieldRef.value?.validateOnSubmit()
+				alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide, veuillez corriger les erreurs.')
+			}
+
+			return { args, value, fieldRef, handleSubmit }
+		},
+		template: `
+			<form @submit.prevent="handleSubmit">
+				<p class="mb-4">
+					La validation ne se déclenche  qu'à la perte de focus ou à la soumission du formulaire.
+				</p>
+				<SyTextField
+					ref="fieldRef"
+					v-model="value"
+					v-bind="args"
+					@update:model-value="args.modelValue = $event"
+				/>
+				<div class="mt-4">
+					<VBtn type="submit" color="primary">
+						Valider
+					</VBtn>
+				</div>
+			</form>
+		`,
+	}),
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple de champ avec validation désactivée au blur. La validation ne se déclenche que lors de la soumission du formulaire.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<form @submit.prevent="handleSubmit">
+		<SyTextField
+			ref="fieldRef"
+			v-model="value"
+			label="Champ texte"
+			required
+			:is-validate-on-blur="true"
+			:custom-rules="[
+				{
+					type: 'custom',
+					options: {
+						message: 'Le champ doit contenir au moins 3 caractères',
+						validate: value => value.length >= 3
+					}
+				}
+			]"
+		/>
+		<button type="submit">
+			Valider
+		</button>
+	</form>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SyTextField } from '@cnamts/synapse'
+
+const value = ref('')
+const fieldRef = ref()
+
+function handleSubmit() {
+	const isValid = fieldRef.value?.validateOnSubmit()
+	if (!isValid) {
+		// Gérer l'erreur
+		return
+	}
+	// Continuer avec la soumission
+}
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const FormValidation: Story = {
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const nomField = ref()
+			const prenomField = ref()
+			const ageField = ref()
+			const nomValue = ref('')
+			const prenomValue = ref('')
+			const ageValue = ref('')
+
+			// Règle minLength pour le prénom
+			const prenomRules = [{
+				type: 'minLength',
+				options: {
+					length: 3,
+					message: 'Le prénom doit contenir au moins 3 caractères',
+					successMessage: 'Le prénom est valide',
+					fieldIdentifier: 'prénom',
+				},
+			}]
+
+			// Règle pattern pour l'âge (uniquement des chiffres)
+			const ageRules = [{
+				type: 'matchPattern',
+				options: {
+					pattern: /^\d+$/,
+					message: 'L\'âge doit contenir uniquement des chiffres',
+					successMessage: 'L\'âge est valide',
+					fieldIdentifier: 'âge',
+				},
+			}]
+
+			const handleSubmit = () => {
+				const fields = [
+					{ ref: nomField, name: 'Nom' },
+					{ ref: prenomField, name: 'Prénom' },
+					{ ref: ageField, name: 'Âge' },
+				]
+
+				const invalidFields = fields
+					.filter(({ ref }) => !ref.value?.validateOnSubmit())
+					.map(({ name }) => name)
+
+				if (invalidFields.length > 0) {
+					alert(`Les champs suivants sont invalides :\n${invalidFields.join('\n')}`)
+				}
+				else {
+					alert('Formulaire soumis avec succès !')
+				}
+			}
+
+			return {
+				args,
+				nomField,
+				prenomField,
+				ageField,
+				nomValue,
+				prenomValue,
+				ageValue,
+				prenomRules,
+				ageRules,
+				handleSubmit,
+			}
+		},
+		template: `
+			<div style="max-width: 500px;">
+				<h3>Validation de formulaire</h3>
+				<form @submit.prevent="handleSubmit">
+					<div class="mb-4">
+						<SyTextField
+							ref="nomField"
+							v-model="nomValue"
+							label="Nom"
+							placeholder="Votre nom"
+							required
+							show-success-messages
+							class="mb-4"
+						/>
+
+						<SyTextField
+							ref="prenomField"
+							v-model="prenomValue"
+							label="Prénom"
+							placeholder="Votre prénom"
+							:custom-rules="prenomRules"
+							show-success-messages
+							class="mb-4"
+						/>
+
+						<SyTextField
+							ref="ageField"
+							v-model="ageValue"
+							label="Âge"
+							placeholder="Votre âge"
+							:custom-rules="ageRules"
+							show-success-messages
+							class="mb-4"
+						/>
+					</div>
+
+					<div class="text-caption mb-4">
+						<strong>Règles de validation :</strong>
+						<ul>
+							<li>Nom : Champ requis</li>
+							<li>Prénom : Minimum 3 caractères</li>
+							<li>Âge : Uniquement des chiffres</li>
+						</ul>
+					</div>
+
+					<button
+						type="submit"
+						style="
+							background-color: #1976d2;
+							color: white;
+							padding: 8px 16px;
+							border: none;
+							border-radius: 4px;
+							cursor: pointer;
+							font-size: 1rem;
+						"
+					>
+						Soumettre
+					</button>
+				</form>
+			</div>
+		`,
+	}),
+}
+
+export const WithPrefixAndSuffix: Story = {
+	args: {
+		modelValue: '42',
+		label: 'Montant',
+		prefix: '€',
+		suffix: 'TTC',
+	},
+	render: args => ({
+		components: { SyTextField },
+		setup() {
+			const value = ref(args.modelValue)
+			return { args, value }
+		},
+		template: `
+			<div>
+				<p class="mb-4">
+					Utilisation des props prefix et suffix pour ajouter des unités ou des informations complémentaires
+					directement dans le champ.
+				</p>
+				<SyTextField
+					v-model="value"
+					v-bind="args"
+				/>
+			</div>
+		`,
+	}),
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple d\'utilisation des props prefix et suffix pour ajouter des informations complémentaires directement dans le champ de saisie.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyTextField
+		v-model="value"
+		label="Montant"
+		prefix="€"
+		suffix="TTC"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+}