@cnamts/synapse 0.0.0-alpha.0

package/src/components/CopyBtn/CopyBtn.stories.ts

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CopyBtn from './CopyBtn.vue'
+import { VIcon } from 'vuetify/components'
+import { mdiContentDuplicate } from '@mdi/js'
+
+const duplicateIcon = mdiContentDuplicate
+
+const meta = {
+	title: 'Components/CopyBtn',
+	component: CopyBtn,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['copy'] },
+	},
+	argTypes: {
+		ariaLabel: {
+			control: { type: 'text' },
+			default: 'copy-btn',
+		},
+		ariaOwns: {
+			control: { type: 'text' },
+			default: 'copy-btn',
+		},
+		textToCopy: {
+			control: { type: 'text' },
+			default: 'test',
+		},
+		hideTooltip: {
+			control: { type: 'boolean' },
+			default: false,
+		},
+		tooltipDuration: {
+			control: { type: 'number' },
+			default: 2000,
+		},
+		vuetifyOptions: {
+			control: { type: 'object' },
+			default: () => ({
+				menu: {
+					location: 'end center',
+					offset: 16,
+					zIndex: 8,
+					contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+				},
+				btn: {
+					icon: true,
+					variant: 'text',
+					density: 'comfortable',
+				},
+				icon: {
+					color: 'grey-darken-20',
+				},
+			}),
+		},
+	},
+} satisfies Meta<typeof CopyBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		ariaLabel: 'Copier le numéro de patient',
+		ariaOwns: 'copy-btn-1',
+		textToCopy: '1970756541',
+		hideTooltip: false,
+		tooltipDuration: 2000,
+		vuetifyOptions: {
+			menu: {
+				location: 'end center',
+				offset: 16,
+				zIndex: 8,
+				contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+			},
+			btn: {
+				icon: true,
+				variant: 'text',
+				density: 'comfortable',
+			},
+			icon: {
+				color: 'grey-darken-20',
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: { CopyBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<p class="mb-0 mr-1">
+					  Patient n°<b>1970756541</b>
+					</p>
+	
+					<CopyBtn
+						label="Copier le numéro de patient"
+						text-to-copy="1970756541"
+						:hide-tooltip="args.hideTooltip"
+						:vuetify-options="args.vuetifyOptions"
+					/>
+              	</div>
+			`,
+		}
+	},
+}
+
+export const NoTooltip: Story = {
+	args: {
+		ariaLabel: 'Copier le numéro de patient',
+		textToCopy: '1970756541',
+		hideTooltip: true,
+		tooltipDuration: 2000,
+	},
+	render: (args) => {
+		return {
+			components: { CopyBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<p class="mb-0 mr-1">
+					  Patient n°<b>1970756541</b>
+					</p>
+	
+					<CopyBtn
+						label="Copier le numéro de patient"
+						text-to-copy="1970756541"
+						:hide-tooltip="args.hideTooltip"
+						
+					/>
+              	</div>
+			`,
+		}
+	},
+}
+
+export const SlotIcon: Story = {
+	args: {
+		ariaLabel: 'Copier le numéro de patient',
+		textToCopy: '1970756541',
+		hideTooltip: false,
+		tooltipDuration: 2000,
+		icon: duplicateIcon,
+	},
+	render: (args) => {
+		return {
+			components: { CopyBtn, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<p class="mb-0 mr-1">
+					  Patient n°<b>1970756541</b>
+					</p>
+	
+					<CopyBtn
+						label="Copier le numéro de patient"
+						text-to-copy="1970756541"
+						:hide-tooltip="args.hideTooltip"
+					>
+						<template #icon>
+							<VIcon :icon="args.icon" />
+						</template>
+					</CopyBtn>
+              	</div>
+			`,
+		}
+	},
+}
+
+export const SlotTooltip: Story = {
+	args: {
+		ariaLabel: 'Copier le numéro de patient',
+		textToCopy: '1970756541',
+		hideTooltip: false,
+		tooltipDuration: 2000,
+		tooltip: 'Texte personalisé',
+	},
+	render: (args) => {
+		return {
+			components: { CopyBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<p class="mb-0 mr-1">
+					  Patient n°<b>1970756541</b>
+					</p>
+	
+					<CopyBtn
+						label="Copier le numéro de patient"
+						text-to-copy="1970756541"
+						:hide-tooltip="args.hideTooltip"
+					>
+						<template #tooltip>
+							{{ args.tooltip }}
+						</template>
+					</CopyBtn>
+              	</div>
+			`,
+		}
+	},
+}

package/src/components/CopyBtn/CopyBtn.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { VMenu, VIcon, VBtn } from 'vuetify/components'
+	import { mdiContentCopy } from '@mdi/js'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { copyToClipboard } from '@/utils/functions/copyToClipboard'
+
+	import { locales } from './locales'
+	import { config } from './config'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		ariaLabel?: string
+		ariaOwns?: string
+		textToCopy: (() => string) | string
+		hideTooltip?: boolean
+		tooltipDuration?: number
+	}>(), {
+		ariaLabel: 'copy-btn',
+		ariaOwns: 'copy-btn',
+		textToCopy: '',
+		hideTooltip: false,
+		tooltipDuration: 2500,
+	})
+
+	const options = useCustomizableOptions(config, props)
+
+	const tooltip = ref(false)
+	const copyIcon = mdiContentCopy
+
+	function copy(): void {
+		const contentToCopy
+			= typeof props.textToCopy === 'function'
+				? props.textToCopy()
+				: props.textToCopy
+
+		copyToClipboard(contentToCopy)
+
+		if (props.hideTooltip) {
+			return
+		}
+
+		setTimeout(() => {
+			tooltip.value = false
+		}, props.tooltipDuration)
+	}
+
+	defineExpose({
+		copy,
+		tooltip,
+	})
+</script>
+
+<template>
+	<div
+		:id="props.ariaOwns"
+		class="vd-copy-btn"
+	>
+		<VMenu
+			v-bind="options.menu"
+			:id="props.ariaOwns"
+			v-model="tooltip"
+			:disabled="props.hideTooltip"
+			transition="fade-transition"
+		>
+			<template #activator="{ props: menuProps }">
+				<VBtn
+					v-bind="{ ...menuProps, ...options.btn }"
+					:aria-label="props.ariaLabel"
+					:aria-owns="props.ariaOwns"
+					:data-test-id="props.ariaOwns"
+					@click="copy"
+				>
+					<slot name="icon">
+						<VIcon v-bind="options.icon">
+							{{ copyIcon }}
+						</VIcon>
+					</slot>
+				</VBtn>
+			</template>
+
+			<slot name="tooltip">
+				{{ locales.tooltip }}
+			</slot>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss">
+@use '@/assets/tokens.scss';
+
+.vd-copy-tooltip-menu {
+  padding: 6px 16px;
+  box-shadow: none;
+  margin-top: 2px;
+  background: rgba(97, 97, 97, 0.9);
+  color: white;
+}
+
+.v-btn--icon .v-icon {
+  color: tokens.$grey-lighten-20;
+}
+</style>

