@pyreweb/fabric 1.2.6

package/package.json

@@ -0,0 +1,100 @@
+{
+	"name": "@pyreweb/fabric",
+	"version": "1.2.6",
+	"description": "Système de design et bibliothèque de composants VueJS de la société Pyréweb",
+	"type": "module",
+	"overrides": {
+		"json5": "^2.2.3",
+		"loader-utils": "^3.2.1",
+		"postcss": "^8.4.31"
+	},
+	"main": "dist/fabric.cjs.js",
+	"repository": {
+	  "type": "git",
+	  "url": "git+https://github.com/pyreweb/fabric.git"
+    },
+    "bugs": {
+	  "url": "https://github.com/pyreweb/fabric/issues"
+    },
+    "homepage": "https://github.com/pyreweb/fabric#readme",
+	"publishConfig": {
+      "access": "public"
+    },
+	"module": "dist/fabric.esm.js",
+	"types": "dist/types/index.d.ts",
+	"unpkg": "dist/fabric.min.js",
+	"files": [
+		"dist",
+		"src"
+	],
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"test": "vitest run",
+		"typecheck": "vue-tsc --noEmit",
+		"lint": "eslint --ext .js,.ts,.vue src .storybook",
+		"lint:fix": "eslint --ext .js,.ts,.vue src .storybook --fix",
+		"format": "prettier --write \"src/**/*.{js,ts,vue}\" \".storybook/**/*.{js,ts}\" \"*.{js,cjs,ts}\"",
+		"format:check": "prettier --check \"src/**/*.{js,ts,vue}\" \".storybook/**/*.{js,ts}\" \"*.{js,cjs,ts}\"",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"preview-storybook": "npx serve storybook-static -l 6006"
+	},
+	"keywords": [
+		"javascript",
+		"components",
+		"design",
+		"vuejs",
+		"library",
+		"component",
+		"system",
+		"vue",
+		"js",
+		"design-system",
+		"system-design",
+		"components-library"
+	],
+	"author": "Pyréweb",
+	"license": "MIT",
+	"peerDependencies": {
+		"vue": "^2.6.0 || ^2.7.0"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^28.0.2",
+		"@rollup/plugin-node-resolve": "^15.3.1",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^12.3.0",
+		"@storybook/addon-essentials": "^7.6.20",
+		"@storybook/addon-links": "^7.6.20",
+		"@storybook/builder-vite": "^7.6.20",
+		"@storybook/vue": "^7.6.20",
+		"@storybook/vue-vite": "^7.6.20",
+		"@tailwindcss/postcss": "^4.1.17",
+		"@typescript-eslint/eslint-plugin": "^8.48.1",
+		"@typescript-eslint/parser": "^8.48.1",
+		"@vitejs/plugin-vue2": "^2.3.4",
+		"@vue/test-utils": "^1.3.6",
+		"autoprefixer": "^10.4.22",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^9.1.2",
+		"eslint-plugin-prettier": "^4.2.5",
+		"eslint-plugin-vue": "^9.33.0",
+		"jsdom": "^26.1.0",
+		"prettier": "^2.8.8",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"rollup": "^3.29.5",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-vue": "^5.1.9",
+		"storybook": "^7.6.20",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"vitest": "^3.2.4",
+		"vue": "^2.7.16",
+		"vue-template-compiler": "^2.7.16",
+		"vue-tsc": "^3.1.5"
+	},
+	"dependencies": {
+		"vue-virtual-scroller": "^1.1.2"
+	}
+}

package/src/components/atoms/FAvatar/FAvatar.stories.js

