@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount, createLocalVue } from '@vue/test-utils';
+import FToast from './FToast.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+const localVue = createLocalVue();
+localVue.component('FIcon', FIcon);
+localVue.component('FTypography', FTypography);
+localVue.component('FButton', FButton);
+
+describe('FToast', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FToast, { localVue });
+		expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+	});
+
+	it('displays title when provided', () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { title: 'Toast Title' }
+		});
+		expect(wrapper.text()).toContain('Toast Title');
+	});
+
+	it('displays message when provided', () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { message: 'Toast message content' }
+		});
+		expect(wrapper.text()).toContain('Toast message content');
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = ['success', 'error', 'info', 'warning'] as const;
+		variants.forEach((variant) => {
+			const wrapper = mount(FToast, {
+				localVue,
+				propsData: { variant }
+			});
+			expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+		});
+	});
+
+	it('shows close button by default', () => {
+		const wrapper = mount(FToast, { localVue });
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('hides close button when closable is false', () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { closable: false }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(false);
+	});
+
+	it('emits close event when close button is clicked', async () => {
+		const wrapper = mount(FToast, { localVue });
+		await wrapper.findComponent({ name: 'FButton' }).trigger('click');
+		expect(wrapper.emitted('close')).toBeTruthy();
+	});
+
+	it('displays slot content', () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			slots: { default: '<p>Custom content</p>' }
+		});
+		expect(wrapper.html()).toContain('Custom content');
+	});
+
+	it('auto-closes after duration', async () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { duration: 3000 }
+		});
+
+		expect(wrapper.emitted('close')).toBeFalsy();
+
+		vi.advanceTimersByTime(3000);
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.emitted('close')).toBeTruthy();
+	});
+
+	it('does not auto-close when duration is 0', async () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { duration: 0 }
+		});
+
+		vi.advanceTimersByTime(10000);
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.emitted('close')).toBeFalsy();
+	});
+
+	it('has pause and resume timer methods', () => {
+		const wrapper = mount(FToast, {
+			localVue,
+			propsData: { duration: 3000 }
+		});
+
+		// Verify the methods exist
+		expect(typeof wrapper.vm.pauseTimer).toBe('function');
+		expect(typeof wrapper.vm.resumeTimer).toBe('function');
+
+		// Call the methods to ensure they don't throw
+		wrapper.vm.pauseTimer();
+		wrapper.vm.resumeTimer();
+	});
+
+	it('uses correct icon for each variant', () => {
+		const variants = {
+			success: 'success',
+			error: 'error',
+			info: 'info',
+			warning: 'warning'
+		} as const;
+
+		Object.entries(variants).forEach(([variant, expectedIcon]) => {
+			const wrapper = mount(FToast, {
+				localVue,
+				propsData: { variant }
+			});
+			expect(wrapper.vm.iconName).toBe(expectedIcon);
+		});
+	});
+
+	it('applies correct transition based on position', () => {
+		const positions = [
+			{ position: 'top-left', transition: 'toast-slide-left' },
+			{ position: 'top-right', transition: 'toast-slide-right' },
+			{ position: 'top-center', transition: 'toast-slide-down' },
+			{ position: 'bottom-left', transition: 'toast-slide-left' },
+			{ position: 'bottom-right', transition: 'toast-slide-right' },
+			{ position: 'bottom-center', transition: 'toast-slide-down' }
+		] as const;
+
+		positions.forEach(({ position, transition }) => {
+			const wrapper = mount(FToast, {
+				localVue,
+				propsData: { position }
+			});
+			expect(wrapper.vm.transitionName).toBe(transition);
+		});
+	});
+});

package/src/components/molecules/FToast/FToast.vue

