@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

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

@@ -2,12 +2,20 @@ import { mount } from '@vue/test-utils'
 import NirField from '../NirField.vue'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { useValidation } from '@/composables/validation/useValidation'
 
-const vuetify = createVuetify()
+const vuetify = createVuetify({
+	components,
+	directives,
+})
 
 describe('NirField.vue', () => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	let wrapper: any
+	let wrapper: ReturnType<typeof mount<typeof NirField & {
+		numberValidation: ReturnType<typeof useValidation>
+		keyValidation: ReturnType<typeof useValidation>
+	}>>
 
 	beforeEach(() => {
 		wrapper = mount(NirField, {
@@ -15,106 +23,134 @@ describe('NirField.vue', () => {
 				plugins: [vuetify],
 			},
 			props: {
-				modelValue: '',
+				modelValue: undefined,
 				required: true,
 				showSuccessMessages: true,
+				outlined: 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)
+		expect(wrapper.find('.number-field').exists()).toBe(true)
+		expect(wrapper.find('.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.')
+		await wrapper.find('.number-field input').setValue('123')
+		await wrapper.find('.number-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.numberValidation.errors.value[0]).toBe('Le numéro de sécurité sociale est invalide.')
 	})
 
 	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)
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.number-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.numberValidation.successes.value).toContain('Le numéro de sécurité sociale est valide.')
 	})
 
 	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.')
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.key-field input').setValue('1')
+		await wrapper.find('.key-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.errors.value[0]).toBe('La clé du numéro de sécurité sociale est invalide.')
 	})
 
 	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)
+		await wrapper.find('.number-field input').setValue('2940375120005')
+		await wrapper.find('.key-field input').setValue('91')
+		await wrapper.find('.key-field input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.successes.value).toContain('Le champ Clé est valide.')
 	})
 
 	it('hides the key field when displayKey is false', async () => {
 		await wrapper.setProps({ displayKey: false })
-		expect(wrapper.find('.vd-key-field').exists()).toBe(false)
+		expect(wrapper.find('.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')
+		wrapper = mount(NirField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: undefined,
+				required: false,
+				outlined: true,
+			},
+		})
 
+		const numberField = wrapper.find('.number-field input')
 		await numberField.setValue('2940375120005')
-		await keyField.setValue('91')
+		await numberField.trigger('blur')
 
 		await wrapper.vm.$nextTick()
-
-		wrapper.vm.validateFields()
-
-		const isValid = wrapper.vm.validateOnSubmit()
+		const isValid = await 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.',
-				},
+		const customKeyRules = [{
+			type: 'custom',
+			options: {
+				validate: (value: string) => value === '91',
+				message: 'Custom key validation failed.',
+				successMessage: 'Custom key validation passed.',
+				fieldIdentifier: 'clé',
 			},
-		]
+		}]
 
 		wrapper = mount(NirField, {
 			global: {
 				plugins: [vuetify],
 			},
 			props: {
-				modelValue: '',
-				required: true,
+				modelValue: undefined,
 				customKeyRules,
+				showSuccessMessages: true,
+				outlined: true,
 			},
 		})
-		const numberField = wrapper.find('.vd-number-field input')
-		const keyField = wrapper.find('.vd-key-field input')
+
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
 		await numberField.setValue('2940375120005')
 		await keyField.setValue('91')
-
+		await keyField.trigger('blur')
 		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.keyValidation.successes.value).toContain('Custom key validation passed.')
+	})
 
-		expect(wrapper.vm.errors.length).toBe(0)
-		expect(wrapper.vm.successes).toContain('Custom key validation passed.')
+	it('emits update:modelValue with correct format', async () => {
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
+		await numberField.setValue('2940375120005')
+		await wrapper.vm.$nextTick()
+		await keyField.setValue('91')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')?.slice(-1)[0]).toEqual(['294037512000591'])
+	})
 
