@pyreweb/fabric 1.2.6

package/src/components/atoms/FBadge/FBadge.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+	content?: string | number;
+	variant?: 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+	shape?: 'pill' | 'circle' | 'rounded';
+	size?: 'sm' | 'md' | 'lg';
+	dot?: boolean;
+	outlined?: boolean;
+	tag?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	content: '',
+	variant: 'primary',
+	shape: 'pill',
+	size: 'md',
+	dot: false,
+	outlined: false,
+	tag: 'span'
+});
+
+const computedAriaLabel = computed(() => {
+	return props.dot ? `Status: ${props.variant}` : undefined;
+});
+
+const computedClasses = computed(() => {
+	const base =
+		'inline-flex items-center justify-center font-sans font-medium transition-colors duration-200';
+
+	const variantStyles = {
+		primary: props.outlined
+			? 'border border-primary-500 text-primary-500 bg-transparent'
+			: 'bg-primary-500 text-white',
+		success: props.outlined
+			? 'border border-success-500 text-success-500 bg-transparent'
+			: 'bg-success-500 text-white',
+		warning: props.outlined
+			? 'border border-warning-600 text-warning-600 bg-transparent'
+			: 'bg-warning-600 text-white',
+		error: props.outlined
+			? 'border border-danger-500 text-danger-500 bg-transparent'
+			: 'bg-danger-500 text-white',
+		neutral: props.outlined
+			? 'border border-neutral-500 text-neutral-500 bg-transparent'
+			: 'bg-neutral-500 text-white'
+	};
+
+	if (props.dot) {
+		const dotSizes = {
+			sm: 'w-1.5 h-1.5',
+			md: 'w-2 h-2',
+			lg: 'w-3 h-3'
+		};
+
+		const dotColors = {
+			primary: 'bg-primary-500',
+			success: 'bg-success-500',
+			warning: 'bg-warning-600',
+			error: 'bg-danger-500',
+			neutral: 'bg-neutral-500'
+		};
+
+		return [
+			base,
+			'rounded-full',
+			dotSizes[props.size],
+			dotColors[props.variant]
+		].join(' ');
+	}
+
+	const sizeStyles = {
+		sm:
+			props.shape === 'circle'
+				? 'w-4 h-4 text-[10px]'
+				: 'px-1.5 py-0.5 text-[10px]',
+		md: props.shape === 'circle' ? 'w-6 h-6 text-xs' : 'px-2.5 py-0.5 text-xs',
+		lg: props.shape === 'circle' ? 'w-8 h-8 text-sm' : 'px-3 py-1 text-sm'
+	};
+
+	const shapeStyles = {
+		pill: 'rounded-full',
+		circle: 'rounded-full',
+		rounded: 'rounded-md'
+	};
+
+	return [
+		base,
+		variantStyles[props.variant],
+		sizeStyles[props.size],
+		shapeStyles[props.shape]
+	].join(' ');
+});
+</script>
+
+<template>
+	<component :is="tag" :class="computedClasses" :aria-label="computedAriaLabel">
+		<template v-if="!dot">
+			<slot>{{ content }}</slot>
+		</template>
+	</component>
+</template>

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