@@ -0,0 +1,100 @@
+import FAvatar from './FAvatar.vue';
+
+export default {
+	title: 'Atoms/FAvatar',
+	component: FAvatar,
+	tags: ['autodocs'],
+	argTypes: {
+		src: {
+			control: 'text',
+			description: "URL de l'image de l'avatar"
+		},
+		alt: {
+			control: 'text',
+			description: "Texte alternatif de l'image"
+		},
+		initials: {
+			control: 'text',
+			description: 'Initiales à afficher'
+		},
+		name: {
+			control: 'text',
+			description: 'Nom complet pour générer les initiales automatiquement'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			description: "Taille de l'avatar"
+		},
+		shape: {
+			control: { type: 'select' },
+			options: ['circle', 'square'],
+			description: "Forme de l'avatar"
+		},
+		status: {
+			control: { type: 'select' },
+			options: [null, 'online', 'busy', 'away', 'offline'],
+			description: 'Indicateur de statut'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FAvatar },
+	props: Object.keys(argTypes),
+	template: '<FAvatar v-bind="$props" />'
+});
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+	src: 'https://i.pravatar.cc/150?img=1',
+	alt: 'Avatar utilisateur'
+};
+
+export const WithInitials = Template.bind({});
+WithInitials.args = {
+	initials: 'JD'
+};
+
+export const WithName = Template.bind({});
+WithName.args = {
+	name: 'Jean Dupont'
+};
+
+export const Sizes = () => ({
+	components: { FAvatar },
+	template: `
+		<div class="flex items-center gap-4">
+			<FAvatar size="xs" initials="XS" />
+			<FAvatar size="sm" initials="SM" />
+			<FAvatar size="md" initials="MD" />
+			<FAvatar size="lg" initials="LG" />
+			<FAvatar size="xl" initials="XL" />
+		</div>
+	`
+});
+
+export const Shapes = () => ({
+	components: { FAvatar },
+	template: `
+		<div class="flex items-center gap-4">
+			<FAvatar shape="circle" initials="JD" />
+			<FAvatar shape="square" initials="JD" />
+		</div>
+	`
+});
+
+export const WithStatus = () => ({
+	components: { FAvatar },
+	template: `
+		<div class="flex items-center gap-4">
+			<FAvatar status="online" initials="ON" />
+			<FAvatar status="busy" initials="BU" />
+			<FAvatar status="away" initials="AW" />
+			<FAvatar status="offline" initials="OF" />
+		</div>
+	`
+});
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {};

package/src/components/atoms/FAvatar/FAvatar.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FAvatar from './FAvatar.vue';
+
+describe('FAvatar', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FAvatar);
+		expect(wrapper.find('div').exists()).toBe(true);
+	});
+
+	it('displays image when src is provided', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { src: 'https://example.com/avatar.jpg', alt: 'Test Avatar' }
+		});
+		const img = wrapper.find('img');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('https://example.com/avatar.jpg');
+		expect(img.attributes('alt')).toBe('Test Avatar');
+	});
+
+	it('displays initials when provided', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { initials: 'JD' }
+		});
+		expect(wrapper.text()).toContain('JD');
+	});
+
+	it('computes initials from name', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { name: 'John Doe' }
+		});
+		expect(wrapper.text()).toContain('JD');
+	});
+
+	it('computes initials from single name', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { name: 'John' }
+		});
+		expect(wrapper.text()).toContain('JO');
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+		const sizeClasses = {
+			xs: 'w-6',
+			sm: 'w-8',
+			md: 'w-10',
+			lg: 'w-12',
+			xl: 'w-16'
+		};
+
+		sizes.forEach((size) => {
+			const wrapper = mount(FAvatar, {
+				propsData: { size }
+			});
+			expect(wrapper.classes().join(' ')).toContain(sizeClasses[size]);
+		});
+	});
+
+	it('applies circle shape by default', () => {
+		const wrapper = mount(FAvatar);
+		const container = wrapper.find('[class*="rounded"]');
+		expect(container.classes()).toContain('rounded-full');
+	});
+
+	it('applies square shape when specified', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { shape: 'square' }
+		});
+		const container = wrapper.find('[class*="rounded"]');
+		expect(container.classes()).toContain('rounded-lg');
+	});
+
+	it('displays status indicator when status is provided', () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { status: 'online' }
+		});
+		expect(wrapper.find('[class*="bg-success"]').exists()).toBe(true);
+	});
+
+	it('emits click event when clicked', async () => {
+		const wrapper = mount(FAvatar);
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toHaveLength(1);
+	});
+
+	it('falls back to placeholder when image fails to load', async () => {
+		const wrapper = mount(FAvatar, {
+			propsData: { src: 'invalid-url.jpg' }
+		});
+		const img = wrapper.find('img');
+		await img.trigger('error');
+		expect(wrapper.find('img').exists()).toBe(false);
+	});
+});

package/src/components/atoms/FAvatar/FAvatar.vue

