@cnamts/synapse 1.0.6 → 1.0.8

package/src/stories/GuideDuDev/FormValidationGuide.mdx

@@ -0,0 +1,342 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Guide de Validation des Formulaires"/>
+
+# Guide de Validation des Formulaires
+
+Ce guide pratique explique comment utiliser le système de validation des formulaires du Design System dans vos applications.
+
+## Les bases de la validation
+
+Le système de validation offre un mécanisme complet et intuitif pour valider les entrées utilisateur avec trois niveaux de retour :
+
+- **Erreurs** 🔴 : Empêchent la soumission du formulaire
+- **Avertissements** 🟠 : Informent l'utilisateur sans bloquer la soumission
+- **Succès** 🟢 : Confirment la validité de l'entrée
+
+## Mise en place simple
+
+Voici comment mettre en place une validation basique sur un champ :
+
+<Source dark code={`
+<template>
+  <SyTextField
+    v-model="email"
+    label="Email"
+    :custom-rules="emailRules"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { SyTextField } from '@cnamts/synapse';
+
+const email = ref('');
+
+const emailRules = [
+  { 
+    type: 'required',
+    options: { message: "L'email est obligatoire" }
+  },
+  { 
+    type: 'email',
+    options: { message: "L'email n'est pas valide" }
+  }
+];
+</script>
+`}/>
+
+## Validation complète avec les 3 niveaux
+
+Utilisez les différents types de règles pour une expérience utilisateur riche :
+
+<Source dark code={`
+<script setup>
+	import { ref } from 'vue'
+	import PasswordField from '@/components/PasswordField/PasswordField.vue'
+
+	const password = ref('')
+
+	// Règles d'erreur (bloquantes)
+	const passwordRules = [
+		{
+			type: 'required',
+			options: { 
+        message: 'Le mot de passe est obligatoire',
+      },
+		},
+		{
+			type: 'minLength',
+			options: { 
+        length: 8, 
+        message: 'Le mot de passe doit contenir au moins 8 caractères',
+      // si pas de successMessage, le message par defaut est affiché
+        successMessage: 'Le mot de passe est sécurisé',
+         },
+		},
+	]
+
+	// Règles d'avertissement (non-bloquantes)
+	const passwordWarningRules = [
+		{
+			type: 'custom',
+			options: {
+				validate: (value) => {
+					const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+					if (!hasSpecialChar) {
+						return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
+					}
+					return true
+				},
+				fieldIdentifier: 'password',
+			},
+		},
+	]
+
+  </script>
+
+<template>
+	<PasswordField
+		v-model="password"
+		label="Mot de passe"
+		:custom-warning-rules="passwordWarningRules"
+		:custom-rules="passwordRules"
+	/>
+</template>
+
+`}/>
+
+## Validation à la soumission avec validateOnSubmit
+
+La méthode `validateOnSubmit` est essentielle pour valider l'ensemble du formulaire lors de sa soumission :
+
+<Source dark code={`
+<template>
+  <form @submit.prevent="handleSubmit">
+    <SyTextField
+      ref="emailField"
+      v-model="email"
+      label="Email"
+      :custom-rules="emailRules"
+    />
+    
+    <PasswordField
+      ref="passwordField"
+      v-model="password"
+      label="Mot de passe"
+      type="password"
+      :custom-rules="passwordRules"
+    />
+    
+    <VBtn type="submit">Se connecter</VBtn>
+    
+    <p v-if="formError" class="error-message">{{ formError }}</p>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { SyTextField, PasswordField } from '@cnamts/synapse';
+
+const email = ref('');
+const password = ref('');
+const formError = ref('');
+
+const emailField = ref();
+const passwordField = ref();
+
+const emailRules = [
+  { type: 'required', options: { message: "L'email est obligatoire" } },
+  { type: 'email', options: { message: "L'email n'est pas valide" } }
+];
+
+const passwordRules = [
+  { type: 'required', options: { message: 'Le mot de passe est obligatoire' } }
+];
+
+const handleSubmit = async () => {
+  formError.value = '';
+  
+  // Validation de tous les champs
+  const isEmailValid = await emailField.value.validateOnSubmit();
+  const isPasswordValid = await passwordField.value.validateOnSubmit();
+  
+  if (isEmailValid && isPasswordValid) {
+    // Soumettre le formulaire
+    console.log('Formulaire soumis avec succès !');
+    // loginUser(email.value, password.value);
+  } else {
+    formError.value = 'Veuillez corriger les erreurs dans le formulaire';
+  }
+};
+</script>
+`}/>
+
+## Validation croisée entre champs
+
+Parfois, la validation d'un champ dépend de la valeur d'un autre champ. Voici comment gérer ce cas :
+
+<Source dark code={`
+<template>
+  <form @submit.prevent="handleSubmit">
+    <PasswordField
+      ref="passwordField"
+      v-model="password"
+      label="Mot de passe"
+      type="password"
+      :custom-rules="passwordRules"
+    />
+    
+    <PasswordField
+      ref="confirmPasswordField"
+      v-model="confirmPassword"
+      label="Confirmer le mot de passe"
+      type="password"
+      :custom-rules="confirmPasswordRules"
+    />
+    
+    <VBtn type="submit">S'inscrire</VBtn>
+  </form>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { PasswordField } from '@cnamts/synapse';
+
+const password = ref('');
+const confirmPassword = ref('');
+
+const passwordField = ref();
+const confirmPasswordField = ref();
+
+const passwordRules = [
+  { type: 'required', options: { message: 'Le mot de passe est obligatoire' } },
+  { type: 'minLength', options: { length: 8, message: 'Le mot de passe doit contenir au moins 8 caractères' } }
+];
+
+const confirmPasswordRules = [
+  { type: 'required', options: { message: 'La confirmation du mot de passe est obligatoire' } },
+  {
+    type: 'custom',
+    options: {
+      validate: (value) => {
+        if (value !== password.value) {
+          return 'Les mots de passe ne correspondent pas';
+        }
+        return true;
+      }
+    }
+  }
+];
+
+// Revalider la confirmation lorsque le mot de passe change
+watch(password, () => {
+  if (confirmPassword.value && confirmPasswordField.value) {
+    // Forcer la validation du champ de confirmation
+    confirmPasswordField.value.validateOnSubmit();
+  }
+});
+
+const handleSubmit = async () => {
+  // Validation de tous les champs
+  const isPasswordValid = await passwordField.value.validateOnSubmit();
+  const isConfirmValid = await confirmPasswordField.value.validateOnSubmit();
+  
+  if (isPasswordValid && isConfirmValid) {
+    // Soumettre le formulaire
+    console.log('Inscription réussie !');
+  }
+};
+</script>
+`}/>
+
+## Composants avec validation intégrée
+
+Plusieurs composants du Design System intègrent déjà la validation :
+
+- **SyTextField** : Pour les champs texte
+- **NirField** : Pour les numéros de sécurité sociale
+- **DatePicker** : Pour les dates
+- **PeriodField** : Pour les périodes (deux dates liées)
+- **PasswordField** : Pour les mots de passe sécurisés
+
+### Exemple avec NirField
+
+<Source dark code={`
+<template>
+  <form @submit.prevent="handleSubmit">
+    <NirField
+      ref="nirFieldRef"
+      v-model="nirValue"
+      label="Numéro de sécurité sociale"
+    />
+    
+    <SyButton type="submit">Valider</SyButton>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { NirField, SyButton } from '@cnamts/synapse';
+
+const nirValue = ref('');
+const nirFieldRef = ref();
+
+const handleSubmit = async () => {
+  const isValid = await nirFieldRef.value.validateOnSubmit();
+  
+  if (isValid) {
+    console.log('NIR valide :', nirValue.value);
+  }
+};
+</script>
+`}/>
+
+## Règles de validation disponibles
+
+### Règles génériques
+- `required` : Champ obligatoire
+- `minLength` / `maxLength` : Longueur minimale/maximale
+- `min` / `max` : Valeur minimale/maximale pour les nombres
+- `email` : Format d'email valide
+- `matchPattern` : Correspondance à une expression régulière
+
+### Règles de dates
+- `notBeforeToday` / `notAfterToday` : Date après/avant aujourd'hui
+- `notBeforeDate` / `notAfterDate` : Date après/avant une date spécifique
+- `notWeekend` : Jour ouvrable
+- `isHolidayDay` : Jour non férié
+
+### Règles personnalisées
+Utilisez le type `custom` avec une fonction `validate` pour créer vos propres règles :
+
+<Source dark code={`
+const customRule = {
+  type: 'custom',
+  options: {
+    validate: (value) => {
+      // Votre logique personnalisée
+      if (!condition) {
+        return 'Message d\'erreur personnalisé';
+      }
+      return true; // Valide
+    },
+    // Optionnel : traiter comme avertissement au lieu d'erreur
+    isWarning: false
+  }
+};
+`}/>
+
+## Bonnes pratiques
+
+1. **Validation progressive** : Validez pendant la saisie pour une rétroaction immédiate
+2. **Messages clairs** : Utilisez des messages d'erreur explicites et constructifs
+3. **Validation côté client ET serveur** : Ne vous fiez jamais uniquement à la validation côté client
+4. **Utilisez validateOnSubmit** : Assurez-vous que tous les champs sont validés à la soumission
+5. **Hiérarchisez les erreurs** : Affichez d'abord les erreurs les plus importantes
+6. **Utilisez les avertissements** pour les recommandations non-bloquantes
+7. **Célébrez la réussite** avec des messages de succès pour renforcer les bonnes pratiques
+
+## Conclusion
+
+Le système de validation du Design System vous permet de créer des formulaires intuitifs avec des retours utilisateur riches. En combinant validation à la saisie et validation à la soumission, vous offrez une expérience utilisateur optimale tout en garantissant l'intégrité des données.

