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.
107 lines
2.5 KiB
Markdown
107 lines
2.5 KiB
Markdown
# 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
|
|
|
|
```tsx
|
|
// ❌ 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
|
|
|
|
```tsx
|
|
// ✅ 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
|
|
```tsx
|
|
<Button variant="primary" size="md">Action</Button>
|
|
<Button variant="secondary">Secondaire</Button>
|
|
<Button variant="destructive">Supprimer</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
```
|
|
|
|
### Badge
|
|
```tsx
|
|
<Badge variant="primary">Tag</Badge>
|
|
<Badge variant="success">Succès</Badge>
|
|
<Badge variant="destructive">Erreur</Badge>
|
|
```
|
|
|
|
### Alert
|
|
```tsx
|
|
<Alert variant="success">
|
|
<AlertTitle>Succès</AlertTitle>
|
|
<AlertDescription>Opération réussie</AlertDescription>
|
|
</Alert>
|
|
```
|
|
|
|
### Input
|
|
```tsx
|
|
<Input placeholder="Saisir..." />
|
|
<Input variant="error" placeholder="Erreur" />
|
|
```
|
|
|
|
### StyledCard
|
|
```tsx
|
|
<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
|
|
|
|
1. **Consistance** - Même apparence partout
|
|
2. **Maintenance** - Changements centralisés
|
|
3. **Réutilisabilité** - Composants réutilisables
|
|
4. **Type Safety** - Props typées
|
|
5. **Performance** - Styles optimisés
|
|
|
|
## 📝 Règles
|
|
|
|
1. **JAMAIS** de variables CSS dans les composants métier
|
|
2. **TOUJOURS** utiliser les composants UI
|
|
3. **CRÉER** de nouveaux composants UI si nécessaire
|
|
4. **DOCUMENTER** les nouveaux composants UI
|