@cnamts/synapse 0.0.0-alpha.0 → 0.0.3-alpha

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+
+import CollapsibleList from '../CollapsibleList.vue'
+
+import { vuetify } from '@tests/unit/setup'
+
+describe('CollapsibleList', () => {
+	it('renders correctly', async () => {
+		const wrapper = mount(CollapsibleList, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				listTitle: 'Santé',
+				items: [
+					{
+						text: 'Mon espace santé',
+						href: 'https://www.ameli.fr/assure/sante/mon-espace-sante',
+					},
+					{
+						text: 'Accomplir les bons gestes',
+						href: 'https://www.ameli.fr/assure/sante/bons-gestes',
+					},
+				],
+			},
+		})
+
+		expect(wrapper.find('h4').text()).toBe('Santé')
+		expect(wrapper.findAll('a')).toHaveLength(2)
+		expect(wrapper.findAll('a').at(0)?.text()).toBe('Mon espace santé')
+		expect(wrapper.findAll('a').at(1)?.text()).toBe('Accomplir les bons gestes')
+	})
+
+	it('renders correctly with in mobile mode', () => {
+		const wrapper = mount(CollapsibleList, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				listTitle: 'Santé',
+				items: [
+					{
+						text: 'Mon espace santé',
+						href: 'https://www.ameli.fr/assure/sante/mon-espace-sante',
+					},
+					{
+						text: 'Accomplir les bons gestes',
+						href: 'https://www.ameli.fr/assure/sante/bons-gestes',
+					},
+				],
+			},
+		})
+
+		wrapper.vm.$vuetify.display.name = 'xs'
+		wrapper.vm.$vuetify.display.smAndDown = true
+
+		expect(wrapper.find('.vd-collapse-list-mobile')).toBeTruthy()
+	})
+})

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

@@ -0,0 +1,5 @@
+export interface ListItem {
+	text: string
+	href: string
+	ariaLabel?: string
+}

