@pyreweb/fabric 1.2.6

package/src/components/atoms/FTypography/FTypography.vue

@@ -0,0 +1,78 @@
+<template>
+	<component :is="computedTag" :class="typographyClasses">
+		<slot />
+	</component>
+</template>
+
+<script>
+export default {
+	name: 'FTypography',
+	props: {
+		variant: {
+			type: String,
+			default: 'body',
+			validator: (value) =>
+				[
+					'h1',
+					'h2',
+					'h3',
+					'h4',
+					'h5',
+					'h6',
+					'body',
+					'caption',
+					'overline'
+				].includes(value)
+		},
+		tag: {
+			type: String,
+			default: null
+		},
+		truncate: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		computedTag() {
+			if (this.tag) return this.tag;
+			const tagMap = {
+				h1: 'h1',
+				h2: 'h2',
+				h3: 'h3',
+				h4: 'h4',
+				h5: 'h5',
+				h6: 'h6',
+				body: 'p',
+				caption: 'span',
+				overline: 'span'
+			};
+			return tagMap[this.variant] || 'p';
+		},
+		typographyClasses() {
+			const baseClasses = 'm-0 font-sans text-neutral-800';
+
+			const variantClasses = {
+				h1: 'text-4xl font-bold leading-tight',
+				h2: 'text-3xl font-bold leading-snug',
+				h3: 'text-2xl font-semibold leading-normal',
+				h4: 'text-xl font-semibold leading-normal',
+				h5: 'text-lg font-medium leading-relaxed',
+				h6: 'text-base font-medium leading-normal',
+				body: 'text-base font-normal leading-relaxed',
+				caption: 'text-sm font-normal leading-normal text-neutral-500',
+				overline:
+					'text-xs font-semibold leading-normal uppercase tracking-wider text-neutral-500'
+			};
+
+			const truncateClasses = this.truncate
+				? 'overflow-hidden text-ellipsis whitespace-nowrap'
+				: '';
+
+			return [baseClasses, variantClasses[this.variant], truncateClasses]
+				.filter(Boolean)
+				.join(' ');
+		}
+	}
+};
+</script>

package/src/components/atoms/index.ts

@@ -0,0 +1,27 @@
+import FAvatar from './FAvatar/FAvatar.vue';
+import FBadge from './FBadge/FBadge.vue';
+import FButton from './FButton/FButton.vue';
+import FCheckbox from './FCheckbox/FCheckbox.vue';
+import FDivider from './FDivider/FDivider.vue';
+import FIcon from './FIcon/FIcon.vue';
+import FInput from './FInput/FInput.vue';
+import FLoader from './FLoader/FLoader.vue';
+import FRadio from './FRadio/FRadio.vue';
+import FTextarea from './FTextarea/FTextarea.vue';
+import FToggle from './FToggle/FToggle.vue';
+import FTypography from './FTypography/FTypography.vue';
+
+export {
+	FAvatar,
+	FBadge,
+	FButton,
+	FCheckbox,
+	FDivider,
+	FIcon,
+	FInput,
+	FLoader,
+	FRadio,
+	FTextarea,
+	FToggle,
+	FTypography
+};

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

