@pyreweb/fabric 1.2.6

package/src/components/atoms/FTextarea/FTextarea.vue

@@ -0,0 +1,156 @@
+<template>
+	<div :class="wrapperClasses">
+		<label v-if="label" :for="inputId" :class="labelClasses">
+			{{ label }}
+		</label>
+		<textarea
+			:id="inputId"
+			:class="textareaClasses"
+			:value="value"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:rows="rows"
+			:maxlength="maxlength"
+			:aria-invalid="error"
+			:aria-describedby="errorMessage ? errorId : undefined"
+			@input="handleInput"
+			@focus="$emit('focus', $event)"
+			@blur="$emit('blur', $event)"
+		></textarea>
+		<div v-if="hasCounter || errorMessage" :class="footerClasses">
+			<span v-if="errorMessage" :id="errorId" :class="errorMessageClasses">
+				{{ errorMessage }}
+			</span>
+			<span
+				v-if="hasCounter"
+				:class="[counterClasses, { 'ml-auto': !errorMessage }]"
+			>
+				{{ characterCount }}/{{ maxlength }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+let idCounter = 0;
+
+export default {
+	name: 'FTextarea',
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		rows: {
+			type: [Number, String],
+			default: 3
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		},
+		errorMessage: {
+			type: String,
+			default: ''
+		},
+		maxlength: {
+			type: [Number, String],
+			default: null
+		},
+		showCounter: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		const id = ++idCounter;
+		return {
+			inputId: `ftextarea-${id}`,
+			errorId: `ftextarea-error-${id}`
+		};
+	},
+	computed: {
+		wrapperClasses() {
+			return 'flex flex-col';
+		},
+		labelClasses() {
+			const baseClasses = 'font-sans text-sm text-neutral-700 mb-1';
+			const errorClasses = this.error ? 'text-danger-500' : '';
+
+			return [baseClasses, errorClasses].filter(Boolean).join(' ');
+		},
+		textareaClasses() {
+			const baseClasses =
+				'block w-full font-sans border rounded box-border focus:outline-none focus:ring-2 resize-y';
+
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			const stateClasses = this.error
+				? 'border-danger-500 focus:border-danger-500 focus:ring-danger-500/20'
+				: 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20';
+
+			const disabledClasses = this.disabled
+				? 'bg-neutral-100 cursor-not-allowed opacity-70'
+				: '';
+
+			const paddingClasses = 'py-2.5 px-3.5 text-sm';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				paddingClasses,
+				stateClasses,
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		footerClasses() {
+			return 'flex justify-between items-center mt-1';
+		},
+		errorMessageClasses() {
+			return 'font-sans text-xs text-danger-500';
+		},
+		counterClasses() {
+			const baseClasses = 'font-sans text-xs';
+			const stateClasses = this.isOverLimit
+				? 'text-danger-500'
+				: 'text-neutral-500';
+
+			return [baseClasses, stateClasses].filter(Boolean).join(' ');
+		},
+		characterCount() {
+			return this.value ? this.value.length : 0;
+		},
+		isOverLimit() {
+			return this.maxlength && this.characterCount > Number(this.maxlength);
+		},
+		hasCounter() {
+			return this.showCounter && this.maxlength;
+		}
+	},
+	methods: {
+		handleInput(event) {
+			this.$emit('input', event.target.value);
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,108 @@
+import FToggle from './FToggle.vue';
+
+export default {
+	title: 'Atoms/FToggle',
+	component: FToggle,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'boolean',
+			description: 'État du toggle (activé/désactivé)'
+		},
+		label: {
+			control: 'text',
+			description: 'Libellé du toggle'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		color: {
+			control: { type: 'select' },
+			options: ['blue', 'green', 'red', 'orange', 'purple'],
+			description: 'Couleur du toggle'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FToggle },
+	props: Object.keys(argTypes),
+	data() {
+		return { isEnabled: args.value || false };
+	},
+	template: '<FToggle v-bind="$props" v-model="isEnabled" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	label: 'Activer les notifications'
+};
+
+export const Enabled = Template.bind({});
+Enabled.args = {
+	label: 'Notifications activées',
+	value: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	label: 'Option désactivée',
+	disabled: true
+};
+
+export const DisabledOn = Template.bind({});
+DisabledOn.args = {
+	label: 'Option activée (désactivée)',
+	value: true,
+	disabled: true
+};
+
+export const Colors = () => ({
+	components: { FToggle },
+	data() {
+		return {
+			blue: true,
+			green: true,
+			red: true,
+			orange: true,
+			purple: true
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FToggle v-model="blue" color="blue" label="Bleu (défaut)" />
+			<FToggle v-model="green" color="green" label="Vert" />
+			<FToggle v-model="red" color="red" label="Rouge" />
+			<FToggle v-model="orange" color="orange" label="Orange" />
+			<FToggle v-model="purple" color="purple" label="Violet" />
+		</div>
+	`
+});
+
+export const WithoutLabel = Template.bind({});
+WithoutLabel.args = {};
+
+export const Interactive = () => ({
+	components: { FToggle },
+	data() {
+		return {
+			darkMode: false,
+			notifications: true,
+			autoSave: true
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4 p-4 border rounded-lg">
+			<h3 class="font-semibold text-neutral-800">Paramètres</h3>
+			<FToggle v-model="darkMode" label="Mode sombre" />
+			<FToggle v-model="notifications" label="Notifications push" />
+			<FToggle v-model="autoSave" label="Sauvegarde automatique" />
+			<div class="mt-4 text-sm text-neutral-500">
+				<p>Mode sombre: {{ darkMode ? 'Activé' : 'Désactivé' }}</p>
+				<p>Notifications: {{ notifications ? 'Activées' : 'Désactivées' }}</p>
+				<p>Auto-save: {{ autoSave ? 'Activé' : 'Désactivé' }}</p>
+			</div>
+		</div>
+	`
+});

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

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FToggle from './FToggle.vue';
+
+describe('FToggle', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FToggle);
+		expect(wrapper.find('button[role="switch"]').exists()).toBe(true);
+	});
+
+	it('displays label when provided', () => {
+		const wrapper = mount(FToggle, {
+			propsData: { label: 'Enable notifications' }
+		});
+		expect(wrapper.text()).toContain('Enable notifications');
+	});
+
+	it('is off by default', () => {
+		const wrapper = mount(FToggle);
+		expect(wrapper.find('button').attributes('aria-checked')).toBe('false');
+	});
+
+	it('respects value prop', () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: true }
+		});
+		expect(wrapper.find('button').attributes('aria-checked')).toBe('true');
+	});
+
+	it('emits input event when toggled', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('input')).toBeTruthy();
+	});
+
+	it('emits change event when toggled', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('has disabled attribute on button when disabled', () => {
+		const wrapper = mount(FToggle, {
+			propsData: { disabled: true }
+		});
+		expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+	});
+
+	it('applies correct color classes', () => {
+		const colors = ['blue', 'green', 'red', 'orange', 'purple'] as const;
+		colors.forEach((color) => {
+			const wrapper = mount(FToggle, {
+				propsData: { color, value: true }
+			});
+			expect(wrapper.find('button').exists()).toBe(true);
+		});
+	});
+
+	it('toggles when Space key is pressed', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false }
+		});
+		await wrapper.find('button').trigger('keydown.space');
+		expect(wrapper.emitted('input')).toBeTruthy();
+		expect(wrapper.emitted('input')?.[0]).toEqual([true]);
+	});
+
+	it('toggles when Enter key is pressed', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false }
+		});
+		await wrapper.find('button').trigger('keydown.enter');
+		expect(wrapper.emitted('input')).toBeTruthy();
+		expect(wrapper.emitted('input')?.[0]).toEqual([true]);
+	});
+
+	it('does not toggle when disabled and Space is pressed', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false, disabled: true }
+		});
+		await wrapper.find('button').trigger('keydown.space');
+		expect(wrapper.emitted('input')).toBeFalsy();
+	});
+
+	it('does not toggle when disabled and Enter is pressed', async () => {
+		const wrapper = mount(FToggle, {
+			propsData: { value: false, disabled: true }
+		});
+		await wrapper.find('button').trigger('keydown.enter');
+		expect(wrapper.emitted('input')).toBeFalsy();
+	});
+});

