@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,290 @@
+import FToastProvider from './FToastProvider.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+export default {
+	title: 'Organisms/FToastProvider',
+	component: FToastProvider,
+	tags: ['autodocs'],
+	argTypes: {
+		position: {
+			control: { type: 'select' },
+			options: [
+				'top-left',
+				'top-center',
+				'top-right',
+				'bottom-left',
+				'bottom-center',
+				'bottom-right'
+			],
+			description: 'Position par défaut des toasts'
+		},
+		maxToasts: {
+			control: 'number',
+			description: 'Nombre maximum de toasts affichés simultanément'
+		}
+	}
+};
+
+export const Default = () => ({
+	components: { FToastProvider, FButton },
+	template: `
+		<FToastProvider ref="provider">
+			<div class="p-8 space-y-4">
+				<h2 class="text-2xl font-bold mb-4">Système de Notifications Toast</h2>
+				<p class="mb-4">Cliquez sur les boutons ci-dessous pour afficher différents types de notifications.</p>
+				
+				<div class="flex flex-wrap gap-3">
+					<FButton variant="success" @click="showSuccess">
+						Toast Succès
+					</FButton>
+					<FButton variant="danger" @click="showError">
+						Toast Erreur
+					</FButton>
+					<FButton variant="primary" @click="showInfo">
+						Toast Info
+					</FButton>
+					<FButton variant="warning" @click="showWarning">
+						Toast Avertissement
+					</FButton>
+					<FButton variant="outline" @click="showCustom">
+						Toast Personnalisé
+					</FButton>
+					<FButton variant="ghost" @click="clearAll">
+						Tout Effacer
+					</FButton>
+				</div>
+			</div>
+		</FToastProvider>
+	`,
+	methods: {
+		showSuccess() {
+			this.$refs.provider.success('Votre action a été effectuée avec succès.');
+		},
+		showError() {
+			this.$refs.provider.error(
+				"Une erreur s'est produite. Veuillez réessayer."
+			);
+		},
+		showInfo() {
+			this.$refs.provider.info(
+				'Voici une information importante à prendre en compte.'
+			);
+		},
+		showWarning() {
+			this.$refs.provider.warning(
+				'Veuillez vérifier vos informations avant de continuer.'
+			);
+		},
+		showCustom() {
+			this.$refs.provider.show({
+				variant: 'info',
+				title: 'Notification Personnalisée',
+				message: 'Ce toast a une durée personnalisée de 10 secondes.',
+				duration: 10000,
+				closable: true
+			});
+		},
+		clearAll() {
+			this.$refs.provider.clear();
+		}
+	}
+});
+
+export const DifferentPositions = () => ({
+	components: { FToastProvider, FButton },
+	template: `
+		<FToastProvider ref="provider">
+			<div class="p-8 space-y-4">
+				<h2 class="text-2xl font-bold mb-4">Positions des Toasts</h2>
+				<p class="mb-4">Cliquez sur les boutons pour afficher des toasts à différentes positions.</p>
+				
+				<div class="grid grid-cols-3 gap-3">
+					<FButton variant="primary" @click="showTopLeft">
+						Haut Gauche
+					</FButton>
+					<FButton variant="primary" @click="showTopCenter">
+						Haut Centre
+					</FButton>
+					<FButton variant="primary" @click="showTopRight">
+						Haut Droite
+					</FButton>
+					<FButton variant="primary" @click="showBottomLeft">
+						Bas Gauche
+					</FButton>
+					<FButton variant="primary" @click="showBottomCenter">
+						Bas Centre
+					</FButton>
+					<FButton variant="primary" @click="showBottomRight">
+						Bas Droite
+					</FButton>
+				</div>
+			</div>
+		</FToastProvider>
+	`,
+	methods: {
+		showTopLeft() {
+			this.$refs.provider.show({
+				variant: 'info',
+				message: 'Toast en haut à gauche',
+				position: 'top-left'
+			});
+		},
+		showTopCenter() {
+			this.$refs.provider.show({
+				variant: 'info',
+				message: 'Toast en haut au centre',
+				position: 'top-center'
+			});
+		},
+		showTopRight() {
+			this.$refs.provider.show({
+				variant: 'info',
+				message: 'Toast en haut à droite',
+				position: 'top-right'
+			});
+		},
+		showBottomLeft() {
+			this.$refs.provider.show({
+				variant: 'success',
+				message: 'Toast en bas à gauche',
+				position: 'bottom-left'
+			});
+		},
+		showBottomCenter() {
+			this.$refs.provider.show({
+				variant: 'success',
+				message: 'Toast en bas au centre',
+				position: 'bottom-center'
+			});
+		},
+		showBottomRight() {
+			this.$refs.provider.show({
+				variant: 'success',
+				message: 'Toast en bas à droite',
+				position: 'bottom-right'
+			});
+		}
+	}
+});
+
+export const GlobalAPI = () => ({
+	components: { FToastProvider, FButton },
+	template: `
+		<FToastProvider>
+			<div class="p-8 space-y-4">
+				<h2 class="text-2xl font-bold mb-4">API Globale via $root.$toast</h2>
+				<p class="mb-4">Une fois le FToastProvider monté, vous pouvez accéder aux toasts via <code>this.$root.$toast</code>.</p>
+				
+				<div class="flex flex-wrap gap-3">
+					<FButton variant="success" @click="$root.$toast.success('Opération réussie!')">
+						$root.$toast.success()
+					</FButton>
+					<FButton variant="danger" @click="$root.$toast.error('Erreur détectée!')">
+						$root.$toast.error()
+					</FButton>
+					<FButton variant="primary" @click="$root.$toast.info('Nouvelle information')">
+						$root.$toast.info()
+					</FButton>
+					<FButton variant="warning" @click="$root.$toast.warning('Attention requise')">
+						$root.$toast.warning()
+					</FButton>
+				</div>
+				
+				<div class="mt-6 p-4 bg-neutral-100 rounded">
+					<h3 class="font-bold mb-2">Exemple d'utilisation dans vos composants:</h3>
+					<pre class="text-sm"><code>// Dans n'importe quel composant
+this.$root.$toast.success('Message de succès');
+this.$root.$toast.error('Message d\'erreur');
+this.$root.$toast.info('Message d\'information');
+this.$root.$toast.warning('Message d\'avertissement');
+
+// Avec options personnalisées
+this.$root.$toast.show({
+  variant: 'success',
+  title: 'Titre personnalisé',
+  message: 'Message personnalisé',
+  duration: 3000,
+  position: 'bottom-right'
+});</code></pre>
+				</div>
+			</div>
+		</FToastProvider>
+	`
+});
+
+export const MaxToastsLimit = () => ({
+	components: { FToastProvider, FButton },
+	data() {
+		return {
+			counter: 0
+		};
+	},
+	template: `
+		<FToastProvider ref="provider" :max-toasts="3">
+			<div class="p-8 space-y-4">
+				<h2 class="text-2xl font-bold mb-4">Limite de Toasts (max: 3)</h2>
+				<p class="mb-4">Le provider est configuré pour afficher un maximum de 3 toasts. Les anciens seront automatiquement supprimés.</p>
+				
+				<FButton variant="primary" @click="addToast">
+					Ajouter un Toast ({{ counter }})
+				</FButton>
+			</div>
+		</FToastProvider>
+	`,
+	methods: {
+		addToast() {
+			this.counter++;
+			this.$refs.provider.show({
+				variant: 'info',
+				title: `Toast #${this.counter}`,
+				message: `Ceci est le toast numéro ${this.counter}`,
+				duration: 0
+			});
+		}
+	}
+});
+
+export const PersistentToasts = () => ({
+	components: { FToastProvider, FButton },
+	template: `
+		<FToastProvider ref="provider">
+			<div class="p-8 space-y-4">
+				<h2 class="text-2xl font-bold mb-4">Toasts Persistants</h2>
+				<p class="mb-4">Ces toasts ne se ferment pas automatiquement (duration: 0).</p>
+				
+				<div class="flex flex-wrap gap-3">
+					<FButton variant="primary" @click="showPersistent">
+						Toast Persistant
+					</FButton>
+					<FButton variant="outline" @click="showNonClosable">
+						Toast Non Fermable
+					</FButton>
+					<FButton variant="ghost" @click="$refs.provider.clear()">
+						Tout Effacer
+					</FButton>
+				</div>
+			</div>
+		</FToastProvider>
+	`,
+	methods: {
+		showPersistent() {
+			this.$refs.provider.show({
+				variant: 'info',
+				title: 'Toast Persistant',
+				message:
+					'Ce toast ne se fermera pas automatiquement, mais vous pouvez le fermer manuellement.',
+				duration: 0
+			});
+		},
+		showNonClosable() {
+			this.$refs.provider.show({
+				variant: 'warning',
+				title: 'Toast Non Fermable',
+				message:
+					'Ce toast ne peut être fermé ni automatiquement ni manuellement.',
+				duration: 0,
+				closable: false
+			});
+		}
+	}
+});

