@cnamts/synapse 0.0.10-alpha → 0.0.11-alpha

package/src/components/ChipList/ChipList.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+	import { config } from '@/components/ChipList/config'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { mdiAlertCircle, mdiAlertOutline, mdiCheckCircle, mdiInformationOutline, mdiWindowClose } from '@mdi/js'
+	import { computed, ref } from 'vue'
+	import { locales } from './locales'
+	import type { ChipItem, ChipState } from './types'
+
+	type NonEmptyChipState = Exclude<ChipState, undefined>
+	type VuetifyVariant = 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+
+	export interface Props extends CustomizableOptions {
+		items?: ChipItem[]
+		overflowLimit?: number
+		readonly?: boolean
+		resetText?: string
+		displayPrependStateIcon?: boolean
+		displayAppendStateIcon?: boolean
+		customIcon?: string
+		vuetifyOptions?: {
+			chip?: {
+				color?: string
+				size?: string
+				variant?: VuetifyVariant
+			}
+		}
+	}
+
+	const BACKGROUND_COLORS: Record<NonEmptyChipState, string> = {
+		success: 'backgroundSuccessSubdued',
+		warning: 'backgroundWarningSubdued',
+		error: 'backgroundErrorSubdued',
+		info: 'backgroundInfoSubdued',
+	} as const
+
+	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
+		items: () => [],
+		overflowLimit: 4,
+		readonly: false,
+		resetText: undefined,
+		displayPrependStateIcon: false,
+		displayAppendStateIcon: false,
+		customIcon: undefined,
+		vuetifyOptions: () => ({}),
+	})
+
+	const options = useCustomizableOptions(config, props)
+
+	const emits = defineEmits<{
+		(e: 'remove', item: ChipItem): void
+		(e: 'reset'): void
+	}>()
+
+	const locale = ref(locales)
+	const deleteIcon = ref(mdiWindowClose)
+
+	const filteredItems = computed(() => {
+		return props.items.slice(0, props.overflowLimit - 1)
+	})
+
+	const showOverflowChip = computed(() => {
+		return props.items.length >= props.overflowLimit
+	})
+
+	const overflowText = computed(() => {
+		return `+${props.items.length - props.overflowLimit + 1}`
+	})
+
+	const resetButtonText = computed(() => {
+		return props.resetText ?? locale.value.reset
+	})
+
+	/**
+   * Retourne la couleur de fond correspondant à l'état du chip
+   *
+   * @param state - L'état du chip
+   * @param options - Les options de personnalisation
+   * @returns La couleur de fond correspondante
+   */
+	function getBackgroundColor(state: ChipState): string {
+		// Si des options Vuetify sont définies et qu'une couleur est spécifiée, on l'utilise
+		const vuetifyColor = props.vuetifyOptions?.chip?.color
+		if (typeof vuetifyColor === 'string' && vuetifyColor) {
+			return vuetifyColor
+		}
+		// Sinon on utilise la couleur basée sur l'état
+		return state ? BACKGROUND_COLORS[state] : 'primary'
+	}
+
+	/**
+	 * Retourne l'icône correspondant à l'état du chip
+	 *
+	 * @param state - L'état du chip
+	 * @returns L'icône MDI correspondante
+	 */
+	function getIcon(state: ChipState): string {
+		switch (state) {
+		case 'success':
+			return mdiCheckCircle
+		case 'warning':
+			return mdiAlertOutline
+		case 'error':
+			return mdiAlertCircle
+		case 'info':
+			return mdiInformationOutline
+		default:
+			return ''
+		}
+	}
+
+	function emitRemoveEvent(item: ChipItem): void {
+		if (!props.readonly) {
+			emits('remove', item)
+		}
+	}
+
+	function emitResetEvent(): void {
+		if (!props.readonly) {
+			emits('reset')
+		}
+	}
+</script>
+
+<template>
+	<div
+		v-if="items.length"
+		:class="{
+			'flex-column': showOverflowChip,
+		}"
+		class="chip-list d-flex flex-wrap max-width-none mx-n1 mt-n1"
+		role="list"
+	>
+		<div
+			class="d-flex flex-wrap align-center"
+			role="group"
+			:aria-label="locale.chipGroupLabel"
+		>
+			<VChip
+				v-for="item in filteredItems"
+				v-bind="options.chip"
+				:key="item.text"
+				:color="getBackgroundColor(item.state)"
+				:class="{
+					'sy-chip-success': item.state === 'success',
+					'sy-chip-info': item.state === 'info',
+					'sy-chip-warning': item.state === 'warning',
+					'sy-chip-error': item.state === 'error',
+				}"
+				role="listitem"
+			>
+				<div class="d-flex align-center justify-center ga-sm-1">
+					<template v-if="displayPrependStateIcon">
+						<VIcon
+							v-bind="options.icon"
+							:icon="customIcon || getIcon(item.state)"
+							:color="item.state"
+						/>
+					</template>
+
+					<span>{{ item.text }}</span>
+
+					<template v-if="displayAppendStateIcon">
+						<VIcon
+							v-bind="options.icon"
+							:icon="customIcon || getIcon(item.state)"
+						/>
+					</template>
+
+					<VBtn
+						v-if="!readonly"
+						v-bind="options.btn"
+						:aria-label="locale.closeBtnLabel"
+						icon
+						class="remove-chip"
+						@click="emitRemoveEvent(item)"
+					>
+						<VIcon
+							v-bind="options.icon"
+							:icon="deleteIcon"
+						/>
+					</VBtn>
+				</div>
+			</VChip>
+		</div>
+
+		<div
+			v-if="showOverflowChip || !readonly"
+			class="d-flex align-center"
+		>
+			<VChip
+				v-if="showOverflowChip"
+				v-bind="options.chip"
+				class="overflow-chip text-cyan-darken-40 ma-1"
+				role="status"
+				:aria-label="locale.overflowLabel"
+			>
+				{{ overflowText }}
+			</VChip>
+
+			<VBtn
+				v-if="!readonly"
+				variant="text"
+				color="primary"
+				size="small"
+				data-test-id="reset-btn"
+				class="overflow-btn px-1 ml-0 my-1"
+				@click="emitResetEvent"
+			>
+				{{ resetButtonText }}
+			</VBtn>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.sy-chip-success {
+	color: tokens.$colors-text-success !important;
+	border: 1px solid tokens.$colors-border-success !important;
+}
+
+.sy-chip-error {
+	color: tokens.$colors-text-error !important;
+	border: 1px solid tokens.$colors-border-error !important;
+}
+
+.sy-chip-info {
+	color: tokens.$colors-text-info !important;
+	border: 1px solid tokens.$colors-border-info !important;
+}
+
+.sy-chip-warning {
+	color: tokens.$colors-text-warning !important;
+	border: 1px solid tokens.$colors-border-warning !important;
+}
+
+.overflow-chip {
+	border: 1px solid tokens.$cyan-lighten-90 !important;
+}
+
+// Disable overflow button hover state
+.overflow-btn :deep(.v-btn__overlay) {
+	display: none;
+}
+</style>

