@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/index.ts

@@ -3,12 +3,16 @@ export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
-export { default as CustomInputSelect } from './Customs/CustomInputSelect/CustomInputSelect.vue'
-export { default as CustomSelect } from './Customs/CustomSelect/CustomSelect.vue'
-export { default as CustomTextField } from './Customs/CustomTextField/CustomTextField.vue'
+export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
+export { default as SyInputSelect } from '@/components/Customs/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from '@/components/Customs/SySelect/SySelect.vue'
+export { default as SyTextField } from '@/components/Customs/SyTextField/SyTextField.vue'
 export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
+export { default as DataListItem } from './DataListItem/DataListItem.vue'
+export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
+export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -20,12 +24,17 @@ export { default as HeaderLogo } from './HeaderBar/HeaderLogo/HeaderLogo.vue'
 export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue'
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
+export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
+export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/index.ts

@@ -0,0 +1,8 @@
+// rules
+export * from './rules/useFieldValidation'
+
+// vuetifyOptions
+export * from './useCustomizableOptions'
+
+// withable
+export * from './widthable'

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -0,0 +1,82 @@
+import { useFieldValidation } from '../useFieldValidation'
+import { describe, it, expect } from 'vitest'
+
+describe('useFieldValidation', () => {
+	const { generateRules } = useFieldValidation()
+
+	describe('createRule', () => {
+		it('should validate required rule', () => {
+			const rules = generateRules([{ type: 'required', options: { fieldName: 'Nom' } }])
+			const requiredRule = rules[0]
+
+			expect(requiredRule('')).toBe('Vous devez renseigner Nom.')
+			expect(requiredRule('Test')).toBe(true)
+		})
+
+		it('should validate min rule', () => {
+			const rules = generateRules([{ type: 'min', options: { value: 5 } }])
+			const minRule = rules[0]
+
+			expect(minRule(3)).toBe('La valeur doit être supérieure ou égale à 5.')
+			expect(minRule(5)).toBe(true)
+			expect(minRule(10)).toBe(true)
+		})
+
+		it('should validate minLength rule', () => {
+			const rules = generateRules([{ type: 'minLength', options: { length: 3 } }])
+			const minLengthRule = rules[0]
+
+			expect(minLengthRule('ab')).toBe('Ce champ doit avoir au moins 3 caractères.')
+			expect(minLengthRule('abc')).toBe(true)
+		})
+
+		it('should validate max rule', () => {
+			const rules = generateRules([{ type: 'max', options: { value: 10 } }])
+			const maxRule = rules[0]
+
+			expect(maxRule(15)).toBe('La valeur doit être inférieure ou égale à 10.')
+			expect(maxRule(10)).toBe(true)
+			expect(maxRule(5)).toBe(true)
+		})
+
+		it('should validate maxLength rule', () => {
+			const rules = generateRules([{ type: 'maxLength', options: { length: 5 } }])
+			const maxLengthRule = rules[0]
+
+			expect(maxLengthRule('abcdef')).toBe('Ce champ ne doit pas dépasser 5 caractères.')
+			expect(maxLengthRule('abc')).toBe(true)
+		})
+
+		it('should validate exactLength rule', () => {
+			const rules = generateRules([{ type: 'exactLength', options: { length: 4 } }])
+			const exactLengthRule = rules[0]
+
+			expect(exactLengthRule('abc')).toBe('Ce champ doit avoir exactement 4 caractères.')
+			expect(exactLengthRule('abcd')).toBe(true)
+		})
+
+		it('should validate email rule', () => {
+			const rules = generateRules([{ type: 'email' }])
+			const emailRule = rules[0]
+
+			expect(emailRule('invalid-email')).toBe('Veuillez entrer un email valide.')
+			expect(emailRule('test@example.com')).toBe(true)
+		})
+
+		it('should validate matchPattern rule', () => {
+			const rules = generateRules([{ type: 'matchPattern', options: { pattern: /^[a-z]+$/ } }])
+			const matchPatternRule = rules[0]
+
+			expect(matchPatternRule('123')).toBe('Format invalide.')
+			expect(matchPatternRule('abc')).toBe(true)
+		})
+
+		it('should handle ignoreSpace option in length rules', () => {
+			const rules = generateRules([{ type: 'minLength', options: { length: 3, ignoreSpace: true } }])
+			const minLengthRule = rules[0]
+
+			expect(minLengthRule('a b')).toBe('Ce champ doit avoir au moins 3 caractères.')
+			expect(minLengthRule('ab c')).toBe(true)
+		})
+	})
+})

