@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/components/FileList/FileList.stories.ts

@@ -0,0 +1,562 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FileList from './FileList.vue'
+import { fn } from '@storybook/test'
+import { VIcon } from 'vuetify/components'
+import { mdiCardAccountDetailsOutline, mdiCertificateOutline } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Données/FileList',
+	component: FileList,
+	argTypes: {
+		'uploadList': {
+			description: 'Liste des fichiers à uploader',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'Object[]',
+					detail: `Array<{
+	id: string,
+	title: string,
+	state: 'initial' | 'success' | 'error' | 'loading'
+	fileName?: string,
+	optional?: boolean,
+	progress?: number,
+	showUploadBtn?: boolean
+	showPreviewBtn?: boolean
+	showDeleteBtn?: boolean
+}>`,
+				},
+				category: 'props',
+			},
+		},
+		'locales': {
+			description: 'Traductions',
+			control: false,
+			table: {
+				category: 'props',
+				type: {
+					summary: undefined,
+				},
+				defaultValue: {
+					summary: `Locales`,
+					detail: `{
+	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.',
+}`,
+				},
+			},
+		},
+		'maxWidth': {
+			description: 'Largeur maximale du composant',
+			control: 'text',
+			table: {
+				type: {
+					summary: 'number | string',
+				},
+				category: 'props',
+			},
+		},
+		'minWidth': {
+			description: 'Largeur minimale du composant',
+			control: 'text',
+			table: {
+				type: {
+					summary: 'number | string',
+				},
+				category: 'props',
+			},
+		},
+		'width': {
+			description: 'Largeur du composant',
+			control: 'text',
+			table: {
+				type: {
+					summary: 'number | string',
+				},
+				category: 'props',
+			},
+		},
+		'onUpload': {
+			description: 'Événement déclenché lors du clic sur le bouton d\'upload',
+			action: 'upload',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'Object',
+					detail: `{
+	id: string,
+	title: string,
+	state: 'initial' | 'error',
+	fileName: undefined,
+	optional?: boolean,
+	progress?: number,
+	showUploadBtn: true
+	showPreviewBtn?: boolean
+	showDeleteBtn?: boolean
+}`,
+				},
+			},
+		},
+		'onDelete': {
+			description: 'Événement déclenché lors du clic sur le bouton de suppression',
+			action: 'delete',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'Object',
+					detail: `{
+	id: string,
+	title: string,
+	state: 'success',
+	fileName?: string,
+	optional?: boolean,
+	showUploadBtn?: boolean
+	showPreviewBtn?: boolean
+	showDeleteBtn: true
+}`,
+				},
+			},
+		},
+		'onPreview': {
+			description: 'Événement déclenché lors du clic sur le bouton de prévisualisation',
+			action: 'preview',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'Object',
+					detail: `{
+	id: string,
+	title: string,
+	state: 'success',
+	fileName: string,
+	optional?: boolean,
+	showUploadBtn?: boolean
+	showPreviewBtn: true
+	showDeleteBtn?: boolean
+}`,
+				},
+			},
+		},
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - 'file-icon-${item.id}' storybook can't infer dynamic slot name
+		'file-icon-${item.id}': {
+			description: 'Icône du fichier',
+			control: 'none',
+			table: {
+				category: 'slots',
+				type: {
+					summary: 'Object',
+					detail: `{
+	state: 'initial' | 'success' | 'error' | 'loading',
+}`,
+				},
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			exclude: ['upload', 'preview', 'delete', '`file-icon-${item.id}`'],
+		},
+	},
+} satisfies Meta<typeof FileList>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		uploadList: [
+			{
+				id: 'residenceCertificate',
+				title: 'Attestation de domicile',
+				state: 'initial',
+			},
+			{
+				id: 'identityCard',
+				title: 'Carte d\'identité',
+				state: 'initial',
+			},
+			{
+				id: 'paySlip',
+				title: 'Fiche de paie',
+				state: 'initial',
+			},
+		],
+		onUpload: fn(),
+		onDelete: fn(),
+		onPreview: fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FileList
+		:uploadList="uploadList"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { FileList } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const uploadList = ref([
+	{
+		id: 'residenceCertificate',
+		title: 'Attestation de domicile',
+		state: 'initial',
+	},
+	{
+		id: 'identityCard',
+		title: 'Carte d\\'identité',
+		state: 'initial',
+	},
+	{
+		id: 'paySlip',
+		title: 'Fiche de paie',
+		state: 'initial',
+	},
+])
+
+</script>
+				`,
+			},
+		],
+	},
+
+}
+
+export const States: Story = {
+	args: {
+		uploadList: [
+			{
+				id: 'residenceCertificate',
+				title: 'Attestation de domicile',
+				fileName: 'file1.jpg',
+				state: 'success',
+			},
+			{
+				id: 'identityCard',
+				title: 'Carte d\'identité',
+				state: 'loading',
+			},
+			{
+				id: 'paySlip',
+				title: 'Fiche de paie',
+				state: 'error',
+			},
+		],
+		onUpload: fn(),
+		onDelete: fn(),
+		onPreview: fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FileList
+		:uploadList="uploadList"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { FileList } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const uploadList = ref([
+	{
+		id: 'residenceCertificate',
+		title: 'Attestation de domicile',
+		fileName: 'file1.jpg',
+		state: 'success',
+	},
+	{
+		id: 'identityCard',
+		title: 'Carte d\\'identité',
+		state: 'loading',
+	},
+	{
+		id: 'paySlip',
+		title: 'Fiche de paie',
+		state: 'error',
+	},
+])
+
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const OptionalDocument: Story = {
+	args: {
+		uploadList: [
+			{
+				id: 'residenceCertificate',
+				title: 'Attestation de domicile',
+				state: 'initial',
+			},
+			{
+				id: 'identityCard',
+				title: 'Carte d\'identité',
+				state: 'initial',
+				optional: true,
+			},
+			{
+				id: 'paySlip',
+				title: 'Fiche de paie',
+				state: 'initial',
+				optional: true,
+			},
+		],
+		onUpload: fn(),
+		onDelete: fn(),
+		onPreview: fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FileList
+		:uploadList="uploadList"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { FileList } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const uploadList = ref([
+	{
+		id: 'residenceCertificate',
+		title: 'Attestation de domicile',
+		state: 'initial',
+	},
+	{
+		id: 'identityCard',
+		title: 'Carte d\\'identité',
+		state: 'initial',
+		optional: true,
+	},
+	{
+		id: 'paySlip',
+		title: 'Fiche de paie',
+		state: 'initial',
+		optional: true,
+	},
+])
+
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const Actions: Story = {
+	args: {
+		uploadList: [
+			{
+				id: 'residenceCertificate',
+				title: 'Attestation de domicile',
+				fileName: 'file1.jpg',
+				state: 'success',
+				showDeleteBtn: true,
+				showPreviewBtn: true,
+			},
+			{
+				id: 'identityCard',
+				title: 'Carte d\'identité',
+				state: 'initial',
+				showUploadBtn: false,
+			},
+			{
+				id: 'paySlip',
+				title: 'Fiche de paie',
+				fileName: 'file2.jpg',
+				state: 'success',
+				showDeleteBtn: false,
+				showPreviewBtn: false,
+			},
+		],
+		onUpload: fn(),
+		onDelete: fn(),
+		onPreview: fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FileList
+		:uploadList="uploadList"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `	
+<script setup lang="ts">
+import { FileList } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const uploadList = ref([
+	{
+		id: 'residenceCertificate',
+		title: 'Attestation de domicile',
+		fileName: 'file1.jpg',
+		state: 'success',
+		showDeleteBtn: true,
+		showPreviewBtn: true,
+	},
+	{
+		id: 'identityCard',
+		title: 'Carte d\\'identité',
+		state: 'initial',
+		showUploadBtn: false,
+	},
+	{
+		id: 'paySlip',
+		title: 'Fiche de paie',
+		fileName: 'file2.jpg',
+		state: 'success',
+		showDeleteBtn: false,
+		showPreviewBtn: false,
+	},
+])
+
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const Customization: Story = {
+	args: {
+		uploadList: [
+			{
+				id: 'residenceCertificate',
+				title: 'Attestation de domicile',
+				state: 'initial',
+			},
+			{
+				id: 'identityCard',
+				title: 'Carte d\'identité',
+				state: 'initial',
+			},
+		],
+		onUpload: fn(),
+		onDelete: fn(),
+		onPreview: fn(),
+	},
+	render: args => ({
+		components: { FileList, VIcon },
+		setup() {
+			return { args, mdiCertificateOutline, mdiCardAccountDetailsOutline }
+		},
+		template: `
+			<FileList
+				:uploadList="args.uploadList"
+				:maxWidth="600"
+				:minWidth="400"
+				:width="'50%'"
+				@upload="args.onUpload"
+				@delete="args.onDelete"
+				@preview="args.onPreview"
+			>
+				<template #file-icon-residenceCertificate>
+					<VIcon
+						color="primary"
+					>{{ mdiCertificateOutline }}</VIcon>
+				</template>
+				<template #file-icon-identityCard>
+					<VIcon
+						color="primary"
+					>{{ mdiCardAccountDetailsOutline }}</VIcon>
+				</template>
+			</FileList>
+		`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FileList
+		:uploadList="uploadList"
+		:maxWidth="600"
+		:minWidth="400"
+		:width="'50%'"
+		@upload="console.log"
+		@delete="console.log"
+		@preview="console.log"
+	>
+		<template #file-icon-residenceCertificate>
+			<VIcon
+				color="primary"
+			>{{ mdiCertificateOutline }}</VIcon>
+		</template>
+		<template #file-icon-identityCard>
+			<VIcon
+				color="primary"
+			>{{ mdiCardAccountDetailsOutline }}</VIcon>
+		</template>
+	</FileList>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { FileList } from '@cnamts/synapse'
+import { ref } from 'vue'
+import { mdiCertificateOutline, mdiCardAccountDetailsOutline } from '@mdi/js'
+
+const uploadList = ref([
+	{
+		id: 'residenceCertificate',
+		title: 'Attestation de domicile',
+		state: 'initial',
+	},
+	{
+		id: 'identityCard',
+		title: 'Carte d\\'identité',
+		state: 'initial',
+	},
+])
+
+</script>
+				`,
+			},
+		],
+	},
+}

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>