@cnamts/synapse 0.0.9-alpha → 0.0.10-alpha

package/src/components/FileList/FileList.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+	import UploadItem from '@/components/FileList/UploadItem/UploadItem.vue'
+	import { useWidthable, type Widthable } from '@/composables/widthable'
+	import { locales as defaultLocales } from './UploadItem/locales'
+
+	export interface Item {
+		id: string
+		title: string
+		state: string // 'initial' | 'success' | 'error' | 'loading'
+		fileName?: string
+		optional?: boolean
+		progress?: number
+		showUploadBtn?: boolean
+		showPreviewBtn?: boolean
+		showDeleteBtn?: boolean
+	}
+
+	const props = withDefaults(defineProps<{
+		uploadList: Item[]
+		locales?: typeof defaultLocales
+	} & Widthable>(), {
+		locales: () => defaultLocales,
+	})
+
+	const { widthStyles } = useWidthable(props)
+
+	defineEmits<{
+		(e: 'upload', item: Item): void
+		(e: 'preview', item: Item): void
+		(e: 'delete', item: Item): void
+	}>()
+</script>
+
+<template>
+	<ul
+		class="upload-list"
+		:style="widthStyles"
+	>
+		<UploadItem
+			v-for="item in props.uploadList"
+			:key="item.id"
+			:item-id="item.id"
+			:title="item.title"
+			:file-name="item.fileName"
+			:optional="item.optional"
+			:state="(item.state as 'initial' | 'success' | 'error' | 'loading')"
+			:progress="item.progress"
+			:show-upload-btn="item.showUploadBtn"
+			:show-preview-btn="item.showPreviewBtn"
+			:show-delete-btn="item.showDeleteBtn"
+			tag="li"
+			:locales="locales"
+			@upload="() => $emit('upload', uploadList.find((i) => i.id === item.id) as Item)"
+			@preview="() => $emit('preview', uploadList.find((i) => i.id === item.id) as Item)"
+			@delete="() => $emit('delete', uploadList.find((i) => i.id === item.id) as Item)"
+		>
+			<template #file-icon="slotProps">
+				<slot
+					:name="`file-icon-${item.id}`"
+					v-bind="slotProps"
+				/>
+			</template>
+		</UploadItem>
+	</ul>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.upload-list {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+</style>

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+	import {
+		mdiFile,
+		mdiTrayArrowUp,
+		mdiDeleteOutline,
+		mdiEyeOutline,
+		mdiAlertCircle,
+		mdiCheckCircle,
+	} from '@mdi/js'
+	import { cnamContextualTokens } from '@/designTokens/tokens/cnam/cnamContextual'
+	import { locales as defaultLocales } from './locales'
+
+	type FileState = 'initial' | 'success' | 'error' | 'loading'
+
+	defineEmits<{
+		(e: 'upload', item: string): void
+		(e: 'preview', item: string): void
+		(e: 'delete', item: string): void
+	}>()
+
+	withDefaults(defineProps<{
+		itemId: string
+		title: string
+		fileName?: string
+		message?: string
+		optional?: boolean
+		state?: FileState
+		progress?: number
+		showUploadBtn?: boolean
+		showDeleteBtn?: boolean
+		showPreviewBtn?: boolean
+		tag?: string
+		locales?: typeof defaultLocales
+	}>(), {
+		fileName: undefined,
+		message: undefined,
+		optional: false,
+		state: 'initial',
+		progress: undefined,
+		showUploadBtn: true,
+		showDeleteBtn: true,
+		showPreviewBtn: false,
+		tag: 'div',
+		locales: () => defaultLocales,
+	})
+
+	defineSlots<{
+		'file-icon'(props: { state: FileState }): void
+	}>()
+
+</script>
+
+<template>
+	<component
+		:is="tag"
+		class="file-item"
+	>
+		<div class="file-item__description">
+			<div class="file-item__content">
+				<span
+					class="file-item__icon"
+				>
+					<slot
+						name="file-icon"
+						:state
+					>
+						<span
+							v-if="state === 'success'"
+							class="d-sr-only"
+						>
+							{{ locales.success }}
+						</span>
+
+						<span
+							v-else-if="state === 'error'"
+							class="d-sr-only"
+						>
+							{{ locales.error }}
+						</span>
+
+						<VIcon
+							v-if="state === 'error'"
+							:size="cnamContextualTokens.iconSize.default"
+							:aria-label="locales.error"
+							color="error"
+						>{{ mdiAlertCircle }}</VIcon>
+
+						<VIcon
+							v-else-if="state === 'success'"
+							:size="cnamContextualTokens.iconSize.default"
+							:aria-label="locales.success"
+							color="success"
+						>{{ mdiCheckCircle }}</VIcon>
+
+						<VIcon
+							v-else
+							:size="cnamContextualTokens.iconSize.default"
+							color="primary"
+						>{{ mdiFile }}</VIcon>
+					</slot>
+				</span>
+				<div>
+					<div class="file-item__title">
+						{{ title }}
+					</div>
+					<div class="file-item__name text-base">
+						{{ fileName }}
+					</div>
+					<div
+						v-if="message || optional"
+						class="file-item__message text-base"
+					>
+						{{ message ?? locales.optionalDocument }}
+					</div>
+				</div>
+			</div>
+			<div class="file-item__actions">
+				<VBtn
+					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
+					class="file-item__action file-item__action-upload text-primary"
+					variant="text"
+					@click="$emit('upload', itemId)"
+				>
+					<span>Importer</span>
+					<template #prepend>
+						<VIcon
+							color="primary"
+						>
+							{{ mdiTrayArrowUp }}
+						</VIcon>
+					</template>
+				</VBtn>
+				<VBtn
+					v-if="state === 'success' && showPreviewBtn"
+					class="file-item__action file-item__action-preview text-primary"
+					variant="text"
+					@click="$emit('preview', itemId)"
+				>
+					<span>{{ locales.see }}</span>
+					<template #prepend>
+						<VIcon
+							color="primary"
+						>
+							{{ mdiEyeOutline }}
+						</VIcon>
+					</template>
+				</VBtn>
+				<VBtn
+					v-if="state === 'success' && showDeleteBtn"
+					class="file-item__action file-item__action-delete text-error"
+					variant="text"
+					@click="$emit('delete', itemId)"
+				>
+					<span>{{ locales.delete }}</span>
+					<template #prepend>
+						<VIcon
+							color="error"
+						>
+							{{ mdiDeleteOutline }}
+						</VIcon>
+					</template>
+				</VBtn>
+			</div>
+		</div>
+
+		<div
+			v-if="state === 'loading'"
+			class="file-item__message-progress"
+		>
+			<p class="d-sr-only">
+				{{ locales.uploading }}
+			</p>
+			<VProgressLinear
+				:indeterminate="progress === undefined"
+				:model-value="progress"
+				:progress="progress"
+				height="7"
+				color="primary"
+				rounded="true"
+			/>
+		</div>
+	</component>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.file-item {
+	display: flex;
+	flex-direction: column;
+	gap: tokens.$gap-3;
+	padding-block: tokens.$padding-4;
+	border-bottom: 1px solid tokens.$colors-border-subdued;
+}
+
+.file-item__title {
+	font-size: tokens.$font-size-body-text;
+}
+
+.file-item__name {
+	font-size: 0.875rem;
+	color: tokens.$colors-text-base;
+}
+
+.file-item__description {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+
+	> * {
+		grid-column: 1 / -1;
+	}
+
+	> *:nth-child(1),
+	> *:nth-child(2) {
+		grid-column: 1 / 2;
+	}
+
+	> .file-item__actions {
+		grid-column-start: 2;
+		grid-row: span 2;
+	}
+}
+
+.file-item__content {
+	display: flex;
+	gap: tokens.$gap-4;
+	align-items: center;
+}
+
+.file-item__actions {
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	justify-content: center;
+	margin-left: auto;
+	height: 100%;
+	gap: tokens.$gap-1;
+
+	@media screen and (min-width: tokens.$container-tablet-max-width) {
+		flex-direction: row;
+	}
+}
+
+.file-item__action {
+	display: flex;
+	justify-content: end;
+	text-transform: unset;
+	padding: 0.625rem 1.25rem;
+	font-weight: bold;
+}
+
+.file-item__message {
+	font-size: 0.875rem;
+	color: tokens.$colors-text-subdued;
+}
+
+.file-item__message-success,
+.file-item__message-error {
+	margin-top: tokens.$gap-3;
+}
+
+.file-item__message-error {
+	display: flex;
+	align-items: center;
+	gap: tokens.$gap-4;
+}
+
+</style>

package/src/components/FileList/UploadItem/locales.ts

@@ -0,0 +1,9 @@
+export const locales = {
+	optionalDocument: 'Document facultatif',
+	see: 'Voir',
+	delete: 'Supprimer',
+	uploading: 'En cours',
+	success: 'Téléchargé',
+	error: 'Erreur',
+	errorOccurred: 'Une erreur est survenue pendant le téléchargement.',
+}

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

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FileList from '../FileList.vue'
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../UploadItem/locales'
+
+describe('FileList', () => {
+	it('renders many file items', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'residenceCertificate',
+						title: 'Attestation de domicile',
+						state: 'initial',
+					},
+					{
+						id: 'identityCard',
+						title: 'Carte d\'identité',
+						state: 'initial',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.findAll('.file-item').length).toBe(2)
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.text()).toContain('Attestation de domicile')
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.text()).toContain('Carte d\'identité')
+	})
+
+	it('shows the right action for each state and item preference', async () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'file1',
+						title: 'file1',
+						state: 'initial',
+					},
+					{
+						id: 'file2',
+						title: 'file2',
+						state: 'initial',
+						showUploadBtn: false,
+					},
+					{
+						id: 'file3',
+						title: 'file3',
+						state: 'success',
+						showDeleteBtn: true,
+						showPreviewBtn: true,
+					},
+					{
+						id: 'file4',
+						title: 'file4',
+						state: 'success',
+						showDeleteBtn: false,
+						showPreviewBtn: false,
+					},
+					{
+						id: 'file5',
+						title: 'file5',
+						state: 'error',
+					},
+					{
+						id: 'file6',
+						title: 'file6',
+						state: 'error',
+						showUploadBtn: false,
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.findAll('button').length).toBe(1)
+		const item1UploadBtn = item1!.find('.file-item__action-upload')
+		expect(item1UploadBtn.exists()).toBe(true)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.findAll('button').length).toBe(0)
+
+		const item3 = wrapper.findAll('.file-item').at(2)
+		expect(item3!.findAll('button').length).toBe(2)
+		const item3DeleteBtn = item3!.find('.file-item__action-delete')
+		expect(item3DeleteBtn.exists()).toBe(true)
+		const item3PreviewBtn = item3!.find('.file-item__action-preview')
+		expect(item3PreviewBtn.exists()).toBe(true)
+
+		const item4 = wrapper.findAll('.file-item').at(3)
+		expect(item4!.findAll('button').length).toBe(0)
+
+		const item5 = wrapper.findAll('.file-item').at(4)
+		expect(item5!.findAll('button').length).toBe(1)
+		const item5UploadBtn = item5!.find('.file-item__action-upload')
+		expect(item5UploadBtn.exists()).toBe(true)
+
+		const item6 = wrapper.findAll('.file-item').at(5)
+		expect(item6!.findAll('button').length).toBe(0)
+	})
+
+	it('emits the right event when clicking on an action button', async () => {
+		const fileItem1 = {
+			id: 'file1',
+			title: 'file1',
+			state: 'initial',
+		}
+
+		const fileItem2 = {
+			id: 'file2',
+			title: 'file2',
+			state: 'success',
+			showDeleteBtn: true,
+			showPreviewBtn: true,
+		}
+
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [fileItem1, fileItem2],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		const item1UploadBtn = item1!.find('.file-item__action-upload')
+		await item1UploadBtn!.trigger('click')
+		expect(wrapper.emitted('upload')?.[0][0]).toEqual(fileItem1)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		const item2DeleteBtn = item2!.find('.file-item__action-delete')
+		await item2DeleteBtn!.trigger('click')
+		expect(wrapper.emitted('delete')?.[0][0]).toEqual(fileItem2)
+
+		const item2PreviewBtn = item2!.find('.file-item__action-preview')
+		await item2PreviewBtn!.trigger('click')
+		expect(wrapper.emitted('preview')?.[0][0]).toEqual(fileItem2)
+	})
+
+	it('shows when a file is optional', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'file1',
+						title: 'file1',
+						state: 'initial',
+						optional: true,
+					},
+					{
+						id: 'file2',
+						title: 'file2',
+						state: 'initial',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.text()).toContain(locales.optionalDocument)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.text()).not.toContain(locales.optionalDocument)
+	})
+})

