@cnamts/synapse 0.0.0-alpha.0

package/src/designTokens/tokens/json/primitives.json

@@ -0,0 +1,209 @@
+{
+  "colors": {
+    "orange": {
+      "darken-80": { "value": "#2d100b" },
+      "darken-60": { "value": "#5a2017" },
+      "darken-40": { "value": "#862f22" },
+      "darken-20": { "value": "#b33f2e" },
+      "base": { "value": "#e04f39" },
+      "lighten-20": { "value": "#e67261" },
+      "lighten-40": { "value": "#ec9588" },
+      "lighten-60": { "value": "#f3b9b0" },
+      "lighten-80": { "value": "#f9dcd7" },
+      "lighten-90": { "value": "#fcedeb" },
+      "lighten-97": { "value": "#fefaf9" }
+    },
+    "yellow": {
+      "darken-80": { "value": "#302407" },
+      "darken-60": { "value": "#60480e" },
+      "darken-40": { "value": "#906b15" },
+      "darken-20": { "value": "#c08f1c" },
+      "base": { "value": "#f0b323" },
+      "lighten-20": { "value": "#f3c24f" },
+      "lighten-40": { "value": "#f6d17b" },
+      "lighten-60": { "value": "#f9e1a7" },
+      "lighten-80": { "value": "#fcf0d3" },
+      "lighten-90": { "value": "#fdf7e9" },
+      "lighten-97": { "value": "#fffdf8" }
+    },
+    "green": {
+      "darken-80": { "value": "#112717" },
+      "darken-60": { "value": "#224e2d" },
+      "darken-40": { "value": "#347444" },
+      "darken-20": { "value": "#459b5a" },
+      "base": { "value": "#56c271" },
+      "lighten-20": { "value": "#78ce8d" },
+      "lighten-40": { "value": "#9adaaa" },
+      "lighten-60": { "value": "#bbe7c6" },
+      "lighten-80": { "value": "#ddf3e3" },
+      "lighten-90": { "value": "#eef9f1" },
+      "lighten-97": { "value": "#fafdfb" }
+    },
+    "turquoise": {
+      "darken-80": { "value": "#00221c" },
+      "darken-60": { "value": "#004439" },
+      "darken-40": { "value": "#006755" },
+      "darken-20": { "value": "#008972" },
+      "base": { "value": "#00ab8e" },
+      "lighten-20": { "value": "#33bca5" },
+      "lighten-40": { "value": "#66cdbb" },
+      "lighten-60": { "value": "#99ddd2" },
+      "lighten-80": { "value": "#cceee8" },
+      "lighten-90": { "value": "#e5f7f4" },
+      "lighten-97": { "value": "#f7fcfc" }
+    },
+    "blue": {
+      "darken-80": { "value": "#020d1f" },
+      "darken-60": { "value": "#051a3e" },
+      "darken-40": { "value": "#07275c" },
+      "darken-20": { "value": "#0a347b" },
+      "base": { "value": "#0c419a" },
+      "lighten-20": { "value": "#3d67ae" },
+      "lighten-40": { "value": "#6d8dc2" },
+      "lighten-60": { "value": "#9eb3d7" },
+      "lighten-80": { "value": "#ced9eb" },
+      "lighten-90": { "value": "#e7ecf5" },
+      "lighten-97": { "value": "#f8f9fc" }
+    },
+    "cyan": {
+      "darken-80": { "value": "#00212d" },
+      "darken-60": { "value": "#004259" },
+      "darken-40": { "value": "#006386" },
+      "darken-20": { "value": "#0084b2" },
+      "base": { "value": "#00a5df" },
+      "lighten-20": { "value": "#33b7e5" },
+      "lighten-40": { "value": "#66c9ec" },
+      "lighten-60": { "value": "#99dbf2" },
+      "lighten-80": { "value": "#ccedf9" },
+      "lighten-90": { "value": "#e5f6fc" },
+      "lighten-97": { "value": "#f7fcfe" }
+    },
+    "frosted-blue": {
+      "darken-80": { "value": "#142327" },
+      "darken-60": { "value": "#28464d" },
+      "darken-40": { "value": "#3d6874" },
+      "darken-20": { "value": "#518b9a" },
+      "base": { "value": "#65aec1" },
+      "lighten-20": { "value": "#84becd" },
+      "lighten-40": { "value": "#a3ceda" },
+      "lighten-60": { "value": "#c1dfe6" },
+      "lighten-80": { "value": "#e0eff3" },
+      "lighten-90": { "value": "#f0f7f9" },
+      "lighten-97": { "value": "#fafdfd" }
+    },
+    "parma": {
+      "darken-80": { "value": "#171c26" },
+      "darken-60": { "value": "#2f384d" },
+      "darken-40": { "value": "#465473" },
+      "darken-20": { "value": "#5e709a" },
+      "base": { "value": "#758cc0" },
+      "lighten-20": { "value": "#91a3cd" },
+      "lighten-40": { "value": "#acbad9" },
+      "lighten-60": { "value": "#c8d1e6" },
+      "lighten-80": { "value": "#e3e8f2" },
+      "lighten-90": { "value": "#f1f3f9" },
+      "lighten-97": { "value": "#fbfcfd" }
+    },
+    "mauve": {
+      "darken-80": { "value": "#201224" },
+      "darken-60": { "value": "#402449" },
+      "darken-40": { "value": "#60376d" },
+      "darken-20": { "value": "#804992" },
+      "base": { "value": "#a05bb6" },
+      "lighten-20": { "value": "#b37cc5" },
+      "lighten-40": { "value": "#c69dd3" },
+      "lighten-60": { "value": "#d9bde2" },
+      "lighten-80": { "value": "#ecdef0" },
+      "lighten-90": { "value": "#f5eff8" },
+      "lighten-97": { "value": "#fcfafd" }
+    },
+    "pink": {
+      "darken-80": { "value": "#2d051a" },
+      "darken-60": { "value": "#5a0a34" },
+      "darken-40": { "value": "#87104d" },
+      "darken-20": { "value": "#b41567" },
+      "base": { "value": "#e11a81" },
+      "lighten-20": { "value": "#e7489a" },
+      "lighten-40": { "value": "#ed76b3" },
+      "lighten-60": { "value": "#f3a3cd" },
+      "lighten-80": { "value": "#f9d1e6" },
+      "lighten-90": { "value": "#fce8f2" },
+      "lighten-97": { "value": "#fef8fb" }
+    },
+    "brick": {
+      "darken-80": { "value": "#291112" },
+      "darken-60": { "value": "#522224" },
+      "darken-40": { "value": "#7b3237" },
+      "darken-20": { "value": "#a44349" },
+      "base": { "value": "#cd545b" },
+      "lighten-20": { "value": "#d7767c" },
+      "lighten-40": { "value": "#e1989d" },
+      "lighten-60": { "value": "#ebbbbd" },
+      "lighten-80": { "value": "#f5ddde" },
+      "lighten-90": { "value": "#faeeef" },
+      "lighten-97": { "value": "#fdfafa" }
+    },
+    "grey": {
+      "darken-80": { "value": "#111212" },
+      "darken-60": { "value": "#222324" },
+      "darken-40": { "value": "#323535" },
+      "darken-20": { "value": "#434647" },
+      "base": { "value": "#545859" },
+      "lighten-20": { "value": "#76797a" },
+      "lighten-40": { "value": "#989b9b" },
+      "lighten-60": { "value": "#bbbcbd" },
+      "lighten-80": { "value": "#dddede" },
+      "lighten-90": { "value": "#eeeeee" },
+      "lighten-97": { "value": "#fafafa" }
+    },
+    "white": {
+      "20": { "value": "rgba(255, 255, 255, 0.2000)" },
+      "38": { "value": "rgba(255, 255, 255, 0.3800)" },
+      "40": { "value": "rgba(255, 255, 255, 0.4000)" },
+      "70": { "value": "rgba(255, 255, 255, 0.7000)" },
+      "base": { "value": "#ffffff" },
+      "08": { "value": "rgba(255, 255, 255, 0.0800)" },
+      "00": { "value": "rgba(255, 255, 255, 0.0000)" }
+    },
+    "none": {
+      "value": "rgba(255, 255, 255, 0.0000)"
+    },
+    "transparent-blue": {
+      "18": { "value": "rgba(12, 65, 154, 0.1800)" },
+      "08": { "value": "rgba(12, 65, 154, 0.0800)" },
+      "00": { "value": "rgba(12, 65, 154, 0.0000)" }
+    }
+  },
+  "values": {
+    "0": { "value": 0 },
+    "4": { "value": 4 },
+    "8": { "value": 8 },
+    "12": { "value": 12 },
+    "16": { "value": 16 },
+    "20": { "value": 20 },
+    "24": { "value": 24 },
+    "28": { "value": 28 },
+    "32": { "value": 32 },
+    "36": { "value": 36 },
+    "40": { "value": 40 },
+    "44": { "value": 44 },
+    "48": { "value": 48 },
+    "52": { "value": 52 },
+    "56": { "value": 56 },
+    "60": { "value": 60 },
+    "64": { "value": 64 }
+  },
+  "font-size": {
+    "8": { "value": 8 },
+    "12": { "value": 12 },
+    "14": { "value": 14 },
+    "16": { "value": 16 },
+    "18": { "value": 18 },
+    "20": { "value": 20 },
+    "24": { "value": 24 },
+    "28": { "value": 28 },
+    "30": { "value": 30 },
+    "32": { "value": 32 },
+    "40": { "value": 40 }
+  }
+}