@@ -0,0 +1,71 @@
+import FAccordionItem from './FAccordionItem.vue';
+
+export default {
+	title: 'Molecules/FAccordionItem',
+	component: FAccordionItem,
+	tags: ['autodocs'],
+	argTypes: {
+		title: {
+			control: 'text',
+			description: "Titre de l'accordéon"
+		},
+		defaultOpen: {
+			control: 'boolean',
+			description: 'Ouvert par défaut'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FAccordionItem },
+	props: Object.keys(argTypes),
+	template: `
+		<FAccordionItem v-bind="$props">
+			<p>Contenu de l'accordéon. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+		</FAccordionItem>
+	`
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: 'Section 1'
+};
+
+export const OpenByDefault = Template.bind({});
+OpenByDefault.args = {
+	title: 'Section ouverte',
+	defaultOpen: true
+};
+
+export const Multiple = () => ({
+	components: { FAccordionItem },
+	template: `
+		<div class="flex flex-col gap-2">
+			<FAccordionItem title="Première section">
+				<p>Contenu de la première section.</p>
+			</FAccordionItem>
+			<FAccordionItem title="Deuxième section">
+				<p>Contenu de la deuxième section.</p>
+			</FAccordionItem>
+			<FAccordionItem title="Troisième section">
+				<p>Contenu de la troisième section.</p>
+			</FAccordionItem>
+		</div>
+	`
+});
+
+export const WithRichContent = () => ({
+	components: { FAccordionItem },
+	template: `
+		<FAccordionItem title="FAQ - Question importante">
+			<div class="space-y-2">
+				<p>Voici une réponse détaillée avec du contenu riche.</p>
+				<ul class="list-disc pl-4">
+					<li>Premier point</li>
+					<li>Deuxième point</li>
+					<li>Troisième point</li>
+				</ul>
+			</div>
+		</FAccordionItem>
+	`
+});

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

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FAccordionItem from './FAccordionItem.vue';
+
+describe('FAccordionItem', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Section Title' },
+			slots: { default: 'Content' }
+		});
+		expect(wrapper.text()).toContain('Section Title');
+	});
+
+	it('is closed by default', () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title' }
+		});
+		expect(wrapper.find('[aria-expanded="false"]').exists()).toBe(true);
+	});
+
+	it('can be open by default', () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title', defaultOpen: true }
+		});
+		expect(wrapper.find('[aria-expanded="true"]').exists()).toBe(true);
+	});
+
+	it('toggles when header is clicked', async () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title' }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.find('[aria-expanded="true"]').exists()).toBe(true);
+	});
+
+	it('emits toggle event when clicked', async () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title' }
+		});
+		await wrapper.find('button').trigger('click');
+		expect(wrapper.emitted('toggle')).toBeTruthy();
+	});
+
+	it('displays slot content', () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title' },
+			slots: { default: '<p>Accordion content</p>' }
+		});
+		expect(wrapper.html()).toContain('Accordion content');
+	});
+
+	it('has accessible structure', () => {
+		const wrapper = mount(FAccordionItem, {
+			propsData: { title: 'Title' }
+		});
+		const button = wrapper.find('button');
+		const contentId = button.attributes('aria-controls');
+		expect(contentId).toBeDefined();
+		expect(wrapper.find(`#${contentId}`).exists()).toBe(true);
+	});
+});

package/src/components/molecules/FAccordionItem/FAccordionItem.vue