@@ -0,0 +1,190 @@
+<template>
+	<div
+		class="relative inline-flex flex-shrink-0"
+		:class="[sizeClasses.wrapper]"
+		@click="handleClick"
+	>
+		<div
+			:class="containerClasses"
+			:role="showImage ? undefined : 'img'"
+			:aria-label="computedAriaLabel"
+		>
+			<img
+				v-if="showImage"
+				:src="src"
+				:alt="alt"
+				class="w-full h-full object-cover"
+				loading="lazy"
+				@error="handleImageError"
+			/>
+
+			<span
+				v-else
+				:class="[
+					'flex items-center justify-center w-full h-full',
+					fontSizeClasses
+				]"
+			>
+				<template v-if="displayInitials">
+					{{ displayInitials }}
+				</template>
+				<svg
+					v-else
+					class="w-3/5 h-3/5 text-white opacity-90"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</span>
+		</div>
+
+		<span v-if="status" :class="statusClasses" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+const props = withDefaults(
+	defineProps<{
+		src?: string;
+		alt?: string;
+		initials?: string;
+		name?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		shape?: 'circle' | 'square';
+		status?: 'online' | 'busy' | 'away' | 'offline' | null;
+		placeholderClass?: string;
+	}>(),
+	{
+		src: '',
+		alt: '',
+		initials: '',
+		name: '',
+		size: 'md',
+		shape: 'circle',
+		status: null,
+		placeholderClass: 'bg-neutral-400 text-white'
+	}
+);
+
+const emit = defineEmits<{
+	(e: 'click', event: MouseEvent): void;
+}>();
+
+const imageError = ref(false);
+
+watch(
+	() => props.src,
+	() => {
+		imageError.value = false;
+	}
+);
+
+const showImage = computed(() => {
+	return props.src && !imageError.value;
+});
+
+const computeInitialsFromName = (name: string): string => {
+	if (!name) return '';
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return '';
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	}
+	return parts[0].substring(0, 2).toUpperCase();
+};
+
+const displayInitials = computed(() => {
+	if (props.initials) {
+		return props.initials.substring(0, 2).toUpperCase();
+	}
+	if (props.name) {
+		return computeInitialsFromName(props.name);
+	}
+	return '';
+});
+
+const computedAriaLabel = computed(() => {
+	if (props.alt) return props.alt;
+	if (props.name) return props.name;
+	if (props.initials) return `Avatar ${props.initials}`;
+	return 'Avatar';
+});
+
+const sizeClasses = computed(() => {
+	const sizes = {
+		xs: { wrapper: 'w-6 h-6', status: 'w-1.5 h-1.5' },
+		sm: { wrapper: 'w-8 h-8', status: 'w-2 h-2' },
+		md: { wrapper: 'w-10 h-10', status: 'w-2.5 h-2.5' },
+		lg: { wrapper: 'w-12 h-12', status: 'w-3 h-3' },
+		xl: { wrapper: 'w-16 h-16', status: 'w-4 h-4' }
+	};
+	return sizes[props.size];
+});
+
+const fontSizeClasses = computed(() => {
+	const fonts = {
+		xs: 'text-xs',
+		sm: 'text-xs',
+		md: 'text-sm',
+		lg: 'text-base',
+		xl: 'text-lg'
+	};
+	return [fonts[props.size], 'font-sans font-medium select-none'].join(' ');
+});
+
+const containerClasses = computed(() => {
+	const shapes = {
+		circle: 'rounded-full',
+		square: 'rounded-lg'
+	};
+
+	const background = !showImage.value ? props.placeholderClass : '';
+
+	return [
+		'w-full h-full overflow-hidden flex items-center justify-center',
+		shapes[props.shape],
+		background
+	]
+		.filter(Boolean)
+		.join(' ');
+});
+
+const statusClasses = computed(() => {
+	if (!props.status) return '';
+
+	const colors = {
+		online: 'bg-success-500',
+		busy: 'bg-danger-500',
+		away: 'bg-warning-500',
+		offline: 'bg-neutral-500'
+	};
+
+	const position =
+		props.shape === 'circle' ? '-bottom-0.5 -right-0.5' : '-bottom-1 -right-1';
+	const border = 'border-2 border-white';
+
+	return [
+		'absolute rounded-full box-content',
+		position,
+		border,
+		sizeClasses.value.status,
+		colors[props.status]
+	].join(' ');
+});
+
+const handleImageError = () => {
+	imageError.value = true;
+};
+
+const handleClick = (event: MouseEvent) => {
+	emit('click', event);
+};
+</script>

package/src/components/atoms/FBadge/FBadge.stories.js

