Brickslab.Lib

@brickslab./ui-web

Petit bloc affichant un indicateur de performance clé (label, valeur et aide). Utilisé dans le dashboard d'accueil.

Aperçu

Cartes simples

Tests verts

94%

Moyenne des suites

Nouveaux

Ce mois

Sections

Prêtes

animate + colorScheme="auto" (vert ≥80, amber 60-79, rouge <60)

Audit qualité · 7 axesScore moyen

0/100

41 tests × 47 composants

CouvertureTests passants

0/100

Score intermédiaire

A11yAccessibilité

0/100

À améliorer

Props

Prop	Type	Défaut	Requis	Description
`label`	`string`	—	✓	Titre principal du KPI.
`value`	`string`	—	✓	Valeur principale affichée en grand.
`helper`	`string`	—	—	Texte secondaire affiché sous la valeur.
`eyebrow`	`string`	—	—	Petit label uppercase au-dessus du titre. Utile pour catégoriser le KPI (ex. : « Audit qualité · 7 axes »).
`icon`	`ReactNode`	—	—	Icône affichée dans un badge brand en haut à droite de la carte.
`suffix`	`string`	—	—	Texte accolé à la valeur (ex. : « /100 », « % »). Agrandit aussi la taille de la valeur.
`progress`	`number`	—	—	Valeur 0-100 pour afficher une ProgressBar sous la valeur. Masquée si loading est true.
`loading`	`boolean`	—	—	Masque la ProgressBar pendant le chargement des données.
`animate`	`boolean`	—	—	Active NumberTicker sur la valeur (doit être numérique). L'animation se déclenche à l'entrée dans le viewport.
`colorScheme`	`"auto" \| "brand" \| "green" \| "amber" \| "red"`	—	—	Couleur appliquée à la valeur et à la ProgressBar. "auto" choisit automatiquement selon progress : vert ≥80, amber 60-79, rouge <60.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  label="..."
  value="..."
  helper="..."
  eyebrow="..."
  icon={<span>...</span>}
  suffix="..."
  progress={0}
  loading={true}
  // +2 autres props disponibles
/>

labelvaluehelpereyebrowiconsuffixprogressloadinganimatecolorScheme

Utilisation

tsx

import { KpiCard } from "@brickslab./ui-web";
import { FiAward } from "react-icons/fi";

// Carte simple
<KpiCard label="Tests verts" value="94%" helper="Suite unitaire" />

// Carte animée avec colorScheme auto
<KpiCard
  eyebrow="Audit qualité · 7 axes"
  label="Score moyen"
  icon={<FiAward size={14} />}
  value="87"
  suffix="/100"
  progress={87}
  helper="41 tests × 47 composants"
  animate
  colorScheme="auto"
/>