Instalación

Desde un plugin de Keirost

No hay nada que instalar ni que configurar. El ERP ya carga Claritas y le aplica el tema de la empresa, así que en el componente de tu plugin basta con importar:

ui/Page.tsx

import { Card, Table, Loader } from '@openfactu/ui';

Tu plugin hereda el tema del tenant automáticamente. Ver Interfaz de usuario en el tutorial de plugins.

El resto de esta página es para montar Claritas en una aplicación propia, fuera del ERP.

En una aplicación propia

1. Instalar el paquete

   npm install @openfactu/ui

   Son peer dependencies react y react-dom en ^19.0.0.

2. Importar la hoja de estilos

   Antes de las directivas de Tailwind:

   index.css

   @import '@openfactu/ui/styles.css';
   
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. Añadir el preset de Tailwind

   tailwind.config.js

   import uiPreset from '@openfactu/ui/tailwind-preset';
   import animated from 'tailwindcss-animated';
   
   export default {
     presets: [uiPreset],
     content: [
       './src/**/*.{ts,tsx}',
       './node_modules/@openfactu/ui/dist/**/*.{js,jsx}',
     ],
     plugins: [animated],
   };

La línea de `content` no es opcional

Sin './node_modules/@openfactu/ui/dist/**/*.{js,jsx}', el JIT de Tailwind no ve las clases que usan los componentes del paquete y los verás sin estilos. Es el fallo más común al montar la librería.

Qué importa cada hoja

La librería publica sus propios tokens: no hace falta que la aplicación los defina.

Import	Contiene
@openfactu/ui/styles.css	Todo: las variables más las animaciones
@openfactu/ui/tokens.css	Solo las variables
@openfactu/ui/keyframes.css	Solo las animaciones que los componentes referencian por nombre

Si solo necesitas las variables —por ejemplo para tematizar tu propio CSS sin usar los componentes— importa tokens.css y te ahorras el resto.

El preset de Tailwind

Mapea las utilidades de Tailwind a las variables de la hoja de estilos: bg-primary, text-accent, border-default y demás pasan a leer var(--color-primary-rgb) y compañía.

Cada var() lleva valor de reserva, así que un consumidor que se olvide de importar la hoja sigue viendo la marca por defecto en lugar de nada.

El preset declara darkMode: 'class' y no declara plugins a propósito: si usas las clases animate-in o fade-in-50, tienes que añadir tailwindcss-animated tú, para que una devDependency de la librería no se convierta en dependencia dura de tu proyecto.

Gráficos

Los gráficos completos viven en una subruta aparte porque usan recharts, declarada como peer dependency opcional:

npm install recharts

import { Chart } from '@openfactu/ui/charts';

Si no pintas gráficos no tienes que instalarla, y la entrada principal de la librería sigue sin dependencias de terceros. Las visualizaciones pequeñas (Sparkline, Ring, StackedBar) son SVG propio y salen de la entrada principal, así que no arrastran nada. Ver Gráficos.

Aplicar un tema

Con esto ya funciona todo con el tema por defecto. Para cambiarlo:

import { applyTheme } from '@openfactu/ui';

applyTheme({
  mode: 'light',
  colors: { primary: '#0A1628', accent: '#0D9488' },
});

Ver Temas para presets, tipografía, redondez y cómo evitar el parpadeo inicial.

Comprobar que ha funcionado

import { Button, Card } from '@openfactu/ui';

export default function App() {
  return (
    <Card>
      <Button variant="primary">Funciona</Button>
    </Card>
  );
}

Si el botón sale sin color de fondo, falta la línea de content del paso 3.

Diez componentes usan las clases animate-in para aparecer con transición: DropdownMenu, Select, SearchableSelect, DatePicker, Tooltip, Popup, Accordion, NavGroup, BulkActionsBar y GlobalLoader. Si estos aparecen de golpe, falta tailwindcss-animated en plugins.