@cnamts/synapse 0.0.0-alpha.0

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

@@ -0,0 +1,5 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+	DEV_DESIGN = 'dev_design',
+}

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

@@ -0,0 +1,4 @@
+export enum RGAALevelEnum {
+	A = 'A',
+	AA = 'AA',
+}

package/src/stories/Fondamentaux/EcoConception/EcoConception.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as EcoStories from './Econception.stories.ts';
+
+<Meta of={EcoStories} />
+
+ # Éco-conception
+
+<br></br>
+
+### L’éco-conception est une approche méthodique qui prend en considération les aspects environnementaux du processus de conception et de développement dans le but de réduire les impacts environnementaux négatifs.
+
+<br></br>
+
+##### La liste suivante énumère les points auxquels vous devez faire attention pendant la conception ainsi que le développement de votre application.
+
+<br></br>
+
+<Story of={EcoStories.EcoPanel} />
+
+<br></br>
+
+### Évaluer son projet
+
+Pour évaluer l’éco-conception de votre projet, vous pouvez utiliser [Ecoindex](http://www.ecoindex.fr/) ou [Ecometer](http://www.ecometer.org/).

package/src/stories/Fondamentaux/EcoConception/Econception.stories.ts

@@ -0,0 +1,30 @@
+import { VExpansionPanels, VExpansionPanel } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { ecoDesignItems } from '@/stories/Fondamentaux/EcoConception/ecoDesignItems'
+
+export default {
+	title: 'Fondamentaux/EcoConception',
+}
+
+export const EcoPanel: StoryObj = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel },
+			setup() {
+				return { ecoDesignItems }
+			},
+			template: `
+				<v-expansion-panels>
+					<v-expansion-panel
+						v-for="(item, index) in ecoDesignItems"
+						:key="index"
+						:text="item.description"
+						:title="item.title"
+						variant="accordion"
+					></v-expansion-panel>
+				</v-expansion-panels>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Fondamentaux/EcoConception/ecoDesignItems.ts

@@ -0,0 +1,55 @@
+export const ecoDesignItems = [
+	{
+		title: 'Catégorie 1: Design',
+		description: `Privilégier un design épuré. Un bon design n’a pas besoin d’être chargé pour être agréable, au contraire.
+
+Certains composants ne sont souvent pas utiles, et ne servent qu’à habiller une page.<br>
+Le carrousel est un bon exemple\xa0: c’est un composant lourd, comportant à la fois du JavaScript et des images de grandes tailles.
+Il est pourtant rarement indispensable à la navigation et fait souvent doublon avec le menu.`,
+	},
+	{
+		title: 'Catégorie 2: Couleurs',
+		description: 'Le fond d’écran noir permet d’économiser de l’énergie sur les écrans OLED. Il est donc important de prévoir le mode sombre sur les nouveaux composants.',
+	},
+	{
+		title: 'Catégorie 3: Images',
+		description: `Le choix des images est important.
+Pour les formats standards JPEG et PNG, il faudra trouver le bon taux de compression pour ne pas dégrader l’expérience utilisateur.
+Une bonne alternative est de les remplacer par des images au format WEBP, en gardant les autres formats pour les navigateurs ne supportant pas ce format.
+
+La taille est également importante. Pour économiser encore plus d’espace, les images doivent être rognées aux bonnes dimensions.
+Le format vectoriel SVG est nettement plus léger: il doit être privilégié pour chaque image graphique compatible avec ce format.`,
+	},
+	{
+		title: 'Catégorie 4: Vidéos',
+		description: `La première chose à faire avant d’ajouter une vidéo est de se demander si elle est vraiment nécessaire.
+En effet, les vidéos demandent beaucoup de ressources: elles ne doivent donc pas être ajoutées juste pour illustrer ou pour remplir de l’espace.
+
+Dans le cas où elles sont nécessaires, la lecture automatique doit être désactivée, surtout s’il y a du son dans la vidéo, et vous devez également mettre en place le chargement différé sur chaque vidéo.
+
+L’utilisation de vidéos doit être privilégiée à la place des GIF.`,
+	},
+	{
+		title: 'Catégorie 5: Animations',
+		description: `Comme pour les vidéos, la première chose concernant les animations est de se demander si elles sont vraiment nécessaires\xa0: servent-elles le design ou sont-elles seulement décoratives\xa0?
+Si elles n’ont pas de réel intérêt, il vaut mieux ne pas les ajouter.
+Le JavaScript est une technologie énergivore, il est donc important de le réserver aux tâches qui nécessitent vraiment de la logique.
+
+Autant que possible, il vaut mieux privilégier les effets en CSS plutôt qu’en JavaScript.`,
+	},
+	{
+		title: 'Catégorie 6: Librairies',
+		description: `L’accumulation de librairies est une cause récurrente de ralentissement des applications Web, et donc de consommation excessive d’énergie.
+Le Design System est basé sur le framework Vuetify: il embarque donc la plupart des outils qui seront nécessaires au développement des applications.
+
+Si toutefois vous ne trouvez pas ce dont vous avez besoin dans les librairies présentes dans le projet, l’installation d’une nouvelle librairie doit se faire avec beaucoup de prudence.
+Il faudra trouver la librairie la plus légère et adaptée possible, l’outil [Bundlephobia](https://bundlephobia.com) permet d’évaluer rapidement la taille d’une librairie.`,
+	},
+	{
+		title: 'Catégorie 7: Fonctionnalités',
+		description: `Comme toujours, la première question à se poser est\xa0: est-ce que ma fonctionnalité est vraiment nécessaire\xa0? Ne fait-elle pas doublon avec une déjà existante\xa0?
+
+Dans le cas où elle est bien nécessaire, votre nouvelle fonctionnalité doit faire une chose précise. Moins elle enclenchera d’action, moins elle nécessitera d’énergie.
+Il faut aussi faire attention à la façon de développer la fonctionnalité\xa0: les boucles inutiles ou les requêtes intempestives nécessitent là encore beaucoup de ressources, il faut donc veiller à le faire à bon escient.`,
+	},
+]

