@aurea-uds/react 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -34
- package/dist/navigation-client.js +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
# @aurea-uds/react
|
|
2
2
|
|
|
3
|
-
React
|
|
3
|
+
Os componentes React do **Aurea Universal Design System**.
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/icons
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Uso
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Carregue as fontes **antes** da folha de estilo — o core não embute mais a IBM Plex.
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import "@aurea-uds/fonts/css";
|
|
15
15
|
import "@aurea-uds/core/css";
|
|
16
|
-
import {AureaProvider, Button} from "@aurea-uds/react";
|
|
16
|
+
import {AureaProvider, Button, ptBR} from "@aurea-uds/react";
|
|
17
17
|
|
|
18
18
|
export default () => (
|
|
19
|
-
<AureaProvider spriteUrl="/aurea-icons.svg">
|
|
20
|
-
<Button variant="primary">
|
|
19
|
+
<AureaProvider spriteUrl="/aurea-icons.svg" strings={ptBR}>
|
|
20
|
+
<Button variant="primary">Enviar</Button>
|
|
21
21
|
</AureaProvider>
|
|
22
22
|
);
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
`spriteUrl`
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
`spriteUrl` aponta para o arquivo do `@aurea-uds/icons` — copie-o para onde o seu app serve
|
|
26
|
+
arquivos estáticos. É configuração, então mora no provider, e não em cada componente que desenha
|
|
27
|
+
um ícone. As frases padrão são em inglês; `strings={ptBR}` as troca pelas em português.
|
|
28
28
|
|
|
29
|
-
##
|
|
29
|
+
## Importar por categoria
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
O entry point principal funciona, mas cada categoria é também um entry point próprio, para você levar uma
|
|
32
|
+
parte do sistema sem o resto:
|
|
33
33
|
|
|
34
34
|
```js
|
|
35
35
|
import {Button} from "@aurea-uds/react/actions";
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
Button
|
|
38
|
+
Seis módulos trazem uma engine opcional e por isso ficam **fora do entry point principal** — importar um
|
|
39
|
+
`Button` nunca pode puxar uma dependência que você não instalou:
|
|
40
40
|
|
|
41
|
-
|
|
|
41
|
+
| Importe | Exige que você instale |
|
|
42
42
|
|---|---|
|
|
43
|
-
| `@aurea-uds/react/code-editor` | `codemirror`
|
|
43
|
+
| `@aurea-uds/react/code-editor` | `codemirror` e os pacotes `@codemirror/*` |
|
|
44
44
|
| `@aurea-uds/react/data-grid` | `@tanstack/react-table` |
|
|
45
45
|
| `@aurea-uds/react/qrcode` | `qr` |
|
|
46
46
|
| `@aurea-uds/react/calendar` | `react-day-picker` |
|
|
@@ -49,37 +49,37 @@ Button must never pull in a peer you did not install:
|
|
|
49
49
|
|
|
50
50
|
## Hooks
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
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
|
|
53
|
+
documenta componentes, e hook não é componente. Enquanto isso não mudar, é aqui que eles estão
|
|
54
|
+
escritos.
|
|
55
55
|
|
|
56
56
|
```js
|
|
57
57
|
import {AureaProvider, useToast} from "@aurea-uds/react";
|
|
58
58
|
|
|
59
|
-
function
|
|
60
|
-
const toast = useToast(); //
|
|
59
|
+
function BotaoSalvar() {
|
|
60
|
+
const toast = useToast(); // dentro do AureaProvider
|
|
61
61
|
return <Button onClick={() => toast.add({
|
|
62
|
-
title: "
|
|
63
|
-
description: "
|
|
62
|
+
title: "Salvo",
|
|
63
|
+
description: "Dois arquivos enviados.",
|
|
64
64
|
type: "success", // info | success | warning | danger
|
|
65
|
-
})}>
|
|
65
|
+
})}>Salvar</Button>;
|
|
66
66
|
}
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
A pilha se desenha sozinha: o `AureaProvider` já monta o viewport dos toasts, então não há
|
|
70
|
+
`<Toaster/>` para posicionar nem um segundo provider para instalar.
|
|
71
71
|
|
|
72
|
-
| Hook |
|
|
72
|
+
| Hook | O que entrega |
|
|
73
73
|
|---|---|
|
|
74
|
-
| `useToast()` | `add({title, description, type})`,
|
|
75
|
-
| `useAureaTheme()` |
|
|
76
|
-
| `useAureaStrings()` |
|
|
77
|
-
| `useSpriteUrl()` |
|
|
74
|
+
| `useToast()` | `add({title, description, type})`, mais `close(id)` e a lista viva. A fila é a do Base UI |
|
|
75
|
+
| `useAureaTheme()` | lê e muda **os dois** eixos no `<html>`: `theme` (`dark`/`light`) e `density`. `theme` é `null` no servidor — não desenhe o que depende do tema até ele deixar de ser |
|
|
76
|
+
| `useAureaStrings()` | o dicionário de frases, somado ao que você passou ao provider |
|
|
77
|
+
| `useSpriteUrl()` | de onde o sprite de ícones está sendo carregado |
|
|
78
78
|
|
|
79
|
-
##
|
|
79
|
+
## Requisitos
|
|
80
80
|
|
|
81
|
-
React 19
|
|
81
|
+
React 19 ou mais novo. No React 19 `ref` é prop comum, e os tipos dependem disso.
|
|
82
82
|
|
|
83
|
-
##
|
|
83
|
+
## Licença
|
|
84
84
|
|
|
85
85
|
Apache-2.0.
|
|
@@ -195,7 +195,7 @@ function sidebarList(items, ctx, sub, labelledBy) {
|
|
|
195
195
|
}
|
|
196
196
|
// A GAVETA FECHA AO ESCOLHER (A-06, 23/09/2026). Abaixo de lg a lateral do `AppShell` é popover,
|
|
197
197
|
// e a biblioteca a abria e NUNCA a fechava por código: `hidePopover` tinha zero ocorrências. O
|
|
198
|
-
// usuário tocava "
|
|
198
|
+
// usuário tocava "Relatórios", a página trocava por baixo e a gaveta ficava na frente dela. Material 3,
|
|
199
199
|
// Fluent 2 e o guia de gaveta do iOS fecham ao escolher. O fechamento mora NA LATERAL, e não no
|
|
200
200
|
// item, para valer também para a navegação que o consumidor escreve e passa como `children` — o
|
|
201
201
|
// catálogo é um desses. Fora do popover (desktop, lateral solta) o teste de `:popover-open` falha e
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurea-uds/react",
|
|
3
|
-
"version": "0.10.
|
|
4
|
-
"description": "React
|
|
3
|
+
"version": "0.10.1",
|
|
4
|
+
"description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"aurea",
|
|
7
7
|
"design-system",
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
"url": "git+https://github.com/victor1mor/aurea-uds.git",
|
|
16
16
|
"directory": "packages/react"
|
|
17
17
|
},
|
|
18
|
+
"homepage": "https://github.com/victor1mor/aurea-uds/tree/main/packages/react#readme",
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/victor1mor/aurea-uds/issues"
|
|
21
|
+
},
|
|
18
22
|
"publishConfig": {
|
|
19
23
|
"access": "public"
|
|
20
24
|
},
|