@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,132 @@
+import FPagination from './FPagination.vue';
+
+export default {
+	title: 'Molecules/FPagination',
+	component: FPagination,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: { type: 'number', min: 1 },
+			description: 'Page actuelle'
+		},
+		totalPages: {
+			control: { type: 'number', min: 1 },
+			description: 'Nombre total de pages'
+		},
+		maxVisiblePages: {
+			control: { type: 'number', min: 3 },
+			description: 'Nombre maximum de pages visibles'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large'],
+			description: 'Taille des boutons'
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['outline', 'ghost'],
+			description: 'Variante des boutons'
+		},
+		showLabels: {
+			control: 'boolean',
+			description: 'Afficher les labels précédent/suivant'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FPagination },
+	props: Object.keys(argTypes),
+	data() {
+		return { currentPage: args.value || 1 };
+	},
+	template: '<FPagination v-bind="$props" v-model="currentPage" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	totalPages: 10,
+	value: 1
+};
+
+export const MiddlePage = Template.bind({});
+MiddlePage.args = {
+	totalPages: 20,
+	value: 10
+};
+
+export const FewPages = Template.bind({});
+FewPages.args = {
+	totalPages: 3,
+	value: 1
+};
+
+export const ManyPages = Template.bind({});
+ManyPages.args = {
+	totalPages: 50,
+	value: 25
+};
+
+export const NoLabels = Template.bind({});
+NoLabels.args = {
+	totalPages: 10,
+	value: 5,
+	showLabels: false
+};
+
+export const Sizes = () => ({
+	components: { FPagination },
+	data() {
+		return { page1: 1, page2: 1, page3: 1 };
+	},
+	template: `
+		<div class="flex flex-col gap-6">
+			<div>
+				<p class="text-sm text-neutral-500 mb-2">Petit</p>
+				<FPagination v-model="page1" :totalPages="10" size="small" />
+			</div>
+			<div>
+				<p class="text-sm text-neutral-500 mb-2">Moyen</p>
+				<FPagination v-model="page2" :totalPages="10" size="medium" />
+			</div>
+			<div>
+				<p class="text-sm text-neutral-500 mb-2">Grand</p>
+				<FPagination v-model="page3" :totalPages="10" size="large" />
+			</div>
+		</div>
+	`
+});
+
+export const Variants = () => ({
+	components: { FPagination },
+	data() {
+		return { page1: 3, page2: 3 };
+	},
+	template: `
+		<div class="flex flex-col gap-6">
+			<div>
+				<p class="text-sm text-neutral-500 mb-2">Outline</p>
+				<FPagination v-model="page1" :totalPages="10" variant="outline" />
+			</div>
+			<div>
+				<p class="text-sm text-neutral-500 mb-2">Ghost</p>
+				<FPagination v-model="page2" :totalPages="10" variant="ghost" />
+			</div>
+		</div>
+	`
+});
+
+export const Interactive = () => ({
+	components: { FPagination },
+	data() {
+		return { currentPage: 1, totalPages: 20 };
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FPagination v-model="currentPage" :totalPages="totalPages" />
+			<p class="text-sm text-neutral-600">
+				Page {{ currentPage }} sur {{ totalPages }}
+			</p>
+		</div>
+	`
+});

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

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FPagination from './FPagination.vue';
+
+describe('FPagination', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10 }
+		});
+		expect(wrapper.find('nav').exists()).toBe(true);
+	});
+
+	it('shows correct number of page buttons', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 5, maxVisiblePages: 5 }
+		});
+		// Should show all 5 pages plus prev/next
+		const buttons = wrapper.findAllComponents({ name: 'FButton' });
+		expect(buttons.length).toBeGreaterThan(0);
+	});
+
+	it('highlights current page', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10, value: 5 }
+		});
+		expect(wrapper.find('[aria-current="page"]').exists()).toBe(true);
+	});
+
+	it('emits input event when page is clicked', async () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10, value: 1 }
+		});
+		// Find a page button (not prev/next) and click it
+		const pageButtons = wrapper.findAllComponents({ name: 'FButton' });
+		// Click on one of the middle buttons
+		await pageButtons[2].trigger('click');
+		expect(wrapper.emitted('input') || wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('disables previous button on first page', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10, value: 1 }
+		});
+		const prevButton = wrapper.findAllComponents({ name: 'FButton' })[0];
+		expect(prevButton.props('disabled')).toBe(true);
+	});
+
+	it('disables next button on last page', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10, value: 10 }
+		});
+		const buttons = wrapper.findAllComponents({ name: 'FButton' });
+		const nextButton = buttons[buttons.length - 1];
+		expect(nextButton.props('disabled')).toBe(true);
+	});
+
+	it('shows ellipsis for many pages', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 20, value: 10 }
+		});
+		expect(wrapper.text()).toContain('...');
+	});
+
+	it('emits change event when navigating', async () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10, value: 5 }
+		});
+		const nextButton = wrapper.findAllComponents({ name: 'FButton' }).at(-1);
+		await nextButton.trigger('click');
+		expect(wrapper.emitted('change')).toBeTruthy();
+	});
+
+	it('has correct aria-label', () => {
+		const wrapper = mount(FPagination, {
+			propsData: { totalPages: 10 }
+		});
+		expect(wrapper.find('nav').attributes('aria-label')).toBe('Pagination');
+	});
+});

package/src/components/molecules/FPagination/FPagination.vue

@@ -0,0 +1,206 @@
+<template>
+	<nav :class="containerClasses" role="navigation" aria-label="Pagination">
+		<f-button
+			:variant="buttonVariant"
+			:size="size"
+			:disabled="currentPage <= 1"
+			@click="goToPreviousPage"
+		>
+			<template #iconLeft>
+				<f-icon name="chevron-left" :size="iconSize" />
+			</template>
+			<span :class="{ 'sr-only': !showLabels }">{{ previousLabel }}</span>
+		</f-button>
+
+		<div class="flex items-center gap-1">
+			<template v-for="(page, index) in visiblePages">
+				<span
+					v-if="page === '...'"
+					:key="'ellipsis-' + index"
+					class="px-2 text-neutral-400"
+				>
+					...
+				</span>
+				<template v-else>
+					<span v-if="page === currentPage" :key="page" aria-current="page">
+						<f-button
+							:variant="activeVariant"
+							:size="size"
+							@click="goToPage(page)"
+						>
+							{{ page }}
+						</f-button>
+					</span>
+					<f-button
+						v-else
+						:key="page"
+						:variant="buttonVariant"
+						:size="size"
+						@click="goToPage(page)"
+					>
+						{{ page }}
+					</f-button>
+				</template>
+			</template>
+		</div>
+
+		<f-button
+			:variant="buttonVariant"
+			:size="size"
+			:disabled="currentPage >= totalPages"
+			@click="goToNextPage"
+		>
+			<span :class="{ 'sr-only': !showLabels }">{{ nextLabel }}</span>
+			<template #iconRight>
+				<f-icon name="chevron-right" :size="iconSize" />
+			</template>
+		</f-button>
+	</nav>
+</template>
+
+<script>
+import FButton from '../../atoms/FButton/FButton.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+
+export default {
+	name: 'FPagination',
+	components: {
+		FButton,
+		FIcon
+	},
+	props: {
+		value: {
+			type: Number,
+			default: 1
+		},
+		totalPages: {
+			type: Number,
+			required: true,
+			validator: (value) => value >= 1
+		},
+		maxVisiblePages: {
+			type: Number,
+			default: 5,
+			validator: (value) => value >= 3
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value) => ['small', 'medium', 'large'].includes(value)
+		},
+		variant: {
+			type: String,
+			default: 'outline',
+			validator: (value) => ['outline', 'ghost'].includes(value)
+		},
+		previousLabel: {
+			type: String,
+			default: 'Précédent'
+		},
+		nextLabel: {
+			type: String,
+			default: 'Suivant'
+		},
+		showLabels: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		currentPage() {
+			return this.value;
+		},
+		buttonVariant() {
+			return this.variant;
+		},
+		activeVariant() {
+			return 'primary';
+		},
+		iconSize() {
+			const sizeMap = {
+				small: 'sm',
+				medium: 'sm',
+				large: 'md'
+			};
+			return sizeMap[this.size];
+		},
+		containerClasses() {
+			return 'flex items-center gap-2';
+		},
+		visiblePages() {
+			const total = this.totalPages;
+			const current = this.currentPage;
+			const max = this.maxVisiblePages;
+
+			if (total <= max) {
+				return this.range(1, total);
+			}
+
+			const half = Math.floor((max - 1) / 2);
+			let start = current - half;
+			let end = current + (max - 1 - half);
+
+			if (start < 1) {
+				start = 1;
+				end = max;
+			}
+
+			if (end > total) {
+				end = total;
+				start = total - max + 1;
+			}
+
+			const pages = [];
+
+			if (start > 1) {
+				pages.push(1);
+				if (start > 2) {
+					pages.push('...');
+				}
+			}
+
+			for (let i = start; i <= end; i++) {
+				if (i >= 1 && i <= total) {
+					// Skip page 1 if already added in the first block
+					// (removed unreachable condition)
+					pages.push(i);
+				}
+			}
+
+			if (end < total) {
+				if (end < total - 1) {
+					pages.push('...');
+				}
+				pages.push(total);
+			}
+
+			return pages;
+		}
+	},
+	methods: {
+		range(start, end) {
+			const result = [];
+			for (let i = start; i <= end; i++) {
+				result.push(i);
+			}
+			return result;
+		},
+		goToPage(page) {
+			if (page !== this.currentPage && page >= 1 && page <= this.totalPages) {
+				this.$emit('input', page);
+				this.$emit('change', page);
+			}
+		},
+		goToPreviousPage() {
+			if (this.currentPage > 1) {
+				this.goToPage(this.currentPage - 1);
+			}
+		},
+		goToNextPage() {
+			if (this.currentPage < this.totalPages) {
+				this.goToPage(this.currentPage + 1);
+			}
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,129 @@
+import FSearchBar from './FSearchBar.vue';
+
+export default {
+	title: 'Molecules/FSearchBar',
+	component: FSearchBar,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'text',
+			description: 'Valeur de recherche'
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Placeholder'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large'],
+			description: 'Taille de la barre'
+		},
+		iconPosition: {
+			control: { type: 'select' },
+			options: ['inside', 'outside'],
+			description: "Position de l'icône"
+		},
+		buttonMode: {
+			control: 'boolean',
+			description: 'Afficher un bouton de recherche'
+		},
+		buttonLabel: {
+			control: 'text',
+			description: 'Libellé du bouton'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FSearchBar },
+	props: Object.keys(argTypes),
+	data() {
+		return { searchValue: args.value || '' };
+	},
+	template: '<FSearchBar v-bind="$props" v-model="searchValue" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	placeholder: 'Rechercher...'
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+	value: 'Terme de recherche'
+};
+
+export const IconOutside = Template.bind({});
+IconOutside.args = {
+	placeholder: 'Rechercher...',
+	iconPosition: 'outside'
+};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+	placeholder: 'Rechercher...',
+	buttonMode: true,
+	buttonLabel: 'Rechercher'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	placeholder: 'Recherche désactivée',
+	disabled: true
+};
+
+export const Sizes = () => ({
+	components: { FSearchBar },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FSearchBar size="small" placeholder="Petit" />
+			<FSearchBar size="medium" placeholder="Moyen" />
+			<FSearchBar size="large" placeholder="Grand" />
+		</div>
+	`
+});
+
+export const Interactive = () => ({
+	components: { FSearchBar },
+	data() {
+		return {
+			query: '',
+			results: []
+		};
+	},
+	methods: {
+		handleSearch(q) {
+			this.results = [
+				`Résultat 1 pour "${q}"`,
+				`Résultat 2 pour "${q}"`,
+				`Résultat 3 pour "${q}"`
+			];
+		}
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FSearchBar
+				v-model="query"
+				placeholder="Tapez et appuyez sur Entrée..."
+				@search="handleSearch"
+			/>
+			<div v-if="results.length" class="text-sm text-neutral-600">
+				<p v-for="result in results" :key="result">{{ result }}</p>
+			</div>
+		</div>
+	`
+});
+
+export const InHeader = () => ({
+	components: { FSearchBar },
+	template: `
+		<div class="bg-neutral-100 p-4 rounded-lg flex items-center justify-between gap-4">
+			<span class="font-semibold">Mon Application</span>
+			<FSearchBar placeholder="Rechercher..." size="small" class="w-64" />
+		</div>
+	`
+});

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

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FSearchBar from './FSearchBar.vue';
+
+describe('FSearchBar', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FSearchBar);
+		expect(wrapper.find('input').exists()).toBe(true);
+	});
+
+	it('displays placeholder', () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { placeholder: 'Search...' }
+		});
+		expect(wrapper.find('input').attributes('placeholder')).toBe('Search...');
+	});
+
+	it('displays value', () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { value: 'test query' }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).value).toBe(
+			'test query'
+		);
+	});
+
+	it('emits input event when typing', async () => {
+		const wrapper = mount(FSearchBar);
+		await wrapper.find('input').setValue('new query');
+		expect(wrapper.emitted('input')).toBeTruthy();
+	});
+
+	it('emits search event on enter', async () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { value: 'query' }
+		});
+		await wrapper.find('input').trigger('keydown.enter');
+		expect(wrapper.emitted('search')).toBeTruthy();
+	});
+
+	it('shows inside icon by default', () => {
+		const wrapper = mount(FSearchBar);
+		expect(wrapper.findComponent({ name: 'FIcon' }).exists()).toBe(true);
+	});
+
+	it('shows button when buttonMode is true', () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { buttonMode: true }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('shows custom button label', () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { buttonMode: true, buttonLabel: 'Find' }
+		});
+		expect(wrapper.text()).toContain('Find');
+	});
+
+	it('applies disabled state', () => {
+		const wrapper = mount(FSearchBar, {
+			propsData: { disabled: true }
+		});
+		expect(wrapper.find('input').attributes('disabled')).toBeDefined();
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['small', 'medium', 'large'] as const;
+		sizes.forEach((size) => {
+			const wrapper = mount(FSearchBar, {
+				propsData: { size }
+			});
+			expect(wrapper.find('input').exists()).toBe(true);
+		});
+	});
+
+	it('has focus method', () => {
+		const wrapper = mount(FSearchBar);
+		expect(typeof wrapper.vm.focus).toBe('function');
+	});
+});