@plumile/ui-devtools 0.1.84 → 0.1.87
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 +98 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,3 +1,100 @@
|
|
|
1
1
|
# @plumile/ui-devtools
|
|
2
2
|
|
|
3
|
-
Shared DevTools UI primitives for Plumile extensions.
|
|
3
|
+
Shared DevTools UI primitives for Plumile extensions and debugging panels.
|
|
4
|
+
|
|
5
|
+
## Status
|
|
6
|
+
|
|
7
|
+
Specialized public package. This package is intended for internal tooling or
|
|
8
|
+
specialized DevTools interfaces, not as a general-purpose component library.
|
|
9
|
+
|
|
10
|
+
## Purpose
|
|
11
|
+
|
|
12
|
+
`@plumile/ui-devtools` provides a small set of visual primitives used by
|
|
13
|
+
Plumile developer tooling, including:
|
|
14
|
+
|
|
15
|
+
- badges and pills
|
|
16
|
+
- status lights
|
|
17
|
+
- cards and sections
|
|
18
|
+
- tabs and toolbar components
|
|
19
|
+
- split-view layouts
|
|
20
|
+
- code blocks and empty states
|
|
21
|
+
- a dedicated DevTools theme wrapper
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @plumile/ui-devtools
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Peer dependencies:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install react react-dom
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Main Public Surface
|
|
36
|
+
|
|
37
|
+
- `DevtoolsTheme`
|
|
38
|
+
- `DevtoolsBadge`
|
|
39
|
+
- `DevtoolsPill`
|
|
40
|
+
- `DevtoolsStatusLight`
|
|
41
|
+
- `DevtoolsCard`
|
|
42
|
+
- `DevtoolsSection`
|
|
43
|
+
- `DevtoolsCodeBlock`
|
|
44
|
+
- `DevtoolsEmptyState`
|
|
45
|
+
- `DevtoolsTabs`
|
|
46
|
+
- `DevtoolsToolbar`
|
|
47
|
+
- `DevtoolsToolbarButton`
|
|
48
|
+
- `DevtoolsToolbarSeparator`
|
|
49
|
+
- `DevtoolsSplitView`
|
|
50
|
+
|
|
51
|
+
For the complete entry point, see [`src/index.ts`](./src/index.ts).
|
|
52
|
+
|
|
53
|
+
## Quick Start
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import {
|
|
57
|
+
DevtoolsCard,
|
|
58
|
+
DevtoolsSection,
|
|
59
|
+
DevtoolsTabs,
|
|
60
|
+
DevtoolsTheme,
|
|
61
|
+
} from '@plumile/ui-devtools';
|
|
62
|
+
|
|
63
|
+
const items = [
|
|
64
|
+
{ id: 'timeline', label: 'Timeline' },
|
|
65
|
+
{ id: 'state', label: 'State' },
|
|
66
|
+
] as const;
|
|
67
|
+
|
|
68
|
+
export function Panel(): JSX.Element {
|
|
69
|
+
return (
|
|
70
|
+
<DevtoolsTheme>
|
|
71
|
+
<DevtoolsTabs
|
|
72
|
+
items={items}
|
|
73
|
+
selectedId="timeline"
|
|
74
|
+
onSelect={() => {}}
|
|
75
|
+
ariaLabel="Panel sections"
|
|
76
|
+
/>
|
|
77
|
+
<DevtoolsCard title="Router">
|
|
78
|
+
<DevtoolsSection title="Live state">Ready</DevtoolsSection>
|
|
79
|
+
</DevtoolsCard>
|
|
80
|
+
</DevtoolsTheme>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Validation Notes
|
|
86
|
+
|
|
87
|
+
- the package should keep targeted tests around stable interactive primitives
|
|
88
|
+
such as tabs or toolbar interactions
|
|
89
|
+
- visual breadth is intentionally small, so concise README guidance is preferred
|
|
90
|
+
over deeper docs
|
|
91
|
+
|
|
92
|
+
## Limitations
|
|
93
|
+
|
|
94
|
+
- the look and feel is intentionally tied to Plumile DevTools
|
|
95
|
+
- this package does not aim to be a generic dashboard or admin UI toolkit
|
|
96
|
+
|
|
97
|
+
## Related Docs
|
|
98
|
+
|
|
99
|
+
- [Router DevTools Extension README](../router-devtools-extension/README.md)
|
|
100
|
+
- [Documentation Index](../../docs/index.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumile/ui-devtools",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.87",
|
|
4
4
|
"description": "Shared DevTools UI primitives for Plumile extensions",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
"npm": ">=8.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@vanilla-extract/css": "^1.
|
|
35
|
+
"@vanilla-extract/css": "^1.20.1",
|
|
36
36
|
"tslib": "^2.8.1"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@types/react": "19.2.14",
|
|
40
40
|
"@types/react-dom": "19.2.3",
|
|
41
|
-
"react": "19.2.
|
|
42
|
-
"react-dom": "19.2.
|
|
41
|
+
"react": "19.2.5",
|
|
42
|
+
"react-dom": "19.2.5",
|
|
43
43
|
"rimraf": "6.1.3",
|
|
44
|
-
"typescript": "
|
|
44
|
+
"typescript": "6.0.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"react": "^19.2.
|
|
48
|
-
"react-dom": "^19.2.
|
|
47
|
+
"react": "^19.2.5",
|
|
48
|
+
"react-dom": "^19.2.5"
|
|
49
49
|
},
|
|
50
50
|
"files": [
|
|
51
51
|
"lib",
|