-		await keyField.setValue('11')
+	it('emits undefined when both fields are empty', async () => {
+		const numberField = wrapper.find('.number-field input')
+		const keyField = wrapper.find('.key-field input')
+		await numberField.setValue('')
+		await keyField.setValue('')
 		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([undefined])
+	})
 
-		expect(wrapper.vm.errors).toContain('Custom key validation failed.')
+	it('splits modelValue correctly when provided', async () => {
+		await wrapper.setProps({ modelValue: '294037512000591' })
+		await wrapper.vm.$nextTick()
+		const numberInput = wrapper.find('.number-field input').element as HTMLInputElement
+		const keyInput = wrapper.find('.key-field input').element as HTMLInputElement
+		expect(numberInput.value.replace(/\s/g, '')).toBe('2940375120005')
+		expect(keyInput.value).toBe('91')
 	})
 })

package/src/components/NirField/tests//342/200/257dataset/342/200/257.md

@@ -0,0 +1,12 @@
+| #  | Input             | Expected Result | Description                                                                                   |
+|----|-------------------|-----------------|-----------------------------------------------------------------------------------------------|
+| 1  | 1840275123456 74   | valid           | NIR complet avec clé correcte (ex. homme né en 1984, département 75...).                     |
+| 2  | 2910256012345 46   | valid           | NIR complet avec clé correcte (ex. femme née en 1991, département 25...).                    |
+| 3  | 198012312345690   | valid           | NIR complet (ex. homme né en 1980, département 12...), clé calculée et valide.               |
+| 4  | 2551299123457 80   | valid           | NIR complet (ex. femme née en 1951, département 29...).                                      |
+| 5  | 2100121101003 73   | valid           | NIR complet (ex. femme née en 2000, département 21...).                                      |
+| 6  | 3840275123456 74   | invalid         | Le premier chiffre (3) n'est pas valide (doit être 1 ou 2).                                  |
+| 7  | 1841375123456 74   | invalid         | Le mois 13 est invalide (doit être compris entre 01 et 12).                                  |
+| 8  | 1840275123456 73   | invalid         | Clé de contrôle incorrecte (73 au lieu de 74).                                               |
+| 9  | 1840A75123456 74   | invalid         | Contient une lettre 'A' dans la chaîne, format strictement numérique attendu.                |
+| 10 | 1840275123456     | invalid         | Chaîne trop courte (13 chiffres sans clé). Le NIR doit comporter 15 chiffres.                |

package/src/components/NotificationBar/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/NotificationBar.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/3967" target="_blank" style="color:#0C41BD;">issue #3967</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -115,7 +115,7 @@ Default.args = {
 	closeBtnText: 'Fermer',
 	type: 'info',
 	bottom: false,
