this.gui 1.2.1 → 1.2.13
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 +30 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
# This.GUI
|
|
2
2
|
|
|
3
3
|
###### A collection of components and building blocks enabling GUI generation powered by AI.
|
|
4
|
-
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/v1761276578/this.gui.npm.png" style="zoom:34%;" />
|
|
4
|
+
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/v1761276578/this.gui.npm.png" alt="This.GUI logo" style="zoom:34%;" />
|
|
5
5
|
|
|
6
6
|
**Install** via:
|
|
7
|
+
|
|
7
8
|
```bash
|
|
8
9
|
npm install this.gui
|
|
9
10
|
```
|
|
10
11
|
|
|
11
12
|
or with **yarn:**
|
|
13
|
+
|
|
12
14
|
```bash
|
|
13
15
|
yarn add this.gui
|
|
14
16
|
```
|
|
15
17
|
|
|
16
18
|
**Use** as an **exportable React library**:
|
|
19
|
+
|
|
17
20
|
```ts
|
|
18
21
|
import { TopBar } from 'this.gui'
|
|
19
22
|
```
|
|
20
23
|
|
|
21
|
-
**.GUI** provides a rich collection of **atomic** and **composite** **components**
|
|
24
|
+
**.GUI** provides a rich collection of **atomic** and **composite** **components**
|
|
25
|
+
ready to use:
|
|
26
|
+
|
|
22
27
|
```tsx
|
|
23
28
|
import { Button, Card, Text } from 'this.gui';
|
|
24
29
|
export function Example() {
|
|
@@ -31,16 +36,21 @@ export function Example() {
|
|
|
31
36
|
}
|
|
32
37
|
```
|
|
33
38
|
|
|
34
|
-
|
|
39
|
+
### Or
|
|
40
|
+
|
|
35
41
|
```ts
|
|
36
|
-
import GUI from 'this.gui'
|
|
42
|
+
import GUI from 'this.gui';
|
|
37
43
|
```
|
|
38
44
|
|
|
39
|
-
All components are theme-aware and automatically inherit styles and tokens from
|
|
40
|
-
|
|
45
|
+
All components are theme-aware and automatically inherit styles and tokens from
|
|
46
|
+
the `GuiProvider`
|
|
47
|
+
|
|
48
|
+
|
|
41
49
|
|
|
42
50
|
## Initialization
|
|
43
|
-
|
|
51
|
+
|
|
52
|
+
To initialize **This.GUI** in your project, wrap your application with the
|
|
53
|
+
`GuiProvider` and optionally set a theme:
|
|
44
54
|
|
|
45
55
|
```tsx
|
|
46
56
|
import { GuiProvider } from 'this.gui';
|
|
@@ -58,12 +68,18 @@ function App() {
|
|
|
58
68
|
|
|
59
69
|
export default App;
|
|
60
70
|
```
|
|
61
|
-
|
|
71
|
+
|
|
72
|
+
This structure sets up the reactive theme system, context, and global styles
|
|
73
|
+
needed by all This.GUI components.
|
|
62
74
|
|
|
63
75
|
---
|
|
64
76
|
|
|
65
77
|
## Declarative Rendering (Advanced)
|
|
66
|
-
|
|
78
|
+
|
|
79
|
+
Under the hood **This.GUI** ships a resolver registry (`src/registry`) so teams
|
|
80
|
+
can plug a JSON → React renderer into the design system. The npm package does
|
|
81
|
+
**not** expose a ready-made `<RenderGUI />` helper yet; if you want declarative
|
|
82
|
+
rendering you need to wire it yourself:
|
|
67
83
|
|
|
68
84
|
```tsx
|
|
69
85
|
import { GuiRegistry } from 'this.gui/registry';
|
|
@@ -76,9 +92,12 @@ function renderSpec(spec: { type: string; props?: any }, ctx?: ResolveCtx) {
|
|
|
76
92
|
}
|
|
77
93
|
```
|
|
78
94
|
|
|
79
|
-
With that in place you can traverse a schema and render children as you prefer.
|
|
95
|
+
With that in place you can traverse a schema and render children as you prefer.
|
|
96
|
+
Until an official renderer is published, consume the React components directly
|
|
97
|
+
or build a thin wrapper like the example above.
|
|
80
98
|
|
|
81
99
|
---
|
|
82
100
|
|
|
83
101
|
## 🪐 License
|
|
84
|
-
|
|
102
|
+
|
|
103
|
+
MIT © [Neuroverse](https://neurons.me)
|