@cnamts/synapse 0.0.16-alpha → 1.0.1

package/src/components/FilterSideBar/tests/__snapshots__/FilterSideBar.spec.ts.snap

@@ -48,120 +48,125 @@ exports[`FilterSideBar > renders correctly 1`] = `
         <!---->
         <!---->
       </button>
-      <nav
-        class="
-          elevation-6
-          rounded-0
-          v-navigation-drawer
-          v-navigation-drawer--mobile
-          v-navigation-drawer--rail
-          v-navigation-drawer--right
-          v-navigation-drawer--temporary
-          v-theme--light
-        "
-        style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;"
-      >
-        <!---->
-        <!---->
-        <div class="v-navigation-drawer__content">
-          <div class="
-            v-expansion-panels
-            v-expansion-panels--variant-accordion
+      <teleport-stub to="body">
+        <nav
+          class="
+            bg-white
+            elevation-6
+            rounded-0
+            sy-filters-side-bar__content
+            v-navigation-drawer
+            v-navigation-drawer--mobile
+            v-navigation-drawer--rail
+            v-navigation-drawer--right
+            v-navigation-drawer--temporary
             v-theme--light
-          "></div>
-          <div class="v-spacer"></div>
-          <div class="
-            pb-4
-            pt-10
-            px-4
-          ">
-            <button
-              class="
-                mb-4
-                text-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--size-large
-                v-btn--variant-outlined
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+          "
+          style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;"
+          tabindex="0"
+        >
+          <!---->
+          <!---->
+          <div class="v-navigation-drawer__content">
+            <div class="
+              v-expansion-panels
+              v-expansion-panels--variant-accordion
+              v-theme--light
+            "></div>
+            <div class="v-spacer"></div>
+            <div class="
+              pb-4
+              pt-10
+              px-4
+            ">
+              <button
+                class="
+                  mb-4
+                  text-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--size-large
+                  v-btn--variant-outlined
+                  v-theme--light
+                "
+                type="button"
               >
-                Fermer
-              </span>
-              <!---->
-              <!---->
-            </button>
-            <button
-              class="
-                mb-4
-                text-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--size-large
-                v-btn--variant-outlined
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Fermer
+                </span>
+                <!---->
+                <!---->
+              </button>
+              <button
+                class="
+                  mb-4
+                  text-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--size-large
+                  v-btn--variant-outlined
+                  v-theme--light
+                "
+                type="button"
               >
-                Réinitialiser
-              </span>
-              <!---->
-              <!---->
-            </button>
-            <button
-              class="
-                bg-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--elevated
-                v-btn--size-large
-                v-btn--variant-elevated
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Réinitialiser
+                </span>
+                <!---->
+                <!---->
+              </button>
+              <button
+                class="
+                  bg-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--elevated
+                  v-btn--size-large
+                  v-btn--variant-elevated
+                  v-theme--light
+                "
+                type="button"
               >
-                Appliquer
-              </span>
-              <!---->
-              <!---->
-            </button>
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Appliquer
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </div>
           </div>
-        </div>
-        <!---->
-      </nav>
-      <transition-stub
-        appear="false"
-        css="true"
-        name="fade-transition"
-        persisted="false"
-      >
-        <!---->
-      </transition-stub>
+          <!---->
+        </nav>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade-transition"
+          persisted="false"
+        >
+          <!---->
+        </transition-stub>
+      </teleport-stub>
     </div>
   </div>
 </div>

package/src/components/FooterBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FooterBar/FooterBar.vue

@@ -228,7 +228,7 @@
 
 				<li
 					v-if="props.version"
-					class="text-primary my-3 mx-4"
+					class="my-3 mx-4"
 				>
 					{{ locales.versionLabel }} {{ props.version }}
 				</li>
@@ -311,6 +311,7 @@ a {
 
 // Use deep selector to style user content as well
 .vd-footer-bar.v-theme--dark :deep() {
+	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
 		color: $white;
 	}

package/src/components/FranceConnectBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/HeaderBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/HeaderBar/HeaderBurgerMenu/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/HeaderLoading/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/HeaderToolbar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/LangBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/Logo/Accessibilite.stories.ts

@@ -216,6 +216,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/Logo.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Aucune correction nécessaire.</p>
+			  </div>
             `,
 		}
 	},