package/src/components/Customs/CustomInputSelect/CustomInputSelect.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
+import * as CustomInputSelectStories from "./CustomInputSelect.stories.ts";
+
+<Meta of={CustomInputSelectStories} />
+
+# CustomSelect
+
+Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
+
+<Canvas of={CustomInputSelectStories.Default} />
+
+<Story of={CustomInputSelectStories.Info} />
+
+# API
+
+<Controls of={CustomInputSelectStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import CustomInputSelect from '@/components/Customs/CustomInputSelect/CustomInputSelect.vue'
+	import { ref } from 'vue'
+
+	const value = ref('fr')
+	const items = ['fr', 'en', 'co']
+	const ariaLabel = 'Choix de la langue'
+</script>
+
+<template>
+	<main>
+		<div class="mt-12 ml-12">
+			<CustomInputSelect
+				v-model="value"
+				:items="items"
+				:label="ariaLabel"
+				aria-label="Choix de la langue"
+			/>
+		</div>
+	</main>
+</template>
+`} />

package/src/components/Customs/CustomInputSelect/CustomInputSelect.stories.ts

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CustomInputSelect from './CustomInputSelect.vue'
+import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
+import { ref } from 'vue'
+import Alert from '../../Alert/Alert.vue'
+
+const meta = {
+	title: 'Components/CustomInputSelect',
+	component: CustomInputSelect,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['selectedValue'] },
+	},
+	argTypes: {
+		selectedValue: { control: 'text' },
+		items: { control: 'object' },
+		errorMessages: { control: 'object' },
+	},
+} as Meta<typeof CustomInputSelect>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+					/>
+				</div>
+				<br/><br/><br/><br/>
+			`,
+		}
+	},
+}
+
+export const Outlined: Story = {
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+						outlined
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withError: Story = {
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				const errorMessages = ref([])
+				const triggerError = () => {
+					// @ts-expect-error test error message
+					errorMessages.value = ['This is a test error message']
+				}
+				return { args, errorMessages, triggerError }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomKey: Story = {
+	args: {
+		items: [
+			{ customKey: 'Option 1', value: '1' },
+			{ customKey: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+						outlined
+						text-key="customKey"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { Alert },
+			setup() {
+				return { args }
+			},
+			template: `
+				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+					<template #default>
+						<b>Format des items :</b>
+						<ul>
+							<li>- Si les items passés en props sont des objets, le composant les utilisera directement.</li>
+							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
+						</ul>
+					</template>
+				</Alert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Customs/CustomInputSelect/CustomInputSelect.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+	import { mdiMenuDown } from '@mdi/js'
+	import { ref, watch, computed, type PropType } from 'vue'
+	import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components'
+
+	const props = defineProps({
+		modelValue: {
+			type: [Object, String],
+			default: null,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		label: {
+			type: String,
+			default: 'Sélectionnez une option',
+		},
+		errorMessages: {
+			type: [String, Array] as PropType<string | readonly string[]>,
+			default: () => [],
+		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		menuId: {
+			type: String,
+			default: 'custom-select-menu',
+		},
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
+		textKey: {
+			type: String,
+			default: 'text',
+		},
+		valueKey: {
+			type: String,
+			default: 'value',
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+
+	const isOpen = ref(false)
+	const selectedItem = ref<Record<string, unknown > | string | null>(props.modelValue)
+
+	const toggleMenu = () => {
+		isOpen.value = !isOpen.value
+	}
+
+	const closeList = () => {
+		isOpen.value = false
+	}
+
+	const inputId = ref(`custom-input-select-${Math.random().toString(36).substring(7)}`)
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const selectItem = (item: any) => {
+		selectedItem.value = item
+		emit('update:modelValue', item)
+		isOpen.value = false
+	}
+
+	const getItemText = (item: unknown) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		return (item as Record<string, any>)[props.textKey]
+	}
+
+	const selectedItemText = computed(() => {
+		if (selectedItem.value && typeof selectedItem.value === 'object') {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			return (selectedItem.value as Record<string, any>)[props.textKey]
+		}
+		return props.label
+	})
+
+	watch(() => props.modelValue, (newValue) => {
+		selectedItem.value = newValue
+	})
+
+	const buttonClass = computed(() => {
+		return props.outlined ? 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined' : 'text-color'
+	})
+
+	const formattedItems = computed(() => {
+		return props.items.map((item) => {
+			if (typeof item === 'string') {
+				return { [props.textKey]: item, [props.valueKey]: item }
+			}
+			return item
+		})
+	})
+</script>
+
+<template>
+	<v-input
+		:id="inputId"
+		v-model="selectedItem"
+		:label="props.label"
+		:title="props.label"
+		role="menu"
+		:error-messages="errorMessages"
+		:required="required"
+	>
+		<div
+			ref="menu"
+			v-click-outside="closeList"
+			:class="['custom-select', buttonClass, 'primary']"
+			role="menu"
+			tabindex="0"
+			@click="toggleMenu"
+			@keydown.enter.prevent="toggleMenu"
+			@keydown.space.prevent="toggleMenu"
+		>
+			<span>{{ selectedItemText }}</span>
+			<VIcon> {{ mdiMenuDown }}</VIcon>
+		</div>
+		<VList
+			v-if="isOpen"
+			class="v-list"
+			:style="`max-width: ${$refs.menu ? $refs.menu.getBoundingClientRect().width : 0}px;`"
+			:aria-label="props.label"
+			:title="props.label"
+			@keydown.esc.prevent="isOpen = false"
+		>
+			<VListItem
+				v-for="(item, index) in formattedItems"
+				:key="index"
+				:ref="'options-' + index"
+				role="option"
+				class="v-list-item"
+				:aria-selected="selectedItem === item"
+				:tabindex="index + 1"
+				@click="selectItem(item)"
+			>
+				<VListItemTitle>
+					{{ getItemText(item) }}
+				</VListItemTitle>
+			</VListItem>
+		</VList>
+	</v-input>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/tokens.scss';
+
+.v-input {
+  cursor: pointer;
+  position: relative;
+}
+
+.v-list {
+  position: absolute;
+  top: 36px;
+  width: 100%;
+  z-index: 1;
+  background-color: white;
+  min-width: fit-content;
+  max-width: 150px;
+  padding: 0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  overflow-y: auto;
+  max-height: 300px;
+}
+
+.v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.v-list-item[aria-selected='true'] {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.v-btn {
+  color: tokens.$blue-base;
+}
+
+.text-color {
+  color: tokens.$blue-base;
+}
+</style>

package/src/components/Customs/CustomInputSelect/tests/CustomInputSelect.spec.ts

@@ -0,0 +1,216 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import CustomSelect from '../CustomInputSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('CustomInputSelect.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(CustomSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.custom-select').text()).toBe('Sélectionnez une option')
+	})
+
+	it('toggles the menu when clicked', async () => {
+		const wrapper = mount(CustomSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.custom-select').trigger('click')
+		expect(wrapper.find('.v-list').exists()).toBe(true)
+		await wrapper.find('.custom-select').trigger('click')
+		expect(wrapper.find('.v-list').exists()).toBe(false)
+	})
+
+	it('selects an item when clicked', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(CustomSelect, {
+			props: { items },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.custom-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		if (firstItem) {
+			await firstItem.trigger('click')
+		}
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
+	})
+
+	it('closes the menu when an item is selected', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(CustomSelect, {
+			props: { items },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.custom-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		if (firstItem) {
+			await firstItem.trigger('click')
+		}
+		expect(wrapper.find('.v-list').exists()).toBe(false)
+	})
+
+	it('displays the selected item text', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(CustomSelect, {
+			props: { items, modelValue: { text: 'Option 1', value: '1' } },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.custom-select').text()).toContain('Option 1')
+	})
+
+	it('closes the menu on escape key press', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(CustomSelect, {
+			props: { items },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.custom-select').trigger('click')
+		await wrapper.find('.v-list').trigger('keydown.esc')
+		expect(wrapper.find('.v-list').exists()).toBe(false)
+	})
+
+	it('renders error messages when provided', () => {
+		const errorMessages = ['Error 1']
+		const wrapper = mount(CustomSelect, {
+			props: { errorMessages },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').text()).toContain('Error 1')
+	})
+
+	it('does not render error messages when not provided', () => {
+		const wrapper = mount(CustomSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+
+	it('does not render the label when not provided', () => {
+		const wrapper = mount(CustomSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('label').exists()).toBe(false)
+	})
+
+	it('returns the correct item text using getItemText', () => {
+		const wrapper = mount(CustomSelect, {
+			props: { textKey: 'text' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const item = { text: 'Option 1', value: '1' }
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		expect(instance.getItemText(item)).toBe('Option 1')
+	})
+
+	it('returns default text when selectedItem is null', () => {
+		const wrapper = mount(CustomSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		expect(instance.selectedItemText).toBe('Sélectionnez une option')
+	})
+
+	it('returns the correct text when selectedItem is an object', async () => {
+		const wrapper = mount(CustomSelect, {
+			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		await wrapper.setProps({ modelValue: { text: 'Option 1', value: '1' } })
+		expect(instance.selectedItemText).toBe('Option 1')
+	})
+
+	it('formats items correctly', () => {
+		const items = ['Option 1', 'Option 2']
+		const wrapper = mount(CustomSelect, {
+			props: { items, textKey: 'text', valueKey: 'value' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const formattedItems = (wrapper.vm as any).formattedItems
+		expect(formattedItems).toEqual([
+			{ text: 'Option 1', value: 'Option 1' },
+			{ text: 'Option 2', value: 'Option 2' },
+		])
+	})
+
+	it('applies the correct button class when outlined is true', () => {
+		const wrapper = mount(CustomSelect, {
+			props: { outlined: true },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.custom-select').classes()).toContain('v-btn--variant-outlined')
+	})
+
+	it('does not apply the outlined button class when outlined is false', () => {
+		const wrapper = mount(CustomSelect, {
+			props: { outlined: false },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.custom-select').classes()).not.toContain('v-btn--variant-outlined')
+	})
+
+	it('updates selectedItem when v-model changes', async () => {
+		const wrapper = mount(CustomSelect, {
+			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		expect(instance.selectedItem).toEqual({ text: 'Option 1', value: '1' })
+
+		await wrapper.setProps({ modelValue: { text: 'Option 2', value: '2' } })
+		expect(instance.selectedItem).toEqual({ text: 'Option 2', value: '2' })
+	})
+
+	it('emits update:modelValue when selectedItem changes', async () => {
+		const wrapper = mount(CustomSelect, {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			props: { modelValue: null as any, textKey: 'text' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		instance.selectItem({ text: 'Option 1', value: '1' })
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
+	})
+})

package/src/components/Customs/CustomSelect/CustomSelect.mdx

@@ -0,0 +1,47 @@
+import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
+import * as CustomSelectStories from "./CustomSelect.stories";
+
+<Meta of={CustomSelectStories} />
+
+# CustomSelect
+
+Le composant `CustomSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.
+
+<Canvas of={CustomSelectStories.Default} />
+
+<Story of={CustomSelectStories.Info} />
+
+# API
+
+<Controls of={CustomSelectStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import CustomSelect from '@/components/Customs/CustomSelect/CustomSelect.vue'
+
+	const selectedValue = ref(undefined)
+
+	const items = ref([
+		{ text: 'Option 1', value: '1' },
+		{ text: 'Option 2', value: '2' },
+	])
+</script>
+
+<template>
+	<main class="ma-12">
+		SelectedValue: {{ selectedValue }}
+		<div class="d-flex flex-wrap align-center">
+			<custom-select
+				v-model="selectedValue"
+				:items="items"
+				text-key="text"
+				outlined
+				required
+			/>
+		</div>
+	</main>
+</template>
+`} />