@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/FilterInline/FilterInline.stories.ts

@@ -0,0 +1,406 @@
+import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSelect, VTextField } from 'vuetify/components'
+import PeriodField from '../PeriodField/PeriodField.vue'
+import SearchListField from '../SearchListField/SearchListField.vue'
+import FilterInline from './FilterInline.vue'
+import RangeField from '../RangeField/RangeField.vue'
+
+const meta = {
+	title: 'Composants/Filtres/FilterInline',
+	component: FilterInline,
+	argTypes: {
+		'modelValue': {
+			description: 'Valeur des filtres',
+			control: {
+				type: 'object',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'array',
+					detail: `{
+	name: string
+	value?: unknown
+	formatChip?: (value: unknown) => ChipItem[]
+	chipOverflowLimit?: number
+	title?: string
+}[]`,
+				},
+				defaultValue: {
+					summary: '[]',
+				},
+			},
+		},
+		'locales': {
+			description: 'Traductions',
+			control: {
+				type: 'object',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'Record<string, Function>',
+				},
+				defaultValue: {
+					summary: 'locales',
+					detail: `{
+	badgeLabel: (count: number): string =>
+		\`\${count} filtre\${count > 1 ? 's' : ''}\`,
+}`,
+				},
+			},
+		},
+		'onUpdate:modelValue': {
+			description: 'Événement déclenché lors de la mise à jour des filtres',
+			control: {
+				type: undefined,
+			},
+			table: {
+				category: 'events',
+				type: {
+					summary: 'array',
+					detail: `{
+	name: string
+	value?: unknown
+	formatChip?: (value: unknown) => ChipItem[]
+	chipOverflowLimit?: number
+	title?: string
+}[]`,
+				},
+			},
+		},
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - storybook can't infer dynamic slot name
+		'${filterName}': {
+			description: 'Slot pour les filtre. <br>Le nom de chaque slot correspond au nom (`name`) du filtre. <br>Le paramètre du slot `props` est un objet contenant les props à passer du filtre.',
+			table: {
+				category: 'slots',
+				type: {
+					summary: '{ props: Object }',
+				},
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			exclude: ['update:modelValue', '`${formatFilterName(filter.name)}`'],
+		},
+	},
+} satisfies Meta<typeof FilterInline>
+
+export default meta
+
+type Story = StoryObj<typeof FilterInline>
+
+export const Default: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { FilterInline, VTextField, VSelect, PeriodField, SearchListField },
+		setup() {
+			const filters = [
+				{
+					name: 'name',
+					title: 'Identité',
+				},
+				{
+					name: 'folder',
+					title: 'Type de dossier',
+				},
+				{
+					name: 'period',
+					title: 'Période',
+				},
+				{
+					name: 'profession',
+					title: 'Profession',
+				},
+			]
+
+			const folderTypes = [
+				{ title: 'Arrêt de Travail (AT)', value: 'AT' },
+				{ title: 'Maladie Professionnelle (MP)', value: 'MP' },
+				{ title: 'Autre', value: 'other' },
+			]
+
+			const professionList = [
+				{
+					label: 'Chirurgien-dentiste',
+					value: 'chirurgien-dentiste',
+				},
+				{
+					label: 'Infirmier',
+					value: 'infirmier',
+				},
+				{
+					label: 'Orthophoniste',
+					value: 'orthophoniste',
+				},
+				{
+					label: 'Orthoptiste',
+					value: 'orthoptiste',
+				},
+				{
+					label: 'Pédicure-podologue',
+					value: 'pedicure-podologue',
+				},
+				{
+					label: 'Pharmacien',
+					value: 'pharmacien',
+				},
+			]
+
+			return { args, filters, folderTypes, professionList }
+		},
+		template: `
+<FilterInline
+	v-model="filters"
+	v-bind="args"
+>
+	<template #name="{ props }">
+		<VTextField
+			v-bind="props"
+			label="Nom"
+			variant="outlined"
+			hide-details
+			color="primary"
+		/>
+	</template>
+
+	<template #folder="{ props }">
+		<p class="text-secondary mb-4">
+			Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+		</p>
+
+		<VSelect
+			v-bind="props"
+			:items="folderTypes"
+			label="Type de dossier"
+			multiple
+			variant="outlined"
+			return-object
+			hide-details
+			color="primary"
+		/>
+	</template>
+
+	<template #period="{ props }">
+		<PeriodField
+			v-bind="props"
+			variant="outlined"
+		/>
+	</template>
+
+	<template #profession="{ props }">
+		<SearchListField
+			v-bind="props"
+			:items="professionList"
+			color="primary"
+		/>
+	</template>
+</FilterInline>
+		`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FilterInline
+	v-model="filters"
+>
+	<template #name="{ props }">
+		<VTextField
+			v-bind="props"
+			label="Nom"
+			variant="outlined"
+			hide-details
+			color="primary"
+		/>
+	</template>
+
+	<template #folder="{ props }">
+		<p class="text-secondary mb-4">
+			Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+		</p>
+
+		<VSelect
+			v-bind="props"
+			:items="folderTypes"
+			label="Type de dossier"
+			multiple
+			variant="outlined"
+			return-object
+			hide-details
+			color="primary"
+		/>
+	</template>
+
+	<template #period="{ props }">
+		<PeriodField
+			v-bind="props"
+			variant="outlined"
+		/>
+	</template>
+
+	<template #profession="{ props }">
+		<SearchListField
+			v-bind="props"
+			:items="professionList"
+			color="primary"
+		/>
+	</template>
+</FilterInline>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { FilterInline, PeriodField, SearchListField } from '@cnamts/synapse'
+import { VTextField, VSelect } from 'vuetify/components'
+
+const filters = [
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+	{
+		name: 'period',
+		title: 'Période',
+	},
+	{
+		name: 'profession',
+		title: 'Profession',
+	},
+]
+
+const folderTypes = [
+	{ title: 'Arrêt de Travail (AT)', value: 'AT' },
+	{ title: 'Maladie Professionnelle (MP)', value: 'MP' },
+	{ title: 'Autre', value: 'other' },
+]
+
+const professionList = [
+	{
+		label: 'Chirurgien-dentiste',
+		value: 'chirurgien-dentiste',
+	},
+	{
+		label: 'Infirmier',
+		value: 'infirmier',
+	},
+	{
+		label: 'Orthophoniste',
+		value: 'orthophoniste',
+	},
+	{
+		label: 'Orthoptiste',
+		value: 'orthoptiste',
+	},
+	{
+		label: 'Pédicure-podologue',
+		value: 'pedicure-podologue',
+	},
+	{
+		label: 'Pharmacien',
+		value: 'pharmacien',
+	},
+]
+				`,
+			},
+		],
+	},
+}
+
+export const ChipFormat: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { FilterInline, RangeField },
+		setup() {
+			const filters = [
+				{
+					name: 'range-slider',
+					title: 'Intervalle',
+					value: [0, 50],
+					formatChip: ([min, max]: [number, number]) => [
+						{
+							text: `De ${min} à ${max}`,
+							value: [min, max],
+						},
+					],
+				},
+			]
+
+			const folderTypes = [
+				'AT',
+				'MP',
+				'Autre',
+			]
+
+			return { args, filters, folderTypes }
+		},
+		template: `
+<FilterInline v-model="filters">
+	<template #range-slider="{ props }">
+		<RangeField
+			v-bind="props"	
+			label="Intervalle"
+		/>
+	</template>
+</FilterInline>
+		`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FiltersInline v-model="filters">
+	<template #range-slider="{ props }">
+		<RangeField
+			v-bind="props"
+			label="Intervalle"
+			max="50"
+			min="0"
+		/>
+	</template>
+</FiltersInline>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { FilterInline, RangeField } from '@cnamts/synapse'
+import { VSelect } from 'vuetify/components'
+
+const filters = [
+	{
+		name: 'range-slider',
+		title: 'Intervalle',
+		formatChip: ([min, max]: [number, number]) => [
+			{
+				text: \`De \${min} à \${max}\`,
+				value: [min, max],
+			},
+		],
+	},
+]
+
+const folderTypes = [
+	'AT',
+	'MP',
+	'Autre',
+]
+				`,
+			},
+		],
+	},
+}