package/src/components/ChipList/config.ts

@@ -0,0 +1,27 @@
+type VuetifyVariant = 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+
+type PropsList = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+	[key: string]: any
+}
+
+interface ComponentConfig {
+	[key: string]: PropsList
+}
+
+export const config: ComponentConfig = {
+	chip: {
+		color: 'primary',
+		size: 'small',
+		variant: 'flat' as VuetifyVariant,
+		class: 'ma-1',
+	},
+	btn: {
+		size: 'small',
+		density: 'compact',
+		variant: 'text' as VuetifyVariant,
+	},
+	icon: {
+		size: 'medium',
+	},
+}

package/src/{stories/Guidelines/Accessibilite → components/ChipList}/constants/ExpertiseLevelEnum.ts

@@ -1,5 +1,4 @@
 export enum ExpertiseLevelEnum {
 	DEV = 'dev',
 	DESIGN = 'design',
-	DEV_DESIGN = 'dev_design',
 }

package/src/components/ChipList/locales.ts

@@ -0,0 +1,6 @@
+export const locales = {
+	closeBtnLabel: 'Supprimer le filtre pour cette valeur',
+	reset: 'Réinitialiser le filtre',
+	chipGroupLabel: 'Liste des filtres sélectionnés',
+	overflowLabel: 'Filtres supplémentaires',
+} as const

package/src/components/ChipList/tests/chipList.spec.ts

