ffd3eb998a
- Added Avatar component with support for custom URLs and Gravatar integration, improving user profile visuals. - Implemented logic to determine avatar source based on user preferences in profile actions. - Updated ProfilePage to utilize the new Avatar component for better consistency. - Marked the integration of Gravatar and custom avatar handling as complete in TODO.md.
119 lines
2.8 KiB
Markdown
119 lines
2.8 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>
|
|
```
|
|
|
|
### Avatar
|
|
```tsx
|
|
// Avatar avec URL personnalisée
|
|
<Avatar url="https://example.com/photo.jpg" email="user@example.com" name="John Doe" size={64} />
|
|
|
|
// Avatar Gravatar automatique (si pas d'URL fournie)
|
|
<Avatar email="user@gravatar.com" name="Jane Doe" size={48} />
|
|
|
|
// Avatar avec fallback
|
|
<Avatar email="unknown@example.com" name="Unknown User" size={32} />
|
|
```
|
|
|
|
## 🔄 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
|