package/src/components/FilterInline/FilterInline.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+	import useFilterable, { type FilterProp } from '@/composables/useFilterable/useFilterable'
+	import { mdiChevronDown } from '@mdi/js'
+	import { toRef } from 'vue'
+	import ChipList from '../ChipList/ChipList.vue'
+	import { locales as defaultLocales } from './locales'
+	import type { ChipItem } from '../ChipList/types'
+
+	const props = withDefaults(defineProps<{
+		modelValue?: FilterProp
+		locales?: typeof defaultLocales
+	}>(), {
+		modelValue: () => [],
+		locales: () => defaultLocales,
+	})
+
+	const emits = defineEmits<{
+		'update:modelValue': (value: FilterProp) => void
+	}>()
+
+	const {
+		filters,
+		updateValue,
+		removeChip,
+		resetFilter,
+		getChips,
+		getFilterCount,
+		formatFilterName,
+	} = useFilterable(toRef(props, 'modelValue'), emits)
+
+</script>
+
+<template>
+	<div class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2">
+		<VMenu
+			v-for="filter in filters"
+			:key="filter.name"
+			:close-on-content-click="false"
+			min-width="300px"
+			width="400px"
+			offset="12"
+			nudge-bottom="10px"
+		>
+			<template #activator="{ props: menuProps }">
+				<VBtn
+					v-bind="menuProps"
+					:class="`sy-filter-${filter.name}`"
+					:variant="getFilterCount(filter) ? undefined : 'outlined'"
+					color="secondary"
+					rounded
+					class="ma-2"
+				>
+					<VBadge
+						v-if="getFilterCount(filter)"
+						:content="getFilterCount(filter)"
+						:label="locales.badgeLabel(getFilterCount(filter))"
+						inline
+						class="ml-n1 mr-1"
+					/>
+
+					{{ filter.title }}
+
+					<VIcon
+						size="small"
+						class="ml-1"
+					>
+						{{ mdiChevronDown }}
+					</VIcon>
+				</VBtn>
+			</template>
+
+			<VSheet
+				color="white"
+				class="pa-4"
+			>
+				<ChipList
+					:items="getChips(filter)"
+					:overflow-limit="filter.chipOverflowLimit"
+					class="mb-5"
+					:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
+					@remove="removeChip(filter, $event)"
+					@reset="resetFilter(filter)"
+				/>
+				<slot
+					:props="{
+						modelValue: filter.value,
+						'onUpdate:modelValue': (value: ChipItem) => {
+							if (value !== filter.value) {
+								filter.value = value
+								updateValue()
+							}
+						},
+					}"
+					:name="`${formatFilterName(filter.name)}`"
+				/>
+			</VSheet>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.v-badge :deep(.v-badge__badge) {
+	color: tokens.$cyan-darken-40 !important;
+	background-color: white;
+}
+</style>