package/src/components/atoms/FToggle/FToggle.vue

@@ -0,0 +1,123 @@
+<template>
+	<label :class="containerClasses">
+		<button
+			type="button"
+			role="switch"
+			:class="switchClasses"
+			:aria-checked="String(value)"
+			:disabled="disabled"
+			@click="handleToggle"
+			@keydown.space.prevent="handleToggle"
+			@keydown.enter.prevent="handleToggle"
+			@focus="$emit('focus', $event)"
+			@blur="$emit('blur', $event)"
+		>
+			<span :class="thumbClasses" aria-hidden="true" />
+		</button>
+		<span v-if="label" :class="labelClasses">
+			{{ label }}
+		</span>
+	</label>
+</template>
+
+<script>
+export default {
+	name: 'FToggle',
+	props: {
+		value: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		color: {
+			type: String,
+			default: 'blue',
+			validator: (value) =>
+				['blue', 'green', 'red', 'orange', 'purple'].includes(value)
+		}
+	},
+	computed: {
+		containerClasses() {
+			const baseClasses = 'inline-flex items-center cursor-pointer font-sans';
+			const disabledClasses = this.disabled
+				? 'cursor-not-allowed opacity-50'
+				: '';
+
+			return [baseClasses, disabledClasses].filter(Boolean).join(' ');
+		},
+		switchClasses() {
+			const baseClasses =
+				'relative inline-flex items-center h-6 w-11 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 flex-shrink-0';
+
+			const transitionClasses =
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			const colorClasses = {
+				blue: this.value
+					? 'bg-primary-500 focus:ring-primary-500/20'
+					: 'bg-neutral-300 focus:ring-primary-500/20',
+				green: this.value
+					? 'bg-success-500 focus:ring-success-500/20'
+					: 'bg-neutral-300 focus:ring-success-500/20',
+				red: this.value
+					? 'bg-danger-500 focus:ring-danger-500/20'
+					: 'bg-neutral-300 focus:ring-danger-500/20',
+				orange: this.value
+					? 'bg-warning-500 focus:ring-warning-500/20'
+					: 'bg-neutral-300 focus:ring-warning-500/20',
+				purple: this.value
+					? 'bg-primary-500 focus:ring-primary-500/20'
+					: 'bg-neutral-300 focus:ring-primary-500/20'
+			};
+
+			const disabledClasses = this.disabled
+				? 'cursor-not-allowed'
+				: 'cursor-pointer';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				colorClasses[this.color],
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		thumbClasses() {
+			const baseClasses =
+				'inline-block w-4 h-4 rounded-full bg-white shadow transform';
+
+			const transitionClasses =
+				'transition-transform duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			const positionClasses = this.value ? 'translate-x-6' : 'translate-x-1';
+
+			return [baseClasses, transitionClasses, positionClasses]
+				.filter(Boolean)
+				.join(' ');
+		},
+		labelClasses() {
+			const baseClasses = 'ml-2 text-sm text-neutral-800 select-none';
+
+			const disabledClasses = this.disabled ? 'text-neutral-400' : '';
+
+			return [baseClasses, disabledClasses].filter(Boolean).join(' ');
+		}
+	},
+	methods: {
+		handleToggle() {
+			if (!this.disabled) {
+				this.$emit('input', !this.value);
+				this.$emit('change', !this.value);
+			}
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,127 @@
+import FTypography from './FTypography.vue';
+
+export default {
+	title: 'Atoms/FTypography',
+	component: FTypography,
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'select' },
+			options: [
+				'h1',
+				'h2',
+				'h3',
+				'h4',
+				'h5',
+				'h6',
+				'body',
+				'caption',
+				'overline'
+			],
+			description: 'Variante typographique'
+		},
+		tag: {
+			control: 'text',
+			description: 'Balise HTML personnalisée'
+		},
+		truncate: {
+			control: 'boolean',
+			description: 'Tronquer le texte avec ellipse'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FTypography },
+	props: Object.keys(argTypes),
+	data() {
+		return { content: args.content || 'Texte exemple' };
+	},
+	template: '<FTypography v-bind="$props">{{ content }}</FTypography>'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	content: 'Texte par défaut (body)'
+};
+
+export const Headings = () => ({
+	components: { FTypography },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FTypography variant="h1">Titre H1</FTypography>
+			<FTypography variant="h2">Titre H2</FTypography>
+			<FTypography variant="h3">Titre H3</FTypography>
+			<FTypography variant="h4">Titre H4</FTypography>
+			<FTypography variant="h5">Titre H5</FTypography>
+			<FTypography variant="h6">Titre H6</FTypography>
+		</div>
+	`
+});
+
+export const Body = Template.bind({});
+Body.args = {
+	variant: 'body',
+	content:
+		'Ceci est un paragraphe de texte standard. Il utilise la variante body qui est adaptée au contenu principal.'
+};
+
+export const Caption = Template.bind({});
+Caption.args = {
+	variant: 'caption',
+	content: 'Texte de légende ou note secondaire'
+};
+
+export const Overline = Template.bind({});
+Overline.args = {
+	variant: 'overline',
+	content: 'TEXTE EN SURTITRE'
+};
+
+export const Truncate = () => ({
+	components: { FTypography },
+	template: `
+		<div class="w-64 border border-neutral-200 rounded p-4">
+			<FTypography variant="body" truncate>
+				Ce texte est très long et sera tronqué avec une ellipse car il dépasse la largeur du conteneur.
+			</FTypography>
+		</div>
+	`
+});
+
+export const CustomTag = () => ({
+	components: { FTypography },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FTypography variant="h1" tag="div">H1 rendu comme div</FTypography>
+			<FTypography variant="body" tag="span">Body rendu comme span</FTypography>
+		</div>
+	`
+});
+
+export const AllVariants = () => ({
+	components: { FTypography },
+	template: `
+		<div class="flex flex-col gap-6">
+			<div>
+				<FTypography variant="overline">SECTION</FTypography>
+				<FTypography variant="h1">Titre Principal H1</FTypography>
+			</div>
+			<div>
+				<FTypography variant="h2">Sous-titre H2</FTypography>
+				<FTypography variant="body">
+					Paragraphe de texte standard avec la variante body. Ce style est utilisé pour le contenu principal de la page.
+				</FTypography>
+			</div>
+			<div>
+				<FTypography variant="h3">Section H3</FTypography>
+				<FTypography variant="body">
+					Un autre paragraphe de texte qui explique quelque chose d'important.
+				</FTypography>
+				<FTypography variant="caption">
+					Note: Ceci est un texte de légende ou une note secondaire.
+				</FTypography>
+			</div>
+		</div>
+	`
+});

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

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FTypography from './FTypography.vue';
+
+describe('FTypography', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FTypography, {
+			slots: {
+				default: 'Text content'
+			}
+		});
+		expect(wrapper.text()).toContain('Text content');
+	});
+
+	it('renders as p tag by default (body variant)', () => {
+		const wrapper = mount(FTypography, {
+			slots: { default: 'Paragraph' }
+		});
+		expect(wrapper.find('p').exists()).toBe(true);
+	});
+
+	it('renders correct heading tags for h variants', () => {
+		const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+		headings.forEach((variant) => {
+			const wrapper = mount(FTypography, {
+				propsData: { variant },
+				slots: { default: 'Heading' }
+			});
+			expect(wrapper.find(variant).exists()).toBe(true);
+		});
+	});
+
+	it('renders span for caption variant', () => {
+		const wrapper = mount(FTypography, {
+			propsData: { variant: 'caption' },
+			slots: { default: 'Caption text' }
+		});
+		expect(wrapper.find('span').exists()).toBe(true);
+	});
+
+	it('renders span for overline variant', () => {
+		const wrapper = mount(FTypography, {
+			propsData: { variant: 'overline' },
+			slots: { default: 'Overline text' }
+		});
+		expect(wrapper.find('span').exists()).toBe(true);
+	});
+
+	it('uses custom tag when specified', () => {
+		const wrapper = mount(FTypography, {
+			propsData: { tag: 'div' },
+			slots: { default: 'Content' }
+		});
+		expect(wrapper.find('div').exists()).toBe(true);
+	});
+
+	it('applies truncate classes when truncate prop is true', () => {
+		const wrapper = mount(FTypography, {
+			propsData: { truncate: true },
+			slots: { default: 'Long text that might be truncated' }
+		});
+		const classString = wrapper.classes().join(' ');
+		expect(classString).toContain('overflow-hidden');
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = [
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'body',
+			'caption',
+			'overline'
+		] as const;
+		variants.forEach((variant) => {
+			const wrapper = mount(FTypography, {
+				propsData: { variant },
+				slots: { default: 'Text' }
+			});
+			expect(wrapper.exists()).toBe(true);
+		});
+	});
+
+	it('applies base font classes', () => {
+		const wrapper = mount(FTypography, {
+			slots: { default: 'Text' }
+		});
+		expect(wrapper.classes()).toContain('font-sans');
+	});
+});