@cnamts/synapse 1.0.24 → 1.0.26

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)

package/src/composantsVuetify/VSwitch/v-switch.stories.ts

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSwitch } from 'vuetify/components'
+
+const meta: Meta<typeof VSwitch> = {
+	title: 'Composants/Composants Vuetify/VSwitch',
+	tags: ['!dev'],
+	component: VSwitch,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src.replace(/VSwitch/g, 'v-switch'),
+			},
+		},
+	},
+	argTypes: {
+		color: {
+			control: { type: 'text' },
+			description: 'Couleur du switch',
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Désactive le switch',
+		},
+		label: {
+			control: { type: 'text' },
+			description: 'Label du switch',
+		},
+		inset: {
+			control: { type: 'boolean' },
+			description: 'Style inset du switch',
+		},
+		hideDetails: {
+			control: { type: 'boolean' },
+			description: 'Masque les détails (messages d\'erreur, etc.)',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VSwitch>
+
+// Primary
+
+export const PrimaryOn: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON',
+		color: 'primary',
+		hideDetails: true,
+	},
+}
+
+export const PrimaryOff: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF',
+		color: 'primary',
+		hideDetails: true,
+	},
+}
+
+export const PrimaryInsetOn: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON (inset)',
+		color: 'primary',
+		inset: true,
+		hideDetails: true,
+	},
+}
+
+export const PrimaryInsetOff: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF (inset)',
+		color: 'primary',
+		inset: true,
+		hideDetails: true,
+	},
+}
+
+// Primary – Désactivé
+
+export const PrimaryOnDisabled: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON – désactivé',
+		color: 'primary',
+		disabled: true,
+		hideDetails: true,
+	},
+}
+
+export const PrimaryOffDisabled: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF – désactivé',
+		color: 'primary',
+		disabled: true,
+		hideDetails: true,
+	},
+}
+
+// Secondary
+
+export const SecondaryOn: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON',
+		color: 'secondary',
+		hideDetails: true,
+	},
+}
+
+export const SecondaryOff: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF',
+		color: 'secondary',
+		hideDetails: true,
+	},
+}
+
+export const SecondaryInsetOn: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON (inset)',
+		color: 'secondary',
+		inset: true,
+		hideDetails: true,
+	},
+}
+
+export const SecondaryInsetOff: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF (inset)',
+		color: 'secondary',
+		inset: true,
+		hideDetails: true,
+	},
+}
+
+// Secondary – Désactivé
+
+export const SecondaryOnDisabled: Story = {
+	args: {
+		modelValue: true,
+		label: 'ON – désactivé',
+		color: 'secondary',
+		disabled: true,
+		hideDetails: true,
+	},
+}
+
+export const SecondaryOffDisabled: Story = {
+	args: {
+		modelValue: false,
+		label: 'OFF – désactivé',
+		color: 'secondary',
+		disabled: true,
+		hideDetails: true,
+	},
+}

package/src/designTokens/tests/buildColorClassMap.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { buildColorClassMap } from '../utils/buildColorClassMap'
+import { apColorClasses, apColorsTokens2026 } from '../tokens/amelipro/apColors2026'
+
+describe('buildColorClassMap', () => {
+	it('maps base color to kebab-case class without -base suffix', () => {
+		const tokens = { apBlue: { base: '#0c419a' } }
+		const map = buildColorClassMap(tokens)
+		expect(map['ap-blue']).toBe('#0c419a')
+		expect(map['ap-blue-base']).toBeUndefined()
+	})
+
+	it('maps color with numeric variant to dash-separated class', () => {
+		const tokens = { apBlue: { darken1: '#00749c', lighten2: '#ccedf9' } }
+		const map = buildColorClassMap(tokens)
+		expect(map['ap-blue-darken-1']).toBe('#00749c')
+		expect(map['ap-blue-lighten-2']).toBe('#ccedf9')
+	})
+
+	it('apColorClasses matches buildColorClassMap output for apColorsTokens2026', () => {
+		const generated = buildColorClassMap(apColorsTokens2026)
+		expect(apColorClasses).toEqual(generated)
+	})
+
+	it('includes all colors from apColorsTokens2026', () => {
+		expect(apColorClasses['ap-blue']).toBe('#0c419a')
+		expect(apColorClasses['ap-blue-darken-1']).toBe('#00749c')
+		expect(apColorClasses['ap-grey-lighten-6']).toBe('#f4f8f9')
+		expect(apColorClasses['ap-turquoise-darken-3']).toBe('#005647')
+	})
+})