@@ -0,0 +1,300 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import ChipList from '../ChipList.vue'
+import type { ChipItem, ChipState } from '../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('ChipList', () => {
+	const defaultItems: ChipItem[] = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success' as ChipState,
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'info' as ChipState,
+		},
+	]
+
+	// Test du rendu de base
+	it('rend correctement les items', () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifie que tous les items sont rendus
+		const chips = wrapper.findAll('.v-chip')
+		expect(chips).toHaveLength(defaultItems.length)
+
+		// Vérifie le contenu des chips
+		defaultItems.forEach((item, index) => {
+			expect(chips[index].text()).toContain(item.text)
+		})
+	})
+
+	// Test des états visuels
+	it('applique les bonnes classes selon l\'état', () => {
+		const items: ChipItem[] = [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success' as ChipState,
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info' as ChipState,
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning' as ChipState,
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error' as ChipState,
+			},
+			{
+				text: 'Autre',
+				value: 'other',
+				state: '' as ChipState,
+			},
+		]
+
+		const wrapper = mount(ChipList, {
+			props: {
+				items,
+				overflowLimit: 6, // Augmenté pour voir tous les chips
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifie les classes d'état
+		const chips = wrapper.findAll('.v-chip')
+		expect(chips[0].classes()).toContain('sy-chip-success')
+		expect(chips[1].classes()).toContain('sy-chip-info')
+		expect(chips[2].classes()).toContain('sy-chip-warning')
+		expect(chips[3].classes()).toContain('sy-chip-error')
+
+		// Vérifie les couleurs de fond via les classes
+		expect(chips[0].classes()).toContain('bg-backgroundSuccessSubdued')
+		expect(chips[1].classes()).toContain('bg-backgroundInfoSubdued')
+		expect(chips[2].classes()).toContain('bg-backgroundWarningSubdued')
+		expect(chips[3].classes()).toContain('bg-backgroundErrorSubdued')
+		expect(chips[4].classes()).toContain('bg-primary') // État par défaut
+	})
+
+	it('applique les bonnes classes selon l\'état', () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const successChip = wrapper.find('.sy-chip-success')
+		const infoChip = wrapper.find('.sy-chip-info')
+
+		expect(successChip.exists()).toBe(true)
+		expect(infoChip.exists()).toBe(true)
+	})
+
+	// Test du mode readonly
+	it('cache les boutons de suppression en mode readonly', () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+				readonly: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const removeButtons = wrapper.findAll('.remove-chip')
+		expect(removeButtons).toHaveLength(0)
+
+		const resetButton = wrapper.find('[data-test-id="reset-btn"]')
+		expect(resetButton.exists()).toBe(false)
+	})
+
+	// Test de l'overflow
+	it('gère correctement le débordement', () => {
+		const manyItems: ChipItem[] = [
+			...defaultItems,
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning' as ChipState,
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error' as ChipState,
+			},
+		]
+
+		const wrapper = mount(ChipList, {
+			props: {
+				items: manyItems,
+				overflowLimit: 3,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifie que le nombre de chips visibles est correct
+		const visibleChips = wrapper.findAll('.v-chip').filter(chip =>
+			!chip.classes().includes('overflow-chip'),
+		)
+		expect(visibleChips).toHaveLength(2) // overflowLimit - 1
+
+		// Vérifie la présence du chip de débordement
+		const overflowChip = wrapper.find('.overflow-chip')
+		expect(overflowChip.exists()).toBe(true)
+		expect(overflowChip.text()).toContain('+2') // nombre d'items restants
+	})
+
+	// Test des événements
+	it('émet les événements remove et reset', async () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Test de l'événement remove
+		const removeButton = wrapper.find('.remove-chip')
+		await removeButton.trigger('click')
+		expect(wrapper.emitted('remove')).toBeTruthy()
+		expect(wrapper.emitted('remove')?.[0]).toEqual([defaultItems[0]])
+
+		// Test de l'événement reset
+		const resetButton = wrapper.find('[data-test-id="reset-btn"]')
+		await resetButton.trigger('click')
+		expect(wrapper.emitted('reset')).toBeTruthy()
+	})
+
+	// Test du texte personnalisé du bouton reset
+	it('affiche le texte personnalisé du bouton reset', () => {
+		const customResetText = 'Tout effacer'
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+				resetText: customResetText,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const resetButton = wrapper.find('[data-test-id="reset-btn"]')
+		expect(resetButton.text()).toBe(customResetText)
+	})
+
+	// Test de l'accessibilité
+	it('inclut les attributs d\'accessibilité appropriés', () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifie la présence des rôles ARIA
+		expect(wrapper.find('[role="list"]').exists()).toBe(true)
+		expect(wrapper.find('[role="group"]').exists()).toBe(true)
+		expect(wrapper.findAll('[role="listitem"]')).toHaveLength(defaultItems.length)
+
+		// Vérifie les labels ARIA des boutons
+		const removeButton = wrapper.find('.remove-chip')
+		expect(removeButton.attributes('aria-label')).toBeTruthy()
+	})
+
+	// Test du rendu conditionnel
+	it('ne rend rien quand la liste est vide', () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: [],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-chip-list').exists()).toBe(false)
+	})
+
+	// Test des différentes combinaisons de showOverflowChip et readonly
+	it.each([
+		{ readonly: true, hasOverflow: true, expectedRemoveButtons: 0, showsOverflowChip: true },
+		{ readonly: true, hasOverflow: false, expectedRemoveButtons: 0, showsOverflowChip: false },
+		{ readonly: false, hasOverflow: true, expectedRemoveButtons: 2, showsOverflowChip: true },
+		{ readonly: false, hasOverflow: false, expectedRemoveButtons: 2, showsOverflowChip: false },
+	])('gère correctement la combinaison readonly=$readonly et overflow=$hasOverflow', ({
+		readonly,
+		hasOverflow,
+		expectedRemoveButtons,
+		showsOverflowChip,
+	}) => {
+		const items = hasOverflow
+			? [
+					{ text: '1', value: '1', state: 'success' as ChipState },
+					{ text: '2', value: '2', state: 'info' as ChipState },
+					{ text: '3', value: '3', state: 'warning' as ChipState },
+					{ text: '4', value: '4', state: 'error' as ChipState },
+				]
+			: [
+					{ text: '1', value: '1', state: 'success' as ChipState },
+					{ text: '2', value: '2', state: 'info' as ChipState },
+				]
+
+		const wrapper = mount(ChipList, {
+			props: {
+				items,
+				readonly,
+				overflowLimit: 3,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifie la présence des boutons de suppression
+		const removeButtons = wrapper.findAll('.remove-chip')
+		expect(removeButtons).toHaveLength(expectedRemoveButtons)
+
+		// Vérifie la présence du chip de débordement
+		const overflowChip = wrapper.find('.overflow-chip')
+		expect(overflowChip.exists()).toBe(showsOverflowChip)
+
+		// Vérifie la présence du bouton reset
+		const resetButton = wrapper.find('[data-test-id="reset-btn"]')
+		expect(resetButton.exists()).toBe(!readonly)
+	})
+})

package/src/components/ChipList/types.ts

@@ -0,0 +1,7 @@
+export type ChipState = 'success' | 'warning' | 'error' | 'info' | undefined
+
+export interface ChipItem {
+	text: string
+	value: unknown
+	state?: ChipState
+}

package/src/components/ContextualMenu/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/ContextualMenu/Usages.stories.ts

@@ -0,0 +1,38 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Navigation/ContextualMenu/Usages',
+}
+const itemsToDo = [
+	'Utiliser des libellés explicites et représentatifs du contenu.',
+	'Rediriger l\'utilisateur vers le contenu ancré avec une animation fluide.',
+]
+
+const itemsNotToDo = [
+	'Rediriger l\'utilisateur vers le contenu ancré avec une action brusque (comme un retour immédiat) sans animation fluide.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/CopyBtn/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/CopyBtn/Usages.stories.ts

@@ -0,0 +1,41 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Boutons/CopyBtn/Usages',
+}
+
+const itemsToDo = [
+	'Ce bouton est toujours situé à droite de l\'élément qu\'il permet de copier.',
+	'Fournir un feedback clair après l\'action (succès ou echec), comme un message "Texte copié avec succès".',
+	'Rendez le texte source sélectionnable manuellement au cas où le bouton échoue.',
+]
+
+const itemsNotToDo = [
+	'Copier du texte sans le consentement de l\'utilisateur.',
+	'Fournir un feedback ambigu ou absent après une action.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}