@cnamts/synapse 1.0.23 → 1.0.25

package/src/composantsVuetify/VBreadcrumbs/v-breadcrumbs.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VBreadcrumbs } from 'vuetify/components'
+
+const meta = {
+	title: 'Composants/Composants Vuetify/VBreadcrumbs',
+	component: VBreadcrumbs,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src.replace(/VBreadcrumbs/g, 'v-breadcrumbs'),
+			},
+		},
+	},
+	tags: ['!dev'],
+	argTypes: {
+		items: {
+			control: 'object',
+			description: 'Liste des éléments du fil d\'ariane',
+		},
+		divider: {
+			control: 'text',
+			description: 'Caractère de séparation entre les éléments',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Désactive tous les liens',
+		},
+		color: {
+			control: 'text',
+			description: 'Couleur appliquée aux liens actifs (ex: primary, secondary, error...)',
+		},
+	},
+} satisfies Meta<typeof VBreadcrumbs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		color: 'primary',
+		items: [
+			{
+				title: 'Accueil',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Page actuelle',
+				disabled: true,
+				href: 'javascript:void(0)',
+			},
+		],
+	},
+}
+
+export const CustomDivider: Story = {
+	args: {
+		divider: '›',
+		color: 'primary',
+		items: [
+			{
+				title: 'Accueil',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Sous-catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Page actuelle',
+				disabled: true,
+			},
+		],
+	},
+}
+
+export const Disabled: Story = {
+	args: {
+		items: [
+			{
+				title: 'Accueil',
+				href: 'javascript:void(0)',
+				disabled: true,
+			},
+			{
+				title: 'Catégorie',
+				href: 'javascript:void(0)',
+				disabled: true,
+			},
+			{
+				title: 'Page actuelle',
+			},
+		],
+	},
+}

package/src/composantsVuetify/VBtn/VBtn.mdx

@@ -0,0 +1,72 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VBtnStories from './v-btn.stories'
+
+<Meta title="Composants/Composants Vuetify/VBtn" />
+
+<div className="header">
+    <h1>VBtn</h1>
+Ce composant utilise directement le composant natif `v-btn` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-btn/#props).
+</div>
+
+## Primary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.PrimaryElevated} />
+  <Canvas of={VBtnStories.PrimaryOutlined} />
+  <Canvas of={VBtnStories.PrimaryTonal} />
+  <Canvas of={VBtnStories.PrimaryText} />
+</div>
+
+## Primary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.PrimaryElevatedDisabled} />
+  <Canvas of={VBtnStories.PrimaryOutlinedDisabled} />
+  <Canvas of={VBtnStories.PrimaryTonalDisabled} />
+  <Canvas of={VBtnStories.PrimaryTextDisabled} />
+</div>
+
+## Secondary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.SecondaryElevated} />
+  <Canvas of={VBtnStories.SecondaryOutlined} />
+  <Canvas of={VBtnStories.SecondaryTonal} />
+  <Canvas of={VBtnStories.SecondaryText} />
+</div>
+
+## Secondary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.SecondaryElevatedDisabled} />
+  <Canvas of={VBtnStories.SecondaryOutlinedDisabled} />
+  <Canvas of={VBtnStories.SecondaryTonalDisabled} />
+  <Canvas of={VBtnStories.SecondaryTextDisabled} />
+</div>
+
+## Tertiary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.TertiaryElevated} />
+  <Canvas of={VBtnStories.TertiaryOutlined} />
+  <Canvas of={VBtnStories.TertiaryTonal} />
+  <Canvas of={VBtnStories.TertiaryText} />
+</div>
+
+## Tertiary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VBtnStories.TertiaryElevatedDisabled} />
+  <Canvas of={VBtnStories.TertiaryOutlinedDisabled} />
+  <Canvas of={VBtnStories.TertiaryTonalDisabled} />
+  <Canvas of={VBtnStories.TertiaryTextDisabled} />
+</div>
+
+## Variants disponibles
+
+- `elevated` – Bouton avec ombre (défaut)
+- `outlined` – Fond transparent avec bordure
+- `tonal` – Fond teinté de la couleur
+- `text` – Sans fond ni bordure
+- `plain` – Sans fond ni bordure, opacité réduite