package/src/designTokens/tokens/json/semantic.json

@@ -0,0 +1,120 @@
+{
+  "semantic": {
+    "primary": {
+      "darker-2": {
+        "value": "{Colors.Blue.darken-40}"
+      },
+      "darker": {
+        "value": "{Colors.Blue.darken-20}"
+      },
+      "base": {
+        "value": "{Colors.Blue.base}"
+      },
+      "light": {
+        "value": "{Colors.Blue.lighten-20}"
+      },
+      "lighter-2": {
+        "value": "{Colors.Blue.lighten-60}"
+      },
+      "lighter-3": {
+        "value": "{Colors.Blue.lighten-80}"
+      },
+      "lighter-4": {
+        "value": "{Colors.Blue.lighten-90}"
+      },
+      "lighter-5": {
+        "value": "{Colors.Blue.lighten-97}"
+      }
+    },
+    "neutral": {
+      "black": {
+        "value": "{Colors.Grey.darken-60}"
+      },
+      "black-lighter": {
+        "value": "{Colors.Grey.base}"
+      },
+      "black-lighter-2": {
+        "value": "{Colors.Grey.lighten-40}"
+      },
+      "grey": {
+        "value": "{Colors.Grey.lighten-80}"
+      },
+      "white": {
+        "value": "{Colors.White.base}"
+      },
+      "white-alpha": {
+        "value": "{Colors.White.70%}"
+      },
+      "white-alpha-lighter": {
+        "value": "{Colors.White.40%}"
+      },
+      "white-alpha-lighter-2": {
+        "value": "{Colors.White.20%}"
+      },
+      "white-alpha-lighter-3": {
+        "value": "{Colors.White.08%}"
+      }
+    },
+    "info": {
+      "info-lightest": {
+        "value": "{Colors.Blue.lighten-90}"
+      },
+      "info-lighter": {
+        "value": "{Colors.Blue.lighten-80}"
+      },
+      "default": {
+        "value": "{Colors.Blue.base}"
+      }
+    },
+    "success": {
+      "lightest": {
+        "value": "{Colors.Turquoise.lighten-90}"
+      },
+      "lighter": {
+        "value": "{Colors.Turquoise.lighten-80}"
+      },
+      "default": {
+        "value": "{Colors.Green.base}"
+      },
+      "darker": {
+        "value": "{Colors.Turquoise.darken-60}"
+      }
+    },
+    "warning": {
+      "lightest": {
+        "value": "{Colors.Yellow.lighten-90}"
+      },
+      "lighter": {
+        "value": "{Colors.Yellow.lighten-80}"
+      },
+      "default": {
+        "value": "{Colors.Yellow.base}"
+      },
+      "darker": {
+        "value": "{Colors.Yellow.darken-60}"
+      }
+    },
+    "danger": {
+      "lightest": {
+        "value": "{Colors.Orange.lighten-90}"
+      },
+      "lighter": {
+        "value": "{Colors.Orange.lighten-80}"
+      },
+      "default": {
+        "value": "{Colors.Orange.darken-20}"
+      }
+    },
+    "user": {
+      "professionnel": {
+        "value": "{Colors.Cyan.lighten-40}"
+      },
+      "assure": {
+        "value": "{Colors.Pink.lighten-40}"
+      },
+      "entreprise": {
+        "value": "{Colors.Yellow.base}"
+      }
+    }
+  }
+}

