@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/NirField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/NirField/Usages.stories.ts

@@ -0,0 +1,42 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/NirField/Usages',
+}
+
+const itemsToDo = [
+	'Indiquer à l\'utilisateur le nombre de chiffres.',
+	'Donner la possibilité de saisir uniquement des chiffres.',
+	'Permettre à l\'utilisateur d\'effacer sa saisie en cliquant sur un bouton.',
+	'Ajouter un tooltip selon la cible, permettant d\'indiquer où trouver son numéro de sécurité sociale.',
+	'Message d\'erreur uniquement pour le NIR et la clé pour des raisons de sécurité.',
+]
+
+const itemsNotToDo = [
+
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

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/NotificationBar/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

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

@@ -0,0 +1,41 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Feedback/NotificationBar/Usages',
+}
+
+const itemsToDo = [
+	'La nature du message (erreur, succès, information) doit être clairement exprimée dans le titre de l\'alerte. La couleur ou l\'icône n\'étant pas accessibles ou compréhensibles par tous les utilisateurs.',
+	'La barre de notification doit rester affichée jusqu\'à ce que l\'utilisateur souhaite la fermer.',
+	'La barre de notifications doit avoir une largeur adaptée à son contenu (avec une largeur max de ??px).',
+]
+
+const itemsNotToDo = [
+	'Pas plus de 3 lignes.',
+	'Il est techniquement possible de faire disparaitre la barre de notification après un délai mais cette pratique n\'est déconseillé pour des raisons d\'accessibilité afin de permettre à tout le monde de prendre le temps nécéssaire de lire la notification.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/PaginatedTable/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 />