@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/components/FilePreview/FilePreview.stories.ts

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { onMounted, ref } from 'vue'
+import FilePreview from './FilePreview.vue'
+import FileUpload from '../FileUpload/FileUpload.vue'
+
+const meta: Meta = {
+	title: 'Composants/Données/FilePreview',
+	component: FilePreview,
+	argTypes: {
+		file: {
+			control: false,
+			table: {
+				type: {
+					summary: 'File | Blob',
+				},
+				category: 'props',
+			},
+			description: 'Fichier à afficher',
+		},
+		options: {
+			control: {
+				type: 'object',
+			},
+			table: {
+				type: {
+					summary: 'Object',
+					detail: `{
+	pdf?: Record<string, string>,
+	image?: Record<string, string>,
+}`,
+				},
+				category: 'props',
+			},
+			description: 'Configuration des attributs pour les balises `object` et `img`. Par défaut, l\'image a une description vide.',
+		},
+		locales: {
+			description: 'Traductions',
+			control: {
+				type: 'object',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'Record<string, string>',
+				},
+				defaultValue: {
+					summary: 'locales',
+					detail: `{
+	previewNotAvailable: 'Impossible de prévisualiser le fichier.',
+	previewTypeNotAvailable: 'Impossible de prévisualiser ce type de fichier.',
+}`,
+				},
+			},
+		},
+		default: {
+			control: {
+				type: 'text',
+			},
+			table: {
+				category: 'slots',
+			},
+			description: 'Remplace le contenu par défaut affiché quand le fichier n\'est pas une image ou un pdf',
+		},
+	},
+} satisfies Meta<typeof FilePreview>
+
+export default meta
+
+type Story = StoryObj<typeof FilePreview>
+
+export const Default: Story = {
+	render: args => ({
+		components: { FilePreview },
+		template: `
+			<div>
+				<input type="file" @change="file = $event.target.files[0]" id="file-test-upload" />
+				<FilePreview v-bind="args" :file >
+					<template #default v-if="args.default">
+						{{ args.default }}
+					</template>
+				</FilePreview>
+			</div>
+		`,
+		setup: () => {
+			const file = ref<File | undefined>()
+			return { args, file }
+		},
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<div>
+	<input type="file" @change="file = $event.target.files[0]" />
+	<FilePreview :file="file" />
+</div>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { FilePreview } from '@cnamts/synapse'
+
+const file = ref<File | undefined>()`,
+			},
+		],
+	},
+}
+
+export const UnsupportedFile: Story = {
+	render: args => ({
+		components: { FilePreview },
+		template: `
+			<FilePreview v-bind="args" :file="file" >
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+			</FilePreview>
+		`,
+		setup: () => {
+			const file = ref({
+				name: 'document.txt',
+				size: 1000,
+				type: 'text/plain',
+			} as File)
+			return { args, file }
+		},
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FilePreview :file="file" />
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { FilePreview } from '@cnamts/synapse'
+
+const file = ref({
+	name: 'document.txt',
+	size: 1000,
+	type: 'text/plain',
+} as File)`,
+			},
+		],
+	},
+}
+
+export const FromApi: Story = {
+	render: args => ({
+		components: { FilePreview },
+		template: `
+			<FilePreview v-bind="args" :file="file">
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+			</FilePreview>
+		`,
+		setup: () => {
+			const file = ref<File | Blob | undefined>()
+
+			onMounted(() => {
+				fetch('https://picsum.photos/seed/picsum/750/350')
+					.then(res => res.blob())
+					.then(blob => file.value = blob)
+			})
+			return { args, file }
+		},
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FilePreview :file="file" />
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+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)
+})`,
+			},
+		],
+	},
+}
+
+export const WithFileUpload: Story = {
+	render: args => ({
+		components: { FilePreview, FileUpload },
+		template: `
+			<div>
+				<FileUpload v-model="files" class="mb-4"/>
+				<FilePreview v-bind="args" :file="files[0]">
+					<template #default v-if="args.default">
+						{{ args.default }}
+					</template>
+				</FilePreview>
+			</div>
+		`,
+		setup: () => {
+			const files = ref<File[]>([])
+
+			return { args, files }
+		},
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<div>
+	<FileUpload v-model="files" class="mb-4"/>
+	<FilePreview :file="files[0]"/>
+</div>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { FilePreview, FileUpload } from '@cnamts/synapse'
+
+const files = ref<File[]>([])`,
+			},
+		],
+	},
+}

