@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,98 @@
+import FEmptyState from './FEmptyState.vue';
+
+export default {
+	title: 'Molecules/FEmptyState',
+	component: FEmptyState,
+	tags: ['autodocs'],
+	argTypes: {
+		icon: {
+			control: 'text',
+			description: 'Icône à afficher'
+		},
+		title: {
+			control: 'text',
+			description: 'Titre principal'
+		},
+		description: {
+			control: 'text',
+			description: 'Description détaillée'
+		},
+		actionLabel: {
+			control: 'text',
+			description: "Libellé du bouton d'action"
+		},
+		actionVariant: {
+			control: { type: 'select' },
+			options: ['primary', 'secondary', 'outline', 'ghost', 'link'],
+			description: "Variante du bouton d'action"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FEmptyState },
+	props: Object.keys(argTypes),
+	template: '<FEmptyState v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: 'Aucune donnée',
+	description: "Il n'y a aucun élément à afficher pour le moment."
+};
+
+export const WithAction = Template.bind({});
+WithAction.args = {
+	title: 'Aucun projet',
+	description: "Vous n'avez pas encore créé de projet.",
+	actionLabel: 'Créer un projet',
+	actionVariant: 'primary'
+};
+
+export const NoResults = Template.bind({});
+NoResults.args = {
+	icon: 'search',
+	title: 'Aucun résultat',
+	description: 'Aucun élément ne correspond à votre recherche.',
+	actionLabel: 'Effacer les filtres'
+};
+
+export const NoDocuments = Template.bind({});
+NoDocuments.args = {
+	icon: 'document',
+	title: 'Aucun document',
+	description: 'Téléversez un document pour commencer.',
+	actionLabel: 'Téléverser un fichier'
+};
+
+export const NoNotifications = Template.bind({});
+NoNotifications.args = {
+	icon: 'bell',
+	title: 'Pas de notifications',
+	description: 'Vous êtes à jour ! Aucune nouvelle notification.'
+};
+
+export const WithSlot = () => ({
+	components: { FEmptyState },
+	template: `
+		<FEmptyState icon="folder" title="Dossier vide">
+			<p class="text-sm text-neutral-500 mt-2">
+				Faites glisser des fichiers ici ou <a href="#" class="text-primary-600 underline">parcourez</a> votre ordinateur.
+			</p>
+		</FEmptyState>
+	`
+});
+
+export const AllIcons = () => ({
+	components: { FEmptyState },
+	template: `
+		<div class="grid grid-cols-3 gap-8">
+			<FEmptyState icon="folder" title="Dossier vide" />
+			<FEmptyState icon="mail" title="Pas de messages" />
+			<FEmptyState icon="user" title="Aucun utilisateur" />
+			<FEmptyState icon="calendar" title="Aucun événement" />
+			<FEmptyState icon="bell" title="Pas de notifications" />
+			<FEmptyState icon="heart" title="Aucun favori" />
+		</div>
+	`
+});

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

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FEmptyState from './FEmptyState.vue';
+
+describe('FEmptyState', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'No data' }
+		});
+		expect(wrapper.text()).toContain('No data');
+	});
+
+	it('displays title', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Empty State Title' }
+		});
+		expect(wrapper.text()).toContain('Empty State Title');
+	});
+
+	it('displays description when provided', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title', description: 'Description text' }
+		});
+		expect(wrapper.text()).toContain('Description text');
+	});
+
+	it('displays custom icon', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title', icon: 'search' }
+		});
+		expect(wrapper.findComponent({ name: 'FIcon' }).exists()).toBe(true);
+	});
+
+	it('shows action button when actionLabel is provided', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title', actionLabel: 'Create New' }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+		expect(wrapper.text()).toContain('Create New');
+	});
+
+	it('hides action button when actionLabel is empty', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title' }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(false);
+	});
+
+	it('emits action event when button is clicked', async () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title', actionLabel: 'Click me' }
+		});
+		await wrapper.findComponent({ name: 'FButton' }).trigger('click');
+		expect(wrapper.emitted('action')).toBeTruthy();
+	});
+
+	it('applies correct action variant', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: {
+				title: 'Title',
+				actionLabel: 'Action',
+				actionVariant: 'secondary'
+			}
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title' },
+			slots: { default: '<p>Custom content</p>' }
+		});
+		expect(wrapper.html()).toContain('Custom content');
+	});
+
+	it('has correct role for accessibility', () => {
+		const wrapper = mount(FEmptyState, {
+			propsData: { title: 'Title' }
+		});
+		expect(wrapper.find('[role="status"]').exists()).toBe(true);
+	});
+});

package/src/components/molecules/FEmptyState/FEmptyState.vue