package/src/designTokens/utils/convertGaps.ts

@@ -0,0 +1,11 @@
+type Gaps = {
+	[key: string]: string | number
+}
+
+export const convertGaps = (gaps: Gaps) => {
+	let result = ''
+	for (const key in gaps) {
+		result += `--ga-${key}: ${gaps[key]} !important; `
+	}
+	return result
+}

package/src/designTokens/utils/convertSemanticsToken.ts

@@ -0,0 +1,32 @@
+// Fonction pour générer les variables à partir des tokens
+type Tokens = {
+	colors: {
+		[category: string]: {
+			[token: string]: string
+		}
+	}
+}
+
+type ThemeVariables = {
+	[variableName: string]: string
+}
+
+export const generateThemeVariables = (tokens: Tokens): ThemeVariables => {
+	const themeVariables: ThemeVariables = {}
+
+	// Parcourir les catégories de couleurs
+	for (const category in tokens.colors) {
+		if (Object.prototype.hasOwnProperty.call(tokens.colors, category)) {
+			const categoryTokens = tokens.colors[category]
+
+			// Parcourir les tokens de chaque catégorie
+			for (const token in categoryTokens) {
+				if (Object.prototype.hasOwnProperty.call(categoryTokens, token)) {
+					const variableName = `on${category.charAt(0).toUpperCase() + category.slice(1)}${token.charAt(0).toUpperCase() + token.slice(1)}`
+					themeVariables[variableName] = categoryTokens[token]
+				}
+			}
+		}
+	}
+	return themeVariables
+}

