@pyreweb/fabric 1.2.6

package/src/components/atoms/FLoader/FLoader.vue

@@ -0,0 +1,97 @@
+<template>
+	<div :class="wrapperClasses">
+		<div :class="containerClasses" role="status" :aria-label="ariaLabel">
+			<svg
+				:class="spinnerClasses"
+				:style="spinnerStyle"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<circle
+					class="opacity-25"
+					cx="12"
+					cy="12"
+					r="10"
+					stroke="currentColor"
+					stroke-width="4"
+				/>
+				<path
+					class="opacity-75"
+					fill="currentColor"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+				/>
+			</svg>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FLoader',
+	props: {
+		size: {
+			type: String,
+			default: 'md',
+			validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		overlay: {
+			type: Boolean,
+			default: false
+		},
+		centered: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String,
+			default: 'Chargement en cours'
+		}
+	},
+	computed: {
+		ariaLabel() {
+			return this.label;
+		},
+		wrapperClasses() {
+			const overlayClasses = this.overlay
+				? 'fixed inset-0 flex items-center justify-center bg-black/50 z-50'
+				: '';
+			return [overlayClasses].filter(Boolean).join(' ');
+		},
+		containerClasses() {
+			const baseClasses = 'inline-flex items-center justify-center';
+			const centeredClasses =
+				this.centered && !this.overlay ? 'absolute inset-0' : '';
+
+			return [baseClasses, centeredClasses].filter(Boolean).join(' ');
+		},
+		spinnerClasses() {
+			const baseClasses = 'animate-spin';
+
+			const sizeClasses = {
+				xs: 'w-4 h-4',
+				sm: 'w-5 h-5',
+				md: 'w-6 h-6',
+				lg: 'w-8 h-8',
+				xl: 'w-12 h-12'
+			};
+
+			const colorClasses = this.color ? '' : 'text-primary-500';
+
+			return [baseClasses, sizeClasses[this.size], colorClasses]
+				.filter(Boolean)
+				.join(' ');
+		},
+		spinnerStyle() {
+			if (this.color) {
+				return { color: this.color };
+			}
+			return undefined;
+		}
+	}
+};
+</script>

package/src/components/atoms/FRadio/FRadio.stories.js

@@ -0,0 +1,105 @@
+import FRadio from './FRadio.vue';
+
+export default {
+	title: 'Atoms/FRadio',
+	component: FRadio,
+	tags: ['autodocs'],
+	argTypes: {
+		label: {
+			control: 'text',
+			description: 'Libellé du bouton radio'
+		},
+		value: {
+			control: 'text',
+			description: 'Valeur du bouton radio'
+		},
+		name: {
+			control: 'text',
+			description: 'Nom du groupe de boutons radio'
+		},
+		modelValue: {
+			control: 'text',
+			description: 'Valeur sélectionnée (v-model)'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		error: {
+			control: 'boolean',
+			description: "État d'erreur"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FRadio },
+	props: Object.keys(argTypes),
+	data() {
+		return { selected: args.modelValue || '' };
+	},
+	template: '<FRadio v-bind="$props" v-model="selected" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	label: 'Option 1',
+	value: 'option1',
+	name: 'default-group'
+};
+
+export const RadioGroup = () => ({
+	components: { FRadio },
+	data() {
+		return { selected: 'option1' };
+	},
+	template: `
+		<div class="flex flex-col gap-3">
+			<FRadio v-model="selected" name="example" value="option1" label="Option 1" />
+			<FRadio v-model="selected" name="example" value="option2" label="Option 2" />
+			<FRadio v-model="selected" name="example" value="option3" label="Option 3" />
+			<p class="text-sm text-neutral-600 mt-2">Sélectionné: {{ selected }}</p>
+		</div>
+	`
+});
+
+export const Disabled = () => ({
+	components: { FRadio },
+	data() {
+		return { selected: 'option1' };
+	},
+	template: `
+		<div class="flex flex-col gap-3">
+			<FRadio v-model="selected" name="disabled-group" value="option1" label="Option sélectionnée désactivée" disabled />
+			<FRadio v-model="selected" name="disabled-group" value="option2" label="Option non sélectionnée désactivée" disabled />
+		</div>
+	`
+});
+
+export const WithError = () => ({
+	components: { FRadio },
+	data() {
+		return { selected: '' };
+	},
+	template: `
+		<div class="flex flex-col gap-3">
+			<FRadio v-model="selected" name="error-group" value="option1" label="Sélectionnez une option" error />
+			<FRadio v-model="selected" name="error-group" value="option2" label="Ou cette option" error />
+			<p class="text-xs text-danger-500 mt-1">Veuillez sélectionner une option</p>
+		</div>
+	`
+});
+
+export const Horizontal = () => ({
+	components: { FRadio },
+	data() {
+		return { selected: 'oui' };
+	},
+	template: `
+		<div class="flex gap-6">
+			<FRadio v-model="selected" name="horizontal" value="oui" label="Oui" />
+			<FRadio v-model="selected" name="horizontal" value="non" label="Non" />
+			<FRadio v-model="selected" name="horizontal" value="peut-etre" label="Peut-être" />
+		</div>
+	`
+});

package/src/components/atoms/FRadio/FRadio.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FRadio from './FRadio.vue';
+
+describe('FRadio', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test-group', value: 'option1' }
+		});
+		expect(wrapper.find('input[type="radio"]').exists()).toBe(true);
+	});
+
+	it('displays label when provided', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt', label: 'Option 1' }
+		});
+		expect(wrapper.text()).toContain('Option 1');
+	});
+
+	it('sets correct name attribute', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'gender', value: 'male' }
+		});
+		expect(wrapper.find('input').attributes('name')).toBe('gender');
+	});
+
+	it('is unchecked by default', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt' }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(
+			false
+		);
+	});
+
+	it('is checked when modelValue matches value', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt1', modelValue: 'opt1' }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(
+			true
+		);
+	});
+
+	it('is unchecked when modelValue does not match value', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt1', modelValue: 'opt2' }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(
+			false
+		);
+	});
+
+	it('emits change event when selected', async () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'selected-value' }
+		});
+		await wrapper.find('input').trigger('change');
+		expect(wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('applies disabled input attribute', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt', disabled: true }
+		});
+		expect(wrapper.find('input').attributes('disabled')).toBeDefined();
+	});
+
+	it('applies error styles to radio', () => {
+		const wrapper = mount(FRadio, {
+			propsData: { name: 'test', value: 'opt', error: true }
+		});
+		expect(wrapper.html()).toContain('border-danger');
+	});
+});