package/src/stories/Templates/Templates.stories.ts

@@ -10,7 +10,7 @@ export const Header: StoryObj = {
 		return {
 			template: `
         <div class="mb-8">
-          <h1 class="text-h4 font-weight-bold mb-4">Templates</h1>
+          <h1 class="mb-4">Templates</h1>
           <p class="text-body-1">Découvrez notre collection de templates conçus pour accélérer le développement de vos IHM.</p>
         </div>
       `,

package/src/utils/functions/ameliproColors/ameliproColors.ts

@@ -14,7 +14,7 @@ export const AmeliproColors: AmeliproColorsTypes = {
 	apGreendarken1: { hexColor: '#459B5A' },
 	apGreendarken2: { hexColor: '#337343' },
 	apGreenlighten1: { hexColor: '#78CE8D' },
-	apGreenlighten2: { hexColor: '#DDF3F3' },
+	apGreenlighten2: { hexColor: '#DDF3E3' },
 	apGrey: { hexColor: '#545859' },
 	apGreydarken1: { hexColor: '#1A1B1B' },
 	apGreylighten1: { hexColor: '#CCCDCE' },

package/dist/components/DataList/locales.d.ts

@@ -1,3 +0,0 @@
-export declare const locales: {
-    loadingLabel: string;
-};

package/src/components/DataList/locales.ts

@@ -1,3 +0,0 @@
-export const locales = {
-	loadingLabel: 'Le contenu est en cours de chargement.',
-}

package/src/components/PhoneField/tests/PhoneField.additional.spec.ts

@@ -1,266 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PhoneField from '../PhoneField.vue'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
-import { indicatifs } from '../indicatifs'
-
-const vuetify = createVuetify({
-	components,
-	directives,
-})
-
-// Tests supplémentaires pour le composant PhoneField
-describe('PhoneField - Additional Tests', () => {
-	// Tests pour les différents formats d'affichage
-	describe('Display formats', () => {
-		let wrapper
-
-		beforeEach(() => {
-			wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					withCountryCode: true,
-					dialCodeModel: { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' },
-				},
-			})
-		})
-
-		it('formats display text as code by default', async () => {
-			const select = wrapper.findComponent({ name: 'SySelect' })
-			// Vérifier que le format d'affichage est bien le code
-			const firstItem = select.props('items')[0]
-			expect(firstItem.displayText).toBe(firstItem.code)
-		})
-
-		it('formats display text as code-abbreviation', async () => {
-			await wrapper.setProps({ displayFormat: 'code-abbreviation' })
-			const select = wrapper.findComponent({ name: 'SySelect' })
-			const firstItem = select.props('items')[0]
-			expect(firstItem.displayText).toBe(`${firstItem.code} (${firstItem.abbreviation})`)
-		})
-
-		it('formats display text as code-country', async () => {
-			await wrapper.setProps({ displayFormat: 'code-country' })
-			const select = wrapper.findComponent({ name: 'SySelect' })
-			const firstItem = select.props('items')[0]
-			expect(firstItem.displayText).toBe(`${firstItem.code} ${firstItem.country}`)
-		})
-
-		it('formats display text as country', async () => {
-			await wrapper.setProps({ displayFormat: 'country' })
-			const select = wrapper.findComponent({ name: 'SySelect' })
-			const firstItem = select.props('items')[0]
-			expect(firstItem.displayText).toBe(firstItem.country)
-		})
-
-		it('formats display text as abbreviation', async () => {
-			await wrapper.setProps({ displayFormat: 'abbreviation' })
-			const select = wrapper.findComponent({ name: 'SySelect' })
-			const firstItem = select.props('items')[0]
-			expect(firstItem.displayText).toBe(firstItem.abbreviation)
-		})
-	})
-
-	// Tests pour l'initialisation avec un dialCode par défaut
-	describe('Default dialCode initialization', () => {
-		it('initializes with a default dialCode object', async () => {
-			const defaultDialCode = { code: '+44', abbreviation: 'UK', country: 'United Kingdom', phoneLength: 11, mask: '#### ### ####' }
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					withCountryCode: true,
-					dialCodeModel: defaultDialCode,
-				},
-			})
-
-			await wrapper.vm.$nextTick()
-
-			// Vérifier que le dialCode est correctement initialisé
-			expect(wrapper.vm.dialCode).toBeDefined()
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-			expect((wrapper.vm.dialCode as any).code).toBe('+44')
-			// Vérifier que le masque est appliqué (le format exact peut varier)
-			expect(wrapper.vm.phoneMask).toBeDefined()
-			// Vérifier que le counter est défini selon la phoneLength
-			expect(wrapper.vm.counter).toBeDefined()
-		})
-
-		it('initializes with a default dialCode string', async () => {
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					withCountryCode: true,
-					dialCodeModel: '+33',
-				},
-			})
-
-			await wrapper.vm.$nextTick()
-
-			// Vérifier que le dialCode est correctement initialisé
-			expect(wrapper.vm.dialCode).toBe('+33')
-		})
-	})
-
-	// Tests pour la désactivation de la gestion des erreurs
-	describe('Error handling', () => {
-		it('displays error messages by default when validation fails', async () => {
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					required: true,
-					modelValue: '',
-					isValidatedOnBlur: true,
-				},
-			})
-
-			// Déclencher la validation
-			await wrapper.vm.validateOnSubmit()
-
-			// Vérifier que les erreurs sont affichées
-			expect(wrapper.vm.hasError).toBe(true)
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-			expect((wrapper.vm as any).errors.length).toBeGreaterThan(0)
-
-			// Vérifier que les erreurs sont passées au composant SyTextField
-			const textField = wrapper.findComponent({ name: 'SyTextField' })
-			expect(textField.props('errorMessages')).toBeTruthy()
-		})
-
-		it('initializes with disableErrorHandling prop', async () => {
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					required: true,
-					modelValue: '',
-					isValidatedOnBlur: true,
-					disableErrorHandling: true,
-				},
-			})
-
-			// Vérifier que la propriété disableErrorHandling est bien prise en compte
-			// en vérifiant qu'elle est passée lors de l'initialisation du composable useValidation
-			expect(wrapper.vm.validation).toBeDefined()
-		})
-	})
-
-	// Tests pour la validation dans un contexte de formulaire
-	describe('Form validation', () => {
-		it('validates as part of a form submission', async () => {
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					required: true,
-					modelValue: '',
-				},
-			})
-
-			// Simuler une soumission de formulaire avec un champ vide
-			const isValid = await wrapper.vm.validateOnSubmit()
-			expect(isValid).toBe(false)
-
-			// Mettre à jour la valeur et valider à nouveau
-			await wrapper.setProps({ modelValue: '0123456789' })
-			const isValidAfterUpdate = await wrapper.vm.validateOnSubmit()
-			expect(isValidAfterUpdate).toBe(true)
-		})
-
-		it('validates country code as part of form submission', async () => {
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					required: true,
-					modelValue: '0123456789',
-					withCountryCode: true,
-					countryCodeRequired: true,
-				},
-			})
-
-			// Sans code pays, la validation échoue
-			const isValidWithoutCountry = await wrapper.vm.validateOnSubmit()
-			expect(isValidWithoutCountry).toBe(false)
-
-			// Ajouter un code pays et valider à nouveau
-			wrapper.vm.dialCode = { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' }
-			await wrapper.vm.$nextTick()
-
-			const isValidWithCountry = await wrapper.vm.validateOnSubmit()
-			expect(isValidWithCountry).toBe(true)
-		})
-	})
-
-	// Tests pour la gestion des indicatifs personnalisés
-	describe('Custom indicatifs', () => {
-		it('merges custom indicatifs with standard ones by default', () => {
-			const customIndicatifs = [{ code: '+999', abbreviation: 'XX', country: 'Test Country', phoneLength: 8, mask: '## ## ## ##' }]
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					customIndicatifs,
-					withCountryCode: true,
-				},
-			})
-
-			// Vérifier que les indicatifs personnalisés sont ajoutés aux indicatifs standards
-			expect(wrapper.vm.mergedDialCodes.length).toBe(indicatifs.length + customIndicatifs.length)
-			expect(wrapper.vm.mergedDialCodes).toContainEqual(customIndicatifs[0])
-		})
-
-		it('uses only custom indicatifs when useCustomIndicatifsOnly is true', () => {
-			const customIndicatifs = [{ code: '+999', abbreviation: 'XX', country: 'Test Country', phoneLength: 8, mask: '## ## ## ##' }]
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					customIndicatifs,
-					useCustomIndicatifsOnly: true,
-					withCountryCode: true,
-				},
-			})
-
-			// Vérifier que seuls les indicatifs personnalisés sont utilisés
-			expect(wrapper.vm.mergedDialCodes.length).toBe(customIndicatifs.length)
-			expect(wrapper.vm.mergedDialCodes).toEqual(customIndicatifs)
-		})
-
-		it('updates phone mask and counter based on selected custom indicatif', async () => {
-			const customIndicatifs = [{ code: '+999', abbreviation: 'XX', country: 'Test Country', phoneLength: 8, mask: '## ## ## ##' }]
-			const wrapper = mount(PhoneField, {
-				global: {
-					plugins: [vuetify],
-				},
-				props: {
-					customIndicatifs,
-					useCustomIndicatifsOnly: true,
-					withCountryCode: true,
-				},
-			})
-
-			// Sélectionner l'indicatif personnalisé
-			wrapper.vm.dialCode = customIndicatifs[0]
-			await wrapper.vm.$nextTick()
-
-			// Vérifier que le masque et le compteur sont mis à jour
-			expect(wrapper.vm.phoneMask).toBe('## ## ## ##')
-			expect(wrapper.vm.counter).toBe(8)
-		})
-	})
-})