@threelight/ui-react 0.1.0-alpha.0 → 0.2.0-alpha.0
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 +27 -41
- package/dist/index.d.ts +136 -1176
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +166 -76
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,71 +1,57 @@
|
|
|
1
1
|
# @threelight/ui-react
|
|
2
2
|
|
|
3
|
-
React adapters for the ThreeLight
|
|
3
|
+
React DOM adapters for the ThreeLight short-class CSS contract.
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
pnpm add @threelight/ui@alpha @threelight/ui-react@alpha
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
metadata, and public `tl-*` / `data-tl-*` contract that these React wrappers
|
|
11
|
-
render.
|
|
12
|
-
|
|
13
|
-
Import the core CSS once from your app entrypoint:
|
|
9
|
+
Import the core CSS once:
|
|
14
10
|
|
|
15
11
|
```tsx
|
|
16
12
|
import '@threelight/ui/base.css'
|
|
17
13
|
```
|
|
18
14
|
|
|
19
|
-
Use React components as thin wrappers
|
|
15
|
+
Use React components as thin wrappers over `tl-*` classes and `data-tl-*`
|
|
16
|
+
attributes:
|
|
20
17
|
|
|
21
18
|
```tsx
|
|
22
|
-
import {
|
|
19
|
+
import { Button, MetricCard, MetricGroup, Root } from '@threelight/ui-react'
|
|
23
20
|
|
|
24
|
-
export function
|
|
21
|
+
export function DashboardSummary() {
|
|
25
22
|
return (
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</
|
|
34
|
-
|
|
23
|
+
<Root>
|
|
24
|
+
<MetricGroup>
|
|
25
|
+
<MetricCard tone="success">
|
|
26
|
+
<MetricCard.Label>Active users</MetricCard.Label>
|
|
27
|
+
<MetricCard.Value>48,210</MetricCard.Value>
|
|
28
|
+
<MetricCard.Delta>+12.4%</MetricCard.Delta>
|
|
29
|
+
</MetricCard>
|
|
30
|
+
</MetricGroup>
|
|
31
|
+
<Button tone="primary" variant="solid">
|
|
32
|
+
Export
|
|
33
|
+
</Button>
|
|
34
|
+
</Root>
|
|
35
35
|
)
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
`
|
|
39
|
+
Core components include `Button`, `IconButton`, `Badge`, `Alert`, `Card`,
|
|
40
|
+
`Panel`, `Field`, `Input`, `Select`, `Switch`, `Tabs`, `Table`, `CodeBlock`,
|
|
41
|
+
and layout/typography helpers.
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
Candidate alpha components include `AppShell`, `SideNav`, `Toolbar`,
|
|
44
|
+
`FilterBar`, `MetricCard`, `MetricGroup`, `DataPanel`, `SettingsSection`,
|
|
45
|
+
`Stepper`, `ChoiceCard`, `EmptyState`, `Toast`, and `DocsShell`.
|
|
43
46
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- Typography: `Display`, `Heading`, `Body`, `Caption`, `Meta`, `Label`,
|
|
48
|
-
`ActionText`, `Metric`, `Code`
|
|
49
|
-
- Actions and status: `Button`, `Badge`
|
|
50
|
-
- Forms: `Field`, `Input`, `Help`
|
|
51
|
-
- Patterns: `PageHeader`, `EmptyState`
|
|
47
|
+
Props such as `tone`, `variant`, `size`, `density`, and `state` render data
|
|
48
|
+
attributes. The React package does not own routing, data fetching, portals, or
|
|
49
|
+
application state.
|
|
52
50
|
|
|
53
51
|
## Release
|
|
54
52
|
|
|
55
|
-
Dry-run the package contents:
|
|
56
|
-
|
|
57
53
|
```bash
|
|
58
54
|
pnpm release:ui-react:pack
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
Publish an alpha release:
|
|
62
|
-
|
|
63
|
-
```bash
|
|
64
55
|
pnpm release:ui-react:alpha
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
Check published dist-tags:
|
|
68
|
-
|
|
69
|
-
```bash
|
|
70
56
|
pnpm release:ui-react:tags
|
|
71
57
|
```
|