@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/Customs/SyCheckBoxGroup/Validation/Validation.stories.ts

@@ -0,0 +1,1008 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import SyCheckBoxGroup from '../SyCheckBoxGroup.vue'
+import SyForm from '../../SyForm/SyForm.vue'
+import { VBtn, VForm } from 'vuetify/components'
+
+const meta: Meta<typeof SyCheckBoxGroup> = {
+	title: 'Composants/Formulaires/SyCheckBoxGroup/Validation',
+	component: SyCheckBoxGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: 'Stories démontrant les différents cas de validation avec SyCheckBoxGroup.',
+			},
+		},
+	},
+	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' },
+		multiple: { control: 'boolean', description: 'Sélection multiple' },
+	},
+	args: {
+		label: 'Choisissez une ou plusieurs options',
+		options: [
+			{ label: 'Option A', value: 'a' },
+			{ label: 'Option B', value: 'b' },
+			{ label: 'Option C', value: 'c' },
+		],
+		required: true,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof SyCheckBoxGroup>
+
+/**
+ * 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">
+		<SyCheckBoxGroup
+			v-model="selected"
+			label="Sélectionnez au moins 2 options"
+			:options="options"
+			:custom-rules="customRules"
+			:multiple="true"
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyCheckBoxGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string[]>([])
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+]
+
+const customRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => Array.isArray(value) && value.length >= 2,
+			message: 'Vous devez sélectionner au moins 2 options',
+			fieldIdentifier: 'Options',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string[]>(['a'])
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => Array.isArray(value) && value.length >= 2,
+						message: 'Vous devez sélectionner au moins 2 options',
+						fieldIdentifier: 'Options',
+					},
+				},
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				alert(event.isValid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, customRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyCheckBoxGroup
+					v-model="selected"
+					v-bind="args"
+					:custom-rules="customRules"
+					:multiple="true"
+				/>
+				<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">
+		<SyCheckBoxGroup
+			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 { SyCheckBoxGroup, 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' },
+	{ label: 'Option C', value: 'c' },
+]
+
+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: { SyCheckBoxGroup, 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">
+				<SyCheckBoxGroup
+					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">
+		<SyCheckBoxGroup
+			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 { SyCheckBoxGroup, 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' },
+	{ label: 'Option C', value: 'c' },
+]
+
+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: { SyCheckBoxGroup, 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 }) => {
+				alert(event.isValid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, customSuccessRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyCheckBoxGroup
+					v-model="selected"
+					v-bind="args"
+					show-success-messages
+					:custom-success-rules="customSuccessRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * 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>
+		<SyCheckBoxGroup
+			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 { SyCheckBoxGroup, 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' },
+	{ label: 'Option C', value: 'c' },
+]
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+			return { args, selected }
+		},
+		template: `
+			<SyForm>
+				<SyCheckBoxGroup
+					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">
+		<SyCheckBoxGroup
+			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 { SyCheckBoxGroup, 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' },
+	{ label: 'Option C', value: 'c' },
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide !')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				alert(event.isValid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyCheckBoxGroup
+					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">
+		<SyCheckBoxGroup
+			ref="checkboxRef"
+			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 { SyCheckBoxGroup } from '@cnamts/synapse'
+import { VBtn, VForm } from 'vuetify/components'
+
+const selected = ref<string | null>(null)
+const checkboxRef = ref(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+]
+
+async function onSubmit() {
+	const isValid = await checkboxRef.value?.validateOnSubmit()
+	if (isValid) {
+		alert('Formulaire valide : ' + JSON.stringify(selected.value))
+	} else {
+		alert('Formulaire invalide : veuillez choisir une option.')
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup, VForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+			const checkboxRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			async function onSubmit() {
+				const isValid = await checkboxRef.value?.validateOnSubmit()
+				if (isValid) {
+					alert(`Formulaire valide : ${JSON.stringify(selected.value)}`)
+				}
+				else {
+					alert('Formulaire invalide : veuillez choisir une option.')
+				}
+			}
+
+			return { args, selected, checkboxRef, onSubmit }
+		},
+		template: `
+			<VForm @submit.prevent="onSubmit">
+				<SyCheckBoxGroup
+					ref="checkboxRef"
+					v-model="selected"
+					v-bind="args"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</VForm>
+		`,
+	}),
+}
+
+/**
+ * Mode de validation natif Vuetify (`useVuetifyValidation`) intégré à `SyForm`.
+ * Les règles sont de simples fonctions `(value) => true | 'message'`, comme la prop `rules` de Vuetify.
+ */
+export const SyFormVuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Avec `use-vuetify-validation`, le groupe délègue sa validation à Vuetify via la prop `rules` (fonctions natives), tout en restant intégré à `SyForm`.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm @submit="onSubmit">
+		<SyCheckBoxGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			:use-vuetify-validation="true"
+			:rules="vuetifyRules"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyCheckBoxGroup, 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' },
+	{ label: 'Option C', value: 'c' },
+]
+
+const vuetifyRules = [
+	(value: unknown) => (Array.isArray(value) ? value.length > 0 : value !== null && value !== undefined) || 'Veuillez sélectionner au moins une option.',
+]
+
+function onSubmit(e: { isValid: boolean }) {
+	alert(e.isValid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyCheckBoxGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+
+			const vuetifyRules = [
+				(value: unknown) => (Array.isArray(value) ? value.length > 0 : value !== null && value !== undefined) || 'Veuillez sélectionner au moins une option.',
+			]
+
+			function onSubmit(e: { isValid: boolean }) {
+				alert(e.isValid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, vuetifyRules, onSubmit }
+		},
+		template: `
+			<SyForm @submit="onSubmit">
+				<SyCheckBoxGroup
+					v-bind="args"
+					v-model="selected"
+					:use-vuetify-validation="true"
+					:rules="vuetifyRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Mode de validation natif Vuetify (`useVuetifyValidation`) dans un `VForm` Vuetify.
+ */
+export const VFormVuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Validation déléguée à Vuetify (`use-vuetify-validation` + `rules`) dans un `VForm` natif.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<VForm @submit.prevent="onSubmit">
+		<SyCheckBoxGroup
+			v-model="selected"
+			label="Choisissez une option"
+			:options="options"
+			:use-vuetify-validation="true"
+			:rules="vuetifyRules"
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyCheckBoxGroup } from '@cnamts/synapse'
+import { VBtn, VForm } from 'vuetify/components'
+
+const selected = ref<string | null>(null)
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+]
+
+const vuetifyRules = [
+	(value: unknown) => (Array.isArray(value) ? value.length > 0 : value !== null && value !== undefined) || 'Veuillez sélectionner au moins une option.',
+]
+
+async function onSubmit(e: Promise<{ valid: boolean }>) {
+	const { valid } = await e
+	alert(valid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { SyCheckBoxGroup, VForm, VBtn },
+		setup() {
+			const selected = ref<string | null>(null)
+
+			const vuetifyRules = [
+				(value: unknown) => (Array.isArray(value) ? value.length > 0 : value !== null && value !== undefined) || 'Veuillez sélectionner au moins une option.',
+			]
+
+			async function onSubmit(e: Promise<{ valid: boolean }>) {
+				const { valid } = await e
+				alert(valid ? 'Formulaire valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, vuetifyRules, onSubmit }
+		},
+		template: `
+			<VForm @submit.prevent="onSubmit">
+				<SyCheckBoxGroup
+					v-bind="args"
+					v-model="selected"
+					:use-vuetify-validation="true"
+					:rules="vuetifyRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</VForm>
+		`,
+	}),
+}
+
+/**
+ * Validation multiple avec customRules
+ * Valide qu'au moins N options sont sélectionnées
+ */
+export const MultipleSelectionValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation de sélection multiple
+Exemple de validation sur un groupe de checkboxes avec **multiple="true"**.
+Valide que l'utilisateur a sélectionné au moins 2 options.
+
+**Caractéristiques :**
+- Mode multiple activé
+- Règle personnalisée sur la taille du tableau
+			`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyForm ref="form" @submit="onSubmit">
+		<SyCheckBoxGroup
+			v-model="selected"
+			label="Sélectionnez au moins 2 options"
+			:options="options"
+			:multiple="true"
+			:custom-rules="minSelectionRules"
+			required
+		/>
+		<VBtn type="submit" color="primary">Valider</VBtn>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyCheckBoxGroup, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
+
+const selected = ref<string[]>([])
+
+const options = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+	{ label: 'Option D', value: 'd' },
+]
+
+const minSelectionRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: unknown) => Array.isArray(value) && value.length >= 2,
+			message: 'Veuillez sélectionner au moins 2 options',
+			fieldIdentifier: 'Sélection',
+		},
+	},
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+	if (event.isValid) {
+		alert('Formulaire valide ! Sélection : ' + JSON.stringify(selected.value))
+	}
+}
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup, SyForm, VBtn },
+		setup() {
+			const selected = ref<string[]>([])
+
+			const minSelectionRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => Array.isArray(value) && value.length >= 2,
+						message: 'Veuillez sélectionner au moins 2 options',
+						fieldIdentifier: 'Sélection',
+					},
+				},
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+				alert(event.isValid ? 'Formulaire valide ! Sélection : ' + JSON.stringify(selected.value) : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selected, minSelectionRules, onSubmit }
+		},
+		template: `
+			<SyForm ref="form" @submit="onSubmit">
+				<SyCheckBoxGroup
+					v-model="selected"
+					v-bind="args"
+					:multiple="true"
+					:custom-rules="minSelectionRules"
+				/>
+				<VBtn type="submit" class="mt-2" color="primary">Valider</VBtn>
+			</SyForm>
+		`,
+	}),
+}
+
+/**
+ * Validation avec customRules combinées (warning + success)
+ * Démonstration de l'utilisation simultanée des règles warning et success
+ */
+export const CustomRules: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation combinée avec customRules
+Ce story démontre l'utilisation simultanée des **customWarningRules** et **customSuccessRules**.
+
+**Caractéristiques :**
+- Warning si l'option A n'est pas sélectionnée
+- Message de succès si l'option A est sélectionnée
+- Validation immédiate (isValidateOnBlur: false)
+			`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SyCheckBoxGroup
+		v-model="selected"
+		:options="options"
+		label="Options"
+		:custom-warning-rules="warningRules"
+		:custom-success-rules="successRules"
+		:is-validate-on-blur="false"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { SyCheckBoxGroup } from '@cnamts/synapse'
+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 warningRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string | null) => {
+				if (value !== 'A') {
+					return "Vous devez sélectionner l'option A"
+				}
+				return true
+			},
+			fieldIdentifier: 'option',
+		},
+	},
+]
+
+const successRules: ValidationRule[] = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string | null) => value === 'A',
+			successMessage: 'Option A sélectionnée',
+			fieldIdentifier: 'option',
+		},
+	},
+]
+</script>`,
+			},
+		],
+	},
+
+	render: args => ({
+		components: { SyCheckBoxGroup },
+		setup() {
+			const selected = ref<string | null>('A')
+			const options = [
+				{ label: 'Option A', value: 'A' },
+				{ label: 'Option B', value: 'B' },
+			]
+			const warningRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string | null) => {
+							if (value !== 'A') {
+								return 'Vous devez sélectionner l\'option A'
+							}
+							return true
+						},
+					},
+				},
+			]
+			const successRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string | null) => value === 'A',
+						successMessage: 'Option A sélectionnée',
+					},
+				},
+			]
+			return { args, selected, options, warningRules, successRules }
+		},
+		template: `
+			<SyCheckBoxGroup
+				v-model="selected"
+				label="Options"
+				:options="options"
+				:custom-warning-rules="warningRules"
+				:custom-success-rules="successRules"
+				:is-validate-on-blur="false"
+			/>
+		`,
+	}),
+}