@cnamts/synapse 0.0.0-alpha.0

package/src/components/LangBtn/LangBtn.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+	import { computed, ref, watch } from 'vue'
+	import type { AllLanguagesChar } from '@/components/LangBtn/types'
+	import { mdiMenuDown } from '@mdi/js'
+	import { locales } from './locales'
+	import ISO6391 from 'iso-639-1'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import defaultOptions from './config'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		modelValue?: string
+		hideDownArrow?: boolean
+		ariaLabel?: string
+		ariaOwns?: string
+		availableLanguages?: string[] | AllLanguagesChar
+	}>(), {
+		modelValue: 'fr',
+		hideDownArrow: false,
+		ariaLabel: locales.label,
+		ariaOwns: 'lang-btn',
+		availableLanguages: () => ['fr', 'en'],
+		validator: (value: string[] | AllLanguagesChar): boolean => {
+			if (Array.isArray(value)) {
+				return value.length > 0
+			}
+			else {
+				return value === '*'
+			}
+		},
+	})
+
+	const options = useCustomizableOptions(defaultOptions, props)
+
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const menu = ref(false)
+	const selectedLanguage = ref(props.modelValue)
+
+	watch(
+		() => props.modelValue,
+		(newVal) => {
+			selectedLanguage.value = newVal
+		},
+	)
+
+	function updateLang(lang: string) {
+		selectedLanguage.value = lang
+		emit('update:modelValue', lang)
+		emit('change', lang)
+		menu.value = false
+	}
+
+	interface LanguageInfo {
+		code: string
+		name: string
+		nativeName: string
+	}
+
+	type LanguagesData = Record<string, LanguageInfo>
+
+	const isMenuOpen = computed(() => menu.value)
+	const menuId = computed(() => `lang-menu-id`)
+
+	const languagesData = computed<LanguagesData>(() => {
+		const data: LanguagesData = {}
+		let languageCodes: string[]
+
+		if (props.availableLanguages === '*') {
+			languageCodes = ISO6391.getAllCodes()
+		}
+		else {
+			languageCodes = props.availableLanguages as string[]
+		}
+
+		languageCodes.forEach((language) => {
+			data[language] = {
+				code: language,
+				name: ISO6391.getName(language) || language,
+				nativeName: ISO6391.getNativeName(language) || ISO6391.getName(language) || language,
+			}
+		})
+
+		return data
+	})
+
+	const currentLangData = computed(() => {
+		const langInfo = languagesData.value[selectedLanguage.value]
+		return {
+			name: langInfo?.nativeName || selectedLanguage.value,
+			label: `${props.ariaLabel} ${langInfo?.nativeName || selectedLanguage.value}`,
+		}
+	})
+
+	defineExpose({
+		currentLangData,
+		updateLang,
+		selectedLanguage,
+	})
+</script>
+
+<template>
+	<div :id="menuId">
+		<VMenu
+			v-bind="options.menu"
+			:id="isMenuOpen ? 'lang-menu' : menuId "
+			v-model="menu"
+			role="menu"
+			location="bottom"
+		>
+			<template #activator="{ props: activatorProps }">
+				<VBtn
+					id="lang-menu-btn"
+					:aria-label="`${props.ariaLabel} ${currentLangData.name}`"
+					aria-haspopup="menu"
+					:aria-controls="menuId"
+					:aria-owns="menuId"
+					:aria-expanded="isMenuOpen"
+					v-bind="{
+						...options.btn,
+						...activatorProps,
+					}"
+					class="vd-lang-btn"
+				>
+					{{ currentLangData.name }}
+					<VIcon
+						v-if="!hideDownArrow"
+						v-bind="options.icon"
+						class="ml-1"
+					>
+						{{ mdiMenuDown }}
+					</VIcon>
+				</VBtn>
+			</template>
+			<VList
+				v-bind="options.list"
+				aria-labelledby="lang-menu-btn"
+			>
+				<VListItem
+					v-for="(langData, code, index) in languagesData"
+					v-bind="options.listTile"
+					:key="code"
+					role="menuitem"
+					:tabindex="index + 1"
+					:aria-label="`${props.ariaLabel} ${langData.nativeName}`"
+					:aria-labelledby="`${menuId} ${langData.nativeName}`"
+					@click="updateLang(code)"
+				>
+					<VListItemTitle v-bind="options.listTileTitle">
+						{{ langData.nativeName }}
+					</VListItemTitle>
+				</VListItem>
+			</VList>
+		</VMenu>
+	</div>
+</template>
+<style lang="scss" scoped>
+@import '../../assets/tokens';
+
+.v-list-item:hover {
+  background-color: rgba($colors-overlay, 0.005)
+}
+
+.vd-lang-btn {
+  font-weight: 700;
+  --hoverColor: rgba($colors-overlay, 0.5);
+  text-transform: capitalize;
+}
+</style>