package/src/components/Logo/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/LogoBrandSection/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/MaintenancePage/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/NirField/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/NirField/NirField.stories.ts

@@ -608,6 +608,178 @@ ne sont pas nécessaires dans certains contextes.
 	}),
 }
 
+export const CustomPatternRules: Story = {
+	args: {
+		...Default.args,
+		customRulesPrecedence: true,
+		customNumberRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!value) return true
+
+						// Supprimer les espaces pour la validation
+						const valueWithoutSpaces = value.replace(/\s/g, '')
+
+						// Vérifier la longueur
+						if (valueWithoutSpaces.length !== 13) {
+							return 'Le numéro de sécurité sociale doit contenir 13 caractères.'
+						}
+
+						// Vérifier le pattern selon les règles spécifiques du NIR français
+						// Rang 1: sexe (1 pour homme, 2 pour femme)
+						if (!/^[12]/.test(valueWithoutSpaces)) {
+							return 'Le premier chiffre doit être 1 (homme) ou 2 (femme).'
+						}
+
+						// Rangs 2-3: deux derniers chiffres de l'année de naissance
+						const anneeNaissance = valueWithoutSpaces.substring(1, 3)
+						if (!/^[0-9]{2}$/.test(anneeNaissance)) {
+							return 'Les chiffres 2 et 3 doivent représenter l\'année de naissance.'
+						}
+
+						// Rangs 4-5: mois de naissance (01-12)
+						const moisNaissance = valueWithoutSpaces.substring(3, 5)
+						if (!/^(0[1-9]|1[0-2])$/.test(moisNaissance)) {
+							return 'Les chiffres 4 et 5 doivent représenter un mois valide (01-12).'
+						}
+
+						// Rangs 6-7: département de naissance
+						const departement = valueWithoutSpaces.substring(5, 7)
+						if (!((/^[0-9]{2}$/.test(departement) && departement !== '00')
+							|| departement === '2A' || departement === '2B' || departement === '99')) {
+							return 'Les chiffres 6 et 7 doivent représenter un département valide.'
+						}
+
+						// Rangs 8-10: code commune ou pays
+						const codeCommune = valueWithoutSpaces.substring(7, 10)
+						if (!/^[0-9]{3}$/.test(codeCommune)) {
+							return 'Les chiffres 8 à 10 doivent représenter un code commune ou pays valide.'
+						}
+
+						// Rangs 11-13: numéro d'ordre
+						const numeroOrdre = valueWithoutSpaces.substring(10, 13)
+						if (!/^[0-9]{3}$/.test(numeroOrdre)) {
+							return 'Les chiffres 11 à 13 doivent représenter un numéro d\'ordre valide.'
+						}
+
+						return true
+					},
+					message: 'Le numéro de sécurité sociale est invalide.',
+					successMessage: 'Le numéro de sécurité sociale est valide.',
+					fieldIdentifier: 'Numéro de sécurité sociale',
+				},
+			},
+		],
+	},
+	parameters: {
+		...Default.parameters,
+		docs: {
+			description: {
+				story: 'Exemple d\'utilisation avec une règle personnalisée qui prend la prévalence sur la validation standard. Cette règle valide le format du NIR selon les règles officielles françaises : 1er chiffre pour le sexe, 2 chiffres pour l\'année de naissance, 2 chiffres pour le mois, 5 chiffres pour le lieu de naissance et 3 chiffres pour le numéro d\'ordre.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+    <template>
+     <NirField
+      v-model="value"
+      :required="false"
+      numberLabel="Numéro de sécurité sociale"
+      keyLabel="Clé"
+      :displayKey="true"
+      :customRulesPrecedence="true"
+      :customNumberRules="[
+        {
+          type: 'custom',
+          options: {
+            validate: (value) => {
+              if (!value) return true;
+              
+              // Supprimer les espaces pour la validation
+              const valueWithoutSpaces = value.replace(/\\s/g, '');
+              
+              // Vérifier la longueur
+              if (valueWithoutSpaces.length !== 13) {
+                return 'Le numéro de sécurité sociale doit contenir 13 caractères.';
+              }
+              
+              // Vérification selon les règles spécifiques du NIR français
+              // Rang 1: sexe (1 pour homme, 2 pour femme)
+              if (!/^[12]/.test(valueWithoutSpaces)) {
+                return 'Le premier chiffre doit être 1 (homme) ou 2 (femme).';
+              }
+
+              // Rangs 2-3: deux derniers chiffres de l'année de naissance
+              if (!/^[12][0-9]{2}/.test(valueWithoutSpaces)) {
+                return 'Les chiffres 2 et 3 doivent représenter l'année de naissance.';
+              }
+
+              // Rangs 4-5: mois de naissance (01-12)
+              const moisNaissance = valueWithoutSpaces.substring(3, 5);
+              if (!/^(0[1-9]|1[0-2])$/.test(moisNaissance)) {
+                return 'Les chiffres 4 et 5 doivent représenter un mois valide (01-12).';
+              }
+
+              // Vérification complète du format
+              const formatComplet = /^[12][0-9]{2}(0[1-9]|1[0-2])[0-9]{8}$/;
+              if (!formatComplet.test(valueWithoutSpaces)) {
+                return 'Le format du numéro de sécurité sociale est invalide.';
+              }
+              
+              return true;
+            },
+            message: 'Le numéro de sécurité sociale est invalide.',
+            successMessage: 'Le numéro de sécurité sociale est valide.',
+            fieldIdentifier: 'Numéro de sécurité sociale',
+          }
+        }
+      ]"
+     />
+    </template>
+    `,
+			},
+		],
+	},
+	render: args => ({
+		components: { NirField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+      <div>
+        <h3>Validation avec pattern personnalisé et prévalence</h3>
+        <p>Cette démonstration utilise une règle personnalisée qui valide le format du NIR selon le pattern suivant :</p>
+        <pre>X XX XX XXX XXX XXX</pre>
+        <p>Où :</p>
+        <ul>
+          <li><strong>X</strong> (rang 1) : sexe (1 pour les hommes, 2 pour les femmes)</li>
+          <li><strong>XX</strong> (rangs 2-3) : deux derniers chiffres de l'année de naissance</li>
+          <li><strong>XX</strong> (rangs 4-5) : mois de naissance (01-12)</li>
+          <li><strong>XXX</strong> (rangs 6-10) : lieu de naissance
+            <ul>
+              <li>Rangs 6-7 : département (99 si étranger, 2A/2B pour la Corse)</li>
+              <li>Rangs 8-10 : code commune ou pays</li>
+            </ul>
+          </li>
+          <li><strong>XXX</strong> (rangs 11-13) : numéro d’ordre</li>
+        </ul>
+        <p>La propriété <code>customRulesPrecedence</code> est définie à <code>true</code> pour que cette règle soit appliquée avant la validation standard.</p>
+        <NirField
+          v-model="value"
+          v-bind="args"
+		  class="mt-4"
+        />
+        <div class="mt-4">Valeur actuelle : {{ value }}</div>
+      </div>
+    `,
+	}),
+}
+
 export const CustomRules: Story = {
 	args: {
 		...Default.args,

package/src/components/NirField/NirField.vue

@@ -23,6 +23,7 @@
 		customKeyRules?: ValidationRule[]
 		customNumberWarningRules?: ValidationRule[]
 		customKeyWarningRules?: ValidationRule[]
+		customRulesPrecedence?: boolean
 		showSuccessMessages?: boolean
 		width?: string
 		bgColor?: string
@@ -56,6 +57,7 @@
 		customKeyRules: () => [],
 		customNumberWarningRules: () => [],
 		customKeyWarningRules: () => [],
+		customRulesPrecedence: false,
 		showSuccessMessages: true,
 		width: '100%',
 		bgColor: undefined,
@@ -165,7 +167,7 @@
 	// Règles de validation
 	const defaultNumberRules = computed(() => {
 		const rules: ValidationRule[] = []
-
+		if (props.readonly) return
 		if (props.required) {
 			rules.push({
 				type: 'required',
@@ -176,6 +178,15 @@
 			})
 		}
 
+		// Ajout des règles personnalisées avec prévalence si demandé
+		if (props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
+			rules.push(...props.customNumberRules.map(rule => ({
+				...rule,
+				options: rule.options || {},
+			})))
+		}
+
+		// Règle de validation standard du NIR
 		rules.push({
 			type: 'custom',
 			options: {
@@ -194,8 +205,8 @@
 			},
 		})
 
-		// Ajout des règles personnalisées
-		if (props.customNumberRules) {
+		// Ajout des règles personnalisées sans prévalence (comportement par défaut)
+		if (!props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
 			rules.push(...props.customNumberRules.map(rule => ({
 				...rule,
 				options: rule.options || {},
@@ -207,7 +218,7 @@
 
 	const defaultKeyRules = computed(() => {
 		const rules: ValidationRule[] = []
-
+		if (props.readonly) return
 		if (props.required) {
 			rules.push({
 				type: 'required',
@@ -324,7 +335,6 @@
 		return validateFields(true)
 	}
 
-	// Computed pour statut des champs
 	const hasNumberErrors = computed(() => numberValidation.hasError.value)
 	const hasNumberWarning = computed(() => !hasNumberErrors.value && numberValidation.hasWarning.value)
 	const hasNumberSuccess = computed(() => !hasNumberErrors.value && !hasNumberWarning.value && numberValidation.hasSuccess.value)
@@ -333,7 +343,6 @@
 	const hasKeyWarning = computed(() => !hasKeyErrors.value && keyValidation.hasWarning.value)
 	const hasKeySuccess = computed(() => !hasKeyErrors.value && !hasKeyWarning.value && keyValidation.hasSuccess.value)
 
-	// Labels avec astérisque si nécessaire
 	const numberLabelWithAsterisk = computed(() => {
 		return props.required && props.displayAsterisk ? `${props.numberLabel} *` : props.numberLabel
 	})
@@ -342,7 +351,6 @@
 		return props.required && props.displayAsterisk ? `${props.keyLabel} *` : props.keyLabel
 	})
 
-	// Gestion des événements
 	const handleNumberInput = () => {
 		emitValue()
 		validateFields()

package/src/components/NotFoundPage/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/NotificationBar/Accessibilite.stories.ts

@@ -161,7 +161,7 @@ export const Legende: StoryObj = {
 			  </div>
 			  <div class="mt-4">
 				  <p>Rapport d’audit manuel : <a href="/audits/NotificationBar.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
-				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/3967" target="_blank" style="color:#0C41BD;">issue #3967</a>)</p>
+				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4029" target="_blank" style="color:#0C41BD;">issue #4029</a>)</p>
 			  </div>
             `,
 		}

package/src/components/NotificationBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -53,6 +53,20 @@ const meta: Meta<typeof NotificationBar> = {
 				},
 			},
 		},
+		// @ts-expect-error the prop is passed down
+		type: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error'],
+			table: {
+				type: {
+					summary: 'info | success | warning | error',
+				},
+				defaultValue: {
+					summary: 'info',
+				},
+				category: 'props',
+			},
+		},
 	},
 }