@@ -0,0 +1,122 @@
+import FButton from './FButton.vue';
+
+export default {
+	title: 'Atoms/FButton',
+	component: FButton,
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'select' },
+			options: ['primary', 'secondary', 'outline', 'ghost', 'danger', 'link'],
+			description: 'Variante visuelle du bouton'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			description: 'Taille du bouton'
+		},
+		type: {
+			control: { type: 'select' },
+			options: ['button', 'submit', 'reset'],
+			description: 'Type HTML du bouton'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé du bouton'
+		},
+		loading: {
+			control: 'boolean',
+			description: 'Affiche un indicateur de chargement'
+		},
+		block: {
+			control: 'boolean',
+			description: 'Bouton en pleine largeur'
+		},
+		rounded: {
+			control: 'boolean',
+			description: 'Bouton arrondi (pill)'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FButton },
+	props: Object.keys(argTypes),
+	template: '<FButton v-bind="$props">{{ label }}</FButton>',
+	data() {
+		return { label: args.label || 'Bouton' };
+	}
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+	variant: 'primary',
+	label: 'Bouton primaire'
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+	variant: 'secondary',
+	label: 'Bouton secondaire'
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+	variant: 'outline',
+	label: 'Bouton outline'
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+	variant: 'ghost',
+	label: 'Bouton ghost'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+	variant: 'danger',
+	label: 'Bouton danger'
+};
+
+export const Link = Template.bind({});
+Link.args = {
+	variant: 'link',
+	label: 'Bouton lien'
+};
+
+export const Sizes = () => ({
+	components: { FButton },
+	template: `
+		<div class="flex items-center gap-2 flex-wrap">
+			<FButton size="xs">Extra petit</FButton>
+			<FButton size="sm">Petit</FButton>
+			<FButton size="md">Moyen</FButton>
+			<FButton size="lg">Grand</FButton>
+			<FButton size="xl">Extra grand</FButton>
+		</div>
+	`
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+	loading: true,
+	label: 'Chargement...'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true,
+	label: 'Désactivé'
+};
+
+export const Block = Template.bind({});
+Block.args = {
+	block: true,
+	label: 'Bouton pleine largeur'
+};
+
+export const Rounded = Template.bind({});
+Rounded.args = {
+	rounded: true,
+	label: 'Bouton arrondi'
+};

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

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FButton from './FButton.vue';
+
+describe('FButton', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FButton, {
+			slots: {
+				default: 'Click me'
+			}
+		});
+		expect(wrapper.text()).toContain('Click me');
+		expect(wrapper.find('button').exists()).toBe(true);
+	});
+
+	it('applies primary variant by default', () => {
+		const wrapper = mount(FButton);
+		const button = wrapper.find('button');
+		expect(button.classes().join(' ')).toContain('bg-primary-600');
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = [
+			'primary',
+			'secondary',
+			'outline',
+			'ghost',
+			'danger',
+			'link'
+		] as const;
+		variants.forEach((variant) => {
+			const wrapper = mount(FButton, {
+				propsData: { variant }
+			});
+			expect(wrapper.find('button').exists()).toBe(true);
+		});
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+		sizes.forEach((size) => {
+			const wrapper = mount(FButton, {
+				propsData: { size }
+			});
+			expect(wrapper.find('button').exists()).toBe(true);
+		});
+	});
+
+	it('emits click event when clicked', async () => {
+		const wrapper = mount(FButton);
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('click')).toHaveLength(1);
+	});
+
+	it('does not emit click when disabled', async () => {
+		const wrapper = mount(FButton, {
+			propsData: { disabled: true }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('click')).toBeUndefined();
+	});
+
+	it('does not emit click when loading', async () => {
+		const wrapper = mount(FButton, {
+			propsData: { loading: true }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('click')).toBeUndefined();
+	});
+
+	it('shows loader when loading', () => {
+		const wrapper = mount(FButton, {
+			propsData: { loading: true }
+		});
+		expect(wrapper.findComponent({ name: 'FLoader' }).exists()).toBe(true);
+	});
+
+	it('applies block class when block prop is true', () => {
+		const wrapper = mount(FButton, {
+			propsData: { block: true }
+		});
+		expect(wrapper.find('button').classes()).toContain('w-full');
+	});
+
+	it('applies rounded-full when rounded prop is true', () => {
+		const wrapper = mount(FButton, {
+			propsData: { rounded: true }
+		});
+		expect(wrapper.find('button').classes()).toContain('rounded-full');
+	});
+
+	it('sets correct button type', () => {
+		const wrapper = mount(FButton, {
+			propsData: { type: 'submit' }
+		});
+		expect(wrapper.find('button').attributes('type')).toBe('submit');
+	});
+});

package/src/components/atoms/FButton/FButton.vue

