@cnamts/synapse 0.0.0-alpha.0

package/src/components/BackToTopBtn/BackToTopBtn.mdx

@@ -0,0 +1,52 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import * as BackToTopBtnStories from './BackToTopBtn.stories';
+
+<Meta of={BackToTopBtnStories} />
+
+
+# BackToTopBtn
+
+Le composant `BackToTopBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.
+
+Le boutton apparaît lorsque l'utilisateur scroll en dessous d'une certaine hauteur de la page. Cette hauteur est définie par la prop `threshold`, elle est de 120px par defaut.
+
+<Canvas of={BackToTopBtnStories.Default}  />
+
+## API
+
+<Controls of={BackToTopBtnStories.Default} />
+
+## Context d'utilisation
+
+Ce composant peut être utilisé à la racine de la page ou bien dans un composant avant son propre context de scroll. Dans ce dernier cas, il conviens de passer la prop `target` un id unique de l'élément scrollable.
+
+### Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+import BackToTopBtn from '@/components/BackToTopBtn/BackToTopBtn.vue'
+import { VCard, VSheet } from 'vuetify/components'
+</script>
+
+<template>
+  <VCard
+      id="target"
+      width="100%"
+      max-height="200px"
+      class="overflow-y-auto"
+      style="scroll-behavior: smooth"
+  >
+    <VSheet
+        height="600px"
+        class="d-flex flex-column align-center"
+    >
+      <p class="pa-2">
+        Haut de la section.
+      </p>
+    </VSheet>
+    <BackToTopBtn target="target">
+      Retour en haut de la page
+    </BackToTopBtn>
+  </VCard>
+</template>
+`} />

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import BackToTopBtn from './BackToTopBtn.vue'
+import { VCard, VSheet } from 'vuetify/components'
+
+const meta = {
+	title: 'Components/BackToTopBtn',
+	component: BackToTopBtn,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		threshold: {
+			control: { type: 'range', max: 2000 },
+		},
+		nudgeRight: {
+			control: { type: 'range' },
+			default: 16,
+		},
+		nudgeBottom: {
+			control: { type: 'range' },
+			default: 16,
+		},
+		target: {
+			control: { type: 'text' },
+		},
+		default: {
+			control: { type: 'text' },
+		},
+		icon: {
+			control: { type: 'text' },
+		},
+	},
+	args: {
+		threshold: 120,
+		nudgeRight: 16,
+		nudgeBottom: 16,
+		target: 'target',
+		default: 'Retour en haut',
+	},
+} satisfies Meta<typeof BackToTopBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		target: 'target',
+		vuetifyOptions: {
+			btn: {
+				variant: 'outlined',
+				color: 'primary',
+				class: 'text-wrap px-0 px-md-4',
+			},
+			icon: {
+				color: 'primary',
+				size: 'small',
+				class: 'ml-0 ml-md-1',
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: {
+				BackToTopBtn,
+				VCard,
+				VSheet,
+			},
+			setup() {
+				return { args }
+			},
+			template: `
+				<VCard
+					id="target"
+					width="100%"
+					max-height="200px"
+					class="overflow-y-auto"
+					style="scroll-behavior: smooth"
+				>
+					<VSheet
+						height="600px"
+						class="d-flex flex-column align-center"
+					>
+						<p class="pa-2">
+							Haut de la section.
+						</p>
+					</VSheet>
+					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
+						{{args.default}}
+					</BackToTopBtn>
+				</VCard>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		await new Promise((resolve: (v: unknown) => void) => setTimeout(resolve, 1000))
+		const container = canvasElement.querySelector('#target')
+		container?.scrollTo(0, 1000)
+	},
+}
+
+export const Customization: Story = {
+	args: {
+		target: 'btn-customization',
+		vuetifyOptions: {
+			btn: {
+				variant: 'elevated',
+				color: 'primary',
+				rounded: true,
+			},
+			icon: {
+				color: 'white',
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: {
+				BackToTopBtn,
+			},
+			setup() {
+				return { args }
+			},
+			template: `
+				<VCard
+					id="btn-customization"
+					width="100%"
+					max-height="200px"
+					class="overflow-y-auto"
+					style="scroll-behavior: smooth"
+				>
+					<VSheet
+						height="600px"
+						class="d-flex flex-column align-center"
+					>
+						<p class="pa-2">
+							Haut de la section.
+						</p>
+					</VSheet>
+					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
+						{{args.default}}
+					</BackToTopBtn>
+				</VCard>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		await new Promise((resolve: (v: unknown) => void) => setTimeout(resolve, 1000))
+		const container = canvasElement.querySelector('#btn-customization')
+		container?.scrollTo(0, 1000)
+	},
+}
+
+export const PillBtn: Story = {
+	args: {
+		target: 'pill-btn',
+		vuetifyOptions: {
+			btn: {
+				variant: 'outlined',
+				color: 'medium-emphasis',
+				minWidth: 92,
+				rounded: true,
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: {
+				BackToTopBtn,
+			},
+			setup() {
+				return { args }
+			},
+			template: `
+				<v-btn
+					color="primary"
+					variant="outlined"
+					size="small"
+					rounded
+					@click="() => { window.location.href = '' }"
+				>
+					VuetifyOptions
+				</v-btn>
+			`,
+		}
+	},
+}

package/src/components/BackToTopBtn/BackToTopBtn.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+	import { mdiArrowUp } from '@mdi/js'
+	import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { convertToUnit } from '@/utils/convertToUnit'
+	import { useDisplay } from 'vuetify'
+
+	import { locales } from './locales'
+	import { config } from './config'
+
+	import { type VBtn } from 'vuetify/components'
+
+	type VBtnProps = InstanceType<typeof VBtn>['$props']
+
+	export interface Props {
+		threshold?: number
+		nudgeRight?: string | number
+		nudgeBottom?: string | number
+		target?: string
+	}
+
+	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
+		threshold: 120,
+		nudgeRight: '16px',
+		nudgeBottom: '16px',
+		target: undefined,
+	})
+
+	const options = useCustomizableOptions(config, props)
+
+	const showBtn = ref(false)
+	const isMobile = ref(false)
+
+	const targetSelector = computed(() => {
+		return props.target ? `#${props.target}` : null
+	})
+
+	const btnStyle = computed(() => {
+		const right = convertToUnit(props.nudgeRight) || '0'
+		const bottom = convertToUnit(props.nudgeBottom) || '0'
+
+		return {
+			bottom,
+			marginRight: right,
+		}
+	})
+
+	const minWidth = computed(() => (isMobile.value ? '36px' : undefined))
+
+	const labelClasses = computed(() => ({
+		'd-sr-only': isMobile.value,
+	}))
+
+	// Watch for changes in display
+	const display = useDisplay()
+	watch(
+		() => display.smAndDown.value,
+		(newVal) => {
+			isMobile.value = newVal
+		},
+		{ immediate: true },
+	)
+
+	// Methods
+	const onScroll = (e: Event) => {
+		const target = e.currentTarget as HTMLElement | Window
+
+		if (target instanceof Window) {
+			showBtn.value = window.scrollY > props.threshold
+		}
+		else {
+			showBtn.value = (target as HTMLElement).scrollTop > props.threshold
+		}
+	}
+
+	const scrollToTop = () => {
+		if (!props.target) {
+			window.scrollTo(0, 0)
+		}
+		else {
+			const target = document.getElementById(props.target) || window
+			target.scrollTo(0, 0)
+		}
+	}
+
+	// Handling scroll events
+	const target = computed(() => props.target ? document.getElementById(props.target) : window)
+	onMounted(() => {
+		target.value?.addEventListener('scroll', onScroll)
+	})
+	onUnmounted(() => {
+		target.value?.removeEventListener('scroll', onScroll)
+	})
+
+</script>
+
+<template>
+	<VFadeTransition>
+		<VBtn
+			v-show="showBtn"
+			v-scroll:[targetSelector]="onScroll"
+			v-bind="({
+				...options.btn,
+				...$attrs,
+			} as VBtnProps)"
+			:style="btnStyle"
+			:min-width="minWidth"
+			class="vd-back-to-top-btn"
+			@click="scrollToTop"
+		>
+			<span :class="labelClasses">
+				<slot>
+					{{ locales.label }}
+				</slot>
+			</span>
+
+			<slot name="icon">
+				<VIcon v-bind="options.icon">
+					{{ mdiArrowUp }}
+				</VIcon>
+			</slot>
+		</VBtn>
+	</VFadeTransition>
+</template>
+
+<style lang="scss" scoped>
+.vd-back-to-top-btn {
+	position: sticky;
+	z-index: 999;
+	opacity: 1;
+	float: right;
+}
+.v-btn--variant-outlined {
+	background: white;
+}
+</style>