package/src/components/FilePreview/FilePreview.mdx

@@ -0,0 +1,82 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as FilePreviewStories from './FilePreview.stories.ts'
+
+<Meta of={FilePreviewStories} />
+
+
+# FilePreview
+
+L'élément `FilePreview` est utilisé pour afficher l'aperçu d'un fichier.
+
+<Canvas of={FilePreviewStories.Default} />
+
+
+# API
+
+<Controls of={FilePreviewStories.Default} />
+
+
+# Exemple
+
+## Afficher un fichier depuis une API
+
+Vous pouvez afficher une image ou un fichier PDF récupéré depuis une API sous forme de `Blob`.
+
+<Canvas
+	of={FilePreviewStories.FromApi}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { onMounted, ref } from 'vue'
+			import { FilePreview } from '@cnamts/synapse'
+
+			const file = ref<File | Blob | undefined>()
+
+			onMounted(() => {
+				fetch('https://picsum.photos/seed/picsum/750/350')
+					.then(res => res.blob())
+					.then(blob => file.value = blob)
+			})
+		</script>
+
+		<template>
+			<FilePreview :file="file" />
+		</template>
+		`,
+	}}
+/>
+
+## Fichier non supporté
+
+Lorsque le fichier n'est pas supporté, un message d'erreur est affiché.
+
+<Canvas of={FilePreviewStories.UnsupportedFile} />
+
+## Usage avec `FileUpload`
+
+Vous pouvez utiliser ce composant en combinaison avec `FileUpload` pour afficher un aperçu du fichier avant de l'envoyer.
+
+<Canvas
+	of={FilePreviewStories.WithFileUpload}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { ref } from 'vue'
+			import { FilePreview, FileUpload } from '@cnamts/synapse'
+
+			const files = ref<File[]>([])
+		</script>
+		<template>
+			<div>
+				<FileUpload v-model="files" class="mb-4"/>
+				<FilePreview :file="files[0]"/>
+			</div>
+		</template>
+		`,
+	}}
+/>