@@ -0,0 +1,129 @@
+import FBadge from './FBadge.vue';
+
+export default {
+	title: 'Atoms/FBadge',
+	component: FBadge,
+	tags: ['autodocs'],
+	argTypes: {
+		content: {
+			control: 'text',
+			description: 'Contenu du badge'
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['primary', 'success', 'warning', 'error', 'neutral'],
+			description: 'Variante de couleur'
+		},
+		shape: {
+			control: { type: 'select' },
+			options: ['pill', 'circle', 'rounded'],
+			description: 'Forme du badge'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['sm', 'md', 'lg'],
+			description: 'Taille du badge'
+		},
+		dot: {
+			control: 'boolean',
+			description: 'Afficher comme point'
+		},
+		outlined: {
+			control: 'boolean',
+			description: 'Style avec bordure'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FBadge },
+	props: Object.keys(argTypes),
+	template: '<FBadge v-bind="$props" />'
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+	content: 'Badge',
+	variant: 'primary'
+};
+
+export const Success = Template.bind({});
+Success.args = {
+	content: 'Succès',
+	variant: 'success'
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+	content: 'Attention',
+	variant: 'warning'
+};
+
+export const Error = Template.bind({});
+Error.args = {
+	content: 'Erreur',
+	variant: 'error'
+};
+
+export const Neutral = Template.bind({});
+Neutral.args = {
+	content: 'Neutre',
+	variant: 'neutral'
+};
+
+export const Sizes = () => ({
+	components: { FBadge },
+	template: `
+		<div class="flex items-center gap-2">
+			<FBadge content="Small" size="sm" />
+			<FBadge content="Medium" size="md" />
+			<FBadge content="Large" size="lg" />
+		</div>
+	`
+});
+
+export const Shapes = () => ({
+	components: { FBadge },
+	template: `
+		<div class="flex items-center gap-2">
+			<FBadge content="Pill" shape="pill" />
+			<FBadge content="8" shape="circle" />
+			<FBadge content="Rounded" shape="rounded" />
+		</div>
+	`
+});
+
+export const Outlined = () => ({
+	components: { FBadge },
+	template: `
+		<div class="flex items-center gap-2">
+			<FBadge content="Primary" variant="primary" outlined />
+			<FBadge content="Success" variant="success" outlined />
+			<FBadge content="Warning" variant="warning" outlined />
+			<FBadge content="Error" variant="error" outlined />
+		</div>
+	`
+});
+
+export const Dots = () => ({
+	components: { FBadge },
+	template: `
+		<div class="flex items-center gap-2">
+			<FBadge dot variant="primary" />
+			<FBadge dot variant="success" />
+			<FBadge dot variant="warning" />
+			<FBadge dot variant="error" />
+		</div>
+	`
+});
+
+export const Numbers = () => ({
+	components: { FBadge },
+	template: `
+		<div class="flex items-center gap-2">
+			<FBadge :content="1" shape="circle" />
+			<FBadge :content="42" shape="circle" />
+			<FBadge :content="99" variant="error" shape="circle" />
+		</div>
+	`
+});

package/src/components/atoms/FBadge/FBadge.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FBadge from './FBadge.vue';
+
+describe('FBadge', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FBadge, {
+			slots: {
+				default: 'Badge'
+			}
+		});
+		expect(wrapper.text()).toContain('Badge');
+	});
+
+	it('displays content from prop', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { content: 'Test' }
+		});
+		expect(wrapper.text()).toContain('Test');
+	});
+
+	it('displays numeric content', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { content: 42 }
+		});
+		expect(wrapper.text()).toContain('42');
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = [
+			'primary',
+			'success',
+			'warning',
+			'error',
+			'neutral'
+		] as const;
+		variants.forEach((variant) => {
+			const wrapper = mount(FBadge, {
+				propsData: { variant, content: 'Test' }
+			});
+			expect(wrapper.find('span').exists()).toBe(true);
+		});
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['sm', 'md', 'lg'] as const;
+		sizes.forEach((size) => {
+			const wrapper = mount(FBadge, {
+				propsData: { size, content: 'Test' }
+			});
+			expect(wrapper.find('span').exists()).toBe(true);
+		});
+	});
+
+	it('renders as dot when dot prop is true', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { dot: true }
+		});
+		expect(wrapper.text()).toBe('');
+		expect(wrapper.classes().join(' ')).toContain('rounded-full');
+	});
+
+	it('applies outlined style', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { outlined: true, content: 'Test' }
+		});
+		expect(wrapper.classes().join(' ')).toContain('border');
+	});
+
+	it('applies correct shape classes', () => {
+		const shapes = ['pill', 'circle', 'rounded'] as const;
+		shapes.forEach((shape) => {
+			const wrapper = mount(FBadge, {
+				propsData: { shape, content: 'X' }
+			});
+			expect(wrapper.find('span').exists()).toBe(true);
+		});
+	});
+
+	it('uses custom tag when specified', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { tag: 'div', content: 'Test' }
+		});
+		expect(wrapper.find('div').exists()).toBe(true);
+	});
+
+	it('sets aria-label for dot variant', () => {
+		const wrapper = mount(FBadge, {
+			propsData: { dot: true, variant: 'success' }
+		});
+		expect(wrapper.attributes('aria-label')).toBe('Status: success');
+	});
+});