0e2eaf1052
- Updated `ThemeSelector` to use a new `ThemePreview` component for better theme visualization. - Refactored button implementation in `ThemeSelector` to utilize the new `Button` component, enhancing consistency. - Added a UI showcase section in `GeneralSettingsPageClient` to display available UI components with different themes. - Enhanced `Badge`, `Button`, and `Input` components with new variants and improved styling for better usability and visual appeal. - Updated CSS variables in `globals.css` for improved contrast and accessibility across themes.
2.5 KiB
2.5 KiB
Guide des Composants UI
🎯 Principe
Les composants métier ne doivent JAMAIS utiliser directement les variables CSS. Ils doivent utiliser les composants UI abstraits.
❌ MAUVAIS
// ❌ Composant métier avec variables CSS directes
function TaskCard({ task }) {
return (
<div className="bg-[var(--card)] border border-[var(--border)] p-4 rounded-lg">
<button className="bg-[var(--primary)] text-[var(--primary-foreground)] px-4 py-2 rounded">
{task.title}
</button>
</div>
);
}
✅ BON
// ✅ Composant métier utilisant les composants UI
import { Card, CardContent, Button } from '@/components/ui';
function TaskCard({ task }) {
return (
<Card>
<CardContent>
<Button variant="primary">
{task.title}
</Button>
</CardContent>
</Card>
);
}
📦 Composants UI Disponibles
Button
<Button variant="primary" size="md">Action</Button>
<Button variant="secondary">Secondaire</Button>
<Button variant="destructive">Supprimer</Button>
<Button variant="ghost">Ghost</Button>
Badge
<Badge variant="primary">Tag</Badge>
<Badge variant="success">Succès</Badge>
<Badge variant="destructive">Erreur</Badge>
Alert
<Alert variant="success">
<AlertTitle>Succès</AlertTitle>
<AlertDescription>Opération réussie</AlertDescription>
</Alert>
Input
<Input placeholder="Saisir..." />
<Input variant="error" placeholder="Erreur" />
StyledCard
<StyledCard variant="outline" color="primary">
Contenu avec style coloré
</StyledCard>
🔄 Migration
Étape 1: Identifier les patterns
- Rechercher
var(--dans les composants métier - Identifier les patterns répétés (boutons, cartes, badges)
Étape 2: Créer des composants UI
- Encapsuler les styles dans des composants UI
- Utiliser des variants pour les variations
Étape 3: Remplacer dans les composants métier
- Importer les composants UI
- Remplacer les éléments HTML par les composants UI
🎨 Avantages
- Consistance - Même apparence partout
- Maintenance - Changements centralisés
- Réutilisabilité - Composants réutilisables
- Type Safety - Props typées
- Performance - Styles optimisés
📝 Règles
- JAMAIS de variables CSS dans les composants métier
- TOUJOURS utiliser les composants UI
- CRÉER de nouveaux composants UI si nécessaire
- DOCUMENTER les nouveaux composants UI