@cnamts/synapse 1.0.27 → 1.1.1

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

@@ -63,6 +63,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/v-skeleton-loader.svg',
 						category: 'Structure',
 					},
+					{
+						title: 'NavigationDrawer',
+						description: 'Utilisé pour naviguer dans l\'application.',
+						link: '/?path=/docs/composants-composants-vuetify-vnavigationdrawer--docs',
+						img: `/components/navigation-drawer${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
 					{
 						title: 'FooterBar',
 						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
@@ -84,6 +91,27 @@ export const ComponentsList: StoryObj = {
 						img: `/components/card${isAp ? '-ap' : ''}.svg`,
 						category: 'Layout',
 					},
+					{
+						title: 'Carousel',
+						description: 'Utilisé pour afficher un diaporama d\'images ou de contenu.',
+						link: '/?path=/docs/composants-composants-vuetify-vcarousel--docs',
+						img: `/components/carousel${isAp ? '-ap' : ''}.svg`,
+						category: 'Layout',
+					},
+					{
+						title: 'SlideGroup',
+						description: 'Utilisé pour afficher des informations pseudo-paginées.',
+						link: '/?path=/docs/composants-composants-vuetify-vslidegroup--docs',
+						img: `/components/slide-group${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.',
@@ -193,7 +221,7 @@ export const ComponentsList: StoryObj = {
 						title: 'UserMenuBtn',
 						description: 'Utilisé pour afficher un bouton de menu utilisateur avec un menu déroulant.',
 						link: '/?path=/docs/composants-boutons-usermenubtn--docs',
-						img: '/components/user-menu-btn.svg',
+						img: `/components/user-menu-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -203,6 +231,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 +283,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',
 					},
 					{
@@ -259,18 +294,25 @@ export const ComponentsList: StoryObj = {
 						img: '/components/file-upload.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'UploadWorkflow',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de glisser-déposer plusieurs fichiers demandés.',
+						link: '/?path=/docs/composants-formulaires-uploadworkflow--docs',
+						img: `/components/upload-workflow${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						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 +339,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 +371,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 +459,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 +507,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 +551,7 @@ export const ComponentsList: StoryObj = {
 					'NirField',
 					'Card',
 					'FilterSideBar',
+					'SearchListField',
 					'SyTextField',
 					'Switch',
 					'Tooltip',
@@ -495,6 +566,19 @@ export const ComponentsList: StoryObj = {
 					'BackToTopBtn',
 					'TableToolbar',
 					'PhoneField',
+					'SyTextArea',
+					'PaginatedTable',
+					'SyTable',
+					'SyServerTable',
+					'DatePicker',
+					'PasswordField',
+					'Stepper',
+					'Captcha',
+					'Carousel',
+					'UserMenuBtn',
+					'UploadWorkflow',
+					'NavigationDrawer',
+					'SlideGroup',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {

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

@@ -17,9 +17,65 @@ 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).\nPour les projets souhaitant afficher les messages de succès vous pouvez simplement le faire via la prop showSuccessMessages.\nLes 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-35',
+		releaseVersion: 'v1.0.27',
+		message: 'Il est conseillé de faire une montée de version du Starter Kit en 2.0.35',
+		type: 'warning',
+		variant: 'tonal',
+	},
+	{
+		id: 'starter-kit-2-0-33',
+		releaseVersion: 'v1.0.25',
+		message: 'Il est conseillé de faire une montée de version du Starter Kit en 2.0.33',
+		type: 'warning',
+		variant: 'tonal',
+	},
 	{
 		id: 'starter-kit-2-0-32',
 		releaseVersion: 'v1.0.24',
@@ -57,7 +113,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 +158,7 @@ export const List = {
 								:closable="false"
 								class="mt-2 mb-4"
 							>
-								<template #default>{{ alert.message }}</template>
+								<template #default><span style="white-space: pre-line">{{ alert.message }}</span><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" style="column-count: 3; max-width: 42rem;"><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/Arrondis.mdx

@@ -23,7 +23,7 @@ Ce radius peut être utilisé sur des éléments interactifs tels que les bouton
 - <b>rounded-lg : 8px</b><br/>
 Ce radius peut être utilisé sur des blocs de structure (cards, tableaux...)
 
-- <b>rounded-pill : 96px</b><br/>
+- <b>rounded-pill : 64px</b><br/>
 Ce radius peut être utilisé sur des éléments (intéractifs ou non) présentant de la donnée, comme des tags, des filtres, des status...
 
 <br />

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

@@ -0,0 +1,219 @@
+import { Meta } from '@storybook/blocks';
+import '../styles/shared.css';
+
+<Meta title="Design Tokens/Couleurs/Correspondances couleurs" />
+
+<div className="header">
+  <h1>Correspondances couleurs</h1>
+  <p>Aide à la migration&nbsp;: correspondance entre les anciens tokens sémantiques et les nouveaux tokens unifiés.</p>
+</div>
+
+Ces correspondances sont **vérifiées contre le code dans les trois thèmes** (cnam, pa, amelipro)&nbsp;: seules sont listées celles dont la **valeur est préservée à l'identique** dans chaque thème (ancien `*Semantic.ts` → nouveau `*LightTheme.ts`). Les nouveaux tokens sont exposés comme couleurs de thème (`var(--v-theme-<token>)`, classes `text-<token>`, `bg-<token>`…).
+
+## Background
+
+<table>
+  <thead>
+    <tr>
+      <th>Ancien token</th>
+      <th>Nouveau token</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>colors.background.main</code></td>
+      <td><code>background</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.surface</code></td>
+      <td><code>surface</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.mainAlt</code></td>
+      <td><code>backgroundVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.surfaceAlt</code></td>
+      <td><code>surfaceDim</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.raised</code></td>
+      <td><code>surfaceBright</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.accent</code></td>
+      <td><code>primary</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.info</code></td>
+      <td><code>infoVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.infoContrasted</code></td>
+      <td><code>info</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.successContrasted</code></td>
+      <td><code>success</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.warning</code></td>
+      <td><code>warningVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.warningContrasted</code></td>
+      <td><code>warning</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.errorContrasted</code></td>
+      <td><code>error</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.background.disabled</code></td>
+      <td><code>disabled</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## Border
+
+<table>
+  <thead>
+    <tr>
+      <th>Ancien token</th>
+      <th>Nouveau token</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>colors.border.base</code></td>
+      <td><code>borderVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.subdued</code></td>
+      <td><code>disabled</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.accentPrimary</code></td>
+      <td><code>primary</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.accentPrimaryContrasted</code></td>
+      <td><code>primaryVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.accentPrimaryOnDark</code></td>
+      <td><code>borderBright</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.info</code></td>
+      <td><code>info</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.warning</code></td>
+      <td><code>onWarningVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.error</code></td>
+      <td><code>error</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.border.disabled</code></td>
+      <td><code>disabled</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## Text
+
+<table>
+  <thead>
+    <tr>
+      <th>Ancien token</th>
+      <th>Nouveau token</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>colors.text.base</code></td>
+      <td><code>onSurface</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.accentPrimary</code></td>
+      <td><code>primary</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.accentPrimaryContrasted</code></td>
+      <td><code>primaryVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.subdued</code></td>
+      <td><code>onSurfaceVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.info</code></td>
+      <td><code>info</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.warning</code></td>
+      <td><code>onWarningVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.error</code></td>
+      <td><code>error</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.disabled</code></td>
+      <td><code>onDisabled</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.text.onDark</code></td>
+      <td><code>onPrimary</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## Icon
+
+<table>
+  <thead>
+    <tr>
+      <th>Ancien token</th>
+      <th>Nouveau token</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>colors.icon.base</code></td>
+      <td><code>onSurface</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.subdued</code></td>
+      <td><code>onSurfaceVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.accentPrimary</code></td>
+      <td><code>primary</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.accentPrimaryContrasted</code></td>
+      <td><code>primaryVariant</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.info</code></td>
+      <td><code>info</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.error</code></td>
+      <td><code>error</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.onDark</code></td>
+      <td><code>onPrimary</code></td>
+    </tr>
+    <tr>
+      <td><code>colors.icon.disabled</code></td>
+      <td><code>onDisabled</code></td>
+    </tr>
+  </tbody>
+</table>