package/src/components/CopyBtn/config.ts

@@ -0,0 +1,17 @@
+import type { VariantType, DensityType, locationType } from '@/types/vuetifyTypes'
+export const config = {
+	menu: {
+		location: 'end center' as locationType,
+		offset: 16,
+		zIndex: 8,
+		contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+	},
+	btn: {
+		icon: true,
+		variant: 'text' as VariantType,
+		density: 'comfortable' as DensityType,
+	},
+	icon: {
+		color: 'grey-darken-20',
+	},
+}

package/src/components/CopyBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	tooltip: 'Texte copié !',
+}

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

@@ -0,0 +1,99 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import CopyBtn from '../CopyBtn.vue'
+
+describe('CopyBtn', () => {
+	const copy = vi.fn()
+
+	beforeEach(() => {
+		const navigator = {
+			clipboard: {
+				writeText: copy,
+			},
+		} as unknown as Navigator
+
+		vi.spyOn(window, 'navigator', 'get').mockReturnValue(navigator)
+
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('renders correctly', () => {
+		const wrapper = shallowMount(CopyBtn, {
+			propsData: {
+				label: 'test',
+				textToCopy: 'test',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('copies the text to the clipboard', async () => {
+		const wrapper = mount(CopyBtn, {
+			propsData: {
+				label: 'test',
+				textToCopy: 'test',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('[data-test-id="copy-btn"]').trigger('click')
+
+		expect(copy).toHaveBeenCalledWith('test')
+
+		await wrapper.setProps({
+			textToCopy: () => 'function test',
+		})
+
+		await wrapper.find('[data-test-id="copy-btn"]').trigger('click')
+
+		expect(copy).toHaveBeenCalledWith('function test')
+	})
+
+	it('shows a tooltip when the text is copied', async () => {
+		const wrapper = mount(CopyBtn, {
+			propsData: {
+				label: 'test',
+				textToCopy: 'test',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('[data-test-id="copy-btn"]').trigger('click')
+
+		expect(wrapper.vm.tooltip).toBeTruthy()
+
+		vi.runAllTimers()
+		expect(wrapper.vm.tooltip).toBeFalsy()
+	})
+
+	it('does not show a tooltip when the text is copied but hide-tooltip is true', async () => {
+		const wrapper = mount(CopyBtn, {
+			propsData: {
+				label: 'test',
+				textToCopy: 'test',
+				hideTooltip: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('[data-test-id="copy-btn"]').trigger('click')
+
+		expect(wrapper.vm.tooltip).toBeFalsy()
+	})
+})

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CopyBtn > renders correctly 1`] = `
+"<div id="copy-btn" class="vd-copy-btn" label="test">
+  <v-menu-stub offset="16" contentclass="vd-copy-tooltip-menu text-white text-body-2 ml-2" id="copy-btn" submenu="false" attach="false" closeonback="true" contained="false" disabled="false" noclickanimation="false" modelvalue="false" persistent="false" scrim="false" zindex="8" activatorprops="[object Object]" openonhover="false" closeoncontentclick="true" closedelay="250" opendelay="300" eager="false" locationstrategy="connected" location="end center" origin="auto" scrollstrategy="reposition" transition="fade-transition"></v-menu-stub>
+</div>"
+`;

package/src/components/Deprecated/deprecated.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Deprecated" />
+
+Folder with Deprecated components

package/src/components/DownloadBtn/DownloadBtn.mdx

@@ -0,0 +1,94 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as DownloadBtnStories from './DownloadBtn.stories';
+
+<Meta of={DownloadBtnStories} />
+
+
+# DownloadBtn
+
+L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télécharger un document provenant d'une API.
+
+<Canvas of={DownloadBtnStories.Default} />
+
+# API
+
+<Controls of={DownloadBtnStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import DownloadBtn from '@/components/DownloadBtn/DownloadBtn.vue'
+	import axios from 'axios'
+
+	function download() {
+		return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+	}
+</script>
+
+<template>
+	<div>
+		<DownloadBtn
+			:file-promise="download"
+			:btn="{ color: 'primary'}"
+			@error="console.error"
+			@success="console.info"
+		>
+			Download
+		</DownloadBtn>
+	</div>
+</template>
+`} />
+
+# Notifier l'utilisateur
+
+Vous pouvez utiliser les événements `success` et `error` pour notifier l'utilisateur du succès ou de l'échec du téléchargement.
+Ici avec le composant `NotificationBar` du design system.
+
+<Canvas of={DownloadBtnStories.Notify} sourceState="none"/>
+
+Exemple :
+
+<Source dark code={`
+<script setup lang="ts">
+	import DownloadBtn from '@/components/DownloadBtn/DownloadBtn.vue'
+	import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
+	import axios from 'axios'
+	import { useNotificationService } from '@/services/NotificationService'
+	import type { Notification } from '@/components/NotificationBar/types'
+
+	function download() {
+		return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+	}
+
+	const { addNotification } = useNotificationService()
+
+	const notify = (message: string, type: Notification['type']) => {
+		const notification: Notification = {
+			id: Date.now().toString(),
+			message,
+			type,
+			timeout: -1,
+		}
+		addNotification(notification)
+	}
+
+</script>
+
+<template>
+	<VApp>
+		<NotificationBar />
+		<div class="d-flex">
+			<DownloadBtn
+				:file-promise="download"
+				:btn="{ color: 'primary'}"
+				@error="console.error"
+				@success="notify('Votre attestation a été téléchargée', 'success')"
+			>
+				Download
+			</DownloadBtn>
+		</div>
+	</VApp>
+</template>
+`} />