package/src/composables/rules/useFieldValidation.ts

@@ -0,0 +1,53 @@
+type RuleOptions = {
+	fieldName?: string
+	message?: string
+	length?: number
+	value?: number
+	pattern?: RegExp
+	ignoreSpace?: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+type ValidationRule = (value: any) => string | boolean
+
+export function useFieldValidation() {
+	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
+		const getValueLength = (value: string) => {
+			return options.ignoreSpace ? value.replace(/\s/g, '').length : value.length
+		}
+
+		switch (type) {
+			case 'required':
+				return (value: string) =>
+					!!value || options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.`
+			case 'min':
+				return (value: number) =>
+					value >= (options.value ?? 0) || options.message || `La valeur doit être supérieure ou égale à ${options.value}.`
+			case 'minLength':
+				return (value: string) =>
+					getValueLength(value) >= (options.length ?? 0) || options.message || `Ce champ doit avoir au moins ${options.length} caractères.`
+			case 'max':
+				return (value: number) =>
+					value <= (options.value ?? Infinity) || options.message || `La valeur doit être inférieure ou égale à ${options.value}.`
+			case 'maxLength':
+				return (value: string) =>
+					getValueLength(value) <= (options.length ?? Infinity) || options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.`
+			case 'exactLength':
+				return (value: string) =>
+					getValueLength(value) === (options.length ?? 0) || options.message || `Ce champ doit avoir exactement ${options.length} caractères.`
+			case 'email':
+				return (value: string) =>
+					/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || options.message || `Veuillez entrer un email valide.`
+			case 'matchPattern':
+				return (value: string) =>
+					options.pattern ? options.pattern.test(value) || options.message || `Format invalide.` : `Format invalide.`
+			default:
+				return () => `La règle spécifiée n'existe pas.`
+		}
+	}
+	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>) => {
+		return fieldRules.map(rule => createRule(rule.type, rule.options))
+	}
+
+	return { generateRules }
+}

package/src/designTokens/index.ts

@@ -2,6 +2,7 @@ import { cnamSemanticTokens } from './tokens/cnam/cnamSemantic'
 import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
 import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
+import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { bootstrapColorsTokens } from './tokens/bootstrap/bootstrapColors'
 import { bootstrapLightTheme } from './tokens/bootstrap/bootstrapLightTheme'
 
@@ -10,6 +11,7 @@ export {
 	cnamSemanticTokens,
 	cnamContextualTokens,
 	cnamLightTheme,
+	cnamDarkTheme,
 	bootstrapColorsTokens,
 	bootstrapLightTheme,
 }

package/src/designTokens/tokens/cnam/cnamDarkTheme.ts