package/src/components/LangBtn/config.ts

@@ -0,0 +1,17 @@
+import type { VariantType } from '@/types/vuetifyTypes'
+
+const defaultOptions = {
+	menu: {
+		offsetY: true,
+	},
+	btn: {
+		color: 'primary',
+		variant: 'outlined' as VariantType,
+		ripple: true,
+	},
+	icon: {
+		class: 'ml-1',
+	},
+}
+
+export default defaultOptions

package/src/components/LangBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	label: 'Choix de la langue. Actuellement',
+}

package/src/components/LangBtn/tests/Config.spec.ts

@@ -0,0 +1,24 @@
+import config from '../config'
+import { describe, it, expect } from 'vitest'
+
+describe('config', () => {
+	it('should have correct menu configuration', () => {
+		expect(config.menu).toEqual({
+			offsetY: true,
+		})
+	})
+
+	it('should have correct button configuration', () => {
+		expect(config.btn).toEqual({
+			color: 'primary',
+			variant: 'outlined',
+			ripple: true,
+		})
+	})
+
+	it('should have correct icon configuration', () => {
+		expect(config.icon).toEqual({
+			class: 'ml-1',
+		})
+	})
+})

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

@@ -0,0 +1,283 @@
+import { mount, VueWrapper } from '@vue/test-utils'
+import LangBtn from '../LangBtn.vue'
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import ISO6391 from 'iso-639-1'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('LangBtn.vue', () => {
+	let wrapper: VueWrapper
+
+	afterEach(() => {
+		if (wrapper) {
+			wrapper.unmount()
+		}
+	})
+
+	it('renders correctly', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders with default props', () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
+	})
+
+	it('renders with custom modelValue', () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				modelValue: 'co',
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('corsu')
+	})
+
+	it('updates selectedLanguage when modelValue prop changes', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				modelValue: 'fr',
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
+
+		await wrapper.setProps({ modelValue: 'es' })
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('Español')
+	})
+
+	it('updates language when a language is selected', async () => {
+	})
+
+	it('opens the menu when clicked', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		expect(document.body.querySelector('.v-list')).toBeNull()
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(document.body.querySelector('.v-list')).not.toBeNull()
+	})
+
+	it('hides down arrow when hideDownArrow is true', () => {
+		wrapper = mount(LangBtn, {
+			props: { hideDownArrow: true },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-icon').exists()).toBe(false)
+	})
+
+	it('shows down arrow when hideDownArrow is false', () => {
+		wrapper = mount(LangBtn, {
+			props: { hideDownArrow: false },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-icon').exists()).toBe(true)
+	})
+
+	it('renders all languages when availableLanguages is "*"', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: '*',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const allLanguageCodes = ISO6391.getAllCodes()
+
+		const listItems = document.body.querySelectorAll('.v-list-item')
+
+		expect(listItems.length).toBe(allLanguageCodes.length)
+	})
+
+	it('renders only specified languages', async () => {
+		const languages = ['fr', 'co', 'es']
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: languages,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const listItems = document.body.querySelectorAll('.v-list-item')
+
+		expect(listItems.length).toBe(languages.length)
+
+		const renderedLanguages = Array.from(listItems).map(item =>
+			item?.textContent?.trim(),
+		)
+		const expectedLanguages = languages.map(
+			code => ISO6391.getNativeName(code) || code,
+		)
+		expect(renderedLanguages).toEqual(expectedLanguages)
+	})
+
+	it('uses default ariaLabel when not provided', () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('.vd-lang-btn')
+		expect(button.attributes('aria-label')).toBe('Choix de la langue. Actuellement Français')
+	})
+
+	it('uses ariaLabel prop correctly', () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				ariaLabel: 'Language selection',
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('.vd-lang-btn')
+		expect(button.attributes('aria-label')).toBe('Language selection Français')
+	})
+
+	it('handles modelValue not in availableLanguages', () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				modelValue: 'unknown',
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('unknown')
+	})
+
+	it('falls back to language code when name and nativeName are unavailable', () => {
+		const getNameMock = vi.spyOn(ISO6391, 'getName').mockReturnValue(undefined as unknown as string)
+		const getNativeNameMock = vi
+			.spyOn(ISO6391, 'getNativeName')
+			.mockReturnValue(undefined as unknown as string)
+
+		wrapper = mount(LangBtn, {
+			props: {
+				modelValue: 'xx',
+				availableLanguages: ['xx'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('xx')
+
+		getNameMock.mockRestore()
+		getNativeNameMock.mockRestore()
+	})
+
+	it('updates selectedLanguage and emits event when updateLang is called', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('Français')
+
+		await wrapper.vm.$.exposed?.updateLang('es')
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('Español')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['es'])
+	})
+
+	it('updates language when a language is selected', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const languageItem = document.body.querySelectorAll('.v-list-item')[1]
+		languageItem.dispatchEvent(new Event('click'))
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('corsu')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['co'])
+	})
+})

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LangBtn.vue > renders correctly 1`] = `
+"<div data-v-42678988="" id="lang-menu-id"><button data-v-42678988="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined vd-lang-btn" id="lang-menu-btn" aria-label="Choix de la langue. Actuellement Français" aria-haspopup="menu" aria-controls="lang-menu-id" aria-owns="lang-menu-id" aria-expanded="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator="">Français <i data-v-42678988="" class="M7,10L12,15L17,10H7Z mdi v-icon notranslate v-theme--light v-icon--size-default ml-1" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;

