@cnamts/synapse 1.0.27 → 1.1.0

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

@@ -84,6 +84,13 @@ export const ComponentsList: StoryObj = {
 						img: `/components/card${isAp ? '-ap' : ''}.svg`,
 						category: 'Layout',
 					},
+					{
+						title: 'Stepper',
+						description: 'Affiche la progression par étapes numérotées.',
+						link: '/?path=/docs/composants-composants-vuetify-vstepper--docs',
+						img: `/components/stepper${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
 					{
 						title: 'SyTabs',
 						description: 'Permet de masquer du contenu derrière un élément sélectionnable.',
@@ -203,6 +210,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-text-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyTextArea',
+						description: 'Utilisé pour la collecte de grandes quantités de données textuelles.',
+						link: '/?path=/docs/composants-formulaires-sytextarea--docs',
+						img: `/components/sy-text-area${isAp ? '-ap' : ''}.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).',
@@ -248,8 +262,8 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'DatePicker',
 						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',
+						link: '/?path=/docs/composants-formulaires-datepicker-introduction--docs',
+						img: `/components/date-picker${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -263,14 +277,14 @@ export const ComponentsList: StoryObj = {
 						title: 'NirField',
 						description: 'Utilisé pour permettre à l’utilisateur de saisir un numéro de Sécurité sociale (NIR).',
 						link: '/?path=/docs/composants-formulaires-nirfield--docs',
-						img: '/components/nir-field.svg',
+						img: `/components/nir-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
 						title: 'PasswordField',
 						description: 'Utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.',
 						link: '/?path=/docs/composants-formulaires-passwordfield--docs',
