@pyreweb/fabric 1.2.6

package/src/components/organisms/FOnboardingStepper/FOnboardingStepper.stories.js

@@ -0,0 +1,197 @@
+import FOnboardingStepper from './FOnboardingStepper.vue';
+import FFormField from '../../molecules/FFormField/FFormField.vue';
+
+export default {
+	title: 'Organisms/FOnboardingStepper',
+	component: FOnboardingStepper,
+	tags: ['autodocs'],
+	argTypes: {
+		steps: {
+			control: 'object',
+			description: 'Configuration des étapes'
+		},
+		value: {
+			control: 'number',
+			description: 'Étape actuelle'
+		},
+		showStepNumbers: {
+			control: 'boolean',
+			description: 'Afficher les numéros des étapes'
+		},
+		linear: {
+			control: 'boolean',
+			description: 'Navigation linéaire uniquement'
+		}
+	}
+};
+
+const sampleSteps = [
+	{
+		title: 'Informations personnelles',
+		description: 'Vos informations de base'
+	},
+	{
+		title: 'Préférences',
+		description: 'Personnalisez votre expérience'
+	},
+	{
+		title: 'Confirmation',
+		description: 'Vérifiez vos informations'
+	}
+];
+
+const Template = (args, { argTypes }) => ({
+	components: { FOnboardingStepper },
+	props: Object.keys(argTypes),
+	data() {
+		return { currentStep: args.value || 0 };
+	},
+	template: '<FOnboardingStepper v-bind="$props" v-model="currentStep" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	steps: sampleSteps
+};
+
+export const SecondStep = Template.bind({});
+SecondStep.args = {
+	steps: sampleSteps,
+	value: 1
+};
+
+export const LastStep = Template.bind({});
+LastStep.args = {
+	steps: sampleSteps,
+	value: 2
+};
+
+export const WithStepNumbers = Template.bind({});
+WithStepNumbers.args = {
+	steps: sampleSteps,
+	showStepNumbers: true
+};
+
+export const WithContent = () => ({
+	components: { FOnboardingStepper, FFormField },
+	data() {
+		return {
+			currentStep: 0,
+			steps: sampleSteps,
+			form: {
+				name: '',
+				email: '',
+				theme: 'light',
+				notifications: true
+			}
+		};
+	},
+	methods: {
+		handleComplete() {
+			alert('Onboarding terminé !\n' + JSON.stringify(this.form, null, 2));
+		}
+	},
+	template: `
+		<FOnboardingStepper
+			v-model="currentStep"
+			:steps="steps"
+			@complete="handleComplete"
+		>
+			<template #step-0>
+				<div class="flex flex-col gap-4">
+					<FFormField v-model="form.name" label="Nom complet" required />
+					<FFormField v-model="form.email" label="Email" type="email" required />
+				</div>
+			</template>
+			<template #step-1>
+				<div class="flex flex-col gap-4">
+					<div>
+						<label class="block text-sm font-medium mb-2">Thème</label>
+						<select v-model="form.theme" class="w-full border rounded p-2">
+							<option value="light">Clair</option>
+							<option value="dark">Sombre</option>
+							<option value="system">Système</option>
+						</select>
+					</div>
+					<div class="flex items-center gap-2">
+						<input type="checkbox" v-model="form.notifications" id="notif" />
+						<label for="notif" class="text-sm">Recevoir les notifications</label>
+					</div>
+				</div>
+			</template>
+			<template #step-2>
+				<div class="bg-neutral-50 p-4 rounded-lg">
+					<h4 class="font-medium mb-3">Récapitulatif</h4>
+					<dl class="space-y-2 text-sm">
+						<div class="flex justify-between">
+							<dt class="text-neutral-500">Nom:</dt>
+							<dd>{{ form.name || '-' }}</dd>
+						</div>
+						<div class="flex justify-between">
+							<dt class="text-neutral-500">Email:</dt>
+							<dd>{{ form.email || '-' }}</dd>
+						</div>
+						<div class="flex justify-between">
+							<dt class="text-neutral-500">Thème:</dt>
+							<dd>{{ form.theme }}</dd>
+						</div>
+						<div class="flex justify-between">
+							<dt class="text-neutral-500">Notifications:</dt>
+							<dd>{{ form.notifications ? 'Oui' : 'Non' }}</dd>
+						</div>
+					</dl>
+				</div>
+			</template>
+		</FOnboardingStepper>
+	`
+});
+
+export const ManySteps = Template.bind({});
+ManySteps.args = {
+	steps: [
+		{ title: 'Étape 1', description: 'Première étape' },
+		{ title: 'Étape 2', description: 'Deuxième étape' },
+		{ title: 'Étape 3', description: 'Troisième étape' },
+		{ title: 'Étape 4', description: 'Quatrième étape' },
+		{ title: 'Étape 5', description: 'Cinquième étape' }
+	],
+	showStepNumbers: true
+};
+
+export const Interactive = () => ({
+	components: { FOnboardingStepper },
+	data() {
+		return {
+			currentStep: 0,
+			steps: sampleSteps
+		};
+	},
+	template: `
+		<div class="max-w-2xl mx-auto">
+			<FOnboardingStepper
+				v-model="currentStep"
+				:steps="steps"
+				showStepNumbers
+			>
+				<template #step-0>
+					<div class="text-center py-8">
+						<h3 class="text-xl font-semibold mb-2">Bienvenue !</h3>
+						<p class="text-neutral-600">Commençons par configurer votre profil.</p>
+					</div>
+				</template>
+				<template #step-1>
+					<div class="text-center py-8">
+						<h3 class="text-xl font-semibold mb-2">Personnalisation</h3>
+						<p class="text-neutral-600">Ajustez les paramètres selon vos préférences.</p>
+					</div>
+				</template>
+				<template #step-2>
+					<div class="text-center py-8">
+						<h3 class="text-xl font-semibold mb-2">Prêt !</h3>
+						<p class="text-neutral-600">Tout est configuré. Cliquez sur Terminer.</p>
+					</div>
+				</template>
+			</FOnboardingStepper>
+		</div>
+	`
+});

package/src/components/organisms/FOnboardingStepper/FOnboardingStepper.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FOnboardingStepper from './FOnboardingStepper.vue';
+
+describe('FOnboardingStepper', () => {
+	const steps = [
+		{ title: 'Step 1', description: 'First step' },
+		{ title: 'Step 2', description: 'Second step' },
+		{ title: 'Step 3', description: 'Third step' }
+	];
+
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('displays step titles', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps }
+		});
+		expect(wrapper.text()).toContain('Step 1');
+		expect(wrapper.text()).toContain('Step 2');
+	});
+
+	it('starts at step 0 by default', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps }
+		});
+		expect(wrapper.vm.currentStep || 0).toBe(0);
+	});
+
+	it('respects value prop for current step', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps, value: 1 }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('shows navigation buttons', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps }
+		});
+		const buttons = wrapper.findAllComponents({ name: 'FButton' });
+		expect(buttons.length).toBeGreaterThan(0);
+	});
+
+	it('disables previous button on first step', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps, value: 0 }
+		});
+		const buttons = wrapper.findAllComponents({ name: 'FButton' });
+		const prevButton = buttons.filter(
+			(b) =>
+				b.text().toLowerCase().includes('précédent') ||
+				b.text().toLowerCase().includes('retour')
+		)[0];
+		if (prevButton) {
+			expect(prevButton.props('disabled')).toBe(true);
+		}
+	});
+
+	it('shows finish button on last step', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps, value: 2 }
+		});
+		expect(wrapper.text()).toMatch(/terminer|finish|valider/i);
+	});
+
+	it('emits input when step changes', async () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps, value: 0 }
+		});
+		const nextButton = wrapper
+			.findAllComponents({ name: 'FButton' })
+			.filter(
+				(b) =>
+					b.text().toLowerCase().includes('suivant') ||
+					b.text().toLowerCase().includes('next')
+			)[0];
+		if (nextButton) {
+			await nextButton.trigger('click');
+			expect(wrapper.emitted('input')).toBeTruthy();
+		}
+	});
+
+	it('emits complete on last step', async () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps, value: 2 }
+		});
+		const finishButton = wrapper
+			.findAllComponents({ name: 'FButton' })
+			.filter(
+				(b) =>
+					b.text().toLowerCase().includes('terminer') ||
+					b.text().toLowerCase().includes('valider')
+			)[0];
+		if (finishButton) {
+			await finishButton.trigger('click');
+			expect(wrapper.emitted('complete')).toBeTruthy();
+		}
+	});
+
+	it('renders step content slot', () => {
+		const wrapper = mount(FOnboardingStepper, {
+			propsData: { steps },
+			scopedSlots: {
+				'step-0': '<p>Custom content</p>'
+			}
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+});

package/src/components/organisms/FOnboardingStepper/FOnboardingStepper.vue

@@ -0,0 +1,212 @@
+<template>
+	<div class="f-onboarding-stepper">
+		<!-- Step Progress Indicator -->
+		<div class="mb-6">
+			<f-stepper-progress
+				:steps="stepTitles"
+				:current-step="currentStepIndex"
+			/>
+		</div>
+
+		<!-- Step Content -->
+		<f-card :bordered="bordered">
+			<div class="min-h-[200px]">
+				<slot :name="`step-${currentStepIndex}`">
+					<slot />
+				</slot>
+			</div>
+
+			<!-- Navigation Actions -->
+			<template #actions>
+				<div class="flex w-full justify-between">
+					<div>
+						<f-button
+							v-if="currentStepIndex > 0"
+							variant="outline"
+							@click="handlePrevious"
+						>
+							<template #iconLeft>
+								<f-icon name="chevron-left" size="sm" />
+							</template>
+							{{ previousLabel }}
+						</f-button>
+					</div>
+					<div>
+						<f-button
+							v-if="!isLastStep"
+							variant="primary"
+							:disabled="!canProceed"
+							@click="handleNext"
+						>
+							{{ nextLabel }}
+							<template #iconRight>
+								<f-icon name="chevron-right" size="sm" />
+							</template>
+						</f-button>
+						<f-button
+							v-else
+							variant="success"
+							:disabled="!canProceed"
+							@click="handleComplete"
+						>
+							{{ completeLabel }}
+							<template #iconRight>
+								<f-icon name="check" size="sm" />
+							</template>
+						</f-button>
+					</div>
+				</div>
+			</template>
+		</f-card>
+	</div>
+</template>
+
+<script>
+import FCard from '../../molecules/FCard/FCard.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FStepperProgress from './FStepperProgress.vue';
+
+export default {
+	name: 'FOnboardingStepper',
+	components: {
+		FCard,
+		FButton,
+		FIcon,
+		FStepperProgress
+	},
+	props: {
+		/**
+		 * Array of step objects containing title and optional validation state.
+		 * Each step: { title: string, valid?: boolean }
+		 */
+		steps: {
+			type: Array,
+			required: true,
+			validator: (value) => {
+				return value.every((step) => typeof step.title === 'string');
+			}
+		},
+		/**
+		 * Current step index (0-based).
+		 * Use v-model or .sync for two-way binding.
+		 */
+		value: {
+			type: Number,
+			default: 0
+		},
+		/**
+		 * Whether the current step is valid and the user can proceed.
+		 * When false, the "Next" or "Complete" button is disabled.
+		 */
+		canProceed: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Label for the "Previous" button
+		 */
+		previousLabel: {
+			type: String,
+			default: 'Précédent'
+		},
+		/**
+		 * Label for the "Next" button
+		 */
+		nextLabel: {
+			type: String,
+			default: 'Suivant'
+		},
+		/**
+		 * Label for the "Complete" button (shown on last step)
+		 */
+		completeLabel: {
+			type: String,
+			default: 'Terminer'
+		},
+		/**
+		 * Whether the card has a border
+		 */
+		bordered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		/**
+		 * Current step index with v-model support
+		 */
+		currentStepIndex: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			}
+		},
+		/**
+		 * Extract step titles from the steps array
+		 */
+		stepTitles() {
+			return this.steps.map((step) => step.title);
+		},
+		/**
+		 * Total number of steps
+		 */
+		totalSteps() {
+			return this.steps.length;
+		},
+		/**
+		 * Check if current step is the last step
+		 */
+		isLastStep() {
+			return this.currentStepIndex === this.totalSteps - 1;
+		},
+		/**
+		 * Check if current step is the first step
+		 */
+		isFirstStep() {
+			return this.currentStepIndex === 0;
+		}
+	},
+	methods: {
+		/**
+		 * Navigate to the previous step
+		 */
+		handlePrevious() {
+			if (this.currentStepIndex > 0) {
+				this.currentStepIndex = this.currentStepIndex - 1;
+				this.$emit('previous', this.currentStepIndex);
+				this.$emit('step-change', this.currentStepIndex);
+			}
+		},
+		/**
+		 * Navigate to the next step
+		 */
+		handleNext() {
+			if (this.canProceed && !this.isLastStep) {
+				this.currentStepIndex = this.currentStepIndex + 1;
+				this.$emit('next', this.currentStepIndex);
+				this.$emit('step-change', this.currentStepIndex);
+			}
+		},
+		/**
+		 * Complete the stepper workflow
+		 */
+		handleComplete() {
+			if (this.canProceed && this.isLastStep) {
+				this.$emit('complete');
+			}
+		},
+		/**
+		 * Programmatically go to a specific step
+		 */
+		goToStep(index) {
+			if (index >= 0 && index < this.totalSteps) {
+				this.currentStepIndex = index;
+				this.$emit('step-change', index);
+			}
+		}
+	}
+};
+</script>