package/src/components/BackToTopBtn/config.ts

@@ -0,0 +1,12 @@
+export const config = {
+	btn: {
+		variant: 'outlined',
+		color: 'primary',
+		class: 'text-wrap px-0 px-md-4',
+	},
+	icon: {
+		color: 'primary',
+		size: 'small',
+		class: 'ml-0 ml-md-1',
+	},
+}

package/src/components/BackToTopBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	label: 'Retour en haut',
+}

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

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import BackToTopBtn from '../BackToTopBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('BackToTopBtn', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('renders correctly', () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly when nudgeBottom and nudgeRight are set to invalid values', () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				nudgeBottom: '',
+				nudgeRight: '',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('shows the button when the user scrolls down', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const buttonElement = wrapper.find('.vd-back-to-top-btn')
+		expect(buttonElement.isVisible()).toBeFalsy()
+
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(500)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+
+		expect(buttonElement.isVisible()).toBeTruthy()
+	})
+
+	it('shows the button when the user scrolls down and the target is a custom element', async () => {
+		document.body.innerHTML = '<div id="test"></div>'
+		const divContent = document.getElementById('test') as HTMLDivElement
+
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: divContent,
+			props: {
+				target: 'test',
+			},
+		})
+
+		const buttonElement = wrapper.find('.vd-back-to-top-btn')
+		expect(buttonElement.isVisible()).toBeFalsy()
+
+		vi.spyOn(divContent, 'scrollTop', 'get').mockReturnValue(500)
+		divContent.dispatchEvent(new CustomEvent('scroll'))
+
+		await wrapper.vm.$nextTick()
+		expect(buttonElement.isVisible()).toBeTruthy()
+	})
+
+	it('do not show the button when the user scrolls up', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const buttonElement = wrapper.find('.vd-back-to-top-btn')
+		expect(buttonElement.isVisible()).toBeFalsy()
+
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(500)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+		expect(buttonElement.isVisible()).toBeTruthy()
+
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(100)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+
+		expect(buttonElement.isVisible()).toBeFalsy()
+	})
+
+	it('scrolls to the top when the button is clicked', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const scrollToSpy = vi
+			.spyOn(window, 'scrollTo')
+			.mockImplementation(() => {})
+
+		await wrapper.find('.v-btn').trigger('click')
+
+		expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+	})
+
+	it('scrolls to the top when the button is clicked and the target is a custom element', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				target: 'test',
+			},
+		})
+
+		const scrollToSpy = vi.fn()
+
+		vi.spyOn(document, 'getElementById').mockReturnValue({
+			scrollTo: scrollToSpy,
+		} as unknown as HTMLElement)
+
+		await wrapper.find('.v-btn').trigger('click')
+
+		expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+	})
+
+	it('scrolls to the top when the button is clicked and the target is a custom element that does not exist', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				target: 'test',
+			},
+		})
+
+		const scrollToSpy = vi
+			.spyOn(window, 'scrollTo')
+			.mockImplementation(() => {})
+
+		vi.spyOn(document, 'getElementById').mockReturnValue(null)
+
+		await wrapper.find('.v-btn').trigger('click')
+
+		expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+	})
+
+	it('remove the scroll event listener when the component is destroyed', async () => {
+		const wrapper = mount(BackToTopBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener')
+
+		wrapper.unmount()
+
+		expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function))
+	})
+})

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

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BackToTopBtn > renders correctly 1`] = `
+"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 16px; margin-right: 16px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button></transition-stub>"
+`;
+
+exports[`BackToTopBtn > renders correctly when nudgeBottom and nudgeRight are set to invalid values 1`] = `
+"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 0px; margin-right: 0px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button></transition-stub>"
+`;

package/src/components/Beta/beta.mdx

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

package/src/components/CopyBtn/CopyBtn.mdx

@@ -0,0 +1,38 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as CopyBtnStories from './CopyBtn.stories';
+
+<Meta of={CopyBtnStories} />
+
+# CopyBtn
+
+Le composant `CopyBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de copier du texte.
+
+<Canvas of={CopyBtnStories.Default}  />
+
+# API
+
+<Controls of={CopyBtnStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+import CopyBtn from '@/components/CopyBtn/CopyBtn.vue'
+</script>
+
+<template>
+  <main>
+    <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"
+      />
+    </div>
+  </main>
+</template>
+`} />