@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/src/components/UploadWorkflow/useFileUploadJourney.ts

@@ -0,0 +1,18 @@
+import { computed, ref, type Ref } from 'vue'
+import type { UploadItem } from './types'
+
+export default function useFileUploadJourney(
+	fileListItems: Ref<UploadItem[]>,
+) {
+	const selectItems = computed(() => fileListItems.value.map(item => ({
+		value: item.id,
+		text: item.title,
+	})))
+
+	const selectedItem = ref<string>()
+
+	return ({
+		selectItems,
+		selectedItem,
+	})
+}

package/src/components/index.ts

@@ -27,6 +27,7 @@ export { default as FileList } from './FileList/FileList.vue'
 export { default as FilePreview } from './FilePreview/FilePreview.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as FilterInline } from './FilterInline/FilterInline.vue'
+export { default as FilterSideBar } from './FilterSideBar/FilterSideBar.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'
@@ -60,4 +61,5 @@ 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 UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/rules/useFieldValidation.ts

@@ -1,3 +1,6 @@
+// Regular expressions
+export const EMAIL_REGEXP = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+
 export type ValidationResult = {
 	success?: string
 	error?: string
@@ -100,7 +103,7 @@ export function useFieldValidation() {
 
 			const baseMessages = {
 				success: options.successMessage || 'Le champ est valide.',
-				error: options.message || `Validation échouée pour ${identifier}.`,
+				error: options.message || `Validation pour ${identifier}.`,
 				warning: options.warningMessage || `Attention : ${identifier} peut contenir une erreur.`,
 			}
 
@@ -154,7 +157,7 @@ export function useFieldValidation() {
 
 				case 'email':
 					return createValidationResult(
-						typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+						typeof value === 'string' && EMAIL_REGEXP.test(value),
 						options.message || options.warningMessage || `${identifier} doit être un email valide.`,
 					)
 

package/src/composables/validation/tests/useValidation.spec.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect } from 'vitest'
+import { useValidation } from '../useValidation'
+
+describe('useValidation', () => {
+	it('should initialize with empty validation state', () => {
+		const validation = useValidation()
+
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+		expect(validation.hasError.value).toBe(false)
+		expect(validation.hasWarning.value).toBe(false)
+		expect(validation.hasSuccess.value).toBe(false)
+	})
+
+	it('should handle basic validation rules', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test', rules)
+		expect(validResult.hasSuccess).toBe(true)
+		expect(validResult.state.successes).toContain('Champ valide')
+	})
+
+	it('should handle warning rules', () => {
+		const validation = useValidation()
+		const warningRules = [{
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length >= 8,
+				warningMessage: 'Le champ devrait contenir au moins 8 caractères',
+				isWarning: true,
+			},
+		}]
+
+		// Test avec une valeur courte
+		const shortResult = validation.validateField('test', [], warningRules)
+		expect(shortResult.hasWarning).toBe(true)
+		expect(shortResult.state.warnings[0]).toContain('8 caractères')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('test_long', [], warningRules)
+		expect(validResult.hasWarning).toBe(false)
+		expect(validResult.state.warnings).toEqual([])
+	})
+
+	it('should handle multiple validation rules', () => {
+		const validation = useValidation()
+		const rules = [
+			{
+				type: 'required',
+				options: {
+					message: 'Ce champ est requis',
+				},
+			},
+			{
+				type: 'minLength',
+				options: {
+					length: 3,
+					message: 'Minimum 3 caractères requis',
+				},
+			},
+		]
+
+		// Test avec une valeur vide
+		const emptyResult = validation.validateField('', rules)
+		expect(emptyResult.hasError).toBe(true)
+		expect(emptyResult.state.errors).toContain('Ce champ est requis')
+
+		// Test avec une valeur trop courte
+		const shortResult = validation.validateField('ab', rules)
+		expect(shortResult.hasError).toBe(true)
+		expect(shortResult.state.errors).toContain('Minimum 3 caractères requis')
+
+		// Test avec une valeur valide
+		const validResult = validation.validateField('abc', rules)
+		expect(validResult.hasError).toBe(false)
+		expect(validResult.hasSuccess).toBe(true)
+	})
+
+	it('should respect showSuccessMessages option', () => {
+		const validation = useValidation({ showSuccessMessages: false })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+				successMessage: 'Champ valide',
+			},
+		}]
+
+		const result = validation.validateField('test', rules)
+		expect(result.hasSuccess).toBe(false)
+		expect(result.state.successes).toEqual([])
+	})
+
+	it('should use fieldIdentifier in messages', () => {
+		const validation = useValidation({ fieldIdentifier: 'Email' })
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Le champ Email est requis',
+			},
+		}]
+
+		const result = validation.validateField('', rules)
+		expect(result.state.errors[0]).toContain('Email')
+	})
+
+	it('should clear validation state', () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(validation.hasError.value).toBe(true)
+
+		validation.clearValidation()
+		expect(validation.errors.value).toEqual([])
+		expect(validation.warnings.value).toEqual([])
+		expect(validation.successes.value).toEqual([])
+	})
+
+	it('should validate on submit', async () => {
+		const validation = useValidation()
+		const rules = [{
+			type: 'required',
+			options: {
+				message: 'Ce champ est requis',
+			},
+		}]
+
+		validation.validateField('', rules)
+		expect(await validation.validateOnSubmit()).toBe(false)
+
+		validation.validateField('test', rules)
+		expect(await validation.validateOnSubmit()).toBe(true)
+	})
+})

package/src/composables/validation/useValidation.ts