package/src/designTokens/tests/generateScssTokens.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { cnamContextualTokens } from '../tokens/cnam/cnamContextual'
+import { paContextualTokens } from '../tokens/pa/paContextual'
+import { apContextualTokens } from '../tokens/amelipro/apContextual'
+
+describe('contextual tokens alignment', () => {
+	it('keeps canonical contextual gap values aligned across themes', () => {
+		expect(cnamContextualTokens.gap[3]).toBe('12px')
+		expect(paContextualTokens.gap[3]).toBe('12px')
+		expect(apContextualTokens.gap[3]).toBe('12px')
+	})
+})

package/src/designTokens/tests/themeUtils.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { generateThemeVariables } from '../utils/convertSemanticsToken'
+import { createFlattenTheme } from '@/designTokens/utils'
+
+describe('design token utils', () => {
+	it('flattens nested theme objects without non-null assertions', () => {
+		expect(createFlattenTheme({
+			primary: {
+				base: '#0c419a',
+			},
+			spacing: {
+				md: 16,
+			},
+		})).toEqual({
+			'primary-base': '#0c419a',
+			'spacing-md': 16,
+		})
+	})
+
+	it('throws when a flattened theme value is undefined', () => {
+		expect(() => createFlattenTheme({
+			primary: {
+				base: undefined,
+			},
+		} as unknown as Parameters<typeof createFlattenTheme>[0])).toThrowError('Missing theme value for key "primary-base"')
+	})
+
+	it('generates semantic theme variables from token categories', () => {
+		expect(generateThemeVariables({
+			colors: {
+				background: {
+					main: '#ffffff',
+				},
+				text: {
+					base: '#222324',
+				},
+			},
+		})).toEqual({
+			onBackgroundMain: '#ffffff',
+			onTextBase: '#222324',
+		})
+	})
+
+	it('throws when a semantic token value is undefined', () => {
+		expect(() => generateThemeVariables({
+			colors: {
+				background: {
+					main: undefined,
+				},
+			},
+		} as unknown as Parameters<typeof generateThemeVariables>[0])).toThrowError('Missing semantic token "main" in category "background"')
+	})
+})

package/src/designTokens/tokens/amelipro/apColors.ts