@@ -0,0 +1,147 @@
+<script>
+import { computed } from 'vue';
+import FLoader from '../FLoader/FLoader.vue';
+
+export default {
+	name: 'FButton',
+	components: {
+		FLoader
+	},
+	props: {
+		variant: {
+			type: String,
+			default: 'primary',
+			validator: (value) =>
+				['primary', 'secondary', 'outline', 'ghost', 'danger', 'link'].includes(
+					value
+				)
+		},
+		size: {
+			type: String,
+			default: 'md',
+			validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+		},
+		type: {
+			type: String,
+			default: 'button',
+			validator: (value) => ['button', 'submit', 'reset'].includes(value)
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		iconLeft: {
+			type: String,
+			default: undefined
+		},
+		iconRight: {
+			type: String,
+			default: undefined
+		}
+	},
+	emits: ['click'],
+	setup(props, { emit }) {
+		const handleClick = (event) => {
+			if (props.disabled || props.loading) {
+				event.preventDefault();
+				return;
+			}
+			emit('click', event);
+		};
+
+		const baseClasses =
+			'inline-flex items-center justify-center font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
+
+		const transitionClasses =
+			'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+		const variantClasses = computed(() => {
+			const variants = {
+				primary:
+					'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 border border-transparent',
+				secondary:
+					'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-primary-500',
+				outline:
+					'bg-transparent text-primary-600 border border-primary-600 hover:bg-primary-50 focus:ring-primary-500',
+				ghost:
+					'bg-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-500',
+				danger:
+					'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 border border-transparent',
+				link: 'text-primary-600 underline-offset-4 hover:underline p-0 h-auto focus:ring-0'
+			};
+			return variants[props.variant];
+		});
+
+		const sizeClasses = computed(() => {
+			if (props.variant === 'link') return '';
+
+			const sizes = {
+				xs: 'text-xs px-2.5 py-1.5',
+				sm: 'text-sm px-3 py-2',
+				md: 'text-sm px-4 py-2',
+				lg: 'text-base px-4 py-2',
+				xl: 'text-base px-6 py-3'
+			};
+			return sizes[props.size];
+		});
+
+		const classes = computed(() => [
+			baseClasses,
+			transitionClasses,
+			variantClasses.value,
+			sizeClasses.value,
+			props.block ? 'w-full flex' : '',
+			props.rounded ? 'rounded-full' : 'rounded-md',
+			props.loading
+				? 'cursor-wait relative text-transparent hover:text-transparent !transition-none'
+				: ''
+		]);
+
+		return {
+			handleClick,
+			classes
+		};
+	}
+};
+</script>
+
+<template>
+	<button
+		:type="type"
+		:class="classes"
+		:disabled="disabled || loading"
+		:aria-disabled="disabled || loading"
+		@click="handleClick"
+	>
+		<div
+			v-if="loading"
+			class="absolute inset-0 flex items-center justify-center text-current"
+		>
+			<FLoader size="sm" class="text-current opacity-100" />
+		</div>
+
+		<span :class="{ 'opacity-0': loading }" class="flex items-center gap-2">
+			<slot name="prefix">
+				<span v-if="iconLeft" :class="iconLeft" aria-hidden="true" />
+			</slot>
+
+			<slot />
+
+			<slot name="suffix">
+				<span v-if="iconRight" :class="iconRight" aria-hidden="true" />
+			</slot>
+		</span>
+	</button>
+</template>

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

