@cnamts/synapse 0.0.0-alpha.0

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

@@ -0,0 +1,332 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { vi } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import NotificationBar from '../NotificationBar.vue'
+import { type Notification } from '@/components/NotificationBar/types'
+import { useNotificationService } from '@/services/NotificationService'
+import { nextTick, type Ref, ref } from 'vue'
+import { vuetify } from '@tests/unit/setup'
+
+vi.mock('@/services/NotificationService')
+describe('NotificationBar.vue', () => {
+	interface NotificationServiceMock {
+		notificationQueue: Ref<Notification[]>
+		addNotification: (notification: Notification) => void
+		removeNotification: (id: string) => void
+	}
+
+	let notificationServiceMock: NotificationServiceMock
+	beforeEach(() => {
+		notificationServiceMock = {
+			notificationQueue: ref([]),
+			addNotification: vi.fn(),
+			removeNotification: vi.fn(),
+		};
+		// @ts-expect-error on vi.Mock
+		(useNotificationService as vi.Mock).mockReturnValue(notificationServiceMock)
+	})
+
+	it('should render notification bar', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = shallowMount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('should display the correct color based on notification type', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'success',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.vm.color).toBe('success')
+	})
+
+	it('should close notification when handleClearNotification is called', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+		wrapper.vm.handleClearNotification()
+
+		await nextTick()
+		expect(wrapper.vm.isNotificationVisible).toBe(false)
+		expect(notificationServiceMock.removeNotification).toHaveBeenCalledWith(notification.id)
+	})
+
+	it('should show the next notification in the queue', async () => {
+		const notification1: Notification = {
+			id: '1',
+			message: 'Test message 1',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const notification2: Notification = {
+			id: '2',
+			message: 'Test message 2',
+			type: 'success',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification1, notification2]
+
+		const wrapper = mount(NotificationBar, {
+			props: { notification: notification1 },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		wrapper.vm.showNextNotification()
+
+		await nextTick()
+		expect(wrapper.vm.currentNotification).toEqual(notification1)
+		expect(wrapper.vm.isNotificationVisible).toBe(true)
+	})
+
+	it('should show notification based on screen size', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.vm.isMobileVersion).toBe(false)
+		expect(wrapper.vm.isVertical).toBe(false)
+	})
+
+	it('should compute hasActionSlot correctly', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				action: '<div>Action Slot</div>',
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.vm.hasActionSlot).toBe(true)
+	})
+
+	it('should compute isMobileVersion correctly', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.vm.isMobileVersion).toBe(false)
+	})
+
+	it('should compute hasLongContent correctly', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message'.repeat(10),
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			props: { notification },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+
+		await nextTick()
+		expect(wrapper.vm.hasLongContent).toBe(true)
+	})
+
+	it('should clear queue', () => {
+		const isNotificationVisible = ref(true)
+		const emit = vi.fn()
+		const removeNotification = vi.fn()
+		const currentNotification = ref({ id: 1 })
+
+		const clearQueue = () => {
+			isNotificationVisible.value = false
+			emit('clear-notification')
+			removeNotification(currentNotification.value.id)
+		}
+		clearQueue()
+
+		expect(isNotificationVisible.value).toBe(false)
+		expect(emit).toHaveBeenCalledWith('clear-notification')
+		expect(removeNotification).toHaveBeenCalledWith(1)
+	})
+
+	it('should reset queue', () => {
+		const notificationQueue = ref([{ id: 1 }, { id: 2 }])
+		const emit = vi.fn()
+		const removeNotification = vi.fn()
+		const currentNotification = ref({ id: 1 })
+
+		const resetQueue = () => {
+			notificationQueue.value = []
+			emit('clear-notification')
+			removeNotification(currentNotification.value.id)
+		}
+		resetQueue()
+
+		expect(notificationQueue.value).toEqual([])
+	})
+
+	it('should call clearQueue when resetQueue is called', () => {
+		const isNotificationVisible = ref(true)
+		const emit = vi.fn()
+		const removeNotification = vi.fn()
+		const currentNotification = ref({ id: 1 })
+
+		const clearQueue = () => {
+			isNotificationVisible.value = false
+			emit('clear-notification')
+			removeNotification(currentNotification.value.id)
+		}
+
+		const resetQueue = () => {
+			clearQueue()
+		}
+
+		resetQueue()
+
+		expect(isNotificationVisible.value).toBe(false)
+		expect(emit).toHaveBeenCalledWith('clear-notification')
+		expect(removeNotification).toHaveBeenCalledWith(1)
+	})
+
+	it('should reset all queue on resetQueue', () => {
+		const notificationQueue = ref([{ id: 1 }, { id: 2 }])
+		const emit = vi.fn()
+		const removeNotification = vi.fn()
+		const currentNotification = ref({ id: 1 })
+
+		const clearQueue = () => {
+			notificationQueue.value = []
+			emit('clear-notification')
+			removeNotification(currentNotification.value.id)
+		}
+
+		const resetQueue = () => {
+			clearQueue()
+		}
+
+		resetQueue()
+
+		expect(notificationQueue.value).toEqual([])
+	})
+
+	it('should handle empty notification queue', async () => {
+		notificationServiceMock.notificationQueue.value = []
+
+		const wrapper = mount(NotificationBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		wrapper.vm.showNextNotification()
+
+		await nextTick()
+		expect(wrapper.vm.isNotificationVisible).toBe(false)
+	})
+
+	it('should handle clearQueue when no notification is visible', () => {
+		const isNotificationVisible = ref(false)
+		const emit = vi.fn()
+		const removeNotification = vi.fn()
+		const currentNotification = ref({ id: 1 })
+
+		const clearQueue = () => {
+			isNotificationVisible.value = false
+			emit('clear-notification')
+			removeNotification(currentNotification.value.id)
+		}
+		clearQueue()
+
+		expect(isNotificationVisible.value).toBe(false)
+		expect(emit).toHaveBeenCalledWith('clear-notification')
+		expect(removeNotification).toHaveBeenCalledWith(1)
+	})
+
+	it('should handle empty notification queue correctly', async () => {
+		notificationServiceMock.notificationQueue.value = []
+
+		const wrapper = mount(NotificationBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.vm.processNotificationQueue()
+
+		expect(wrapper.vm.isNotificationVisible).toBe(false)
+		expect(notificationServiceMock.removeNotification).not.toHaveBeenCalled()
+	})
+})

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NotificationBar.vue > should render notification bar 1`] = `
+"<div data-v-867cdd3c="" notification="[object Object]">
+  <v-snackbar-stub data-v-867cdd3c="" color="info" width="960px" class="" multiline="false" timer="false" timeout="-1" vertical="false" location="top" rounded="4" tile="false" variant="elevated" absolute="false" attach="false" closeonback="true" contained="false" disabled="false" modelvalue="true" zindex="2000" activatorprops="[object Object]" openonhover="false" closeoncontentclick="false" eager="false" locationstrategy="static" origin="auto" transition="v-snackbar-transition" role="status"></v-snackbar-stub>
+</div>"
+`;

package/src/components/NotificationBar/types.ts

@@ -0,0 +1,7 @@
+export interface Notification {
+	id: string
+	message: string
+	type: 'info' | 'success' | 'warning' | 'error'
+	timeout?: number
+	icon?: string | null
+}

package/src/components/PageContainer/PageContainer.mdx

@@ -0,0 +1,29 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as PageContainerStories from './PageContainer.stories';
+
+<Meta of={PageContainerStories} />
+
+# PageContainer
+
+Le composant `PageContainer` est un conteneur transparent utilisé pour afficher une page.
+
+<Canvas of={PageContainerStories.Default}  />
+
+# API
+
+<Controls of={PageContainerStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+import PageContainer from '@/components/PageContainer/PageContainer.vue'
+</script>
+
+<template>
+    <PageContainer color="primary">
+      Contenu de la page
+    </PageContainer>
+</template>
+`} />

