@cnamts/synapse 1.0.5 → 1.0.7

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/src/vuetifyConfig.ts

@@ -1,4 +1,5 @@
-import { createVuetify } from 'vuetify'
+import './assets/themes.scss'
+
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
@@ -21,8 +22,7 @@ import {
 import { createFlattenTheme, createFontVariables } from './designTokens/utils'
 import { fr } from 'vuetify/locale'
 
-// Import typography styles
-import './assets/_typography.scss'
+import { createVuetify } from 'vuetify'
 
 export const createVuetifyInstance = () => createVuetify({
 	components,

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

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

package/dist/directives/letterSpacing.d.ts

@@ -1,27 +0,0 @@
-import { Directive } from 'vue';
-interface LetterSpacingOptions {
-    /**
-     * Whether to apply to all typography elements or only specific selectors
-     * @default true
-     */
-    applyToAll?: boolean;
-    /**
-     * Specific selectors to target (if applyToAll is false)
-     */
-    selectors?: string[];
-    /**
-     * Whether to observe DOM changes for dynamic content
-     * @default true
-     */
-    observeChanges?: boolean;
-}
-/**
- * Vue directive to override Vuetify's !important letter-spacing with design token values
- *
- * Usage:
- * - v-letter-spacing (applies to all typography elements)
- * - v-letter-spacing="{ applyToAll: false, selectors: ['.text-h1', '.text-h2'] }"
- * - v-letter-spacing="{ observeChanges: false }" (disable mutation observer)
- */
-export declare const vLetterSpacing: Directive<HTMLElement, LetterSpacingOptions | boolean>;
-export default vLetterSpacing;

package/src/assets/_fonts.scss

@@ -1,6 +0,0 @@
-@use 'vuetify/settings' with (
-	$body-font-family: Arial
-);
-
-// Forward Vuetify settings
-@forward 'vuetify/settings';

package/src/assets/_typography.scss

@@ -1,157 +0,0 @@
-/* Typography styles for CNAM and PA themes */
-
-.v-application .v-theme--cnam,
-.v-application .v-theme--pa {
-	/* Headings with Vuetify classes */
-	.text-h1 {
-		font-size: var(--v-typography-h1-font-size) !important;
-		font-weight: var(--v-typography-h1-font-weight) !important;
-		line-height: var(--v-typography-h1-line-height) !important;
-		letter-spacing: var(--v-typography-h1-letter-spacing);
-	}
-
-	.text-h2 {
-		font-size: var(--v-typography-h2-font-size) !important;
-		font-weight: var(--v-typography-h2-font-weight) !important;
-		line-height: var(--v-typography-h2-line-height) !important;
-		letter-spacing: var(--v-typography-h2-letter-spacing);
-	}
-
-	.text-h3 {
-		font-size: var(--v-typography-h3-font-size) !important;
-		font-weight: var(--v-typography-h3-font-weight) !important;
-		line-height: var(--v-typography-h3-line-height) !important;
-		letter-spacing: var(--v-typography-h3-letter-spacing);
-	}
-
-	.text-h4 {
-		font-size: var(--v-typography-h4-font-size) !important;
-		font-weight: var(--v-typography-h4-font-weight) !important;
-		line-height: var(--v-typography-h4-line-height) !important;
-		letter-spacing: var(--v-typography-h4-letter-spacing);
-	}
-
-	.text-h5 {
-		font-size: var(--v-typography-h5-font-size) !important;
-		font-weight: var(--v-typography-h5-font-weight) !important;
-		line-height: var(--v-typography-h5-line-height) !important;
-		letter-spacing: var(--v-typography-h5-letter-spacing);
-	}
-
-	.text-h6 {
-		font-size: var(--v-typography-h6-font-size) !important;
-		font-weight: var(--v-typography-h6-font-weight) !important;
-		line-height: var(--v-typography-h6-line-height) !important;
-		letter-spacing: var(--v-typography-h6-letter-spacing);
-	}
-
-	/* Native HTML heading elements */
-	h1 {
-		font-size: var(--v-typography-h1-font-size) !important;
-		font-weight: var(--v-typography-h1-font-weight) !important;
-		line-height: var(--v-typography-h1-line-height) !important;
-		letter-spacing: var(--v-typography-h1-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	h2 {
-		font-size: var(--v-typography-h2-font-size) !important;
-		font-weight: var(--v-typography-h2-font-weight) !important;
-		line-height: var(--v-typography-h2-line-height) !important;
-		letter-spacing: var(--v-typography-h2-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	h3 {
-		font-size: var(--v-typography-h3-font-size) !important;
-		font-weight: var(--v-typography-h3-font-weight) !important;
-		line-height: var(--v-typography-h3-line-height) !important;
-		letter-spacing: var(--v-typography-h3-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	h4 {
-		font-size: var(--v-typography-h4-font-size) !important;
-		font-weight: var(--v-typography-h4-font-weight) !important;
-		line-height: var(--v-typography-h4-line-height) !important;
-		letter-spacing: var(--v-typography-h4-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	h5 {
-		font-size: var(--v-typography-h5-font-size) !important;
-		font-weight: var(--v-typography-h5-font-weight) !important;
-		line-height: var(--v-typography-h5-line-height) !important;
-		letter-spacing: var(--v-typography-h5-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	h6 {
-		font-size: var(--v-typography-h6-font-size) !important;
-		font-weight: var(--v-typography-h6-font-weight) !important;
-		line-height: var(--v-typography-h6-line-height) !important;
-		letter-spacing: var(--v-typography-h6-letter-spacing);
-		margin-bottom: 0.5rem;
-	}
-
-	/* Body text */
-	.text-body-1 {
-		font-size: var(--v-typography-body1-font-size) !important;
-		font-weight: var(--v-typography-body1-font-weight) !important;
-		line-height: var(--v-typography-body1-line-height) !important;
-		letter-spacing: var(--v-typography-body1-letter-spacing);
-	}
-
-	.text-body-2 {
-		font-size: var(--v-typography-body2-font-size) !important;
-		font-weight: var(--v-typography-body2-font-weight) !important;
-		line-height: var(--v-typography-body2-line-height) !important;
-		letter-spacing: var(--v-typography-body2-letter-spacing);
-	}
-
-	/* Subtitle text */
-	.text-subtitle-1 {
-		font-size: var(--v-typography-subtitle1-font-size) !important;
-		font-weight: var(--v-typography-subtitle1-font-weight) !important;
-		line-height: var(--v-typography-subtitle1-line-height) !important;
-		letter-spacing: var(--v-typography-subtitle1-letter-spacing);
-	}
-
-	.text-subtitle-2 {
-		font-size: var(--v-typography-subtitle2-font-size) !important;
-		font-weight: var(--v-typography-subtitle2-font-weight) !important;
-		line-height: var(--v-typography-subtitle2-line-height) !important;
-		letter-spacing: var(--v-typography-subtitle2-letter-spacing);
-	}
-
-	/* Other typography */
-	.text-caption {
-		font-size: var(--v-typography-caption-font-size) !important;
-		font-weight: var(--v-typography-caption-font-weight) !important;
-		line-height: var(--v-typography-caption-line-height) !important;
-		letter-spacing: var(--v-typography-caption-letter-spacing);
-	}
-
-	.text-overline {
-		font-size: var(--v-typography-overline-font-size) !important;
-		font-weight: var(--v-typography-overline-font-weight) !important;
-		line-height: var(--v-typography-overline-line-height) !important;
-		letter-spacing: var(--v-typography-overline-letter-spacing);
-		text-transform: var(--v-typography-overline-text-transform, uppercase) !important;
-	}
-
-	/* Display text */
-	.text-display-1 {
-		font-size: var(--v-typography-display1-font-size) !important;
-		font-weight: var(--v-typography-display1-font-weight) !important;
-		line-height: var(--v-typography-display1-line-height) !important;
-		letter-spacing: var(--v-typography-display1-letter-spacing);
-	}
-
-	.text-display-2 {
-		font-size: var(--v-typography-display2-font-size) !important;
-		font-weight: var(--v-typography-display2-font-weight) !important;
-		line-height: var(--v-typography-display2-line-height) !important;
-		letter-spacing: var(--v-typography-display2-letter-spacing);
-	}
-}

package/src/components/DataList/locales.ts

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