-	rounded: 'rounded',
+	rounded: '4',
 }
 
 Default.parameters = {
@@ -128,7 +128,6 @@ Default.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
 					:type="type"
 				>
 					<template #default>This is a {{ type }} notification</template>
@@ -150,7 +149,7 @@ Default.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -174,6 +173,7 @@ Default.parameters = {
 export const Success: Story = Default.bind({})
 Success.args = {
 	...Default.args,
+	rounded: 'pill',
 	type: 'success',
 }
 Success.parameters = {
@@ -186,7 +186,7 @@ Success.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
+					:rounded="pill"
 					type="success"
 				>
 					<template #default>This is a success notification</template>
@@ -208,7 +208,7 @@ Success.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -232,6 +232,7 @@ Success.parameters = {
 export const Warning: Story = Default.bind({})
 Warning.args = {
 	...Default.args,
+	rounded: 'pill',
 	type: 'warning',
 }
 Warning.parameters = {
@@ -244,7 +245,7 @@ Warning.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
+					:rounded="pill"
 					type="warning"
 				>
 					<template #default>This is a warning notification</template>
@@ -266,7 +267,7 @@ Warning.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -290,6 +291,7 @@ Warning.parameters = {
 export const Error: Story = Default.bind({})
 Error.args = {
 	...Default.args,
+	rounded: 'pill',
 	type: 'error',
 }
 Error.parameters = {
@@ -302,7 +304,7 @@ Error.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="rounded"
+					:rounded="pill"
 					type="error"
 				>
 					<template #default>This is an error notification</template>
@@ -324,7 +326,7 @@ Error.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -348,6 +350,7 @@ Error.parameters = {
 export const Bottom: Story = Default.bind({})
 Bottom.args = {
 	...Default.args,
+	rounded: 'pill',
 	bottom: true,
 }
 Bottom.parameters = {
@@ -360,7 +363,7 @@ Bottom.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="true"
-					:rounded="rounded"
+					:rounded="pill"
 					:type="type"
 				>
 					<template #default>This is a bottom-positioned notification</template>
@@ -382,7 +385,7 @@ Bottom.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
@@ -406,6 +409,7 @@ Bottom.parameters = {
 export const CustomCloseBtnText: Story = Default.bind({})
 CustomCloseBtnText.args = {
 	...Default.args,
+	rounded: 'pill',
 	closeBtnText: 'Masquer',
 }
 CustomCloseBtnText.parameters = {
@@ -418,7 +422,7 @@ CustomCloseBtnText.parameters = {
 					v-model="showNotification"
 					close-btn-text="Masquer"
 					:bottom="bottom"
-					:rounded="rounded"
+					:rounded="pill"
 					:type="type"
 				>
 					<template #default>This is a notification with custom close button text</template>
@@ -440,10 +444,11 @@ CustomCloseBtnText.parameters = {
 				import { VBtn } from 'vuetify/components'
 				import { NotificationBar } from '@cnamts/synapse'
 				import { ref } from 'vue'
-				import { useNotificationService } from '@/services/NotificationService'
+				import { useNotificationService } from '@cnamts/synpase'
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
+				const rounded = 'pill'
 
 				const envoyerNotification = (message: string) => {
 					const notification = {

package/src/components/PasswordField/PasswordField.mdx

@@ -1,70 +1,152 @@
-import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
-import * as PasswordFieldStories from './PasswordField.stories';
-import PasswordField from './PasswordField.vue';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
+import * as PasswordFieldStories from './PasswordField.stories'
 
-<Meta title="Composants/Formulaires/PasswordField" component={PasswordField}/>
+<Meta of={PasswordFieldStories} />
 
 # PasswordField
 
-Le composant `PasswordField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
-Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.
 
-<Canvas story={{height: '150px'}} of={PasswordFieldStories.Default}/>
+## Utilisation basique
 
-# API
+La version de base du composant avec le style outlined par défaut.
 
-<Controls of={PasswordFieldStories.Default}/>
+<Canvas of={PasswordFieldStories.Default} />
 
-## Utilisation de base
+## Fonctionnalités principales
+
+- **Masquage/affichage du mot de passe** : Une icône permet de basculer entre l'affichage en clair et masqué
+- **Validation personnalisable** : Support des messages d'erreur, d'avertissement et de succès
+- **Styles configurables** : Choix entre les styles `outlined` et `underlined`
+- **États spéciaux** : Support des états désactivé et lecture seule
+- **Validation automatique** : Validation à la perte de focus configurable
+
+## API
+
+<Controls of={PasswordFieldStories.Default} />
+
+<Source
+    dark code={`
+<template>
+	<PasswordField
+		v-model="password"
+		label="Mot de passe"
+	/>
+</template>
 
-    <Source
-        dark
-        code={`
 <script setup lang="ts">
-    import { ref } from 'vue'
-    import { PasswordField } from '@cnamts/synapse'
-
-    const password = ref('')
-    const passwordFieldRef = ref() // Référence Vue pour accéder au composant enfant
-
-    function handleSubmit() {
-    // Appeler la méthode exposée validateOnSubmit via la référence
-    const isValid = passwordFieldRef.value?.validateOnSubmit()
-    if (!isValid) {
-    alert('Veuillez corriger les erreurs avant de soumettre.')
-} else {
-    alert('Formulaire soumis avec succès !')
-}
-}
-</script>
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
 
-    <template>
-      <form @submit.prevent="handleSubmit">
-        <PasswordField
-          ref="passwordFieldRef"
-          v-model="password"
-          outlined
-          :is-validate-on-blur="true"
-        />
-        <button type="submit">Soumettre</button>
-      </form>
-    </template>
+const password = ref('')
+</script>
 `}
 />
 
-## Gestion de la validation
+## Validation
+
+### Validation simple
+
+Le composant peut être requis et afficher un message d'erreur si le champ est vide.
+
+<Canvas of={PasswordFieldStories.Required} />
+
+### Validation avancée
+
+Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).
+
+<Canvas of={PasswordFieldStories.WithValidation} />
+
+### Exemples d'états de validation
+
+<div className="sb-grid">
+  <div>
+    <h4>Avec erreur</h4>
+    <Canvas of={PasswordFieldStories.WithError} />
+  </div>
+  <div>
+    <h4>Avec avertissement</h4>
+    <Canvas of={PasswordFieldStories.WithWarning} />
+  </div>
+  <div>
+    <h4>Avec succès</h4>
+    <Canvas of={PasswordFieldStories.WithSuccess} />
+  </div>
+</div>
+
+### Validation de formulaire
+
+Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.
+
+<Canvas of={PasswordFieldStories.WithFormValidation} />
+
+<Source
+    dark code={`
+<template>
+	<form @submit.prevent="handleSubmit">
+		<PasswordField
+			ref="passwordFieldRef"
+			v-model="password"
+			required
+			:custom-rules="customRules"
+		/>
+		<button type="submit">Valider</button>
+	</form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
+
+const password = ref('')
+const passwordFieldRef = ref()
+
+const customRules = [{
+	type: 'custom',
+	options: {
+		message: 'Le mot de passe doit contenir au moins 8 caractères',
+		validate: (value: string) => value.length >= 8
+	}
+}]
+
+function handleSubmit() {
+	const isValid = passwordFieldRef.value?.validateOnSubmit()
+	if (!isValid) {
+		// Gérer l'erreur
+		return
+	}
+	// Continuer avec la soumission
+}
+</script>
+`}
+/>
 
-### Validation par défaut
+### Méthodes exposées
 
-- **required** : Si `true`, le champ est obligatoire et affiche une erreur si le champ est vide.
-- **isValidateOnBlur** : Si `true`, la validation se déclenche automatiquement lors du blur (perte de focus).
+Le composant expose les méthodes et propriétés suivantes via `defineExpose` :
 
-### Règles de validation personnalisées (props `customRules`)
+- **showEyeIcon** : (ref) Contrôle l'affichage du mot de passe
+- **errors** : (ref) Liste des erreurs de validation actuelles
+- **warnings** : (ref) Liste des avertissements actuels
+- **successes** : (ref) Liste des messages de succès actuels
+- **validateOnSubmit** : () => boolean - Méthode pour valider le champ, retourne true si valide
 
-Vous pouvez définir des règles de validation personnalisées sous forme de tableau d’objets.
+## Bonnes pratiques
 
-Pour savoir comment utiliser les règles personnalisées, veuillez consulter la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+1. **Validation progressive** :
+   - Utilisez `isValidateOnBlur` pour une validation en temps réel
+   - Combinez erreurs, avertissements et succès pour guider l'utilisateur
 
+2. **Messages clairs** :
+   - Utilisez des messages d'erreur explicites
+   - Fournissez des suggestions d'amélioration via les warnings
+   - Confirmez les bonnes pratiques avec les messages de succès
 
+3. **Accessibilité** :
+   - Toujours fournir un label explicite
+   - Utiliser la prop `required` quand nécessaire
+   - Considérer l'utilisation de `displayAsterisk` pour les champs requis
 
+## En savoir plus
 
+Pour plus d'informations sur l'utilisation des règles de validation, consultez la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).