package/src/components/organisms/FOnboardingStepper/FStepperProgress.stories.js

@@ -0,0 +1,122 @@
+import FStepperProgress from './FStepperProgress.vue';
+
+export default {
+	title: 'Organisms/FStepperProgress',
+	component: FStepperProgress,
+	tags: ['autodocs'],
+	argTypes: {
+		steps: {
+			control: 'object',
+			description: 'Liste des titres des étapes'
+		},
+		currentStep: {
+			control: { type: 'number', min: 0 },
+			description: "Index de l'étape actuelle (base 0)"
+		}
+	}
+};
+
+const defaultSteps = ['Informations', 'Préférences', 'Confirmation'];
+
+const Template = (args, { argTypes }) => ({
+	components: { FStepperProgress },
+	props: Object.keys(argTypes),
+	template: '<FStepperProgress v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	steps: defaultSteps,
+	currentStep: 0
+};
+
+export const SecondStep = Template.bind({});
+SecondStep.args = {
+	steps: defaultSteps,
+	currentStep: 1
+};
+
+export const LastStep = Template.bind({});
+LastStep.args = {
+	steps: defaultSteps,
+	currentStep: 2
+};
+
+export const AllCompleted = Template.bind({});
+AllCompleted.args = {
+	steps: defaultSteps,
+	currentStep: 3
+};
+
+export const ManySteps = Template.bind({});
+ManySteps.args = {
+	steps: ['Étape 1', 'Étape 2', 'Étape 3', 'Étape 4', 'Étape 5'],
+	currentStep: 2
+};
+
+export const TwoSteps = Template.bind({});
+TwoSteps.args = {
+	steps: ['Début', 'Fin'],
+	currentStep: 0
+};
+
+export const SingleStep = Template.bind({});
+SingleStep.args = {
+	steps: ['Unique'],
+	currentStep: 0
+};
+
+export const Interactive = () => ({
+	components: { FStepperProgress },
+	data() {
+		return {
+			currentStep: 0,
+			steps: ['Informations personnelles', 'Configuration', 'Validation']
+		};
+	},
+	methods: {
+		next() {
+			if (this.currentStep < this.steps.length - 1) {
+				this.currentStep++;
+			}
+		},
+		prev() {
+			if (this.currentStep > 0) {
+				this.currentStep--;
+			}
+		},
+		reset() {
+			this.currentStep = 0;
+		}
+	},
+	template: `
+		<div class="space-y-6">
+			<FStepperProgress :steps="steps" :currentStep="currentStep" />
+			<div class="flex gap-2 justify-center">
+				<button 
+					@click="prev" 
+					:disabled="currentStep === 0"
+					class="px-4 py-2 border rounded disabled:opacity-50"
+				>
+					Précédent
+				</button>
+				<button 
+					@click="next" 
+					:disabled="currentStep >= steps.length - 1"
+					class="px-4 py-2 bg-primary-600 text-white rounded disabled:opacity-50"
+				>
+					Suivant
+				</button>
+				<button 
+					@click="reset"
+					class="px-4 py-2 border rounded"
+				>
+					Réinitialiser
+				</button>
+			</div>
+			<p class="text-center text-sm text-neutral-500">
+				Étape actuelle: {{ currentStep + 1 }} / {{ steps.length }}
+			</p>
+		</div>
+	`
+});