@pyreweb/fabric 1.2.6

package/src/components/molecules/FFormField/FFormField.stories.js

@@ -0,0 +1,149 @@
+import FFormField from './FFormField.vue';
+
+export default {
+	title: 'Molecules/FFormField',
+	component: FFormField,
+	tags: ['autodocs'],
+	argTypes: {
+		label: {
+			control: 'text',
+			description: 'Libellé du champ'
+		},
+		value: {
+			control: 'text',
+			description: 'Valeur du champ'
+		},
+		type: {
+			control: { type: 'select' },
+			options: ['text', 'email', 'password', 'number'],
+			description: 'Type du champ'
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Placeholder'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large'],
+			description: 'Taille du champ'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		readonly: {
+			control: 'boolean',
+			description: 'Lecture seule'
+		},
+		required: {
+			control: 'boolean',
+			description: 'Champ obligatoire'
+		},
+		hint: {
+			control: 'text',
+			description: "Texte d'aide"
+		},
+		errorMessage: {
+			control: 'text',
+			description: "Message d'erreur"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FFormField },
+	props: Object.keys(argTypes),
+	data() {
+		return { inputValue: args.value || '' };
+	},
+	template: '<FFormField v-bind="$props" v-model="inputValue" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	label: 'Adresse email',
+	placeholder: 'exemple@email.com'
+};
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+	label: 'Mot de passe',
+	type: 'password',
+	hint: 'Le mot de passe doit contenir au moins 8 caractères'
+};
+
+export const Required = Template.bind({});
+Required.args = {
+	label: 'Nom complet',
+	placeholder: 'Jean Dupont',
+	required: true
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+	label: 'Email',
+	value: 'email-invalide',
+	errorMessage: 'Veuillez entrer une adresse email valide'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	label: 'Champ désactivé',
+	value: 'Valeur non modifiable',
+	disabled: true
+};
+
+export const Readonly = Template.bind({});
+Readonly.args = {
+	label: 'Référence',
+	value: 'REF-2024-001',
+	readonly: true
+};
+
+export const Sizes = () => ({
+	components: { FFormField },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FFormField label="Petit" size="small" placeholder="Petit champ" />
+			<FFormField label="Moyen" size="medium" placeholder="Champ moyen" />
+			<FFormField label="Grand" size="large" placeholder="Grand champ" />
+		</div>
+	`
+});
+
+export const CompleteForm = () => ({
+	components: { FFormField },
+	data() {
+		return {
+			form: {
+				name: '',
+				email: '',
+				password: ''
+			}
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4 max-w-md">
+			<FFormField
+				v-model="form.name"
+				label="Nom complet"
+				placeholder="Votre nom"
+				required
+			/>
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				placeholder="exemple@email.com"
+				required
+			/>
+			<FFormField
+				v-model="form.password"
+				label="Mot de passe"
+				type="password"
+				hint="8 caractères minimum"
+				required
+			/>
+		</div>
+	`
+});

package/src/components/molecules/FFormField/FFormField.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FFormField from './FFormField.vue';
+
+describe('FFormField', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FFormField);
+		expect(wrapper.findComponent({ name: 'FInput' }).exists()).toBe(true);
+	});
+
+	it('displays label when provided', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { label: 'Email Address' }
+		});
+		expect(wrapper.text()).toContain('Email Address');
+	});
+
+	it('displays hint when provided', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { hint: 'Enter a valid email' }
+		});
+		expect(wrapper.text()).toContain('Enter a valid email');
+	});
+
+	it('displays error message when provided', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { errorMessage: 'This field is required' }
+		});
+		expect(wrapper.text()).toContain('This field is required');
+	});
+
+	it('shows required indicator when required', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { label: 'Name', required: true }
+		});
+		expect(wrapper.html()).toContain('*');
+	});
+
+	it('passes value to input', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { value: 'test@example.com' }
+		});
+		const input = wrapper.findComponent({ name: 'FInput' });
+		expect(input.props('value')).toBe('test@example.com');
+	});
+
+	it('emits input event', async () => {
+		const wrapper = mount(FFormField);
+		const input = wrapper.findComponent({ name: 'FInput' });
+		await input.vm.$emit('input', 'new value');
+		expect(wrapper.emitted('input')).toBeTruthy();
+	});
+
+	it('passes placeholder to input', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { placeholder: 'Enter your email' }
+		});
+		const input = wrapper.findComponent({ name: 'FInput' });
+		expect(input.props('placeholder')).toBe('Enter your email');
+	});
+
+	it('passes size to input', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { size: 'large' }
+		});
+		const input = wrapper.findComponent({ name: 'FInput' });
+		expect(input.props('size')).toBe('large');
+	});
+
+	it('passes disabled state to input', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { disabled: true }
+		});
+		const input = wrapper.findComponent({ name: 'FInput' });
+		expect(input.props('disabled')).toBe(true);
+	});
+
+	it('passes error state based on errorMessage', () => {
+		const wrapper = mount(FFormField, {
+			propsData: { errorMessage: 'Error!' }
+		});
+		const input = wrapper.findComponent({ name: 'FInput' });
+		expect(input.props('error')).toBe(true);
+	});
+});