package/src/components/organisms/FToastProvider/FToastProvider.test.ts

@@ -0,0 +1,215 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, createLocalVue } from '@vue/test-utils';
+import FToastProvider from './FToastProvider.vue';
+import FToast from '../../molecules/FToast/FToast.vue';
+
+const localVue = createLocalVue();
+localVue.component('FToast', FToast);
+
+describe('FToastProvider', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	it('renders correctly with default slot', () => {
+		const wrapper = mount(FToastProvider, {
+			localVue,
+			slots: { default: '<div>App Content</div>' }
+		});
+		expect(wrapper.text()).toContain('App Content');
+	});
+
+	it('shows toast when show method is called', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({
+			variant: 'success',
+			title: 'Test',
+			message: 'Test message'
+		});
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(1);
+	});
+
+	it('shows success toast using success method', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.success('Success message');
+
+		await wrapper.vm.$nextTick();
+		const toasts = wrapper.findAllComponents({ name: 'FToast' });
+		expect(toasts.length).toBe(1);
+	});
+
+	it('shows error toast using error method', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.error('Error message');
+
+		await wrapper.vm.$nextTick();
+		const toasts = wrapper.findAllComponents({ name: 'FToast' });
+		expect(toasts.length).toBe(1);
+	});
+
+	it('shows info toast using info method', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.info('Info message');
+
+		await wrapper.vm.$nextTick();
+		const toasts = wrapper.findAllComponents({ name: 'FToast' });
+		expect(toasts.length).toBe(1);
+	});
+
+	it('shows warning toast using warning method', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.warning('Warning message');
+
+		await wrapper.vm.$nextTick();
+		const toasts = wrapper.findAllComponents({ name: 'FToast' });
+		expect(toasts.length).toBe(1);
+	});
+
+	it('removes toast when removeToast is called', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		const id = vm.show({
+			variant: 'info',
+			message: 'Test'
+		});
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(1);
+
+		vm.removeToast(id);
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(0);
+	});
+
+	it('clears all toasts when clear is called', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Toast 1' });
+		vm.show({ message: 'Toast 2' });
+		vm.show({ message: 'Toast 3' });
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(3);
+
+		vm.clear();
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(0);
+	});
+
+	it('respects maxToasts limit', async () => {
+		const wrapper = mount(FToastProvider, {
+			localVue,
+			propsData: { maxToasts: 3 }
+		});
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Toast 1' });
+		vm.show({ message: 'Toast 2' });
+		vm.show({ message: 'Toast 3' });
+		vm.show({ message: 'Toast 4' });
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.findAllComponents({ name: 'FToast' }).length).toBe(3);
+	});
+
+	it('uses default position when not specified', async () => {
+		const wrapper = mount(FToastProvider, {
+			localVue,
+			propsData: { position: 'bottom-left' }
+		});
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Test' });
+
+		await wrapper.vm.$nextTick();
+		expect(vm.toasts[0].position).toBe('bottom-left');
+	});
+
+	it('uses custom position when specified', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({
+			message: 'Test',
+			position: 'top-center'
+		});
+
+		await wrapper.vm.$nextTick();
+		expect(vm.toasts[0].position).toBe('top-center');
+	});
+
+	it('emits show event when toast is shown', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Test' });
+
+		await wrapper.vm.$nextTick();
+		expect(wrapper.emitted('show')).toBeTruthy();
+	});
+
+	it('emits remove event when toast is removed', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		const id = vm.show({ message: 'Test' });
+		await wrapper.vm.$nextTick();
+
+		vm.removeToast(id);
+		await wrapper.vm.$nextTick();
+		expect(wrapper.emitted('remove')).toBeTruthy();
+	});
+
+	it('emits clear event when all toasts are cleared', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Test' });
+		await wrapper.vm.$nextTick();
+
+		vm.clear();
+		await wrapper.vm.$nextTick();
+		expect(wrapper.emitted('clear')).toBeTruthy();
+	});
+
+	it('groups toasts by position', async () => {
+		const wrapper = mount(FToastProvider, { localVue });
+		const vm = wrapper.vm;
+
+		vm.show({ message: 'Top Left', position: 'top-left' });
+		vm.show({ message: 'Top Right', position: 'top-right' });
+		vm.show({ message: 'Bottom Center', position: 'bottom-center' });
+
+		await wrapper.vm.$nextTick();
+
+		expect(vm.toastsByPosition['top-left'].length).toBe(1);
+		expect(vm.toastsByPosition['top-right'].length).toBe(1);
+		expect(vm.toastsByPosition['bottom-center'].length).toBe(1);
+	});
+
+	it('exposes global API on root instance', () => {
+		const wrapper = mount(FToastProvider, { localVue });
+
+		expect(wrapper.vm.$root.$toast).toBeDefined();
+		expect(typeof wrapper.vm.$root.$toast.show).toBe('function');
+		expect(typeof wrapper.vm.$root.$toast.success).toBe('function');
+		expect(typeof wrapper.vm.$root.$toast.error).toBe('function');
+		expect(typeof wrapper.vm.$root.$toast.info).toBe('function');
+		expect(typeof wrapper.vm.$root.$toast.warning).toBe('function');
+		expect(typeof wrapper.vm.$root.$toast.clear).toBe('function');
+	});
+});