package/src/components/PageContainer/PageContainer.stories.ts

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import PageContainer from './PageContainer.vue'
+import { VCard } from 'vuetify/components'
+
+const meta = {
+	title: 'Components/PageContainer',
+	component: PageContainer,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['spacingClass', 'containerSize'] },
+	},
+	argTypes: {
+		size: {
+			options: ['xl', 'l', 'm', 's'],
+			control: { type: 'select' },
+			default: 'xl',
+		},
+		spacing: {
+			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			control: { type: 'select' },
+			default: undefined,
+		},
+		color: {
+			options: ['transparent', 'primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning'],
+			control: { type: 'select' },
+			default: 'transparent',
+		},
+	},
+} as Meta<typeof PageContainer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		default: 'Contenu de la page',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer },
+			setup() {
+				return { args }
+			},
+			template: `
+                <PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
+					{{ args.default }}
+                </PageContainer>
+            `,
+		}
+	},
+}
+
+export const Size: Story = {
+	args: {
+		default: 'Contenu de la page',
+		size: 's',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer },
+			setup() {
+				return { args }
+			},
+			template: `
+				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
+					{{ args.default }}
+				</PageContainer>
+			`,
+		}
+	},
+}
+
+export const Color: Story = {
+	args: {
+		default: 'Contenu de la page',
+		color: 'primary',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer },
+			setup() {
+				return { args }
+			},
+			template: `
+				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
+					<div class="pa-8">
+						{{ args.default }}
+					</div>
+				</PageContainer>
+			`,
+		}
+	},
+}
+
+export const Card: Story = {
+	args: {
+		default: 'Contenu de la page',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer, VCard },
+			setup() {
+				return { args }
+			},
+			template: `
+				<PageContainer :size="args.size" :spacing="args.spacing" :color="args.color">
+					<VCard class="pa-8">
+						{{ args.default }}
+					</VCard>
+				</PageContainer>
+			`,
+		}
+	},
+}