@@ -0,0 +1,89 @@
+<template>
+	<div :class="containerClasses" role="status" aria-live="polite">
+		<f-icon :name="icon" size="xl" :decorative="true" :class="iconClasses" />
+		<f-typography variant="h5" :class="titleClasses">
+			{{ title }}
+		</f-typography>
+		<f-typography v-if="description" variant="body" :class="descriptionClasses">
+			{{ description }}
+		</f-typography>
+		<slot />
+		<f-button
+			v-if="actionLabel"
+			:variant="actionVariant"
+			:class="actionClasses"
+			@click="handleAction"
+		>
+			{{ actionLabel }}
+		</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';
+
+export default {
+	name: 'FEmptyState',
+	components: {
+		FIcon,
+		FTypography,
+		FButton
+	},
+	props: {
+		icon: {
+			type: String,
+			default: 'folder'
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		description: {
+			type: String,
+			default: ''
+		},
+		actionLabel: {
+			type: String,
+			default: ''
+		},
+		actionVariant: {
+			type: String,
+			default: 'primary',
+			validator: (value) =>
+				[
+					'primary',
+					'secondary',
+					'danger',
+					'success',
+					'outline',
+					'ghost',
+					'link'
+				].includes(value)
+		}
+	},
+	computed: {
+		containerClasses() {
+			return 'flex flex-col items-center justify-center text-center py-12 px-4';
+		},
+		iconClasses() {
+			return 'text-neutral-400 mb-4';
+		},
+		titleClasses() {
+			return 'text-neutral-700 mb-2';
+		},
+		descriptionClasses() {
+			return 'text-neutral-500 max-w-md mb-6';
+		},
+		actionClasses() {
+			return 'mt-4';
+		}
+	},
+	methods: {
+		handleAction(event) {
+			this.$emit('action', event);
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,130 @@
+import FFilePreview from './FFilePreview.vue';
+
+export default {
+	title: 'Molecules/FFilePreview',
+	component: FFilePreview,
+	tags: ['autodocs'],
+	argTypes: {
+		fileName: {
+			control: 'text',
+			description: 'Nom du fichier'
+		},
+		fileType: {
+			control: 'text',
+			description: 'Type de fichier (extension)'
+		},
+		loading: {
+			control: 'boolean',
+			description: 'État de chargement'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		loadingLabel: {
+			control: 'text',
+			description: 'Label de chargement'
+		},
+		removeLabel: {
+			control: 'text',
+			description: 'Label du bouton supprimer'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FFilePreview },
+	props: Object.keys(argTypes),
+	template: '<FFilePreview v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	fileName: 'document.pdf'
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+	fileName: 'rapport-2024.pdf',
+	loading: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	fileName: 'fichier-verrouillé.docx',
+	disabled: true
+};
+
+export const DifferentFileTypes = () => ({
+	components: { FFilePreview },
+	template: `
+		<div class="flex flex-col gap-2">
+			<FFilePreview fileName="document.pdf" />
+			<FFilePreview fileName="image.png" />
+			<FFilePreview fileName="presentation.pptx" />
+			<FFilePreview fileName="spreadsheet.xlsx" />
+			<FFilePreview fileName="archive.zip" />
+			<FFilePreview fileName="texte.txt" />
+		</div>
+	`
+});
+
+export const LongFileName = Template.bind({});
+LongFileName.args = {
+	fileName:
+		'un-nom-de-fichier-tres-long-qui-devrait-etre-tronque-dans-linterface.pdf'
+};
+
+export const Interactive = () => ({
+	components: { FFilePreview },
+	data() {
+		return {
+			files: [
+				{ id: 1, name: 'rapport-q1.pdf' },
+				{ id: 2, name: 'presentation.pptx' },
+				{ id: 3, name: 'donnees.xlsx' }
+			]
+		};
+	},
+	methods: {
+		removeFile(id) {
+			this.files = this.files.filter((f) => f.id !== id);
+		}
+	},
+	template: `
+		<div class="flex flex-col gap-2">
+			<FFilePreview
+				v-for="file in files"
+				:key="file.id"
+				:fileName="file.name"
+				@remove="removeFile(file.id)"
+			/>
+			<p v-if="files.length === 0" class="text-neutral-500 text-sm">
+				Aucun fichier restant
+			</p>
+		</div>
+	`
+});
+
+export const WithUploadProgress = () => ({
+	components: { FFilePreview },
+	data() {
+		return {
+			files: [
+				{ id: 1, name: 'image.jpg', loading: false },
+				{ id: 2, name: 'video.mp4', loading: true },
+				{ id: 3, name: 'document.pdf', loading: false }
+			]
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-2">
+			<FFilePreview
+				v-for="file in files"
+				:key="file.id"
+				:fileName="file.name"
+				:loading="file.loading"
+			/>
+		</div>
+	`
+});

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

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FFilePreview from './FFilePreview.vue';
+
+describe('FFilePreview', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'document.pdf' }
+		});
+		expect(wrapper.text()).toContain('document.pdf');
+	});
+
+	it('displays file name', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'test-file.docx' }
+		});
+		expect(wrapper.text()).toContain('test-file.docx');
+	});
+
+	it('shows loader when loading', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file.pdf', loading: true }
+		});
+		expect(wrapper.findComponent({ name: 'FLoader' }).exists()).toBe(true);
+	});
+
+	it('shows remove button when not loading', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file.pdf', loading: false }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('emits remove event when remove button is clicked', async () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file.pdf' }
+		});
+		await wrapper.findComponent({ name: 'FButton' }).trigger('click');
+		expect(wrapper.emitted('remove')).toBeTruthy();
+	});
+
+	it('does not emit remove when disabled', async () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file.pdf', disabled: true }
+		});
+		// Button is disabled so we can just verify the disabled state
+		expect(wrapper.html()).toContain('disabled');
+	});
+
+	it('detects file extension from fileName', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'image.png' }
+		});
+		expect(wrapper.findComponent({ name: 'FIcon' }).exists()).toBe(true);
+	});
+
+	it('uses fileType prop when provided', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file', fileType: 'pdf' }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('applies disabled styles', () => {
+		const wrapper = mount(FFilePreview, {
+			propsData: { fileName: 'file.pdf', disabled: true }
+		});
+		expect(wrapper.classes().join(' ')).toContain('opacity-50');
+	});
+});

package/src/components/molecules/FFilePreview/FFilePreview.vue

@@ -0,0 +1,125 @@
+<template>
+	<div :class="containerClasses">
+		<f-icon :name="fileIcon" size="md" :class="iconClasses" />
+
+		<div class="flex-1 min-w-0">
+			<f-typography variant="body" :truncate="true" :class="fileNameClasses">
+				{{ fileName }}
+			</f-typography>
+		</div>
+
+		<div class="flex-shrink-0">
+			<f-loader v-if="loading" size="sm" :label="loadingLabel" />
+			<f-button
+				v-else
+				variant="ghost"
+				size="small"
+				:disabled="disabled"
+				@click="handleRemove"
+			>
+				<f-icon name="trash" size="sm" />
+				<span class="sr-only">{{ removeLabel }}</span>
+			</f-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FLoader from '../../atoms/FLoader/FLoader.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+const FILE_TYPE_ICONS = {
+	pdf: 'document',
+	doc: 'document',
+	docx: 'document',
+	xls: 'document',
+	xlsx: 'document',
+	ppt: 'document',
+	pptx: 'document',
+	txt: 'document',
+	csv: 'document',
+	jpg: 'image',
+	jpeg: 'image',
+	png: 'image',
+	gif: 'image',
+	svg: 'image',
+	webp: 'image',
+	bmp: 'image',
+	zip: 'document',
+	rar: 'document',
+	'7z': 'document',
+	tar: 'document',
+	gz: 'document',
+	default: 'document'
+};
+
+export default {
+	name: 'FFilePreview',
+	components: {
+		FIcon,
+		FTypography,
+		FLoader,
+		FButton
+	},
+	props: {
+		fileName: {
+			type: String,
+			required: true
+		},
+		fileType: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loadingLabel: {
+			type: String,
+			default: 'Téléversement en cours'
+		},
+		removeLabel: {
+			type: String,
+			default: 'Supprimer le fichier'
+		}
+	},
+	computed: {
+		fileExtension() {
+			if (this.fileType) {
+				return this.fileType.toLowerCase();
+			}
+			const parts = this.fileName.split('.');
+			return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+		},
+		fileIcon() {
+			return FILE_TYPE_ICONS[this.fileExtension] || FILE_TYPE_ICONS.default;
+		},
+		containerClasses() {
+			const baseClasses =
+				'flex items-center gap-3 px-4 py-3 bg-neutral-50 rounded-lg border border-neutral-200';
+			const disabledClasses = this.disabled ? 'opacity-50' : '';
+
+			return [baseClasses, disabledClasses].filter(Boolean).join(' ');
+		},
+		iconClasses() {
+			return 'text-neutral-500 flex-shrink-0';
+		},
+		fileNameClasses() {
+			return this.disabled ? 'text-neutral-400' : '';
+		}
+	},
+	methods: {
+		handleRemove() {
+			if (!this.disabled && !this.loading) {
+				this.$emit('remove');
+			}
+		}
+	}
+};
+</script>