@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/templates/skills/ui-components/responsive-guidelines.md

@@ -1,278 +1,278 @@
-# SmartStack Responsive Design Guidelines
-
-> **Objectif:** Toutes les pages SmartStack DOIVENT etre 100% responsives.
-> Strategy: Progressive degradation (Desktop → Tablet → Mobile)
-
----
-
-## REGLE ABSOLUE
-
-```
-Toute page avec un tableau DOIT implementer:
-1. Desktop (lg+)  → Tableau complet avec toutes les colonnes
-2. Tablette (md)  → Tableau avec colonnes secondaires masquees
-3. Mobile (<md)   → Vue carte (cards), pas de tableau
-```
-
----
-
-## Pattern: Table Responsive + Cards Mobile
-
-### Structure JSX
-
-```tsx
-// ============================================================
-// CONTENU RESPONSIVE
-// ============================================================
-
-{/* Mobile: Toujours afficher les cartes */}
-<div className="md:hidden">
-  {renderCardsView()}
-</div>
-
-{/* Tablette+: Afficher la vue selectionnee */}
-<div className="hidden md:block">
-  {viewMode === 'table' && renderTableView()}
-  {viewMode === 'cards' && renderCardsView()}
-  {viewMode === 'kanban' && renderKanbanView()}
-</div>
-```
-
-### ViewToggle (masquer sur mobile)
-
-```tsx
-{/* View Toggle - masque sur mobile (toujours cartes sur mobile) */}
-<div className="hidden md:block">
-  <ViewToggle
-    viewMode={viewMode}
-    onChange={setViewMode}
-    tableLabel="Table"
-    cardsLabel="Cards"
-    kanbanLabel="Kanban"
-  />
-</div>
-```
-
----
-
-## Pattern: Colonnes Responsives dans Table
-
-### Priorite des colonnes
-
-| Priorite | Breakpoint | Exemple colonnes |
-|----------|------------|------------------|
-| 1 - Critique | Toujours visible | Nom, Status, Actions |
-| 2 - Important | `md:table-cell` | Email, Role |
-| 3 - Secondaire | `lg:table-cell` | Date creation |
-| 4 - Optionnel | `xl:table-cell` | Source, Groupe, Audit |
-
-### Implementation
-
-```tsx
-<thead>
-  <tr className="bg-[var(--bg-secondary)]">
-    {/* Toujours visible */}
-    <th className="px-4 py-3">Nom</th>
-
-    {/* Visible md+ (tablette) */}
-    <th className="px-4 py-3 hidden md:table-cell">Email</th>
-
-    {/* Visible lg+ (desktop) */}
-    <th className="px-4 py-3 hidden lg:table-cell">Role</th>
-
-    {/* Toujours visible */}
-    <th className="px-4 py-3">Status</th>
-
-    {/* Visible xl+ (grand ecran) */}
-    <th className="px-4 py-3 hidden xl:table-cell">Source</th>
-    <th className="px-4 py-3 hidden xl:table-cell">Groupe</th>
-
-    {/* Toujours visible */}
-    <th className="px-4 py-3">Actions</th>
-  </tr>
-</thead>
-
-<tbody>
-  {items.map(item => (
-    <tr key={item.id}>
-      <td className="px-4 py-3">{item.name}</td>
-      <td className="px-4 py-3 hidden md:table-cell">{item.email}</td>
-      <td className="px-4 py-3 hidden lg:table-cell">{item.role}</td>
-      <td className="px-4 py-3">{item.status}</td>
-      <td className="px-4 py-3 hidden xl:table-cell">{item.source}</td>
-      <td className="px-4 py-3 hidden xl:table-cell">{item.group}</td>
-      <td className="px-4 py-3">{/* Actions */}</td>
-    </tr>
-  ))}
-</tbody>
-```
-
-### Afficher info masquee sur petits ecrans
-
-```tsx
-{/* Dans la cellule Nom, afficher l'email sur mobile */}
-<td className="px-4 py-3">
-  <div className="font-medium">{item.name}</div>
-  {/* Email visible uniquement sur mobile (quand colonne email masquee) */}
-  <div className="text-sm text-[var(--text-tertiary)] md:hidden">
-    {item.email}
-  </div>
-</td>
-```
-
----
-
-## Pattern: Cards View
-
-### Grid responsive
-
-```tsx
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-  {items.map(item => (
-    <div key={item.id} className="card p-4">
-      {/* Header avec avatar et status */}
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-3">
-          <Avatar name={item.name} />
-          <div>
-            <div className="font-medium">{item.name}</div>
-            <div className="text-sm text-[var(--text-tertiary)]">{item.email}</div>
-          </div>
-        </div>
-        <StatusBadge status={item.status} />
-      </div>
-
-      {/* Corps avec infos supplementaires */}
-      <div className="space-y-2 mb-4">
-        <div className="flex items-center gap-2 text-sm">
-          <Shield className="w-4 h-4 text-[var(--text-tertiary)]" />
-          <span>{item.role}</span>
-        </div>
-      </div>
-
-      {/* Actions */}
-      <div className="flex items-center justify-end gap-1 pt-3 border-t border-[var(--border-color)]">
-        <button className="btn btn-ghost p-2">
-          <Eye className="w-4 h-4" />
-        </button>
-        <button className="btn btn-ghost p-2">
-          <Edit2 className="w-4 h-4" />
-        </button>
-      </div>
-    </div>
-  ))}
-</div>
-```
-
----
-
-## Pattern: Header Responsive
-
-```tsx
-<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-  <div>
-    <h1 className="text-2xl font-bold">{title}</h1>
-    <p className="text-sm text-[var(--text-tertiary)] mt-1">
-      {count} elements
-    </p>
-  </div>
-  <div className="flex items-center gap-2">
-    <button className="btn btn-primary">
-      <Plus className="w-4 h-4" />
-      <span className="hidden sm:inline">Creer</span>
-    </button>
-  </div>
-</div>
-```
-
----
-
-## Pattern: Filters Responsive
-
-```tsx
-{/* Barre de recherche + filtres */}
-<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-  {/* Recherche - pleine largeur sur mobile */}
-  <div className="flex items-center gap-3 flex-1">
-    <div className="relative flex-1 max-w-md">
-      <input type="text" className="input w-full" />
-    </div>
-    <button className="btn btn-secondary">
-      <Filter className="w-4 h-4" />
-      <span className="hidden sm:inline">Filtres</span>
-    </button>
-  </div>
-
-  {/* View Toggle - masque sur mobile */}
-  <div className="hidden md:block">
-    <ViewToggle viewMode={viewMode} onChange={setViewMode} />
-  </div>
-</div>
-
-{/* Panel filtres avances */}
-{showFilters && (
-  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-    {/* Chaque filtre */}
-  </div>
-)}
-```
-
----
-
-## Breakpoints Tailwind Reference
-
-| Breakpoint | Min Width | Usage |
-|------------|-----------|-------|
-| `sm:` | 640px | Petit mobile → Grand mobile |
-| `md:` | 768px | Mobile → Tablette |
-| `lg:` | 1024px | Tablette → Desktop |
-| `xl:` | 1280px | Desktop → Grand ecran |
-| `2xl:` | 1536px | Grand ecran |
-
----
-
-## Checklist Responsive
-
-Avant de valider une page, verifier:
-
-- [ ] **Mobile** : Vue carte fonctionne (pas de tableau)
-- [ ] **Tablette** : Colonnes secondaires masquees
-- [ ] **Desktop** : Toutes les colonnes visibles
-- [ ] **ViewToggle** : Masque sur mobile
-- [ ] **Boutons** : Texte masque sur petit ecran (`hidden sm:inline`)
-- [ ] **Header** : Stack vertical sur mobile (`flex-col sm:flex-row`)
-- [ ] **Filtres** : Grid responsive (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`)
-- [ ] **Cards** : Grid responsive (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)
-
----
-
-## Anti-Patterns a Eviter
-
-```tsx
-// ❌ MAUVAIS: Pas de breakpoint
-<th>Email</th>
-
-// ✅ BON: Avec breakpoint responsive
-<th className="hidden md:table-cell">Email</th>
-```
-
-```tsx
-// ❌ MAUVAIS: Meme vue partout
-{viewMode === 'table' && renderTableView()}
-
-// ✅ BON: Cards forces sur mobile
-<div className="md:hidden">{renderCardsView()}</div>
-<div className="hidden md:block">
-  {viewMode === 'table' && renderTableView()}
-</div>
-```
-
-```tsx
-// ❌ MAUVAIS: ViewToggle visible sur mobile
-<ViewToggle viewMode={viewMode} onChange={setViewMode} />
-
-// ✅ BON: Masque sur mobile
-<div className="hidden md:block">
-  <ViewToggle viewMode={viewMode} onChange={setViewMode} />
-</div>
-```
+# SmartStack Responsive Design Guidelines
+
+> **Objectif:** Toutes les pages SmartStack DOIVENT etre 100% responsives.
+> Strategy: Progressive degradation (Desktop → Tablet → Mobile)
+
+---
+
+## REGLE ABSOLUE
+
+```
+Toute page avec un tableau DOIT implementer:
+1. Desktop (lg+)  → Tableau complet avec toutes les colonnes
+2. Tablette (md)  → Tableau avec colonnes secondaires masquees
+3. Mobile (<md)   → Vue carte (cards), pas de tableau
+```
+
+---
+
+## Pattern: Table Responsive + Cards Mobile
+
+### Structure JSX
+
+```tsx
+// ============================================================
+// CONTENU RESPONSIVE
+// ============================================================
+
+{/* Mobile: Toujours afficher les cartes */}
+<div className="md:hidden">
+  {renderCardsView()}
+</div>
+
+{/* Tablette+: Afficher la vue selectionnee */}
+<div className="hidden md:block">
+  {viewMode === 'table' && renderTableView()}
+  {viewMode === 'cards' && renderCardsView()}
+  {viewMode === 'kanban' && renderKanbanView()}
+</div>
+```
+
+### ViewToggle (masquer sur mobile)
+
+```tsx
+{/* View Toggle - masque sur mobile (toujours cartes sur mobile) */}
+<div className="hidden md:block">
+  <ViewToggle
+    viewMode={viewMode}
+    onChange={setViewMode}
+    tableLabel="Table"
+    cardsLabel="Cards"
+    kanbanLabel="Kanban"
+  />
+</div>
+```
+
+---
+
+## Pattern: Colonnes Responsives dans Table
+
+### Priorite des colonnes
+
+| Priorite | Breakpoint | Exemple colonnes |
+|----------|------------|------------------|
+| 1 - Critique | Toujours visible | Nom, Status, Actions |
+| 2 - Important | `md:table-cell` | Email, Role |
+| 3 - Secondaire | `lg:table-cell` | Date creation |
+| 4 - Optionnel | `xl:table-cell` | Source, Groupe, Audit |
+
+### Implementation
+
+```tsx
+<thead>
+  <tr className="bg-[var(--bg-secondary)]">
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Nom</th>
+
+    {/* Visible md+ (tablette) */}
+    <th className="px-4 py-3 hidden md:table-cell">Email</th>
+
+    {/* Visible lg+ (desktop) */}
+    <th className="px-4 py-3 hidden lg:table-cell">Role</th>
+
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Status</th>
+
+    {/* Visible xl+ (grand ecran) */}
+    <th className="px-4 py-3 hidden xl:table-cell">Source</th>
+    <th className="px-4 py-3 hidden xl:table-cell">Groupe</th>
+
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Actions</th>
+  </tr>
+</thead>
+
+<tbody>
+  {items.map(item => (
+    <tr key={item.id}>
+      <td className="px-4 py-3">{item.name}</td>
+      <td className="px-4 py-3 hidden md:table-cell">{item.email}</td>
+      <td className="px-4 py-3 hidden lg:table-cell">{item.role}</td>
+      <td className="px-4 py-3">{item.status}</td>
+      <td className="px-4 py-3 hidden xl:table-cell">{item.source}</td>
+      <td className="px-4 py-3 hidden xl:table-cell">{item.group}</td>
+      <td className="px-4 py-3">{/* Actions */}</td>
+    </tr>
+  ))}
+</tbody>
+```
+
+### Afficher info masquee sur petits ecrans
+
+```tsx
+{/* Dans la cellule Nom, afficher l'email sur mobile */}
+<td className="px-4 py-3">
+  <div className="font-medium">{item.name}</div>
+  {/* Email visible uniquement sur mobile (quand colonne email masquee) */}
+  <div className="text-sm text-[var(--text-tertiary)] md:hidden">
+    {item.email}
+  </div>
+</td>
+```
+
+---
+
+## Pattern: Cards View
+
+### Grid responsive
+
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  {items.map(item => (
+    <div key={item.id} className="card p-4">
+      {/* Header avec avatar et status */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-3">
+          <Avatar name={item.name} />
+          <div>
+            <div className="font-medium">{item.name}</div>
+            <div className="text-sm text-[var(--text-tertiary)]">{item.email}</div>
+          </div>
+        </div>
+        <StatusBadge status={item.status} />
+      </div>
+
+      {/* Corps avec infos supplementaires */}
+      <div className="space-y-2 mb-4">
+        <div className="flex items-center gap-2 text-sm">
+          <Shield className="w-4 h-4 text-[var(--text-tertiary)]" />
+          <span>{item.role}</span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-1 pt-3 border-t border-[var(--border-color)]">
+        <button className="btn btn-ghost p-2">
+          <Eye className="w-4 h-4" />
+        </button>
+        <button className="btn btn-ghost p-2">
+          <Edit2 className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  ))}
+</div>
+```
+
+---
+
+## Pattern: Header Responsive
+
+```tsx
+<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+  <div>
+    <h1 className="text-2xl font-bold">{title}</h1>
+    <p className="text-sm text-[var(--text-tertiary)] mt-1">
+      {count} elements
+    </p>
+  </div>
+  <div className="flex items-center gap-2">
+    <button className="btn btn-primary">
+      <Plus className="w-4 h-4" />
+      <span className="hidden sm:inline">Creer</span>
+    </button>
+  </div>
+</div>
+```
+
+---
+
+## Pattern: Filters Responsive
+
+```tsx
+{/* Barre de recherche + filtres */}
+<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+  {/* Recherche - pleine largeur sur mobile */}
+  <div className="flex items-center gap-3 flex-1">
+    <div className="relative flex-1 max-w-md">
+      <input type="text" className="input w-full" />
+    </div>
+    <button className="btn btn-secondary">
+      <Filter className="w-4 h-4" />
+      <span className="hidden sm:inline">Filtres</span>
+    </button>
+  </div>
+
+  {/* View Toggle - masque sur mobile */}
+  <div className="hidden md:block">
+    <ViewToggle viewMode={viewMode} onChange={setViewMode} />
+  </div>
+</div>
+
+{/* Panel filtres avances */}
+{showFilters && (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    {/* Chaque filtre */}
+  </div>
+)}
+```
+
+---
+
+## Breakpoints Tailwind Reference
+
+| Breakpoint | Min Width | Usage |
+|------------|-----------|-------|
+| `sm:` | 640px | Petit mobile → Grand mobile |
+| `md:` | 768px | Mobile → Tablette |
+| `lg:` | 1024px | Tablette → Desktop |
+| `xl:` | 1280px | Desktop → Grand ecran |
+| `2xl:` | 1536px | Grand ecran |
+
+---
+
+## Checklist Responsive
+
+Avant de valider une page, verifier:
+
+- [ ] **Mobile** : Vue carte fonctionne (pas de tableau)
+- [ ] **Tablette** : Colonnes secondaires masquees
+- [ ] **Desktop** : Toutes les colonnes visibles
+- [ ] **ViewToggle** : Masque sur mobile
+- [ ] **Boutons** : Texte masque sur petit ecran (`hidden sm:inline`)
+- [ ] **Header** : Stack vertical sur mobile (`flex-col sm:flex-row`)
+- [ ] **Filtres** : Grid responsive (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`)
+- [ ] **Cards** : Grid responsive (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)
+
+---
+
+## Anti-Patterns a Eviter
+
+```tsx
+// ❌ MAUVAIS: Pas de breakpoint
+<th>Email</th>
+
+// ✅ BON: Avec breakpoint responsive
+<th className="hidden md:table-cell">Email</th>
+```
+
+```tsx
+// ❌ MAUVAIS: Meme vue partout
+{viewMode === 'table' && renderTableView()}
+
+// ✅ BON: Cards forces sur mobile
+<div className="md:hidden">{renderCardsView()}</div>
+<div className="hidden md:block">
+  {viewMode === 'table' && renderTableView()}
+</div>
+```
+
+```tsx
+// ❌ MAUVAIS: ViewToggle visible sur mobile
+<ViewToggle viewMode={viewMode} onChange={setViewMode} />
+
+// ✅ BON: Masque sur mobile
+<div className="hidden md:block">
+  <ViewToggle viewMode={viewMode} onChange={setViewMode} />
+</div>
+```