initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,93 @@
+---
+name: data_table
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "DataTable(props: DataTableProps): JSX.Element"
+description: "Tabla de datos con sticky header, overflow scroll, heatmap por columna, formato condicional (number/datetime/currency) y hover rows. Auto-detecta columnas desde la primera fila si no se proveen."
+tags: [table, data, heatmap, dashboard, component, ui, format, visualization]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: [react, "@mantine/core"]
+output: "Componente DataTable que renderiza tabla con sticky header, heatmap condicional y formato automático de datos"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/data_table.tsx"
+props:
+  - name: data
+    type: "Record<string, unknown>[]"
+    required: true
+    description: "Filas de datos. Cada objeto es una fila."
+  - name: columns
+    type: "ColumnDef[]"
+    required: false
+    description: "Definición de columnas con key, label, format y align. Si se omite, se auto-detectan desde la primera fila."
+  - name: heatmapColumns
+    type: "string[]"
+    required: false
+    description: "Keys de columnas numéricas que deben colorearse por intensidad (azul oscuro=bajo, azul claro=alto)."
+  - name: maxHeight
+    type: "number | string"
+    required: false
+    description: "Altura máxima antes de scroll. Default 500px."
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Estado de carga. Muestra spinner si data está vacía."
+  - name: error
+    type: "Error | null"
+    required: false
+    description: "Error a mostrar si la carga falló."
+emits: []
+has_state: false
+framework: react
+variant: [default, heatmap]
+---
+
+## Ejemplo
+
+```tsx
+// Tabla simple con auto-detección de columnas
+<DataTable data={rows} />
+
+// Con columnas definidas y heatmap
+<DataTable
+  data={metrics}
+  columns={[
+    { key: 'domain', label: 'Domain' },
+    { key: 'count', label: 'Functions', format: ',' },
+    { key: 'pure_pct', label: 'Pure %', format: '.1f' },
+  ]}
+  heatmapColumns={['count', 'pure_pct']}
+/>
+
+// Con formato moneda y fecha
+<DataTable
+  data={transactions}
+  columns={[
+    { key: 'date', label: 'Date', format: 'datetime' },
+    { key: 'amount', label: 'Amount', format: '$,.2f', align: 'right' },
+    { key: 'description', label: 'Description' },
+  ]}
+/>
+```
+
+## Formatos soportados (campo `format` en ColumnDef)
+
+| format | Ejemplo input | Output |
+|--------|--------------|--------|
+| `','` | `1234567` | `1,234,567` |
+| `',.2f'` | `1234.5` | `1,234.50` |
+| `'$,.2f'` | `1234.5` | `$1,234.50` |
+| `'.0f'` | `42.7` | `43` |
+| `'datetime'` | `'2026-04-01T12:00:00Z'` | `4/1/2026, 12:00:00 PM` |
+
+## Notas
+
+Extraido y generalizado desde `apps/rapid_dashboards/frontend/src/components/widgets/TableWidget.tsx`. El heatmap usa `useMemo` para calcular min/max por columna solo cuando cambian `data` o `heatmapColumns`. La alineación de celdas numéricas es automática (derecha) cuando el valor es `typeof 'number'`; se puede sobreescribir con el campo `align` en ColumnDef.