ACore UI Library

Paquete npm actual: acore-ui

Biblioteca UI React para dashboards, tablas, formularios, navegacion lateral, feedback y overlays con una direccion visual consistente.

Instalacion

pnpm add acore-ui react react-dom

Peer dependencies soportadas:

• react >=18
• react-dom >=18

Uso basico

import { Button, Card, Table, TableCell, TableHeader } from 'acore-ui';
import 'acore-ui/styles.css';

export function RevenuePanel() {
  return (
    <Card title="Quarter pipeline">
      <Table>
        <thead>
          <tr>
            <TableHeader>Account</TableHeader>
            <TableHeader align="right">ARR</TableHeader>
          </tr>
        </thead>
        <tbody>
          <tr>
            <TableCell>Acme</TableCell>
            <TableCell isNumeric>$84,200</TableCell>
          </tr>
        </tbody>
      </Table>
      <Button>Export</Button>
    </Card>
  );
}

Importar estilos

La libreria expone un stylesheet unico:

import 'acore-ui/styles.css';

Ese archivo incluye tokens, reset y estilos de todos los componentes exportados.

Theming y personalizacion

La libreria se puede customizar completa al instalarse. Hay dos caminos:

• CSS variables para overrides estaticos
• API JavaScript para generar y aplicar una paleta en runtime

Ejemplo rapido:

import {
  applyAcoreTheme,
  createAcoreTheme,
} from 'acore-ui';

const theme = createAcoreTheme({
  primary: '#5dd6ff',
  background: '#0f1726',
});

applyAcoreTheme({
  ...theme,
  danger: '#ff7b72',
});

Tambien puedes sobrescribir tokens directamente:

:root {
  --color-bg-page: #0f1726;
  --color-bg-card: #162033;
  --color-primary: #5dd6ff;
  --color-accent: #7c9bff;
}

Documentacion completa:

• THEMING.md
• src/styles/README.md

Componentes

Foundation:

• Badge
• Text
• IconSlot

Layout:

• Card
• Container
• Grid
• Stack
• Divider
• SectionHeader

Forms:

• Button
• Input
• Textarea
• Select
• Checkbox
• Radio
• Switch

Navigation:

• Sidebar
• SidebarItem
• Breadcrumb
• Tabs
• Dropdown

Data Display:

• Table
• TableHeader
• TableCell
• ProgressBar
• BarChart

Feedback:

• Alert
• EmptyState
• Skeleton
• LoadingState

Overlays:

• Modal
• Drawer
• Tooltip

Reglas visuales

• Usa siempre tokens del paquete en lugar de colores, radios o espaciados hardcodeados.
• Mantiene una grilla base de 8px.
• No supera radios de 8px.
• Reutiliza --shadow-card como sombra base.
• Conserva :focus-visible en cualquier control interactivo nuevo.
• Importa styles.css una sola vez por aplicacion.

Desarrollo

Desde la raiz del monorepo:

pnpm install
pnpm build
pnpm test
pnpm test:coverage
pnpm lint
pnpm build-storybook
pnpm --filter docs dev

Documentacion y pruebas

• Docs app: pnpm --filter docs dev
• Docs build: pnpm --filter docs build
• Storybook estatico: pnpm build-storybook
• Tests de la libreria: pnpm --filter acore-ui test
• Coverage de la libreria: pnpm --filter acore-ui test:coverage

Contribuir

Revisa:

• CONTRIBUTING.md
• LOCAL_CONSUMPTION.md
• RELEASE_CHECKLIST.md
• THEMING.md

Licencia

ACore UI is publicly installable, but it is not open source software. See LICENSE.md for permitted usage and restrictions.

Estado

Version actual: 1.0.0