@cnamts/synapse 0.0.9-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/PeriodField/PeriodField.mdx

@@ -0,0 +1,32 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as PeriodFieldStories from "./PeriodField.stories.ts";
+
+<Meta of={PeriodFieldStories}/>
+
+# PeriodField
+
+Le composant `PeriodField` est utilisé pour permettre à l’utilisateur de saisir une période.
+
+<Canvas story={{height: '550px'}} of={PeriodFieldStories.Default}/>
+
+# API
+
+<Controls of={PeriodFieldStories.Default}/>
+
+## Utilisation de base
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { PeriodField } from '@cnamts/synapse'
+
+	const selectedPeriod = ref({ from: null, to: null })
+</script>
+
+<template>
+	<PeriodField v-model="selectedPeriod" />
+	<p>Selected Period: {{ selectedPeriod }}</p>
+</template>
+`}
+/>