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

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

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CustomSelect from '@/components/Customs/CustomSelect/CustomSelect.vue'
+import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
+import { ref } from 'vue'
+import Alert from '../../Alert/Alert.vue'
+
+const meta = {
+	title: 'Components/CustomSelect',
+	component: CustomSelect,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['selectedValue'] },
+	},
+	argTypes: {
+		selectedValue: { control: 'text' },
+		items: { control: 'object' },
+		errorMessages: { control: 'object' },
+		required: { control: 'boolean' },
+	},
+} as Meta<typeof CustomSelect>
+
+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: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomSelect
+						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: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4" style="z-index: 99999">
+					<CustomSelect
+						v-bind="args"
+						outlined
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Required: Story = {
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomSelect },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomSelect
+						v-bind="args"
+						required
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomError: Story = {
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomSelect, 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">
+					<CustomSelect
+						v-bind="args"
+						:error-messages="errorMessages"
+					/>
+				</div>
+				<div class="d-flex flex-wrap align-center px-4">
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomKey: Story = {
+	args: {
+		items: [
+			{ customKey: 'Choix 1', value: '1' },
+			{ customKey: 'Choix 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomSelect
+						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/CustomSelect/CustomSelect.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+	import { mdiMenuDown } from '@mdi/js'
+	import { ref, watch, computed, type PropType } from 'vue'
+	import { VIcon, VTextField, 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-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
+	})
+
+	const formattedItems = computed(() => {
+		return props.items.map((item) => {
+			if (typeof item === 'string') {
+				return { [props.textKey]: item, [props.valueKey]: item }
+			}
+			return item
+		})
+	})
+
+	const isRequired = computed(() => {
+		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
+	})
+
+	watch(() => props.modelValue, (newValue) => {
+		selectedItem.value = newValue
+	})
+</script>
+
+<template>
+	<div class="d-block w-100">
+		<VTextField
+			:id="inputId"
+			ref="input"
+			v-model="selectedItemText"
+			v-click-outside="closeList"
+			title="Sélectionnez une option"
+			color="primary"
+			tabindex="0"
+			readonly
+			:label="selectedItem ? label : ''"
+			:aria-label="selectedItem ? label : 'Sélectionnez une option'"
+			:error-messages="errorMessages"
+			:variant="outlined ? 'outlined' : 'underlined'"
+			:rules="isRequired ? ['Le champ est requis.'] : []"
+			class="custom-select"
+			@click="toggleMenu"
+			@keydown.enter.prevent="toggleMenu"
+			@keydown.space.prevent="toggleMenu"
+		>
+			<VIcon>{{ mdiMenuDown }}</VIcon>
+		</VTextField>
+		<VList
+			v-if="isOpen"
+			class="v-list"
+			:style="`min-width: ${$refs.input?.$el.offsetWidth}px`"
+			@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>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/tokens.scss';
+
+.custom-select {
+  display: flex;
+  flex-direction: column;
+}
+
+.v-field {
+  position: relative;
+}
+.v-field--focused {
+  .v-icon {
+    transform: rotateX(180deg) translateY(50%);
+  }
+}
+
+.v-list {
+  position: absolute;
+  left: inherit !important;
+  margin-top: -22px;
+  background-color: white;
+  max-height: 300px;
+  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;
+  z-index: 2;
+}
+
+.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-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: tokens.$grey-darken-20;
+}
+</style>

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

@@ -0,0 +1,236 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import CustomSelect from '../CustomSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('customSelect.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('')
+	})
+
+	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],
+			},
+		})
+		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('input').element.value).toBe('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('.v-label').text()).toBe('')
+	})
+
+	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('.v-field--variant-outlined').exists()).toBe(true)
+	})
+
+	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' }])
+	})
+
+	it('closes the menu when v-click-outside directive is called', 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('mouseleave')
+		await wrapper.find('.custom-select').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.v-list').exists()).toBe(false)
+	})
+})

package/src/components/FooterBar/A11yCompliance.ts

@@ -0,0 +1,9 @@
+export type A11yComplianceType = 'non-compliant' | 'partially-compliant' | 'fully-compliant'
+
+export const A11yComplianceEnum: Record<A11yComplianceType, A11yComplianceType> = {
+	'non-compliant': 'non-compliant',
+	'partially-compliant': 'partially-compliant',
+	'fully-compliant': 'fully-compliant',
+}
+
+export const A11Y_COMPLIANCE_ENUM_VALUES = Object.values(A11yComplianceEnum)