@pyreweb/fabric 1.2.6

package/src/components/organisms/FPageHeader/FPageHeader.vue

@@ -0,0 +1,241 @@
+<template>
+	<header :class="headerClasses">
+		<!-- Breadcrumb section -->
+		<div v-if="showBreadcrumb" class="mb-4">
+			<f-breadcrumb
+				:items="breadcrumbItems"
+				:separator-icon="breadcrumbSeparatorIcon"
+				:aria-label="breadcrumbAriaLabel"
+				@navigate="handleBreadcrumbNavigate"
+			/>
+		</div>
+
+		<!-- Main header content -->
+		<div :class="contentClasses">
+			<!-- Left section: Avatar + Title -->
+			<div :class="titleSectionClasses">
+				<!-- Avatar (optional) -->
+				<f-avatar
+					v-if="showAvatar"
+					:src="avatarSrc"
+					:alt="avatarAlt"
+					:initials="avatarInitials"
+					:name="avatarName"
+					:size="avatarSize"
+					:shape="avatarShape"
+					:status="avatarStatus"
+					class="flex-shrink-0"
+				/>
+
+				<!-- Title and subtitle -->
+				<div class="flex-1 min-w-0">
+					<f-typography :variant="titleVariant" :truncate="truncateTitle">
+						<slot name="title">{{ title }}</slot>
+					</f-typography>
+					<f-typography
+						v-if="subtitle || $slots.subtitle"
+						variant="body"
+						tag="p"
+						class="text-neutral-500 mt-1"
+					>
+						<slot name="subtitle">{{ subtitle }}</slot>
+					</f-typography>
+				</div>
+			</div>
+
+			<!-- Right section: Actions -->
+			<div v-if="$slots.actions" :class="actionsClasses">
+				<slot name="actions" />
+			</div>
+		</div>
+	</header>
+</template>
+
+<script>
+import FBreadcrumb from '../../molecules/FBreadcrumb/FBreadcrumb.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FAvatar from '../../atoms/FAvatar/FAvatar.vue';
+
+export default {
+	name: 'FPageHeader',
+	components: {
+		FBreadcrumb,
+		FTypography,
+		FAvatar
+	},
+	props: {
+		/**
+		 * Page title
+		 */
+		title: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Page subtitle (optional description under the title)
+		 */
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Title typography variant
+		 */
+		titleVariant: {
+			type: String,
+			default: 'h1',
+			validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value)
+		},
+		/**
+		 * Truncate title if it overflows
+		 */
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Breadcrumb items array
+		 * Each item: { label: string, href?: string, icon?: string }
+		 */
+		breadcrumbItems: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		 * Breadcrumb separator icon
+		 */
+		breadcrumbSeparatorIcon: {
+			type: String,
+			default: 'chevron-right'
+		},
+		/**
+		 * Breadcrumb ARIA label
+		 */
+		breadcrumbAriaLabel: {
+			type: String,
+			default: "Fil d'Ariane"
+		},
+		/**
+		 * Avatar image source URL
+		 */
+		avatarSrc: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar alt text
+		 */
+		avatarAlt: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar initials (used when no image)
+		 */
+		avatarInitials: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar name (used to compute initials if no initials provided)
+		 */
+		avatarName: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar size
+		 */
+		avatarSize: {
+			type: String,
+			default: 'lg',
+			validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+		},
+		/**
+		 * Avatar shape
+		 */
+		avatarShape: {
+			type: String,
+			default: 'circle',
+			validator: (value) => ['circle', 'square'].includes(value)
+		},
+		/**
+		 * Avatar status indicator
+		 */
+		avatarStatus: {
+			type: String,
+			default: null,
+			validator: (value) =>
+				[null, 'online', 'busy', 'away', 'offline'].includes(value)
+		},
+		/**
+		 * Visual separator below the header
+		 */
+		separator: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		/**
+		 * Check if breadcrumb should be displayed
+		 */
+		showBreadcrumb() {
+			return this.breadcrumbItems && this.breadcrumbItems.length > 0;
+		},
+		/**
+		 * Check if avatar should be displayed
+		 */
+		showAvatar() {
+			return this.avatarSrc || this.avatarInitials || this.avatarName;
+		},
+		/**
+		 * Main header container classes
+		 */
+		headerClasses() {
+			const baseClasses = 'w-full';
+			const paddingClasses = 'pb-4';
+			const separatorClasses = this.separator
+				? 'border-b border-neutral-200'
+				: '';
+
+			return [baseClasses, paddingClasses, separatorClasses]
+				.filter(Boolean)
+				.join(' ');
+		},
+		/**
+		 * Content section classes (title + actions)
+		 */
+		contentClasses() {
+			return [
+				'flex',
+				'flex-col',
+				'sm:flex-row',
+				'sm:items-center',
+				'sm:justify-between',
+				'gap-4'
+			].join(' ');
+		},
+		/**
+		 * Title section classes (avatar + title)
+		 */
+		titleSectionClasses() {
+			return 'flex items-center gap-4 min-w-0 flex-1';
+		},
+		/**
+		 * Actions section classes
+		 */
+		actionsClasses() {
+			return 'flex-shrink-0 self-start sm:self-center';
+		}
+	},
+	methods: {
+		/**
+		 * Handle breadcrumb navigation event
+		 */
+		handleBreadcrumbNavigate(payload) {
+			this.$emit('breadcrumb-navigate', payload);
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,190 @@
+import FProfileSection from './FProfileSection.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FBadge from '../../atoms/FBadge/FBadge.vue';
+import FStatCard from '../../molecules/FStatCard/FStatCard.vue';
+
+export default {
+	title: 'Organisms/FProfileSection',
+	component: FProfileSection,
+	tags: ['autodocs'],
+	argTypes: {
+		name: {
+			control: 'text',
+			description: "Nom de l'utilisateur"
+		},
+		email: {
+			control: 'text',
+			description: 'Email'
+		},
+		role: {
+			control: 'text',
+			description: 'Rôle/Titre'
+		},
+		avatarSrc: {
+			control: 'text',
+			description: "URL de l'avatar"
+		},
+		avatarSize: {
+			control: { type: 'select' },
+			options: ['sm', 'md', 'lg', 'xl'],
+			description: "Taille de l'avatar"
+		},
+		layout: {
+			control: { type: 'select' },
+			options: ['horizontal', 'vertical'],
+			description: 'Disposition'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Afficher une bordure'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FProfileSection },
+	props: Object.keys(argTypes),
+	template: '<FProfileSection v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	name: 'Jean Dupont',
+	email: 'jean.dupont@example.com',
+	role: 'Développeur Senior'
+};
+
+export const WithAvatar = Template.bind({});
+WithAvatar.args = {
+	name: 'Marie Martin',
+	email: 'marie@example.com',
+	role: 'Product Manager',
+	avatarSrc: 'https://i.pravatar.cc/150?img=5'
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+	name: 'Pierre Durand',
+	email: 'pierre@example.com',
+	role: 'Designer UX',
+	layout: 'vertical'
+};
+
+export const WithActions = () => ({
+	components: { FProfileSection, FButton },
+	template: `
+		<FProfileSection
+			name="Sophie Petit"
+			email="sophie@example.com"
+			role="Chef de projet"
+		>
+			<template #actions>
+				<FButton variant="outline" size="sm">Message</FButton>
+				<FButton variant="primary" size="sm">Suivre</FButton>
+			</template>
+		</FProfileSection>
+	`
+});
+
+export const WithDetails = () => ({
+	components: { FProfileSection, FBadge },
+	template: `
+		<FProfileSection
+			name="Lucas Bernard"
+			email="lucas@example.com"
+			role="Développeur Full Stack"
+		>
+			<template #details>
+				<div class="flex gap-2 mt-2">
+					<FBadge content="React" variant="primary" size="sm" />
+					<FBadge content="Vue" variant="primary" size="sm" />
+					<FBadge content="Node.js" variant="primary" size="sm" />
+				</div>
+			</template>
+		</FProfileSection>
+	`
+});
+
+export const WithStats = () => ({
+	components: { FProfileSection, FButton },
+	template: `
+		<FProfileSection
+			name="Emma Leroy"
+			email="emma@example.com"
+			role="Lead Developer"
+			avatarSize="xl"
+		>
+			<template #stats>
+				<div class="flex gap-6 mt-4 pt-4 border-t border-neutral-100">
+					<div class="text-center">
+						<p class="text-2xl font-bold text-neutral-800">142</p>
+						<p class="text-sm text-neutral-500">Projets</p>
+					</div>
+					<div class="text-center">
+						<p class="text-2xl font-bold text-neutral-800">89</p>
+						<p class="text-sm text-neutral-500">Followers</p>
+					</div>
+					<div class="text-center">
+						<p class="text-2xl font-bold text-neutral-800">56</p>
+						<p class="text-sm text-neutral-500">Following</p>
+					</div>
+				</div>
+			</template>
+			<template #actions>
+				<FButton variant="primary">Modifier le profil</FButton>
+			</template>
+		</FProfileSection>
+	`
+});
+
+export const Bordered = Template.bind({});
+Bordered.args = {
+	name: 'Thomas Martin',
+	email: 'thomas@example.com',
+	role: 'DevOps Engineer',
+	bordered: true
+};
+
+export const Complete = () => ({
+	components: { FProfileSection, FButton, FBadge },
+	template: `
+		<FProfileSection
+			name="Claire Dubois"
+			email="claire.dubois@example.com"
+			role="Directrice Technique"
+			avatarSrc="https://i.pravatar.cc/150?img=1"
+			avatarSize="xl"
+			bordered
+		>
+			<template #details>
+				<div class="flex items-center gap-2 mt-1">
+					<FBadge content="Admin" variant="primary" size="sm" />
+					<FBadge content="Vérifié" variant="success" size="sm" />
+				</div>
+				<p class="text-sm text-neutral-500 mt-2">
+					Paris, France • Membre depuis janvier 2020
+				</p>
+			</template>
+			<template #stats>
+				<div class="flex gap-6 mt-4 pt-4 border-t border-neutral-100">
+					<div class="text-center">
+						<p class="text-xl font-bold">245</p>
+						<p class="text-xs text-neutral-500">Projets</p>
+					</div>
+					<div class="text-center">
+						<p class="text-xl font-bold">1.2k</p>
+						<p class="text-xs text-neutral-500">Contributions</p>
+					</div>
+					<div class="text-center">
+						<p class="text-xl font-bold">98%</p>
+						<p class="text-xs text-neutral-500">Complétion</p>
+					</div>
+				</div>
+			</template>
+			<template #actions>
+				<FButton variant="outline" size="sm">Paramètres</FButton>
+				<FButton variant="primary" size="sm">Modifier</FButton>
+			</template>
+		</FProfileSection>
+	`
+});

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

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FProfileSection from './FProfileSection.vue';
+
+describe('FProfileSection', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John Doe' }
+		});
+		expect(wrapper.text()).toContain('John Doe');
+	});
+
+	it('displays name', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'Jane Smith' }
+		});
+		expect(wrapper.text()).toContain('Jane Smith');
+	});
+
+	it('displays email when provided', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John', email: 'john@example.com' }
+		});
+		expect(wrapper.text()).toContain('john@example.com');
+	});
+
+	it('displays role/title when provided', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John', role: 'Developer' }
+		});
+		expect(wrapper.text()).toContain('Developer');
+	});
+
+	it('displays avatar', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John Doe' }
+		});
+		expect(wrapper.findComponent({ name: 'FAvatar' }).exists()).toBe(true);
+	});
+
+	it('uses avatar src when provided', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John', avatarSrc: 'https://example.com/avatar.jpg' }
+		});
+		expect(wrapper.findComponent({ name: 'FAvatar' }).exists()).toBe(true);
+	});
+
+	it('renders actions slot', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John' },
+			slots: { actions: '<button>Edit</button>' }
+		});
+		expect(wrapper.html()).toContain('Edit');
+	});
+
+	it('renders details slot', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John' },
+			slots: { details: '<p>Extra info</p>' }
+		});
+		expect(wrapper.html()).toContain('Extra info');
+	});
+
+	it('renders stats slot', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John' },
+			slots: { stats: '<div>10 projects</div>' }
+		});
+		expect(wrapper.html()).toContain('10 projects');
+	});
+
+	it('applies layout classes', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John', layout: 'horizontal' }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('applies bordered class when bordered is true', () => {
+		const wrapper = mount(FProfileSection, {
+			propsData: { name: 'John', bordered: true }
+		});
+		expect(wrapper.classes().join(' ')).toContain('border');
+	});
+});