this.gui 1.3.62 → 1.3.63
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 +48 -10
- package/dist/material-symbols.css +1 -1
- package/dist/this.gui.umd.js +87 -141
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,30 +1,68 @@
|
|
|
1
1
|
# .GUI
|
|
2
2
|
|
|
3
|
-
A collection of components and building blocks enabling GUI generation.
|
|
3
|
+
A collection of components and building blocks enabling **.GUI** generation.
|
|
4
|
+
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_180/v1761276578/this.gui.npm.png" alt="This.GUI logo" width="180" />
|
|
4
5
|
|
|
6
|
+
### Links
|
|
7
|
+
- **.GUI Website:** https://neurons-me.github.io/GUI/
|
|
8
|
+
- **Storybook:** https://neurons-me.github.io/GUI/storybook-static/
|
|
5
9
|
|
|
10
|
+
## Quick Start (npx)
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
##### Create a new app using this.GUI:
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npx this.gui AppName
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
cd AppName
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install
|
|
24
|
+
```
|
|
8
25
|
|
|
9
|
-
|
|
26
|
+
```bash
|
|
27
|
+
npm run dev
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
This generates a **minimal app** pre-wired with `this.gui`.
|
|
31
|
+
|
|
32
|
+
### What you get
|
|
33
|
+
- `src/main.tsx` boots a React app
|
|
34
|
+
- `GuiProvider` is already mounted
|
|
35
|
+
- A simple `App.tsx` example using core atoms
|
|
36
|
+
|
|
37
|
+
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="244" />
|
|
10
38
|
|
|
11
|
-
|
|
12
|
-
- **Storybook:** https://neurons-me.github.io/storybook-static/
|
|
13
|
-
- **neurons.me:** https://neurons-me.github.io/
|
|
39
|
+
### Next steps
|
|
14
40
|
|
|
15
|
-
|
|
41
|
+
###### Installing using npm:
|
|
16
42
|
|
|
17
43
|
```bash
|
|
18
44
|
npm install this.gui
|
|
19
45
|
```
|
|
20
46
|
|
|
21
47
|
All components are theme-aware and automatically inherit styles and tokens from the `GuiProvider`
|
|
22
|
-
<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="244" />
|
|
23
48
|
|
|
24
|
-
|
|
49
|
+
- Explore components in Storybook: https://neurons-me.github.io/GUI/storybook-static/
|
|
50
|
+
- Import atoms directly:
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { Button, Typography, Box } from "this.gui";
|
|
54
|
+
// or subpath (more explicit)
|
|
55
|
+
import { Button as AtomButton } from "this.gui/atoms";
|
|
56
|
+
```
|
|
25
57
|
|
|
58
|
+
### Add the stylesheet
|
|
59
|
+
`this.gui` ships a compiled stylesheet. Import it once at your app entry:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import "this.gui/style.css";
|
|
63
|
+
```
|
|
26
64
|
|
|
27
|
-
|
|
65
|
+
> **Tip:** If you're using the UMD build in a plain HTML page, include `this.gui.css` from the `dist/` folder and load `this.gui.umd.js` via a `<script>` tag.
|
|
28
66
|
|
|
29
67
|
## 🪐 License
|
|
30
68
|
MIT © [neurons.me](https://neurons.me)
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
font-style: normal;
|
|
4
4
|
font-weight: 100 700;
|
|
5
5
|
font-display: block;
|
|
6
|
-
src: url("
|
|
6
|
+
src: url("./material-symbols-rounded.woff2") format("woff2");
|
|
7
7
|
}
|
|
8
8
|
.material-symbols-rounded {
|
|
9
9
|
font-family: "Material Symbols Rounded";
|