@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/ChipList/ChipList.stories.ts

@@ -0,0 +1,1257 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ChipList from './ChipList.vue'
+import { mdiAccount } from '@mdi/js'
+import type { ChipItem } from './types'
+
+const meta = {
+	title: 'Composants/Données/ChipList',
+	component: ChipList,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['onRemove', 'onReset'] },
+	},
+	argTypes: {
+		items: {
+			description: 'Liste des éléments à afficher',
+			control: { type: 'object' },
+			table: {
+				type: { summary: 'ChipItem[]' },
+				defaultValue: { summary: '[]' },
+			},
+		},
+		overflowLimit: {
+			description: 'Nombre maximum d\'éléments avant débordement',
+			control: { type: 'number', min: 1 },
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '4' },
+			},
+		},
+		readonly: {
+			description: 'Désactive la possibilité de supprimer des éléments',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		resetText: {
+			description: 'Texte personnalisé pour le bouton de réinitialisation',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
+		onRemove: {
+			description: 'Événement émis lors de la suppression d\'un élément',
+			table: {
+				type: { summary: '(item: ChipItem) => void' },
+			},
+		},
+		onReset: {
+			description: 'Événement émis lors de la réinitialisation',
+			table: {
+				type: { summary: '() => void' },
+			},
+		},
+		displayPrependStateIcon: {
+			description: 'Affiche l\'icône d\'état au début du chip',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		displayAppendStateIcon: {
+			description: 'Affiche l\'icône d\'état à la fin du chip',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		customIcon: {
+			description: 'Icône personnalisée qui remplace l\'icône d\'état',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined' },
+			},
+		},
+		vuetifyOptions: {
+			description: 'Options de personnalisation Vuetify',
+			control: { type: 'object' },
+			table: {
+				type: { summary: 'ComponentsProps' },
+				defaultValue: { summary: '{}' },
+			},
+		},
+	},
+} satisfies Meta<typeof ChipList>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: '',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: '',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: '',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: '',
+		},
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+			},
+		],
+		overflowLimit: 5,
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+	<ChipList
+		:items="args.items"
+		:overflow-limit="args.overflowLimit"
+	/>
+            `,
+		}
+	},
+}
+
+export const Success: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: 'success',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'success',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: 'success',
+		},
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'success',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'success',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+				state: 'success',
+			},
+		],
+		overflowLimit: 5,
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+	<ChipList
+		:items="args.items"
+		:overflow-limit="args.overflowLimit"
+	/>
+            `,
+		}
+	},
+}
+
+export const Info: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'info',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: 'info',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'info',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: 'info',
+		},
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'info',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'info',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+				state: 'info',
+			},
+		],
+		overflowLimit: 5,
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+	<ChipList
+		:items="args.items"
+		:overflow-limit="args.overflowLimit"
+	/>
+            `,
+		}
+	},
+}
+
+export const Warning: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'warning',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: 'warning',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'warning',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: 'warning',
+		},
+		
+		const overflowLimit = 5
+	]
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'warning',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'warning',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+				state: 'warning',
+			},
+		],
+		overflowLimit: 5,
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+	<ChipList
+		:items="args.items"
+		:overflow-limit="args.overflowLimit"
+	/>
+            `,
+		}
+	},
+}
+
+export const Error: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'error',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: 'error',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'error',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: 'error',
+		},
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'error',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'error',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'error',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+				state: 'error',
+			},
+		],
+		overflowLimit: 5,
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+	<ChipList
+		:items="args.items"
+		:overflow-limit="args.overflowLimit"
+	/>
+            `,
+		}
+	},
+}
+
+export const ReadOnly: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+		:readonly="true"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success',
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'error',
+		},
+
+		{
+			text: 'Téléphone',
+			value: 'telephone',
+			state: 'warning',
+		},
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+		],
+		overflowLimit: 5,
+		readonly: true,
+	},
+	render: args => ({
+		components: { ChipList },
+		setup() {
+			return { args }
+		},
+		template: `
+			<ChipList
+				:items="args.items"
+				:overflow-limit="args.overflowLimit"
+				:readonly="args.readonly"
+			/>
+		`,
+	}),
+}
+
+export const CustomResetText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+		reset-text="Tout effacer"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success',
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'info'',
+		}
+	]
+	
+	const overflowLimit = 5
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+		],
+		overflowLimit: 5,
+		resetText: 'Tout effacer',
+	},
+	render: args => ({
+		components: { ChipList },
+		setup() {
+			return { args }
+		},
+		template: `
+			<ChipList
+				:items="args.items"
+				:overflow-limit="args.overflowLimit"
+				:reset-text="args.resetText"
+			/>
+		`,
+	}),
+}
+
+export const WithOverflow: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="3"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@cnamts/synapse'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+			state: 'info',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'warning',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+			state: 'error',
+		},
+	]
+	
+	const overflowLimit = 3
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error',
+			},
+			{
+				text: 'Notification',
+				value: 'notification',
+			},
+		],
+		overflowLimit: 3,
+	},
+	render: args => ({
+		components: { ChipList },
+		setup() {
+			return { args }
+		},
+		template: `
+			<ChipList
+				:items="args.items"
+				:overflow-limit="args.overflowLimit"
+			/>
+		`,
+	}),
+}
+
+export const WithEvents: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		@remove="handleRemove"
+		@reset="handleReset"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import ChipList from '@cnamts/synapse'
+import type { ChipItem } from '@cnamts/synapse/src/components/ChipList/types'
+
+const items = [
+	{
+		text: 'Email',
+		value: 'email',
+		state: 'success',
+	},
+	{
+		text: 'SMS',
+		value: 'sms',
+		state: 'info',
+	},
+	{
+		text: 'Téléphone',
+		value: 'telephone',
+		state: 'warning',
+	},
+	{
+		text: 'Courrier',
+		value: 'mail',
+		state: 'error',
+	},
+]
+
+const handleRemove = (item: ChipItem) => {
+	window.alert(\`Élément supprimé : \${item.text}\`)
+}
+
+const handleReset = () => {
+	window.alert('Liste réinitialisée')
+}
+</script>
+				`,
+			},
+		],
+		docs: {
+			description: {
+				story: 'Cette story démontre les événements émis par le composant ChipList. Une alerte s\'affiche lors de la suppression d\'un élément ou de la réinitialisation de la liste.',
+			},
+		},
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error',
+			},
+		],
+	},
+	render: args => ({
+		components: { ChipList },
+		setup() {
+			const handleRemove = (item: ChipItem) => {
+				window.alert(`Élément supprimé : ${item.text}`)
+			}
+
+			const handleReset = () => {
+				window.alert('Liste réinitialisée')
+			}
+
+			return {
+				args,
+				handleRemove,
+				handleReset,
+			}
+		},
+		template: `
+			<ChipList
+				v-bind="args"
+				@remove="handleRemove"
+				@reset="handleReset"
+			/>
+		`,
+	}),
+}
+
+export const WithPrependStateIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:display-prepend-state-icon="true"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import ChipList from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'Email',
+		value: 'email',
+		state: 'success',
+	},
+	{
+		text: 'SMS',
+		value: 'sms',
+		state: 'info',
+	},
+	{
+		text: 'Téléphone',
+		value: 'telephone',
+		state: 'warning',
+	},
+	{
+		text: 'Courrier',
+		value: 'mail',
+		state: 'error',
+	},
+]
+</script>
+				`,
+			},
+		],
+		docs: {
+			description: {
+				story: 'Cette story montre les chips avec une icône d\'état au début. L\'icône change en fonction de l\'état du chip.',
+			},
+		},
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error',
+			},
+		],
+		displayPrependStateIcon: true,
+	},
+}
+
+export const WithAppendStateIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:display-append-state-icon="true"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import ChipList from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'Email',
+		value: 'email',
+		state: 'success',
+	},
+	{
+		text: 'SMS',
+		value: 'sms',
+		state: 'info',
+	},
+	{
+		text: 'Téléphone',
+		value: 'telephone',
+		state: 'warning',
+	},
+	{
+		text: 'Courrier',
+		value: 'mail',
+		state: 'error',
+	},
+]
+</script>
+				`,
+			},
+		],
+		docs: {
+			description: {
+				story: 'Cette story montre les chips avec une icône d\'état à la fin. L\'icône change en fonction de l\'état du chip.',
+			},
+		},
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error',
+			},
+		],
+		displayAppendStateIcon: true,
+	},
+}
+
+export const WithCustomIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:display-prepend-state-icon="true"
+		:custom-icon="mdiAccount"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import ChipList from '@cnamts/synapse'
+import { mdiAccount } from '@mdi/js'
+
+const items = [
+	{
+		text: 'Email',
+		value: 'email',
+		state: 'success',
+	},
+	{
+		text: 'SMS',
+		value: 'sms',
+		state: 'info',
+	},
+	{
+		text: 'Téléphone',
+		value: 'telephone',
+		state: 'warning',
+	},
+	{
+		text: 'Courrier',
+		value: 'mail',
+		state: 'error',
+	},
+]
+</script>
+				`,
+			},
+		],
+		docs: {
+			description: {
+				story: 'Cette story montre les chips avec une icône personnalisée (étoile) qui remplace les icônes d\'état par défaut.',
+			},
+		},
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success',
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info',
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning',
+			},
+			{
+				text: 'Courrier',
+				value: 'mail',
+				state: 'error',
+			},
+		],
+		displayPrependStateIcon: true,
+		displayAppendStateIcon: false,
+		customIcon: mdiAccount,
+	},
+}
+
+export const Customization: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<ChipList
+		:items="items"
+		:overflow-limit="overflowLimit"
+		:vuetify-options="vuetifyOptions"
+	/>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+   import ChipList from '@/components/ChipList/ChipList.vue'
+   
+	const items = [
+		{
+			text: 'Email',
+			value: 'email',
+		},
+		{
+			text: 'Courrier',
+			value: 'courrier',
+
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+		},
+
+		{
+			text: 'Telephone',
+			value: 'telephone',
+		},
+	]
+	
+	const overflowLimit = 5
+	
+	const vuetifyOptions = {
+		chip: {
+			color: 'secondary',
+			size: 'large',
+			variant: 'elevated',
+		}
+	}
+</script>
+                `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{
+				text: 'Email',
+				value: 'email',
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+			},
+
+			{
+				text: 'Telephone',
+				value: 'telephone',
+			},
+		],
+		overflowLimit: 5,
+		vuetifyOptions: {
+			chip: {
+				color: 'secondary',
+				size: 'small',
+				variant: 'elevated',
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: { ChipList },
+			setup() {
+				return { args }
+			},
+			template: `
+			<ChipList
+				:items="args.items"
+				:overflow-limit="args.overflowLimit"
+				:vuetify-options="args.vuetifyOptions"
+			/>
+            `,
+		}
+	},
+}