@cnamts/synapse 1.0.23 → 1.0.25

package/src/stories/GuideDuDev/Amelipro.stories.ts

@@ -0,0 +1,209 @@
+import {
+	VDivider,
+	VExpansionPanel,
+	VExpansionPanels,
+	VExpansionPanelText,
+	VExpansionPanelTitle,
+} from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+export default {
+	title: 'Guide Du Dev/Correspondance composants Amelipro',
+}
+
+export const ApComponents: StoryObj = {
+	render: () => {
+		return {
+			components: {
+				VExpansionPanels,
+				VExpansionPanel,
+				VExpansionPanelTitle,
+				VExpansionPanelText,
+				VDivider,
+			},
+			setup() {
+				return {}
+			},
+			template: `
+              <VExpansionPanels>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    FooterBar
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproFooter</span> est remplacé par le composant
+                      <span class="component-name">FooterBar</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-structure-footerbar--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse FooterBar
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-footer">
+                        Documentation du composant AmeliproFooter correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    HeaderBar
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproHeader</span> est remplacé par le composant
+                      <span class="component-name">HeaderBar</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-structure-headerbar--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse HeaderBar
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-header">
+                        Documentation du composant AmeliproHeader correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Boutons
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Les boutons de bases peuvent êtres crées en utilisant le composant <span class="component-name">VBtn</span>
+                      de Vuetify.
+                      <br>
+                      <a href="https://vuetifyjs.com/api/v-btn" target="_blank" rel="noopener noreferrer">
+                        Documentation du composant Vuetify Vbtn
+                      </a>
+                    </p>
+
+                    <div class="mt-4">
+								<pre>
+	&lt;VBtn color=&quot;primary&quot;&gt;
+		Bouton d’action primaire
+	&lt;/VBtn&gt;
+	&lt;VBtn&gt;
+		Bouton d’action par d&#233;faut
+	&lt;/VBtn&gt;
+								</pre>
+                    </div>
+
+                    <p class="mt-4">
+                      Les boutons case à cocher ou radio peuvent êtres crées avec le composant Vuetify <span
+                        class="component-name"
+                    >VBtnToggle</span>.
+                      <a href="https://vuetifyjs.com/components/button-groups" target="_blank"
+                         rel="noopener noreferrer"
+                      >
+                        Documentation du composant Vuetify VBtnToggle
+                      </a>
+                    </p>
+                    <p class="mt-6">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-btn">
+                        Documentation du composant AmeliproBtn correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Tooltips
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Les tooltips de bases peuvent êtres crées en utilisant le composant <span class="component-name">Vtooltip</span>
+                      de Vuetify.
+                      <br>
+                      <a href="https://vuetifyjs.com/en/api/v-tooltip" target="_blank" rel="noopener noreferrer">
+                        Documentation du composant Vuetify Vtooltip
+                      </a>
+                    </p>
+
+                    <div class="mt-4">
+								<pre>
+    &lt;v-tooltip text=&quot;Tooltip&quot;&gt;
+      &lt;template v-slot:activator=&quot;{ props }&quot;&gt;
+        &lt;v-btn v-bind=&quot;props&quot;&gt;
+          Hover Over Me
+        &lt;/v-btn&gt;
+      &lt;/template&gt;
+    &lt;/v-tooltip&gt;
+								</pre>
+                    </div>
+
+                    <p class="mt-6">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-tooltips">
+                        Documentation du composant AmeliproTooltips correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Layout
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproContentLayout</span> est remplacé par le
+                      composant
+                      <span class="component-name">PageContainer</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-layout-pagecontainer--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse PageContainer
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-content-layout">
+                        Documentation du composant AmeliproContentLayout correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Pagination
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproPagination</span> est remplacé par le
+                      composant
+                      <span class="component-name">SyPagination</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-navigation-sypagination--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse SyPagination
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-pagination">
+                        Documentation du composant AmeliproPagination correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+              </VExpansionPanels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

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/GuideDuDev/vuetifyOptions.mdx

@@ -24,7 +24,7 @@ Prenons l'exemple d'un bouton (VBtn).
 Voici un exemple d'utilisation du composant :
 
 <Source dark code={`
-<MyButton
+<VBtn
     :title="'Cliquez ici'"
     :vuetifyOptions="{ btn: { color: 'secondary', icon: true } }"
 />
@@ -47,7 +47,7 @@ Dans cet exemple :
 Voici un exemple plus complet :
 
 <Source dark code={`
-<MyButton
+<VBtn
     :title="'Valider'"
     :vuetifyOptions="{ btn: { color: 'primary', outlined: false, icon: true } }"
  />
@@ -69,7 +69,7 @@ Exemple de bouton par défaut
 Sans fournir de vuetifyOptions, le bouton pourrait ressembler à ceci :
 
 <Source dark code={`
-<MyButton :title="'Par défaut'" />
+<VBtn :title="'Par défaut'" />
 `} />
 
 Ce bouton utilisera les options par défaut définies dans le design system, telles que la couleur, le style de bordure ou les icônes.

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')
+	})
+})