package/src/designTokens/utils/createFlattenTheme.ts

@@ -0,0 +1,19 @@
+type Theme = { [key: string]: string | number | Theme }
+
+export const createFlattenTheme = (theme: Theme) => {
+	const result: { [key: string]: string | number } = {}
+	const flatten = (obj: Theme, prefix = '') => {
+		for (const key in obj) {
+			const value = obj[key]
+			const newKey = prefix ? `${prefix}-${key}` : key
+			if (typeof value === 'object' && value !== null) {
+				flatten(value as Theme, newKey)
+			}
+			else {
+				result[newKey] = value
+			}
+		}
+	}
+	flatten(theme)
+	return result
+}

package/src/designTokens/utils/index.ts

@@ -0,0 +1,4 @@
+import { createFlattenTheme } from './createFlattenTheme'
+import { convertGaps } from './convertGaps'
+
+export { createFlattenTheme, convertGaps }

package/src/main.ts

@@ -0,0 +1,2 @@
+import '../src/assets/tokens.scss'
+export * from './components'

package/src/services/NotificationService.ts

@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+import type { Notification } from '@/components/NotificationBar/types'
+
+const notificationQueue = ref<Notification[]>([])
+
+export function useNotificationService() {
+	const addNotification = (notification: Notification) => {
+		if (!notificationQueue.value.some(n => n.id === notification.id)) {
+			notificationQueue.value.push(notification)
+		}
+	}
+
+	const removeNotification = (id: string) => {
+		notificationQueue.value = notificationQueue.value.filter(n => n.id !== id)
+	}
+
+	const clearQueue = () => {
+		notificationQueue.value = []
+	}
+
+	return {
+		notificationQueue,
+		addNotification,
+		removeNotification,
+		clearQueue,
+	}
+}