package/src/components/FilePreview/FilePreview.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+	import deepmerge from 'deepmerge'
+	import { computed, onUnmounted, ref, watch } from 'vue'
+	import { config } from './config'
+	import { locales as defaultLocales } from './locales'
+
+	const props = withDefaults(defineProps<{
+		file?: File | Blob
+		options?: {
+			pdf?: Record<string, string>
+			image?: Record<string, string>
+		}
+		locales?: typeof defaultLocales
+	}>(), {
+		file: undefined,
+		options: undefined,
+		locales: () => defaultLocales,
+	})
+
+	const fileURL = ref('')
+	const isPdf = computed(() => props.file?.type === 'application/pdf')
+	const isImage = computed(() => props.file ? /^image\//.test(props.file.type) : false)
+	const filePreviewOptions = computed(() => deepmerge(config, props.options || {}))
+
+	const getFileURL = () => {
+		if (!props.file || !(isPdf.value || isImage.value)) return
+		fileURL.value = URL.createObjectURL(props.file)
+	}
+
+	const revokeFileURL = () => {
+		URL.revokeObjectURL(fileURL.value)
+	}
+
+	watch(() => props.file, getFileURL, { immediate: true })
+
+	onUnmounted(revokeFileURL)
+</script>
+
+<template>
+	<div
+		v-if="file"
+		class="sy-file-preview"
+	>
+		<object
+			v-if="isPdf"
+			:data="fileURL"
+			v-bind="filePreviewOptions.pdf"
+			type="application/pdf"
+			@load="revokeFileURL"
+		>
+			<p class="mb-0">{{ locales.previewNotAvailable }}</p>
+		</object>
+
+		<img
+			v-else-if="isImage"
+			:src="fileURL"
+			:alt="filePreviewOptions.image.alt || ''"
+			v-bind="filePreviewOptions.image"
+			@load="revokeFileURL"
+		>
+
+		<slot v-else>
+			<p class="mb-0">
+				{{ locales.previewTypeNotAvailable }}
+			</p>
+		</slot>
+	</div>
+</template>

package/src/components/FilePreview/config.ts

@@ -0,0 +1,10 @@
+export const config = {
+	pdf: {
+		height: '556px',
+		width: '100%',
+	},
+	image: {
+		// https://github.com/vuejs/core/issues/2801
+		style: 'width: 100%;',
+	},
+}

package/src/components/FilePreview/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	previewNotAvailable: 'Impossible de prévisualiser le fichier.',
+	previewTypeNotAvailable: 'Impossible de prévisualiser ce type de fichier.',
+}

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

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { VueWrapper, mount } from '@vue/test-utils'
+
+import FilePreview from '../FilePreview.vue'
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../locales'
+
+const testFileImg = {
+	name: 'avatar.png',
+	size: 1000,
+	type: 'image/png',
+} as File
+
+const testFilePdf = {
+	name: 'document.pdf',
+	size: 1000,
+	type: 'application/pdf',
+} as File
+
+describe('FilePreview', async () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let wrapper: VueWrapper<any>
+	global.URL.createObjectURL = vi.fn()
+
+	beforeEach(() => {
+		wrapper = mount(FilePreview, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+	})
+
+	it('renders correctly with an image', async () => {
+		await wrapper.setProps({ file: testFileImg })
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		wrapper.unmount()
+	})
+
+	it('renders correctly with a pdf', async () => {
+		await wrapper.setProps({ file: testFilePdf })
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		wrapper.unmount()
+	})
+
+	it('render correctly with a file that is not an image or pdf', async () => {
+		await wrapper.setProps({
+			file: {
+				name: 'document.txt',
+				size: 1000,
+				type: 'text/plain',
+			} as File,
+		})
+
+		expect(wrapper.text()).toContain(locales.previewTypeNotAvailable)
+
+		wrapper.unmount()
+	})
+
+	it('updates the preview when the file changes', async () => {
+		await wrapper.setProps({ file: testFileImg })
+
+		expect(wrapper.find('img').exists()).toBe(true)
+
+		await wrapper.setProps({
+			file: testFilePdf,
+		})
+
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('object').exists()).toBe(true)
+
+		await wrapper.setProps({
+			file: null,
+		})
+
+		expect(wrapper.find('img').exists()).toBe(false)
+		expect(wrapper.find('object').exists()).toBe(false)
+		expect(wrapper.text()).toBe('')
+
+		wrapper.unmount()
+	})
+
+	it('with options', async () => {
+		await wrapper.setProps({
+			file: testFileImg,
+			options: {
+				image: {
+					alt: 'Photo de paysage montagneux.',
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		wrapper.unmount()
+	})
+
+	it('show an error when the type is not supported', async () => {
+		await wrapper.setProps({
+			file: {
+				name: 'document.txt',
+				size: 1000,
+				type: 'text/plain',
+			} as File,
+		})
+
+		expect(wrapper.text()).toContain(locales.previewTypeNotAvailable)
+
+		wrapper.unmount()
+	})
+
+	it('show nothing when the file is null', async () => {
+		await wrapper.setProps({
+			file: null,
+		})
+
+		expect(wrapper.html()).toMatchInlineSnapshot(`"<!--v-if-->"`)
+
+		wrapper.unmount()
+	})
+})

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FilePreview > renders correctly with a pdf 1`] = `
+"<div class="sy-file-preview"><object height="556px" width="100%" type="application/pdf">
+    <p class="mb-0">Impossible de prévisualiser le fichier.</p>
+  </object></div>"
+`;
+
+exports[`FilePreview > renders correctly with an image 1`] = `"<div class="sy-file-preview"><img alt="" style="width: 100%;"></div>"`;
+
+exports[`FilePreview > with options 1`] = `"<div class="sy-file-preview"><img alt="Photo de paysage montagneux." style="width: 100%;"></div>"`;

package/src/components/FileUpload/FileUpload.mdx

@@ -0,0 +1,165 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as FileUploadStories from './FileUpload.stories.ts';
+
+<Meta of={FileUploadStories} />
+
+# FileUpload
+
+Le composant `FileUpload` est un champ d'upload de fichier par glisser-déposer ou par sélection de fichier.
+
+<Canvas of={FileUploadStories.Default} />
+
+# API
+
+<Controls of={FileUploadStories.Default} />
+
+## Gérer l'envoi des fichiers
+
+Vous pouvez envoyer les fichiers sur un serveur en un objet FormData.
+
+<Source dark language="typescript" code={`
+<script setup lang="ts">
+	import { FileUpload } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const files = ref<File[]>([])
+
+	function upload() {
+		const formData = new FormData()
+		files.value.forEach((file: File) => {
+			formData.append(file.name, file)
+		})
+
+		fetch('http://localhost:3000/upload', {
+			method: 'POST',
+			body: formData,
+		})
+	}
+
+</script>
+
+<template>
+	<main class="pa-12">
+		{{ files?.map(file => file.name).join(', ') }}
+
+		<br>
+		<FileUpload
+			v-model="files"
+			:multiple="true"
+			@error="console.log"
+		/>
+
+		<VBtn
+			@click="upload"
+		>
+			submit
+		</VBtn>
+	</main>
+</template>
+`} />
+
+Même exemple avec axios :
+
+<Source dark language="typescript" code={`
+<script setup lang="ts">
+	import { FileUpload } from '@cnamts/synapse'
+	import { ref } from 'vue'
+	import axios from 'axios'
+
+	const files = ref<File[]>([])
+
+	function upload() {
+		const formData = new FormData()
+		files.value.forEach((file: File) => {
+			formData.append(file.name, file)
+		})
+
+		axios.post('http://localhost:3000/upload', formData, {
+			headers: {
+				'Content-Type': 'multipart/form-data',
+			},
+		})
+	}
+
+</script>
+
+<template>
+	<main class="pa-12">
+		{{ files?.map(file => file.name).join(', ') }}
+
+		<br>
+		<FileUpload
+			v-model="files"
+			:multiple="true"
+			@error="console.log"
+		/>
+
+		<VBtn
+			@click="upload"
+		>
+			submit
+		</VBtn>
+
+	</main>
+</template>
+`} />
+
+## Coté backend
+
+Voici un exemple de code pour gérer l'upload de fichier en Node.js avec Express,
+ce code est destiné à des fins de tests uniquement.
+
+<Source dark language="javascript" code={`
+import express from "express";
+import fileUpload from "express-fileupload";
+import cors from "cors";
+import { join } from "path";
+import { existsSync, mkdirSync } from "fs";
+
+const app = express();
+
+app.use(fileUpload());
+app.use(cors({ origin: true, credentials: true }));
+
+const uploadDir = join(import.meta.dirname, "uploads");
+
+if (!existsSync(uploadDir)) {
+	mkdirSync(uploadDir);
+}
+
+app.post("/upload", async function (req, res) {
+	if (!req.files || Object.keys(req.files).length === 0) {
+		return res.status(400).send("No files were uploaded.");
+	}
+
+	let errors = [];
+
+	const uploadPromises = Object.keys(req.files).map(async (fileKey) => {
+		const file = req.files[fileKey];
+		const filePath = join(uploadDir, file.name);
+
+		try {
+			await file.mv(filePath);
+		} catch (err) {
+			errors.push(err);
+		}
+	});
+
+	try {
+		await Promise.all(uploadPromises);
+
+		if (errors.length > 0) {
+			return res.status(500).send(errors.join(", "));
+		}
+		res.send("Files uploaded!");
+	} catch (err) {
+		res.status(500).send("An error occurred during file upload.");
+	}
+});
+
+app.listen(3000, function () {
+	console.log("App is listening on port 3000");
+});
+
+`} />