@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/components/FileUpload/locales.ts

@@ -0,0 +1,10 @@
+export const locales = {
+	or: 'Ou',
+	chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
+	infoText: (max: string, ext: string[]): string =>
+		`Taille max. : ${max}. ${ext.length === 1 ? 'Format accepté' : 'Formats acceptés'} : ${ext.join(', ')}`,
+	fileSizeUnits: ['o', 'Ko', 'Mo', 'Go', 'To'],
+	dropFilesHere: (multiple: boolean): string => (!multiple ? 'Déposer votre fichier ici' : 'Déposer vos fichiers ici'),
+	errorSize: (fileName: string, max: string): string => `Le fichier ${fileName} est trop volumineux. Taille max. : ${max}`,
+	errorExtension: (fileName: string, ext: string[]): string => `Le fichier ${fileName} a une extension invalide. Extensions acceptées : ${ext.join(', ')}`,
+}

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

@@ -0,0 +1,332 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import FileUpload from '../FileUpload.vue'
+
+const file: File = new File([''], 'filename', { type: 'text/html' })
+
+describe('FileUpload', () => {
+	const consoleMock = vi
+		.spyOn(console, 'warn')
+		.mockImplementation(() => undefined)
+
+	afterEach(() => {
+		consoleMock.mockReset()
+	})
+
+	it('renders correctly', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('renders correctly in multiple mode', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				multiple: true,
+				modelValue: [file, file],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('renders correctly with only one extension allowed', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				allowedExtensions: ['pdf'],
+				modelValue: [file],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('change the style when dragging', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const label = wrapper.find('label')
+		const labelClasses = label.classes()
+
+		await wrapper.find('input').trigger('dragover')
+		expect(label.classes()).not.toEqual(labelClasses)
+
+		await wrapper.find('input').trigger('dragleave')
+		expect(label.classes()).toEqual(labelClasses)
+	})
+
+	it('accepts the drop of a file with the correct extension', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('accepts the drop of many files', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				multiple: true,
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file, file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([[file, file, file]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('rejects the drop of a file with the wrong extension', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
+	})
+
+	it('rejects the drop of a file with the wrong extension in multiple mode', async () => {
+		const pdfFile: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+		const jpgFile: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
+
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				multiple: true,
+				modelValue: [pdfFile],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [jpgFile],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[pdfFile]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [pdfFile],
+			},
+		})
+
+		expect(wrapper.emitted('error')?.[1]).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([[pdfFile, pdfFile]])
+	})
+
+	it('rejects the drop of a file that is too big', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				fileSizeMax: 1,
+			},
+		})
+
+		const file: File = new File(['42'], 'filename.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg est trop volumineux. Taille max. : 1 o']])
+	})
+
+	it('do nothing if no file is dropped', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('allow any extension if allowedExtensions is empty', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: [],
+			},
+		})
+
+		const file: File = new File([''], 'filename.xyz', { type: 'unknown' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('do nothing if the field is disabled', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				disabled: true,
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('if many files are dropped in single mode, only the first one is kept', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+			},
+		})
+
+		const file1: File = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2: File = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file1, file2],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file1]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('update the field when the input changes', async () => {
+		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [file1],
+			},
+		})
+
+		const input = wrapper.find('input')
+		input.element.files = [file2] as unknown as FileList
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file2]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('add the new files to the existing ones when the input changes in multiple mode', async () => {
+		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [file1],
+				multiple: true,
+			},
+		})
+
+		const input = wrapper.find('input')
+		input.element.files = [file2] as unknown as FileList
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file1, file2]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+})

package/src/components/FileUpload/tests/__snapshots__/FileUpload.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FileUpload > renders correctly 1`] = `"Déposer votre fichier iciOuChoisir un fichierTaille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png"`;
+
+exports[`FileUpload > renders correctly in multiple mode 1`] = `"Déposer vos fichiers iciOuChoisir des fichiersTaille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png"`;
+
+exports[`FileUpload > renders correctly with only one extension allowed 1`] = `"Déposer votre fichier iciOuChoisir un fichierTaille max. : 10 Mo. Format accepté : pdf"`;

package/src/components/FileUpload/useFileDrop.ts

@@ -0,0 +1,23 @@
+import { onMounted, toValue, type MaybeRef } from 'vue'
+
+export default function useFileDrop(
+	dropZone: MaybeRef<HTMLElement | null>,
+	callback: (files: File[]) => void,
+) {
+	onMounted(() => {
+		const inputEl = toValue(dropZone)
+
+		if (!inputEl) return
+
+		inputEl.addEventListener('drop', (e) => {
+			e.preventDefault()
+			e.stopPropagation()
+
+			const droppedFiles = e.dataTransfer?.files
+
+			if (!droppedFiles?.length) return
+
+			callback(Array.from(droppedFiles))
+		})
+	})
+}

package/src/components/FileUpload/validateFiles.ts

@@ -0,0 +1,39 @@
+import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
+import { locales } from './locales'
+
+export default function validateFiles(
+	files: File[],
+	maxFileSize: number,
+	allowedExtensions: string[],
+	fileSizeUnits: string[],
+) {
+	const errors: string[] = []
+	const validFiles: File[] = []
+	for (const file of files) {
+		let isValid = true
+		if (file.size > maxFileSize) {
+			errors.push(
+				locales.errorSize(file.name, calcHumanFileSize(maxFileSize, fileSizeUnits)),
+			)
+			isValid = false
+		}
+
+		if (
+			!allowedExtensions.includes(file.name.split('.').pop() || '')
+			&& allowedExtensions.length > 0
+		) {
+			errors.push(
+				locales.errorExtension(file.name, allowedExtensions),
+			)
+			isValid = false
+		}
+
+		if (isValid) {
+			validFiles.push(file)
+		}
+	}
+	return {
+		errors,
+		validFiles,
+	}
+}

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import NirField from './NirField.vue'
 
-const meta = {
+const meta: Meta<typeof NirField> = {
 	title: 'Composants/Formulaires/NirField',
 	component: NirField,
 	decorators: [

package/src/components/NirField/NirField.vue

@@ -233,7 +233,7 @@
 
 	function validateOnSubmit() {
 		isValidating.value = true
-		validateFields()
+		validateFields(true)
 		return errors.value.length === 0
 	}
 
@@ -372,6 +372,7 @@
 .vd-key-field {
 	width: 104px;
 	flex: none;
+	margin-left: 2%;
 }
 
 .custom-counter {

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

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

@@ -0,0 +1,191 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/PasswordField/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+														<p>{{ value.info4 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}