@@ -1,4 +1,7 @@
+import { baseColors } from '../baseColors'
+
 export const apColorsTokens = {
+	...baseColors,
 	amber: {
 		darken80: '#502C01',
 		darken60: '#784201',
@@ -10,72 +13,7 @@ export const apColorsTokens = {
 		lighten60: '#f7c281',
 		lighten80: '#fad6ab',
 		lighten90: '#fce6cc',
-		lighten97: '#FFFAF5',
-	},
-	yellow: {
-		darken80: '#302407',
-		darken60: '#60480e',
-		darken40: '#906b15',
-		darken20: '#c08f1c',
-		base: '#f0b323',
-		lighten20: '#f3c24f',
-		lighten40: '#f6d17b',
-		lighten60: '#f9e1a7',
-		lighten80: '#fcf0d3',
-		lighten90: '#fdf7e9',
-		lighten97: '#fffdf8',
-	},
-	green: {
-		darken80: '#112717',
-		darken60: '#224e2d',
-		darken40: '#347444',
-		darken20: '#459b5a',
-		base: '#56c271',
-		lighten20: '#78ce8d',
-		lighten40: '#9adaaa',
-		lighten60: '#bbe7c6',
-		lighten80: '#ddf3e3',
-		lighten90: '#eef9f1',
-		lighten97: '#fafdfb',
-	},
-	turquoise: {
-		darken80: '#00221c',
-		darken60: '#004439',
-		darken40: '#006755',
-		darken20: '#008972',
-		base: '#00ab8e',
-		lighten20: '#33bca5',
-		lighten40: '#66cdbb',
-		lighten60: '#99ddd2',
-		lighten80: '#cceee8',
-		lighten90: '#e5f7f4',
-		lighten97: '#f7fcfc',
-	},
-	blue: {
-		darken80: '#020d1f',
-		darken60: '#051a3e',
-		darken40: '#07275c',
-		darken20: '#0a347b',
-		base: '#0c419a',
-		lighten20: '#3d67ae',
-		lighten40: '#6d8dc2',
-		lighten60: '#9eb3d7',
-		lighten80: '#ced9eb',
-		lighten90: '#e7ecf5',
-		lighten97: '#f8f9fc',
-	},
-	cyan: {
-		darken80: '#00212d',
-		darken60: '#004259',
-		darken40: '#006386',
-		darken20: '#0084b2',
-		base: '#00a5df',
-		lighten20: '#33b7e5',
-		lighten40: '#66c9ec',
-		lighten60: '#99dbf2',
-		lighten80: '#ccedf9',
-		lighten90: '#e5f6fc',
-		lighten97: '#f7fcfe',
+		lighten97: '#fffaf5',
 	},
 	forestGreen: {
 		darken80: '#002821',
@@ -88,79 +26,19 @@ export const apColorsTokens = {
 		lighten60: '#80bcb1',
 		lighten80: '#aad2cb',
 		lighten90: '#cce4e0',
-		lighten97: '#EEFFFC',
-	},
-	parma: {
-		darken80: '#171c26',
-		darken60: '#2f384d',
-		darken40: '#465473',
-		darken20: '#5e709a',
-		base: '#758cc0',
-		lighten20: '#91a3cd',
-		lighten40: '#acbad9',
-		lighten60: '#c8d1e6',
-		lighten80: '#e3e8f2',
-		lighten90: '#f1f3f9',
-		lighten97: '#fbfcfd',
-	},
-	mauve: {
-		darken80: '#201224',
-		darken60: '#402449',
-		darken40: '#60376d',
-		darken20: '#804992',
-		base: '#a05bb6',
-		lighten20: '#b37cc5',
-		lighten40: '#c69dd3',
-		lighten60: '#d9bde2',
-		lighten80: '#ecdef0',
-		lighten90: '#f5eff8',
-		lighten97: '#fcfafd',
-	},
-	pink: {
-		darken80: '#2D051A',
-		darken60: '#5a0a34',
-		darken40: '#87104d',
-		darken20: '#b41567',
-		base: '#e11a81',
-		lighten20: '#e7489a',
-		lighten40: '#ed76b3',
-		lighten60: '#f3a3cd',
-		lighten80: '#f9d1e6',
-		lighten90: '#fce8f2',
-		lighten97: '#fef8fb',
+		lighten97: '#eefffc',
 	},
 	red: {
 		darken80: '#4d0000',
 		darken60: '#740000',
 		darken40: '#9b0000',
-		darken20: '#B30E0E',
+		darken20: '#b30e0e',
 		base: '#e80000',
 		lighten20: '#ec2a2a',
-		lighten40: '#FF5E5E',
+		lighten40: '#ff5e5e',
 		lighten60: '#f48080',
 		lighten80: '#f7aaaa',
 		lighten90: '#facccc',
-		lighten97: '#FFF4F4',
-	},
-	grey: {
-		darken80: '#111212',
-		darken60: '#222324',
-		darken40: '#323535',
-		darken20: '#434647',
-		base: '#545859',
-		lighten20: '#76797a',
-		lighten40: '#989b9b',
-		lighten60: '#bbbcbd',
-		lighten80: '#dddede',
-		lighten90: '#eeeeee',
-		lighten97: '#fafafa',
-	},
-	white: {
-		lighten20: 'rgba(255, 255, 255, 0.20)',
-		lighten38: 'rgba(255, 255, 255, 0.38)',
-		lighten40: 'rgba(255, 255, 255, 0.40)',
-		lighten70: 'rgba(255, 255, 255, 0.70)',
-		lighten8: 'rgba(255, 255, 255, 0.080)',
-		base: '#ffffff',
+		lighten97: '#fff4f4',
 	},
 }

package/src/designTokens/tokens/amelipro/apColors2026.ts

@@ -1,4 +1,5 @@
-import type { IndexedObject } from '../../../components/Amelipro/types'
+import type { IndexedObject } from '../../../components/Amelipro/types.ts'
+import { buildColorClassMap } from '../../utils/buildColorClassMap'
 
 export const apColorsTokens2026 = {
 	apBlack: { base: '#000000' },
@@ -65,17 +66,4 @@ export const apColorsTokens2026 = {
 	},
 }
 
-export const apColorClasses: IndexedObject = {}
-
-export function toKebabCase(value: string): string {
-	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
-}
-
-Object.entries(apColorsTokens2026).forEach(([colorName, colorValues]) => {
-	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
-		const colorClass = toKebabCase(`${colorName}-${variationName}`
-			.replace(/\d+/, '-$&')
-			.replace('-base', ''))
-		apColorClasses[colorClass] = colorValue as string
-	})
-})
+export const apColorClasses: IndexedObject = buildColorClassMap(apColorsTokens2026)

