UI

packages/ui/README.md

@repo/ui

Sistema de diseno y libreria de componentes reutilizables de Nidus.

1. Funcion del package

  • Proveer componentes base y shared para todas las apps.
  • Centralizar estilos globales y tokens semanticos.
  • Mantener una UX consistente entre productos del monorepo.

2. API publica

Exports principales:

  • @repo/ui -> componentes, hooks y utilidades
  • @repo/ui/globals.css -> estilos globales y tokens; las apps los importan desde su globals.css

3. Stack tecnico

  • React 19 y Next.js 16
  • Tailwind CSS v4
  • Radix UI
  • Class Variance Authority

4. Lineamientos de desarrollo

  1. Diseñar componentes como primitivas reutilizables.
  2. Evitar acoplar componentes a datos de una app puntual.
  3. Documentar variantes y props relevantes.
  4. Mantener accesibilidad (focus, keyboard, labels).

5. Buenas practicas

  • Exportar componentes desde barrels coherentes.
  • Mantener nomenclatura clara de variantes (default, outline, etc).
  • Reutilizar tokens de color de globals.css.

6. Como contribuir

bash
pnpm lint --filter @repo/ui
pnpm build --filter @repo/ui
pnpm check-types --filter @repo/ui

Si agregas un componente nuevo:

  1. Implementar en src/components/.
  2. Exportar en barrels correspondientes.
  3. Agregar showcase en apps/documentation/app/(dev)/ui/ cuando el componente necesite documentación visual.

Organización actual:

  • src/components/base: primitivas y componentes tipo shadcn/Radix.
  • src/components/shared: componentes reutilizables de producto.
  • src/components/landing: bloques visuales de landing reutilizables.
  • src/components/dashboard-nidus: componentes compartidos del dashboard.
  • src/styles/globals.css: tokens CSS y tema Tailwind v4.
  • src/hooks, src/types, src/fonts, src/utils: contratos y helpers publicados por el barrel.

7. Crear package nuevo basado en 01-base-package

Si una pieza no corresponde al sistema UI (por ejemplo integracion backend), crear un package separado desde 01-base-package en lugar de agregarlo aqui.