@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap

@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with an error 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > render correctly in multiple mode 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary"></ul>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly with props 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;

package/src/components/SelectBtnField/types.d.ts

@@ -0,0 +1,11 @@
+export type SelectBtnValue =
+	| string
+	| number
+	| Array<string | number | null | undefined>
+	| null
+
+export interface SelectBtnItem {
+	text: string
+	value: string | number
+	unique?: boolean
+}

package/src/components/index.ts

@@ -1,3 +1,6 @@
+export { default as DatePicker } from '@/components/DatePicker/DatePicker.vue'
+export { useFieldValidation } from '../composables/rules/useFieldValidation'
+export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
@@ -19,6 +22,7 @@ export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
+export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -41,10 +45,13 @@ export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
+export { default as RangeField } from './RangeField/RangeField.vue'
+export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
-export { default as PasswordField } from './PasswordField/PasswordField.vue'

package/src/composables/rules/useFieldValidation.ts

@@ -1,88 +1,216 @@
-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() !== '',
+						options.message || `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 || `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 || `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 || `${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 || `${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 || `${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 || `${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 || `Le format de ${identifier} est invalide.`,
+					)
+
+				case 'notWeekend': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						!(dateValue.getDay() === 0 || dateValue.getDay() === 6),
+						options.message || `${identifier} ne peut pas être un jour de weekend.`,
+					)
+				}
+
+				case 'notBeforeToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue >= new Date(),
+						options.message || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
+					)
+				}
+
+				case 'notAfterToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue <= new Date(),
+						options.message || `${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 || `${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 || `${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 || `${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',
+		)
+	})
+})