package/src/designTokens/tokens/amelipro/apContextual.ts

@@ -1,4 +1,7 @@
+import { baseContextualTokens } from '../baseContextualTokens'
+
 export const apContextualTokens = {
+	...baseContextualTokens,
 	colors: {
 		background: '#ffffff',
 		border: '#dddddd',
@@ -7,52 +10,57 @@ export const apContextualTokens = {
 		overlay: 'rgba(0, 0, 0, 0.5)',
 		interactive: '#007bff',
 	},
-	gap: {
-		0: '0',
-		1: '4px',
-		2: '8px',
-		3: '122px',
-		4: '16px',
-		5: '20px',
-		6: '24px',
-		7: '28px',
-		8: '32px',
-		9: '36px',
-		10: '40px',
-		11: '44px',
-		12: '48px',
-		13: '52px',
-		14: '56px',
-		15: '60px',
-		16: '64px',
-	},
-	iconSize: {
-		xsmall: '8px',
-		small: '16px',
-		default: '24px',
-		large: '32px',
-	},
-	radius: {
-		rounded0: '0',
-		rounded: '4px',
-		roundedLg: '8px',
-		roundedPill: '64px',
-	},
-	padding: {
-		0: '0',
-		2: '8px',
-		3: '12px',
-		4: '16px',
-		6: '24px',
-		8: '32px',
-		10: '40px',
-		14: '56px',
-		16: '64px',
-	},
-	fontSize: {
-		titres: '24px',
-		titresAlternatifs: '20px',
-		corpsDeTexte: '16px',
-		liensEtLibelles: '14px',
+	ap: {
+		// Typography
+		fontWeightRegular: '400',
+		fontWeightBold: '700',
+		fontSizeXxs: '0.75rem',
+		fontSizeXs: '0.875rem',
+		fontSizeSm: '1rem',
+		fontSizeMd: '1.125rem',
+		fontSizeLg: '1.25rem',
+		fontSizeXl: '1.375rem',
+		fontSizeXxl: '1.5rem',
+		// Button
+		btnRadius: '0.75rem',
+		btnPaddingX: '1rem',
+		btnPaddingY: '0.5rem',
+		btnMinHeight: '2.5rem',
+		// Card
+		cardRadius: '0.75rem',
+		cardPaddingDesktop: '1rem',
+		cardPaddingTablet: '1rem',
+		cardPaddingMobile: '0.75rem',
+		// Dialog
+		dialogPadding: '1.5rem',
+		// Input / Form
+		inputRadius: '0.5rem',
+		inputMinHeight: '2.625rem',
+		labelFontWeight: '700',
+		// Filter pills
+		filterRadius: '0.75rem',
+		filterPaddingX: '2rem',
+		filterPaddingY: '0.75rem',
+		filterFontWeight: '700',
+		// Tabs pills
+		tabsPillRadius: '0.75rem',
+		tabsPillPaddingX: '2rem',
+		tabsPillPaddingY: '0.5rem',
+		tabsPillFontWeight: '700',
+		// Multiple folding card button
+		multiFoldingBtnRadius: '0.75rem',
+		multiFoldingBtnPaddingX: '2rem',
+		multiFoldingBtnPaddingY: '0.5rem',
+		multiFoldingBtnFontWeight: '700',
+		// Switch
+		switchTrackHeight: '2rem',
+		switchTrackWidth: '3.5rem',
+		switchTrackTop: '0',
+		switchThumbHeight: '1.5rem',
+		switchThumbWidth: '1.5rem',
+		switchThumbTop: '0.25rem',
+		switchThumbElevation: '0',
+		switchWidth: '3.5rem',
+		switchTrackOpacity: '1',
 	},
 }