Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
95 lines
3.1 KiB
Markdown
95 lines
3.1 KiB
Markdown
---
|
|
name: kpi_card
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "2.0.0"
|
|
purity: impure
|
|
signature: "KPICard(props: KPICardProps): JSX.Element"
|
|
description: "Card de KPI con label, valor+unidad, delta descriptivo con color semántico, icono, slot de chart inline y action. 3 tamaños."
|
|
tags: [kpi, card, metrics, dashboard, component, ui, sparkline]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: [react]
|
|
output: "Componente KPICard que renderiza card de métrica con label, valor, delta descriptivo, icono y slot de mini chart"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/kpi_card.tsx"
|
|
props:
|
|
- name: label
|
|
type: "string"
|
|
required: true
|
|
description: "Etiqueta del KPI"
|
|
- name: value
|
|
type: "string | number"
|
|
required: true
|
|
description: "Valor principal"
|
|
- name: unit
|
|
type: "string"
|
|
required: false
|
|
description: "Unidad junto al valor en font menor (ej: k, ms, %)"
|
|
- name: delta
|
|
type: "{ value: number; isPositive: boolean; label?: string; suffix?: string }"
|
|
required: false
|
|
description: "Cambio con dirección, label descriptivo y sufijo"
|
|
- name: icon
|
|
type: "ReactNode"
|
|
required: false
|
|
description: "Icono a la izquierda del label"
|
|
- name: action
|
|
type: "ReactNode"
|
|
required: false
|
|
description: "Slot top-right para menú o acciones"
|
|
- name: chart
|
|
type: "ReactNode"
|
|
required: false
|
|
description: "Slot para mini chart inline junto al valor"
|
|
- name: size
|
|
type: "'sm' | 'default' | 'lg'"
|
|
required: false
|
|
description: "Tamaño"
|
|
emits: []
|
|
has_state: false
|
|
framework: react
|
|
variant: [sm, default, lg]
|
|
source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
|
|
source_license: "MIT"
|
|
source_file: "frontend/src/components/ui/kpi-card.tsx"
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { KPICard, Sparkline } from '@fn_library'
|
|
|
|
{/* Básico */}
|
|
<KPICard label="Revenue" value="$12,450" delta={{ value: 12.5, isPositive: true }} />
|
|
|
|
{/* Con unidad separada, delta descriptivo, y mini barras */}
|
|
<KPICard
|
|
label="Processed Prompts"
|
|
value="124"
|
|
unit="k"
|
|
icon={<ZapIcon className="h-4 w-4" />}
|
|
delta={{ value: 15, isPositive: true, label: "Prompts Increased by", suffix: "vs yesterday" }}
|
|
chart={<Sparkline data={[5, 8, 3, 9, 6, 12, 7]} variant="bar" colors={['#3b82f6', '#8b5cf6', '#f59e0b', '#10b981', '#ef4444', '#ec4899', '#06b6d4']} height={32} />}
|
|
action={<button className="text-muted-foreground hover:text-foreground">...</button>}
|
|
/>
|
|
|
|
{/* Dashboard dark sin bordes */}
|
|
<KPICard label="Sessions" value={9821} className="border-0 shadow-none" />
|
|
```
|
|
|
|
## Notas
|
|
|
|
- El icono ahora se renderiza a la **izquierda** del label (antes estaba a la derecha).
|
|
- `unit` separa la unidad del valor con font menor para el efecto "124 k" del diseño.
|
|
- `delta.label` y `delta.suffix` permiten texto descriptivo: "Increased by ▲ +15% vs yesterday".
|
|
- `chart` es un slot genérico — pasar un `<Sparkline variant="bar" colors={[...]} />` para mini barras multicolor.
|
|
- `action` es un slot top-right para menú contextual.
|
|
- Usa `cn()` para merge de clases. `className="border-0 shadow-none"` para dashboards dark.
|