package/src/stories/GuideDuDev/CommentContribuer.mdx

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ComponentStories from './components.stories.ts';
+
+<Meta of={ComponentStories} />
+
+
+Rapport de bug
+--------------
+
+##### Lorsque vous constatez un bug dans l'un des packages du Design System, vous pouvez créer un rapport de bug pour notifier l'équipe de celui-ci.
+
+##### Avant d'ouvrir un nouveau rapport de bug, vérifiez:
+
+-   Qu'un rapport similaire n'ait pas déjà été ouvert en cherchant dans les [rapports existants](https://github.com/assurance-maladie-digital/design-system-v3/issues)
+-   Que le bug est toujours présent dans la dernière version du package concerné
+
+<br></br>
+### Créer un rapport de bug
+
+<Story of={ComponentStories.Info} />
+
+ Une fois ces vérifications effectuées, vous pouvez [créer un rapport de bug](https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=bug_report.md). Lors de l'écriture de votre rapport de bug, essayez de donner le plus de détails possible.

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

@@ -0,0 +1,23 @@
+import Alert from '../../components/Alert/Alert.vue'
+
+export default {
+	title: 'Guide Du Dev/Rapport de bug',
+	component: Alert,
+}
+export const Info = {
+	render: () => {
+		return {
+			components: { Alert },
+			setup() {
+				return { }
+			},
+			template: `
+				<Alert 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>
+				</Alert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/GuideDuDev/moduleDeNotification.mdx

@@ -0,0 +1,182 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Services/useNotificationService" />
+# useNotificationService
+
+`useNotificationService` est un service Vue qui permet de gérer une file d'attente de notifications. Il fournit des méthodes pour ajouter, supprimer et effacer des notifications dans la file d'attente. Ce service est conçu pour être utilisé avec des composants de notification dans une application Vue.js.
+
+## Importation et utilisation
+
+```
+import { useNotificationService } from '@/services/useNotificationService'
+
+const { notificationQueue, addNotification, removeNotification, clearQueue } = useNotificationService()
+```
+
+Propriétés et Méthodes:
+
+```
+notificationQueue: Ref<Notification[]>
+```
+
+Une référence réactive à la file d'attente des notifications. Elle contient un tableau d'objets de type Notification.
+
+``` addNotification(notification: Notification): void ```
+
+Ajoute une nouvelle notification à la file d'attente, à condition qu'une notification avec le même id ne soit pas déjà présente.
+
+```
+addNotification({
+  id: 'notif-1',
+  message: 'Notification 1',
+  type: 'info',
+  duration: 5000
+})
+```
+
+```
+removeNotification(id: string): void
+```
+Supprime une notification de la file d'attente en fonction de son id.
+
+```
+removeNotification('notif-1')
+```
+
+```
+clearQueue(): void
+```
+
+Efface toutes les notifications de la file d'attente.
+
+
+```
+clearQueue()
+```
+
+Typage de Notification
+
+Le type Notification est défini comme suit :
+
+```
+
+type Notification = {
+  id: string
+  message: string
+  type: 'success' | 'error' | 'info' | 'warning'
+  duration?: number
+}
+```
+Propriétés de Notification
+```
+    id: string — Identifiant unique de la notification.
+    message: string — Le texte à afficher dans la notification.
+    type: 'success' | 'error' | 'info' | 'warning' — Le type de la notification, qui peut influencer son apparence.
+    duration?: number — Durée pendant laquelle la notification sera visible (en millisecondes).
+```
+Exemples d'utilisation
+Ajouter une notification
+
+```
+
+const { addNotification } = useNotificationService()
+
+addNotification({
+  id: 'notif-2',
+  message: 'Votre téléchargement est terminé',
+  type: 'success',
+  duration: 3000
+})
+```
+Supprimer une notification
+
+```
+const { removeNotification } = useNotificationService()
+
+removeNotification('notif-2')
+```
+Effacer la file d'attente de notifications
+
+```
+
+const { clearQueue } = useNotificationService()
+
+clearQueue()
+```
+
+Accéder à la file d'attente
+
+```
+const { notificationQueue } = useNotificationService()
+
+console.log(notificationQueue.value) // Affiche toutes les notifications présentes dans la file d'attente
+```
+Utilisation dans un composant Vue
+
+```
+<script setup lang="ts">
+<script setup lang="ts">
+	import { VBtn } from 'vuetify/components'
+	import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
+	import { useNotificationService } from '@/services/NotificationService'
+	import type { Notification } from '@/components/NotificationBar/types'
+
+	const { addNotification } = useNotificationService()
+
+	const envoyerNotification = (message: string, type: Notification['type']) => {
+		const notification: Notification = {
+			id: Date.now().toString(),
+			message,
+			type,
+			timeout: -1,
+		}
+		addNotification(notification)
+	}
+</script>
+
+<template>
+	<div>
+		<NotificationBar
+			bottom
+			rounded="lg"
+		>
+			<template #action>
+				<VBtn variant="outlined">
+					Valider
+				</VBtn>
+			</template>
+		</NotificationBar>
+
+		<div class="button-group">
+			<VBtn
+				color="info"
+				@click="envoyerNotification('Première notification', 'info')"
+			>
+				Envoyer Notification 1
+			</VBtn>
+			<VBtn
+				color="success"
+				@click="envoyerNotification('Deuxième notification', 'success')"
+			>
+				Envoyer Notification 2
+			</VBtn>
+			<VBtn
+				color="error"
+				@click="envoyerNotification('Troisième notification', 'error')"
+			>
+				Envoyer Notification 3
+			</VBtn>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 20px;
+}
+</style>
+
+```

package/src/stories/GuideDuDev/vuetifyOptions.mdx

@@ -0,0 +1,72 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/VuetifyOptions" />
+
+# VuetifyOptions
+
+Notre design system propose un ensemble de composants Vuetify personnalisables.
+Pour permettre une flexibilité maximale, chaque composant expose une prop vuetifyOptions qui permet de surcharger les options par défaut de Vuetify avec des options spécifiques à votre besoin.
+
+La gestion de ces options est facilitée par un mécanisme interne qui fusionne les options par défaut du composant avec celles que vous fournissez, en veillant à ce que les deux ensembles d'options soient correctement combinés.
+Utilisation de vuetifyOptions
+
+Certains composants du design system acceptent une prop vuetifyOptions qui vous permet de personnaliser le comportement et le style du composant basé sur Vuetify.
+Vous trouverez des exemples de configurations directement dans la documentation de chaque composant que nous proposons pour mieux comprendre comment les personnaliser.
+
+Exemple d'utilisation dans un composant vuetify:
+
+Prenons l'exemple d'un bouton (VBtn).
+
+Voici un exemple d'utilisation du composant :
+
+```vue
+
+<MyButton
+:title="'Cliquez ici'"
+:vuetifyOptions="{ btn: { color: 'secondary', icon: true } }"
+    />
+```
+Dans cet exemple :
+
+    Le texte du bouton est défini via la prop title.
+    Vous pouvez passer un objet vuetifyOptions pour personnaliser les propriétés du composant Vuetify sous-jacent (ici, VBtn).
+
+Explication
+
+    Propriétés de Vuetify : Vous pouvez configurer n'importe quelle option reconnue par Vuetify. Par exemple, pour un bouton (VBtn), vous pourriez ajuster sa couleur, son icône, son style (outlined, elevation, etc.).
+
+    Fusion des options : Le design system gère la fusion des options par défaut et celles que vous fournissez dans vuetifyOptions. Si vous ne définissez pas une option spécifique, la valeur par défaut sera utilisée.
+
+Exemple détaillé
+
+Voici un exemple plus complet :
+```
+vue
+
+<MyButton
+:title="'Valider'"
+:vuetifyOptions="{ btn: { color: 'primary', outlined: false, icon: true } }"
+    />
+```
+Dans cet exemple :
+
+    Le bouton sera bleu (color: 'primary').
+    Il n'aura pas de contour (outlined: false).
+    Une icône sera affichée sur le bouton (icon: true).
+
+Options par défaut
+
+Chaque composant du design system dispose d'options par défaut qui lui assurent un style et un comportement cohérents. Cependant, si vous souhaitez personnaliser ces options, vous pouvez utiliser la prop vuetifyOptions pour adapter ces composants à vos besoins spécifiques sans compromettre la structure de base du design system.
+Exemple de bouton par défaut
+
+Sans fournir de vuetifyOptions, le bouton pourrait ressembler à ceci :
+
+```vue
+
+<MyButton :title="'Par défaut'" />
+```
+Ce bouton utilisera les options par défaut définies dans le design system, telles que la couleur, le style de bordure ou les icônes.
+
+Conclusion
+
+L'intégration des vuetifyOptions dans les composants de ce design system vous offre une grande flexibilité pour personnaliser les composants en fonction de vos besoins spécifiques. Grâce à ce mécanisme, vous pouvez ajuster des propriétés telles que la couleur, les icônes et d'autres configurations Vuetify tout en vous appuyant sur des valeurs par défaut bien définies. Vous n'avez pas à vous soucier de la gestion interne des options : il vous suffit de passer les options personnalisées via la prop vuetifyOptions, et le composant s'adaptera automatiquement.

package/src/stories/Guidelines/Colors.mdx

@@ -0,0 +1,220 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { cnamLightTheme } from "@/designTokens/tokens/cnam/cnamLightTheme.ts";
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors.ts'
+
+<Meta title="Guidelines/Couleurs" />
+
+# Couleurs
+
+Les couleurs contribuent à l’identification de nos applications ou services et font partie intégrante de la marque Assurance Maladie. Elles assurent l’homogénéité graphique des interfaces.
+
+## Couleurs de base
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            primary: cnamColorsTokens.blue.base,
+            secondary: cnamColorsTokens.cyan.darken40,
+            accent: cnamColorsTokens.cyan.base,
+            error: cnamColorsTokens.orange.darken20,
+            info: cnamColorsTokens.blue.base,
+            success: cnamColorsTokens.green.base,
+            warning: cnamColorsTokens.yellow.base,
+            risquePro: cnamColorsTokens.brick.base
+        }}
+    />
+</ColorPalette>
+
+## Interactive Colors
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            interactiveDefault: cnamLightTheme.interactiveDefault,
+            interactiveHover: cnamLightTheme.interactiveHover,
+            interactivePressed: cnamLightTheme.interactivePressed,
+            interactiveFocus: cnamLightTheme.interactiveFocus,
+            interactiveDisabled: cnamLightTheme.interactiveDisabled,
+        }}
+    />
+    <ColorItem
+        colors={{
+            interactiveHoverOnSelected: cnamLightTheme.interactiveHoverOnSelected,
+        }}
+    />
+</ColorPalette>
+
+## Border Colors
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            borderDarker: cnamLightTheme.borderDarker,
+            borderBase: cnamLightTheme.borderBase,
+            borderSubdued: cnamLightTheme.borderSubdued,
+            borderAccent: cnamLightTheme.borderAccent,
+            borderAccentContrasted: cnamLightTheme.borderAccentContrasted,
+            borderAccentOnDark: cnamLightTheme.borderAccentOnDark
+        }}
+    />
+
+    <ColorItem
+        colors={{
+            borderInfo: cnamLightTheme.borderInfo,
+            borderSuccess: cnamLightTheme.borderSuccess,
+            borderWarning: cnamLightTheme.borderWarning,
+            borderError: cnamLightTheme.borderError,
+            borderOnDark: cnamLightTheme.borderOnDark,
+            borderDisabled: cnamLightTheme.borderDisabled,
+            borderDisabledOnDark: cnamLightTheme.borderDisabledOnDark
+        }}
+    />
+</ColorPalette>
+
+## Text Colors
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            textBase: cnamLightTheme.textBase,
+            textAccent: cnamLightTheme.textAccent,
+            textAccentContrasted: cnamLightTheme.textAccentContrasted,
+            textSubdued: cnamLightTheme.textSubdued,
+            textInfo: cnamLightTheme.textInfo,
+            textSuccess: cnamLightTheme.textSuccess
+        }}
+    />
+
+    <ColorItem
+        colors={{
+            textWarning: cnamLightTheme.textWarning,
+            textError: cnamLightTheme.textError,
+            textDisabled: cnamLightTheme.textDisabled,
+            textOnDark: cnamLightTheme.textOnDark,
+            textSubduedOnDark: cnamLightTheme.textSubduedOnDark,
+            textDisabledOnDark: cnamLightTheme.textDisabledOnDark
+        }}
+    />
+</ColorPalette>
+
+## Icons
+<ColorPalette>
+    <ColorItem
+        colors={{
+            textBase: cnamLightTheme.iconBase,
+            textSubdued: cnamLightTheme.iconSubdued,
+            textSubduedOnDark: cnamLightTheme.iconSubduedOnDark,
+            textAccent: cnamLightTheme.iconAccent,
+            textAccentContrasted: cnamLightTheme.iconAccentContrasted
+        }}
+    />
+
+    <ColorItem
+        colors={{
+            textInfo: cnamLightTheme.iconInfo,
+            textSuccess: cnamLightTheme.iconSuccess,
+            textWarning: cnamLightTheme.iconWarning,
+            textError: cnamLightTheme.iconError,
+            textOnDark: cnamLightTheme.iconOnDark
+        }}
+    />
+
+    <ColorItem
+        colors={{
+            textDisabled: cnamLightTheme.iconDisabled,
+            textDisabledOnDark: cnamLightTheme.iconDisabledOnDark
+        }}
+    />
+</ColorPalette>
+
+## Background Colors
+
+### Main Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundMain: cnamLightTheme.backgroundMain,
+            backgroundSurface: cnamLightTheme.backgroundSurface,
+            backgroundSurfaceAlt: cnamLightTheme.backgroundSurfaceAlt
+        }}
+    />
+</ColorPalette>
+
+### Alternative Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroungMainAlt: cnamLightTheme.backgroungMainAlt,
+            backgroungRaised: cnamLightTheme.backgroungRaised,
+            backgroundAccent: cnamLightTheme.backgroundAccent,
+            backgroungAccentContrasted: cnamLightTheme.backgroungAccentContrasted,
+            backgroundAccentAlt: cnamLightTheme.backgroundAccentAlt
+        }}
+    />
+</ColorPalette>
+
+### Informational Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundInfo: cnamLightTheme.backgroundInfo,
+            backgroundInfoSubdued: cnamLightTheme.backgroundInfoSubdued,
+            backgroundInfoContrasted: cnamLightTheme.backgroundInfoContrasted
+        }}
+    />
+</ColorPalette>
+
+### Success Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundSuccess: cnamLightTheme.backgroundSuccess,
+            backgroundSuccessSubdued: cnamLightTheme.backgroundSuccessSubdued,
+            backgroundSuccessContrasted: cnamLightTheme.backgroundSuccessContrasted
+        }}
+    />
+</ColorPalette>
+
+### Warning Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundWarning: cnamLightTheme.backgroundWarning,
+            backgroundWarningSubdued: cnamLightTheme.backgroundWarningSubdued,
+            backgroundWarningContrasted: cnamLightTheme.backgroundWarningContrasted
+        }}
+    />
+</ColorPalette>
+
+### Error Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundError: cnamLightTheme.backgroundError,
+            backgroundErrorSubdued: cnamLightTheme.backgroundErrorSubdued,
+            backgroundErrorContrasted: cnamLightTheme.backgroundErrorContrasted
+        }}
+    />
+</ColorPalette>
+
+### Other Backgrounds
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            backgroundDisabled: cnamLightTheme.backgroundDisabled,
+            backgroundDisabledOnDark: cnamLightTheme.backgroundDisabledOnDark,
+            backgroundAssure: cnamLightTheme.backgroundAssure,
+            backgroundProfessionnel: cnamLightTheme.backgroundProfessionnel,
+            backgroundEntreprise: cnamLightTheme.backgroundEntreprise
+        }}
+    />
+</ColorPalette>
+
+
+## Transparent Background Colors
+
+### Transparent Blues
+<ColorPalette className="vertical-palette">
+    <ColorItem
+        colors={{
+            transparentBlue18: cnamLightTheme.transparentBlue18,
+            transparentBlue8: cnamLightTheme.transparentBlue8
+        }}
+    />
+</ColorPalette>

package/src/stories/Guidelines/CustomisationEtThemes.mdx

@@ -0,0 +1,3 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Guidelines/Customisation et themes" />