package/src/components/FilterInline/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	badgeLabel: (count: number): string =>
+		`${count} filtre${count > 1 ? 's' : ''}`,
+} as const

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

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import FilterInline from '../FilterInline.vue'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../locales'
+
+describe('FilterInline', () => {
+	it('should render correctly', () => {
+		const wrapper = mount(FilterInline, {
+			props: {},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with an active filter', () => {
+		const wrapper = mount(FilterInline, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						label: 'Nom',
+						value: 'John Doe',
+					},
+				],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with multiple active filters', () => {
+		const wrapper = mount(FilterInline, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						label: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'profession',
+						label: 'Profession',
+						value: ['Infirmer', 'Pharmacien'],
+					},
+				],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})
+
+describe('FiltersInline locales', () => {
+	it('should return the correct locale', () => {
+		expect(locales.badgeLabel(0)).toMatchSnapshot()
+		expect(locales.badgeLabel(1)).toMatchSnapshot()
+		expect(locales.badgeLabel(2)).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FilterInline > renders correctly with an active filter 1`] = `
+"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-name ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="1 filtre" aria-live="polite" role="status">1</span></transition-stub>
+</div>
+</div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
+<!---->
+<!----></button>
+<!---->
+</div>"
+`;
+
+exports[`FilterInline > renders correctly with multiple active filters 1`] = `
+"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-name ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="1 filtre" aria-live="polite" role="status">1</span></transition-stub>
+</div>
+</div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
+<!---->
+<!----></button>
+<!----><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-profession ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+  <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="2 filtres" aria-live="polite" role="status">2</span></transition-stub>
+  </div>
+  </div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
+  <!---->
+  <!---->
+</button>
+<!---->
+</div>"
+`;
+
+exports[`FilterInline > should render correctly 1`] = `"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"></div>"`;
+
+exports[`FiltersInline locales > should return the correct locale 1`] = `"0 filtre"`;
+
+exports[`FiltersInline locales > should return the correct locale 2`] = `"1 filtre"`;
+
+exports[`FiltersInline locales > should return the correct locale 3`] = `"2 filtres"`;

package/src/components/HeaderBar/Usages.mdx

@@ -1,10 +1,15 @@
-import { Meta } from "@storybook/blocks";
-import * as HeaderBarStories from "./HeaderBar.stories";
+import { Meta, Story} from "@storybook/blocks";
+import * as HeaderBarStories from "./HeaderBar.stories.ts";
+import * as UsagesStories from "./Usages.stories.ts";
 
 <Meta of={HeaderBarStories} />
 
 # Usages
 
+<Story of={Usagesstories.UsagePage} />
+
+<br />
+
 <br />
 
 <img alt="HeaderBar1" src={'/HeaderBar1.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

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

@@ -0,0 +1,39 @@
+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/Structure/HeaderBar/Usages',
+}
+
+const itemsToDo = [
+	'Utiliser une largeur maximale de 1712px (container max de 1600px + left-margin (56px) et right-margin (56px)), le header restant centré dans la page.',
+	'Utiliser le type de menu le plus adapté au produit : un burger menu pour les produits complexes et le menu en onglet pour les produits à l\'arborescence restreinte.',
+]
+
+const itemsNotToDo = [
+	'Utiliser le menu en onglet si il existe plus de 6 entrées différentes.',
+]
+
+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/NirField/NirField.stories.ts

@@ -6,7 +6,7 @@ const meta: Meta<typeof NirField> = {
 	component: NirField,
 	decorators: [
 		() => ({
-			template: '<div style="padding: 20px;"><story/></div>',
+			template: '<div style="padding:20px; max-width: 600px;"><story/></div>',
 		}),
 	],
 	parameters: {