package/src/components/organisms/FToastProvider/FToastProvider.vue

@@ -0,0 +1,214 @@
+<template>
+	<div>
+		<slot />
+		<div v-for="pos in positions" :key="pos" :class="containerClasses(pos)">
+			<f-toast
+				v-for="toast in toastsByPosition[pos]"
+				:key="toast.id"
+				:variant="toast.variant"
+				:title="toast.title"
+				:message="toast.message"
+				:closable="toast.closable"
+				:duration="toast.duration"
+				:position="pos"
+				@close="removeToast(toast.id)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import FToast from '../../molecules/FToast/FToast.vue';
+
+let toastId = 0;
+
+export default {
+	name: 'FToastProvider',
+	components: {
+		FToast
+	},
+	props: {
+		/**
+		 * Position par défaut des toasts
+		 */
+		position: {
+			type: String,
+			default: 'top-right',
+			validator: (value) =>
+				[
+					'top-left',
+					'top-center',
+					'top-right',
+					'bottom-left',
+					'bottom-center',
+					'bottom-right'
+				].includes(value)
+		},
+		/**
+		 * Nombre maximum de toasts affichés simultanément
+		 */
+		maxToasts: {
+			type: Number,
+			default: 5
+		}
+	},
+	data() {
+		return {
+			toasts: [],
+			positions: [
+				'top-left',
+				'top-center',
+				'top-right',
+				'bottom-left',
+				'bottom-center',
+				'bottom-right'
+			]
+		};
+	},
+	computed: {
+		toastsByPosition() {
+			return this.positions.reduce((acc, position) => {
+				acc[position] = this.toasts.filter(
+					(toast) => toast.position === position
+				);
+				return acc;
+			}, {});
+		}
+	},
+	created() {
+		// Expose API globally via $root for Vue 2 compatibility
+		// Note: In Vue 3, this should be replaced with provide/inject or a plugin
+		// This approach is acceptable for Vue 2 applications for convenience
+		if (this.$root && !this.$root.$toast) {
+			this.$root.$toast = {
+				show: this.show,
+				success: this.success,
+				error: this.error,
+				info: this.info,
+				warning: this.warning,
+				clear: this.clear
+			};
+		} else if (this.$root && this.$root.$toast) {
+			// Warn if another FToastProvider is already mounted
+			console.warn(
+				'FToastProvider: Multiple instances detected. Only one FToastProvider should be mounted at a time. The global API will use the first mounted instance.'
+			);
+		}
+	},
+	beforeDestroy() {
+		// Clean up global API
+		if (this.$root && this.$root.$toast) {
+			delete this.$root.$toast;
+		}
+	},
+	methods: {
+		containerClasses(position) {
+			const baseClasses =
+				'fixed z-50 flex flex-col gap-3 p-4 pointer-events-none';
+			const positionClasses = {
+				'top-left': 'top-0 left-0',
+				'top-center': 'top-0 left-1/2 -translate-x-1/2',
+				'top-right': 'top-0 right-0',
+				'bottom-left': 'bottom-0 left-0',
+				'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+				'bottom-right': 'bottom-0 right-0'
+			};
+
+			return `${baseClasses} ${positionClasses[position]}`;
+		},
+		/**
+		 * Affiche un toast avec des options personnalisées
+		 */
+		show(options) {
+			const toast = {
+				id: ++toastId,
+				variant: options.variant || 'info',
+				title: options.title || '',
+				message: options.message || '',
+				closable: options.closable !== undefined ? options.closable : true,
+				duration: options.duration !== undefined ? options.duration : 5000,
+				position: options.position || this.position
+			};
+
+			// Limit the number of toasts
+			if (this.toasts.length >= this.maxToasts) {
+				this.toasts.shift();
+			}
+
+			this.toasts.push(toast);
+			this.$emit('show', toast);
+
+			return toast.id;
+		},
+		/**
+		 * Affiche un toast de succès
+		 */
+		success(message, title = 'Succès', options = {}) {
+			return this.show({
+				variant: 'success',
+				title,
+				message,
+				...options
+			});
+		},
+		/**
+		 * Affiche un toast d'erreur
+		 */
+		error(message, title = 'Erreur', options = {}) {
+			return this.show({
+				variant: 'error',
+				title,
+				message,
+				...options
+			});
+		},
+		/**
+		 * Affiche un toast d'information
+		 */
+		info(message, title = 'Information', options = {}) {
+			return this.show({
+				variant: 'info',
+				title,
+				message,
+				...options
+			});
+		},
+		/**
+		 * Affiche un toast d'avertissement
+		 */
+		warning(message, title = 'Avertissement', options = {}) {
+			return this.show({
+				variant: 'warning',
+				title,
+				message,
+				...options
+			});
+		},
+		/**
+		 * Supprime un toast spécifique
+		 */
+		removeToast(id) {
+			const index = this.toasts.findIndex((t) => t.id === id);
+			if (index !== -1) {
+				const toast = this.toasts[index];
+				this.toasts.splice(index, 1);
+				this.$emit('remove', toast);
+			}
+		},
+		/**
+		 * Supprime tous les toasts
+		 */
+		clear() {
+			this.toasts = [];
+			this.$emit('clear');
+		}
+	}
+};
+</script>
+
+<style scoped>
+/* Ensure toasts are clickable */
+.fixed > * {
+	pointer-events: auto;
+}
+</style>