@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import { ref } from 'vue'
-import { VBtn } from 'vuetify/components'
 import NirField from './NirField.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
 const meta: Meta<typeof NirField> = {
 	title: 'Composants/Formulaires/NirField',
@@ -15,6 +15,7 @@ const meta: Meta<typeof NirField> = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
 		modelValue: {
 			description: 'La valeur du modèle pour le champ.',
 			control: 'text',
@@ -349,6 +350,21 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
+		helpText: {
+			description: 'Texte d\'aide affiché sous le champ. Remplace la zone de messages quand il n\'y a pas d\'erreur, sinon s\'affiche en dessous des messages.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '\'\'' },
+			},
+		},
+		successMessages: {
+			description: 'Permet d\'injecter des messages de succès depuis le parent pour le champ numéro. Aucun calcul de validation n\'est exécuté.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+			},
+		},
 		customLocale: {
 			description: 'Objet permettant de surcharger les messages du composant. Clés supportées : `errorRequiredNumber`, `errorInvalidNumber`, `errorRequiredKey`, `errorInvalidKey`, `successNumberValid`, `successKeyValid`.',
 			control: 'object',
@@ -520,262 +536,43 @@ export const WithoutKey: Story = {
 	},
 }
 
-export const WithSuccessMessages: Story = {
-	args: {
-		...Default.args,
-		showSuccessMessages: true,
-	},
-	parameters: {
-		...Default.parameters,
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-    <template>
-     <NirField
-      v-model="value"
-      :required="false"
-      numberLabel="Numéro de sécurité sociale"
-      keyLabel="Clé"
-      :showSuccessMessages="true"
-     />
-    </template>
-    `,
-			},
-			{
-				name: 'Script',
-				code: `
-    <script setup lang="ts">
-     import { NirField } from '@cnamts/synapse'
-     import { ref } from 'vue'
-     
-     const value = ref('')
-    </script>
-    `,
-			},
-		],
-	},
-}
-
-export const WithoutSuccessMessages: Story = {
+export const WithHelpText: Story = {
 	parameters: {
 		docs: {
 			description: {
-				story: `
-### Messages de succès
-
-Cette story illustre l'utilisation de la propriété \`showSuccessMessages\` qui permet de contrôler
-l'affichage des messages de succès lors de la validation. Par défaut, cette propriété est à \`true\`.
-
-Cela peut être utile pour réduire la verbosité de l'interface lorsque les messages de succès
-ne sont pas nécessaires dans certains contextes.
-`,
+				story: 'Un texte d\'aide s\'affiche sous le champ quand il n\'y a pas de message de validation. Il se déplace sous les messages quand une erreur est présente.',
 			},
 		},
 		sourceCode: [
 			{
 				name: 'Template',
-				code: `<template>
-  <!-- Champ avec messages de succès (par défaut) -->
-  <NirField
-    v-model="value"
-    label="NIR avec messages de succès"
-    required
-  />
-
-  <!-- Champ sans messages de succès -->
+				code: `
+<template>
   <NirField
     v-model="value"
-    label="NIR sans messages de succès"
+    label="Identifiant assuré"
     required
-    :showSuccessMessages="false"
+    help-text="Saisissez les 13 chiffres du numéro de sécurité sociale, puis la clé à 2 chiffres."
   />
 </template>`,
 			},
-		],
-	},
-	render: () => ({
-		components: { NirField },
-		setup() {
-			const value1 = ref('184027512345674')
-			const value2 = ref('184027512345674')
-
-			return { value1, value2 }
-		},
-		template: `
-      <div>
-        <div>
-          <div>
-            <p class="text-subtitle-2 mb-2">Avec messages de succès</p>
-            <NirField
-              v-model="value1"
-              label="NIR avec messages de succès"
-              required
-              showSuccessMessages
-            />
-          </div>
-
-          <div>
-            <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
-            <NirField
-              v-model="value2"
-              label="NIR sans messages de succès"
-              required
-              :showSuccessMessages="false"
-            />
-          </div>
-        </div>
-
-        <div class="mt-4 text-body-2">
-          <p>Observations :</p>
-          <ul>
-            <li>Les deux champs ont la même valeur valide</li>
-            <li>Le premier champ affiche un message de succès et un indicateur visuel vert au blur</li>
-            <li>Le second champ n'affiche pas de message de succès, au blur</li>
-            <li>Essayez de modifier les valeurs pour voir le comportement avec des données invalides puis valides</li>
-          </ul>
-        </div>
-      </div>
-    `,
-	}),
-}
-
-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',
+				name: 'Script',
 				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).';
