@cnamts/synapse 1.0.24 → 1.0.25

package/src/stories/Demarrer/Releases.stories.ts

@@ -1,8 +1,34 @@
 import axios from 'axios'
-import { onMounted, ref } from 'vue'
+import { onMounted, shallowRef } from 'vue'
 import * as marked from 'marked'
 import SyAlert from '../../components/SyAlert/SyAlert.vue'
 
+type GitHubRelease = {
+	id: number
+	name?: string | null
+	tag_name?: string | null
+	published_at: string
+	body?: string | null
+}
+
+type ReleaseAlert = {
+	id: string
+	releaseVersion: string
+	message: string
+	type: 'success' | 'info' | 'warning' | 'error'
+	variant: 'tonal' | 'outlined'
+}
+
+const releaseAlerts: ReleaseAlert[] = [
+	{
+		id: 'starter-kit-2-0-32',
+		releaseVersion: 'v1.0.24',
+		message: 'Il est conseillé de faire une montée de version du Starter Kit en 2.0.32',
+		type: 'warning',
+		variant: 'tonal',
+	},
+]
+
 export default {
 	title: 'Démarrer/Releases',
 	component: SyAlert,
@@ -12,8 +38,8 @@ export const List = {
 		return {
 			components: { SyAlert },
 			setup() {
-				const releases = ref([])
-				const errorMessage = ref('')
+				const releases = shallowRef<GitHubRelease[]>([])
+				const errorMessage = shallowRef('')
 
 				const fetchReleases = async () => {
 					try {
@@ -30,8 +56,14 @@ export const List = {
 					return new Date(date).toLocaleDateString()
 				}
 
-				const formatMarkdown = (markdown: string) => {
-					return marked.parse(markdown)
+				const formatMarkdown = (markdown?: string | null) => {
+					return marked.parse(markdown ?? '')
+				}
+
+				const getReleaseAlerts = (release: GitHubRelease) => {
+					return releaseAlerts.filter(alert =>
+						[release.name, release.tag_name].some(value => value?.includes(alert.releaseVersion)),
+					)
 				}
 
 				onMounted(() => {
@@ -43,6 +75,7 @@ export const List = {
 					errorMessage,
 					formatDate,
 					formatMarkdown,
+					getReleaseAlerts,
 				}
 			},
 			template: `
@@ -60,6 +93,16 @@ export const List = {
 					<div v-else>
 						<div v-for="release in releases" :key="release.id">
 							<h2>{{ release.name }} ({{ formatDate(release.published_at) }})</h2>
+							<SyAlert
+								v-for="alert in getReleaseAlerts(release)"
+								:key="alert.id"
+								:type="alert.type"
+								:variant="alert.variant"
+								:closable="false"
+								class="mt-2 mb-4"
+							>
+								<template #default>{{ alert.message }}</template>
+							</SyAlert>
 							<div v-html="formatMarkdown(release.body)"></div>
 							<hr>
 						</div>

package/src/stories/DesignTokens/ColorDisplay.vue

@@ -2,6 +2,7 @@
 	/* eslint-disabled vuejs-accessibility/anchor-has-content */
 	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 	import { computed } from 'vue'
+	import { useTheme } from 'vuetify'
 	import { VContainer, VRow, VCol, VCard, VCardTitle, VCardSubtitle } from 'vuetify/components'
 
 	interface Props {
@@ -17,16 +18,16 @@
 	}
 
 	const props = defineProps<Props>()
+	const theme = useTheme()
 
-	const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
 	const displayColors = computed(() => {
-		if (theme.value === 'pa') {
+		if (theme.global.name.value === 'pa') {
 			return props.paColors
 		}
-		if (theme.value === 'ap') {
+		if (theme.global.name.value === 'ap') {
 			return props.apColors
 		}
-		if (theme.value === 'ap2026') {
+		if (theme.global.name.value === 'ap2026') {
 			return props.apColors2026
 		}
 		return props.cnamColors
@@ -42,7 +43,7 @@
 	<div
 		v-if="!isEmptyObject(displayColors) ||
 			(isEmptyObject(displayColors) && displayEmptyColors &&
-				!['ap2026', 'ap', 'cnam', 'pa'].includes(theme ?? ''))"
+				!['ap2026', 'ap', 'cnam', 'pa'].includes(theme.global.name.value))"
 		class="mb-5"
 	>
 		<SyHeading

package/src/stories/DesignTokens/ColorIntegrationExample.vue

@@ -26,7 +26,7 @@
 				<pre style="margin: 0; font-size: 12px; color: #333;"><code>@use '@cnamts/synapse/assets/tokens' as tokens;
 
 .my-color {
-    color: tokens.$yellow-lighten-40 !important;
+    color: rgb(var(--v-theme-yellow-lighten40)) !important;
  }</code></pre>
 			</div>
 		</div>
@@ -35,9 +35,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens' as tokens;
-
 .my-color {
-	color: tokens.$yellow-lighten-40 !important;
+	color: rgb(var(--v-theme-yellow-lighten40)) !important;
 }
 </style>

package/src/stories/DesignTokens/colors.stories.ts

@@ -61,11 +61,7 @@ export const Theme: StoryObj = {
 	render: () => {
 		return {
 			setup() {
-				const theme = computed<ThemeKey>(() => {
-					const value
-                        = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam'
-					return (value as ThemeKey) ?? 'cnam'
-				})
+				const theme = useTheme()
 
 				const themeLabels: Record<ThemeKey, string> = {
 					cnam: 'Assurance Maladie',
@@ -74,7 +70,10 @@ export const Theme: StoryObj = {
 					ap2026: 'AmeliPro',
 				}
 
-				const themeLabel = computed(() => themeLabels[theme.value])
+				const themeLabel = computed(() => {
+					const currentTheme = theme.global.name.value as ThemeKey
+					return themeLabels[currentTheme] ?? themeLabels.cnam
+				})
 
 				return {
 					themeLabel,

package/src/stories/GuideDuDev/CreateVuetifyInstance.mdx

@@ -0,0 +1,95 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+import '../styles/shared.css';
+
+<Meta title="Guide Du Dev/createVuetifyInstance" />
+
+<div className="header">
+  <h1>createVuetifyInstance</h1>
+</div>
+
+`createVuetifyInstance` est une fonction exportée par le design system qui retourne une instance Vuetify pré-configurée avec l'ensemble des thèmes, icônes et options propres à l'écosystème CNAM/PA/Amelipro.
+
+Elle remplace l'appel manuel à `createVuetify` et garantit une configuration cohérente entre tous les projets.
+
+## Importation
+
+<Source dark code={`import { createVuetifyInstance } from '@cnamts/synapse/vuetifyConfig'`} />
+
+> **Note** : il s'agit d'un point d'entrée dédié (`/vuetifyConfig`), distinct de l'import principal `@cnamts/synapse`.
+
+## Utilisation dans `main.ts`
+
+<Source dark code={`
+import 'vuetify/styles'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVuetifyInstance } from '@cnamts/synapse/vuetifyConfig'
+
+const vuetify = createVuetifyInstance()
+
+createApp(App)
+  .use(vuetify)
+  .mount('#app')
+`} />
+
+## Thèmes disponibles
+
+L'instance inclut les thèmes suivants, utilisables via la prop `theme` sur un composant ou via `defaultTheme` :
+
+<table>
+  <thead>
+    <tr>
+      <th>Identifiant</th>
+      <th>Application</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>cnam</code></td>
+      <td>CNAM (défaut)</td>
+    </tr>
+    <tr>
+      <td><code>pa</code></td>
+      <td>Portail Agent</td>
+    </tr>
+    <tr>
+      <td><code>ap</code></td>
+      <td>Amelipro</td>
+    </tr>
+  </tbody>
+</table>
+
+## Changer le thème par défaut
+
+Pour appliquer un thème différent de `cnam`, passez l'identifiant souhaité à la prop `theme` du composant racine ou via la configuration Vuetify.
+
+### Via le composant racine (recommandé)
+
+<Source dark code={`
+<template>
+  <VApp theme="pa">
+    <!-- votre application -->
+  </VApp>
+</template>
+`} />
+
+### Via la configuration Vuetify (alternative)
+
+Si vous devez forcer le thème globalement sans modifier le composant racine, vous pouvez accéder à l'instance Vuetify après création :
+
+<Source dark code={`
+import { createVuetifyInstance } from '@cnamts/synapse/vuetifyConfig'
+
+const vuetify = createVuetifyInstance()
+vuetify.theme.global.name.value = 'pa'
+`} />
+
+## Ce que la fonction configure
+
+`createVuetifyInstance` encapsule les éléments suivants :
+
+- **Tous les composants et directives Vuetify** (`vuetify/components`, `vuetify/directives`)
+- **Icônes MDI** via `mdi-svg`
+- **Locale française** (`fr`)
+- **Tokens de design** : couleurs, typographie et variables CSS injectées pour chaque thème
+- **Trois thèmes complets** : `cnam`, `pa`, `ap`

package/src/stories/GuideDuDev/Theme.mdx

@@ -10,39 +10,49 @@ import '../styles/shared.css';
 </div>
 
 Le thème par défaut du Starter kit est celui de la Cnam par défaut.
-Si votre projet dépend du Portail Agent, il vous faudra modifier la configuration pour appliquer le thème spécifique à votre ligne de fabrication.
-
-## Étapes pour changer le thème du Design System
-
-### 1. Modification du fichier main.ts
-
-1. Ouvrez le fichier `src/main.ts` dans votre éditeur de code.
-2. Remplacez la valeur de `defaultTheme` par le thème qui correspond à votre projet :
-- `cnam` : CNAM
-- `pa` : Portail Agent
-- `ap2026` : Amelipro
+Si votre projet dépend du Portail Agent ou d'Amelipro, appliquez le thème correspondant à votre ligne de fabrication.
+
+Pour configurer Vuetify et changer le thème, utilisez `createVuetifyInstance` — consultez la page [createVuetifyInstance](/docs/guide-du-dev-createvuetifyinstance--docs) pour le détail complet.
+
+## Résumé des thèmes disponibles
+
+<table>
+  <thead>
+    <tr>
+      <th>Identifiant</th>
+      <th>Application</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>cnam</code></td>
+      <td>CNAM (défaut)</td>
+    </tr>
+    <tr>
+      <td><code>pa</code></td>
+      <td>Portail Agent</td>
+    </tr>
+    <tr>
+      <td><code>ap</code></td>
+      <td>Amelipro</td>
+    </tr>
+  </tbody>
+</table>
+
+## Appliquer le thème dans le composant racine
 
 <Source dark code={`
-import { createApp } from '
-import '../styles/shared.css';vue';
-...
-
-const vuetify = createVuetify({
-	theme: {
-		defaultTheme: 'pa',
-...
-
+<template>
+  <VApp theme="pa">
+    <!-- votre application -->
+  </VApp>
+</template>
 `}
 />
 
-### 2. Relancer le projet
+Après avoir modifié le thème, relancez le serveur de développement :
 
-Après avoir effectué les modifications dans le fichier de configuration, relancez le serveur de développement pour appliquer les changements :
 <Source dark code={`
 pnpm dev
 `}
 />
-
-### 3. Vérification
-
-Une fois le projet redémarré, vérifiez que la charte PA est bien appliquée.

package/src/stories/GuideDuDev/moduleDeNotification.mdx

@@ -13,12 +13,13 @@ import '../styles/shared.css';
 ## Importation et utilisation
 
 <Source dark code={`
-import { useNotificationService } from '
-import '../styles/shared.css';@cnamts/synapse'
+import { useNotificationService } from '@cnamts/synapse/modules/notification'
 
 const { notificationQueue, addNotification, removeNotification, clearQueue } = useNotificationService()
 `} />
 
+> L'entrée `@cnamts/synapse/modules/notification` est déclarée explicitement dans les exports du package.
+
 ## Propriétés et méthodes :
 
 <Source dark code={`

package/src/stories/styles/accessibility-guide.css

@@ -76,7 +76,7 @@
 .criteria-header h3 {
 	margin: 0;
 	font-size: 1.4rem;
-	color: #1976d2;
+	color: rgb(var(--v-theme-primary));
 	margin-top: 0.5rem !important;
 	margin-bottom: 0.5rem !important;
 }
@@ -131,14 +131,14 @@
 }
 
 .resources-section a {
-	color: #1976d2;
+	color: rgb(var(--v-theme-primary));
 	text-decoration: none;
 	border-bottom: 1px dotted;
 	transition: color 0.2s ease;
 }
 
 .resources-section a:hover {
-	color: #0d47a1;
+	color: rgb(var(--v-theme-secondary));
 }
 
 @media (width <= 768px) {

package/src/utils/functions/classToHex.ts

@@ -1,38 +1,10 @@
 import { apLightTheme2026 } from '@/designTokens/tokens/amelipro/apLightTheme2026'
 import { apColorsTokens2026 } from '@/designTokens/tokens/amelipro/apColors2026'
 import { AmeliproColors } from './ameliproColors/ameliproColors'
+import { createHexResolver } from './createHexResolver'
 
-const currentTheme = apLightTheme2026
-const ameliproColors = AmeliproColors
-const colors = apColorsTokens2026 as unknown as Record<string, Record<string, string>>
-export function classToHex(color: string): string | undefined {
-	color = color.trim()
-	color = color.replace(/-./, x => x[1]!.toUpperCase())
-	color = color.replace('-', ' ')
-	// eslint-disable-next-line prefer-const
-	let [colorName, colorModifier] = color.split(' ', 2) as (string | undefined)[]
-	colorModifier = colorModifier?.replace('-', '')
-	let fullColorName = ''
-	let hexColor: string | undefined = undefined
-	if (colorName && colorName in colors) {
-		if (colorModifier && colorModifier in colors[colorName]!) {
-			hexColor = colors[colorName]![colorModifier]!
-		}
-		else if ('base' in colors[colorName]!) {
-			hexColor = colors[colorName].base
-		}
-	}
-	else if (colorName && colorName in currentTheme) {
-		hexColor = currentTheme[colorName]
-	}
-	else if (color && colorName) {
-		if (colorModifier === undefined) {
-			fullColorName = colorName
-		}
-		else {
-			fullColorName = colorName + colorModifier
-		}
-		hexColor = ameliproColors[fullColorName]?.hexColor
-	}
-	return hexColor
-}
+export const classToHex = createHexResolver(
+	apLightTheme2026,
+	apColorsTokens2026 as unknown as Record<string, Record<string, string>>,
+	AmeliproColors,
+)

package/src/utils/functions/createHexResolver.ts

@@ -0,0 +1,45 @@
+type Theme = Record<string, string>
+type ColorsMap = Record<string, Record<string, string>>
+type LegacyColors = Record<string, { hexColor: string }>
+
+/**
+ * Creates a resolver that converts a color class name (e.g. "ap-blue-lighten-1")
+ * into a hex value for the given theme and color palette.
+ *
+ * Lookup order:
+ *   1. colors map: colorName + optional modifier (e.g. apBlue.lighten1)
+ *   2. theme map: direct key lookup (e.g. primary, secondary)
+ *   3. legacyColors map: flat key lookup (e.g. apBluelighten1.hexColor)
+ */
+export function createHexResolver(
+	theme: Theme,
+	colors: ColorsMap,
+	legacyColors?: LegacyColors,
+): (color: string) => string | undefined {
+	return function resolveHex(color: string): string | undefined {
+		color = color.trim()
+		color = color.replace(/-./, x => x[1]!.toUpperCase())
+		color = color.replace('-', ' ')
+
+		// eslint-disable-next-line prefer-const
+		let [colorName, colorModifier] = color.split(' ', 2) as (string | undefined)[]
+		colorModifier = colorModifier?.replace('-', '')
+
+		if (colorName && colorName in colors) {
+			if (colorModifier && colorModifier in colors[colorName]!)
+				return colors[colorName]![colorModifier]!
+			if ('base' in colors[colorName]!)
+				return colors[colorName].base
+		}
+
+		if (colorName && colorName in theme)
+			return theme[colorName]
+
+		if (legacyColors && colorName) {
+			const fullColorName = colorModifier === undefined ? colorName : colorName + colorModifier
+			return legacyColors[fullColorName]?.hexColor
+		}
+
+		return undefined
+	}
+}

package/src/utils/functions/tests/classToHex.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { classToHex } from '../classToHex'
+
+describe('classToHex', () => {
+	it('resolves a camelCase color name to its base hex value', () => {
+		expect(classToHex('apBlue')).toBe('#0C419A')
+	})
+
+	it('resolves a kebab-case color name', () => {
+		expect(classToHex('ap-blue')).toBe('#0C419A')
+	})
+
+	it('resolves a color name with a modifier', () => {
+		expect(classToHex('ap-blue-darken-1')).toBe('#00749C')
+	})
+
+	it('falls back to base when modifier is not found', () => {
+		expect(classToHex('ap-blue-unknown')).toBe('#0C419A')
+	})
+
+	it('resolves theme keys like "primary"', () => {
+		expect(classToHex('primary')).toBe('#00749C')
+	})
+
+	it('resolves legacy color names via AmeliproColors', () => {
+		expect(classToHex('apBluelighten1')).toBe('#99DBF2')
+	})
+
+	it('returns undefined for completely unknown color', () => {
+		expect(classToHex('not-a-color')).toBeUndefined()
+	})
+
+	it('trims whitespace from input', () => {
+		expect(classToHex('  apBlue  ')).toBe('#0C419A')
+	})
+})

package/src/utils/functions/tests/convertToHex.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { convertToHex } from '../convertToHex'
+
+describe('convertToHex', () => {
+	it('returns the color as-is when it is a valid CSS color', () => {
+		expect(convertToHex('#fff')).toBe('#fff')
+		expect(convertToHex('#0c419a')).toBe('#0c419a')
+		expect(convertToHex('rgb(0, 0, 0)')).toBe('rgb(0, 0, 0)')
+		expect(convertToHex('var(--color-primary)')).toBe('var(--color-primary)')
+	})
+
+	it('converts "white" to #FFF', () => {
+		expect(convertToHex('white')).toBe('#FFF')
+	})
+
+	it('converts "black" to #000', () => {
+		expect(convertToHex('black')).toBe('#000')
+	})
+
+	it('converts "transparent" to transparent', () => {
+		expect(convertToHex('transparent')).toBe('transparent')
+	})
+
+	it('returns #000 for undefined', () => {
+		expect(convertToHex(undefined)).toBe('#000')
+	})
+
+	it('returns #000 for unknown class names', () => {
+		expect(convertToHex('not-a-real-color-class')).toBe('#000')
+	})
+})

package/src/utils/functions/tests/createHexResolver.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { createHexResolver } from '../createHexResolver'
+
+const colors = {
+	apBlue: { base: '#0c419a', darken1: '#00749c', lighten1: '#99dbf2' },
+	apRed: { base: '#b33f2e' },
+}
+
+const theme = {
+	primary: '#00749c',
+	secondary: '#00516d',
+}
+
+const legacy = {
+	apBluelighten1: { hexColor: '#99dbf2' },
+	apBlue: { hexColor: '#0c419a' },
+}
+
+describe('createHexResolver', () => {
+	it('resolves a color name to its base value', () => {
+		const resolve = createHexResolver(theme, colors)
+		expect(resolve('apBlue')).toBe('#0c419a')
+	})
+
+	it('resolves a color name with a modifier', () => {
+		const resolve = createHexResolver(theme, colors)
+		// "ap-blue-darken-1" → apBlue.darken1
+		expect(resolve('ap-blue-darken-1')).toBe('#00749c')
+	})
+
+	it('falls back to base when modifier is not found', () => {
+		const resolve = createHexResolver(theme, colors)
+		// "ap-blue-unknownmod": first -b→B gives "apBlue-unknownmod",
+		// then first -→space gives "apBlue unknownmod" → modifier not found → falls back to base
+		expect(resolve('ap-blue-unknownmod')).toBe('#0c419a')
+	})
+
+	it('falls back to theme map', () => {
+		const resolve = createHexResolver(theme, colors)
+		expect(resolve('primary')).toBe('#00749c')
+		expect(resolve('secondary')).toBe('#00516d')
+	})
+
+	it('falls back to legacyColors map', () => {
+		const resolve = createHexResolver(theme, colors, legacy)
+		expect(resolve('ap-blue-lighten-1')).toBe('#99dbf2')
+	})
+
+	it('returns undefined for unknown color', () => {
+		const resolve = createHexResolver(theme, colors)
+		expect(resolve('nonexistent-color')).toBeUndefined()
+	})
+
+	it('trims whitespace from input', () => {
+		const resolve = createHexResolver(theme, colors)
+		expect(resolve('  apBlue  ')).toBe('#0c419a')
+	})
+
+	it('is independent — two resolvers with different themes return different values', () => {
+		const theme2 = { primary: '#ff0000' }
+		const resolveA = createHexResolver(theme, colors)
+		const resolveB = createHexResolver(theme2, colors)
+		expect(resolveA('primary')).toBe('#00749c')
+		expect(resolveB('primary')).toBe('#ff0000')
+	})
+})

package/src/utils/functions/tests/isCssColor.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { isCssColor } from '../isCssColor'
+
+describe('isCssColor', () => {
+	it('returns true for hex colors', () => {
+		expect(isCssColor('#fff')).toBe(true)
+		expect(isCssColor('#ffffff')).toBe(true)
+		expect(isCssColor('#FF0000')).toBe(true)
+	})
+
+	it('returns true for rgb/rgba colors', () => {
+		expect(isCssColor('rgb(0, 0, 0)')).toBe(true)
+		expect(isCssColor('rgba(0, 0, 0, 0.5)')).toBe(true)
+	})
+
+	it('returns true for hsl/hsla colors', () => {
+		expect(isCssColor('hsl(0, 0%, 0%)')).toBe(true)
+		expect(isCssColor('hsla(0, 0%, 0%, 0.5)')).toBe(true)
+	})
+
+	it('returns true for CSS custom properties', () => {
+		expect(isCssColor('var(--color-primary)')).toBe(true)
+		expect(isCssColor('var(--my-color)')).toBe(true)
+	})
+
+	it('returns false for named colors', () => {
+		expect(isCssColor('red')).toBe(false)
+		expect(isCssColor('white')).toBe(false)
+		expect(isCssColor('transparent')).toBe(false)
+	})
+
+	it('returns false for class-like strings', () => {
+		expect(isCssColor('primary')).toBe(false)
+		expect(isCssColor('ap-blue-base')).toBe(false)
+	})
+
+	it('returns false for undefined', () => {
+		expect(isCssColor(undefined)).toBe(false)
+	})
+
+	it('returns false for false', () => {
+		expect(isCssColor(false)).toBe(false)
+	})
+
+	it('returns false for empty string', () => {
+		expect(isCssColor('')).toBe(false)
+	})
+})