Indicateurs graphiques (stat)¶

Pour l’affichage d’indicateurs (statistiques, KPIs, dashboard), on privilégie un display inspiré du composant stat de FlyonUI :

Exemple :

<div class="stats">
  <div class="stat">
    <div class="stat-figure text-base-content size-8">
      <span class="icon-[tabler--world] size-8"></span>
    </div>
    <div class="stat-title">Website Traffic</div>
    <div class="stat-value">32K</div>
    <div class="stat-desc">5% ↗︎ than last week</div>
  </div>
  <div class="stat">
    <div class="stat-figure text-base-content size-8">
      <span class="icon-[tabler--users-group] size-8"></span>
    </div>
    <div class="stat-title">New Signups</div>
    <div class="stat-value">1.2K</div>
    <div class="stat-desc">12% increase this month</div>
  </div>
  <div class="stat">
    <div class="stat-figure size-12">
      <div class="avatar">
        <div class="size-12 rounded-full">
          <img
            src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png"
            alt="User Avatar"
          />
        </div>
      </div>
    </div>
    <div class="stat-value text-success">95%</div>
    <div class="stat-title">Customer Retention</div>
    <div class="stat-desc">Steady over last quarter</div>
  </div>
</div>

Référence : FlyonUI Stat Component

Ce style est recommandé pour les dashboards et les pages d’indicateurs clés.

Composants & UI¶

Organisation¶

Par feature : /src/components/{feature}/
UI générique : /src/components/ui/

shadcn/ui¶

Utilisation de composants shadcn pour rapidité et cohérence
Customisation via Tailwind

Exemples¶

BikeCard : Affichage d’un vélo
StravaConnectButton : Connexion à Strava
DashboardSidebar : Navigation dashboard

Bonnes pratiques¶

Props typées
Composants réutilisables et testables
Préférer la composition à l’héritage

Icônes (Design System)¶

Librairie unique : Lucide (lucide-react)
Règle : Utiliser exclusivement Lucide pour toutes les icônes UI (navigation, boutons, cards, feedback, etc.)
Style : Taille par défaut 24px, stroke-width 2, couleur currentColor (hérite du texte)
Astuces :
Pour les icônes custom, privilégier un équivalent Lucide ou soumettre une PR à Lucide
Pas de mélange avec Heroicons, Material, FontAwesome, etc.
Exceptions : Quelques SVG inline subsistent (ex : super-admin-user-accounts). À migrer vers Lucide si possible.

Mapping Lucide par concept¶

Concept	Icône Lucide principale	Alternatives Lucide
Notification	Bell	BellRing
Support / Ticket	LifeBuoy, HelpCircle, Ticket	MessagesSquare
Utilisateur / Compte	User, UserCircle, Users	Avatar
Édition	Edit
Déverrouillage	Unlock
Maintenance	Wrench, Tools	AlertTriangle, CheckCircle2
Message / Discussion	MessagesSquare, Mail	ChatBubble, Comment
Paramètres / Admin	Settings, Gear	SlidersHorizontal
Dashboard	LayoutDashboard
Sidebar / Menu	Menu, Sidebar
Vélo	Bike, Activity
Santé / Diagnostic	HeartPulse, Stethoscope	ShieldCheck
Push / Système	BellRing
Carte / Stack	Layers, Cards
Onglet / Navigation	Tab, ArrowRightLeft
Intégration / Connexion	Link2, Plug, LogIn, LogOut

Règles complémentaires¶

Choisir l’icône la plus explicite pour chaque concept métier.
Documenter chaque mapping ici pour garantir la cohérence visuelle.
Toute exception (SVG custom) doit être justifiée et documentée.

Exemple d’import :

import { Bike, Wrench, LogOut } from "lucide-react";

Exemple d’utilisation :

<Bike className="w-6 h-6 text-blue-500" />