package/src/components/atoms/FRadio/FRadio.vue

@@ -0,0 +1,119 @@
+<template>
+	<label :class="containerClasses">
+		<input
+			type="radio"
+			:class="inputClasses"
+			:name="name"
+			:value="value"
+			:checked="isChecked"
+			:disabled="disabled"
+			@change="handleChange"
+		/>
+		<span :class="radioClasses" aria-hidden="true">
+			<span v-if="isChecked" :class="dotClasses" />
+		</span>
+		<span v-if="label" :class="labelClasses">
+			{{ label }}
+		</span>
+	</label>
+</template>
+
+<script>
+export default {
+	name: 'FRadio',
+	model: {
+		prop: 'modelValue',
+		event: 'change'
+	},
+	props: {
+		label: {
+			type: String,
+			default: ''
+		},
+		value: {
+			type: [String, Number, Boolean],
+			required: true
+		},
+		modelValue: {
+			type: [String, Number, Boolean],
+			default: null
+		},
+		name: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		isChecked() {
+			return this.modelValue === this.value;
+		},
+		containerClasses() {
+			const baseClasses = 'inline-flex items-center cursor-pointer font-sans';
+			const disabledClasses = this.disabled
+				? 'cursor-not-allowed opacity-70'
+				: '';
+
+			return [baseClasses, disabledClasses].filter(Boolean).join(' ');
+		},
+		inputClasses() {
+			return 'sr-only';
+		},
+		radioClasses() {
+			const baseClasses =
+				'inline-flex items-center justify-center w-5 h-5 rounded-full border-2 flex-shrink-0';
+
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			let stateClasses;
+			if (this.error) {
+				stateClasses = this.isChecked
+					? 'border-danger-500 bg-danger-500'
+					: 'border-danger-500 bg-white';
+			} else if (this.disabled) {
+				stateClasses = this.isChecked
+					? 'border-neutral-300 bg-neutral-300'
+					: 'border-neutral-300 bg-neutral-100';
+			} else {
+				stateClasses = this.isChecked
+					? 'border-primary-500 bg-primary-500'
+					: 'border-neutral-300 bg-white hover:border-primary-400';
+			}
+
+			return [baseClasses, transitionClasses, stateClasses]
+				.filter(Boolean)
+				.join(' ');
+		},
+		dotClasses() {
+			return 'w-2 h-2 rounded-full bg-white';
+		},
+		labelClasses() {
+			const baseClasses = 'ml-2 text-sm text-neutral-800 select-none';
+
+			let stateClasses = '';
+			if (this.disabled) {
+				stateClasses = 'text-neutral-400';
+			} else if (this.error) {
+				stateClasses = 'text-danger-500';
+			}
+
+			return [baseClasses, stateClasses].filter(Boolean).join(' ');
+		}
+	},
+	methods: {
+		handleChange() {
+			if (!this.disabled) {
+				this.$emit('change', this.value);
+			}
+		}
+	}
+};
+</script>

package/src/components/atoms/FTextarea/FTextarea.stories.js

