@ichigocode/react-components

Componentes React reutilizables para aplicaciones de captura y consulta de datos: grids editables (DataGrid, TreeGrid, VerticalGrid), diagrama de Gantt (TreeGantt), entradas numéricas, combos con búsqueda, piezas de tablero y las primitivas de shadcn/Radix en las que se apoyan. Incluye el tema (claro y oscuro) para Tailwind 4.

No depende de ningún producto: sirve a cualquier proyecto con React 19 y Tailwind 4.

Requisitos

• React 19
• Tailwind CSS 4 en la app que la usa

Es para aplicaciones en español de Latinoamérica: los textos visibles están en español y los números, montos y fechas se formatean como es-MX. No hay i18n, por decisión de diseño.

Instalación

pnpm add @ichigocode/react-components

En la hoja de estilos principal de la app, después de Tailwind:

@import "tailwindcss";
@import "@ichigocode/react-components/styles.css";

La hoja trae los tokens del tema (--background, --primary, --muted…, con su variante .dark), la utilidad font-cifras (Geist Mono, incluida), las clases que usan los grids (row-zebra, row-new, row-edit…) y un @source para que Tailwind genere las clases de los componentes. No toca html ni body: la fuente, el fondo y el scroll de la página son de cada app.

El modo oscuro se activa con la clase dark en <html> (lo hace useTheme).

Uso

import { DataGrid, Toaster, type DataGridConfig } from "@ichigocode/react-components";

const config: DataGridConfig = {
  title: "Artículos",
  columns: [
    { field: "clave", header: "Clave", width: 110, readOnlyOnEdit: true },
    { field: "descripcion", header: "Descripción", width: 260, grow: true },
    { field: "precio", header: "Precio", width: 120, type: "number", displayFormat: { kind: "money", prefix: "$", decimals: 2 } },
  ],
};

export function Articulos({ rows, guardar }) {
  return (
    <div style={{ height: 400 }}>
      <DataGrid config={config} initialRows={rows} onEditRow={guardar} layoutKey="articulos" />
      <Toaster />
    </div>
  );
}

Los grids están virtualizados: necesitan un contenedor con alto definido.

Una columna icon muestra un ícono por fila, y lo que significa lo decide la app. cue devuelve el ícono, el texto (que sirve de tooltip y lo encuentra la búsqueda) y el color, o null para dejar la celda vacía:

import { Link2 } from "lucide-react";

{
  field: "importado", header: "Origen", width: 28,
  displayFormat: {
    kind: "icon",
    headerIcon: Link2,
    cue: (row) => row.importado
      ? { icon: Link2, title: row.editado ? "Importado (editado)" : "Importado", className: row.editado ? "text-amber-500" : undefined }
      : null,
  },
}

En playground/src/main.tsx hay un ejemplo de cada componente, primitiva y hook que exporta la librería (pnpm playground).

Qué incluye

| Grupo | Componentes | |---|---| | Grids | DataGrid, TreeGrid, VerticalGrid y sus tipos (DataGridConfig, DataGridColumn, Row…); layout persistente por usuario (layoutKey) | | Gantt | TreeGantt, GanttConfig, modelo y calendario laboral (ganttModel, ganttSchedule) | | Entradas | CurrencyInput, PercentageInput, QuantityInput, FormattedNumberInput, SearchInput, FilterableCombobox, AsyncFilterableCombobox, Field | | Estructura | EditorTabs, ActionBar, DialogActionBar, HoverRail, AccountMenu, NotificationButton, ThemeToggleButton | | Estado y avisos | StatTile, NoticeBand, ProgressBar, StageProgress, StepIndicator, OperationProgressDialog, toast y Toaster | | Primitivas | Button, Input, Select, Dialog, AlertDialog, Sheet, DropdownMenu, ContextMenu, Tabs, Resizable*, Slider, Avatar, Separator, Skeleton, MessageScroller | | Hooks | useTheme, useRowDrag, useStableEvent, toast |

Configuración

Los componentes guardan en localStorage el tema y el layout de cada grid, con el prefijo ichigocode-. Una app que viene de otro prefijo (por ejemplo, miapp-) lo fija una vez al arrancar, para que sus usuarios conserven lo guardado:

import { configureStorage } from "@ichigocode/react-components";

configureStorage({ prefix: "miapp-" });

Licencia

MIT. Ver LICENSE.

Desarrollo

pnpm install
pnpm playground     # http://127.0.0.1:5190, con los componentes en vivo
pnpm typecheck
pnpm test
pnpm build          # dist/: ESM por módulo, .d.ts y styles.css
pnpm pack           # para probar el paquete en otra app

Publicar una versión

El paquete se publica en npmjs.com desde la cuenta ichigocode. La primera vez en una máquina hay que iniciar sesión con pnpm login, que se confirma en el navegador con la llave de seguridad (2FA).

1. Con los cambios ya en main, con commit y en GitHub:

   git push

2. Subir el número de versión. Esto crea el commit y el tag vX.Y.Z:

   pnpm version patch   # 0.1.0 → 0.1.1: correcciones
   pnpm version minor   # 0.1.0 → 0.2.0: algo nuevo, sin romper lo existente
   pnpm version major   # 0.1.0 → 1.0.0: un cambio que rompe (props, tipos o exports)

3. Subir el tag y publicar:

   git push --follow-tags
   pnpm publish

   pnpm publish corre antes el typecheck, las pruebas y el build (prepublishOnly). Si algo falla, no publica.

npm revisa cada versión nueva antes de liberarla: durante uno o dos minutos la página puede mostrar un marcador 0.0.0-stage. Se publica sola, sin aprobar nada.

Para comprobarla:

npm view @ichigocode/react-components version

En los proyectos que la usan, se actualiza con pnpm update @ichigocode/react-components.