package/src/stories/Fondamentaux/Accessibilite/Accessibilite.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+
+En tant que personne morale de droit public nous concevons les composants de notre Design System en respectant le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) régit par la Direction Interministérielle du Numérique (DINUM).
+
+[](https://digital-design-system.netlify.app/fondamentaux/accessibilite#quest-ce-que-le-referentiel-general-damelioration-de-laccessibilite-rgaa)Qu'est-ce que le Référentiel Général d'Amélioration de l'Accessibilité (RGAA)?
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+Le RGAA est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...). Basé sur les travaux du W3C Web Accessibility Initiative (WAI) il vise à garantir quatre indices de performance:**la bonne perceptibilité de l'information**, une **manipulation efficiente dans la navigation**, une **bonne compréhension** et une **robustesse efficace** dans l'usage des produits numériques.
+
+[En savoir plus sur le RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu)
+
+[En savoir plus sur le W3C WAI](https://www.w3.org/WAI/fundamentals/)
+
+[](https://digital-design-system.netlify.app/fondamentaux/accessibilite#quels-sont-les-criteres-du-rgaa)Quels sont les critères du RGAA?
+-----------------------------------------------------------------------------------------------------------------------------------------
+
+Actuellement le RGAA (version 4) est constitué de 106 critères répartis dans 13 catégories:(1) Images, (2) Cadres, (3) Couleurs, (4) Multimédia, (5) Tableaux, (6) Liens, (7) Scripts, (8) Éléments obligatoires, (9) Structuration de l'information, (10) Présentation de l'information, (11) Formulaires, (12) Navigation, (13) Consultation. Afin de pouvoir mesurer la complexité à atteindre des critères, il existe 2 niveaux de difficulté:A et AA.
+
+[Accéder à la liste des critères du RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#contenu)
+
+[](https://digital-design-system.netlify.app/fondamentaux/accessibilite#comment-certifier-mon-produit-numerique)Comment certifier mon produit numérique?
+---------------------------------------------------------------------------------------------------------------------------------------------------------
+
+La conduite d'une évaluation pour attester de la conformité du produit numérique avec le RGAA peut être menée par un audit en auto-évaluation ou par un organisme tiers. Au terme de cette évaluation vous recevez un score et des informations complémentaires permettant de définir l'état de conformité de votre produit. Il existe 3 états:
+
+-   **Conformité totale :** si tous les critères de contrôle du RGAA sont respectés
+-   **Conformité partielle :** si au moins 50 % des critères de contrôle du RGAA sont respectés
+-   **Non-conformité :** s'il n'existe aucun résultat d'audit en cours de validité permettant de mesurer le respect des critères ou si moins de 50 % des critères de contrôle du RGAA sont respectés
+
+Vous garantissant d'un respect de ces critères, l'usage sans modification de notre Design System vous assure d'abord un gain de temps dans le développement mais surtout une augmentation du pourcentage de succès dans l'évaluation de votre produit.
+
+[Faire son auto-évaluation](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/kit/#contenu)
+
+[](https://digital-design-system.netlify.app/fondamentaux/accessibilite#developpeur-ou-designer-qui-possede-la-bonne-expertise)Développeur ou designer, qui possède la bonne expertise?
+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+En amont du recettage, il peut être difficile de déterminer le périmètre d'expertise pour répondre à la diversité des critères. C'est pourquoi, afin d'anticiper au mieux l'évaluation finale, nous fournissons ici un guide facilitant la répartition des tâches de contrôle préventif entre les développeurs et les designers. Certains critères peuvent nécessiter une discussion entre designer et développeur, notamment parce qu'ils impliquent des choix de conception ayant un impact direct dans l'expérience avec les utilisateurs.
+
+Le tableau ci-dessous liste nos recommandations suivant les catégories du RGAA (version 4).
+
+<Story of={AccessStories.AccessibilitePanel} />
+
+[](https://digital-design-system.netlify.app/fondamentaux/accessibilite#aller-plus-loin-que-les-criteres-rgaa)Aller plus loin que les critères RGAA
+---------------------------------------------------------------------------------------------------------------------------------------------------
+
+Au-delà des critères RGAA qui sont fondamentaux pour assurer l'accessibilité à tous, nous mettons en œuvre nos savoir-faire pour proposer des composants respectant des recommandations scientifiques pour garantir le plus largement possible un design efficient. Nous nous appuyons sur un large spectre d'études publiées dans les domaines de l'IHM ([CHI](https://chi2021.acm.org/), [CSCW](https://cscw.acm.org/2022/), [DIS](https://dis.acm.org/2021/), [IEEE](https://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=2945)) pour fournir un Design System efficace au plus grand nombre.

package/src/stories/Fondamentaux/Accessibilite/Accessibilite.stories.ts

@@ -0,0 +1,36 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItems } from './AccessibiliteItems'
+
+export default {
+	title: 'Fondamentaux/Accessibilite',
+}
+
+export const AccessibilitePanel: StoryObj = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable },
+			setup() {
+				return { AccessibiliteItems }
+			},
+			template: `
+				<v-expansion-panels>
+					<v-expansion-panel
+						v-for="(item, index) in AccessibiliteItems"
+						:key="index"
+					>
+						<v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>
+						<v-expansion-panel-text>
+							<v-data-table
+								:items="item.items"
+								disable-pagination
+								hide-default-footer
+							/>
+						</v-expansion-panel-text>
+					</v-expansion-panel>
+				</v-expansion-panels>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}