Whoa UI

Whoa UI Background

🌐 ・Liens du projet

Github

❓・Pourquoi ce projet ?

Whoa UI est né de la volonté de disposer d’une librairie de composants réutilisables, modernes et animés pour accélérer le développement d’interfaces web avec React. J’avais besoin de composants élégants, cohérents et faciles à intégrer dans différents projets, tout en gardant une grande flexibilité de personnalisation. Ce projet me permet aussi de partager des solutions UI robustes avec la communauté et de centraliser mes meilleures pratiques en matière de design et d’animation.

🛠️・Technologies utilisées

React : La base de la librairie pour créer des composants dynamiques et modulaires.
TypeScript : Pour la robustesse du typage et la sécurité lors du développement.
shadcn/ui : Pour bénéficier d'une collection de composants accessibles et stylés.
TailwindCSS : Pour un design rapide, responsive et facilement personnalisable.
Framer Motion : Pour ajouter des animations fluides et modernes à chaque composant.

📦・Composants disponibles

Components d'interface

Button : Boutons avec variants (primary, secondary, outline) et animations hover/focus
Input : Champs de saisie avec validation et états d'erreur
Card : Conteneurs stylés avec effets de survol et animations
Modal : Dialogues modaux avec animations d'apparition/disparition
Tooltip : Info-bulles contextuelles avec positionnement intelligent

Navbar : Barre de navigation responsive avec menu mobile
Breadcrumb : Fil d'Ariane pour la navigation hiérarchique
Pagination : Navigation entre pages avec indicateurs visuels
Tabs : Onglets interactifs avec transitions fluides

Components de données

Table : Tableaux responsive avec tri et filtrage
Chart : Graphiques animés pour la visualisation de données
Progress : Barres de progression avec animations
Badge : Étiquettes colorées pour le statut et les catégories

⚡・Fonctionnalités clés

🎨 Design System

Tokens de design : Couleurs, espacements et typographies cohérents
Mode sombre/clair : Support natif du thème avec transition fluide
Responsive : Adaptation automatique sur tous les écrans
Accessibilité : Conformité WCAG 2.1 avec attributs ARIA appropriés

🚀 Performance

Tree shaking : Import sélectif pour réduire la taille du bundle
Lazy loading : Chargement différé des composants non critiques
Optimisation : Animations optimisées pour 60fps
SSR Ready : Compatible avec Next.js et autres frameworks SSR

🛠️ Developer Experience

TypeScript : Définitions de types complètes pour IntelliSense
Storybook : Documentation interactive et tests visuels
Jest & React Testing Library : Couverture complète des tests
API simple : Personnalisation facile des thèmes et variants

📚・Installation et utilisation

# Installation via npm
npm install @whoa-studio/ui

# Installation via yarn
yarn add @whoa-studio/ui

import { Button, Card, Input } from "@whoa-studio/ui";

function App() {
	return (
		<Card className="p-6">
			<h2>Exemple d'utilisation</h2>
			<Input placeholder="Votre nom" />
			<Button variant="primary" size="lg">
				Valider
			</Button>
		</Card>
	);
}