@cnamts/synapse 0.0.0-alpha.0

package/src/components/DownloadBtn/DownloadBtn.stories.ts

@@ -0,0 +1,211 @@
+import { fn, userEvent, within } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import axios from 'axios'
+import { VThemeProvider } from 'vuetify/components'
+import DownloadBtn from './DownloadBtn.vue'
+import NotificationBar from '../NotificationBar/NotificationBar.vue'
+import { useNotificationService } from '@/services/NotificationService'
+
+const meta = {
+	title: 'Components/DownloadBtn',
+	component: DownloadBtn,
+	parameters: {
+		layout: 'fullscreen',
+		controls: {
+			exclude: ['getFileInfo', 'download', 'state', 'onError', 'onSuccess'],
+		},
+	},
+	argTypes: {
+		default: {
+			control: { type: 'text' },
+			table: {
+				category: 'slots',
+			},
+		},
+		filePromise: {
+			control: false,
+			description: 'Une fonction retournant un valeur de retour de Axios `Promise<AxiosResponse>`. <br>Exemple: `() => axios.get("https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124")`',
+			table: {
+				category: 'props',
+			},
+		},
+		fallbackFilename: {
+			control: { type: 'text' },
+			description: 'Le nom du fichier téléchargé si celui ci n\'est pas disponible dans la réponse.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		vuetifyOptions: {
+			control: { type: 'object' },
+			description: 'Options pour personnaliser les composants Vuetify utilisés en interne.',
+			table: {
+				type: {
+					summary: 'object',
+					detail: `{
+	btn: Record<string, any>,
+	icon: Record<string, any>,
+}`,
+				},
+				defaultValue: {
+					summary: 'config',
+					detail: ` {
+	btn: {
+		variant: 'outlined',
+		color: 'primary',
+		class: 'text-wrap',
+		minHeight: '36px',
+		height: 'auto',
+	},
+	icon: {
+		color: 'primary',
+		class: 'mr-3',
+	},
+}`,
+				},
+				category: 'props',
+			},
+		},
+	},
+	args: {
+		vuetifyOptions: {
+			btn: {
+				variant: 'outlined',
+				color: 'primary',
+				class: 'text-wrap',
+				minHeight: '36px',
+				height: 'auto',
+			},
+			icon: {
+				color: 'primary',
+				class: 'mr-3',
+			},
+		},
+	},
+	decorators: [() => ({ template: '<div class="pa-4"><story/></div>' })],
+} satisfies Meta<typeof DownloadBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+	},
+}
+
+export const Error: Story = {
+	name: 'Error',
+	args: {
+		filePromise: () => axios.get('https://'),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+	},
+}
+
+export const Loading: Story = {
+	name: 'Loading',
+	args: {
+		filePromise: () => new Promise(() => { setTimeout(() => {}, 100000) }),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement)
+		const btn = canvas.getByRole('button')
+		userEvent.click(btn)
+	},
+}
+
+export const Dark: Story = {
+	name: 'Dark theme',
+	render: args => ({
+		components: { VThemeProvider, DownloadBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+			<VThemeProvider theme="dark" with-background class="pa-4">
+				<DownloadBtn v-bind="args">{{ args.default }}</DownloadBtn>
+			</VThemeProvider>
+		`,
+	}),
+
+	args: {
+		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+	},
+}
+
+export const Notify: Story = {
+	args: {
+		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+	},
+	name: 'Notification',
+	render: args => ({
+		components: { NotificationBar, DownloadBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+
+			const notify = (message: string, type: 'error' | 'success') => {
+				const notification = {
+					id: Date.now().toString(),
+					message,
+					type,
+					timeout: -1,
+				}
+				addNotification(notification)
+			}
+			return { args, notify }
+		},
+		template: `
+			<div>
+				<NotificationBar />
+				<div class="d-flex">
+					<DownloadBtn
+						:file-promise="args.filePromise"
+						:btn="{ color: 'primary'}"
+						@error="notify('Une error est survenue', 'error')"
+						@success="notify('Votre attestation a été téléchargée', 'success')"
+					>
+						{{ args.default }}
+					</DownloadBtn>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const Customization: Story = {
+	name: 'Customisation',
+	args: {
+		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		default: 'Télécharger',
+		onError: fn(),
+		onSuccess: fn(),
+		vuetifyOptions: {
+			btn: {
+				variant: 'plain',
+				ripple: true,
+				color: 'secondary',
+			},
+			icon: {
+				class: 'ml-2 mr-2',
+				color: 'secondary',
+			},
+		},
+	},
+}

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { downloadFile } from '@/utils/functions/downloadFile'
+	import { mdiDownload } from '@mdi/js'
+	import type { AxiosResponse } from 'axios'
+	import deepmerge from 'deepmerge'
+	import { computed, ref, useAttrs } from 'vue'
+	import { config } from './config'
+
+	type State = 'idle' | 'loading' | 'success' | 'error'
+
+	export interface FileInfo {
+		name: string
+		type: string
+	}
+
+	export interface Props {
+		filePromise: () => Promise<AxiosResponse<Blob>>
+		fallbackFilename?: string
+	}
+
+	defineOptions({
+		inheritAttrs: false,
+	})
+
+	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
+		fallbackFilename: undefined,
+	})
+	const emits = defineEmits(['error', 'success'])
+	const attrs = useAttrs()
+	const state = ref<State>('idle')
+	const options = useCustomizableOptions(config, props)
+	const btnOptions = computed(() => deepmerge(options.value.btn, attrs))
+
+	/**
+	 * Get filename and content type from headers
+	 */
+	function getFileInfo(header: Record<string, string>): FileInfo {
+		const contentType = header['content-type']
+		const contentDispositionHeader = header['content-disposition']
+		let fileName: string | undefined
+
+		fileName = contentDispositionHeader
+			?.split(';')
+			?.find((str: string) => str.includes('filename='))
+			?.split('=')?.[1]
+
+		if (!fileName) {
+			fileName = props.fallbackFilename || 'file'
+		}
+
+		return {
+			name: fileName,
+			type: contentType,
+		}
+	}
+
+	async function download(): Promise<void> {
+		state.value = 'loading'
+
+		try {
+			const { data, headers } = await props.filePromise()
+			const { name, type } = getFileInfo(headers as Record<string, string>)
+			downloadFile(data, name, type)
+		}
+		catch (error) {
+			state.value = 'error'
+			emits('error', error)
+			return
+		}
+		state.value = 'success'
+		emits('success')
+	}
+
+	defineExpose({
+		getFileInfo, download, state,
+	})
+
+</script>
+
+<template>
+	<VBtn
+		v-bind="btnOptions"
+		:loading="state === 'loading'"
+		:class="btnOptions.variant === 'outlined' ? 'outlined-style' : ''"
+		class="vd-download-btn"
+		data-testid="download-btn"
+		@click="download"
+	>
+		<slot name="icon">
+			<VIcon v-bind="options.icon">
+				{{ mdiDownload }}
+			</VIcon>
+		</slot>
+
+		<slot />
+	</VBtn>
+</template>
+
+<style lang="scss" scoped>
+.vd-download-btn :deep() {
+	.v-btn__content {
+		flex-wrap: wrap;
+	}
+	.v-icon {
+		flex: none;
+	}
+}
+
+.outlined-style {
+	border: 1px solid currentColor;
+}
+</style>

package/src/components/DownloadBtn/config.ts

@@ -0,0 +1,13 @@
+export const config = {
+	btn: {
+		variant: 'outlined',
+		color: 'primary',
+		class: 'text-wrap',
+		minHeight: '36px',
+		height: 'auto',
+	},
+	icon: {
+		color: 'primary',
+		class: 'mr-3',
+	},
+}

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

@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { DOMWrapper, mount } from '@vue/test-utils'
+
+import {
+	filePromise,
+	filePromiseError,
+} from './data/filePromise'
+import DownloadBtn from '../DownloadBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+import { downloadFile } from '@/utils/functions/downloadFile'
+
+describe('DownloadBtn', () => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let wrapper: any
+	let element: DOMWrapper<Element>
+	beforeEach(() => {
+		wrapper = mount(DownloadBtn, {
+			props: {
+				filePromise,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		vi.spyOn(wrapper.vm, 'getFileInfo')
+		vi.spyOn(wrapper.vm, 'download')
+
+		element = wrapper.find('[data-testid="download-btn"]')
+		global.URL.createObjectURL = vi.fn()
+		global.URL.revokeObjectURL = vi.fn()
+	})
+	afterEach(() => {
+		wrapper.unmount()
+		vi.restoreAllMocks()
+	})
+
+	it('renders correctly', async () => {
+		expect(DownloadBtn).toBeTruthy()
+
+		expect(element.exists()).toBe(true)
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('works correctly', async () => {
+		vi.mock('@/utils/functions/downloadFile', () => ({ downloadFile: vi.fn() }))
+
+		await element.trigger('click')
+
+		expect(downloadFile).toHaveBeenCalledTimes(1)
+	})
+
+	it('emit error event', async () => {
+		await wrapper.setProps({
+			filePromise: filePromiseError,
+		})
+
+		expect(wrapper.emitted('error')).toBeFalsy()
+		expect(wrapper.vm.state).toBe('idle')
+		await element.trigger('click')
+		expect(wrapper.vm.state).toBe('error')
+		expect(wrapper.emitted('error')).toBeTruthy()
+	})
+
+	it('with slots', async () => {
+		const slot = 'Download'
+		wrapper = mount(DownloadBtn, {
+			props: {
+				filePromise,
+			},
+			slots: {
+				default: slot,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DownloadBtn > renders correctly 1`] = `
+"<button data-v-e1153e16="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+  <!----><span class="v-btn__content" data-no-activator=""><i data-v-e1153e16="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i></span>
+  <!---->
+  <!---->
+</button>"
+`;
+
+exports[`DownloadBtn > with slots 1`] = `
+"<button data-v-e1153e16="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+  <!----><span class="v-btn__content" data-no-activator=""><i data-v-e1153e16="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i>Download</span>
+  <!---->
+  <!---->
+</button>"
+`;

package/src/components/DownloadBtn/tests/data/filePromise.ts

@@ -0,0 +1,53 @@
+import { type AxiosResponse } from 'axios'
+
+/** Returns a promise that returns a file */
+export function filePromise(): Promise<AxiosResponse<Blob>> {
+	return new Promise((resolve) => {
+		resolve({
+			data: new File(['test'], 'attestation.txt', { type: 'text/plain' }),
+			status: 200,
+			statusText: 'OK',
+			headers: {
+				'content-type': 'text/plain',
+				'content-disposition': 'attachment; filename="attestation.txt"',
+			},
+			config: {
+				headers: {
+					Accept: 'application/json, text/plain, */*',
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+				} as any,
+			},
+		})
+	})
+}
+
+export function filePromiseError(): Promise<AxiosResponse<Blob>> {
+	return new Promise((_, reject) => {
+		reject({
+			response: {
+				data: 'error',
+				status: 500,
+				statusText: 'Internal Server Error',
+				headers: {},
+				config: {},
+			},
+		})
+	})
+}
+
+export function filePromiseNoHeaders(): Promise<AxiosResponse<Blob>> {
+	return new Promise((resolve) => {
+		resolve({
+			data: new File(['test'], 'attestation.txt', { type: 'text/plain' }),
+			status: 200,
+			statusText: 'OK',
+			headers: {},
+			config: {
+				headers: {
+					Accept: 'application/json, text/plain, */*',
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+				} as any,
+			},
+		})
+	})
+}

package/src/components/FranceConnectBtn/FranceConnectBtn.mdx

@@ -0,0 +1,34 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as FranceConnectBtnStories from './FranceConnectBtn.stories';
+
+<Meta of={FranceConnectBtnStories} />
+
+# FranceConnectBtn
+
+Le composant `FranceConnectBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de se connecter à FranceConnect.
+
+<Canvas of={FranceConnectBtnStories.Default}  />
+
+## API
+
+<Controls of={FranceConnectBtnStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import FranceConnectBtn from '@/components/FranceConnectBtn/FranceConnectBtn.vue'
+</script>
+
+<template>
+	<FranceConnectBtn href="/" />
+
+	<br>
+
+	<FranceConnectBtn
+		href="/"
+		is-connect-plus
+	/>
+</template>
+`} />

package/src/components/FranceConnectBtn/FranceConnectBtn.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FranceConnectBtn from './FranceConnectBtn.vue'
+
+const meta = {
+	title: 'Components/FranceConnectBtn',
+	component: FranceConnectBtn,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof FranceConnectBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		href: 'https://app.franceconnect.gouv.fr/',
+		isConnectPlus: false,
+		dark: false,
+	},
+	render: (args) => {
+		return {
+			components: { FranceConnectBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<FranceConnectBtn
+						:href="args.href"
+						:is-connect-plus="args.isConnectPlus"
+						:dark="args.dark"
+					/>
+              	</div>
+			`,
+		}
+	},
+}
+
+export const FranceConnectPlus: Story = {
+	args: {
+		href: 'https://app.franceconnect.gouv.fr/',
+		isConnectPlus: true,
+		dark: false,
+	},
+	render: (args) => {
+		return {
+			components: { FranceConnectBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<FranceConnectBtn
+						:href="args.href"
+						:is-connect-plus="args.isConnectPlus"
+						:dark="args.dark"
+					/>
+              	</div>
+			`,
+		}
+	},
+}
+
+export const DarkTheme: Story = {
+	args: {
+		href: 'https://app.franceconnect.gouv.fr/',
+		isConnectPlus: true,
+		dark: true,
+	},
+	render: (args) => {
+		return {
+			components: { FranceConnectBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+                <VThemeProvider
+                    theme="dark"
+                    with-background
+                    class="pa-4"
+                >
+                    <FranceConnectBtn
+						:href="args.href"
+						:is-connect-plus="args.isConnectPlus"
+						:dark="args.dark"
+					/>
+                </VThemeProvider>`,
+		}
+	},
+}