@cnamts/synapse 1.0.11 → 1.0.13

package/src/composables/validation/useFormValidation.ts

@@ -3,12 +3,16 @@ import { provide, inject, ref, type InjectionKey, type Ref } from 'vue'
 // Type pour les composants pouvant être validés
 export interface ValidatableComponent {
 	validateOnSubmit: () => Promise<boolean> | boolean
+	clearValidation?: () => void
+	reset?: () => void
 }
 
 // Clé d'injection pour le registre des composants validables
 const ValidatableComponentsKey: InjectionKey<{
 	register: (component: ValidatableComponent) => void
 	unregister: (component: ValidatableComponent) => void
+	clearAll: () => void
+	resetAll: () => void
 	components: Ref<ValidatableComponent[]>
 }> = Symbol('ValidatableComponents')
 
@@ -29,23 +33,55 @@ export function useFormValidation() {
 
 	// Fonction pour supprimer un composant validable du registre
 	const unregister = (component: ValidatableComponent) => {
-		const index = validatableComponents.value.indexOf(component)
+		// Prefer direct reference removal
+		let index = validatableComponents.value.indexOf(component)
+		// Fallback: locate by matching validateOnSubmit reference
+		if (index === -1) {
+			index = validatableComponents.value.findIndex(c => c.validateOnSubmit === component.validateOnSubmit)
+		}
 		if (index !== -1) {
 			validatableComponents.value.splice(index, 1)
 		}
 	}
 
+	// Fonction pour nettoyer les validations de tous les composants enregistrés
+	const clearAll = () => {
+		if (validatableComponents.value.length === 0) return
+		validatableComponents.value.forEach((component) => {
+			try {
+				component.clearValidation?.()
+			}
+			catch {
+				// no-op: un composant peut ne pas implémenter clearValidation
+			}
+		})
+	}
+
+	const resetAll = () => {
+		if (validatableComponents.value.length === 0) return
+		validatableComponents.value.forEach((component) => {
+			try {
+				component.reset?.()
+			}
+			catch {
+				// no-op: un composant peut ne pas implémenter reset
+			}
+		})
+	}
+
 	// Fournir le registre aux composants enfants
 	provide(ValidatableComponentsKey, {
 		register,
 		unregister,
+		clearAll,
+		resetAll,
 		components: validatableComponents,
 	})
 
 	/**
-	 * Valide tous les composants enfants enregistrés
-	 * @returns Promise<boolean> - true si tous les composants sont valides
-	 */
+     * Valide tous les composants enfants enregistrés
+     * @returns Promise<boolean> - true si tous les composants sont valides
+     */
 	const validateAll = async (): Promise<boolean> => {
 		if (validatableComponents.value.length === 0) {
 			return true
@@ -65,6 +101,8 @@ export function useFormValidation() {
 	return {
 		validateAll,
 		validatableComponents,
+		clearAll,
+		resetAll,
 	}
 }
 
@@ -73,19 +111,19 @@ export function useFormValidation() {
  * @returns Fonction pour s'enregistrer et se désinscrire du formulaire parent
  */
 export function useValidatableComponent() {
-	// Récupérer le registre du formulaire parent
 	const formRegistry = inject(ValidatableComponentsKey, null)
-
-	// Si le composant n'est pas dans un formulaire avec useFormValidation, ne rien faire
 	if (!formRegistry) {
 		return {
 			register: () => {},
 			unregister: () => {},
+			clearAll: () => {},
+			resetAll: () => {},
 		}
 	}
-
 	return {
 		register: formRegistry.register,
 		unregister: formRegistry.unregister,
+		clearAll: formRegistry.clearAll,
+		resetAll: formRegistry.resetAll,
 	}
 }

package/src/composables/validation/useValidatable.ts

@@ -14,26 +14,37 @@ import { useValidatableComponent } from './useFormValidation'
  *   return isValid
  * }
  *
+ * const clearValidation = () => {
+ *   // Logique de nettoyage de la validation
+ * }
+ *
+ * const reset = () => {
+ *   // Logique de réinitialisation
+ * }
+ *
  * // Enregistrer le composant auprès du formulaire parent
- * useValidatable(validateOnSubmit)
+ * useValidatable(validateOnSubmit, clearValidation, reset)
  */
-export function useValidatable(validateMethod: () => Promise<boolean> | boolean) {
+export function useValidatable(
+	validateMethod: () => Promise<boolean> | boolean,
+	clearValidation?: () => void,
+	reset?: () => void,
+) {
 	const { register, unregister } = useValidatableComponent()
 	const instance = getCurrentInstance()
 
+	// Keep a stable object reference for register/unregister symmetry
+	const componentRef = { validateOnSubmit: validateMethod, clearValidation, reset }
+
 	onMounted(() => {
 		if (instance) {
-			register({
-				validateOnSubmit: validateMethod,
-			})
+			register(componentRef)
 		}
 	})
 
 	onBeforeUnmount(() => {
 		if (instance) {
-			unregister({
-				validateOnSubmit: validateMethod,
-			})
+			unregister(componentRef)
 		}
 	})
 

package/src/stories/Accessibilite/Introduction.mdx

@@ -220,7 +220,7 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
   <div>
     <h3>Besoin d'accompagnement ?</h3>
     <p>Si vous avez besoin d'un accompagnement sur le sujet, merci de prendre contact avec <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a>.</p>
-    <p>Pour toute remontée de problème liée à l'accessibilité, veuillez <a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=accessibility.md">signaler un problème d'accessibilité</a>.</p>
+    <p>Pour toute remontée de problème liée à l'accessibilité, veuillez <a href="/?path=/docs/démarrer-signaler-une-anomalie--docs">signaler un problème d'accessibilité</a>.</p>
   </div>
 </div>
 

package/src/stories/Demarrer/EnrichirLeDesignSystem.mdx

@@ -0,0 +1,43 @@
+import {Meta, Story} from '@storybook/addon-docs/blocks';
+import * as ComponentStories from './EnrichirLeDesignSystem.stories.ts';
+import '../styles/shared.css';
+
+<Meta title="Démarrer/Enrichir le Design System"/>
+
+<div className="header">
+    <h1>Enrichir le Design System</h1>
+</div>
+
+## Introduction
+
+Le Design System de l'Assurance Maladie est un projet vivant qui évolue constamment pour répondre aux besoins des utilisateurs et aux avancées technologiques.<br/>
+Votre contribution est essentielle pour garantir que le Design System reste pertinent, accessible et efficace.<br/>
+Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est examinée avec attention par l'équipe du Studio Design.
+
+<Story of={ComponentStories.InfoIntro}/>
+
+<a id="exigences" />
+## Exigences requises pour acceptation d'un nouveau composant ou d'une nouvelle fonctionnalité
+
+1. Être **conforme aux exigences de la charte graphique** de la CNAM (tokens associés).
+2. Avoir un **intérêt d'usage pour plusieurs produits** de l'Assurance Maladie (une justification métier peut être demandée).
+3. Avoir un **intérêt d'usage ou de pertinence** par rapport aux **composants de la bibliothèque Vuetify**.
+4. Avoir un **intérêt d'usage ou de pertinence** par rapport aux **composants existant du Design System**.
+5. Doit permettre la **responsivité**.
+6. Doit permettre le **respect du Référentiel général d'amélioration de l'accessibilité** (RGAA).
+7. Doit permettre aux produits utilisateurs du composant de respecter des **bonnes pratiques d’éco-conception**.
+8. Doit permettre la **maintenabilité du composant**.
+9. Ne doit pas engendrer de **conflit** ou **régression** avec l'existant.
+10. Doit se conformer aux **exigences techniques** du Design System et à son bon fonctionnement sur le Starter Kit (VueJS 3, version des plugins...).
+
+## Créer une nouvelle demande
+
+<Story of={ComponentStories.Optimisation}/>
+
+<Story of={ComponentStories.AjoutFonctionnalite}/>
+
+<Story of={ComponentStories.DeclinaisonFonctionnalite}/>
+
+<Story of={ComponentStories.CreationComposant}/>
+
+<Story of={ComponentStories.IntegrationComposant}/>

package/src/stories/Demarrer/EnrichirLeDesignSystem.stories.ts

@@ -0,0 +1,239 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+import '../styles/shared.css'
+
+export default {
+	title: 'Démarrer/Enrichir le Design System',
+	component: SyAlert,
+}
+
+export const InfoIntro = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+              <SyAlert type="info" variant="tonal" :closable="false">
+                <template #default>
+                  Toutes les demandes d'enrichissement sont traitées au fil de l'eau en fonction de la disponibilité de l'activité.<br/>Une première estimation sur le délai de livraison de la solution sera annoncée au moment de sa qualification.
+                </template>
+              </SyAlert>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Optimisation = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-6">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Ajout d'une optimisation</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                          <th style="width: 60%">Description</th>
+                          <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">L'optimisation est proposée en vue d'améliorer la qualité générale du design system.<br/>
+                              Elle concerne soit un composant, une fonctionnalité spécifique associée, une page de documentation, une bonne pratique.<br/>
+                              L'optimisation n'est pas indispensable au bon fonctionnement du projet. Si c'est le cas, merci de compléter l'anomalie fonctionnelle de niveau majeure.</td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=optimisation.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const AjoutFonctionnalite = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Ajout d'une fonctionnalité</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                          <th style="width: 60%">Description</th>
+                          <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">Le Studio Design conçoit et fabrique entièrement une nouvelle fonctionnalité dans l'API du composant. Si le besoin concerne l'enrichissement d'une fonctionnalité déjà existante, merci d'utiliser le parcours "déclinaison d'une fonctionnalité".
+                              Cette demande doit être justifiée par un besoin du métier et soumise à l'accord du chef de projet du projet associée.<br/>
+                              Pour être recevable, les <a style="text-decoration: none; color: rgb(2, 156, 253);" href="#exigences" target="_self">critères d'acceptabilité</a> de la nouvelle fonctionnalité sont respectés.</td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=feature_new.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const DeclinaisonFonctionnalite = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Déclinaison d'une fonctionnalité</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                          <th style="width: 60%">Description</th>
+                          <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">Le Studio Design améliore une fonctionnalité existante d'un composant.<br/>
+                              Pour être recevable, les <a style="text-decoration: none; color: rgb(2, 156, 253);" href="#exigences" target="_self">critères d'acceptabilité</a> de la nouvelle fonctionnalité sont respectés.</td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=feature_declinaison.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const CreationComposant = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Création d'un composant</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                          <th style="width: 60%">Description</th>
+                          <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">Le Studio Design conçoit et fabrique entièrement le composant et la documentation associée. Il met à disposition sa maquette à destination des designers sur l'outil de maquettage Figma.<br/>
+                              Pour être recevable, les <a style="text-decoration: none; color: rgb(2, 156, 253);" href="#exigences" target="_self">critères d'acceptabilité</a> du nouveau composant sont respectés.</td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=component_new.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const IntegrationComposant = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText },
+			setup() {
+				return {}
+			},
+			template: `
+              <v-expansion-panels class="mt-2">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <p class="text-h5 text-primary">Intégration d'un composant</p>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <table>
+                      <thead>
+                      <tr style="background-color: rgb(12 65 154 / 10%)">
+                          <th style="width: 60%">Description</th>
+                          <th>Action</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                            <td style="padding: 10px">Le composant est fabriqué en VueJS 3 et sur Figma par un projet puis intégré par le Studio Design dans le design system.<br/>Le Studio Design se charge de fabriquer la documentation associée.<br/>
+                              Pour être recevable, les <a style="text-decoration: none; color: rgb(2, 156, 253);" href="#exigences" target="_self">critères d'acceptabilité</a> du nouveau composant sont respectés.</td>
+                            <td style="text-align: center;">
+                              <v-btn style="text-decoration: none; color: rgb(2, 156, 253);" href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=component_integration.md" target="_blank">
+                                Créer un ticket
+                              </v-btn>
+                            </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Demarrer/SignalerUneAnomalie.mdx

@@ -0,0 +1,39 @@
+import {Meta, Story} from '@storybook/addon-docs/blocks';
+import * as ComponentStories from './SignalerUneAnomalie.stories.ts';
+import '../styles/shared.css';
+
+<Meta of={ComponentStories}/>
+
+<div className="header">
+    <h1>Signaler une anomalie</h1>
+</div>
+
+## Introduction
+
+Les anomalies sont un moyen essentiel d'améliorer le Design System de la CNAM.
+Lorsque vous constatez une anomalie, vous pouvez la signaler ici, l'équipe du Studio Design l'examinera et prendra les mesures appropriées.
+Ce guide vous explique comment rédiger correctement une anomalie.
+
+<Story of={ComponentStories.InfoIntro}/>
+
+## Créer une anomalie
+
+<Story of={ComponentStories.AnomalieGraphique}/>
+
+<Story of={ComponentStories.AnomalieFonctionnelle}/>
+
+<Story of={ComponentStories.AnomalieAccessibilite}/>
+
+<Story of={ComponentStories.AnomalieDocumentaire}/>
+
+## Bonnes pratiques
+
+<Story of={ComponentStories.InfoPratiques}/>
+
+1. **Soyez précis** : Donnez autant de détails pertinents que possible
+2. **Un problème par issue** : Ne mélangez pas plusieurs problèmes dans une seule issue
+3. **Utilisez les labels** : Ajoutez les labels appropriés pour faciliter le tri et la priorisation
+4. **Vérifiez les doublons** : Avant de créer une nouvelle issue, vérifiez si elle n'existe pas déjà en cherchant dans
+les [rapports existants](https://github.com/assurance-maladie-digital/design-system-v3/issues)
+5. **Soyez constructif** : Restez professionnel et focalisé sur la résolution du problème
+6. **Vérifiez la version du package utilisé** : Le bug est-il toujours présent dans la dernière version du package concerné ?