package/src/components/LangBtn/types.d.ts

@@ -0,0 +1,7 @@
+export interface Language {
+	direction: string
+	name: string
+	nativeName: string
+}
+
+export type AllLanguagesChar = '*'

package/src/components/NotificationBar/NotificationBar.mdx

@@ -0,0 +1,94 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as NotificationBarStories from './NotificationBar.stories';
+
+<Meta of={NotificationBarStories} />
+
+# NotificationBar
+
+##### Les notification bars servent à notifier l’utilisateur soit d’un retour d’action.
+
+##### Deux actions sont possible :
+ - Fermer la notification lorsqu’elle a été vue
+ - Cliquer sur un élément qui permet de faire une action secondaire (comme amener sur une page visée par la notification).
+
+##### L’affichage d’une durée de quelques secondes et disprition automatique de la notification bar est déconseillé pour des raisons d’accessibilité afin de permettre à tout le monde de prendre le temps nécessaire de lire la notification.
+
+##### Les 4 états son disponibles :
+- **Information** : Information supplémentaire nécessaire à la compréhension de l’utilisateur d’un élément spécifique.
+- **Error** : une erreur est survenue, technique ou lié à l’action que l’utilisateur à réalisé
+- **Warning** : Alerte, élément important mais pas bloquant. L’utilisateur a besoin d’être informé d’un élément ou d’une conséquence.
+- **Success** : l’action a été réalisée correctement et prise en compte.
+
+<Canvas of={NotificationBarStories.Success}  />
+
+# API
+<Controls of={NotificationBarStories.Success} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import { VBtn } from 'vuetify/components'
+	import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
+	import { useNotificationService } from '@/services/NotificationService'
+	import type { Notification } from '@/components/NotificationBar/types'
+
+	const { addNotification } = useNotificationService()
+
+	const envoyerNotification = (message: string, type: Notification['type']) => {
+		const notification: Notification = {
+			id: Date.now().toString(),
+			message,
+			type,
+			timeout: -1,
+		}
+		addNotification(notification)
+	}
+</script>
+
+<template>
+	<div>
+		<NotificationBar
+			bottom
+			rounded="lg"
+		>
+			<template #action>
+				<VBtn variant="outlined">
+					Valider
+				</VBtn>
+			</template>
+		</NotificationBar>
+
+		<div class="button-group">
+			<VBtn
+				color="info"
+				@click="envoyerNotification('Première notification', 'info')"
+			>
+				Envoyer Notification 1
+			</VBtn>
+			<VBtn
+				color="success"
+				@click="envoyerNotification('Deuxième notification', 'success')"
+			>
+				Envoyer Notification 2
+			</VBtn>
+			<VBtn
+				color="error"
+				@click="envoyerNotification('Troisième notification', 'error')"
+			>
+				Envoyer Notification 3
+			</VBtn>
+		</div>
+	</div>
+</template>
+
+    <style scoped>
+    .button-group {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-top: 20px;
+    }
+    </style>
+    `} />