this.gui 1.3.61 → 1.3.62
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 +5 -71
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
# .GUI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A collection of components and building blocks enabling GUI generation.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
4
7
|
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_180/v1761276578/this.gui.npm.png" alt="This.GUI logo" width="180" />
|
|
5
8
|
|
|
6
9
|
### 🔗 Links
|
|
@@ -15,80 +18,11 @@
|
|
|
15
18
|
npm install this.gui
|
|
16
19
|
```
|
|
17
20
|
|
|
18
|
-
**Use** as an **exportable React library**:
|
|
19
|
-
|
|
20
|
-
```ts
|
|
21
|
-
import { TopBar } from 'this.gui'
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
**.GUI** provides a rich collection of **atomic** and **composite** **components** ready to use:
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
import { Button, Card, Text } from 'this.gui';
|
|
28
|
-
export function Example() {
|
|
29
|
-
return (
|
|
30
|
-
<Card>
|
|
31
|
-
<Text size="lg" weight="bold">Welcome!</Text>
|
|
32
|
-
<Button onClick={() => alert('Clicked!')}>Click me</Button>
|
|
33
|
-
</Card>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### Or
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
import GUI from 'this.gui';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
21
|
All components are theme-aware and automatically inherit styles and tokens from the `GuiProvider`
|
|
45
|
-
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="
|
|
22
|
+
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="244" />
|
|
46
23
|
|
|
47
24
|
## Initialization
|
|
48
|
-
To initialize **This.GUI** in your project, wrap your application with the`GuiProvider` and optionally set a theme:
|
|
49
|
-
|
|
50
|
-
```tsx
|
|
51
|
-
import { GuiProvider } from 'this.gui';
|
|
52
|
-
import { Layout } from 'this.gui';
|
|
53
|
-
|
|
54
|
-
function App() {
|
|
55
|
-
return (
|
|
56
|
-
<GuiProvider theme="dark">
|
|
57
|
-
<Layout>
|
|
58
|
-
<h1>Hello from This.GUI</h1>
|
|
59
|
-
</Layout>
|
|
60
|
-
</GuiProvider>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export default App;
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
This structure sets up the reactive theme system, context, and global styles
|
|
68
|
-
needed by all This.GUI components.
|
|
69
|
-
|
|
70
|
-
---
|
|
71
|
-
|
|
72
|
-
## Declarative Rendering (Advanced)
|
|
73
|
-
Under the hood **This.GUI** ships a resolver registry (`src/registry`) so teams
|
|
74
|
-
can plug a JSON → React renderer into the design system. The npm package does
|
|
75
|
-
**not** expose a ready-made `<RenderGUI />` helper yet; if you want declarative
|
|
76
|
-
rendering you need to wire it yourself:
|
|
77
|
-
|
|
78
|
-
```tsx
|
|
79
|
-
import { GuiRegistry } from 'this.gui/registry';
|
|
80
|
-
import type { ResolveCtx } from 'this.gui/registry';
|
|
81
|
-
|
|
82
|
-
function renderSpec(spec: { type: string; props?: any }, ctx?: ResolveCtx) {
|
|
83
|
-
const entry = GuiRegistry[spec.type];
|
|
84
|
-
if (!entry) throw new Error(`Unknown component type: ${spec.type}`);
|
|
85
|
-
return entry.resolve(spec as any, ctx);
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
25
|
|
|
89
|
-
With that in place you can traverse a schema and render children as you prefer.
|
|
90
|
-
Until an official renderer is published, consume the React components directly
|
|
91
|
-
or build a thin wrapper like the example above.
|
|
92
26
|
|
|
93
27
|
---
|
|
94
28
|
|