@@ -0,0 +1,126 @@
+import FTextarea from './FTextarea.vue';
+
+export default {
+	title: 'Atoms/FTextarea',
+	component: FTextarea,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'text',
+			description: 'Valeur du champ'
+		},
+		label: {
+			control: 'text',
+			description: 'Libellé du champ'
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Texte de placeholder'
+		},
+		rows: {
+			control: { type: 'number', min: 1, max: 20 },
+			description: 'Nombre de lignes'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		readonly: {
+			control: 'boolean',
+			description: 'Lecture seule'
+		},
+		error: {
+			control: 'boolean',
+			description: "État d'erreur"
+		},
+		errorMessage: {
+			control: 'text',
+			description: "Message d'erreur"
+		},
+		maxlength: {
+			control: 'number',
+			description: 'Longueur maximale'
+		},
+		showCounter: {
+			control: 'boolean',
+			description: 'Afficher le compteur de caractères'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FTextarea },
+	props: Object.keys(argTypes),
+	data() {
+		return { content: args.value || '' };
+	},
+	template: '<FTextarea v-bind="$props" v-model="content" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	placeholder: 'Saisissez votre texte...'
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+	label: 'Description',
+	placeholder: 'Décrivez votre projet...'
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+	label: 'Commentaire',
+	value: 'Ceci est un exemple de texte saisi dans le champ textarea.'
+};
+
+export const CustomRows = Template.bind({});
+CustomRows.args = {
+	label: 'Long texte',
+	rows: 6,
+	placeholder: 'Saisissez un texte plus long...'
+};
+
+export const WithCounter = Template.bind({});
+WithCounter.args = {
+	label: 'Bio',
+	placeholder: 'Présentez-vous...',
+	maxlength: 200,
+	showCounter: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	label: 'Champ désactivé',
+	disabled: true,
+	value: 'Ce champ est désactivé'
+};
+
+export const Readonly = Template.bind({});
+Readonly.args = {
+	label: 'Lecture seule',
+	readonly: true,
+	value: 'Ce texte ne peut pas être modifié'
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+	label: 'Description',
+	error: true,
+	errorMessage: 'Ce champ est obligatoire'
+};
+
+export const States = () => ({
+	components: { FTextarea },
+	data() {
+		return { val1: '', val2: '', val3: '', val4: '' };
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FTextarea v-model="val1" label="Normal" placeholder="Saisissez du texte..." />
+			<FTextarea v-model="val2" label="Désactivé" placeholder="Désactivé" disabled />
+			<FTextarea v-model="val3" label="Lecture seule" value="En lecture seule" readonly />
+			<FTextarea v-model="val4" label="Avec erreur" placeholder="Champ avec erreur" error errorMessage="Ce champ est invalide" />
+		</div>
+	`
+});

package/src/components/atoms/FTextarea/FTextarea.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FTextarea from './FTextarea.vue';
+
+describe('FTextarea', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FTextarea);
+		expect(wrapper.find('textarea').exists()).toBe(true);
+	});
+
+	it('displays label when provided', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { label: 'Description' }
+		});
+		expect(wrapper.text()).toContain('Description');
+	});
+
+	it('displays placeholder', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { placeholder: 'Enter text...' }
+		});
+		expect(wrapper.find('textarea').attributes('placeholder')).toBe(
+			'Enter text...'
+		);
+	});
+
+	it('displays value', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { value: 'Test content' }
+		});
+		expect(
+			(wrapper.find('textarea').element as HTMLTextAreaElement).value
+		).toBe('Test content');
+	});
+
+	it('emits input event when typing', async () => {
+		const wrapper = mount(FTextarea);
+		await wrapper.find('textarea').setValue('New content');
+		expect(wrapper.emitted('input')).toBeTruthy();
+		expect(wrapper.emitted('input')![0]).toEqual(['New content']);
+	});
+
+	it('sets correct rows attribute', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { rows: 5 }
+		});
+		expect(wrapper.find('textarea').attributes('rows')).toBe('5');
+	});
+
+	it('applies disabled state', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { disabled: true }
+		});
+		expect(wrapper.find('textarea').attributes('disabled')).toBeDefined();
+		expect(wrapper.find('textarea').classes()).toContain('cursor-not-allowed');
+	});
+
+	it('applies readonly state', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { readonly: true }
+		});
+		expect(wrapper.find('textarea').attributes('readonly')).toBeDefined();
+	});
+
+	it('applies error styles', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { error: true }
+		});
+		expect(wrapper.find('textarea').classes().join(' ')).toContain(
+			'border-danger'
+		);
+	});
+
+	it('displays error message', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { errorMessage: 'This field is required' }
+		});
+		expect(wrapper.text()).toContain('This field is required');
+	});
+
+	it('displays character counter when showCounter and maxlength are set', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { showCounter: true, maxlength: 100, value: 'Hello' }
+		});
+		expect(wrapper.text()).toContain('5/100');
+	});
+
+	it('sets maxlength attribute', () => {
+		const wrapper = mount(FTextarea, {
+			propsData: { maxlength: 200 }
+		});
+		expect(wrapper.find('textarea').attributes('maxlength')).toBe('200');
+	});
+});