@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/DatePicker/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/DatePicker/Usages.stories.ts

@@ -0,0 +1,43 @@
+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/DatePicker/Usages',
+}
+
+const itemsToDo = [
+	'La date de fin ne peux pas être avant la date début.',
+	'Indiquer à l\'utilisateur le format attendu (JJ/MM/AAAA).',
+	'Indiquer la date du jour à l\'utilisateur.',
+	'Faciliter le changement de mois et d\'années avec des listes.',
+]
+
+const itemsNotToDo = [
+	'Laissez uniquement les flèches pour naviguer entre les mois et les années.',
+	'Ne pas indiquer la date du jour.',
+	'Ne pas différencier la date du jour de la date selectionnée.',
+]
+
+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/DatePicker/constants/ExpertiseLevelEnum.ts

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

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

@@ -30,7 +30,7 @@ describe('DatePicker.vue', () => {
 		expect(wrapper.find('input').attributes('placeholder')).toBe(undefined)
 	})
 
-	it('emits update:model-value event on date selection', async () => {
+	it('emits update:modelValue event on date selection', async () => {
 		const wrapper = mount(DatePicker, {
 			global: {
 				plugins: [vuetify],
@@ -38,7 +38,7 @@ describe('DatePicker.vue', () => {
 		})
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2023')
-		expect(wrapper.emitted('update:model-value')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 	})
 
 	it('renders the component', () => {
@@ -53,8 +53,8 @@ describe('DatePicker.vue', () => {
 	it('emits the correct formatted date on date selection', async () => {
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2023')
-		expect(wrapper.emitted('update:model-value')).toBeTruthy()
-		expect(wrapper.emitted('update:model-value')[0]).toEqual(['01/01/2023'])
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
 	})
 
 	it('toggles the date picker visibility on focus', async () => {
@@ -101,7 +101,7 @@ describe('DatePicker.vue', () => {
 		const input = wrapper.find('input')
 		await input.setValue('invalid date')
 		expect(wrapper.vm.selectedDates).toBeNull()
-		expect(wrapper.emitted('update:model-value')).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 	})
 
 	it('hides the date picker when at least two dates are selected in range mode', async () => {

package/src/components/DatePicker/tests/DateTextInput.spec.ts

@@ -0,0 +1,282 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import DateTextInput from '../DateTextInput.vue'
+import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
+
+describe('DateTextInput.vue', () => {
+	let wrapper
+
+	beforeEach(() => {
+		wrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+	})
+
+	it('renders the component', () => {
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('validates required field', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toContain('La date est requise')
+	})
+
+	it('validates date format', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('32/13/2025')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+	})
+
+	it('accepts valid date format', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toHaveLength(0)
+		expect(wrapper.emitted('update:model-value')?.[0]).toEqual(['01/01/2025'])
+	})
+
+	it('formats date according to dateFormatReturn', async () => {
+		const wrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YYYY',
+				dateFormatReturn: 'YYYY-MM-DD',
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:model-value')?.[0]).toEqual(['2025-01-01'])
+	})
+
+	it('validates custom rules', async () => {
+		const wrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YYYY',
+				customRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: string) => !value.includes('2024'),
+						message: 'Les dates en 2024 ne sont pas autorisées',
+						fieldIdentifier: 'date',
+					},
+				}],
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2024')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toContain('Les dates en 2024 ne sont pas autorisées')
+	})
+
+	it('validates warning rules', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '01/01/2025',
+				customWarningRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: string) => !/^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/2025$/.test(value),
+						message: 'Les dates en 2025 ne sont pas recommandées',
+						fieldIdentifier: 'date',
+						isWarning: true,
+					},
+				}],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('warningMessages')).toContain('Les dates en 2025 ne sont pas recommandées')
+	})
+
+	it('handles invalid dates correctly', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('31/02/2025') // Invalid date (February 31st)
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+	})
+
+	it('formats input while typing', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01012025')
+		await wrapper.vm.$nextTick()
+		expect(input.element.value).toBe('01/01/2025')
+	})
+
+	it('validates modelValue with different dateFormatReturn format', async () => {
+		const wrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '2025-1-1',
+				format: 'DD/MM/YYYY',
+				dateFormatReturn: 'YYYY-M-D',
+				required: true,
+			},
+		})
+
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toHaveLength(0)
+		await wrapper.setProps({ modelValue: null })
+		await wrapper.vm.$nextTick()
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(textField.props('errorMessages')).toContain('Format de date invalide')
+	})
+
+	it('formats date during input', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01012025')
+		await wrapper.vm.$nextTick()
+		expect(input.element.value).toBe('01/01/2025')
+	})
+
+	it('handles date deletion', async () => {
+		// D'abord on met une date valide
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		// Puis on la supprime
+		await input.setValue('')
+		await input.trigger('input') // Déclencher l'événement input
+		await input.trigger('blur') // Et le blur pour la validation
+		await wrapper.vm.$nextTick()
+
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted?.[emitted.length - 1]).toEqual([null])
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toContain('La date est requise')
+	})
+
+	it('supports different date formats', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'YYYY-MM-DD',
+				required: true,
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('2025-01-01')
+		await input.trigger('input')
+		await input.trigger('blur')
+		await customWrapper.vm.$nextTick()
+
+		const emitted = customWrapper.emitted('update:model-value')
+		expect(emitted?.[emitted.length - 1]).toEqual(['2025-01-01'])
+	})
+
+	it('handles disabled state', async () => {
+		await wrapper.setProps({ isDisabled: true })
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('isDisabled')).toBe(true)
+	})
+
+	it('handles readonly state', async () => {
+		await wrapper.setProps({ isReadOnly: true })
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('isReadOnly')).toBe(true)
+	})
+
+	it('emits focus and blur events', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('focus')
+		expect(wrapper.emitted('focus')).toBeTruthy()
+		await input.trigger('blur')
+		expect(wrapper.emitted('blur')).toBeTruthy()
+	})
+
+	it('handles custom date format return', async () => {
+		const customWrapper = mount(DateTextInput, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				format: 'DD/MM/YYYY',
+				dateFormatReturn: 'YYYY-MM-DD',
+				required: true,
+			},
+		})
+
+		const input = customWrapper.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await customWrapper.vm.$nextTick()
+		expect(customWrapper.emitted('update:model-value')?.[0]).toEqual(['2025-01-01'])
+	})
+
+	it('preserves cursor position during formatting', async () => {
+		const input = wrapper.find('input')
+		await input.setValue('01')
+		await wrapper.vm.$nextTick()
+		expect(input.element.value).toBe('01/__/____')
+
+		// Simuler une position de curseur après le "01"
+		input.element.setSelectionRange(2, 2)
+		await input.trigger('input')
+		await wrapper.vm.$nextTick()
+
+		// La position du curseur devrait rester après le "01"
+		expect(input.element.selectionStart).toBe(2)
+	})
+
+	it('handles paste event with valid date', async () => {
+		const input = wrapper.find('input')
+
+		// Créer un événement de collage avec les données
+		const clipboardData = {
+			getData: () => '01/01/2025',
+		}
+
+		await input.trigger('paste', {
+			clipboardData,
+		})
+		await input.trigger('input') // Déclencher l'événement input après le collage
+		await wrapper.vm.$nextTick()
+
+		expect(input.element.value).toBe('01/01/2025')
+	})
+})

