@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/NirField/NirField.vue

@@ -0,0 +1,453 @@
+<script lang="ts" setup>
+	import { ref, watch, computed, nextTick } from 'vue'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import { vMaska } from 'maska/vue'
+	import { checkNIR, isNIRKeyValid } from './nirValidation'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
+	import { mdiInformationOutline } from '@mdi/js'
+	import { locales } from './locales'
+	import defaultOptions from './config'
+
+	type Rule = (value: string) => { error?: string, success?: string }
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		modelValue?: string | undefined
+		outlined?: boolean
+		required?: boolean
+		nirTooltip?: string
+		keyTooltip?: string
+		numberLabel?: string
+		keyLabel?: string
+		displayKey?: boolean
+		showSuccessMessages?: boolean
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		customNumberRules?: any
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		customKeyRules?: any
+	}>(), {
+		modelValue: undefined,
+		outlined: true,
+		required: false,
+		nirTooltip: undefined,
+		keyTooltip: undefined,
+		numberLabel: 'Numéro de sécurité sociale',
+		keyLabel: 'Clé',
+		displayKey: true,
+		showSuccessMessages: false,
+		customNumberRules: [],
+		customKeyRules: [],
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+	const options = useCustomizableOptions(defaultOptions, props)
+	const infoIcon = mdiInformationOutline
+
+	// Champs
+	const numberValue = ref('')
+	const keyValue = ref('')
+	const keyDeleted = ref(false)
+
+	// Refs pour les champs
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const keyField = ref<any | null>(null)
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const numberField = ref<any | null>(null)
+
+	const unmaskedNumberValue = computed(() => numberValue.value.replace(/\s/g, ''))
+
+	watch(() => props.modelValue, async (value) => {
+		numberValue.value = value?.slice(0, 13) ?? ''
+		keyValue.value = value?.slice(13, 15) ?? ''
+	}, { immediate: true })
+
+	// Etats d’erreur/succès
+	const errors = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	// Flags de validation
+	const isValidating = ref(false)
+
+	// Masques
+	const numberMask = {
+		mask: '# ## ## #C ### ###',
+		preProcess: (value: string) => value.toUpperCase(),
+		tokens: {
+			C: {
+				pattern: /[0-9AB]/,
+				transform: (char: string) => char.toUpperCase(),
+			},
+		},
+	}
+	const keyMask = { mask: '##' }
+
+	// Règles de validation par défaut
+	const { generateRules } = useFieldValidation()
+
+	const defaultNumberRules = [
+		{
+			type: 'exactLength',
+			options: { length: 13, message: locales.errorLengthNumber(13), ignoreSpace: true, fieldIdentifier: 'numéro' },
+		},
+		{
+			type: 'custom',
+			options: {
+				validate: checkNIR,
+				message: 'Le numéro de sécurité sociale est invalide.',
+				successMessage: 'Le numéro de sécurité sociale est valide.',
+				fieldIdentifier: 'numéro',
+			},
+		},
+		...(props.required
+			? [{
+				type: 'required',
+				options: { message: 'Le numéro de sécurité sociale est requis.', fieldIdentifier: 'numéro' },
+			}]
+			: []),
+	]
+
+	const defaultKeyRules = [
+		{
+			type: 'exactLength',
+			options: { length: 2, message: locales.errorLengthKey(2), ignoreSpace: true, fieldIdentifier: 'clé' },
+		},
+		{
+			type: 'custom',
+			options: {
+				validate: () => isNIRKeyValid(`${numberValue.value}${keyValue.value}`),
+				message: 'La clé du numéro de sécurité sociale est invalide.',
+				successMessage: 'Le champ clé est valide.',
+				fieldIdentifier: 'clé',
+			},
+		},
+		...(props.required
+			? [{
+				type: 'required',
+				options: { message: 'La clé est requise.', fieldIdentifier: 'clé' },
+			}]
+			: []),
+	]
+
+	// Computed pour statut des champs
+	const fieldIdentifierNumber = defaultNumberRules[0]?.options?.fieldIdentifier
+	const fieldIdentifierKey = defaultKeyRules[0]?.options?.fieldIdentifier
+
+	const hasNumberErrors = computed(() => errors.value.some(error => error.includes(fieldIdentifierNumber)))
+	const hasKeyErrors = computed(() => errors.value.some(error => error.includes(fieldIdentifierKey)))
+	const hasNumberSuccess = computed(() => successes.value.some(success => success.includes(fieldIdentifierNumber)))
+	const hasKeySuccess = computed(() => successes.value.some(success => success.includes(fieldIdentifierKey)))
+
+	// Génération des règles finales
+	const numberRules = props.customNumberRules?.length
+		? generateRules(props.customNumberRules)
+		: generateRules(defaultNumberRules)
+
+	const keyRules = props.displayKey
+		? (props.customKeyRules?.length
+			? generateRules(props.customKeyRules)
+			: generateRules(defaultKeyRules))
+		: []
+
+	/**
+	 * Valide une liste de règles sur une valeur et met à jour les tableaux d'erreurs et de succès.
+	 * @param value Valeur du champ à valider
+	 * @param rules Ensemble de règles
+	 */
+	function validateFieldSet(value: string, rules: Rule[]) {
+		rules.forEach((rule) => {
+			const { error, success } = rule(value)
+			if (error) errors.value.push(error)
+			if (success && success !== 'Le champ est valide.') successes.value.push(success)
+		})
+	}
+
+	/**
+	 * Valide les champs numéro et clé (si activée).
+	 * @param onBlur Si true, la validation est lancée suite à un blur, sinon validation continue
+	 */
+	function validateFields(onBlur = false) {
+		errors.value = []
+		successes.value = []
+
+		const shouldValidateNumber = onBlur || isValidating.value || numberValue.value.length === 18
+		const shouldValidateKey = props.displayKey && (onBlur || isValidating.value || keyValue.value.length === 2)
+
+		if (shouldValidateNumber) {
+			validateFieldSet(numberValue.value, numberRules)
+		}
+
+		if (shouldValidateKey) {
+			validateFieldSet(keyValue.value, keyRules)
+		}
+
+		// Unicité des succès
+		successes.value = Array.from(new Set(successes.value))
+	}
+
+	// Compteurs
+	const numberCounter = computed(() => {
+		const length = numberValue.value.replace(/\s/g, '').length
+		return `${Math.min(length, 13)}/13`
+	})
+
+	const keyCounter = computed(() => {
+		const length = keyValue.value.replace(/\s/g, '').length
+		return `${Math.min(length, 2)}/2`
+	})
+
+	watch([unmaskedNumberValue, keyValue], () => {
+		validateFields()
+		if (unmaskedNumberValue.value + keyValue.value !== props.modelValue) {
+			emit('update:modelValue', `${unmaskedNumberValue.value}${keyValue.value}`)
+		}
+	})
+
+	watch(keyValue, (newValue, oldValue) => {
+		keyDeleted.value = !!(!newValue && oldValue)
+	})
+
+	watch(numberValue, () => {
+		if (unmaskedNumberValue.value.length < 13) {
+			keyDeleted.value = false
+		}
+	})
+
+	// Déplacement du focus sur la clé quand le numéro est rempli
+	const focusElement = computed(() => {
+		if (props.displayKey && numberValue.value.length === 18) {
+			if (!keyDeleted.value) {
+				return keyField.value?.$el?.querySelector('input')
+			}
+			else {
+				return numberField.value?.$el?.querySelector('input')
+			}
+		}
+		return null
+	})
+
+	watch(focusElement, (newEl) => {
+		nextTick(() => {
+			newEl?.focus()
+		})
+	})
+
+	function validateOnSubmit() {
+		isValidating.value = true
+		validateFields()
+		return errors.value.length === 0
+	}
+
+	defineExpose({
+		validateOnSubmit,
+	})
+</script>
+
+<template>
+	<div class="d-flex align-start">
+		<v-input
+			ref="vInput"
+			:class="{
+				'v-messages__message--success': successes.length > 0 && props.showSuccessMessages,
+				'v-messages__message--error': errors.length > 0
+			}"
+			:error-messages="errors"
+			:label="numberLabel"
+			:max-errors="3"
+			:messages="props.showSuccessMessages ? successes : []"
+			:model-value="[numberValue, keyValue]"
+			class="vd-nir-field__fields-wrapper multi-line"
+			validate-on="blur lazy"
+		>
+			<VTooltip v-if="nirTooltip">
+				<template #activator="{ props: iconProps }">
+					<VIcon
+						class="vd-tooltip-icon mt-4 mr-4"
+						v-bind="{ ...iconProps, ...options.tooltip }"
+					>
+						{{ infoIcon }}
+					</VIcon>
+				</template>
+				<slot name="nirTooltip">
+					{{ nirTooltip }}
+				</slot>
+			</VTooltip>
+			<SyTextField
+				ref="numberField"
+				v-model="numberValue"
+				v-maska="numberMask"
+				:append-inner-icon="hasNumberErrors ? 'error' : (hasNumberSuccess ? 'success' : undefined)"
+				:aria-errormessage="hasNumberErrors ? 'number-field-errors' : undefined"
+				:aria-invalid="hasNumberErrors"
+				:aria-required="required"
+				:color="hasNumberErrors ? 'error' : 'primary'"
+				:error="hasNumberErrors"
+				:hint="locales.numberHint"
+				:label="numberLabel"
+				:variant="outlined ? 'outlined' : 'underlined'"
+				class="vd-number-field"
+				title="nirField"
+				@blur="validateFields(true)"
+			>
+				<template #details>
+					<span class="custom-counter">
+						{{ numberCounter }}
+					</span>
+				</template>
+			</SyTextField>
+
+			<template v-if="displayKey">
+				<SyTextField
+					ref="keyField"
+					v-model="keyValue"
+					v-maska="keyMask"
+					:append-inner-icon="hasKeyErrors ? 'error' : (hasKeySuccess ? 'success' : undefined)"
+					:aria-errormessage="hasKeyErrors ? 'key-field-errors' : undefined"
+					:aria-invalid="hasKeyErrors"
+					:aria-required="required"
+					:color="hasKeyErrors ? 'error' : 'primary'"
+					:error="hasKeyErrors"
+					:hint="locales.keyHint"
+					:label="keyLabel"
+					:variant="outlined ? 'outlined' : 'underlined'"
+					class="vd-key-field"
+					title="nirKeyField"
+					@blur="validateFields(true)"
+				>
+					<template #details>
+						<span class="custom-counter">
+							{{ keyCounter }}
+						</span>
+					</template>
+				</SyTextField>
+
+				<VTooltip v-if="keyTooltip">
+					<template #activator="{ props: iconProps }">
+						<VIcon
+							class="vd-tooltip-icon mt-4 ml-4"
+							v-bind="{ ...iconProps, ...options.icon }"
+						>
+							{{ infoIcon }}
+						</VIcon>
+					</template>
+					<slot name="keyTooltip">
+						{{ keyTooltip }}
+					</slot>
+				</VTooltip>
+			</template>
+		</v-input>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+.v-messages__message--success {
+  color: tokens.$colors-border-success !important;
+
+  .v-field--active & {
+    color: tokens.$colors-border-success !important;
+  }
+}
+
+.v-messages__message--error {
+  color: tokens.$colors-border-error;
+
+  .v-field--active & {
+    color: tokens.$colors-border-error;
+  }
+}
+
+:deep(.v-field.v-field--active .v-label.v-field-label--floating) {
+  opacity: 1;
+}
+
+.multi-line {
+  white-space: pre-line !important;
+}
+
+.vd-number-field {
+  max-width: 296px;
+}
+
+.vd-key-field {
+  width: 104px;
+}
+
+.custom-counter {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.vd-nir-field :deep(.v-input__append-inner),
+.vd-tooltip-icon {
+  flex: none;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+:deep(.v-overlay__content) {
+  background: rgba(84, 88, 89, 0.95) !important;
+}
+
+.vd-key-field {
+  flex: none;
+}
+
+.vd-nir-field--outlined :deep(.v-messages.error--text) {
+  padding: 6px;
+}
+
+.vd-nir-field {
+  container-name: nirFieldwrapper;
+}
+
+:deep(.v-input__append) {
+  margin-inline-start: 0 !important;
+}
+:deep(.vd-number-field > .v-input__prepend) {
+  margin-right: 0 !important;
+}
+
+:deep(.vd-key-field > .v-input__prepend) {
+  @media screen and (max-width: 360px) {
+    margin-inline-end: 0 !important;
+  }
+}
+
+:deep(.v-text-field .v-input__details) {
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
+  flex: none !important;
+}
+
+:deep(.v-text-field .v-input__details .v-messages) {
+  color: rgba(0, 0, 0, 1) !important;
+}
+
+@mixin responsive-nir-wrapper {
+  .vd-nir-field__fields-wrapper :deep(> .v-input__control) {
+    justify-content: start;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 4px;
+
+    .vd-number-field {
+      flex: 100% 0 0;
+    }
+  }
+}
+
+@container nirFieldwrapper (max-width: 300px) {
+  @include responsive-nir-wrapper;
+}
+
+@media screen and (max-width: 360px) {
+  @include responsive-nir-wrapper;
+}
+
+.v-text-field .v-input__append-inner {
+  padding-left: 0 !important;
+}
+
+:deep(.v-text-field > .v-input__control > .v-input__slot > .v-text-field__slot) {
+  width: min-content !important;
+}
+</style>

package/src/components/NirField/config.ts

@@ -0,0 +1,16 @@
+const defaultOptions = {
+	persistentHint: {
+		persistentHint: true,
+	},
+	validateOn: {
+		validateOn: 'blur',
+	},
+	icon: {
+		color: '',
+	},
+	tooltip: {
+		location: 'top',
+	},
+}
+
+export default defaultOptions

package/src/components/NirField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/NirField/locales.ts

@@ -0,0 +1,12 @@
+export const locales = {
+	errorRequiredNumber: 'Le numéro de sécurité sociale est requis.',
+	errorLengthNumber: (length: number) => `Le numéro de sécurité sociale doit contenir ${length} caractères.`,
+	errorInvalidFormat: 'Le format du numéro de sécurité sociale est invalide.',
+	errorRequiredKey: 'La clé du numéro de sécurité sociale est requise.',
+	errorLengthKey: (length: number) => `La clé du numéro de sécurité sociale doit contenir ${length} caractères.`,
+	errorInvalidKey: 'La clé du numéro de sécurité sociale est invalide.',
+	numberLabel: 'Numéro de sécurité sociale',
+	numberHint: '13 caractères',
+	keyLabel: 'Clé',
+	keyHint: '2 chiffres',
+} as const

package/src/components/NirField/nirValidation.ts

@@ -0,0 +1,42 @@
+export const NUMBER_LENGTH = 13
+export const KEY_LENGTH = 2
+
+export function checkNIR(nir: string): boolean {
+	nir = nir.replace(/\s+/g, '').toUpperCase()
+
+	const nirRegex = new RegExp(
+		'^'
+		+ '(?<sexe>[1-4]|7|8)'
+		+ '(?<anneeNaissance>\\d{2})'
+		+ '(?<moisNaissance>0[1-9]|1[0-2]|2[0-9]|3[0-9]|4[0-2])'
+		+ '(?<departementNaissance>\\d{2}|2A|2B|96|97\\d|98\\d)'
+		+ '(?<communeNaissance>\\d{3})'
+		+ '(?<rangInscription>\\d{3})'
+		+ '(?<cle>[0-9]{2})?'
+		+ '$',
+		'i',
+	)
+	return nirRegex.test(nir)
+}
+
+export function computeNIRKey(nir: string): string {
+	nir = nir.replace(/\s+/g, '').toUpperCase()
+
+	let nirNumberPart = nir.substring(0, 13)
+
+	nirNumberPart = nirNumberPart.replace('2A', '19').replace('2B', '18')
+
+	const nirNumber = BigInt(nirNumberPart)
+
+	const key = 97n - (nirNumber % 97n)
+
+	return key.toString().padStart(2, '0')
+}
+
+export function isNIRKeyValid(nir: string): boolean {
+	nir = nir.replace(/\s+/g, '').toUpperCase()
+
+	const providedKey = nir.substring(13, 15)
+	const computedKey = computeNIRKey(nir)
+	return providedKey === computedKey
+}

package/src/components/NirField/tests/NirField.spec.ts

@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import NirField from '../NirField.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+
+const vuetify = createVuetify()
+
+describe('NirField.vue', () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	let wrapper: any
+
+	beforeEach(() => {
+		wrapper = mount(NirField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				required: true,
+				showSuccessMessages: true,
+			},
+		})
+	})
+
+	it('renders correctly', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.vd-number-field').exists()).toBe(true)
+		expect(wrapper.find('.vd-key-field').exists()).toBe(true)
+	})
+
+	it('displays error message for invalid NIR length', async () => {
+		const numberField = wrapper.find('.vd-number-field input')
+		await numberField.setValue('123') // Invalid length
+		await numberField.trigger('blur')
+		expect(wrapper.find('.v-messages__message').text()).toContain('Le numéro de sécurité sociale doit contenir 13 caractères.')
+	})
+
+	it('validates the NIR field successfully', async () => {
+		const numberField = wrapper.find('.vd-number-field input')
+		await numberField.setValue('2940375120005') // Valid NIR length
+		expect(wrapper.find('.v-messages__message--success').exists()).toBe(true)
+	})
+
+	it('displays error message for invalid key length', async () => {
+		const numberField = wrapper.find('.vd-number-field input')
+		await numberField.setValue('2940375120005') // Valid NIR length
+		const keyField = wrapper.find('.vd-key-field input')
+		await keyField.setValue('1') // Invalid length
+		await keyField.trigger('blur')
+		expect(wrapper.find('.v-messages__message').text()).toContain('La clé du numéro de sécurité sociale doit contenir 2 caractères.')
+	})
+
+	it('validates the key field successfully', async () => {
+		const numberField = wrapper.find('.vd-number-field input')
+		const keyField = wrapper.find('.vd-key-field input')
+		await numberField.setValue('2940375120005')
+		await keyField.setValue('91')
+		expect(wrapper.find('.v-messages__message--success').exists()).toBe(true)
+	})
+
+	it('hides the key field when displayKey is false', async () => {
+		await wrapper.setProps({ displayKey: false })
+		expect(wrapper.find('.vd-key-field').exists()).toBe(false)
+	})
+
+	it('calls validateOnSubmit and returns true if no errors', async () => {
+		const numberField = wrapper.find('.vd-number-field input')
+		const keyField = wrapper.find('.vd-key-field input')
+
+		await numberField.setValue('2940375120005')
+		await keyField.setValue('91')
+
+		await wrapper.vm.$nextTick()
+
+		wrapper.vm.validateFields()
+
+		const isValid = wrapper.vm.validateOnSubmit()
+
+		expect(isValid).toBe(true)
+		expect(wrapper.vm.errors.length).toBe(0)
+	})
+	it('applies custom key rules when provided', async () => {
+		const customKeyRules = [
+			{
+				type: 'custom',
+				options: {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+					validate: (value: any) => value === '91',
+					message: 'Custom key validation failed.',
+					successMessage: 'Custom key validation passed.',
+				},
+			},
+		]
+
+		wrapper = mount(NirField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				required: true,
+				customKeyRules,
+			},
+		})
+		const numberField = wrapper.find('.vd-number-field input')
+		const keyField = wrapper.find('.vd-key-field input')
+		await numberField.setValue('2940375120005')
+		await keyField.setValue('91')
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.vm.errors.length).toBe(0)
+		expect(wrapper.vm.successes).toContain('Custom key validation passed.')
+
+		await keyField.setValue('11')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.vm.errors).toContain('Custom key validation failed.')
+	})
+})

package/src/components/NotFoundPage/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />