@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,104 @@
+import FDivider from './FDivider.vue';
+
+export default {
+	title: 'Atoms/FDivider',
+	component: FDivider,
+	tags: ['autodocs'],
+	argTypes: {
+		orientation: {
+			control: { type: 'select' },
+			options: ['horizontal', 'vertical'],
+			description: 'Orientation du séparateur'
+		},
+		align: {
+			control: { type: 'select' },
+			options: ['left', 'center', 'right'],
+			description: 'Alignement du texte'
+		},
+		margin: {
+			control: { type: 'select' },
+			options: ['none', 'sm', 'md', 'lg'],
+			description: 'Marge autour du séparateur'
+		},
+		thickness: {
+			control: { type: 'select' },
+			options: ['thin', 'medium', 'thick'],
+			description: 'Épaisseur de la ligne'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FDivider },
+	props: Object.keys(argTypes),
+	template: '<FDivider v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithText = () => ({
+	components: { FDivider },
+	template: '<FDivider>OU</FDivider>'
+});
+
+export const Alignments = () => ({
+	components: { FDivider },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FDivider align="left">Gauche</FDivider>
+			<FDivider align="center">Centre</FDivider>
+			<FDivider align="right">Droite</FDivider>
+		</div>
+	`
+});
+
+export const Thickness = () => ({
+	components: { FDivider },
+	template: `
+		<div class="flex flex-col gap-4">
+			<p class="text-sm text-neutral-500">Fin</p>
+			<FDivider thickness="thin" />
+			<p class="text-sm text-neutral-500">Moyen</p>
+			<FDivider thickness="medium" />
+			<p class="text-sm text-neutral-500">Épais</p>
+			<FDivider thickness="thick" />
+		</div>
+	`
+});
+
+export const Margins = () => ({
+	components: { FDivider },
+	template: `
+		<div class="flex flex-col">
+			<p class="text-sm">Contenu au-dessus</p>
+			<FDivider margin="none">Sans marge</FDivider>
+			<FDivider margin="sm">Petite marge</FDivider>
+			<FDivider margin="md">Marge moyenne</FDivider>
+			<FDivider margin="lg">Grande marge</FDivider>
+			<p class="text-sm">Contenu en dessous</p>
+		</div>
+	`
+});
+
+export const Vertical = () => ({
+	components: { FDivider },
+	template: `
+		<div class="flex items-center h-20">
+			<span>Gauche</span>
+			<FDivider orientation="vertical" margin="md" />
+			<span>Droite</span>
+		</div>
+	`
+});
+
+export const VerticalWithText = () => ({
+	components: { FDivider },
+	template: `
+		<div class="flex items-center h-32">
+			<span>Gauche</span>
+			<FDivider orientation="vertical" margin="md">OU</FDivider>
+			<span>Droite</span>
+		</div>
+	`
+});

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

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FDivider from './FDivider.vue';
+
+describe('FDivider', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FDivider);
+		expect(wrapper.find('[role="separator"]').exists()).toBe(true);
+	});
+
+	it('renders horizontal by default', () => {
+		const wrapper = mount(FDivider);
+		expect(wrapper.attributes('aria-orientation')).toBe('horizontal');
+	});
+
+	it('renders vertical when specified', () => {
+		const wrapper = mount(FDivider, {
+			propsData: { orientation: 'vertical' }
+		});
+		expect(wrapper.attributes('aria-orientation')).toBe('vertical');
+	});
+
+	it('displays content in slot', () => {
+		const wrapper = mount(FDivider, {
+			slots: {
+				default: 'OR'
+			}
+		});
+		expect(wrapper.text()).toContain('OR');
+	});
+
+	it('renders full line when no content', () => {
+		const wrapper = mount(FDivider);
+		// Should have one full-width line element
+		const spans = wrapper.findAll('span');
+		expect(spans.length).toBe(1);
+	});
+
+	it('renders two line segments when content is present', () => {
+		const wrapper = mount(FDivider, {
+			slots: {
+				default: 'Text'
+			}
+		});
+		// Should have start line, text, and end line
+		const spans = wrapper.findAll('span');
+		expect(spans.length).toBe(3);
+	});
+
+	it('applies correct alignment classes', () => {
+		const alignments = ['left', 'center', 'right'] as const;
+		alignments.forEach((align) => {
+			const wrapper = mount(FDivider, {
+				propsData: { align },
+				slots: { default: 'Text' }
+			});
+			expect(wrapper.exists()).toBe(true);
+		});
+	});
+
+	it('applies margin classes based on margin prop', () => {
+		const margins = ['none', 'sm', 'md', 'lg'] as const;
+		margins.forEach((margin) => {
+			const wrapper = mount(FDivider, {
+				propsData: { margin }
+			});
+			expect(wrapper.exists()).toBe(true);
+		});
+	});
+
+	it('applies thickness classes', () => {
+		const thicknesses = ['thin', 'medium', 'thick'] as const;
+		thicknesses.forEach((thickness) => {
+			const wrapper = mount(FDivider, {
+				propsData: { thickness }
+			});
+			expect(wrapper.exists()).toBe(true);
+		});
+	});
+});

package/src/components/atoms/FDivider/FDivider.vue

@@ -0,0 +1,117 @@
+<template>
+	<div
+		role="separator"
+		:aria-orientation="orientation"
+		:class="containerClasses"
+	>
+		<template v-if="hasContent">
+			<span :class="lineClasses('start')"></span>
+			<span :class="textClasses">
+				<slot />
+			</span>
+			<span :class="lineClasses('end')"></span>
+		</template>
+		<span v-else :class="lineClasses('full')"></span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FDivider',
+	props: {
+		orientation: {
+			type: String,
+			default: 'horizontal',
+			validator: (v) => ['horizontal', 'vertical'].includes(v)
+		},
+		align: {
+			type: String,
+			default: 'center',
+			validator: (v) => ['left', 'center', 'right'].includes(v)
+		},
+		color: {
+			type: String,
+			default: 'gray-300'
+		},
+		textColor: {
+			type: String,
+			default: 'gray-500'
+		},
+		textSize: {
+			type: String,
+			default: 'sm'
+		},
+		margin: {
+			type: String,
+			default: 'md',
+			validator: (v) => ['none', 'sm', 'md', 'lg'].includes(v)
+		},
+		thickness: {
+			type: String,
+			default: 'thin',
+			validator: (v) => ['thin', 'medium', 'thick'].includes(v)
+		}
+	},
+	computed: {
+		hasContent() {
+			return !!this.$slots.default;
+		},
+		isVertical() {
+			return this.orientation === 'vertical';
+		},
+		containerClasses() {
+			const margins = {
+				none: '',
+				sm: this.isVertical ? 'mx-2' : 'my-2',
+				md: this.isVertical ? 'mx-4' : 'my-4',
+				lg: this.isVertical ? 'mx-6' : 'my-6'
+			};
+
+			return [
+				'flex items-center',
+				this.isVertical ? 'flex-col h-full' : 'flex-row w-full',
+				margins[this.margin]
+			];
+		},
+		baseLineClasses() {
+			const thicknessMap = {
+				thin: 'px',
+				medium: '0.5',
+				thick: '1'
+			};
+			const size = thicknessMap[this.thickness];
+
+			return [`bg-${this.color}`, this.isVertical ? `w-${size}` : `h-${size}`];
+		},
+		textClasses() {
+			return [
+				'font-sans',
+				`text-${this.textSize}`,
+				`text-${this.textColor}`,
+				this.isVertical ? 'py-2' : 'px-3'
+			];
+		}
+	},
+	methods: {
+		lineClasses(position) {
+			if (position === 'full') {
+				return [this.isVertical ? 'h-full' : 'w-full', ...this.baseLineClasses];
+			}
+
+			const offset = this.isVertical ? 'h-4' : 'w-4';
+			const grow = 'flex-1';
+			const fixed = `flex-none ${offset}`;
+
+			let sizing = grow;
+
+			if (this.align === 'left') {
+				sizing = position === 'start' ? fixed : grow;
+			} else if (this.align === 'right') {
+				sizing = position === 'start' ? grow : fixed;
+			}
+
+			return [sizing, ...this.baseLineClasses];
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,189 @@
+import FIcon from './FIcon.vue';
+
+export default {
+	title: 'Atoms/FIcon',
+	component: FIcon,
+	tags: ['autodocs'],
+	argTypes: {
+		name: {
+			control: 'text',
+			description: "Nom de l'icône"
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			description: "Taille de l'icône"
+		},
+		color: {
+			control: 'color',
+			description: "Couleur de l'icône"
+		},
+		decorative: {
+			control: 'boolean',
+			description: "Icône décorative (masquée aux lecteurs d'écran)"
+		},
+		label: {
+			control: 'text',
+			description: "Label pour l'accessibilité"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FIcon },
+	props: Object.keys(argTypes),
+	template: '<FIcon v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	name: 'check'
+};
+
+export const Sizes = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="star" size="xs" />
+			<FIcon name="star" size="sm" />
+			<FIcon name="star" size="md" />
+			<FIcon name="star" size="lg" />
+			<FIcon name="star" size="xl" />
+		</div>
+	`
+});
+
+export const Colors = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="heart" size="lg" color="#ef4444" />
+			<FIcon name="star" size="lg" color="#f59e0b" />
+			<FIcon name="check" size="lg" color="#22c55e" />
+			<FIcon name="info" size="lg" color="#3b82f6" />
+		</div>
+	`
+});
+
+export const NavigationIcons = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="chevron-up" size="md" />
+			<FIcon name="chevron-down" size="md" />
+			<FIcon name="chevron-left" size="md" />
+			<FIcon name="chevron-right" size="md" />
+			<FIcon name="arrow-up" size="md" />
+			<FIcon name="arrow-down" size="md" />
+			<FIcon name="arrow-left" size="md" />
+			<FIcon name="arrow-right" size="md" />
+		</div>
+	`
+});
+
+export const ActionIcons = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="check" size="md" />
+			<FIcon name="x" size="md" />
+			<FIcon name="plus" size="md" />
+			<FIcon name="minus" size="md" />
+			<FIcon name="search" size="md" />
+			<FIcon name="edit" size="md" />
+			<FIcon name="trash" size="md" />
+			<FIcon name="copy" size="md" />
+		</div>
+	`
+});
+
+export const StatusIcons = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="info" size="md" color="#3b82f6" />
+			<FIcon name="warning" size="md" color="#f59e0b" />
+			<FIcon name="error" size="md" color="#ef4444" />
+			<FIcon name="success" size="md" color="#22c55e" />
+			<FIcon name="question" size="md" color="#6b7280" />
+		</div>
+	`
+});
+
+export const CommonUIIcons = () => ({
+	components: { FIcon },
+	template: `
+		<div class="flex items-center gap-4">
+			<FIcon name="user" size="md" />
+			<FIcon name="home" size="md" />
+			<FIcon name="cog" size="md" />
+			<FIcon name="bell" size="md" />
+			<FIcon name="mail" size="md" />
+			<FIcon name="calendar" size="md" />
+			<FIcon name="clock" size="md" />
+			<FIcon name="folder" size="md" />
+			<FIcon name="document" size="md" />
+		</div>
+	`
+});
+
+export const AllIcons = () => ({
+	components: { FIcon },
+	template: `
+		<div class="grid grid-cols-8 gap-4">
+			<div v-for="icon in icons" :key="icon" class="flex flex-col items-center gap-2 p-2">
+				<FIcon :name="icon" size="md" />
+				<span class="text-xs text-neutral-500">{{ icon }}</span>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			icons: [
+				'chevron-up',
+				'chevron-down',
+				'chevron-left',
+				'chevron-right',
+				'arrow-up',
+				'arrow-down',
+				'arrow-left',
+				'arrow-right',
+				'check',
+				'x',
+				'plus',
+				'minus',
+				'search',
+				'menu',
+				'close',
+				'refresh',
+				'edit',
+				'trash',
+				'copy',
+				'info',
+				'warning',
+				'error',
+				'success',
+				'question',
+				'user',
+				'home',
+				'cog',
+				'bell',
+				'heart',
+				'star',
+				'eye',
+				'eye-off',
+				'lock',
+				'unlock',
+				'mail',
+				'calendar',
+				'clock',
+				'download',
+				'upload',
+				'link',
+				'external-link',
+				'folder',
+				'document'
+			]
+		};
+	}
+});

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

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FIcon from './FIcon.vue';
+
+describe('FIcon', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FIcon);
+		expect(wrapper.find('span').exists()).toBe(true);
+	});
+
+	it('renders SVG for known icon names', () => {
+		const wrapper = mount(FIcon, {
+			propsData: { name: 'check' }
+		});
+		expect(wrapper.find('svg').exists()).toBe(true);
+	});
+
+	it('renders placeholder for unknown icon names', () => {
+		const wrapper = mount(FIcon, {
+			propsData: { name: 'unknown-icon-xyz' }
+		});
+		expect(wrapper.find('svg').exists()).toBe(true);
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+		sizes.forEach((size) => {
+			const wrapper = mount(FIcon, {
+				propsData: { name: 'check', size }
+			});
+			expect(wrapper.exists()).toBe(true);
+		});
+	});
+
+	it('applies custom color', () => {
+		const wrapper = mount(FIcon, {
+			propsData: { name: 'check', color: 'red' }
+		});
+		const style = wrapper.attributes('style');
+		expect(style).toContain('color');
+	});
+
+	it('is decorative by default (aria-hidden)', () => {
+		const wrapper = mount(FIcon, {
+			propsData: { name: 'check' }
+		});
+		expect(wrapper.attributes('aria-hidden')).toBe('true');
+	});
+
+	it('shows aria-label when not decorative', () => {
+		const wrapper = mount(FIcon, {
+			propsData: { name: 'check', decorative: false, label: 'Checkmark' }
+		});
+		expect(wrapper.attributes('aria-label')).toBe('Checkmark');
+	});
+
+	it('renders slot content instead of default icon', () => {
+		const wrapper = mount(FIcon, {
+			slots: {
+				default: '<svg data-test="custom"></svg>'
+			}
+		});
+		expect(wrapper.find('[data-test="custom"]').exists()).toBe(true);
+	});
+
+	it('renders navigation icons correctly', () => {
+		const navIcons = [
+			'chevron-up',
+			'chevron-down',
+			'chevron-left',
+			'chevron-right'
+		];
+		navIcons.forEach((name) => {
+			const wrapper = mount(FIcon, {
+				propsData: { name }
+			});
+			expect(wrapper.find('svg').exists()).toBe(true);
+		});
+	});
+
+	it('renders action icons correctly', () => {
+		const actionIcons = [
+			'check',
+			'x',
+			'plus',
+			'minus',
+			'search',
+			'edit',
+			'trash'
+		];
+		actionIcons.forEach((name) => {
+			const wrapper = mount(FIcon, {
+				propsData: { name }
+			});
+			expect(wrapper.find('svg').exists()).toBe(true);
+		});
+	});
+});