@cnamts/synapse 0.0.9-alpha → 0.0.10-alpha

package/src/components/FileList/FileList.mdx

@@ -0,0 +1,103 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import * as FileListStories from './FileList.stories';
+
+<Meta of={FileListStories} />
+
+# FileList
+
+Le composant `FileList` est utilisé pour afficher une liste de document à téléverser.
+
+<Canvas of={FileListStories.Default} />
+
+# API
+
+<Controls of={FileListStories.Default}/>
+
+# Exemple d'utilisation
+
+
+## Les différents états d'un fichier
+
+Un fichier peut être dans différents états : « initial », « success », « error » et « loading ».
+Lorsqu’il est dans l’état « loading », une barre de progression est affichée.
+
+Renseigner la propriété `progress` permet de donner a l'utilisateur une indication de progression du téléversement.
+
+<Canvas of={FileListStories.States} />
+
+## Fichiers optionnels
+
+Il est possible de rendre un fichier optionnel en ajoutant la propriété `optional` à l'objet fichier.
+
+<Canvas of={FileListStories.OptionalDocument} />
+
+## Actions
+
+Une fichier permet trois actions : `upload` quand son état est `initial` ou `error`. 
+`delete` et `preview` quand son état est `success`.
+
+Les boutons `upload` et `delete` sont affichés par défaut, le bouton `preview` est masqué par défaut.
+
+Pour afficher ou masquer une action, il est possible d'utiliser les propriétés `showUploadBtn`, `showDeleteBtn` et `showPreviewBtn`, ces propriétés sont de type `boolean`.
+
+Quand une action est cliqué, un événement `upload`, `delete` ou `preview` est émis avec l'objet de l'item en paramètre.
+
+<Canvas of={FileListStories.Actions} />
+
+## Personnalisation des icônes de fichier
+
+Il est possible de personnaliser les icônes de fichier en utilisant le slot dynamique `file-icon-<id du fichier>`.
+
+<Canvas
+	of={FileListStories.Customization}
+		source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { FileList } from '@cnamts/synapse'
+			import { mdiCardAccountDetailsOutline, mdiCertificateOutline } from '@mdi/js'
+			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>
+
+		<FileList
+			:uploadList="args.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>
+		`
+	}}
+/>

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>
+				`,
+			},
+		],
+	},
+}