package/src/components/molecules/FFormField/FFormField.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="flex flex-col gap-1.5">
+		<label
+			v-if="label"
+			:for="inputId"
+			:class="[
+				'text-sm font-medium text-neutral-700',
+				{ 'after:content-[\'_*\'] after:text-danger-500': required }
+			]"
+		>
+			{{ label }}
+		</label>
+		<f-input
+			:id="inputId"
+			:value="value"
+			:type="type"
+			:placeholder="placeholder"
+			:size="size"
+			:disabled="disabled"
+			:readonly="readonly"
+			:error="!!errorMessage"
+			@input="$emit('input', $event)"
+			@focus="$emit('focus', $event)"
+			@blur="$emit('blur', $event)"
+		/>
+		<span v-if="errorMessage" class="text-xs text-danger-500">
+			{{ errorMessage }}
+		</span>
+		<span v-else-if="hint" class="text-xs text-neutral-500">
+			{{ hint }}
+		</span>
+	</div>
+</template>
+
+<script>
+import FInput from '../../atoms/FInput/FInput.vue';
+
+let idCounter = 0;
+
+export default {
+	name: 'FFormField',
+	components: {
+		FInput
+	},
+	props: {
+		id: {
+			type: String,
+			default: ''
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'text'
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: String,
+			default: 'medium'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		hint: {
+			type: String,
+			default: ''
+		},
+		errorMessage: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			generatedId: ''
+		};
+	},
+	computed: {
+		inputId() {
+			return this.id || this.generatedId;
+		}
+	},
+	created() {
+		if (!this.id) {
+			this.generatedId = `f-form-field-${++idCounter}`;
+		}
+	}
+};
+</script>

package/src/components/molecules/FListItem/FListItem.stories.js

