@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/composables/rules/useFieldValidation.ts

@@ -1,88 +1,218 @@
-type RuleOptions = {
-	fieldName?: string
+export type ValidationResult = {
+	success?: string
+	error?: string
+	warning?: string
+}
+
+export type RuleOptions = {
 	message?: string
 	successMessage?: string
+	warningMessage?: string
+	fieldName?: string
+	fieldIdentifier?: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	value?: any
 	length?: number
-	value?: number
 	pattern?: RegExp
 	ignoreSpace?: boolean
-	fieldIdentifier?: string
+	isWarning?: boolean // Si true, la règle génère un warning au lieu d'une erreur
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	validate?: (value: any) => boolean | string
+	date?: string | Date // Date de référence pour les règles notBeforeDate et notAfterDate
 }
 
-type ValidationResult = {
-	success?: string
-	error?: string
-}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-type ValidationRule = (value: any) => ValidationResult
+export type ValidationRule = (value: any) => ValidationResult
 
 export function useFieldValidation() {
+	const getValueLength = (value: string, ignoreSpace?: boolean): number => {
+		return ignoreSpace ? value.replace(/\s/g, '').length : value.length
+	}
+
 	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) => {
+		return (value: any): ValidationResult => {
+			// Gestion des champs vides non obligatoires
 			if (type !== 'required' && typeof value === 'string' && value.trim() === '') {
 				return {}
 			}
+
+			// Identifier de champ pour personnaliser les messages
+			const identifier = options.fieldIdentifier
+				? `${options.fieldIdentifier}`
+				: options.fieldName || 'ce champ'
+
+			const baseMessages = {
+				success: options.successMessage || 'Le champ est valide.',
+				error: options.message || `Validation échouée pour ${identifier}.`,
+				warning: options.warningMessage || `Attention : ${identifier} peut contenir une erreur.`,
+			}
+
+			const createValidationResult = (isValid: boolean, message?: string): ValidationResult => {
+				if (isValid) {
+					return { success: baseMessages.success }
+				}
+				return options.isWarning
+					? { warning: message || baseMessages.warning }
+					: { error: message || baseMessages.error }
+			}
+
 			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'}.` }
+					return createValidationResult(
+						(typeof value === 'string' && value.trim() !== '')
+						|| (value instanceof Date)
+						|| (typeof value === 'object' && value !== null),
+						options.message || options.warningMessage || `Vous devez renseigner ${identifier}.`,
+					)
 
 				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.` }
+					return createValidationResult(
+						typeof value === 'number' && value >= (options.value ?? 0),
+						options.message || options.warningMessage || `La valeur de ${identifier} doit être supérieure ou égale à ${options.value}.`,
+					)
 
 				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}.` }
+					return createValidationResult(
+						typeof value === 'number' && value <= (options.value ?? Infinity),
+						options.message || options.warningMessage || `La valeur de ${identifier} doit être inférieure ou égale à ${options.value}.`,
+					)
+
+				case 'minLength':
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) >= (options.length ?? 0),
+						options.message || options.warningMessage || `${identifier} doit contenir au moins ${options.length} caractères.`,
+					)
 
 				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.` }
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) <= (options.length ?? Infinity),
+						options.message || options.warningMessage || `${identifier} ne doit pas dépasser ${options.length} caractères.`,
+					)
 
 				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.` }
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) === (options.length ?? 0),
+						options.message || options.warningMessage || `${identifier} doit contenir 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.` }
+					return createValidationResult(
+						typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+						options.message || options.warningMessage || `${identifier} doit être 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.` }
+					return createValidationResult(
+						typeof value === 'string' && !!options.pattern && options.pattern.test(value),
+						options.message || options.warningMessage || `Le format de ${identifier} est invalide.`,
+					)
+
+				case 'notWeekend': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						!(dateValue.getDay() === 0 || dateValue.getDay() === 6),
+						options.message || options.warningMessage || `${identifier} ne peut pas être un jour de weekend.`,
+					)
+				}
+
+				case 'notBeforeToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue >= new Date(),
+						options.message || options.warningMessage || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
+					)
+				}
+
+				case 'notAfterToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue <= new Date(),
+						options.message || options.warningMessage || `${identifier} ne peut pas être postérieur à aujourd'hui.`,
+					)
+				}
+
+				case 'notBeforeDate': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					// Check if options.date is a string and in DD/MM/YYYY format
+					if (typeof options.date !== 'string') {
+						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+					}
+
+					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue >= referenceDate,
+						options.message || options.warningMessage || `${identifier} ne peut pas être avant le ${options.date}.`,
+					)
+				}
+
+				case 'notAfterDate': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					// Check if options.date is a string and in DD/MM/YYYY format
+					if (typeof options.date !== 'string') {
+						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+					}
+
+					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue <= referenceDate,
+						options.message || options.warningMessage || `${identifier} ne peut pas être après le ${options.date}.`,
+					)
+				}
+
+				case 'dateExact': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					if (typeof options.date !== 'string') {
+						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+					}
+
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue.getTime() === referenceDate.getTime(),
+						options.message || options.warningMessage || `${identifier} doit être exactement le ${options.date}.`,
+					)
+				}
 
 				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.` }
+					if (result === true) {
+						return { success: baseMessages.success }
+					}
+					return options.isWarning
+						? { warning: typeof result === 'string' ? result : baseMessages.warning }
+						: { error: typeof result === 'string' ? result : baseMessages.error }
 				}
 
 				default:
-					return { error: `La règle spécifiée n'existe pas.` }
+					return { error: `La règle spécifiée pour ${identifier} n'existe pas.` }
 			}
 		}
 	}
 