package/src/composantsVuetify/VBtn/v-btn.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta = {
+	title: 'Composants/Composants Vuetify/VBtn',
+	tags: ['!dev'],
+	render: args => ({
+		setup() {
+			return { args }
+		},
+		template: `
+      <v-btn :color="args.color" :variant="args.variant" :disabled="args.disabled">
+        {{ args.label }}
+      </v-btn>
+    `,
+	}),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Primary ---
+export const PrimaryElevated: Story = {
+	args: { label: 'Button primary elevated', color: 'primary', variant: 'elevated', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated">Button</v-btn>` } } },
+}
+export const PrimaryOutlined: Story = {
+	args: { label: 'Button primary outlined', color: 'primary', variant: 'outlined', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined">Button</v-btn>` } } },
+}
+export const PrimaryTonal: Story = {
+	args: { label: 'Button primary tonal', color: 'primary', variant: 'tonal', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal">Button</v-btn>` } } },
+}
+export const PrimaryText: Story = {
+	args: { label: 'Button primary text', color: 'primary', variant: 'text', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text">Button</v-btn>` } } },
+}
+export const PrimaryElevatedDisabled: Story = {
+	args: { label: 'Button primary elevated disabled', color: 'primary', variant: 'elevated', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="elevated" disabled>Button</v-btn>` } } },
+}
+export const PrimaryOutlinedDisabled: Story = {
+	args: { label: 'Button primary outlined disabled', color: 'primary', variant: 'outlined', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="outlined" disabled>Button</v-btn>` } } },
+}
+export const PrimaryTonalDisabled: Story = {
+	args: { label: 'Button primary tonal disabled', color: 'primary', variant: 'tonal', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="tonal" disabled>Button</v-btn>` } } },
+}
+export const PrimaryTextDisabled: Story = {
+	args: { label: 'Button primary text disabled', color: 'primary', variant: 'text', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="primary" variant="text" disabled>Button</v-btn>` } } },
+}
+
+// --- Secondary ---
+export const SecondaryElevated: Story = {
+	args: { label: 'Button secondary elevated', color: 'secondary', variant: 'elevated', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated">Button</v-btn>` } } },
+}
+export const SecondaryOutlined: Story = {
+	args: { label: 'Button secondary outlined', color: 'secondary', variant: 'outlined', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined">Button</v-btn>` } } },
+}
+export const SecondaryTonal: Story = {
+	args: { label: 'Button secondary tonal', color: 'secondary', variant: 'tonal', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal">Button</v-btn>` } } },
+}
+export const SecondaryText: Story = {
+	args: { label: 'Button secondary text', color: 'secondary', variant: 'text', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text">Button</v-btn>` } } },
+}
+export const SecondaryElevatedDisabled: Story = {
+	args: { label: 'Button secondary elevated disabled', color: 'secondary', variant: 'elevated', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="elevated" disabled>Button</v-btn>` } } },
+}
+export const SecondaryOutlinedDisabled: Story = {
+	args: { label: 'Button secondary outlined disabled', color: 'secondary', variant: 'outlined', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="outlined" disabled>Button</v-btn>` } } },
+}
+export const SecondaryTonalDisabled: Story = {
+	args: { label: 'Button secondary tonal disabled', color: 'secondary', variant: 'tonal', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="tonal" disabled>Button</v-btn>` } } },
+}
+export const SecondaryTextDisabled: Story = {
+	args: { label: 'Button secondary text disabled', color: 'secondary', variant: 'text', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="secondary" variant="text" disabled>Button</v-btn>` } } },
+}
+
+// --- Tertiary ---
+export const TertiaryElevated: Story = {
+	args: { label: 'Button tertiary elevated', color: 'tertiary', variant: 'elevated', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated">Button</v-btn>` } } },
+}
+export const TertiaryOutlined: Story = {
+	args: { label: 'Button tertiary outlined', color: 'tertiary', variant: 'outlined', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined">Button</v-btn>` } } },
+}
+export const TertiaryTonal: Story = {
+	args: { label: 'Button tertiary tonal', color: 'tertiary', variant: 'tonal', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal">Button</v-btn>` } } },
+}
+export const TertiaryText: Story = {
+	args: { label: 'Button tertiary text', color: 'tertiary', variant: 'text', disabled: false },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text">Button</v-btn>` } } },
+}
+export const TertiaryElevatedDisabled: Story = {
+	args: { label: 'Button tertiary elevated disabled', color: 'tertiary', variant: 'elevated', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="elevated" disabled>Button</v-btn>` } } },
+}
+export const TertiaryOutlinedDisabled: Story = {
+	args: { label: 'Button tertiary outlined disabled', color: 'tertiary', variant: 'outlined', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="outlined" disabled>Button</v-btn>` } } },
+}
+export const TertiaryTonalDisabled: Story = {
+	args: { label: 'Button tertiary tonal disabled', color: 'tertiary', variant: 'tonal', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="tonal" disabled>Button</v-btn>` } } },
+}
+export const TertiaryTextDisabled: Story = {
+	args: { label: 'Button tertiary text disabled', color: 'tertiary', variant: 'text', disabled: true },
+	parameters: { docs: { source: { code: `<v-btn color="tertiary" variant="text" disabled>Button</v-btn>` } } },
+}

package/src/composantsVuetify/VOtpInput/VOtpInput.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VOtpInputStories from './v-otp-input.stories'
+
+<Meta title="Composants/Composants Vuetify/VOtpInput" />
+
+<div className="header">
+    <h1>VOtpInput</h1>
+Ce composant utilise directement le composant natif `v-otp-input` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-otp-input/#props).
+</div>
+
+## Variants
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.Default} />
+  <Canvas of={VOtpInputStories.Underlined} />
+  <Canvas of={VOtpInputStories.Filled} />
+</div>
+
+## États
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.Disabled} />
+  <Canvas of={VOtpInputStories.Error} />
+</div>
+
+## Longueur personnalisée
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.FourDigits} />
+</div>
+
+## Variants disponibles
+
+- `outlined` – Avec bordure (défaut)
+- `underlined` – Souligné uniquement
+- `filled` – Avec fond
+- `solo` – Sans bordure avec élévation
+- `plain` – Minimal sans style

package/src/composantsVuetify/VOtpInput/v-otp-input.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta = {
+	title: 'Composants/Composants Vuetify/VOtpInput',
+	tags: ['!dev'],
+	render: args => ({
+		setup() {
+			return { args }
+		},
+		template: `
+      <v-otp-input 
+        :length="args.length" 
+        :disabled="args.disabled"
+        :error="args.error"
+        :variant="args.variant"
+      />
+    `,
+	}),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Default ---
+export const Default: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" />` } } },
+}
+
+export const Underlined: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'underlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" variant="underlined" />` } } },
+}
+
+export const Filled: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'filled' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" variant="filled" />` } } },
+}
+
+// --- Disabled ---
+export const Disabled: Story = {
+	args: { length: 6, disabled: true, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" disabled />` } } },
+}
+
+// --- Error ---
+export const Error: Story = {
+	args: { length: 6, disabled: false, error: true, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" error />` } } },
+}
+
+// --- Different lengths ---
+export const FourDigits: Story = {
+	args: { length: 4, disabled: false, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="4" />` } } },
+}

package/src/composantsVuetify/VSkeletonLoader/VSkeletonLoader.mdx

@@ -0,0 +1,42 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VSkeletonLoaderStories from './v-skeleton-loader.stories'
+
+<Meta title="Composants/Composants Vuetify/VSkeletonLoader" />
+
+<div className="header">
+    <h1>VSkeletonLoader</h1>
+Ce composant utilise directement le composant natif `v-skeleton-loader` de Vuetify. 
+Il est utilisé pour fournir une indication visuelle qu'un contenu est en cours de chargement. 
+Il améliore l'expérience utilisateur en montrant une structure de placeholder pendant le chargement des données. 
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-skeleton-loader/#props).
+</div>
+
+## Utilisation de base
+
+<Canvas of={VSkeletonLoaderStories.Default} withToolbar={false} />
+
+## Types disponibles
+
+Le composant offre plusieurs types prédéfinis pour différents cas d'usage :
+
+### Article
+<Canvas of={VSkeletonLoaderStories.Article} withToolbar={false} />
+
+### Avatar
+<Canvas of={VSkeletonLoaderStories.Avatar} withToolbar={false} />
+
+### Card
+<Canvas of={VSkeletonLoaderStories.Card} withToolbar={false} />
+
+### List Item
+<Canvas of={VSkeletonLoaderStories.ListItem} withToolbar={false} />
+
+### Boilerplate
+Sans animation (statique) :
+<Canvas of={VSkeletonLoaderStories.Boilerplate} withToolbar={false} />
+
+## Bonnes pratiques
+
+- Utilisez des skeletons qui correspondent à la structure du contenu final
+- Privilégiez l'utilisation de types prédéfinis pour une cohérence visuelle
+- Désactivez l'animation (`boilerplate`) si vous avez de nombreux skeletons sur la page pour améliorer les performances

package/src/composantsVuetify/VSkeletonLoader/v-skeleton-loader.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSkeletonLoader } from 'vuetify/components'
+
+const meta: Meta<typeof VSkeletonLoader> = {
+	title: 'Composants/Composants Vuetify/VSkeletonLoader',
+	tags: ['!dev'],
+	component: VSkeletonLoader,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src.replace(/VSkeletonLoader/g, 'v-skeleton-loader'),
+			},
+		},
+	},
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			options: ['article', 'avatar', 'card', 'list-item-avatar'],
+			description: 'Type de skeleton loader',
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Affiche le skeleton loader',
+		},
+		boilerplate: {
+			control: { type: 'boolean' },
+			description: 'Affiche une version simplifiée du skeleton loader',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VSkeletonLoader>
+
+export const Default: Story = {
+	args: {
+		type: 'card',
+		loading: true,
+	},
+}
+
+export const Article: Story = {
+	args: {
+		type: 'article',
+		loading: true,
+	},
+}
+
+export const Avatar: Story = {
+	args: {
+		type: 'avatar',
+		loading: true,
+	},
+}
+
+export const Card: Story = {
+	args: {
+		type: 'card',
+		loading: true,
+	},
+}
+
+export const ListItem: Story = {
+	args: {
+		type: 'list-item-avatar',
+		loading: true,
+	},
+}
+
+export const Boilerplate: Story = {
+	args: {
+		type: 'card',
+		boilerplate: true,
+	},
+}

package/src/composantsVuetify/VSwitch/VSwitch.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VSwitchStories from './v-switch.stories'
+
+<Meta title="Composants/Composants Vuetify/VSwitch" />
+
+<div className="header">
+    <h1>VSwitch</h1>
+Ce composant utilise directement le composant natif `v-switch` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-switch/#props).
+</div>
+
+## Primary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.PrimaryOn} />
+  <Canvas of={VSwitchStories.PrimaryOff} />
+  <Canvas of={VSwitchStories.PrimaryInsetOn} />
+  <Canvas of={VSwitchStories.PrimaryInsetOff} />
+</div>
+
+## Primary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.PrimaryOnDisabled} />
+  <Canvas of={VSwitchStories.PrimaryOffDisabled} />
+</div>
+
+## Secondary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.SecondaryOn} />
+  <Canvas of={VSwitchStories.SecondaryOff} />
+  <Canvas of={VSwitchStories.SecondaryInsetOn} />
+  <Canvas of={VSwitchStories.SecondaryInsetOff} />
+</div>
+
+## Secondary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.SecondaryOnDisabled} />
+  <Canvas of={VSwitchStories.SecondaryOffDisabled} />
+</div>
+
+## Variants disponibles
+
+- `default` – Switch standard
+- `inset` – Switch avec style inset (plus large)