@@ -0,0 +1,158 @@
+import FListItem from './FListItem.vue';
+import FAvatar from '../../atoms/FAvatar/FAvatar.vue';
+import FBadge from '../../atoms/FBadge/FBadge.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+
+export default {
+	title: 'Molecules/FListItem',
+	component: FListItem,
+	tags: ['autodocs'],
+	argTypes: {
+		title: {
+			control: 'text',
+			description: 'Titre principal'
+		},
+		subtitle: {
+			control: 'text',
+			description: 'Sous-titre'
+		},
+		clickable: {
+			control: 'boolean',
+			description: 'Élément cliquable'
+		},
+		selected: {
+			control: 'boolean',
+			description: 'Élément sélectionné'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		truncate: {
+			control: 'boolean',
+			description: 'Tronquer le texte'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FListItem },
+	props: Object.keys(argTypes),
+	template: '<FListItem v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: "Titre de l'élément",
+	subtitle: 'Description secondaire'
+};
+
+export const Clickable = Template.bind({});
+Clickable.args = {
+	title: 'Élément cliquable',
+	subtitle: 'Cliquez pour interagir',
+	clickable: true
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+	title: 'Élément sélectionné',
+	subtitle: 'Cet élément est actif',
+	selected: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	title: 'Élément désactivé',
+	subtitle: 'Non interactif',
+	disabled: true
+};
+
+export const WithAvatar = () => ({
+	components: { FListItem, FAvatar },
+	template: `
+		<FListItem title="Jean Dupont" subtitle="Développeur" clickable>
+			<template #left>
+				<FAvatar name="Jean Dupont" />
+			</template>
+		</FListItem>
+	`
+});
+
+export const WithIcon = () => ({
+	components: { FListItem, FIcon },
+	template: `
+		<FListItem title="Paramètres" subtitle="Gérer vos préférences" clickable>
+			<template #left>
+				<FIcon name="cog" size="md" class="text-neutral-500" />
+			</template>
+			<template #right>
+				<FIcon name="chevron-right" size="sm" class="text-neutral-400" />
+			</template>
+		</FListItem>
+	`
+});
+
+export const WithBadge = () => ({
+	components: { FListItem, FIcon, FBadge },
+	template: `
+		<FListItem title="Messages" subtitle="Consultez vos messages" clickable>
+			<template #left>
+				<FIcon name="mail" size="md" class="text-neutral-500" />
+			</template>
+			<template #right>
+				<FBadge content="3" variant="error" shape="circle" />
+			</template>
+		</FListItem>
+	`
+});
+
+export const List = () => ({
+	components: { FListItem, FAvatar },
+	data() {
+		return {
+			selectedId: 2,
+			users: [
+				{ id: 1, name: 'Alice Martin', role: 'Designer' },
+				{ id: 2, name: 'Bob Dupont', role: 'Développeur' },
+				{ id: 3, name: 'Claire Durand', role: 'Product Manager' },
+				{ id: 4, name: 'David Petit', role: 'DevOps' }
+			]
+		};
+	},
+	methods: {
+		selectUser(id) {
+			this.selectedId = id;
+		}
+	},
+	template: `
+		<div class="divide-y divide-neutral-100">
+			<FListItem
+				v-for="user in users"
+				:key="user.id"
+				:title="user.name"
+				:subtitle="user.role"
+				:selected="selectedId === user.id"
+				clickable
+				@click="selectUser(user.id)"
+			>
+				<template #left>
+					<FAvatar :name="user.name" size="sm" />
+				</template>
+			</FListItem>
+		</div>
+	`
+});
+
+export const LongContent = () => ({
+	components: { FListItem },
+	template: `
+		<div class="w-64">
+			<FListItem
+				title="Un titre très long qui devrait être tronqué"
+				subtitle="Une description également très longue qui sera tronquée"
+				truncate
+			/>
+		</div>
+	`
+});

package/src/components/molecules/FListItem/FListItem.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FListItem from './FListItem.vue';
+
+describe('FListItem', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FListItem);
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('displays title when provided', () => {
+		const wrapper = mount(FListItem, {
+			propsData: { title: 'Item Title' }
+		});
+		expect(wrapper.text()).toContain('Item Title');
+	});
+
+	it('displays subtitle when provided', () => {
+		const wrapper = mount(FListItem, {
+			propsData: { title: 'Title', subtitle: 'Subtitle text' }
+		});
+		expect(wrapper.text()).toContain('Subtitle text');
+	});
+
+	it('is not clickable by default', () => {
+		const wrapper = mount(FListItem);
+		expect(wrapper.attributes('role')).toBeUndefined();
+	});
+
+	it('is clickable when clickable prop is true', () => {
+		const wrapper = mount(FListItem, {
+			propsData: { clickable: true }
+		});
+		expect(wrapper.attributes('role')).toBe('button');
+	});
+
+	it('emits click event when clickable and clicked', async () => {
+		const wrapper = mount(FListItem, {
+			propsData: { clickable: true }
+		});
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toBeTruthy();
+	});
+
+	it('does not emit click when not clickable', async () => {
+		const wrapper = mount(FListItem);
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toBeFalsy();
+	});
+
+	it('does not emit click when disabled', async () => {
+		const wrapper = mount(FListItem, {
+			propsData: { clickable: true, disabled: true }
+		});
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toBeFalsy();
+	});
+
+	it('applies selected styles when selected', () => {
+		const wrapper = mount(FListItem, {
+			propsData: { selected: true }
+		});
+		expect(wrapper.classes().join(' ')).toContain('bg-primary-50');
+	});
+
+	it('renders left slot', () => {
+		const wrapper = mount(FListItem, {
+			slots: { left: '<span>Left content</span>' }
+		});
+		expect(wrapper.html()).toContain('Left content');
+	});
+
+	it('renders right slot', () => {
+		const wrapper = mount(FListItem, {
+			slots: { right: '<span>Right content</span>' }
+		});
+		expect(wrapper.html()).toContain('Right content');
+	});
+
+	it('renders content slot', () => {
+		const wrapper = mount(FListItem, {
+			slots: { content: '<div>Custom content</div>' }
+		});
+		expect(wrapper.html()).toContain('Custom content');
+	});
+
+	it('applies truncate to text when truncate is true', () => {
+		const wrapper = mount(FListItem, {
+			propsData: { title: 'Long title', truncate: true }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+});

package/src/components/molecules/FListItem/FListItem.vue

@@ -0,0 +1,113 @@
+<template>
+	<div
+		:class="listItemClasses"
+		:tabindex="clickable ? 0 : undefined"
+		:role="clickable ? 'button' : undefined"
+		@click="handleClick"
+		@keydown.enter="handleClick"
+		@keydown.space.prevent="handleClick"
+	>
+		<div v-if="$slots.left" class="flex-shrink-0">
+			<slot name="left" />
+		</div>
+
+		<div class="flex-1 min-w-0">
+			<f-typography
+				v-if="title"
+				variant="body"
+				:truncate="truncate"
+				:class="titleClasses"
+			>
+				{{ title }}
+			</f-typography>
+			<f-typography
+				v-if="subtitle"
+				variant="caption"
+				:truncate="truncate"
+				:class="subtitleClasses"
+			>
+				{{ subtitle }}
+			</f-typography>
+			<slot name="content" />
+		</div>
+
+		<div v-if="$slots.right" class="flex-shrink-0">
+			<slot name="right" />
+		</div>
+	</div>
+</template>
+
+<script>
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+
+export default {
+	name: 'FListItem',
+	components: {
+		FTypography
+	},
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		truncate: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		listItemClasses() {
+			const baseClasses = 'flex items-center gap-3 px-4 py-3';
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+			const clickableClasses =
+				this.clickable && !this.disabled
+					? 'cursor-pointer hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500/20'
+					: '';
+			const selectedClasses = this.selected ? 'bg-primary-50' : '';
+			const disabledClasses = this.disabled
+				? 'opacity-50 cursor-not-allowed'
+				: '';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				clickableClasses,
+				selectedClasses,
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		titleClasses() {
+			return this.disabled ? 'text-neutral-400' : '';
+		},
+		subtitleClasses() {
+			return this.disabled ? 'text-neutral-300' : '';
+		}
+	},
+	methods: {
+		handleClick(event) {
+			if (!this.disabled && this.clickable) {
+				this.$emit('click', event);
+			}
+		}
+	}
+};
+</script>