@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/Customs/SyRadioGroup/validation/Validation.stories.ts

@@ -0,0 +1,809 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import SyRadioGroup from '../SyRadioGroup.vue'
+import SyForm from '../../SyForm/SyForm.vue'
+import { VBtn, VForm } from 'vuetify/components'
+
+const meta: Meta<typeof SyRadioGroup> = {
+	title: 'Composants/Formulaires/SyRadioGroup/Validation',
+	component: SyRadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: 'Stories démontrant les différents cas de validation avec SyRadioGroup.',
+			},
+		},
+	},
+	argTypes: {
+		label: { control: 'text', description: 'Label du groupe' },
+		options: { control: 'object', description: 'Liste des options' },
+		required: { control: 'boolean', description: 'Champ requis' },
+		disabled: { control: 'boolean', description: 'Désactivé' },
+		readonly: { control: 'boolean', description: 'Lecture seule' },
+		useVuetifyValidation: { control: 'boolean', description: 'Validation Vuetify native' },
+		showSuccessMessages: { control: 'boolean', description: 'Afficher les messages de succès' },
+	},
+	args: {
+		label: 'Choisissez une option',
+		options: [
+			{ label: 'Option A', value: 'a' },
+			{ label: 'Option B', value: 'b' },
+		],
+		required: true,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof SyRadioGroup>
+
+/**
+ * Validation avec customRules (règles personnalisées Synapse)
+ * Utilise le système de validation personnalisé du design system
+ */
+export const WithError: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec customRules
+Utilise les **customRules** pour définir des règles de validation personnalisées.
+
+**Caractéristiques :**
+- Règles de type ValidationRule (Synapse)
+- Support des messages d'erreur, warning, success
+- Validation programmatique via validateOnSubmit
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Sélectionnez l'option A"
+			:options="options"
+			:custom-rules="customRules"
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const customRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => value === 'a',
+			message: 'Vous devez sélectionner l'option A',
+			fieldIdentifier: 'Option',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>('a')
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === 'a',
+						message: 'Vous devez sélectionner l\'option A',
+						fieldIdentifier: 'Option',
+					},
+				},
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, customRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					:custom-rules="customRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec customWarningRules (règles d'avertissement Synapse)
+ * La soumission est autorisée malgré le warning
+ */
+export const WithWarning: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec customWarningRules
+Utilise les **customWarningRules** pour afficher un avertissement non bloquant.
+
+**Caractéristiques :**
+- Le warning n'empêche pas la soumission du formulaire
+- Affiché avec la couleur warning (orange)
+- Utile pour des conseils ou recommandations
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			:custom-warning-rules="customWarningRules"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string | null>('b')
+
+const options = [
+	{ label: 'Option A (recommandée)', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const customWarningRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => value === 'a',
+			message: 'L'option A est recommandée',
+			fieldIdentifier: 'Option',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	alert('Formulaire soumis (les warnings ne bloquent pas la soumission)')
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>('b')
+
+			const customWarningRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === 'a',
+						message: 'L\'option A est recommandée',
+						fieldIdentifier: 'Option',
+					},
+				},
+			]
+
+			const onSubmit = () => {
+				alert('Formulaire soumis (les warnings ne bloquent pas la soumission)')
+			}
+
+			return { args, selected, customWarningRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					:custom-warning-rules="customWarningRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec customSuccessRules (règles de succès Synapse)
+ * Affiche un message de succès quand une option valide est sélectionnée
+ */
+export const WithSuccess: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Une option valide est présélectionnée et déclenche la confirmation de succès au chargement.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			show-success-messages
+			:custom-success-rules="customSuccessRules"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string | null>('a')
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const customSuccessRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => value !== null && value !== undefined,
+			successMessage: 'Sélection confirmée.',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>('a')
+
+			const customSuccessRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value !== null && value !== undefined,
+						successMessage: 'Sélection confirmée.',
+					},
+				},
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, customSuccessRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					show-success-messages
+					:custom-success-rules="customSuccessRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * showSuccessMessages: false — les messages de succès sont masqués
+/**
+ * disableErrorHandling: true — la validation est complètement désactivée
+ */
+export const DisableErrorHandling: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### disableErrorHandling à true
+Avec **disableErrorHandling: true**, toute la validation est désactivée : aucun message d'erreur, warning ou succès ne s'affiche, quelle que soit la valeur.
+
+**Caractéristiques :**
+- Aucune règle n'est évaluée
+- Le champ ne passe jamais dans un état d'erreur visuel
+- Utile pour des champs en lecture contrôlée par le parent
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm>
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			disable-error-handling
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider (aucune erreur)</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+
+const selected = ref<string | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+			return { args, selected }
+		},
+		template: `
+			<SyForm>
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					disable-error-handling
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider (aucune erreur)</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec SyForm (composant formulaire du design system)
+ * Utilise le système de validation unifié avec useValidation et useValidatable
+ */
+export const SyFormValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec SyForm
+Utilise le composant **SyForm** du design system qui intègre le système de validation unifié.
+
+**Caractéristiques :**
+- Validation automatique à la soumission
+- Gestion des erreurs via le composable useValidation
+- Support des customRules, warningRules, successRules
+- Messages de validation traduits
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+
+const selected = ref<string | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec VForm natif (sans useVuetifyValidation)
+ * Utilise VForm de Vuetify avec la validation Synapse
+ */
+export const VFormValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec VForm natif
+Intégration avec **VForm** natif Vuetify en conservant la validation Synapse. La soumission appelle **validateOnSubmit()** manuellement sur le composant pour déclencher la validation.
+
+**Caractéristiques :**
+- Validation Synapse (customRules, required, etc.)
+- Pas de useVuetifyValidation
+- Appel manuel de validateOnSubmit() sur le ref du composant
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<VForm @submit.prevent="onSubmit">
+		<SyRadioGroup
+			ref="radioRef"
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			required
+			class="mb-4"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup } from '@cnamts/synapse'
+import { VBtn, VForm } from 'vuetify/components'
+
+const selected = ref<string | null>(null)
+const radioRef = ref(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+async function onSubmit() {
+	const isValid = await radioRef.value?.validateOnSubmit()
+	if (isValid) {
+		alert('Formulaire valide : ' + JSON.stringify(selected.value))
+	} else {
+		alert('Formulaire invalide : veuillez choisir une option.')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, VForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+			const radioRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			async function onSubmit() {
+				const isValid = await radioRef.value?.validateOnSubmit()
+				if (isValid) {
+					alert(`Formulaire valide : ${JSON.stringify(selected.value)}`)
+				}
+				else {
+					alert('Formulaire invalide : veuillez choisir une option.')
+				}
+			}
+
+			return { args, selected, radioRef, onSubmit }
+		},
+		template: `
+			<div class="pa-4">
+				<VForm @submit.prevent="onSubmit">
+					<SyRadioGroup
+						ref="radioRef"
+						v-model="selected"
+						v-bind="args"
+						class="mb-4"
+					/>
+					<VBtn type="submit" color="primary">Valider</VBtn>
+				</VForm>
+			</div>
+		`,
+	}),
+}
+
+/**
+ * Validation avec VForm (composant natif Vuetify) + useVuetifyValidation
+ * Utilise la validation native de Vuetify
+ */
+export const VFormVuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec VForm et useVuetifyValidation
+Utilise le composant natif **VForm** de Vuetify avec la prop **useVuetifyValidation**.
+
+**Caractéristiques :**
+- Validation native Vuetify via les props :rules
+- Compatible avec VForm de Vuetify
+- Pas de messages de succès (Vuetify ne les gère pas)
+- Validation côté template avec fonctions
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<VForm ref="form" @submit.prevent="submit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			:rules="rules"
+			use-vuetify-validation
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup } from '@cnamts/synapse'
+import { VBtn, VForm } from 'vuetify/components'
+import type { VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string | null>(null)
+const form = ref<InstanceType<typeof VForm> | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const rules: VuetifyValidationRule[] = [
+	(v: string | null) => !!v || 'Une sélection est requise',
+	(v: string | null) => v === 'a' || 'Vous devez sélectionner l'option A',
+]
+
+const submit = async () => {
+	const { valid } = await form.value?.validate() || { valid: false }
+	if (valid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, VForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+			const form = ref<InstanceType<typeof VForm> | null>(null)
+
+			const rules = [
+				(v: string | null) => !!v || 'Une sélection est requise',
+				(v: string | null) => v === 'a' || 'Vous devez sélectionner l\'option A',
+			]
+
+			const submit = async () => {
+				const { valid } = await form.value?.validate() || { valid: false }
+				if (valid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, form, rules, submit }
+		},
+		template: `
+			<VForm ref="form" @submit.prevent="submit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					:rules="rules"
+					use-vuetify-validation
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</VForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec SyForm et useVuetifyValidation
+ * Combine le SyForm avec la validation Vuetify native
+ */
+export const SyFormVuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation avec SyForm et useVuetifyValidation
+Combine **SyForm** avec la prop **useVuetifyValidation** pour utiliser les règles Vuetify.
+
+**Caractéristiques :**
+- SyForm gère la soumission
+- useVuetifyValidation active la validation native Vuetify
+- Les règles sont passées via la prop :rules
+				`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyRadioGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			:rules="rules"
+			use-vuetify-validation
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyRadioGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+]
+
+const rules: VuetifyValidationRule[] = [
+	(v: string | null) => !!v || 'Une sélection est requise',
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyRadioGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+
+			const rules = [
+				(v: string | null) => !!v || 'Une sélection est requise',
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide !')
+				}
+			}
+
+			return { args, selected, rules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyRadioGroup
+					v-model="selected"
+					v-bind="args"
+					:rules="rules"
+					use-vuetify-validation
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}