-              }
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NirField } from '@cnamts/synapse'
 
-              // 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>
-    `,
+const value = ref('')
+</script>`,
 			},
 		],
 	},
+	args: {
+		label: 'Identifiant assuré',
+		required: true,
+		helpText: 'Saisissez les 13 chiffres du numéro de sécurité sociale, puis la clé à 2 chiffres.',
+	},
 	render: args => ({
 		components: { NirField },
 		setup() {
@@ -783,94 +580,14 @@ export const CustomPatternRules: Story = {
 			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>
-    `,
+			<NirField
+				v-model="value"
+				v-bind="args"
+			/>
+		`,
 	}),
 }
 
-export const CustomRules: Story = {
-	args: {
-		...Default.args,
-		customNumberRules: [
-			{
-				type: 'minLength',
-				options: {
-					length: 10,
-					message: 'Le numéro de sécurité sociale doit avoir au moins 10 caractères.',
-					successMessage: 'Le numéro de sécurité sociale a une longueur valide.',
-					ignoreSpace: true,
-				},
-			},
-		],
-		customKeyRules: [
-			{
-				type: 'minLength',
-				options: {
-					length: 1,
-					message: 'La clé doit avoir au moins 1 caractère.',
-					successMessage: 'La clé a une longueur valide.',
-				},
-			},
-		],
-	},
-	parameters: {
-		...Default.parameters,
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-    <template>
-     <NirField
-      v-model="value"
-      :required="false"
-      numberLabel="Numéro de sécurité sociale"
-      keyLabel="Clé"
-      :displayKey="true"
-      :customNumberRules="[{ type: 'minLength', options: { length: 10, ignoreSpace: true, message: 'Le numéro de sécurité sociale doit avoir au moins 10 caractères.', successMessage: 'Le numéro de sécurité sociale a une longueur valide.' } }]"
-      :customKeyRules="[{ type: 'minLength', options: { length: 1, message: 'La clé doit avoir au moins 1 caractère.', successMessage: 'La clé a une longueur valide.' } }]"
-     />
-    </template>
-    `,
-			},
-			{
-				name: 'Script',
-				code: `
-    <script setup lang="ts">
-     import { NirField } from '@cnamts/synapse'
-     import { ref } from 'vue'
-     
-     const value = ref('')
-    </script>
-    `,
-			},
-		],
-	},
-}
-
 export const WithNirTooltip: Story = {
 	args: {
 		...Default.args,
@@ -910,7 +627,7 @@ L'infobulle est positionnée avant le champ et s'affiche au survol de l'icône d
     <script setup lang="ts">
      import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
-     
+
      const value = ref('')
     </script>
     `,
@@ -958,184 +675,7 @@ L'infobulle est positionnée après le champ et s'affiche au survol de l'icône
     <script setup lang="ts">
      import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
-     
-     const value = ref('')
-    </script>
-    `,
-			},
-		],
-	},
-}
-
-export const WithWarnings: Story = {
-	args: {
-		...Default.args,
-		showSuccessMessages: false,
-		customNumberWarningRules: [
-			{
-				type: 'custom',
-				options: {
-					message: 'Attention : ce NIR commence par 1 (homme)',
-					warningMessage: 'Attention : ce NIR commence par 1 (homme)',
-					validate: (value: string) => {
-						if (!value) return false
-						// On retourne true si la règle n'est PAS respectée (= warning)
-						return !value.startsWith('1')
-					},
-					isWarning: true,
-				},
-			},
-			{
-				type: 'custom',
-				options: {
-					message: 'Attention : ce NIR commence par 2 (femme)',
-					warningMessage: 'Attention : ce NIR commence par 2 (femme)',
-					validate: (value: string) => {
-						if (!value) return false
-						// On retourne true si la règle n'est PAS respectée (= warning)
-						return !value.startsWith('2')
-					},
-					isWarning: true,
-				},
-			},
-		],
-		customKeyRules: [
-			{
-				type: 'custom',
-				options: {
-					message: 'La clé doit être comprise entre 01 et 97',
-					validate: (value: string) => {
-						if (!value) return true
-						const numValue = parseInt(value)
-						return numValue >= 1 && numValue <= 97
-					},
-				},
-			},
-		],
-		customKeyWarningRules: [
-			{
-				type: 'custom',
-				options: {
-					message: 'Attention : la clé est supérieure à 50',
-					warningMessage: 'Attention : la clé est supérieure à 50',
-					validate: (value: string) => {
-						if (!value) return false
-						const numValue = parseInt(value)
-						// On retourne true si la règle n'est PAS respectée (= warning)
-						return !(numValue > 50)
-					},
-					isWarning: true,
-				},
-			},
-		],
-	},
-	parameters: {
-		...Default.parameters,
-		docs: {
-			description: {
-				story: `
-## Exemple d'utilisation des warnings
-
-Le NirField peut afficher des warnings pour guider l'utilisateur sans bloquer la validation.
-
-### Warnings sur le NIR
-- Un warning s'affiche si le NIR commence par 1 (homme)
-- Un warning s'affiche si le NIR commence par 2 (femme)
-
-### Warnings sur la clé
-- Un warning s'affiche si la clé est supérieure à 50
-- Une erreur s'affiche si la clé n'est pas entre 01 et 97
-
-### Exemples de NIR valides avec warnings :
-- \`1234567891011\` (warning : homme)
-- \`2234567891011\` (warning : femme)
-- Clé \`51\` (warning : clé > 50)
 
-Les warnings sont affichés en jaune avec une icône d'avertissement mais ne bloquent pas la validation.
-Les erreurs sont affichées en rouge et bloquent la validation.
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-    <template>
-     <NirField
-      v-model="value"
-      :required="false"
-      :show-success-messages="true"
-      numberLabel="Numéro de sécurité sociale"
-      keyLabel="Clé"
-      :display-key="true"
-      :customNumberWarningRules="[
-        {
-          type: 'custom',
-          options: {
-            message: 'Attention : ce NIR commence par 1 (homme)',
-            warningMessage: 'Attention : ce NIR commence par 1 (homme)',
-            validate: (value) => {
-              if (!value) return false
-              // On retourne true si la règle n'est PAS respectée (= warning)
-              return !value.startsWith('1')
-            },
-            isWarning: true,
-          },
-        },
-        {
-          type: 'custom',
-          options: {
-            message: 'Attention : ce NIR commence par 2 (femme)',
-            warningMessage: 'Attention : ce NIR commence par 2 (femme)',
-            validate: (value) => {
-              if (!value) return false
-              // On retourne true si la règle n'est PAS respectée (= warning)
-              return !value.startsWith('2')
-            },
-            isWarning: true,
-          },
-        },
-      ]"
-      :customKeyRules="[
-        {
-          type: 'custom',
-          options: {
-            message: 'La clé doit être comprise entre 01 et 97',
-            validate: (value) => {
-              if (!value) return true
-              const numValue = parseInt(value)
-              return numValue >= 1 && numValue <= 97
-            },
-          },
-        },
-      ]"
-      :customKeyWarningRules="[
-        {
-          type: 'custom',
-          options: {
-            message: 'Attention : la clé est supérieure à 50',
-            warningMessage: 'Attention : la clé est supérieure à 50',
-            validate: (value) => {
-              if (!value) return false
-              const numValue = parseInt(value)
-              // On retourne true si la règle n'est PAS respectée (= warning)
-              return !(numValue > 50)
-            },
-            isWarning: true,
-          },
-        },
-      ]"
-     />
-    </template>
-    `,
-			},
-			{
-				name: 'Script',
-				code: `
-    <script setup lang="ts">
-     import { NirField } from '@cnamts/synapse'
-     import { ref } from 'vue'
-     
      const value = ref('')
     </script>
     `,
@@ -1144,188 +684,6 @@ Les erreurs sont affichées en rouge et bloquent la validation.
 	},
 }
 
-export const FormValidation: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: `
-### Validation de formulaire
-
-Cette story montre l'utilisation du NirField dans un formulaire avec validation. Le formulaire :
-- Requiert un NIR valide (13 chiffres)
-- Requiert une clé valide (2 chiffres)
-- Affiche des messages de succès quand les champs sont valides
-- Affiche des messages d'erreur quand les champs sont invalides
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<form @submit.prevent="onSubmit">
-	<NirField
-		v-model="value"
-		label="NirField"
-		required
-		:displayKey="false"
-		showSuccessMessages
-		ref="nirField"
-	/>
-	<v-btn
-		type="submit"
-		color="primary"
-		class="mt-4"
-	>
-		Valider
-	</v-btn>
-</form>`,
-			},
-			{
-				name: 'Script',
-				code: `<script setup lang="ts">
-import { ref } from 'vue'
-import { NirField } from '@cnamts/synapse'
-
-const value = ref('')
-const nirField = ref()
-
-const onSubmit = async () => {
-	const isValid = await nirField.value?.validateOnSubmit()
-	
-	if (isValid) {
-		alert('Formulaire soumis avec succès !')
-	}
-						else {
-					alert('Formulaire non soumis !')
-				}
-}
-</script>`,
-			},
-		],
-	},
-	render: args => ({
-		components: { NirField, VBtn },
-		setup() {
-			const value = ref('')
-			const nirField = ref()
-
-			const onSubmit = async () => {
-				const isValid = await nirField.value?.validateOnSubmit()
-
-				if (isValid) {
-					alert('Formulaire soumis avec succès !')
-				}
-				else {
-					alert('Formulaire non soumis !')
-				}
-			}
-
-			return { args, value, nirField, onSubmit }
-		},
-		template: `
-			<form @submit.prevent="onSubmit">
-				<NirField
-					v-model="value"
-					v-bind="args"
-					label="NirField"
-					required
-					showSuccessMessages
-                    :displayKey="false"
-					ref="nirField"
-				/>
-				<v-btn
-					type="submit"
-					color="primary"
-					class="mt-4"
-				>
-					Valider
-				</v-btn>
-			</form>
-		`,
-	}),
-}
-
-export const DisableErrorHandling: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: `
-### Désactivation de la gestion des erreurs
-
-Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
-la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.
-
-Cela peut être utile dans des cas particuliers où vous souhaitez définir des règles de validation
-mais gérer leur affichage différemment, ou utiliser la validation uniquement au niveau du formulaire parent.
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<template>
-  <!-- Champ avec validation normale -->
-  <NirField
-    v-model="value"
-    label="NIR avec validation"
-    required
-  />
-  
-  <!-- Champ avec gestion d'erreurs désactivée -->
-  <NirField
-    v-model="value"
-    label="NIR sans gestion d'erreurs"
-    required
-    disableErrorHandling
-  />
-</template>`,
-			},
-		],
-	},
-	render: () => ({
-		components: { NirField },
-		setup() {
-			const value1 = ref('')
-			const value2 = ref('')
-
-			return { value1, value2 }
-		},
-		template: `
-      <div>
-        <div>
-          <div>
-            <p class="text-subtitle-2 mb-2">Validation normale</p>
-            <NirField
-              v-model="value1"
-              label="NIR avec validation"
-              required
-            />
-          </div>
-          
-          <div>
-            <p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
-            <NirField
-              v-model="value2"
-              label="NIR sans gestion d'erreurs"
-              required
-              disableErrorHandling
-            />
-          </div>
-        </div>
-        
-        <div class="mt-4 text-body-2">
-          <p>Instructions :</p>
-          <ol>
-            <li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
-            <li class="ml-4">Essayez de saisir des valeurs invalides (moins de 13 chiffres)</li>
-            <li class="ml-4">Notez que le premier champ affiche des erreurs, mais pas le second</li>
-          </ol>
-        </div>
-      </div>
-    `,
-	}),
-}
-
 export const WithCustomLocale: Story = {
 	args: {
 		...Default.args,