@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

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

@@ -7,9 +7,19 @@ import { mdiAccountBox } from '@mdi/js'
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
 	component: SyTextField,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
+		docs: {
+			description: {
+				component: `SyTextField`,
+			},
+		},
 	},
 	argTypes: {
 		modelValue: { control: 'text' },
@@ -49,169 +59,17 @@ const meta = {
 			options: ['horizontal', 'vertical'],
 			description: 'Direction d\'affichage',
 		},
-		type: {
-			control: 'select',
-			options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'date', 'time', 'datetime-local'],
-			description: 'Type d\'input HTML',
-		},
-		baseColor: {
-			control: 'color',
-			description: 'Couleur de base personnalisée',
-		},
-		bgColor: {
-			control: 'color',
-			description: 'Couleur de fond personnalisée',
-		},
-		width: {
-			control: 'text',
-			description: 'Largeur du champ (px, %, vh, etc.)',
-		},
-		maxWidth: {
-			control: 'text',
-			description: 'Largeur maximale (px, %, vh, etc.)',
-		},
-		minWidth: {
-			control: 'text',
-			description: 'Largeur minimale (px, %, vh, etc.)',
-		},
-		rounded: {
-			control: 'select',
-			options: [true, false, 0, 'sm', 'lg', 'xl', 'pill'],
-			description: 'Style des coins arrondis',
-		},
-		required: {
-			control: 'boolean',
-			description: 'Champ obligatoire',
-		},
-		isReadOnly: {
-			control: 'boolean',
-			description: 'Mode lecture seule',
-		},
-		isDisabled: {
-			control: 'boolean',
-			description: 'Désactive le champ',
-		},
-		isClearable: {
-			control: 'boolean',
-			description: 'Affiche un bouton pour effacer',
-		},
-		isTiled: {
-			control: 'boolean',
-			description: 'Style tuile',
-		},
-		isFlat: {
-			control: 'boolean',
-			description: 'Sans élévation',
-		},
-		isActive: {
-			control: 'boolean',
-			description: 'Force l\'état actif',
-		},
-		isFocused: {
-			control: 'boolean',
-			description: 'Force l\'état focus',
-		},
-		isDirty: {
-			control: 'boolean',
-			description: 'Indique si modifié',
-		},
-		isOnError: {
-			control: 'boolean',
-			description: 'Force l\'état erreur',
-		},
-		displayAsterisk: {
-			control: 'boolean',
-			description: 'Affiche l\'astérisque requis',
-		},
-		displayPersistentClear: {
-			control: 'boolean',
-			description: 'Bouton effacer toujours visible',
-		},
-		displayPersistentCounter: {
-			control: 'boolean',
-			description: 'Compteur toujours visible',
-		},
-		displayPersistentHint: {
-			control: 'boolean',
-			description: 'Aide toujours visible',
-		},
-		displayPersistentPlaceholder: {
-			control: 'boolean',
-			description: 'Placeholder toujours visible',
-		},
-		areDetailsHidden: {
-			control: 'select',
-			options: [true, false, 'auto'],
-			description: 'Masque les détails',
-		},
-		areSpinButtonsHidden: {
-			control: 'boolean',
-			description: 'Masque les boutons number',
-		},
-		noIcon: {
-			control: 'boolean',
-			description: 'Masque toutes les icônes',
-		},
-		centerAffix: {
-			control: 'boolean',
-			description: 'Centre les affixes',
-		},
-		counter: {
-			control: 'select',
-			options: [true, false, 'words', 'characters'],
-			description: 'Type de compteur',
-		},
-		counterValue: {
-			control: 'number',
-			description: 'Valeur du compteur',
-		},
-		maxErrors: {
-			control: 'number',
-			description: 'Nombre max d\'erreurs',
-		},
-		errorMessages: {
+		customRules: {
+			description: 'Règles de validation personnalisées',
 			control: 'object',
-			description: 'Messages d\'erreur',
 		},
-		messages: {
+		customWarningRules: {
+			description: 'Règles d\'avertissement personnalisées',
 			control: 'object',
-			description: 'Messages additionnels',
-		},
-		hint: {
-			control: 'text',
-			description: 'Message d\'aide',
-		},
-		placeholder: {
-			control: 'text',
-			description: 'Texte indicatif',
-		},
-		prefix: {
-			control: 'text',
-			description: 'Texte avant la valeur',
 		},
-		suffix: {
-			control: 'text',
-			description: 'Texte après la valeur',
-		},
-		id: {
-			control: 'text',
-			description: 'ID HTML',
-		},
-		name: {
-			control: 'text',
-			description: 'Nom du champ',
-		},
-		role: {
-			control: 'text',
-			description: 'Rôle ARIA',
-		},
-		theme: {
-			control: 'text',
-			description: 'Thème personnalisé',
-		},
-		loading: {
+		showSuccessMessages: {
+			description: 'Afficher les messages de succès',
 			control: 'boolean',
-			description: 'État de chargement',
 		},
 	},
 } as Meta<typeof SyTextField>
@@ -256,7 +114,7 @@ export const Default: Story = {
 				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>
 			`,
@@ -304,7 +162,7 @@ export const Required: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField v-bind="args" />
 				</div>
 			`,
@@ -312,71 +170,6 @@ export const Required: Story = {
 	},
 }
 
-export const WithCustomError: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<SyTextField 
-						v-model="value" 
-						:error-messages="errorMessages"
-					/>
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</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>
-				`,
-			},
-		],
-	},
-	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 = {
 	parameters: {
 		sourceCode: [
@@ -417,7 +210,7 @@ export const SlotPrepend: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 						:label="args.label"
@@ -469,7 +262,7 @@ export const SlotAppend: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 						:append-icon="args.appendIcon"
@@ -520,7 +313,7 @@ export const SlotPrependInner: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
@@ -572,7 +365,7 @@ export const SlotPrependInnerDivider: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
@@ -624,7 +417,7 @@ export const SlotAppendInner: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 						:append-inner-icon="args.appendInnerIcon"
@@ -682,7 +475,7 @@ export const SlotCustomIcon: Story = {
 				return { args, iconName }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="d-flex flex-wrap align-center">
 					<SyTextField
 						v-bind="args"
 					>
@@ -697,3 +490,381 @@ 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: 'maxLength',
+			options: {
+				length: 10,
+				message: 'Le texte commence à être un peu long'
+			}
+		}
+	]"
+	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: 'maxLength',
+						options: {
+							length: 10,
+							message: 'Le texte comporte 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 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>
+		`,
+	}),
+}