@pyreweb/fabric 1.2.6

package/src/components/organisms/FDrawer/FDrawer.vue

@@ -0,0 +1,303 @@
+<template>
+	<div v-if="isOpen" class="fixed inset-0 z-50 overflow-hidden">
+		<!-- Overlay -->
+		<div
+			class="fixed inset-0 bg-black opacity-50 transition-opacity duration-[var(--transition-duration-slow)] ease-[var(--transition-easing-standard)]"
+			@click="handleOverlayClick"
+		></div>
+
+		<!-- Drawer Container -->
+		<div :class="containerClasses">
+			<div
+				:class="drawerClasses"
+				role="dialog"
+				aria-modal="true"
+				:aria-labelledby="titleId"
+			>
+				<!-- Header -->
+				<div
+					v-if="$slots.header || title"
+					class="flex items-center justify-between px-4 pt-4 flex-shrink-0"
+				>
+					<div class="flex-1 min-w-0">
+						<slot name="header">
+							<f-typography :id="titleId" variant="h5">{{
+								title
+							}}</f-typography>
+							<f-typography
+								v-if="subtitle"
+								variant="caption"
+								class="text-neutral-500"
+							>
+								{{ subtitle }}
+							</f-typography>
+						</slot>
+					</div>
+					<f-button
+						v-if="closable"
+						variant="ghost"
+						size="small"
+						class="flex-shrink-0 -mr-2"
+						@click="handleClose"
+					>
+						<f-icon name="close" size="sm" />
+						<span class="sr-only">Fermer le tiroir</span>
+					</f-button>
+				</div>
+
+				<!-- Body -->
+				<div class="p-4 flex-1 overflow-y-auto">
+					<slot name="body">
+						<slot />
+					</slot>
+				</div>
+
+				<!-- Actions -->
+				<div
+					v-if="$slots.actions"
+					class="px-4 pb-4 flex gap-2 justify-end flex-shrink-0"
+				>
+					<slot name="actions" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+
+let idCounter = 0;
+
+export default {
+	name: 'FDrawer',
+	components: {
+		FTypography,
+		FButton,
+		FIcon
+	},
+	props: {
+		/**
+		 * Controls the visibility of the drawer.
+		 * Use v-model for two-way binding.
+		 */
+		value: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Drawer title displayed in the header
+		 */
+		title: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Optional subtitle displayed below the title
+		 */
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Show the close button in the header
+		 */
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Close the drawer when clicking the overlay
+		 */
+		closeOnOverlay: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Close the drawer when pressing Escape key
+		 */
+		closeOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Position of the drawer (left, right, top, bottom)
+		 */
+		position: {
+			type: String,
+			default: 'right',
+			validator: (value) => ['left', 'right', 'top', 'bottom'].includes(value)
+		},
+		/**
+		 * Size of the drawer
+		 */
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value) => ['small', 'medium', 'large'].includes(value)
+		},
+		/**
+		 * Whether the drawer has a border
+		 */
+		bordered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			uid: idCounter++
+		};
+	},
+	computed: {
+		/**
+		 * Computed property for v-model support
+		 */
+		isOpen: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			}
+		},
+		/**
+		 * Unique ID for the drawer title (accessibility)
+		 */
+		titleId() {
+			return `f-drawer-title-${this.uid}`;
+		},
+		/**
+		 * Container classes for positioning
+		 */
+		containerClasses() {
+			const positionClasses = {
+				left: 'flex items-stretch justify-start',
+				right: 'flex items-stretch justify-end',
+				top: 'flex flex-col items-stretch justify-start',
+				bottom: 'flex flex-col items-stretch justify-end'
+			};
+
+			return [
+				'fixed inset-0 pointer-events-none',
+				positionClasses[this.position]
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		/**
+		 * Drawer panel classes
+		 */
+		drawerClasses() {
+			const baseClasses =
+				'relative bg-white shadow-xl pointer-events-auto flex flex-col';
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-slow)] ease-[var(--transition-easing-emphasized)]';
+			const borderedClasses = this.bordered ? 'border border-neutral-200' : '';
+
+			const sizeClasses = {
+				left: {
+					small: 'w-64',
+					medium: 'w-80',
+					large: 'w-96'
+				},
+				right: {
+					small: 'w-64',
+					medium: 'w-80',
+					large: 'w-96'
+				},
+				top: {
+					small: 'h-64',
+					medium: 'h-80',
+					large: 'h-96'
+				},
+				bottom: {
+					small: 'h-64',
+					medium: 'h-80',
+					large: 'h-96'
+				}
+			};
+
+			const heightWidthClass = sizeClasses[this.position][this.size];
+			const fullHeightWidth =
+				this.position === 'left' || this.position === 'right'
+					? 'h-full'
+					: 'w-full';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				borderedClasses,
+				heightWidthClass,
+				fullHeightWidth
+			]
+				.filter(Boolean)
+				.join(' ');
+		}
+	},
+	watch: {
+		/**
+		 * Watch for drawer open/close to manage body scroll
+		 */
+		isOpen: {
+			immediate: true,
+			handler(newValue) {
+				if (newValue) {
+					this.lockBodyScroll();
+					this.$nextTick(() => {
+						if (this.closeOnEscape) {
+							document.addEventListener('keydown', this.handleKeydown);
+						}
+					});
+				} else {
+					this.unlockBodyScroll();
+					document.removeEventListener('keydown', this.handleKeydown);
+				}
+			}
+		}
+	},
+	beforeDestroy() {
+		this.unlockBodyScroll();
+		document.removeEventListener('keydown', this.handleKeydown);
+	},
+	methods: {
+		/**
+		 * Handle overlay click
+		 */
+		handleOverlayClick() {
+			if (this.closeOnOverlay) {
+				this.handleClose();
+			}
+		},
+		/**
+		 * Handle close action
+		 */
+		handleClose() {
+			this.isOpen = false;
+			this.$emit('close');
+		},
+		/**
+		 * Handle keyboard events
+		 */
+		handleKeydown(event) {
+			if (event.key === 'Escape' && this.closeOnEscape) {
+				this.handleClose();
+			}
+		},
+		/**
+		 * Lock body scroll when drawer is open
+		 */
+		lockBodyScroll() {
+			document.body.style.overflow = 'hidden';
+		},
+		/**
+		 * Unlock body scroll when drawer is closed
+		 */
+		unlockBodyScroll() {
+			document.body.style.overflow = '';
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,162 @@
+import FFileUpload from './FFileUpload.vue';
+
+export default {
+	title: 'Organisms/FFileUpload',
+	component: FFileUpload,
+	tags: ['autodocs'],
+	argTypes: {
+		accept: {
+			control: 'text',
+			description: 'Types de fichiers acceptés'
+		},
+		multiple: {
+			control: 'boolean',
+			description: 'Autoriser plusieurs fichiers'
+		},
+		maxSize: {
+			control: 'number',
+			description: 'Taille maximale en octets'
+		},
+		maxFiles: {
+			control: 'number',
+			description: 'Nombre maximum de fichiers'
+		},
+		showButton: {
+			control: 'boolean',
+			description: "Afficher le bouton d'upload"
+		},
+		showProgress: {
+			control: 'boolean',
+			description: 'Afficher la barre de progression'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		hint: {
+			control: 'text',
+			description: "Texte d'aide"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FFileUpload },
+	props: Object.keys(argTypes),
+	data() {
+		return { files: [] };
+	},
+	template: '<FFileUpload v-bind="$props" v-model="files" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithButton = Template.bind({});
+WithButton.args = {
+	showButton: true,
+	buttonLabel: 'Parcourir'
+};
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+	hint: 'Formats acceptés: PDF, DOC, DOCX. Taille max: 10 Mo'
+};
+
+export const ImagesOnly = Template.bind({});
+ImagesOnly.args = {
+	accept: 'image/*',
+	hint: 'Images uniquement (JPG, PNG, GIF)'
+};
+
+export const MultipleFiles = Template.bind({});
+MultipleFiles.args = {
+	multiple: true,
+	hint: 'Vous pouvez sélectionner plusieurs fichiers'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true
+};
+
+export const WithMaxSize = Template.bind({});
+WithMaxSize.args = {
+	maxSize: 5 * 1024 * 1024, // 5 MB
+	hint: 'Taille maximale: 5 Mo'
+};
+
+export const WithMaxFiles = Template.bind({});
+WithMaxFiles.args = {
+	multiple: true,
+	maxFiles: 3,
+	hint: 'Maximum 3 fichiers'
+};
+
+export const WithPreloadedFiles = () => ({
+	components: { FFileUpload },
+	data() {
+		return {
+			files: [
+				{ id: 1, name: 'document.pdf', status: 'success' },
+				{ id: 2, name: 'image.png', status: 'success' }
+			]
+		};
+	},
+	template: '<FFileUpload v-model="files" multiple />'
+});
+
+export const WithUploadingFile = () => ({
+	components: { FFileUpload },
+	data() {
+		return {
+			files: [
+				{ id: 1, name: 'rapport.pdf', status: 'success' },
+				{ id: 2, name: 'video.mp4', status: 'uploading', progress: 45 },
+				{ id: 3, name: 'archive.zip', status: 'pending' }
+			]
+		};
+	},
+	template: '<FFileUpload v-model="files" multiple showProgress />'
+});
+
+export const Interactive = () => ({
+	components: { FFileUpload },
+	data() {
+		return {
+			files: []
+		};
+	},
+	methods: {
+		handleChange(files) {
+			console.log('Files changed:', files);
+		},
+		handleError(error) {
+			console.error('Upload error:', error);
+		}
+	},
+	template: `
+		<div class="max-w-lg">
+			<FFileUpload
+				v-model="files"
+				multiple
+				showButton
+				showProgress
+				accept=".pdf,.doc,.docx,.jpg,.png"
+				:maxSize="10 * 1024 * 1024"
+				hint="PDF, DOC, images. Max 10 Mo par fichier."
+				@change="handleChange"
+				@error="handleError"
+			/>
+			<div v-if="files.length" class="mt-4 text-sm text-neutral-600">
+				<p>{{ files.length }} fichier(s) sélectionné(s)</p>
+			</div>
+		</div>
+	`
+});
+
+export const PDFOnly = Template.bind({});
+PDFOnly.args = {
+	accept: '.pdf',
+	hint: 'Fichiers PDF uniquement'
+};

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

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FFileUpload from './FFileUpload.vue';
+
+describe('FFileUpload', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FFileUpload);
+		expect(wrapper.find('input[type="file"]').exists()).toBe(true);
+	});
+
+	it('has hidden file input', () => {
+		const wrapper = mount(FFileUpload);
+		const input = wrapper.find('input[type="file"]');
+		expect(input.classes()).toContain('sr-only');
+	});
+
+	it('displays drop zone', () => {
+		const wrapper = mount(FFileUpload);
+		expect(wrapper.text()).toContain('Glissez-déposez');
+	});
+
+	it('accepts custom accept types', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: { accept: '.pdf,.doc' }
+		});
+		expect(wrapper.find('input[type="file"]').attributes('accept')).toBe(
+			'.pdf,.doc'
+		);
+	});
+
+	it('allows multiple files when multiple is true', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: { multiple: true }
+		});
+		expect(
+			wrapper.find('input[type="file"]').attributes('multiple')
+		).toBeDefined();
+	});
+
+	it('disables input when disabled', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: { disabled: true }
+		});
+		expect(
+			wrapper.find('input[type="file"]').attributes('disabled')
+		).toBeDefined();
+	});
+
+	it('shows upload button when showButton is true', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: { showButton: true }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('shows hint when provided', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: { hint: 'Max 10MB' }
+		});
+		expect(wrapper.text()).toContain('Max 10MB');
+	});
+
+	it('displays file previews when files are present', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: {
+				value: [{ id: 1, name: 'test.pdf', status: 'success' }]
+			}
+		});
+		expect(wrapper.findComponent({ name: 'FFilePreview' }).exists()).toBe(true);
+	});
+
+	it('emits input event when files are added', async () => {
+		const wrapper = mount(FFileUpload);
+		const input = wrapper.find('input[type="file"]');
+
+		// Create a mock file
+		const file = new File(['content'], 'test.txt', { type: 'text/plain' });
+		const mockFileList = {
+			0: file,
+			length: 1,
+			item: (index: number) => file
+		};
+
+		// Trigger change
+		Object.defineProperty(input.element, 'files', {
+			value: mockFileList,
+			writable: false
+		});
+		await input.trigger('change');
+
+		expect(wrapper.emitted('input')).toBeTruthy();
+	});
+
+	it('shows progress bar when uploading', () => {
+		const wrapper = mount(FFileUpload, {
+			propsData: {
+				showProgress: true,
+				value: [{ id: 1, name: 'test.pdf', status: 'uploading', progress: 50 }]
+			}
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+});