@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/designTokens/tokens/pa/paSemantic.ts

@@ -0,0 +1,87 @@
+export const paSemanticTokens = {
+	colors: {
+		background: {
+			main: '#e7ecf5',
+			surface: '#ffffff',
+			mainAlt: '#ffffff',
+			surfaceAlt: '#e7ecf5',
+			raised: '#f8f9fc',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentAlt: '#111212',
+			info: '#ced9eb',
+			infoSubdued: '#e7ecf5',
+			infoContrasted: '#0c419a',
+			success: '#cceee8',
+			successSubdued: '#e5f7f4',
+			successContrasted: '#56c271',
+			warning: '#fcf0d3',
+			warningSubdued: '#fdf7e9',
+			warningContrasted: '#f0b323',
+			error: '#f9dcd7',
+			errorSubdued: '#fcedeb',
+			errorContrasted: '#b33f2e',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			assure: '#ed76b3',
+			professionnel: '#66c9ec',
+			entreprise: '#f0b323',
+		},
+		border: {
+			darker: '#222324',
+			base: '#989b9b',
+			subdued: '#dddede',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentOnDark: '#ffffff',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: 'rgba(255, 255, 255, 0.7)',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		text: {
+			base: '#222324',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			subdued: '#545859',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			disabled: '#989b9b',
+			onDark: '#ffffff',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		icon: {
+			base: '#222324',
+			subdued: '#545859',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: '#ffffff',
+			disabled: '#989b9b',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		overlay: {
+			fullpage: '#989b9b',
+			onDark: '#ffffff',
+			onLight: '#0c419a',
+		},
+		interactive: {
+			default: 'rgba(255, 255, 255, 0.0000)',
+			hover: '#e7ecf5',
+			pressed: '#ced9eb',
+			focus: '#e7ecf5',
+			disabled: 'rgba(255, 255, 255, 0.0000)',
+			hoverOnSelected: '#ced9eb',
+		},
+	},
+}

package/src/stories/Fondamentaux/CustomisationEtThemes.mdx

@@ -1,7 +1,57 @@
-import { Meta } from '@storybook/addon-docs';
+import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 <Meta title="Fondamentaux/Customisation et thèmes" />
 
 # Customisation et thèmes
 
-Contenu à définir
+## Étapes pour changer le thème du Design System aux couleurs Portail Agent
+
+### 1. Modification du fichier nuxt.config.ts
+
+1.	Ouvrez le fichier nuxt.config.ts dans votre éditeur de code.
+2.	Remplacer les valeurs des thèmes `cnamLightTheme` et `cnamDarkTheme` par les valeurs de la charte PA : `paLightTheme` et `paDarkTheme`.
+
+<Source dark code={`
+import {paLightTheme} from '@cnamts/synapse/designTokens/tokens/pa/paLightTheme'
+import {paDarkTheme} from '@cnamts/synapse/designTokens/tokens/pa/paDarkTheme'
+`}
+/>
+
+3.	Localisez la configuration de base de Vuetify (ligne 31 dans le fichier `nuxt.config.ts`).
+4.	Mettez à jour le thème en configurant les couleurs selon la charte PA si nécessaire :
+
+<Source dark code={`
+theme: {
+    defaultTheme: 'light',
+    themes: {
+        light: {
+            colors: {
+                ...paLightTheme,
+                // ...customLightTheme
+            },
+        },
+        dark: {
+            colors: {
+                ...paDarkTheme,
+                //...customDarkTheme,
+            },
+        },
+    },
+},
+`}
+/>
+
+NB : les thèmes `customLightTheme` et `customDarkTheme` sont à votre disposition pour ajouter des couleurs supplémentaires.
+
+### 2. Relancer le projet
+
+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/CreerUneIssue.mdx

@@ -0,0 +1,64 @@
+import {Meta, Story} from '@storybook/addon-docs/blocks';
+import * as ComponentStories from './components.stories.ts';
+
+<Meta of={ComponentStories}/>
+
+# Créer une issue
+
+## Introduction
+
+Les issues sont un moyen essentiel de suivre les bugs, les améliorations et les nouvelles fonctionnalités dans notre
+design system.
+Lorsque vous constatez un bug, vous pouvez créer un rapport de bug pour notifier l’équipe de celui-ci.
+Ce guide vous explique comment créer une issue efficace.
+
+## Étapes pour créer une issue
+
+### 1. Choisissez le type d'issue approprié :
+
+- 🐛 Bug
+Report - [Créer un rapport de bug](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_report.md)
+- ✨ Feature
+Request - [Proposer une nouvelle fonctionnalité](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=feature_request.md)
+- 📝
+Documentation - [Améliorer la documentation](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=documentation.md)
+- ♿
+Accessibilité - [Signaler un problème d'accessibilité](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=accessibility.md)
+
+### 2. Priorisation :
+
+🟢 Peu prioritaire : Améliorations mineures, bugs non bloquants
+
+🟡 Prioritaire : Bugs impactant l'expérience utilisateur, nouvelles fonctionnalités importantes
+
+🔴 Très prioritaire : Bugs critiques, problèmes de sécurité, fonctionnalités essentielles
+
+
+<Story of={ComponentStories.Info}/>
+
+## Bonnes pratiques
+
+1. **Soyez précis** : Donnez autant de détails pertinents que possible
+2. **Un problème par issue** : Ne mélangez pas plusieurs problèmes dans une seule issue
+3. **Utilisez les labels** : Ajoutez les labels appropriés pour faciliter le tri et la priorisation
+4. **Vérifiez les doublons** : Avant de créer une nouvelle issue, vérifiez si elle n'existe pas déjà en cherchant dans
+les [rapports existants](https://github.com/assurance-maladie-digital/design-system-v3/issues)
+5. **Soyez constructif** : Restez professionnel et focalisé sur la résolution du problème
+6. **Vérifiez la version du package utilisé** : Le bug est il toujours présent dans la dernière version du package
+concerné?
+
+## Labels couramment utilisés
+
+- `bug` : Pour les problèmes qui doivent être corrigés
+- `enhancement` : Pour les nouvelles fonctionnalités ou améliorations
+- `documentation` : Pour les mises à jour de la documentation
+- `help wanted` : Pour les issues qui nécessitent de l'aide supplémentaire
+- `good first issue` : Pour les issues adaptées aux nouveaux contributeurs
+
+## Suivi
+
+Après avoir créé une issue :
+
+1. Restez à l'écoute des commentaires et questions
+2. Mettez à jour l'issue avec toute nouvelle information pertinente
+3. Fermez l'issue une fois résolue en référençant le commit ou la PR qui l'a résolue

package/src/stories/GuideDuDev/{CommentUtiliserLesRules.mdx → UtiliserLesRules.mdx}

@@ -1,8 +1,8 @@
 import {Meta, Source} from '@storybook/addon-docs/blocks';
 
-<Meta title="Guide Du Dev/Comment utiliser les rules"/>
+<Meta title="Guide Du Dev/Utiliser les rules"/>
 
-# Comment utiliser les règles de validation
+# Utiliser les règles de validation
 
 Ce guide décrit comment utiliser le composable `useFieldValidation` pour créer des règles de validation flexibles et personnalisées dans votre projet Vue.js.
 

package/src/stories/GuideDuDev/components.stories.ts

@@ -1,7 +1,7 @@
 import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 export default {
-	title: 'Guide Du Dev/Rapport de bug',
+	title: 'Guide Du Dev/Créer une issue',
 	component: SyAlert,
 }
 export const Info = {
@@ -9,14 +9,16 @@ export const Info = {
 		return {
 			components: { SyAlert },
 			setup() {
-				return { }
+				return {}
 			},
 			template: `
-				<SyAlert type="info" variant="tonal" :closable="false">
-					<template #default>Lorsque vous créez une reproduction minimale, supprimez tous les éléments, propriétés, variables, données et autres qui ne sont pas nécessaires pour reproduire le bug. Cela facilitera le traitement du rapport et le temps qu’il faudra pour identifier puis résoudre le bug.
-					</template>
-				</SyAlert>
-			`,
+              <SyAlert type="info" variant="tonal" :closable="false">
+                <template #default>Lorsque vous créez une reproduction minimale, supprimez tous les éléments,
+                  propriétés, variables, données et autres qui ne sont pas nécessaires pour reproduire le bug. Cela
+                  facilitera le traitement du rapport et le temps qu’il faudra pour identifier puis résoudre le bug.
+                </template>
+              </SyAlert>
+            `,
 		}
 	},
 	tags: ['!dev'],

package/src/stories/Guidelines/Vuetify/Vuetify.stories.ts

@@ -1,11 +1,13 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VRow, VCol } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VRow, VCol, VSelect, VBtn, VCombobox, VContainer, VListItem } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { VuetifyItems } from './VuetifyItems'
+import { VuetifyItems, itemsChips } from './VuetifyItems'
 import { mdiCheckboxMarkedCircleOutline, mdiLinkVariant, mdiAlertCircleOutline } from '@mdi/js'
+import { computed, ref } from 'vue'
 
 const checkIcon = mdiCheckboxMarkedCircleOutline
 const linkICon = mdiLinkVariant
 const iconAlert = mdiAlertCircleOutline
+
 export default {
 	title: 'Guidelines/Vuetify',
 }
@@ -13,89 +15,168 @@ export default {
 export const VuetifyPanel: StoryObj = {
 	render: () => {
 		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VListItem, VDataTable, VIcon, VContainer, VSelect, VBtn, VCombobox },
 			setup() {
-				return { VuetifyItems, checkIcon, iconAlert, linkICon }
+				const menuProps = ref({ top: false })
+				const itemValue = ref(0)
+				const activeBtnIndex = ref('null')
+				const search = ref([])
+				const searchString = ref('')
+				const items = computed(() => {
+					return itemsChips.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()))
+				},
+				)
+
+				const itemsString = computed(() => {
+					const items = itemsChips.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()))
+					return items.map(o => o.text)
+				},
+				)
+
+				const cardItem = computed(() => {
+					return VuetifyItems[0].items[itemValue.value - 1]
+				},
+				)
+				return { VuetifyItems, menuProps, items, itemsString, checkIcon, iconAlert, linkICon, itemValue, cardItem, activeBtnIndex, search, searchString }
 			},
 			template: `
-				<div v-for="(item, index) in VuetifyItems" :key="index">
-					<v-data-table
-						:items="item.items"
-						:items-per-page="23"
-						hide-default-footer>
-						<template v-slot:header.name="{ header }">
-							Composant Vuetify
-						</template>
-
-						<template v-slot:header.errorImportants="{ header }">
-							Erreurs bloquantes (Tanaguru)
-						</template>
-						<template v-slot:item.name="{ item }">
-							<v-chip v-if="item.errorImportants == 0 && item.errorIndeterminated == 0"
-									style="font-size: 12px; line-height: 15px;">
-								<VIcon style="margin-right: 2px;" :icon="checkIcon"/>
-								{{ item.name }}
-							</v-chip>
-							<v-chip v-else style="font-size: 12px; line-height: 15px;">
+				<VSheet :elevation="1"  class="mt-6 pa-4">
+					<VRow cols="12" class="d-flex align-items justify-between ">
+						<VCol cols="12" sm="6" >
+							<v-combobox
+								:menu-props="menuProps"
+								variant="outlined"
+								color="primary"
+								v-model="search"
+								clearable
+								dense
+								:items="items"
+								item-value="value"
+								item-title="text"
+								:selected="search ? itemValue = search.value :  itemValue = 0"
+								label="Rechercher un composant"
+								hide-selected
+								return-object 
+								style="margin-bottom: -20px"
+							/>
+						</VCol>
+						<VCol cols="12" sm="6" class="v-col-auto">
+							<p style="font-size: 13px;">
 								<VIcon style="margin-right: 2px;" :icon="iconAlert"/>
-								{{ item.name }}
-							</v-chip>
-						</template>
-
-						<template v-slot:item.solution="{ item }">
-							<div v-if="item.solution.length > 0">
-							<span v-for="(item, index) in item.solution"
-								  style="display:flex; align-items: center; font-size: 12px; line-height: 15px; font-weight: bold">
+								Composant non conforme par défaut.
+							</p>
+							<p style="font-size: 13px;">
+								<VIcon style="margin-right: 2px;" :icon="checkIcon"/>
+								Composant conforme.
+							</p>
+						</VCol>
+					</VRow>
+				</VSheet>
+
+				<div style="display: flex; justify-content: center;" class="mt-12">
+					<v-card v-if="cardItem && itemValue !==0 " class="w-100 w-md-75">
+						<v-card-item>
+							<v-card-title>
+								<div style="align-items: center;display: flex;">
+									<VIcon
+										v-if="cardItem.errorImportants.length > 0 && cardItem.errorIndeterminated.length > 0"
+										style="margin-right: 5px;font-size: 25px;" :icon="iconAlert"/>
+									<VIcon v-else style="margin-right: 5px;font-size: 25px;" :icon="checkIcon"/>
+
+									{{ cardItem.name }}
+									</div>
+							</v-card-title>
+
+							<v-card-text style="margin-top:20px;">
+								<v-expansion-panels multiple>
+
+									<v-expansion-panel>
+										<v-expansion-panel-title>Erreurs bloquantes
+											<v-btn variant="tonal" size="x-small"
+												   style="margin-left: 3px;font-size: 9px;" rounded> Tanaguru
+											</v-btn>
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-if="cardItem.errorImportants.length == 0">
+												<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas
+													d'erreur
+													d'accessibilité relevée à ce jour</p>
+											</div>
+											<div v-for="item in cardItem.errorImportants" :key="index"
+												 style="width: 100% !important; font-size: 12px; line-height: 15px;">
+												<p style="margin-top: 5px; margin-bottom: 5px;">
+													<span
+														style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
+													{{ item.replace(/[0-9.]/g, '') }}
+												</p>
+											</div>
+											<v-divider class="mt-4 mb-2" v-if="cardItem.errorImportants.length != 0"
+													   style="display: flex; justify-content:center"></v-divider>
+											<div style="display: flex;align-items: center;"
+												 v-if="cardItem.errorSolutionImportant && cardItem.errorSolutionImportant.length > 0">
+												<span style="line-height: 15px; font-weight: bold; margin-right:5px;">Recommandation : </span>
+												<div v-for="item in cardItem.errorSolutionImportant" :key="index"
+													 style="line-height: 15px;">
+													<p style="margin-top: 5px; margin-bottom: 5px;">
+														<span> {{ item }} </span>
+
+													</p>
+												</div>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+
+									<v-expansion-panel style="margin-top:10px;">
+										<v-expansion-panel-title>Erreurs indéterminées
+											<v-btn variant="tonal" size="x-small"
+												   style="margin-left: 3px;font-size: 9px;" rounded> Tanaguru
+											</v-btn>
+
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-if="cardItem.errorIndeterminated.length == 0">
+												<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas
+													d'erreur
+													d'accessibilité relevée à ce jour</p>
+											</div>
+											<div v-for="item in cardItem.errorIndeterminated" :key="index"
+												 style="width: 100% !important; font-size: 12px; line-height: 15px;">
+
+												<p style="margin-top: 5px; margin-bottom: 5px;">
+													<span
+														style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
+													{{ item.replace(/[0-9.]/g, '') }}
+												</p>
+											</div>
+
+											<v-divider class="mt-4 mb-2" v-if="cardItem.errorIndeterminated.length != 0" style="display: flex; justify-content:center" />
+
+											<div style="align-items: center;"
+												 v-if="cardItem.errorSolutionIndeterminated && cardItem.errorSolutionIndeterminated.length > 0">
+												<span style="line-height: 15px; font-weight: bold; margin-right:5px;">Recommandation : </span>
+												<div v-for="item in cardItem.errorSolutionIndeterminated" :key="index"
+													 style="line-height: 15px;">
+													<p style="margin-top: 5px; margin-bottom: 5px;">
+														<span> {{ item }} </span>
+													</p>
+												</div>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+
+							</v-card-text>
+							<v-card-actions>
+								<p v-if="cardItem.solution.length > 0">Solution :</p>
+								<span v-for="(item, index) in cardItem.solution"
+									  style="display:flex; align-items: center; line-height: 15px; font-weight: bold">
 								{{ item.name }} <a :href="item.href" v-if="item.href">
 								<VBtn color="primary" style="margin-left: 5px;" :icon="linkICon" size="small"
 									  variant="text"/></a>
 							</span>
-							</div>
-						</template>
-
-						<template v-slot:item.errorImportants="{ item }">
-							<div v-if="item.errorImportants.length === 0">
-								<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas d'erreur
-									d'accessibilité relevée à ce jour</p>
-							</div>
-							<div v-else v-for="item in item.errorImportants" :key="index"
-								 style="width: 100% !important; font-size: 12px; line-height: 15px;">
-								<p style="margin-top: 5px; margin-bottom: 5px;">
-									<span style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
-									{{ item.replace(/[0-9.]/g, '') }}
-								</p>
-							</div>
-						</template>
-
-						<template v-slot:item.errorIndeterminated="{ item }">
-							<div v-if="item.errorIndeterminated.length === 0">
-								<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas d'erreur
-									d'accessibilité relevée à ce jour</p>
-							</div>
-							<div v-else v-for="item in item.errorIndeterminated" :key="index"
-								 style="width: 100% !important; font-size: 12px; line-height: 15px;">
-								<p style="margin-top: 5px; margin-bottom: 5px;">
-									<span style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
-									{{ item.replace(/[0-9.]/g, '') }}
-								</p>
-							</div>
-						</template>
-
-						<template v-slot:header.errorIndeterminated="{ header }">
-							Erreurs indéterminées (Tanaguru)
-						</template>
-						<template v-slot:header.solution="{ header }">
-							Solution
-						</template>
-
-						<template v-slot:header.href="{ header }" style="display:none">
-							<th v-if="false" style="display:none"></th>
-						</template>
-
-						<template v-slot:item.href="{ item }" style="display:none">
-							<td v-if="false">{{ item.someColumn }}</td>
-						</template>
-					</v-data-table>
+							</v-card-actions>
+						</v-card-item>
+					</v-card>
 				</div>
 			`,
 		}
@@ -113,24 +194,18 @@ export const Legende: StoryObj = {
 				return { args, checkIcon, iconAlert }
 			},
 			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 13/12/2024</p>
+			  <p class="mb-2" style="color: grey;font-size: 11px;">L'étude porte sur 25 composants à date du 13/12/2024</p>
 
-				<VRow class="mt-2 mb-5">
-				<VCol cols="12" sm="12" class="m-2 p-2 v-col-auto">
+				<VRow >
+				<VCol cols="12" sm="12">
 				<div style="font-size: 13px;">
-					<p>L'étude relève que la majorité des composants garantissent l'accessibilité numérique par défaut tel que défini par le RGAA. <br />Nous identifions néanmoins pour certains composants qu'un travail d'ajustement est nécessaire. Ce travail peut être réalisé directement par les produits.<br />Dans une démarche d'accélération de la fabrication, nous proposons pour chaque composant relevant d'un manque sur le sujet des solutions afin d'en faciliter la mise en conformité. Ces solutions peuvent être de nature : composant ou recommandation.</p>
+					<p>L'étude relève que la majorité des composants garantissent l'accessibilité numérique par défaut tel que défini par le RGAA. <br />Nous identifions néanmoins pour certains composants qu'un travail d'ajustement est nécessaire. Ce travail peut être réalisé directement par les produits.<br />Dans une démarche d'accélération de la fabrication, nous proposons pour chaque composant relevant d'un manque sur le sujet des solutions afin d'en faciliter <br /> la mise en conformité. Ces solutions peuvent être de nature : composant ou recommandation.</p>
 					<br />
 					<p>Pour chaque composant, nous indiquons les erreurs remontées par l'outil Tanaguru : Erreurs bloquantes et indéterminées.<br />Ces erreurs doivent être analysées contextuellement. Pour rappel, l'accessibilité numérique ne se mesure par sur des composants seuls dénués de contexte.<br />Une appréciation de la part du développeur est nécessaire pour en évaluer la pertinence.</p>
 				</div>
                 </VCol>
-
-                <VCol cols="12" sm="4" class="m-2 p-2 v-col-auto">
-				  <p style="font-size: 13px;"><VIcon style="margin-right: 2px;" :icon="iconAlert" />  Composant non conforme par défaut.</p>
-                  <p style="font-size: 13px;"><VIcon style="margin-right: 2px;" :icon="checkIcon" />  Composant conforme.</p>
-                </VCol>
-               
+            
               </VRow>
-			 
             `,
 		}
 	},