@@ -0,0 +1,96 @@
+import FCheckbox from './FCheckbox.vue';
+
+export default {
+	title: 'Atoms/FCheckbox',
+	component: FCheckbox,
+	tags: ['autodocs'],
+	argTypes: {
+		checked: {
+			control: 'boolean',
+			description: 'État coché de la checkbox'
+		},
+		label: {
+			control: 'text',
+			description: 'Libellé de la checkbox'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		error: {
+			control: 'boolean',
+			description: "État d'erreur"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FCheckbox },
+	props: Object.keys(argTypes),
+	data() {
+		return { isChecked: args.checked || false };
+	},
+	template: '<FCheckbox v-bind="$props" v-model="isChecked" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	label: "J'accepte les conditions"
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+	label: 'Option sélectionnée',
+	checked: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	label: 'Option désactivée',
+	disabled: true
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+	label: 'Option désactivée et cochée',
+	disabled: true,
+	checked: true
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+	label: 'Champ obligatoire',
+	error: true
+};
+
+export const States = () => ({
+	components: { FCheckbox },
+	data() {
+		return {
+			checked1: false,
+			checked2: true,
+			checked3: false,
+			checked4: false
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-3">
+			<FCheckbox v-model="checked1" label="Normal" />
+			<FCheckbox v-model="checked2" label="Coché" />
+			<FCheckbox v-model="checked3" label="Désactivé" disabled />
+			<FCheckbox v-model="checked4" label="Erreur" error />
+		</div>
+	`
+});
+
+export const WithSlot = () => ({
+	components: { FCheckbox },
+	data() {
+		return { checked: false };
+	},
+	template: `
+		<FCheckbox v-model="checked">
+			J'accepte les <a href="#" class="text-primary-600 underline">conditions d'utilisation</a>
+		</FCheckbox>
+	`
+});

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

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FCheckbox from './FCheckbox.vue';
+
+describe('FCheckbox', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FCheckbox);
+		expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
+	});
+
+	it('displays label when provided', () => {
+		const wrapper = mount(FCheckbox, {
+			propsData: { label: 'Accept terms' }
+		});
+		expect(wrapper.text()).toContain('Accept terms');
+	});
+
+	it('displays slot content as label', () => {
+		const wrapper = mount(FCheckbox, {
+			slots: {
+				default: 'Custom label'
+			}
+		});
+		expect(wrapper.text()).toContain('Custom label');
+	});
+
+	it('is unchecked by default', () => {
+		const wrapper = mount(FCheckbox);
+		expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(
+			false
+		);
+	});
+
+	it('respects checked prop', () => {
+		const wrapper = mount(FCheckbox, {
+			propsData: { checked: true }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(
+			true
+		);
+	});
+
+	it('emits change event when toggled', async () => {
+		const wrapper = mount(FCheckbox);
+		const input = wrapper.find('input');
+		await input.setChecked(true);
+		expect(wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('applies disabled styles', () => {
+		const wrapper = mount(FCheckbox, {
+			propsData: { disabled: true }
+		});
+		expect(wrapper.find('label').classes()).toContain('cursor-not-allowed');
+	});
+
+	it('applies error styles', () => {
+		const wrapper = mount(FCheckbox, {
+			propsData: { error: true }
+		});
+		const input = wrapper.find('input');
+		expect(input.classes().join(' ')).toContain('border-danger');
+	});
+});

package/src/components/atoms/FCheckbox/FCheckbox.vue

@@ -0,0 +1,76 @@
+<template>
+	<label :class="wrapperClasses">
+		<input
+			type="checkbox"
+			:class="inputClasses"
+			:checked="checked"
+			:disabled="disabled"
+			:aria-invalid="error"
+			@change="updateInput"
+			@focus="$emit('focus', $event)"
+			@blur="$emit('blur', $event)"
+		/>
+		<span v-if="label || $slots.default" :class="labelClasses">
+			<slot>{{ label }}</slot>
+		</span>
+	</label>
+</template>
+
+<script>
+export default {
+	name: 'FCheckbox',
+	model: {
+		prop: 'checked',
+		event: 'change'
+	},
+	props: {
+		checked: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		wrapperClasses() {
+			return [
+				'inline-flex items-center select-none',
+				this.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+			];
+		},
+		inputClasses() {
+			return [
+				'shrink-0 w-4 h-4 rounded border focus:outline-none focus:ring-2 focus:ring-offset-1',
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]',
+				this.error
+					? 'border-danger-500 text-danger-500 focus:ring-danger-500/20'
+					: 'border-neutral-300 text-primary-600 focus:border-primary-600 focus:ring-primary-600/20',
+				this.disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+			];
+		},
+		labelClasses() {
+			return [
+				'ml-2 font-sans text-sm',
+				this.error ? 'text-danger-500' : 'text-neutral-700'
+			];
+		}
+	},
+	methods: {
+		updateInput(event) {
+			if (!this.disabled) {
+				this.$emit('change', event.target.checked);
+			}
+		}
+	}
+};
+</script>