-						img: '/components/password-field.svg',
+						img: `/components/password-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -297,9 +311,9 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'SearchListField',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.',
-						link: '/?path=/docs/composants-formulaires-searchlistfield--docs',
-						img: '/components/search-list-field.svg',
-						category: 'Formulaires',
+						link: '/?path=/docs/composants-filtres-searchlistfield--docs',
+						img: `/components/search-list-field${isAp ? '-ap' : ''}.svg`,
+						category: 'Filtres',
 					},
 					{
 						title: 'SelectBtnField',
@@ -329,11 +343,32 @@ export const ComponentsList: StoryObj = {
 						img: `/components/sy-radiogroup${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
+					{
+						title: 'Captcha',
+						description: 'Utilisé pour confirmer que les interactions des utilisateurs sont effectuées par des humains et non par des robots.',
+						link: '/?path=/docs/composants-formulaires-captcha--docs',
+						img: `/components/captcha${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyTable',
+						description: 'Utilisé pour afficher une VDataTable de Vuetify',
+						link: '/?path=/docs/composants-tableaux-sytable--docs',
+						img: `/components/sy-table${isAp ? '-ap' : ''}.svg`,
+						category: 'Tableaux',
+					},
+					{
+						title: 'SyServerTable',
+						description: 'Utilisé pour afficher une VDataTable Vuetify avec gestion des données côté serveur',
+						link: '/?path=/docs/composants-tableaux-syservertable--docs',
+						img: `/components/sy-server-table${isAp ? '-ap' : ''}.svg`,
+						category: 'Tableaux',
+					},
 					{
 						title: 'PaginatedTable',
 						description: 'Utilisé pour afficher une VDataTable de Vuetify avec une pagination persistante.',
 						link: '/?path=/docs/composants-tableaux-paginatedtable--docs',
-						img: '/components/paginated-table.svg',
+						img: `/components/paginated-table${isAp ? '-ap' : ''}.svg`,
 						category: 'Tableaux',
 					},
 					{
@@ -396,7 +431,7 @@ export const ComponentsList: StoryObj = {
 						title: 'FilePreview',
 						description: 'Utilisé pour afficher l\'aperçu d\'un fichier.',
 						link: '/?path=/docs/composants-donn%C3%A9es-filepreview--docs',
-						img: '/components/file-preview.svg',
+						img: `/components/file-preview${isAp ? '-ap' : ''}.svg`,
 						category: 'Données',
 					},
 					{
@@ -444,10 +479,17 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'FilterSideBar',
 						description: 'Permet de filtrer rapidement les contenus selon plusieurs critères.',
-						link: '/?path=/docs/composants-filtres-filterssidebar--docs',
+						link: '/?path=/docs/composants-filtres-filtersidebar--docs',
 						img: `/components/filter-side-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Filtres',
 					},
+					{
+						title: 'FilterInline',
+						description: 'Permet de filtrer rapidement les contenus selon plusieurs critères.',
+						link: '/?path=/docs/composants-filtres-filterinline--docs',
+						img: `/components/filters-inline${isAp ? '-ap' : ''}.svg`,
+						category: 'Filtres',
+					},
 				]
 
 				const categoryOrder = [
@@ -481,6 +523,7 @@ export const ComponentsList: StoryObj = {
 					'NirField',
 					'Card',
 					'FilterSideBar',
+					'SearchListField',
 					'SyTextField',
 					'Switch',
 					'Tooltip',
@@ -495,6 +538,14 @@ export const ComponentsList: StoryObj = {
 					'BackToTopBtn',
 					'TableToolbar',
 					'PhoneField',
+					'SyTextArea',
+					'PaginatedTable',
+					'SyTable',
+					'SyServerTable',
+					'DatePicker',
+					'PasswordField',
+					'Stepper',
+					'Captcha',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {

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

@@ -17,9 +17,51 @@ type ReleaseAlert = {
 	message: string
 	type: 'success' | 'info' | 'warning' | 'error'
 	variant: 'tonal' | 'outlined'
+	link?: { href: string, text: string }
+	components?: string[]
 }
 
 const releaseAlerts: ReleaseAlert[] = [
+	{
+		id: 'form-success-messages-hidden',
+		releaseVersion: 'v1.1.0',
+		message: 'Cette version modifie le comportement des composants de formulaire, les messages de succès sont désormais masqués par défaut. Cette modification répond à la fois à des besoins projets et à l\'harmonisation des différents thèmes (CNAM, PAG, Amelipro). Pour les projets souhaitant afficher les messages de succès vous pouvez simplement le faire via la prop `showSuccessMessages`. Les composants concernés sont :',
+		type: 'warning',
+		variant: 'tonal',
+		components: [
+			'SyTextField',
+			'SyTextArea',
+			'SyAutocomplete',
+			'SySelect',
+			'SyCheckbox',
+			'SyCheckBoxGroup',
+			'SyRadioGroup',
+			'DatePicker',
+			'PeriodField',
+			'MonthPicker',
+			'LunarCalendar',
+			'PeriodField',
+			'NirField',
+			'PasswordField',
+			'PhoneField',
+			'Captcha',
+		],
+	},
+	{
+		id: 'node-18-decommission',
+		releaseVersion: 'v1.1.0',
+		message: 'En lien avec le Starter Kit, fin de support de Node 18.',
+		type: 'warning',
+		variant: 'tonal',
+	},
+	{
+		id: 'tokens-simplification',
+		releaseVersion: 'v1.0.27',
+		message: 'Nous avons procédé à une simplification des tokens contraint par l\'ajout du thème Amelipro, merci de vous référer à la page des ',
+		type: 'warning',
+		variant: 'tonal',
+		link: { href: '/?path=/docs/design-tokens-couleurs--docs', text: 'couleurs' },
+	},
 	{
 		id: 'starter-kit-2-0-32',
 		releaseVersion: 'v1.0.24',
@@ -57,7 +99,8 @@ export const List = {
 				}
 
 				const formatMarkdown = (markdown?: string | null) => {
-					return marked.parse(markdown ?? '')
+					const html = marked.parse(markdown ?? '') as string
+					return html.replace(/<blockquote>[\s\S]*?<\/blockquote>/g, '')
 				}
 
 				const getReleaseAlerts = (release: GitHubRelease) => {
@@ -101,7 +144,7 @@ export const List = {
 								:closable="false"
 								class="mt-2 mb-4"
 							>
-								<template #default>{{ alert.message }}</template>
+								<template #default>{{ alert.message }}<template v-if="alert.link"> <a :href="alert.link.href">{{ alert.link.text }}</a>.</template><ul v-if="alert.components" class="mt-2 ml-4"><li v-for="component in alert.components" :key="component">{{ component }}</li></ul></template>
 							</SyAlert>
 							<div v-html="formatMarkdown(release.body)"></div>
 							<hr>

package/src/stories/DesignTokens/Colors.mdx

@@ -12,6 +12,8 @@ import '../styles/shared.css';
 
 <Story of={ColorsStories.Theme} />
 
+<Story of={ColorsStories.TokenOptimisationWarning} />
+
 <Story of={ColorsStories.ColorIntegration} />
 
 <Story of={ColorsStories.mainColors}/>

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

@@ -8,6 +8,7 @@ import { apColorsTokens2026 } from '@/designTokens/tokens/amelipro/apColors2026'
 import { apColorsTokens } from '@/designTokens/tokens/amelipro/apColors'
 import ColorDisplay from './ColorDisplay.vue'
 import ColorIntegrationExample from './ColorIntegrationExample.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { h } from 'vue'
 import { useTheme } from 'vuetify'
 import type { StoryObj } from '@storybook/vue3'
@@ -57,6 +58,18 @@ export default {
 
 type ThemeKey = 'cnam' | 'pa' | 'ap' | 'ap2026'
 
+export const TokenOptimisationWarning: StoryObj = {
+	render: () => ({
+		components: { SyAlert },
+		template: `
+			<SyAlert type="warning" style="margin-bottom: 25px;">
+				Suite à l'ajout du thème Amelipro dans Synapse, nous avons dû procéder à une simplification et optimisation des tokens.
+			</SyAlert>
+		`,
+	}),
+	tags: ['!dev'],
+}
+
 export const Theme: StoryObj = {
 	render: () => {
 		return {