@@ -0,0 +1,165 @@
+import { ref, computed } from 'vue'
+import { useFieldValidation, type RuleOptions } from '../rules/useFieldValidation'
+
+export type ValidationRule = {
+	type: string
+	options: RuleOptions
+}
+
+export interface ValidationOptions {
+	showSuccessMessages?: boolean
+	fieldIdentifier?: string
+	customRules?: ValidationRule[]
+	warningRules?: ValidationRule[]
+	successRules?: ValidationRule[]
+}
+
+export interface ValidationState {
+	errors: string[]
+	warnings: string[]
+	successes: string[]
+}
+
+export interface ValidationResult {
+	hasError: boolean
+	hasWarning: boolean
+	hasSuccess: boolean
+	state: ValidationState
+}
+
+/**
+ * Composable pour gérer la validation des champs de formulaire
+ * @param options Options de configuration de la validation
+ * @returns Un objet contenant les états et méthodes de validation
+ */
+export function useValidation(options: ValidationOptions = { showSuccessMessages: true }) {
+	const errors = ref<string[]>([])
+	const warnings = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	const { generateRules } = useFieldValidation()
+
+	const hasError = computed(() => errors.value.length > 0)
+	const hasWarning = computed(() => warnings.value.length > 0)
+	const hasSuccess = computed(() =>
+		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+	)
+
+	const clearValidation = () => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+	}
+
+	const validateField = (
+		value: unknown,
+		rules: ValidationRule[] = [],
+		warningRules: ValidationRule[] = [],
+		successRules: ValidationRule[] = [],
+	): ValidationResult => {
+		clearValidation()
+
+		// Validation des règles normales
+		const normalRules = rules.map(rule => ({
+			type: rule.type,
+			options: {
+				...rule.options,
+				fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+			},
+		}))
+
+		const validationRules = generateRules(normalRules)
+		let hasValidationError = false
+		validationRules.forEach((validationRule) => {
+			const result = validationRule(value)
+			if (result.error) {
+				errors.value.push(result.error)
+				hasValidationError = true
+			}
+		})
+
+		// Si pas d'erreur, ajouter le message de succès ou un message par défaut
+		if (!hasValidationError && value && options.showSuccessMessages !== false) {
+			const customSuccessMessage = rules.find(rule => rule.options.successMessage)?.options.successMessage
+			if (customSuccessMessage) {
+				successes.value.push(customSuccessMessage)
+			}
+			else {
+				const defaultMessage = options.fieldIdentifier ? `Le champ ${options.fieldIdentifier} est valide.` : 'Champ valide'
+				successes.value.push(defaultMessage)
+			}
+		}
+
+		// Validation des règles d'avertissement
+		if (!hasValidationError) {
+			const warningValidationRules = generateRules(
+				warningRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isWarning: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			warningValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.warning) {
+					warnings.value.push(result.warning)
+				}
+			})
+		}
+
+		// Validation des règles de succès
+		if (!hasValidationError && !hasWarning.value) {
+			const successValidationRules = generateRules(
+				successRules.map(rule => ({
+					type: rule.type,
+					options: {
+						...rule.options,
+						isSuccess: true,
+						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
+					},
+				})),
+			)
+
+			successValidationRules.forEach((validationRule) => {
+				const result = validationRule(value)
+				if (result.success && options.showSuccessMessages !== false) {
+					successes.value.push(result.success)
+				}
+			})
+		}
+
+		return {
+			hasError: hasError.value,
+			hasWarning: hasWarning.value,
+			hasSuccess: hasSuccess.value,
+			state: {
+				errors: errors.value,
+				warnings: warnings.value,
+				successes: successes.value,
+			},
+		}
+	}
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return !hasError.value
+	}
+
+	return {
+		// États
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+
+		// Méthodes
+		validateField,
+		validateOnSubmit,
+		clearValidation,
+	}
+}

package/src/designTokens/index.ts

@@ -4,6 +4,8 @@ import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { paColorsTokens } from './tokens/pa/paColors'
+import { paSemanticTokens } from './tokens/pa/paSemantic'
+import { paContextualTokens } from './tokens/pa/paContextual'
 import { paLightTheme } from './tokens/pa/paLightTheme'
 import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
@@ -14,6 +16,8 @@ export {
 	cnamLightTheme,
 	cnamDarkTheme,
 	paColorsTokens,
+	paSemanticTokens,
+	paContextualTokens,
 	paLightTheme,
 	paDarkTheme,
 }

package/src/stories/Demarrer/Accueil.mdx

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 
 <Meta of={AccueilStories} />
 
-<div class={css`position: relative; padding: 4rem; margin: -4rem -4rem 1rem !important;`}>
+<div className={css`position: relative; padding: 4rem; margin: -4rem -4rem 1rem !important;`}>
     <Story of={AccueilStories.Header} />
 </div>
 

package/src/stories/DesignTokens/ThemePA.mdx

@@ -4,44 +4,18 @@ import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 # Thème Portail Agent
 
-Pour des raisons techniques, la documentation ne permet pas encore l'affichage des composants aux couleurs du Portail Agent.<br/>
-Cependant, il est possible de changer le thème du Design System pour qu'il corresponde aux couleurs du PA.
-#
-
 ## É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 :
+2.	Remplacer la valeur du thème par défaut`defaultTheme` par le thème PA : `pa`.
 
 <Source dark code={`
 theme: {
-    defaultTheme: 'light',
-    themes: {
-        light: {
-            colors: {
-                ...paLightTheme,
-                // ...customLightTheme
-            },
-        },
-        dark: {
-            colors: {
-                ...paDarkTheme,
-                //...customDarkTheme,
-            },
-        },
-    },
-},
+	defaultTheme: 'pa',
+	...
+}
 `}
 />