🚀 Fonctionnalités

• ✅ Composants Vue 2.7 - Bibliothèque complète de composants réutilisables
• ✅ TypeScript - Support TypeScript complet avec types stricts pour les événements et les slots
• ✅ Design System - Architecture Atomic Design (Atoms, Molecules, Organisms)
• ✅ Thématisation - Système de thèmes avec support Dark/Light Mode intégré
• ✅ Transitions harmonisées - Micro-interactions cohérentes avec durées et courbes standardisées
• ✅ Documentation - Storybook interactif avec exemples
• ✅ Accessibilité - Composants conformes aux standards WCAG
• ✅ Tailwind CSS - Styling moderne et personnalisable

📖 Documentation TypeScript

Fabric offre un support TypeScript complet avec :

• Types stricts pour tous les props et événements
• Slots scopés typés avec autocomplétion du contexte
• Documentation inline via JSDoc dans votre IDE
• Vérification de types à la compilation

📚 Consultez le Guide TypeScript pour plus de détails et des exemples pratiques.

🎨 Thématisation et Mode Sombre

Fabric intègre un système de thématisation complet avec :

• Support natif du Dark/Light Mode avec basculement dynamique
• Variables CSS personnalisables pour adapter les couleurs à votre marque
• Composant FThemeProvider pour une gestion simplifiée du thème
• Persistance automatique des préférences utilisateur
• Mode auto qui suit les préférences système

<f-theme-provider v-slot="{ theme, toggleTheme }">
  <button @click="toggleTheme">
    Mode {{ theme === 'light' ? 'sombre' : 'clair' }}
  </button>
</f-theme-provider>

📚 Consultez le Guide de Thématisation pour plus de détails.

✨ Système de Transitions et Micro-interactions

Fabric implémente un système de transitions harmonisées pour une expérience utilisateur cohérente :

• Durées standardisées (fast: 100ms, base: 200ms, slow: 300ms)
• Courbes d'animation optimisées pour différents types d'interactions
• Variables CSS centralisées pour une personnalisation facile
• Performance optimisée avec des transitions GPU-accelerated

<button class="transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]">
  Cliquez-moi
</button>

📚 Consultez le Guide des Transitions pour plus de détails.

Développement

Storybook

Pour lancer Storybook en mode développement :

npm run storybook

Prévisualiser le build statique de Storybook

Pour construire et prévisualiser le Storybook statique localement :

npm run build-storybook
npm run preview-storybook

Le serveur sera accessible à l'adresse http://localhost:6006.

⚠️ Note importante : N'ouvrez pas le fichier storybook-static/index.html directement via le protocole file://. Les navigateurs modernes bloquent le chargement des modules JavaScript depuis le protocole file:// pour des raisons de sécurité (erreurs CORS). Utilisez toujours npm run preview-storybook pour lancer un serveur HTTP local.

Composants de la bibliothèque

Atomes

Les composants de type "atoms" sont disponible dans la page src/components/atoms.

Molécules

Les composants de type "molecules" sont disponible src/components/molecules.

Organismes

Les composants de type "organisms" sont disponible src/components/organisms.