package/src/components/PageContainer/PageContainer.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VSheet } from 'vuetify/components'
+	import { useDisplay } from 'vuetify'
+
+	const props = withDefaults(defineProps<{
+		size?: 'xl' | 'l' | 'm' | 's'
+		spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		color?: string
+	}>(), {
+		size: 'xl',
+		spacing: undefined,
+		color: 'transparent',
+	})
+
+	const display = useDisplay()
+
+	const spacingMapping: Record<string, string> = {
+		xs: 'px-0',
+		sm: 'px-4',
+		md: 'px-8',
+		lg: 'px-8',
+		xl: 'px-8',
+	}
+
+	const spacingX = spacingMapping[display.name.value]
+
+	const spacingClass = computed(() => {
+		if (props.spacing) {
+			return `py-10 ${spacingMapping[props.spacing]}`
+		}
+
+		return `py-10 ${spacingX}`
+	})
+
+	const sizeMapping: Record<string, number> = {
+		xl: 1440,
+		l: 960,
+		m: 800,
+		s: 600,
+	}
+
+	const containerSize = computed(() => {
+		return sizeMapping[props.size]
+	})
+
+	defineExpose({
+		spacingClass,
+		containerSize,
+	})
+</script>
+
+<template>
+	<div :class="[spacingClass, 'vd-page-container d-flex justify-center']">
+		<VSheet
+			:width="containerSize"
+			:color="color"
+		>
+			<slot />
+		</VSheet>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.vd-page-container {
+  flex: 1;
+}
+</style>

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

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import PageContainer from '../PageContainer.vue'
+
+describe('PageContainer', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(PageContainer, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('render correctly with slot', async () => {
+		const wrapper = mount(PageContainer, {
+			slots: {
+				default: 'slot content',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toContain('slot content')
+	})
+
+	it('render correctly with spacing class', async () => {
+		const wrapper = mount(PageContainer, {
+			props: {
+				spacing: 'sm',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.vm.spacingClass).toBe('py-10 px-4')
+	})
+
+	it('containerSize computed property', async () => {
+		const wrapper = mount(PageContainer, {
+			props: {
+				size: 'l',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.vm.containerSize).toBe(960)
+	})
+})

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PageContainer > render correctly 1`] = `
+"<div data-v-fb0b02fd="" class="py-10 px-8 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 1440px;"></div>
+</div>"
+`;

package/src/components/SkipLink/SkipLink.mdx

@@ -0,0 +1,55 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as SkipLinkStories from './SkipLink.stories';
+
+<Meta of={SkipLinkStories} />
+
+# SkipLink
+
+Le composant `SkipLink` est utilisé pour permettre à l'utilisateur utilisant la navigation au clavier de passer directement à une section de contenu.
+
+Il est généralement placé en haut de la page et est caché visuellement. Lorsqu'il est activé, il devient visible et permet à l'utilisateur de sauter directement à une section de contenu.
+
+Quand l'utilisateur change de page ou de vue, le focus est automatiquement placé sur l'élément de saut pour lui permettre de naviguer rapidement dans la page.
+
+<Canvas of={SkipLinkStories.Default}  />
+
+## API
+
+<Controls of={SkipLinkStories.Default} />
+
+## Exemple d'utilisation avec Nuxt
+
+<Source dark code={`
+<template>
+  <div>
+    <SkipLink label="Aller au contenu" target="#main-content"/>
+    <div id="main-content">
+      <slot />
+    </div>
+  </div>
+</template>
+`} />
+
+## Exemple d'utilisation avec Vue
+
+<Source dark code={`
+<template>
+  <v-app>
+    <SkipLink target="#main-content"/>
+    <nav>
+      <ul>
+        <li>
+          <router-link to="/">index</router-link>
+        </li>
+        <li>
+          <router-link to="/other">other</router-link>
+        </li>
+      </ul>
+    </nav>
+    <div id="main-content">
+      <router-view />
+    </div>
+  </v-app>
+</template>
+`} />