@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,270 @@
+import FForm from './FForm.vue';
+import FFormField from '../../molecules/FFormField/FFormField.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FCheckbox from '../../atoms/FCheckbox/FCheckbox.vue';
+
+export default {
+	title: 'Organisms/FForm',
+	component: FForm,
+	tags: ['autodocs'],
+	argTypes: {}
+};
+
+export const Default = () => ({
+	components: { FForm, FFormField, FButton },
+	data() {
+		return {
+			form: {
+				name: '',
+				email: ''
+			}
+		};
+	},
+	methods: {
+		handleSubmit() {
+			alert(
+				`Formulaire soumis:\nNom: ${this.form.name}\nEmail: ${this.form.email}`
+			);
+		}
+	},
+	template: `
+		<FForm @submit="handleSubmit">
+			<FFormField
+				v-model="form.name"
+				label="Nom"
+				placeholder="Votre nom"
+				required
+			/>
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				placeholder="exemple@email.com"
+				required
+			/>
+			<template #actions>
+				<FButton type="submit" variant="primary">Envoyer</FButton>
+			</template>
+		</FForm>
+	`
+});
+
+export const LoginForm = () => ({
+	components: { FForm, FFormField, FButton, FCheckbox },
+	data() {
+		return {
+			form: {
+				email: '',
+				password: '',
+				remember: false
+			}
+		};
+	},
+	methods: {
+		handleSubmit() {
+			alert('Connexion en cours...');
+		}
+	},
+	template: `
+		<FForm @submit="handleSubmit" class="max-w-sm">
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				placeholder="exemple@email.com"
+				required
+			/>
+			<FFormField
+				v-model="form.password"
+				label="Mot de passe"
+				type="password"
+				required
+			/>
+			<FCheckbox v-model="form.remember" label="Se souvenir de moi" />
+			<template #actions>
+				<FButton type="submit" variant="primary" block>Se connecter</FButton>
+			</template>
+		</FForm>
+	`
+});
+
+export const RegistrationForm = () => ({
+	components: { FForm, FFormField, FButton, FCheckbox },
+	data() {
+		return {
+			form: {
+				firstName: '',
+				lastName: '',
+				email: '',
+				password: '',
+				confirmPassword: '',
+				terms: false
+			}
+		};
+	},
+	methods: {
+		handleSubmit() {
+			if (this.form.password !== this.form.confirmPassword) {
+				alert('Les mots de passe ne correspondent pas');
+				return;
+			}
+			alert('Inscription réussie !');
+		}
+	},
+	template: `
+		<FForm @submit="handleSubmit" class="max-w-md">
+			<div class="grid grid-cols-2 gap-4">
+				<FFormField
+					v-model="form.firstName"
+					label="Prénom"
+					required
+				/>
+				<FFormField
+					v-model="form.lastName"
+					label="Nom"
+					required
+				/>
+			</div>
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				required
+			/>
+			<FFormField
+				v-model="form.password"
+				label="Mot de passe"
+				type="password"
+				hint="8 caractères minimum"
+				required
+			/>
+			<FFormField
+				v-model="form.confirmPassword"
+				label="Confirmer le mot de passe"
+				type="password"
+				required
+			/>
+			<FCheckbox
+				v-model="form.terms"
+				label="J'accepte les conditions d'utilisation"
+			/>
+			<template #actions>
+				<FButton type="submit" variant="primary" block>S'inscrire</FButton>
+			</template>
+		</FForm>
+	`
+});
+
+export const ContactForm = () => ({
+	components: { FForm, FFormField, FButton },
+	data() {
+		return {
+			form: {
+				name: '',
+				email: '',
+				subject: '',
+				message: ''
+			},
+			isLoading: false
+		};
+	},
+	methods: {
+		async handleSubmit() {
+			this.isLoading = true;
+			await new Promise((resolve) => setTimeout(resolve, 1500));
+			this.isLoading = false;
+			alert('Message envoyé !');
+			this.form = { name: '', email: '', subject: '', message: '' };
+		}
+	},
+	template: `
+		<FForm @submit="handleSubmit" class="max-w-lg">
+			<FFormField
+				v-model="form.name"
+				label="Nom complet"
+				required
+			/>
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				required
+			/>
+			<FFormField
+				v-model="form.subject"
+				label="Sujet"
+				required
+			/>
+			<div class="flex flex-col gap-1.5">
+				<label class="text-sm font-medium text-neutral-700">Message</label>
+				<textarea
+					v-model="form.message"
+					rows="5"
+					class="block w-full font-sans border rounded py-2.5 px-3.5 text-sm border-neutral-300 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+					placeholder="Votre message..."
+				></textarea>
+			</div>
+			<template #actions>
+				<FButton type="button" variant="outline">Annuler</FButton>
+				<FButton type="submit" variant="primary" :loading="isLoading">Envoyer</FButton>
+			</template>
+		</FForm>
+	`
+});
+
+export const WithValidation = () => ({
+	components: { FForm, FFormField, FButton },
+	data() {
+		return {
+			form: {
+				email: '',
+				password: ''
+			},
+			errors: {}
+		};
+	},
+	methods: {
+		validate() {
+			this.errors = {};
+			if (!this.form.email) {
+				this.errors.email = "L'email est requis";
+			} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
+				this.errors.email = 'Email invalide';
+			}
+			if (!this.form.password) {
+				this.errors.password = 'Le mot de passe est requis';
+			} else if (this.form.password.length < 8) {
+				this.errors.password =
+					'Le mot de passe doit faire au moins 8 caractères';
+			}
+			return Object.keys(this.errors).length === 0;
+		},
+		handleSubmit() {
+			if (this.validate()) {
+				alert('Formulaire valide !');
+			}
+		}
+	},
+	template: `
+		<FForm @submit="handleSubmit" class="max-w-sm">
+			<FFormField
+				v-model="form.email"
+				label="Email"
+				type="email"
+				:errorMessage="errors.email"
+				required
+			/>
+			<FFormField
+				v-model="form.password"
+				label="Mot de passe"
+				type="password"
+				:errorMessage="errors.password"
+				hint="8 caractères minimum"
+				required
+			/>
+			<template #actions>
+				<FButton type="submit" variant="primary">Valider</FButton>
+			</template>
+		</FForm>
+	`
+});

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FForm from './FForm.vue';
+
+describe('FForm', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FForm);
+		expect(wrapper.find('form').exists()).toBe(true);
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(FForm, {
+			slots: {
+				default: '<input type="text" name="test" />'
+			}
+		});
+		expect(wrapper.find('input[name="test"]').exists()).toBe(true);
+	});
+
+	it('renders actions slot', () => {
+		const wrapper = mount(FForm, {
+			slots: {
+				actions: '<button type="submit">Submit</button>'
+			}
+		});
+		expect(wrapper.html()).toContain('Submit');
+	});
+
+	it('emits submit event on form submission', async () => {
+		const wrapper = mount(FForm);
+		await wrapper.find('form').trigger('submit.prevent');
+		expect(wrapper.emitted('submit')).toBeTruthy();
+	});
+
+	it('prevents default form submission', async () => {
+		const wrapper = mount(FForm);
+		const form = wrapper.find('form');
+		let defaultPrevented = false;
+
+		form.element.addEventListener(
+			'submit',
+			(e) => {
+				defaultPrevented = e.defaultPrevented;
+			},
+			{ once: true }
+		);
+
+		await form.trigger('submit');
+		// The form component handles prevention internally
+		expect(wrapper.emitted('submit')).toBeTruthy();
+	});
+
+	it('has flex layout', () => {
+		const wrapper = mount(FForm);
+		expect(wrapper.find('form').classes()).toContain('flex');
+		expect(wrapper.find('form').classes()).toContain('flex-col');
+	});
+
+	it('has gap between elements', () => {
+		const wrapper = mount(FForm);
+		expect(wrapper.find('form').classes()).toContain('gap-4');
+	});
+});

