@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/src/stories/Accessibilite/KitDePreAudit/Outils/Introduction.mdx

@@ -6,19 +6,16 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 Dans le cadre du pré-audit et de l’audit, il existe des outils automatisés pour vérifier certains critères de conformité en matière d'accessibilité.
 
-<b>Voici les outils requis pour le pré-audit :</b>
+L'outil principal requis pour le pré-audit est [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/). Il s'agit d'une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. **Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable**. Un audit d'accessibilité ne peut pas se reposer uniquement sur des outils automatisés car ces derniers ne détectent qu'un nombre limité de problèmes techniques. De nombreux critères d'accessibilité nécessitent une évaluation manuelle, tenant compte de la perception humaine et du contexte d’utilisation. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés. Nous avons mis en place [un guide d'utilisation de Tanaguru webext RGAA](/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs) afin de vous aider à le prendre en main.
 
-1. [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/) :
-Tanaguru Webext RGAA est une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés.
-2. [**PDF Accessibility Checker (PAC)**](https://pac.pdf-accessibility.org/en) :
-PDF Accessibility Checker (PAC) est un logiciel Windows dédié à l'audit de l'accessibilité des documents PDF. Il permet de vérifier la conformité d'un fichier PDF aux normes d'accessibilité, telles que les WCAG et les directives PDF/UA (PDF Universal Accessibility). PAC analyse la structure du document, y compris les titres, les balises, les liens, les tables et les éléments multimédia, pour s'assurer que le contenu est correctement organisé et peut être interprété par des technologies d'assistance comme les lecteurs d'écran.
-3. [**NVDA (NonVisual Desktop Access)**](https://www.nvda.fr/c2) :
-Lecteur d’écran bureau - NVDA est un lecteur d'écran open-source conçu pour les personnes malvoyantes ou aveugles. Il permet de rendre accessibles les interfaces graphiques des ordinateurs Windows en lisant à haute voix les éléments affichés à l'écran. NVDA prend en charge plusieurs applications et navigateurs web, et il est utilisé pour tester la compatibilité des sites web et des applications avec les technologies d'assistance. Cet outil est particulièrement apprécié pour son accessibilité gratuite et sa capacité à détecter des erreurs de conception qui peuvent nuire à l'expérience des utilisateurs ayant des déficiences visuelles.
-4. (Si pré-audit sur mobile) [**TalkBack**](https://www.notion.so/Pr-audit-web-conformit-l-accessibilit-18c4ee4a529d80e2ab27cadba4829e37?pvs=21) :
-Lecteur d’écran mobile - TalkBack est une fonctionnalité d'accessibilité déjà intégrée aux appareils Android qui fournit des retours vocaux sur les éléments affichés à l'écran. Ce lecteur d'écran permet à l'utilisateur d'interagir avec son appareil sans avoir besoin de visionner l'écran. En utilisant des gestes tactiles spécifiques, l'utilisateur peut naviguer à travers les applications, lire des messages, envoyer des e-mails ou encore interagir avec des contenus multimédia. TalkBack offre également des options de personnalisation pour ajuster la vitesse de la voix, le volume et d'autres paramètres en fonction des besoins de l'utilisateur. Il prend en charge une large gamme de contenus accessibles et est régulièrement mis à jour pour améliorer son efficacité et sa compatibilité avec les dernières versions d'Android. Cet outil est essentiel pour garantir que les utilisateurs en situation de handicap visuel peuvent utiliser pleinement leurs appareils Android.
-
-En complément, voici d’autres outils optionnels qui pourraient vous être utiles :
+Si vous souhaitez aller plus loin dans le pré-audit ou dans vos développements au quotidien, voici d'autres outils qui pourraient vous être utiles :
 
+- [**PDF Accessibility Checker (PAC)**](https://pac.pdf-accessibility.org/en) :
+PDF Accessibility Checker (PAC) est un logiciel Windows dédié à l'audit de l'accessibilité des documents PDF. Il permet de vérifier la conformité d'un fichier PDF aux normes d'accessibilité, telles que les WCAG et les directives PDF/UA (PDF Universal Accessibility). PAC analyse la structure du document, y compris les titres, les balises, les liens, les tables et les éléments multimédia, pour s'assurer que le contenu est correctement organisé et peut être interprété par des technologies d'assistance comme les lecteurs d'écran.
+- [**NVDA (NonVisual Desktop Access)**](https://www.nvda.fr/c2) :
+Lecteur d’écran bureau - NVDA est un lecteur d'écran open-source conçu pour les personnes malvoyantes ou aveugles. Il permet de rendre accessibles les interfaces graphiques des ordinateurs Windows en lisant à haute voix les éléments affichés à l'écran. NVDA prend en charge plusieurs applications et navigateurs web, et il est utilisé pour tester la compatibilité des sites web et des applications avec les technologies d'assistance. Cet outil est particulièrement apprécié pour son accessibilité gratuite et sa capacité à détecter des erreurs de conception qui peuvent nuire à l'expérience des utilisateurs ayant des déficiences visuelles. Afin d'en savoir plus, nous avons mis en place [un guide rapide de NVDA](/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#nvda-windows).
+- [**TalkBack**](https://www.notion.so/Pr-audit-web-conformit-l-accessibilit-18c4ee4a529d80e2ab27cadba4829e37?pvs=21) (Si pré-audit sur mobile) :
+Lecteur d’écran mobile - TalkBack est un outil d'accessibilité déjà intégré aux appareils Android qui fournit des retours vocaux sur les éléments affichés à l'écran. Ce lecteur d'écran permet à l'utilisateur d'interagir avec son appareil sans avoir besoin de visionner l'écran. En utilisant des gestes tactiles spécifiques, l'utilisateur peut naviguer à travers les applications, lire des messages, envoyer des e-mails ou encore interagir avec des contenus multimédia. TalkBack offre également des options de personnalisation pour ajuster la vitesse de la voix, le volume et d'autres paramètres en fonction des besoins de l'utilisateur. Il prend en charge une large gamme de contenus accessibles et est régulièrement mis à jour pour améliorer son efficacité et sa compatibilité avec les dernières versions d'Android. Cet outil est essentiel pour garantir que les utilisateurs en situation de handicap visuel peuvent utiliser pleinement leurs appareils Android. Afin d'en savoir plus, nous avons mis en place [un guide rapide de Talkback](/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#talkback-android).
 - [**Assistant RGAA (extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/assistant-rgaa/) :
 L'Assistant RGAA est un outil français destiné à vérifier la conformité des sites web aux critères d’accessibilité définis par le Référentiel Général d'Amélioration de l'Accessibilité (RGAA). Il permet d’effectuer des audits sur des sites en ligne pour identifier et corriger les problèmes d'accessibilité.
 - [**WAVE (extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) :

package/src/stories/Accessibilite/KitDePreAudit/Outils/LecteursDEcran.mdx

@@ -0,0 +1,77 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Accessibilité/Kit de pré-audit/Outils/Lecteurs d'écran"/>
+
+# Guide lecteurs d'écran
+
+Ce guide ne vise pas à vous former à l'utilisation quotidienne d'un lecteur d'écran, mais à vous fournir les informations nécessaires pour évaluer l'accessibilité des composants intégrés dans votre service.
+
+## Qu’est-ce qu’un lecteur d’écran ?
+
+Un lecteur d'écran est un logiciel d’assistance technique destiné aux personnes « empêchées de lire » (aveugles, malvoyantes, dyslexiques, dyspraxiques…) en transformant le contenu affiché à l'écran en synthèse vocale ou braille. Il permet de naviguer dans le système d'exploitation et les applications en restituant le contenu textuel et sa structure, à condition que cette information soit correctement fournie par le logiciel (par exemple, le navigateur web). Il ne peut pas interpréter des éléments non textuels comme des images ou des graphiques. C’est pourquoi le respect des normes d’accessibilité est important afin que la restitution puisse se faire correctement (ex : ajout d’un texte alternatif à une image).
+
+Le lecteur d'écran bureau se pilote principalement au clavier tandis que c’est essentiellement avec des gestes pour la version mobile.
+
+Il n'existe pas de lecteur d'écran unique et ils different en fonction du système d’exploitation. Ce guide se concentrera sur NVDA pour Windows et TalkBack pour Android.
+
+## Utilité d’un lecteur d’écran
+
+Un lecteur d'écran est essentiel pour un audit d'accessibilité car il permet de simuler l'expérience d'un utilisateur aveugle ou malvoyant. Il aide à :
+
+1. **Vérifier la structure** : Tester la logique de navigation (titres, sections, éléments interactifs).
+2. **Tester l'interactivité** : S'assurer que les éléments sont accessibles via le clavier et correctement annoncés.
+3. **Vérifier les mises à jour dynamiques** : S'assurer que les changements de contenu sont bien signalés.
+4. **Contrôler le balisage** : Vérifier l'utilisation correcte des balises HTML et ARIA pour une navigation fluide.
+5. **Accessibilité multimédia** : Vérifier que les images et vidéos sont correctement décrites.
+
+Cela garantit que l'interface est réellement accessible, permettant une navigation autonome pour les utilisateurs en situation de handicap visuel. N'oubliez pas de consulter les manuels officiels pour des informations détaillées sur l'utilisation de chaque outil.
+
+## NVDA (Windows)
+
+NVDA est un lecteur d'écran pour Windows, principalement utilisé pour l'audit d'accessibilité de sites web et d'applications bureautiques.
+
+Il restitue l’information sous 2 modes : le mode navigation et le mode formulaire.
+
+### Mode navigation
+
+Le mode de navigation permet de se déplacer dans le contenu d'une page (titres, liens, paragraphes, etc.)
+
+Il fournit des informations supplémentaires lors de la vocalisation. Par exemple, il annoncera "liste de x éléments" pour une liste à puces ou encore le niveau des titres, comme "titre de niveau 2", suivi de leur intitulé.
+
+### Mode formulaire
+
+Le mode formulaire est utilisé pour interagir avec des éléments de formulaire (champs de texte, cases à cocher, boutons, etc.) et y entrer des données. Le lecteur d’écran passe sur ce mode automatiquement lorsqu’il se trouve être sur un composant interactif. Les “raccourcis lettre” ne fonctionnent alors plus puisqu’ils servent à insérer du texte.
+
+Principaux raccourcis :
+
+- CTRL + ALT + n : Activer NVDA
+- NVDA + q : Quitter NVDA
+- CTRL : Arrêt de la parole
+- Flèche bas : Élément suivant
+- Flèche haut : Élément précédent
+- Tab : Élément focusable suivant
+- Maj + Tab : Élément focusable précédent
+- h : Titre suivant
+- f : Champ de formulaire suivant
+- k : Lien suivant
+- d : Région suivante
+- MAJ + lettre : Revenir en arrière
+
+Pour plus de détails, consultez [le manuel officiel NVDA](https://www.nvda.fr/doc.php) ainsi que [le guide de Tanaguru](https://www.tanaguru.com/guide-et-raccourcis-nvda-pour-les-tests-daccessibilite/).
+
+## TalkBack (Android)
+
+TalkBack est un lecteur d'écran pour Android, directement embarqué.
+
+Pour l’activer ou le désactiver, il suffit de se rendre dans les paramètres de votre appareil puis dans le menu “Accessibilité”. Un tutoriel d’utilisation vous sera alors proposé au démarrage. C’est à cet endroit que vous pouvez personnaliser l’outil tel que la vitesse de la parole, la tonalité, les gestes, etc.
+
+Ce lecteur d’écran utilise des gestes spécifiques pour naviguer dans l’interface. Voici les principaux gestes :
+
+- **Déplacer le focus** : Faites glisser un doigt vers la gauche ou vers la droite pour déplacer le focus entre les éléments à l'écran.
+- **Sélectionner un élément** : Touchez un élément à l'écran avec un seul doigt pour entendre sa description, puis double-tapez pour l'activer.
+- **Faire défiler** : Balayez deux doigts vers le haut ou vers le bas pour faire défiler l'écran.
+- **Retour** : Faites glisser trois doigts vers la gauche pour revenir en arrière.
+- **Accéder au menu d'options** : Touchez deux fois et maintenez pour ouvrir le menu contextuel des options (comme le copier, coller, etc.).
+- **Suspendre ou reprendre la lecture :** Appuyez avec deux doigts
+
+Pour plus de détails, consultez [le manuel officiel TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=fr).

package/src/stories/Accessibilite/KitDePreAudit/Outils/Tanaguru.mdx

@@ -2,7 +2,13 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Tanaguru"/>
 
-# Utilisation de Tanaguru
+# Tanaguru
+
+## Qu'est-ce que Tanaguru ?
+
+Appelée [**Tanaguru webext RGAA (Extension Firefox)**](https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext/), il s'agit d'une extension de navigateur conçue pour faciliter l'audit d'accessibilité des sites web selon le **Référentiel Général d'Amélioration de l'Accessibilité (RGAA)**. Elle permet aux utilisateurs de vérifier, directement depuis leur navigateur, la conformité de pages web aux critères d'accessibilité du RGAA, en offrant une évaluation rapide des problèmes d'accessibilité tels que les contrastes, les alternatives textuelles manquantes, la structure des balises HTML, etc. Cette extension fonctionne comme un outil d'audit instantané pour les développeurs et les testeurs d'accessibilité, en affichant directement les erreurs et en proposant des suggestions pour améliorer l'accessibilité du site. **Attention, ce service ne permet pas d’évaluer l’ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisable**. Un audit d'accessibilité ne peut pas se reposer uniquement sur des outils automatisés car ces derniers ne détectent qu'un nombre limité de problèmes techniques. De nombreux critères d'accessibilité nécessitent une évaluation manuelle, tenant compte de la perception humaine et du contexte d’utilisation. Sur les 258 tests du RGAA, Tanaguru estime qu’environ 100 tests ne sont pas automatisés.
+
+## Utilisation de Tanaguru
 
 **1. Analyse d’une page d’ameli.fr , [https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation](https://www.ameli.fr/assure/adresses-et-contacts/l-obtention-d-un-document/obtenir-une-attestation)**
 
@@ -20,13 +26,13 @@ Cliquez ensuite sur **Analyser cette page**
 
 <img alt="UtilisationTanaguruEtape3" src={'/tanaguruetape3.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 
-**5. Les éléments sur la gauche, correspondent aux thématiques du RGAA**
+**5. Les éléments sur la gauche, correspondent aux thématiques du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>**
 
 <img alt="UtilisationTanaguruEtape4" src={'/tanaguruetape4.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 
 **6. Exemple: **Eléments obligatoires** 3 erreurs qui correspondent a plusieurs éléments dans notre page. Dont l’erreur est “**propriété ARIA non autorisées sur leur élément**”.**
 
-On va chercher dans la thématique **Eléments obligatoires** du RGAA, les critères qui pourraient correspondre à l’erreur de Tanaguru.
+On va chercher dans la thématique **Eléments obligatoires** du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>, les critères qui pourraient correspondre à l’erreur de Tanaguru.
 
 <img alt="UtilisationTanaguruEtape5" src={'/tanaguruetape5.png'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'}} />
 1. La loupe permet de localiser le problème dans le code ( /!\ cet élément n’est pas toujours accessible).

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 # Pré-audit
 
-L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit RGAA. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
+L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
 
 Pour demander un audit merci de contacter [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr). L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.
 
@@ -14,7 +14,7 @@ Pour rappel, avant de lancer votre pré-audit vous devez définir l'échantillon
 
 Lancer Tanaguru sur chaque page de l’échantillon de test. Vous pouvez retrouver une documentation d’utilisation de Tanaguru [ici](/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-outils-tanaguru--docs).
 
-L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du RGAA. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
+L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
 
 ## Vérification manuelle
 

package/src/stories/Demarrer/Introduction.stories.ts

@@ -104,7 +104,7 @@ export const Panels: StoryObj = {
 			template: `
               <div>
                <v-expansion-panels>
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title style="display: inline-grid;">
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Le design system CNAM</p> 
                       <p>Un référentiel centralisé de nos styles et composants pour garantir une expérience utilisateur cohérente et harmonieuse sur toutes nos plateformes.</p>
@@ -120,12 +120,12 @@ export const Panels: StoryObj = {
 						<p style="margin-bottom:10px;">Lorsqu'une nouvelle fonctionnalité ou un nouveau produit est ajouté, l'équipe produit peut facilement l'intégrer au système existant, en utilisant les composants et règles déjà en place. Cela garantit une croissance rapide sans sacrifier la qualité ou la cohérence.</p>
 						<p style="margin-bottom:5px;font-weight:bold;">→ Profiter de standards de qualité et d’accessibilité.</p>
 						<p style="margin-bottom:10px;">Standards de qualité : Avec ses composants validés et testés, le design system vous assure que la qualité soit maintenue à travers toutes les interfaces, qu'il s'agisse d'éléments visuels, d'interactions ou de fonctionnalités.</p>
-						<p style="margin-bottom:20px;">Standards d’accessibilité : </p>
+						<p style="margin-bottom:20px;">Standards d’accessibilité : Grâce à des audits et à des bonnes pratiques intégrées, le design system garantit que chaque composant respecte les critères d'accessibilité, offrant ainsi une expérience inclusive pour tous les utilisateurs, y compris ceux en situation de handicap.</p>
         				 </v-expansion-panel-text>
                     </v-expansion-panel>
 			   </v-expansion-panels>
 				<v-expansion-panels style="margin-top:20px;">
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title>
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Pour aller plus loin sur le fonctionnement et l’utilisation du design system</p>
                       </v-expansion-panel-title>

package/src/stories/Demarrer/Releases.mdx

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ReleasesStories from './Releases.stories.ts';
+
+<Meta of={ReleasesStories}/>
+
+# Releases
+
+<Story of={ReleasesStories.List}/>

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

@@ -0,0 +1,66 @@
+import axios from 'axios'
+import { onMounted, ref } from 'vue'
+import * as marked from 'marked'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+
+export default {
+	title: 'Démarrer/Releases',
+	component: SyAlert,
+}
+export const List = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				const releases = ref([])
+				const errorMessage = ref('')
+
+				const fetchReleases = async () => {
+					try {
+						const { data } = await axios.get('https://api.github.com/repos/assurance-maladie-digital/design-system-v3/releases')
+						releases.value = data
+					}
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					catch (error) {
+						errorMessage.value = 'Une erreur est survenue lors de la récupération des releases.'
+					}
+				}
+
+				const formatDate = (date: string | number | Date) => {
+					return new Date(date).toLocaleDateString()
+				}
+
+				const formatMarkdown = (markdown: string) => {
+					return marked.parse(markdown)
+				}
+
+				onMounted(() => {
+					fetchReleases().then(r => r)
+				})
+
+				return {
+					releases,
+					errorMessage,
+					formatDate,
+					formatMarkdown,
+				}
+			},
+			template: `
+				<div class="releases">
+					<SyAlert type="info" variant="tonal" :closable="false">
+						<template #default>Nous faisons des nouvelles release (correction de bugs ou nouvelles fonctionnalités) régulièrement. Vous pouvez retrouver la liste des dernières releases ci-dessous.</template>
+					</SyAlert>
+					<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+					<div v-else>
+						<div v-for="release in releases" :key="release.id">
+							<h2>{{ release.name }} ({{ formatDate(release.published_at) }})</h2>
+							<div v-html="formatMarkdown(release.body)"></div>
+							<hr>
+						</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/DesignTokens/Conteneurs.stories.ts

@@ -34,7 +34,7 @@ export const Desktop: StoryObj = {
 						  max width = 1600 px
 					  </VCol>
 				  </VRow>
-				  <img src="/.storybook/public/conteneur-desktop.svg" alt="Tablet" class="w-100 mt-4" />
+				  <img src="/conteneur-desktop.svg" alt="Tablet" class="w-100 mt-4" />
               </div>
             `,
 		}
@@ -62,7 +62,7 @@ export const Tablet: StoryObj = {
 						  Gutter : 24px
 					  </VCol>
 					  <VCol md="6" sm="12">
-						  <img src="/.storybook/public/conteneur-tablet.svg" alt="Tablet" class="w-100" />
+						  <img src="/conteneur-tablet.svg" alt="Tablet" class="w-100" />
 					  </VCol>
 				  </VRow>
               </div>
@@ -92,7 +92,7 @@ export const Mobile: StoryObj = {
 						  Gutter : 24px
 					  </VCol>
 					  <VCol md="6" sm="12">
-						  <img src="/.storybook/public/conteneur-mobile.svg" alt="Mobile" class="w-50" />
+						  <img src="/conteneur-mobile.svg" alt="Mobile" class="w-50" />
 					  </VCol>
 				  </VRow>
               </div>

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -0,0 +1,36 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Breaking changes"/>
+
+# Les breaking changes
+
+## Stores
+
+Les librairies `vue-dot` et `synapse-bridge` utilisaient en interne la librairie `vuex`. Cette dépendance a été supprimée dans `synapse`. Plus aucune librairie de gestion d'état n'est donc imposée par le design system.
+
+## Form builder
+
+Le form builder n'est plus maintenu par le design system dans sa version synapse. Vous pouvez trouvez le code source dans sa version vue2 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder) et sa version vue3 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder).
+
+## Les composants
+
+### CustomIcon
+
+Le composant `CustomIcon` a été retiré du design system.
+
+Vous devez désormais utiliser le composant [VIcon](https://vuetifyjs.com/en/components/icons/) de Vuetify avec les icônes material du package[ @mdi/js](https://www.npmjs.com/package/@mdi/js). Pour des icônes personnalisés, importez les sous forme de composant.
+
+<Source dark code={`
+<script setup>
+	import { VIcon } from 'vuetify/components'
+	import { mdiAccount } from '@mdi/js'
+</script>
+
+<template>
+	<VIcon> {{ mdiAccount }} </VIcon>
+</template>
+`} />
+
+### FilterModule
+
+Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterInline](/docs/composants-filtres-filterssidebar--docs) et [FilterSideBar](/docs/composants-filtres-filterinline--docs).

package/src/stories/GuideDuDev/UtiliserLesRules.mdx

@@ -1,8 +1,8 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Guide Du Dev/Utiliser les rules"/>
+<Meta title="Guide Du Dev/Utiliser le système de validation"/>
 
-# Utiliser les règles de validation
+# Utiliser le système de validation
 
 Ce guide décrit comment utiliser le système de validation de formulaires du Design System pour créer des validations flexibles et intuitives.
 

package/src/utils/formatDate/index.ts

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs } from 'dayjs'
+
+/** Format a date with dayjs */
+export function formatDate(date: Dayjs, format = 'DD/MM/YYYY'): string {
+	return dayjs(date).format(format)
+}

package/src/utils/formatDate/tests/formatDate.spec.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+import { describe, it, expect } from 'vitest'
+
+import { formatDate } from '../'
+
+describe('formatDate', () => {
+	it('formats a valid date', () => {
+		const date = dayjs('2022-01-01')
+
+		expect(formatDate(date)).toEqual('01/01/2022')
+	})
+
+	it('does not format an invalid date', () => {
+		const date = dayjs(null)
+
+		expect(formatDate(date)).toEqual('Invalid Date')
+	})
+})

package/src/utils/functions/validation/isDateAfter/index.ts

@@ -0,0 +1,9 @@
+import { parseDate } from '@/utils/parseDate'
+
+/** Check if a date is after another date (DD/MM/YYYY format) */
+export function isDateAfter(maxDate: string, value: string): boolean {
+	const parsedValue = parseDate(value)
+	const parsedMaxDate = parseDate(maxDate)
+
+	return parsedValue.isAfter(parsedMaxDate)
+}

package/src/utils/functions/validation/isDateAfter/tests/isDateAfter.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+import { isDateAfter } from '..'
+
+describe('isDateAfter', () => {
+	const today = formatDate(dayjs())
+	const pasteDate = formatDate(dayjs().subtract(1, 'year'))
+	const futureDate = formatDate(dayjs().add(1, 'year'))
+
+	it('returns true with a future date', () => {
+		expect(isDateAfter(today, futureDate)).toBeTruthy()
+	})
+
+	it('returns false with a past date', () => {
+		expect(isDateAfter(today, pasteDate)).toBeFalsy()
+	})
+})

package/src/utils/functions/validation/isDateBefore/index.ts

@@ -0,0 +1,9 @@
+import { parseDate } from '@/utils/parseDate'
+
+/** Check if a date is before another date (DD/MM/YYYY format) */
+export function isDateBefore(minDate: string, value: string): boolean {
+	const parsedValue = parseDate(value)
+	const parsedMinDate = parseDate(minDate)
+
+	return parsedValue.isBefore(parsedMinDate)
+}

package/src/utils/functions/validation/isDateBefore/tests/isDateBefore.spec.ts

@@ -0,0 +1,23 @@
+import { isDateBefore } from '../'
+import { describe, it, expect } from 'vitest'
+
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+
+describe('isDateBefore', () => {
+	const today = formatDate(dayjs())
+	const pasteDate = formatDate(dayjs().subtract(1, 'year'))
+	const futureDate = formatDate(dayjs().add(1, 'year'))
+
+	it('returns true with a past date', () => {
+		expect(isDateBefore(today, pasteDate)).toBeTruthy()
+	})
+
+	it('returns false with a future date', () => {
+		expect(isDateBefore(today, futureDate)).toBeFalsy()
+	})
+
+	it('returns false with the current date', () => {
+		expect(isDateBefore(today, today)).toBeFalsy()
+	})
+})

package/src/utils/functions/validation/isDateInRange/index.ts

@@ -0,0 +1,22 @@
+import dayjs from 'dayjs'
+
+import isBetween from 'dayjs/plugin/isBetween'
+dayjs.extend(isBetween)
+
+export type Interval = '()' | '[]' | '[)' | '(]'
+
+/** Check if a date is in a range */
+export function isDateInRange(
+	date: string,
+	startDate: string,
+	endDate: string,
+	interval: Interval = '[)', // '[' indicates inclusion, '(' indicates exclusion
+): boolean {
+	const rangePositive = dayjs(startDate).isBefore(dayjs(endDate))
+
+	if (rangePositive) {
+		return dayjs(date).isBetween(startDate, endDate, null, interval)
+	}
+
+	return false
+}

package/src/utils/functions/validation/isDateInRange/tests/isDateInRange.spec.ts

@@ -0,0 +1,28 @@
+import { isDateInRange } from '../'
+import { describe, it, expect } from 'vitest'
+
+const start = '2019-10-21'
+const end = '2019-10-27'
+
+const date = '2019-10-23'
+
+describe('isDateInRange', () => {
+	it('returns true if the date is in the range', () => {
+		expect(isDateInRange(date, start, end)).toBe(true)
+	})
+
+	it('returns false if the range is negative', () => {
+		// Invert start & end date to create a negative range
+		expect(isDateInRange(date, end, start)).toBe(false)
+	})
+
+	it('works with a custom interval', () => {
+		const start = '2019-10-21'
+		const end = '2019-10-27'
+
+		const date = '2019-10-27'
+
+		// We change the interval to allow the last day in the range
+		expect(isDateInRange(date, start, end, '[]')).toBe(true)
+	})
+})

package/src/utils/functions/validation/isDateValid/index.ts

@@ -0,0 +1,67 @@
+import { parseDate } from '@/utils/parseDate'
+import dayjs from 'dayjs'
+
+import isLeapYear from 'dayjs/plugin/isLeapYear'
+
+dayjs.extend(isLeapYear)
+
+const DATE_SEPARATORS = /[- /.]/
+/** Matches DD/MM/YYYY with one of the DATE_SEPARATORS */
+export const DATE_FORMAT_REGEX
+	= /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.]\d{4}/
+
+export enum DateErrorCodes {
+	WRONG_FORMAT = 'wrongFormat',
+	MONTH_NOT_MATCH = 'monthNotMatch',
+	NOT_LEAP_YEAR = 'notALeapYear',
+}
+
+/** Check if a date is valid */
+export function isDateValid(date: string): string | true {
+	if (!date.match(DATE_FORMAT_REGEX)) {
+		return DateErrorCodes.WRONG_FORMAT
+	}
+
+	const DAYS_IN_MONTH = [
+		31,
+		28, // Check leap year later
+		31,
+		30,
+		31,
+		30,
+		31,
+		31,
+		30,
+		31,
+		30,
+		31,
+	]
+
+	const parsedDate = date.split(DATE_SEPARATORS)
+
+	const day = parseInt(parsedDate[0], 10)
+	const month = parseInt(parsedDate[1], 10)
+
+	if (month !== 2) {
+		if (day > DAYS_IN_MONTH[month - 1]) {
+			return DateErrorCodes.MONTH_NOT_MATCH
+		}
+		else {
+			return true
+		}
+	}
+	else {
+		const parsed = parseDate(date)
+		const isLeap = parsed.isLeapYear()
+
+		if (isLeap && day > 29) {
+			return DateErrorCodes.MONTH_NOT_MATCH
+		}
+
+		if (!isLeap && day >= 29) {
+			return DateErrorCodes.NOT_LEAP_YEAR
+		}
+
+		return true
+	}
+}

package/src/utils/functions/validation/isDateValid/tests/isDateValid.spec.ts

@@ -0,0 +1,46 @@
+import { isDateValid } from '../index'
+import { describe, it, expect } from 'vitest'
+
+describe('isDateValid', () => {
+	it('returns an error when the date is not valid', () => {
+		const date = '99/99/9999'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the format is invalid', () => {
+		const date = '2020-04-16'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the day does not match the month', () => {
+		const date = '31/11/2019' // Only 30 days in November
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (not leap year) and the day does not match the month', () => {
+		const date = '29/02/2019' // Not a leap year, only 28 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (leap year) and the day does not match the month', () => {
+		const date = '30/02/2020' // Leap year, 29 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns true when it is february and the date is valid', () => {
+		const date = '15/02/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+
+	it('returns true when the date is valid', () => {
+		const date = '14/09/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+})

package/src/utils/functions/validation/isEmailValid/index.ts

@@ -0,0 +1,9 @@
+/** From https://emailregex.com/ */
+export const EMAIL_REGEXP
+	// eslint-disable-next-line no-control-regex
+	= /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/
+
+/** Check if an email is valid */
+export function isEmailValid(email: string): boolean {
+	return Boolean(EMAIL_REGEXP.exec(email))
+}

package/src/utils/functions/validation/isWeekend/index.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+export const WEEKEND_DAYS = ['Saturday', 'Sunday']
+
+/** Check if a date is Saturday or Sunday */
+export function isWeekend(date: string): boolean {
+	const day = dayjs(date).format('dddd')
+
+	return WEEKEND_DAYS.includes(day)
+}