@aurea-uds/react 0.62.0 → 0.62.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 +47 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
1
|
# @aurea-uds/react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The React components of the **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
|
+
## Usage
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Load the fonts **before** the stylesheet — the core does not embed any font.
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import "@aurea-uds/fonts/css";
|
|
15
15
|
import "@aurea-uds/core/css";
|
|
16
|
-
import {AureaProvider, Button
|
|
16
|
+
import {AureaProvider, Button} 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">
|
|
20
|
+
<Button variant="primary">Send</Button>
|
|
21
21
|
</AureaProvider>
|
|
22
22
|
);
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
`spriteUrl`
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
`spriteUrl` points to the file from `@aurea-uds/icons` — copy it to where your app serves static files.
|
|
26
|
+
It is configuration, so it lives on the provider, not on each component that draws an icon. The default
|
|
27
|
+
strings are in English; `strings={ptBR}` swaps them for the Portuguese ones.
|
|
28
28
|
|
|
29
|
-
##
|
|
29
|
+
## Import by category
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
The main entry point works, but each category is also an entry point of its own, so you can take one
|
|
32
|
+
part of the system without the rest:
|
|
33
33
|
|
|
34
34
|
```js
|
|
35
35
|
import {Button} from "@aurea-uds/react/actions";
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
`Button`
|
|
38
|
+
Six modules bring an optional engine and therefore stay **out of the main entry point** — importing a
|
|
39
|
+
`Button` must never pull in a dependency you did not install:
|
|
40
40
|
|
|
41
|
-
|
|
|
41
|
+
| Import | Requires you to install |
|
|
42
42
|
|---|---|
|
|
43
|
-
| `@aurea-uds/react/code-editor` | `codemirror`
|
|
43
|
+
| `@aurea-uds/react/code-editor` | `codemirror` and the `@codemirror/*` packages |
|
|
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` |
|
|
47
47
|
| `@aurea-uds/react/chart` | `recharts` |
|
|
48
48
|
| `@aurea-uds/react/graph` | `@xyflow/react` |
|
|
49
49
|
|
|
50
|
-
###
|
|
50
|
+
### The graph (`DependencyGraph`) and its three optional pieces
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
Each one is loaded only when its feature is requested. Without it, the graph warns once in the console
|
|
53
|
+
and carries on without the feature — it does not break the screen.
|
|
54
54
|
|
|
55
|
-
|
|
|
55
|
+
| For | Install |
|
|
56
56
|
|---|---|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
57
|
+
| layered, tree or circular layout (`layout="layered"`, `"tree"`, `"radial"`) | `elkjs` |
|
|
58
|
+
| the edge that routes around a node after manual arranging | `@tisoap/react-flow-smart-edge` |
|
|
59
|
+
| an image of the graph (`toPng()`, `toSvg()`) | `modern-screenshot` |
|
|
60
60
|
|
|
61
|
-
**
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
**Layout off the main thread (`layoutWorker`).** On a large graph, the layout can freeze the screen for a
|
|
62
|
+
few seconds. The graph accepts a Web Worker that the app creates — every bundler creates workers its own
|
|
63
|
+
way, so the app is the one that supplies it. Aurea publishes the worker on its own entry point,
|
|
64
|
+
`@aurea-uds/react/graph-worker`, which brings the `elkjs` worker (the optional peer) along — the app does
|
|
65
|
+
not import the engine separately. In Vite:
|
|
66
66
|
|
|
67
67
|
```js
|
|
68
68
|
import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
|
|
@@ -70,42 +70,42 @@ import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
|
|
|
70
70
|
<DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
In any other bundler, the way that always works: copy `node_modules/elkjs/lib/elk-worker.min.js` to the
|
|
74
|
+
app's public folder and pass `layoutWorker={() => new Worker("/elk-worker.min.js")}`.
|
|
75
75
|
|
|
76
76
|
## Hooks
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
Four are public, and they are the part of the API that **has no page in the catalog** — the catalog
|
|
79
|
+
documents components, and a hook is not a component. Until that changes, this is where they are written
|
|
80
|
+
down.
|
|
81
81
|
|
|
82
82
|
```js
|
|
83
83
|
import {AureaProvider, useToast} from "@aurea-uds/react";
|
|
84
84
|
|
|
85
85
|
function BotaoSalvar() {
|
|
86
|
-
const toast = useToast(); //
|
|
86
|
+
const toast = useToast(); // inside AureaProvider
|
|
87
87
|
return <Button onClick={() => toast.add({
|
|
88
|
-
title: "
|
|
89
|
-
description: "
|
|
88
|
+
title: "Saved",
|
|
89
|
+
description: "Two files uploaded.",
|
|
90
90
|
type: "success", // info | success | warning | danger
|
|
91
|
-
})}>
|
|
91
|
+
})}>Save</Button>;
|
|
92
92
|
}
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
The stack draws itself: `AureaProvider` already mounts the toast viewport, so there is no `<Toaster/>` to
|
|
96
|
+
place and no second provider to install.
|
|
97
97
|
|
|
98
|
-
| Hook |
|
|
98
|
+
| Hook | What it returns |
|
|
99
99
|
|---|---|
|
|
100
|
-
| `useToast()` | `add({title, description, type})`,
|
|
101
|
-
| `useAureaTheme()` |
|
|
102
|
-
| `useAureaStrings()` |
|
|
103
|
-
| `useSpriteUrl()` |
|
|
100
|
+
| `useToast()` | `add({title, description, type})`, plus `close(id)` and the live list. The queue is Base UI's |
|
|
101
|
+
| `useAureaTheme()` | reads and changes **both** axes on `<html>`: `theme` (`dark`/`light`) and `density`. `theme` is `null` on the server — do not render what depends on the theme until it stops being `null` |
|
|
102
|
+
| `useAureaStrings()` | the string dictionary, merged with what you passed to the provider |
|
|
103
|
+
| `useSpriteUrl()` | where the icon sprite is being loaded from |
|
|
104
104
|
|
|
105
|
-
##
|
|
105
|
+
## Requirements
|
|
106
106
|
|
|
107
|
-
React 19
|
|
107
|
+
React 19 or newer. In React 19 `ref` is a regular prop, and the types depend on that.
|
|
108
108
|
|
|
109
|
-
##
|
|
109
|
+
## License
|
|
110
110
|
|
|
111
111
|
Apache-2.0.
|