@aurea-uds/react

Os componentes React do Aurea Universal Design System.

pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/icons

Uso

Carregue as fontes antes da folha de estilo — o core não embute fonte nenhuma.

import "@aurea-uds/fonts/css";
import "@aurea-uds/core/css";
import {AureaProvider, Button, ptBR} from "@aurea-uds/react";

export default () => (
  <AureaProvider spriteUrl="/aurea-icons.svg" strings={ptBR}>
    <Button variant="primary">Enviar</Button>
  </AureaProvider>
);

spriteUrl aponta para o arquivo do @aurea-uds/icons — copie-o para onde o seu app serve arquivos estáticos. É configuração, então mora no provider, e não em cada componente que desenha um ícone. As frases padrão são em inglês; strings={ptBR} as troca pelas em português.

Importar por categoria

O entry point principal funciona, mas cada categoria é também um entry point próprio, para você levar uma parte do sistema sem o resto:

import {Button} from "@aurea-uds/react/actions";

Seis módulos trazem uma engine opcional e por isso ficam fora do entry point principal — importar um Button nunca pode puxar uma dependência que você não instalou:

O mapa (DependencyGraph) e as três peças opcionais dele

Cada uma só é carregada quando a função dela é pedida. Sem ela, o mapa avisa uma vez no console e segue sem a função — não quebra a tela.

O arrumador fora da tela principal (layoutWorker). Num mapa grande, a arrumação pode prender a tela por alguns segundos. O mapa aceita um trabalhador (Web Worker) que o app cria — cada empacotador cria trabalhador do seu jeito, e por isso quem entrega é o app. A Aurea publica o trabalhador por um caminho dela, @aurea-uds/react/graph-worker, que traz o do elkjs (o peer opcional) junto — o app não importa o motor por fora. No Vite:

import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";

<DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />

Em qualquer outro empacotador, o jeito que sempre funciona: copie node_modules/elkjs/lib/elk-worker.min.js para a pasta pública do app e passe layoutWorker={() => new Worker("/elk-worker.min.js")}.

Hooks

Quatro são públicos, e eles são a parte da API que não tem página no catálogo — o catálogo documenta componentes, e hook não é componente. Enquanto isso não mudar, é aqui que eles estão escritos.

import {AureaProvider, useToast} from "@aurea-uds/react";

function BotaoSalvar() {
  const toast = useToast();                                  // dentro do AureaProvider
  return <Button onClick={() => toast.add({
    title: "Salvo",
    description: "Dois arquivos enviados.",
    type: "success",                                         // info | success | warning | danger
  })}>Salvar</Button>;
}

A pilha se desenha sozinha: o AureaProvider já monta o viewport dos toasts, então não há <Toaster/> para posicionar nem um segundo provider para instalar.

Requisitos

React 19 ou mais novo. No React 19 ref é prop comum, e os tipos dependem disso.

Licença

Apache-2.0.