-	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>) => {
+	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>): ValidationRule[] => {
 		return fieldRules.map(rule => createRule(rule.type, rule.options))
 	}
 

package/src/designTokens/index.ts

@@ -3,9 +3,9 @@ import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
 import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
-import { paColorsTokens } from '@/designTokens/tokens/pa/paColors'
-import { paLightTheme } from '@/designTokens/tokens/pa/paLightTheme'
-import { paDarkTheme } from '@/designTokens/tokens/pa/paDarkTheme'
+import { paColorsTokens } from './tokens/pa/paColors'
+import { paLightTheme } from './tokens/pa/paLightTheme'
+import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
 export {
 	cnamColorsTokens,

package/src/stories/Fondamentaux/CustomisationEtThemes.mdx

@@ -1,7 +1,57 @@
-import { Meta } from '@storybook/addon-docs';
+import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 <Meta title="Fondamentaux/Customisation et thèmes" />
 
 # Customisation et thèmes
 
-Contenu à définir
+## Étapes pour changer le thème du Design System aux couleurs Portail Agent
+
+### 1. Modification du fichier nuxt.config.ts
+
+1.	Ouvrez le fichier nuxt.config.ts dans votre éditeur de code.
+2.	Remplacer les valeurs des thèmes `cnamLightTheme` et `cnamDarkTheme` par les valeurs de la charte PA : `paLightTheme` et `paDarkTheme`.
+
+<Source dark code={`
+import {paLightTheme} from '@cnamts/synapse/designTokens/tokens/pa/paLightTheme'
+import {paDarkTheme} from '@cnamts/synapse/designTokens/tokens/pa/paDarkTheme'
+`}
+/>
+
+3.	Localisez la configuration de base de Vuetify (ligne 31 dans le fichier `nuxt.config.ts`).
+4.	Mettez à jour le thème en configurant les couleurs selon la charte PA si nécessaire :
+
+<Source dark code={`
+theme: {
+    defaultTheme: 'light',
+    themes: {
+        light: {
+            colors: {
+                ...paLightTheme,
+                // ...customLightTheme
+            },
+        },
+        dark: {
+            colors: {
+                ...paDarkTheme,
+                //...customDarkTheme,
+            },
+        },
+    },
+},
+`}
+/>
+
+NB : les thèmes `customLightTheme` et `customDarkTheme` sont à votre disposition pour ajouter des couleurs supplémentaires.
+
+### 2. Relancer le projet
+
+Après avoir effectué les modifications dans le fichier de configuration, relancez le serveur de développement pour appliquer les changements :
+
+<Source dark code={`
+pnpm dev
+`}
+/>
+
+### 3. Vérification
+
+Une fois le projet redémarré, vérifiez que la charte PA est bien appliquée.

package/src/utils/calcHumanFileSize/index.ts

@@ -0,0 +1,12 @@
+/** Compute a size in bytes into an human readable value */
+export function calcHumanFileSize(
+	size: number,
+	fileSizeUnits: string[],
+	separator = ' ',
+): string {
+	const index = Math.floor(Math.log(size) / Math.log(1024))
+
+	const computedSize = Number((size / Math.pow(1024, index)).toFixed(2)) * 1
+
+	return computedSize + separator + fileSizeUnits[index]
+}

package/src/utils/calcHumanFileSize/tests/calcHumanFileSize.spec.ts

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+
+import { calcHumanFileSize } from '../'
+
+const sizeMax = 4096 * 1024 // 4MB
+
+const fileSizeUnits = ['B', 'KB', 'MB', 'GB', 'TB']
+
+describe('calcHumanFileSize', () => {
+	it('returns the readable size', () => {
+		expect(calcHumanFileSize(sizeMax, fileSizeUnits)).toEqual('4 MB')
+	})
+
+	it('returns the readable size with a custom text separator', () => {
+		const separator = '_'
+
+		expect(calcHumanFileSize(sizeMax, fileSizeUnits, separator)).toEqual(
+			'4_MB',
+		)
+	})
+})