# 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