package/src/components/DialogBox/DialogBox.mdx

@@ -5,7 +5,7 @@ import * as DialogBoxStories from './DialogBox.stories';
 
 # DialogBox
 
-L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des bouttons d'action.
+L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des boutons d'action.
 
 <Canvas of={DialogBoxStories.Default}  />
 

package/src/components/DialogBox/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/DialogBox/Usages.stories.ts

@@ -0,0 +1,45 @@
+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/DialogBox/Usages',
+}
+
+const itemsToDo = [
+	'Utiliser un titre clair et descriptif pour expliquer l\'objectif de la modale.',
+	'Garder le contenu de la modale concis et pertinent.',
+	'Adapter la taille de la modale au contenu.',
+	'Ajouter une option explicite pour fermer la modale (ex. : bouton "Fermer" ou icône de croix).',
+	'La modale se positionne au centre de l\'écran sur un fond noir d\'opacité afin de guider l\'attention de l\'utilisateur.',
+]
+
+const itemsNotToDo = [
+	'Utiliser une modale pour afficher à l\'utilisateur des informations non-essentielles.',
+	'Surcharger la modale avec beaucoup de contenu ou d\'actions à effectuer.',
+	'Bloquer la fermeture de la modale (sauf si nécéssaire pour des raisons critiques).',
+	'Trop multiplier les modales dans un parcours utilisateur.',
+]
+
+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/ErrorPage/ErrorPage.mdx

@@ -6,7 +6,7 @@ import * as ErrorPageStories from './ErrorPage.stories'
 
 # ErrorPage
 
-Le composant `ErrorPage` sert à afficher une page d'erreur ou de maintenance.
+Le composant `ErrorPage` sert à afficher une page d'erreur.
 
 <Canvas of={ErrorPageStories.Default} />
 

package/src/components/ExternalLinks/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/ExternalLinks/Usages.stories.ts

@@ -0,0 +1,40 @@
+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/Navigation/ExternalLinks/Usages',
+}
+
+const itemsToDo = [
+	'Les liens externes s\'ouvrent par défaut dans une nouvel onglet pour éviter que l\'utilisateur ne quitte accidentellement l\'application.',
+	'Privilégier des libellés informatifs, comme "Accèder à la page de l\'URSSAF".',
+]
+
+const itemsNotToDo = [
+	'Evitez les libellés génériques comme "Cliquez-ici" ou "En savoir plus".',
+
+]
+
+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/FileList/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 />