package/src/components/organisms/FForm/FForm.vue

@@ -0,0 +1,19 @@
+<template>
+	<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+		<slot />
+		<div v-if="$slots.actions" class="flex gap-2 mt-2">
+			<slot name="actions" />
+		</div>
+	</form>
+</template>
+
+<script>
+export default {
+	name: 'FForm',
+	methods: {
+		handleSubmit(event) {
+			this.$emit('submit', event);
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,227 @@
+import FModal from './FModal.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FFormField from '../../molecules/FFormField/FFormField.vue';
+
+export default {
+	title: 'Organisms/FModal',
+	component: FModal,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'boolean',
+			description: 'État ouvert/fermé'
+		},
+		title: {
+			control: 'text',
+			description: 'Titre de la modale'
+		},
+		subtitle: {
+			control: 'text',
+			description: 'Sous-titre'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large', 'full'],
+			description: 'Taille de la modale'
+		},
+		closable: {
+			control: 'boolean',
+			description: 'Afficher le bouton de fermeture'
+		},
+		closeOnOverlay: {
+			control: 'boolean',
+			description: "Fermer au clic sur l'overlay"
+		},
+		closeOnEscape: {
+			control: 'boolean',
+			description: 'Fermer avec la touche Échap'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Afficher une bordure'
+		}
+	}
+};
+
+export const Default = () => ({
+	components: { FModal, FButton },
+	data() {
+		return { isOpen: false };
+	},
+	template: `
+		<div>
+			<FButton @click="isOpen = true">Ouvrir la modale</FButton>
+			<FModal v-model="isOpen" title="Titre de la modale">
+				<template #body>
+					<p>Contenu de la modale.</p>
+				</template>
+				<template #actions>
+					<FButton variant="outline" @click="isOpen = false">Annuler</FButton>
+					<FButton variant="primary" @click="isOpen = false">Confirmer</FButton>
+				</template>
+			</FModal>
+		</div>
+	`
+});
+
+export const WithSubtitle = () => ({
+	components: { FModal, FButton },
+	data() {
+		return { isOpen: false };
+	},
+	template: `
+		<div>
+			<FButton @click="isOpen = true">Ouvrir</FButton>
+			<FModal v-model="isOpen" title="Confirmation" subtitle="Action requise">
+				<template #body>
+					<p>Êtes-vous sûr de vouloir continuer cette action ?</p>
+				</template>
+				<template #actions>
+					<FButton variant="outline" @click="isOpen = false">Annuler</FButton>
+					<FButton variant="primary" @click="isOpen = false">Confirmer</FButton>
+				</template>
+			</FModal>
+		</div>
+	`
+});
+
+export const Sizes = () => ({
+	components: { FModal, FButton },
+	data() {
+		return {
+			smallOpen: false,
+			mediumOpen: false,
+			largeOpen: false,
+			fullOpen: false
+		};
+	},
+	template: `
+		<div class="flex gap-2">
+			<FButton @click="smallOpen = true">Petite</FButton>
+			<FButton @click="mediumOpen = true">Moyenne</FButton>
+			<FButton @click="largeOpen = true">Grande</FButton>
+			<FButton @click="fullOpen = true">Plein écran</FButton>
+			
+			<FModal v-model="smallOpen" title="Petite modale" size="small">
+				<template #body><p>Contenu compact.</p></template>
+			</FModal>
+			<FModal v-model="mediumOpen" title="Modale moyenne" size="medium">
+				<template #body><p>Taille par défaut.</p></template>
+			</FModal>
+			<FModal v-model="largeOpen" title="Grande modale" size="large">
+				<template #body><p>Plus d'espace pour le contenu.</p></template>
+			</FModal>
+			<FModal v-model="fullOpen" title="Modale plein écran" size="full">
+				<template #body><p>Contenu en pleine largeur.</p></template>
+			</FModal>
+		</div>
+	`
+});
+
+export const NotClosable = () => ({
+	components: { FModal, FButton },
+	data() {
+		return { isOpen: false };
+	},
+	template: `
+		<div>
+			<FButton @click="isOpen = true">Ouvrir (non fermable)</FButton>
+			<FModal
+				v-model="isOpen"
+				title="Action obligatoire"
+				:closable="false"
+				:closeOnOverlay="false"
+				:closeOnEscape="false"
+			>
+				<template #body>
+					<p>Vous devez confirmer cette action.</p>
+				</template>
+				<template #actions>
+					<FButton variant="primary" @click="isOpen = false">J'ai compris</FButton>
+				</template>
+			</FModal>
+		</div>
+	`
+});
+
+export const Danger = () => ({
+	components: { FModal, FButton },
+	data() {
+		return { isOpen: false };
+	},
+	template: `
+		<div>
+			<FButton variant="danger" @click="isOpen = true">Supprimer</FButton>
+			<FModal v-model="isOpen" title="Confirmer la suppression">
+				<template #body>
+					<p>Cette action est irréversible. Êtes-vous sûr de vouloir supprimer cet élément ?</p>
+				</template>
+				<template #actions>
+					<FButton variant="outline" @click="isOpen = false">Annuler</FButton>
+					<FButton variant="danger" @click="isOpen = false">Supprimer</FButton>
+				</template>
+			</FModal>
+		</div>
+	`
+});
+
+export const WithForm = () => ({
+	components: { FModal, FButton, FFormField },
+	data() {
+		return {
+			isOpen: false,
+			form: { name: '', email: '' }
+		};
+	},
+	methods: {
+		handleSubmit() {
+			alert(`Nom: ${this.form.name}, Email: ${this.form.email}`);
+			this.isOpen = false;
+		}
+	},
+	template: `
+		<div>
+			<FButton @click="isOpen = true">Ajouter un contact</FButton>
+			<FModal v-model="isOpen" title="Nouveau contact" subtitle="Remplissez les informations">
+				<template #body>
+					<div class="flex flex-col gap-4">
+						<FFormField v-model="form.name" label="Nom" required />
+						<FFormField v-model="form.email" label="Email" type="email" required />
+					</div>
+				</template>
+				<template #actions>
+					<FButton variant="outline" @click="isOpen = false">Annuler</FButton>
+					<FButton variant="primary" @click="handleSubmit">Ajouter</FButton>
+				</template>
+			</FModal>
+		</div>
+	`
+});
+
+export const CustomHeader = () => ({
+	components: { FModal, FButton },
+	data() {
+		return { isOpen: false };
+	},
+	template: `
+		<div>
+			<FButton @click="isOpen = true">Ouvrir</FButton>
+			<FModal v-model="isOpen">
+				<template #header>
+					<div class="flex items-center gap-3">
+						<div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
+							<span class="text-primary-600 font-bold">!</span>
+						</div>
+						<div>
+							<h3 class="font-semibold">En-tête personnalisé</h3>
+							<p class="text-sm text-neutral-500">Avec icône et mise en forme</p>
+						</div>
+					</div>
+				</template>
+				<template #body>
+					<p>Contenu de la modale avec un en-tête personnalisé.</p>
+				</template>
+			</FModal>
+		</div>
+	`
+});