@@ -0,0 +1,5 @@
+import { cnamColorsTokens } from './cnamColors'
+
+export const cnamDarkTheme = {
+	backgroundSurface: cnamColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -7,6 +7,7 @@ export const cnamLightTheme = {
 	accent: cnamColorsTokens.cyan.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
+	avatar: cnamColorsTokens.cyan.darken20,
 	success: cnamColorsTokens.turquoise.darken60,
 	warning: cnamColorsTokens.yellow.darken60,
 	risquePro: cnamColorsTokens.brick.base,

package/src/main.ts

@@ -1,3 +1,5 @@
 import '../src/assets/tokens.scss'
+
 export * from './components'
 export * from './services'
+export * from './composables'

package/src/stories/Fondamentaux/Arrondis.mdx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Arrondis" />
+
+# Arrondis
+
+Les angles des éléments permettent de créer du contraste entre les formes et de suggérer l’utilisation des composants
+
+Il existe 4 radius disponibles :
+
+- <b>rounded-0 : 0px</b><br/>
+Dès lors que l’on ne souhaite pas utiliser de radius
+
+- <b>rounded : 4px</b><br/>
+Ce radius peut être utilisé sur des éléments interactifs tels que les boutons, les inputs, les alerts,
+
+- <b>rounded-lg : 8px</b><br/>
+Ce radius peut être utilisé sur des blocs de structure (cards, tableaux...)
+
+- <b>rounded-pill : 96px</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 />
+<img alt="Radius" src={'/radius.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/{Guidelines → Fondamentaux}/Colors.mdx

@@ -2,7 +2,7 @@ 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" />
+<Meta title="Fondamentaux/Couleurs" />
 
 # Couleurs
 

package/src/stories/Fondamentaux/Conteneurs.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Conteneurs de page" />
+
+# Conteneurs de page
+
+Maquettes à mettre à jour

package/src/stories/Fondamentaux/CustomisationEtThemes.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fondamentaux/Customisation et thèmes" />
+
+# Customisation et thèmes
+
+Contenu à définir

package/src/stories/Fondamentaux/Elevations.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Elévations" />
+
+# Elévations
+
+<b>Les plateformes de l’Assurance Maladie n’utilisent pas d’élévations à but esthétiques.</b><br/>
+L’élévation est à utiliser pour représenter des interactions avec superposition, comme un élément fixe se positionnant au-dessus d’un élément scrollable, un bouton flottant...
+
+<b>Le style d’élévation est issu de la librairie Vuetify.</b><br/>
+Pour des raisons de cohérence et d’esthétique, des 24 élévations différentes, nous avons retenue la <b>02</b> qui sera la seule et unique utilisée sur les plateformes.
+
+<br />
+<img alt="Elevation" src={'/elevation.jpg'} style={{marginLeft: '-5px'}} />

package/src/stories/Fondamentaux/Espacements.mdx

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Espacements" />
+
+# Espacements
+
+Le design système de la CNAM est basé sur des multiples de 4 pour définir la taille des éléments, placer des espacements et disposer des composants.<br/>
+Ce système d’espacement permet de garantir une homogénéité, cohérence et consistance des interfaces conçues. Cela dans le but d'améliorer l’UX et de faciliter la conception et le développement.
+
+Chaque partie de l'interface utilisateur doit être intentionnellement conçue, y compris l'espace vide entre les éléments. Les espacements permettent de :
+
+- <b>Créer des relations</b>
+Utilisez des espacements faibles entre plusieurs composants pour signaler qu’ils sont liés, ou font partie d’un même groupe (exemple : champs de formulaire) ;
+Utilisez des espacements importants pour mettre en évidence un élément indépendant du reste de la page (exemple : call to action).
+
+- <b>Créer des hiérarchies</b>
+Augmentez les espacements autour d’un composant clé de votre page permet d’améliorer sa visibilité.
+
+## Les espacements verticaux
+<br />
+<img alt="Les espacements verticaux" src={'/espacements-verticaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+## Les espacements horizontaux
+<br />
+<img alt="Les espacements horizontaux" src={'/espacements-horizontaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+## Mise en situation
+<br />
+<img alt="Mise en situation" src={'/espacements-situation.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/{Guidelines → Fondamentaux}/Introduction.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Guidelines/Introduction" />
+<Meta title="Fondamentaux/Introduction" />
 
 Principes de design
 ===================

package/src/stories/Fondamentaux/StylesTypographiques.mdx

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Styles typographiques" />
+
+# Styles typographiques
+
+## Styles de titres
+
+Les titres sont utilisés pour créer une hiérarchie visuelle dans la page, et permettent de trouver facilement une information.
+
+<img alt="Styles de titres" src={'/font-titres.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Styles de titres alternatifs
+
+Pour donner une plus grande liberté éditoriale et graphique, sans nuire à la hiérarchie de l’information et au référencement nous vous proposons plusieurs niveaux de titres alternatifs (display). Vous pourrez les utiliser pour les mise en avant, les bannières, etc..
+Les titres alternatifs peuvent être associés selon votre besoin à un h1, un h2, un h3 ou un h4.
+
+<img alt="Styles de titres alternatifs" src={'/font-titres-alt.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Corps de texte
+
+Les styles de texte sont là pour vous aider à concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites.
+
+<img alt="Corps de texte" src={'/font-corps.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Liens et libellés
+
+<br />
+
+<img alt="Liens et libellés" src={'/font-liens.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/Fondamentaux/Typographie.mdx

@@ -0,0 +1,58 @@
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+<Meta title="Fondamentaux/Typographie" />
+
+export const typography = {
+    type: {
+        primary: 'Arial',
+    },
+    weight: {
+        regular: '400',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+    },
+    size: {
+        s1: 12,
+        s2: 14,
+        s3: 16,
+        m1: 18,
+        m2: 20,
+        m3: 24,
+        l1: 28,
+        l2: 30,
+        l3: 32,
+        l4:40,
+    },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typographie
+
+<img alt="Arial" src={'/font-arial.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+**Weights:** 400(regular), 700(bold), 900(black)
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.s1),
+        Number(typography.size.s2),
+        Number(typography.size.s3),
+        Number(typography.size.m1),
+        Number(typography.size.m2),
+        Number(typography.size.m3),
+        Number(typography.size.l1),
+        Number(typography.size.l2),
+        Number(typography.size.l3),
+        Number(typography.size.l4),
+    ]}
+    fontWeight={typography.weight.regular}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+**Interlignage:** 2 ratio de line-height :
+
+- 130% quand le `font-size` est supérieur à 18px
+- 150% quand le `font-size` est inférieur ou égal à 18px

package/src/stories/GuideDuDev/CommentUtiliserLesRules.mdx

@@ -0,0 +1,132 @@
+import {Meta, Source} from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Comment utiliser les rules"/>
+
+# Comment 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.
+
+---
+
+## Introduction
+
+Le composable `useFieldValidation` vous permet de définir des règles de validation dynamiques pour différents champs dans vos formulaires. Ce composable est conçu pour être flexible, réutilisable et facilement intégrable avec des bibliothèques comme Vuetify.
+
+---
+
+## Structure du composable
+
+### Type `RuleOptions`
+
+    <Source dark code={`
+type RuleOptions = {
+fieldName?: string; // Nom du champ utilisé dans les messages d'erreur
+message?: string; // Message personnalisé pour la règle
+length?: number; // Longueur minimale ou maximale
+value?: number; // Valeur minimale ou maximale
+pattern?: RegExp; // Motif à valider
+ignoreSpace?: boolean; // Ignorer les espaces lors de la validation de longueur
+};
+`} />
+
+---
+
+## Exemple d'intégration
+
+### Script Vue.js
+
+    <Source dark code={`
+<script lang="ts" setup>
+    import {ref} from 'vue';
+    import {useFieldValidation} from '@cnamts/synapse';
+
+    const {generateRules} = useFieldValidation();
+
+    const firstName = ref('');
+    const email = ref('');
+    const age = ref('');
+
+    const rules = {
+    firstName: generateRules([
+{type: 'required', options: {message: 'Ce champ est requis.'}},
+{type: 'minLength', options: {length: 3, ignoreSpace: true}},
+{type: 'maxLength', options: {length: 20}},
+    ]),
+    email: generateRules([
+{type: 'required', options: {fieldName: 'Email'}},
+{type: 'email'},
+    ]),
+    age: generateRules([
+{type: 'min', options: {value: 18}},
+{type: 'max', options: {value: 99}},
+    ]),
+};
+
+    const validateField = (field: string) => {
+    return rules[field].every((rule) => rule(field));
+};
+
+    const handleSubmit = () => {
+    if (validateField('firstName') && validateField('email') && validateField('age')) {
+    alert('Formulaire valide.');
+} else {
+    alert('Merci de vérifier les champs.');
+}
+};
+</script>
+`} />
+---
+
+### Template Vue.js
+
+    <Source dark code={`
+<template>
+    <v-form
+    @submit.prevent="handleSubmit">
+    <v-text-field
+        v-model="firstName"
+    :rules="rules.firstName"
+    label="Prénom"
+    @blur="validateField('firstName')"
+    />
+    <v-text-field
+        v-model="email"
+    :rules="rules.email"
+    label="Email"
+    @blur="validateField('email')"
+    />
+    <v-text-field
+        v-model="age"
+    :rules="rules.age"
+    label="Âge"
+    @blur="validateField('age')"
+    />
+    <v-btn block class="mt-2" type="submit">Soumettre</v-btn>
+</v-form>
+</template>
+`} />
+---
+
+## Fonctionnalités supportées
+
+- **Validation requise** (`required`)
+- **Longueur minimale** (`minLength`)
+- **Longueur maximale** (`maxLength`)
+- **Valeur minimale** (`min`)
+- **Valeur maximale** (`max`)
+- **Validation par motif** (`matchPattern`)
+- **Validation d'email** (`email`)
+
+---
+
+## Bonnes pratiques
+
+- Toujours tester les messages d'erreur personnalisés pour garantir une bonne expérience utilisateur.
+- Centraliser la logique de validation pour une meilleure maintenance.
+- Documenter les règles complexes pour aider votre équipe à comprendre leur fonctionnement.
+
+---
+
+## Conclusion
+
+Avec `useFieldValidation`, vous disposez d'un moyen simple et flexible pour gérer vos validations de formulaires dans Vue.js. Combinez-le avec des bibliothèques comme Vuetify pour une expérience utilisateur optimisée.

package/src/stories/{Fondamentaux → Guidelines}/Accessibilite/Accessibilite.stories.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItems } from './AccessibiliteItems'
 
 export default {
-	title: 'Fondamentaux/Accessibilité',
+	title: 'Guidelines/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

package/src/stories/{Fondamentaux → Guidelines}/EcoConception/Econception.stories.ts

@@ -1,9 +1,9 @@
 import { VExpansionPanels, VExpansionPanel } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { ecoDesignItems } from '@/stories/Fondamentaux/EcoConception/ecoDesignItems'
+import { ecoDesignItems } from '@/stories/Guidelines/EcoConception/ecoDesignItems'
 
 export default {
-	title: 'Fondamentaux/Éco-conception',
+	title: 'Guidelines/Éco-conception',
 }
 
 export const EcoPanel: StoryObj = {

package/src/components/Customs/CustomInputSelect/CustomInputSelect.mdx

@@ -1,40 +0,0 @@
-import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as CustomInputSelectStories from "./CustomInputSelect.stories.ts";
-
-<Meta of={CustomInputSelectStories} />
-
-# CustomInputSelect
-
-Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
-
-<Canvas of={CustomInputSelectStories.Default} />
-
-<Story of={CustomInputSelectStories.Info} />
-
-# API
-
-<Controls of={CustomInputSelectStories.Default} />
-
-# Exemple d'utilisation
-
-<Source dark code={`
-<script setup lang="ts">
-	import CustomInputSelect from '@cnamts/synapse'
-
-	const items = [
-        { text: 'Option 1', value: '1' },
-        { text: 'Option 2', value: '2' },
-    ],
-</script>
-
-<template>
-	<main>
-		<div class="mt-12 ml-12">
-			<CustomInputSelect
-				v-model="value"
-				:items="items"
-			/>
-		</div>
-	</main>
-</template>
-`} />