@@ -0,0 +1,283 @@
+<template>
+	<transition
+		:name="transitionName"
+		@before-enter="onBeforeEnter"
+		@enter="onEnter"
+		@leave="onLeave"
+	>
+		<div
+			v-if="isVisible"
+			:class="toastClasses"
+			role="alert"
+			aria-live="polite"
+			@mouseenter="pauseTimer"
+			@mouseleave="resumeTimer"
+		>
+			<f-icon :name="iconName" 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 la notification</span>
+			</f-button>
+		</div>
+	</transition>
+</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_STYLES = {
+	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',
+		icon: 'success'
+	},
+	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',
+		icon: 'error'
+	},
+	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',
+		icon: 'info'
+	},
+	warning: {
+		container: 'bg-warning-50 border-warning-200 text-warning-800',
+		title: 'text-warning-800',
+		message: 'text-warning-700',
+		closeButton: 'text-warning-600 hover:text-warning-800',
+		icon: 'warning'
+	}
+};
+
+export default {
+	name: 'FToast',
+	components: {
+		FIcon,
+		FTypography,
+		FButton
+	},
+	props: {
+		/**
+		 * Type de toast (success, error, info, warning)
+		 */
+		variant: {
+			type: String,
+			default: 'info',
+			validator: (value) =>
+				['success', 'error', 'info', 'warning'].includes(value)
+		},
+		/**
+		 * Titre du toast
+		 */
+		title: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Message du toast
+		 */
+		message: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Afficher le bouton de fermeture
+		 */
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Durée d'affichage en millisecondes (0 = pas de fermeture automatique)
+		 */
+		duration: {
+			type: Number,
+			default: 5000
+		},
+		/**
+		 * Position du toast (utilisé pour l'animation)
+		 */
+		position: {
+			type: String,
+			default: 'top-right',
+			validator: (value) =>
+				[
+					'top-left',
+					'top-center',
+					'top-right',
+					'bottom-left',
+					'bottom-center',
+					'bottom-right'
+				].includes(value)
+		}
+	},
+	data() {
+		return {
+			isVisible: true,
+			timer: null,
+			remainingTime: this.duration,
+			startTime: null,
+			pausedAt: null
+		};
+	},
+	computed: {
+		variantStyles() {
+			return VARIANT_STYLES[this.variant];
+		},
+		toastClasses() {
+			const baseClasses =
+				'flex items-start gap-3 p-4 rounded-lg border shadow-lg min-w-[320px] max-w-md';
+			return `${baseClasses} ${this.variantStyles.container}`;
+		},
+		titleClasses() {
+			return this.variantStyles.title;
+		},
+		messageClasses() {
+			return this.variantStyles.message;
+		},
+		closeButtonClasses() {
+			return `flex-shrink-0 ${this.variantStyles.closeButton}`;
+		},
+		iconName() {
+			return this.variantStyles.icon;
+		},
+		transitionName() {
+			if (this.position.includes('left')) {
+				return 'toast-slide-left';
+			} else if (this.position.includes('right')) {
+				return 'toast-slide-right';
+			}
+			return 'toast-slide-down';
+		}
+	},
+	mounted() {
+		if (this.duration > 0) {
+			this.startTimer();
+		}
+	},
+	beforeDestroy() {
+		this.clearTimer();
+	},
+	methods: {
+		startTimer() {
+			this.clearTimer();
+			this.startTime = Date.now();
+			this.timer = setTimeout(() => {
+				this.handleClose();
+			}, this.remainingTime);
+		},
+		clearTimer() {
+			if (this.timer) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
+		},
+		pauseTimer() {
+			if (this.timer && this.duration > 0 && this.startTime) {
+				const elapsed = Date.now() - this.startTime;
+				this.remainingTime = Math.max(0, this.remainingTime - elapsed);
+				this.clearTimer();
+				this.pausedAt = Date.now();
+			}
+		},
+		resumeTimer() {
+			if (this.pausedAt && this.duration > 0 && this.remainingTime > 0) {
+				this.pausedAt = null;
+				this.startTimer();
+			} else if (this.pausedAt && this.remainingTime <= 0) {
+				this.handleClose();
+			}
+		},
+		handleClose() {
+			this.isVisible = false;
+			this.$emit('close');
+		},
+		onBeforeEnter(el) {
+			el.style.opacity = '0';
+		},
+		onEnter(el, done) {
+			// Force reflow
+			void el.offsetHeight;
+			el.style.transition = 'all 0.3s ease-out';
+			el.style.opacity = '1';
+			done();
+		},
+		onLeave(el, done) {
+			el.style.transition = 'all 0.3s ease-in';
+			el.style.opacity = '0';
+			setTimeout(done, 300);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.toast-slide-left-enter-active,
+.toast-slide-left-leave-active {
+	transition: all 0.3s ease-out;
+}
+
+.toast-slide-left-enter {
+	transform: translateX(-100%);
+	opacity: 0;
+}
+
+.toast-slide-left-leave-to {
+	transform: translateX(-100%);
+	opacity: 0;
+}
+
+.toast-slide-right-enter-active,
+.toast-slide-right-leave-active {
+	transition: all 0.3s ease-out;
+}
+
+.toast-slide-right-enter {
+	transform: translateX(100%);
+	opacity: 0;
+}
+
+.toast-slide-right-leave-to {
+	transform: translateX(100%);
+	opacity: 0;
+}
+
+.toast-slide-down-enter-active,
+.toast-slide-down-leave-active {
+	transition: all 0.3s ease-out;
+}
+
+.toast-slide-down-enter {
+	transform: translateY(-100%);
+	opacity: 0;
+}
+
+.toast-slide-down-leave-to {
+	transform: translateY(-100%);
+	opacity: 0;
+}
+</style>

package/src/components/molecules/index.ts

@@ -0,0 +1,37 @@
+import FAccordionItem from './FAccordionItem/FAccordionItem.vue';
+import FAlert from './FAlert/FAlert.vue';
+import FBreadcrumb from './FBreadcrumb/FBreadcrumb.vue';
+import FButtonGroup from './FButtonGroup/FButtonGroup.vue';
+import FDatePicker from './FDatePicker/FDatePicker.vue';
+import FEmptyState from './FEmptyState/FEmptyState.vue';
+import FFilePreview from './FFilePreview/FFilePreview.vue';
+import FFormField from './FFormField/FFormField.vue';
+import FCard from './FCard/FCard.vue';
+import FSearchBar from './FSearchBar/FSearchBar.vue';
+import FListItem from './FListItem/FListItem.vue';
+import FPagination from './FPagination/FPagination.vue';
+import FStatCard from './FStatCard/FStatCard.vue';
+import FSelect from './FSelect/FSelect.vue';
+import FTabs from './FTabs/FTabs.vue';
+import FTab from './FTabs/FTab.vue';
+import FToast from './FToast/FToast.vue';
+
+export {
+	FAccordionItem,
+	FAlert,
+	FBreadcrumb,
+	FButtonGroup,
+	FDatePicker,
+	FEmptyState,
+	FFilePreview,
+	FFormField,
+	FCard,
+	FSearchBar,
+	FListItem,
+	FPagination,
+	FStatCard,
+	FSelect,
+	FTabs,
+	FTab,
+	FToast
+};

package/src/components/organisms/FActivityFeed/FActivityFeed.stories.js

@@ -0,0 +1,217 @@
+import FActivityFeed from './FActivityFeed.vue';
+
+export default {
+	title: 'Organisms/FActivityFeed',
+	component: FActivityFeed,
+	tags: ['autodocs'],
+	argTypes: {
+		events: {
+			control: 'object',
+			description: 'Liste des événements'
+		},
+		loading: {
+			control: 'boolean',
+			description: 'État de chargement'
+		},
+		loadingNew: {
+			control: 'boolean',
+			description: 'Chargement de nouveaux événements'
+		},
+		hasMore: {
+			control: 'boolean',
+			description: "Plus d'événements disponibles"
+		},
+		clickable: {
+			control: 'boolean',
+			description: 'Événements cliquables'
+		},
+		showTimeline: {
+			control: 'boolean',
+			description: 'Afficher la timeline'
+		},
+		truncateContent: {
+			control: 'boolean',
+			description: 'Tronquer le contenu'
+		}
+	}
+};
+
+const sampleEvents = [
+	{
+		id: 1,
+		type: 'create',
+		title: 'Nouveau projet créé',
+		description: 'Le projet "Application Mobile" a été créé.',
+		actor: 'Jean Dupont',
+		timestamp: new Date(Date.now() - 1000 * 60 * 5).toISOString()
+	},
+	{
+		id: 2,
+		type: 'comment',
+		title: 'Nouveau commentaire',
+		description: 'Un commentaire a été ajouté sur la tâche #42.',
+		actor: 'Marie Martin',
+		timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString()
+	},
+	{
+		id: 3,
+		type: 'update',
+		title: 'Document mis à jour',
+		description: 'Le fichier "Spécifications.pdf" a été modifié.',
+		actor: 'Pierre Durand',
+		timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString()
+	},
+	{
+		id: 4,
+		type: 'status',
+		title: 'Statut changé',
+		description: 'La tâche "Design homepage" est passée à "En cours".',
+		actor: 'Sophie Petit',
+		timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString()
+	},
+	{
+		id: 5,
+		type: 'delete',
+		title: 'Élément supprimé',
+		description: 'Le fichier temporaire a été supprimé.',
+		actor: 'Admin',
+		timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString()
+	}
+];
+
+const Template = (args, { argTypes }) => ({
+	components: { FActivityFeed },
+	props: Object.keys(argTypes),
+	template: '<FActivityFeed v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	events: sampleEvents
+};
+
+export const WithTimeline = Template.bind({});
+WithTimeline.args = {
+	events: sampleEvents,
+	showTimeline: true
+};
+
+export const Clickable = Template.bind({});
+Clickable.args = {
+	events: sampleEvents,
+	clickable: true
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+	events: sampleEvents,
+	loading: true
+};
+
+export const LoadingNew = Template.bind({});
+LoadingNew.args = {
+	events: sampleEvents,
+	loadingNew: true
+};
+
+export const WithLoadMore = Template.bind({});
+WithLoadMore.args = {
+	events: sampleEvents,
+	hasMore: true
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+	events: []
+};
+
+export const CustomEmptyState = Template.bind({});
+CustomEmptyState.args = {
+	events: [],
+	emptyTitle: 'Aucune activité récente',
+	emptyDescription: "Il n'y a eu aucune activité dans les dernières 24 heures.",
+	emptyActionLabel: 'Rafraîchir'
+};
+
+export const Interactive = () => ({
+	components: { FActivityFeed },
+	data() {
+		return {
+			events: sampleEvents,
+			loading: false
+		};
+	},
+	methods: {
+		handleEventClick(event) {
+			alert(`Événement cliqué: ${event.title}`);
+		},
+		handleLoadMore() {
+			this.loading = true;
+			setTimeout(() => {
+				this.events = [
+					...this.events,
+					{
+						id: Date.now(),
+						type: 'create',
+						title: 'Nouvel événement chargé',
+						description: "Cet événement vient d'être chargé.",
+						actor: 'Système',
+						timestamp: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString()
+					}
+				];
+				this.loading = false;
+			}, 1000);
+		}
+	},
+	template: `
+		<FActivityFeed
+			:events="events"
+			:loading="loading"
+			:hasMore="true"
+			clickable
+			showTimeline
+			@event-click="handleEventClick"
+			@load-more="handleLoadMore"
+		/>
+	`
+});
+
+export const VirtualizedLargeDataset = () => ({
+	components: { FActivityFeed },
+	data() {
+		return {
+			events: Array.from({ length: 5000 }, (_, i) => ({
+				id: i + 1,
+				type: ['create', 'comment', 'update', 'status', 'delete'][i % 5],
+				title: `Événement ${i + 1}`,
+				description: `Description de l'événement numéro ${
+					i + 1
+				}. Ceci est un événement de test généré automatiquement.`,
+				actor: `Utilisateur ${(i % 10) + 1}`,
+				timestamp: new Date(Date.now() - i * 60 * 1000).toISOString()
+			}))
+		};
+	},
+	template: `
+		<div>
+			<p class="text-sm text-neutral-600 mb-4">
+				Ce fil d'activité utilise la virtualisation pour afficher 5 000 événements de manière fluide.
+				Seuls les éléments visibles sont rendus dans le DOM, ce qui améliore drastiquement les performances.
+			</p>
+			<FActivityFeed
+				:events="events"
+				virtual
+				showTimeline
+				clickable
+			/>
+		</div>
+	`
+});
+VirtualizedLargeDataset.parameters = {
+	docs: {
+		description: {
+			story:
+				"La virtualisation permet d'afficher des milliers d'événements sans ralentissement. Le fil d'activité ne rend que les événements visibles à l'écran, ce qui réduit la charge du DOM et améliore les performances de défilement."
+		}
+	}
+};