@@ -0,0 +1,105 @@
+<template>
+	<div class="border border-neutral-200 rounded-lg overflow-hidden">
+		<button
+			:id="headerId"
+			type="button"
+			:class="headerClasses"
+			:aria-expanded="String(isOpen)"
+			:aria-controls="contentId"
+			@click="toggle"
+		>
+			<f-typography variant="h6" class="flex-1 text-left">
+				{{ title }}
+			</f-typography>
+			<f-icon name="chevron-down" size="md" :class="iconClasses" />
+		</button>
+		<div
+			:id="contentId"
+			ref="content"
+			:class="contentWrapperClasses"
+			:style="contentStyle"
+			:aria-labelledby="headerId"
+			role="region"
+		>
+			<div ref="contentInner" class="p-4">
+				<slot />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+
+let accordionItemId = 0;
+
+export default {
+	name: 'FAccordionItem',
+	components: {
+		FIcon,
+		FTypography
+	},
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		const id = ++accordionItemId;
+		return {
+			isOpen: this.defaultOpen,
+			contentHeight: 0,
+			headerId: `accordion-header-${id}`,
+			contentId: `accordion-content-${id}`
+		};
+	},
+	computed: {
+		headerClasses() {
+			return 'w-full flex items-center justify-between gap-3 p-4 bg-neutral-50 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset cursor-pointer transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+		},
+		iconClasses() {
+			const baseClasses = 'transform text-neutral-500';
+			const transitionClasses =
+				'transition-transform duration-[var(--transition-duration-slow)] ease-[var(--transition-easing-emphasized)]';
+			const rotateClasses = this.isOpen ? 'rotate-180' : 'rotate-0';
+			return `${baseClasses} ${transitionClasses} ${rotateClasses}`;
+		},
+		contentWrapperClasses() {
+			return 'overflow-hidden transition-all duration-[var(--transition-duration-slow)] ease-[var(--transition-easing-emphasized)]';
+		},
+		contentStyle() {
+			return {
+				maxHeight: this.isOpen ? `${this.contentHeight}px` : '0px'
+			};
+		}
+	},
+	watch: {
+		isOpen() {
+			this.$nextTick(() => {
+				this.updateContentHeight();
+			});
+		}
+	},
+	mounted() {
+		this.updateContentHeight();
+	},
+	methods: {
+		toggle() {
+			this.isOpen = !this.isOpen;
+			this.$emit('toggle', this.isOpen);
+			this.$emit('input', this.isOpen);
+		},
+		updateContentHeight() {
+			if (this.$refs.contentInner) {
+				this.contentHeight = this.$refs.contentInner.scrollHeight;
+			}
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,87 @@
+import FAlert from './FAlert.vue';
+
+export default {
+	title: 'Molecules/FAlert',
+	component: FAlert,
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'select' },
+			options: ['success', 'error', 'info'],
+			description: "Type d'alerte"
+		},
+		title: {
+			control: 'text',
+			description: "Titre de l'alerte"
+		},
+		message: {
+			control: 'text',
+			description: "Message de l'alerte"
+		},
+		closable: {
+			control: 'boolean',
+			description: 'Afficher le bouton de fermeture'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FAlert },
+	props: Object.keys(argTypes),
+	template: '<FAlert v-bind="$props" />'
+});
+
+export const Success = Template.bind({});
+Success.args = {
+	variant: 'success',
+	title: 'Succès',
+	message: 'Votre action a été effectuée avec succès.'
+};
+
+export const Error = Template.bind({});
+Error.args = {
+	variant: 'error',
+	title: 'Erreur',
+	message: "Une erreur s'est produite. Veuillez réessayer."
+};
+
+export const Info = Template.bind({});
+Info.args = {
+	variant: 'info',
+	title: 'Information',
+	message: 'Voici une information importante à prendre en compte.'
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+	variant: 'info',
+	message: 'Alerte simple sans titre.'
+};
+
+export const NotClosable = Template.bind({});
+NotClosable.args = {
+	variant: 'info',
+	title: 'Notification permanente',
+	message: 'Cette alerte ne peut pas être fermée.',
+	closable: false
+};
+
+export const WithSlotContent = () => ({
+	components: { FAlert },
+	template: `
+		<FAlert variant="info" title="Information">
+			<p>Contenu personnalisé avec <a href="#" class="underline">un lien</a> cliquable.</p>
+		</FAlert>
+	`
+});
+
+export const AllVariants = () => ({
+	components: { FAlert },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FAlert variant="success" title="Succès" message="Opération réussie." />
+			<FAlert variant="error" title="Erreur" message="Une erreur s'est produite." />
+			<FAlert variant="info" title="Information" message="Information importante." />
+		</div>
+	`
+});

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

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FAlert from './FAlert.vue';
+
+describe('FAlert', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FAlert);
+		expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+	});
+
+	it('displays title when provided', () => {
+		const wrapper = mount(FAlert, {
+			propsData: { title: 'Alert Title' }
+		});
+		expect(wrapper.text()).toContain('Alert Title');
+	});
+
+	it('displays message when provided', () => {
+		const wrapper = mount(FAlert, {
+			propsData: { message: 'Alert message content' }
+		});
+		expect(wrapper.text()).toContain('Alert message content');
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = ['success', 'error', 'info'] as const;
+		variants.forEach((variant) => {
+			const wrapper = mount(FAlert, {
+				propsData: { variant }
+			});
+			expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+		});
+	});
+
+	it('shows close button by default', () => {
+		const wrapper = mount(FAlert);
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('hides close button when closable is false', () => {
+		const wrapper = mount(FAlert, {
+			propsData: { closable: false }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(false);
+	});
+
+	it('emits close event and hides when close button is clicked', async () => {
+		const wrapper = mount(FAlert);
+		await wrapper.findComponent({ name: 'FButton' }).trigger('click');
+		expect(wrapper.emitted('close')).toBeTruthy();
+	});
+
+	it('displays slot content', () => {
+		const wrapper = mount(FAlert, {
+			slots: { default: '<p>Custom content</p>' }
+		});
+		expect(wrapper.html()).toContain('Custom content');
+	});
+});

package/src/components/molecules/FAlert/FAlert.vue

@@ -0,0 +1,108 @@
+<template>
+	<div v-if="isVisible" :class="alertClasses" role="alert">
+		<f-icon :name="variant" size="md" />
+		<div class="flex-1 min-w-0">
+			<f-typography v-if="title" variant="h6" :class="titleClasses">
+				{{ title }}
+			</f-typography>
+			<f-typography v-if="message" variant="body" :class="messageClasses">
+				{{ message }}
+			</f-typography>
+			<slot />
+		</div>
+		<f-button
+			v-if="closable"
+			variant="text"
+			size="small"
+			:class="closeButtonClasses"
+			@click="handleClose"
+		>
+			<f-icon name="close" size="sm" />
+			<span class="sr-only">Fermer l'alerte</span>
+		</f-button>
+	</div>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+const VARIANT_COLORS = {
+	success: {
+		container: 'bg-success-50 border-success-200 text-success-800',
+		title: 'text-success-800',
+		message: 'text-success-700',
+		closeButton: 'text-success-600 hover:text-success-800'
+	},
+	error: {
+		container: 'bg-danger-50 border-danger-200 text-danger-800',
+		title: 'text-danger-800',
+		message: 'text-danger-700',
+		closeButton: 'text-danger-600 hover:text-danger-800'
+	},
+	info: {
+		container: 'bg-primary-50 border-primary-200 text-primary-800',
+		title: 'text-primary-800',
+		message: 'text-primary-700',
+		closeButton: 'text-primary-600 hover:text-primary-800'
+	}
+};
+
+export default {
+	name: 'FAlert',
+	components: {
+		FIcon,
+		FTypography,
+		FButton
+	},
+	props: {
+		variant: {
+			type: String,
+			default: 'info',
+			validator: (value) => ['success', 'error', 'info'].includes(value)
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		message: {
+			type: String,
+			default: ''
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			isVisible: true
+		};
+	},
+	computed: {
+		variantColors() {
+			return VARIANT_COLORS[this.variant];
+		},
+		alertClasses() {
+			const baseClasses = 'flex items-start gap-3 p-4 rounded-lg border';
+			return `${baseClasses} ${this.variantColors.container}`;
+		},
+		titleClasses() {
+			return this.variantColors.title;
+		},
+		messageClasses() {
+			return this.variantColors.message;
+		},
+		closeButtonClasses() {
+			return `flex-shrink-0 ${this.variantColors.closeButton}`;
+		}
+	},
+	methods: {
+		handleClose() {
+			this.isVisible = false;
+			this.$emit('close');
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,90 @@
+import FBreadcrumb from './FBreadcrumb.vue';
+
+export default {
+	title: 'Molecules/FBreadcrumb',
+	component: FBreadcrumb,
+	tags: ['autodocs'],
+	argTypes: {
+		items: {
+			control: 'object',
+			description: "Liste des éléments du fil d'Ariane"
+		},
+		separatorIcon: {
+			control: 'text',
+			description: 'Icône de séparation'
+		},
+		ariaLabel: {
+			control: 'text',
+			description: "Label pour l'accessibilité"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FBreadcrumb },
+	props: Object.keys(argTypes),
+	template: '<FBreadcrumb v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	items: [
+		{ label: 'Accueil', href: '/' },
+		{ label: 'Produits', href: '/products' },
+		{ label: 'Détail du produit' }
+	]
+};
+
+export const WithLinks = Template.bind({});
+WithLinks.args = {
+	items: [
+		{ label: 'Accueil', href: '/' },
+		{ label: 'Catégorie', href: '/category' },
+		{ label: 'Sous-catégorie', href: '/category/sub' },
+		{ label: 'Article' }
+	]
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+	items: [
+		{ label: 'Accueil', href: '/', icon: 'home' },
+		{ label: 'Documents', href: '/docs', icon: 'folder' },
+		{ label: 'Fichier', icon: 'document' }
+	]
+};
+
+export const CustomSeparator = Template.bind({});
+CustomSeparator.args = {
+	items: [
+		{ label: 'Accueil', href: '/' },
+		{ label: 'Section', href: '/section' },
+		{ label: 'Page actuelle' }
+	],
+	separatorIcon: 'arrow-right'
+};
+
+export const TwoLevels = Template.bind({});
+TwoLevels.args = {
+	items: [{ label: 'Tableau de bord', href: '/' }, { label: 'Paramètres' }]
+};
+
+export const Interactive = () => ({
+	components: { FBreadcrumb },
+	data() {
+		return {
+			items: [
+				{ label: 'Accueil', href: '/' },
+				{ label: 'Produits', href: '/products' },
+				{ label: 'Électronique', href: '/products/electronics' },
+				{ label: 'Smartphone' }
+			]
+		};
+	},
+	methods: {
+		handleNavigate(data) {
+			alert(`Navigation vers: ${data.item.label}`);
+		}
+	},
+	template: '<FBreadcrumb :items="items" @navigate="handleNavigate" />'
+});