@cnamts/synapse 1.0.23 → 1.0.25

package/src/stories/Components/Components.stories.ts

@@ -1,5 +1,6 @@
 import { VCard, VCardText, VCardTitle, VRow, VCol, VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
+import { useTheme } from 'vuetify'
 
 export default {
 	title: 'Composants/Vue d\'ensemble',
@@ -24,12 +25,14 @@ export const ComponentsList: StoryObj = {
 		return {
 			components: { VCard, VCardText, VCardTitle, VRow, VCol, VIcon },
 			setup() {
+				const theme = useTheme()
+				const isAp = theme.global.name.value === 'ap'
 				const components = [
 					{
 						title: 'HeaderBar',
 						description: 'Utilisé pour afficher l’en-tête d’une page ainsi qu’une barre de navigation.',
 						link: '/?path=/docs/composants-structure-headerbar--docs',
-						img: '/components/header-bar.svg',
+						img: `/components/header-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Structure',
 					},
 					{
@@ -53,11 +56,18 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sub-header.svg',
 						category: 'Structure',
 					},
+					{
+						title: 'SkeletonLoader',
+						description: 'Utilisé pour améliorer l’expérience utilisateur pendant le chargement des données, affiche une structure visuelle temporaire qui ressemble au contenu final.',
+						link: '/?path=/docs/composants-composants-vuetify-vskeletonloader--docs',
+						img: '/components/v-skeleton-loader.svg',
+						category: 'Structure',
+					},
 					{
 						title: 'FooterBar',
 						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
 						link: '/?path=/docs/composants-structure-footerbar--docs',
-						img: '/components/footer-bar.svg',
+						img: `/components/footer-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Structure',
 					},
 					{
@@ -74,6 +84,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/contextual-menu.svg',
 						category: 'Navigation',
 					},
+					{
+						title: 'Breadcrumbs',
+						description: 'Utilisé comme un outil d’aide à la navigation et comme une structure hiérarchique pour les pages.',
+						link: '/?path=/docs/composants-composants-vuetify-vbreadcrumbs--docs',
+						img: '/components/breadcrumbs.svg',
+						category: 'Navigation',
+					},
 					{
 						title: 'ExternalLinks',
 						description: 'Utilisé pour afficher un menu avec une liste vers des liens externes.',
@@ -92,7 +109,14 @@ export const ComponentsList: StoryObj = {
 						title: 'SkipLink',
 						description: 'Utilisé pour permettre à l\'utilisateur utilisant la navigation au clavier de passer directement à une section de contenu.',
 						link: '/?path=/docs/composants-navigation-skiplink--docs',
-						img: '/components/skip-link.svg',
+						img: `/components/skip-link${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
+					{
+						title: 'SyPagination',
+						description: 'Utilisé pour permettre la navigation entre plusieurs pages de contenu.',
+						link: '/?path=/docs/composants-navigation-sypagination--docs',
+						img: `/components/pagination${isAp ? '-ap' : ''}.svg`,
 						category: 'Navigation',
 					},
 					{
@@ -102,6 +126,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/back-btn.svg',
 						category: 'Boutons',
 					},
+					{
+						title: 'SyIconBtn',
+						description: 'Utilisé lorsque on a besoin d’un bouton qui sert principalement à afficher une icône.',
+						link: '/?path=/docs/composants-boutons-syiconbutton--docs',
+						img: `/components/sy-icon-button${isAp ? '-ap' : ''}.svg`,
+						category: 'Boutons',
+					},
 					{
 						title: 'BackToTopBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.',
@@ -113,7 +144,7 @@ export const ComponentsList: StoryObj = {
 						title: 'CopyBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de copier du texte.',
 						link: '/?path=/docs/composants-boutons-copybtn--docs',
-						img: '/components/copy-btn.svg',
+						img: `/components/copy-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -127,7 +158,7 @@ export const ComponentsList: StoryObj = {
 						title: 'DownloadBtn',
 						description: 'Utilisé pour permettre à l’utilisateur de télécharger un document provenant d’une API.',
 						link: '/?path=/docs/composants-boutons-downloadbtn--docs',
-						img: '/components/download-btn.svg',
+						img: `/components/download-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -151,11 +182,25 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-text-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyAutocomplete',
+						description: 'Utilisé pour permettre à l’utilisateur de rechercher et sélectionner une valeur dans une liste d\'options (alternative au v-autocomplete de Vuetify).',
+						link: '/?path=/docs/composants-formulaires-selects-syautocomplete--docs',
+						img: `/components/sy-select${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'Switch',
+						description: 'Utilisé pour permettre à l’utilisateur de choisir entre deux valeurs distinctes. Il est très similaire à un bouton bascule (toggle) ou à un interrupteur marche/arrêt.',
+						link: '/?path=/docs/composants-composants-vuetify-vswitch--docs',
+						img: `/components/switch${isAp ? '-ap' : ''}.svg`,
+						category: 'Boutons',
+					},
 					{
 						title: 'SySelect',
 						description: 'Utilisé pour proposer une alternative au v-select de Vuetify qui ne respecte pas les règles d\'accessibilité RGAA. Il est basé sur un v-textfield.',
 						link: '/?path=/docs/composants-formulaires-syselect--docs',
-						img: '/components/sy-select.svg',
+						img: `/components/sy-select${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -172,9 +217,16 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-btn-select.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'OTPInput',
+						description: 'Utilisé pour une procédure MFA d’authentification des utilisateurs via un mot de passe à usage unique.',
+						link: '/?path=/docs/composants-composants-vuetify-votpinput--docs',
+						img: `/components/otp${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'DatePicker',
-						description: ' Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
 						link: '/?path=/docs/composants-formulaires-datepicker--docs',
 						img: '/components/date-picker.svg',
 						category: 'Formulaires',
@@ -235,6 +287,27 @@ export const ComponentsList: StoryObj = {
 						img: '/components/select-btn-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyCheckBox',
+						description: 'Utilisé pour permettre à l’utilisateur de selectionner une option.',
+						link: '/?path=/docs/composants-formulaires-sycheckbox--docs',
+						img: `/components/sy-checkbox${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyCheckBoxGroup',
+						description: 'Utilisé pour permettre à l’utilisateur de selectionner plusieurs options.',
+						link: '/?path=/docs/composants-formulaires-sycheckboxgroup--docs',
+						img: `/components/sy-checkbox-group${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyRadioGroup',
+						description: 'Utilisé pour permettre à l\'utilisateur de choisir une option parmi plusieurs.',
+						link: '/?path=/docs/composants-formulaires-syradiogroup--docs',
+						img: `/components/sy-radiogroup${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'PaginatedTable',
 						description: 'Utilisé pour afficher une VDataTable de Vuetify avec une pagination persistante.',
@@ -353,10 +426,41 @@ export const ComponentsList: StoryObj = {
 					'Feedback',
 				]
 
+				const apComponents = [
+					'FooterBar',
+					'HeaderBar',
+					'HeaderLoading',
+					'PageContainer',
+					'CopyBtn',
+					'DownloadBtn',
+					'SyPagination',
+					'SkipLink',
+					'SyCheckBox',
+					'SyCheckBoxGroup',
+					'SyAutocomplete',
+					'SySelect',
+					'SyRadioGroup',
+					'SyIconBtn',
+					'NirField',
+				]
+
+				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {
+					if (isAp) {
+						return (
+							component.category === category
+							&& apComponents.some(apComponent => component.title.includes(apComponent))
+						)
+					}
+
+					return component.category === category
+				}
+
 				const groupedComponents = categoryOrder.map(category => ({
 					category,
-					components: components.filter(component => component.category === category),
-				}))
+					components: components
+						.filter(component => shouldDisplayComponent(component, category))
+						.sort((a, b) => a.title.localeCompare(b.title)),
+				})).filter(group => group.components.length > 0)
 
 				return {
 					groupedComponents,

package/src/stories/Demarrer/Accueil.stories.ts

@@ -43,8 +43,8 @@ export const Header: StoryObj = {
 							<img alt="line" src="/home-line.svg" width="120" height="5" class="mb-5" />
 							<h2 style="font-family: Arial !important; font-size: 1.5rem !important; font-weight: 400 !important; line-height: 1.30 !important; letter-spacing: normal !important;" class="mb-5">Synapse : 
 								<span v-if="theme === 'pa'" class="text-h5">thème Portail Agent</span>
-                              <span v-if="theme === 'ap'">thème Amelipro New</span>
-                              <span v-if="theme === 'ap2026'">thème Amelipro</span>
+                              <span v-if="theme === 'ap'">thème Amelipro</span>
+                              <span v-if="theme === 'ap2026'">thème Amelipro 2026</span>
 								<span v-if="theme === 'cnam'" class="text-h5">thème CNAM</span></h2>
 							<p style="font-family: Arial !important; font-size: 1rem !important;" class="mb-5">Veuillez sélectionner dans la barre d’outil en haut de l’écran le thème graphique de votre produit avant de consulter la documentation, elle s’actualisera en conséquence avec les tokens et composants disponibles.
 								<br/>Si vous ne connaissez pas le thème auquel votre produit est soumis veuillez consulter le dossier d’architecture du produit.
@@ -153,7 +153,7 @@ export const DesignSystem: StoryObj = {
                           </VCard>
                       </VCol>
                       <VCol cols="12" md="4">
-						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/guide-du-dev-migration-depuis-bridge--docs">
+						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/guide-du-dev-installation--docs">
 							  <img src="/home-card-dev.svg" alt="Guide du dev" class="w-100" />
                               <VCardTitle><b>Guides du dev</b></VCardTitle>
                               <VCardText>Les Guides du Dev accompagnent les équipes techniques dans l'implémentation du Design System en garantissant une intégration fluide et efficace.</VCardText>

package/src/stories/Demarrer/EnrichirLeDesignSystem.mdx

@@ -14,7 +14,8 @@ Le Design System de l'Assurance Maladie est un projet vivant qui évolue constam
 Votre contribution est essentielle pour garantir que le Design System reste pertinent, accessible et efficace.<br/>
 Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est examinée avec attention par l'équipe du Studio Design.
 
-<Story of={ComponentStories.InfoIntro}/>
+#
+<Story of={ComponentStories.WarningIntro}/>
 
 <a id="exigences" />
 ## Exigences requises pour acceptation d'un nouveau composant ou d'une nouvelle fonctionnalité
@@ -31,13 +32,7 @@ Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est
 10. Doit se conformer aux **exigences techniques** du Design System et à son bon fonctionnement sur le Starter Kit (VueJS 3, version des plugins...).
 
 ## Créer une nouvelle demande
-
-<Story of={ComponentStories.Optimisation}/>
-
+#
 <Story of={ComponentStories.AjoutFonctionnalite}/>
 
-<Story of={ComponentStories.DeclinaisonFonctionnalite}/>
-
-<Story of={ComponentStories.CreationComposant}/>
-
-<Story of={ComponentStories.IntegrationComposant}/>
+<Story of={ComponentStories.CreationComposant}/>

package/src/stories/Demarrer/EnrichirLeDesignSystem.stories.ts

@@ -26,6 +26,34 @@ export const InfoIntro = {
 	tags: ['!dev'],
 }
 
+export const WarningIntro = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+              <SyAlert type="error" variant="tonal" :closable="false">
+                <template #default>
+					<b>Pour limiter les risques de régression et d'anomalie nous mettons temporairement en pause les demandes de nouvelles fonctionnalités. Nous invitons les projets à mettre en place des solutions de contournement.</b>
+					<br/><br/>
+					Une fois les chantiers ci-après complétés au 1er juillet 2026 nous pourrons reprendre l'analyse et l'intégration de vos features au fil de l'eau selon la disponibilité de l'équipe.
+					<br/><br/>
+					Chantiers en cours :
+					<ul><li>- Disponibilité des composants Amelipro</li>
+						<li>- Optimisation de la validation des composants de formulaire</li>
+						<li>- Optimisation des tokens pour la convergence des 3 thèmes (Amelipro, Cnam, Portail Agent)</li>
+						<li>- Optimisation de l'accessibilité numérique</li>
+					</ul>
+				</template>
+              </SyAlert>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
 export const Optimisation = {
 	render: () => {
 		return {

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/Amelipro.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as AmeliproStories from './Amelipro.stories';
+import '../styles/shared.css';
+
+<Meta of={AmeliproStories}/>
+
+
+
+<div className="header">
+    <h1>Equivalence des composants Amelipro avec la stack front VueJs 3</h1>
+</div>
+
+Suite au besoin de migration de l'ensemble des applications du parc de Amelipro vers Vue.js 3, les composants graphiques ont été unifiés. Voici les composants Amelipro et leur équivalence dans la stack front Vue.js 3.
+
+<Story of={AmeliproStories.ApComponents}/>