towercontrol/UI_COMPONENTS_GUIDE.md

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>

Avatar

// 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