@kubuild/react 0.1.0 → 0.2.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 +119 -0
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# @kubuild/react
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@kubuild/react)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
Unified React entrypoint for **KUBUILD**: combines `@kubuild/schema`, `@kubuild/core`, `@kubuild/components`, `@kubuild/renderer`, and `@kubuild/editor` into a single, comprehensive package.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 📦 Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
# Using pnpm (recommended)
|
|
15
|
+
pnpm add @kubuild/react react react-dom
|
|
16
|
+
|
|
17
|
+
# Using npm
|
|
18
|
+
npm install @kubuild/react react react-dom
|
|
19
|
+
|
|
20
|
+
# Using yarn
|
|
21
|
+
yarn add @kubuild/react react react-dom
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## ✨ Features
|
|
27
|
+
|
|
28
|
+
- **All-in-One Convenience**: Single package install that gives you the complete visual page builder suite:
|
|
29
|
+
- 🎨 **Visual Editor** (`@kubuild/editor`)
|
|
30
|
+
- ⚡ **Recursive Renderer** (`@kubuild/renderer`)
|
|
31
|
+
- 🧩 **Component Registry & Templates** (`@kubuild/components`)
|
|
32
|
+
- ⚙️ **Command Engine, Pipeline Executor & Undo/Redo** (`@kubuild/core`)
|
|
33
|
+
- 📐 **Zod Schemas & Document Types** (`@kubuild/schema`)
|
|
34
|
+
- **Seamless Types & Re-exports**: Everything is re-exported from the top-level `@kubuild/react` module.
|
|
35
|
+
- **Production Ready**: Fully tree-shakeable with ESM and CJS builds.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## 🚀 Quick Usage
|
|
40
|
+
|
|
41
|
+
### Full Page Builder Application
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import React from 'react';
|
|
45
|
+
import {
|
|
46
|
+
Editor,
|
|
47
|
+
Renderer,
|
|
48
|
+
PageDocumentSchema,
|
|
49
|
+
type PageDocument
|
|
50
|
+
} from '@kubuild/react';
|
|
51
|
+
|
|
52
|
+
const initialDoc: PageDocument = {
|
|
53
|
+
schema: 'stora.page',
|
|
54
|
+
version: '1.0.0',
|
|
55
|
+
metadata: {
|
|
56
|
+
title: 'Landing Page'
|
|
57
|
+
},
|
|
58
|
+
document: {
|
|
59
|
+
id: 'root-1',
|
|
60
|
+
type: 'container',
|
|
61
|
+
children: [
|
|
62
|
+
{
|
|
63
|
+
id: 'heading-1',
|
|
64
|
+
type: 'heading',
|
|
65
|
+
props: { content: 'Welcome to KUBUILD' },
|
|
66
|
+
styles: { fontSize: '2.5rem', fontWeight: 'bold' }
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const App: React.FC = () => {
|
|
73
|
+
const [isEditing, setIsEditing] = React.useState(true);
|
|
74
|
+
const [doc, setDoc] = React.useState<PageDocument>(initialDoc);
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<div style={{ width: '100vw', height: '100vh' }}>
|
|
78
|
+
<button
|
|
79
|
+
onClick={() => setIsEditing(!isEditing)}
|
|
80
|
+
style={{ position: 'fixed', top: 12, right: 12, zIndex: 9999 }}
|
|
81
|
+
>
|
|
82
|
+
{isEditing ? 'Switch to Preview' : 'Back to Editor'}
|
|
83
|
+
</button>
|
|
84
|
+
|
|
85
|
+
{isEditing ? (
|
|
86
|
+
<Editor
|
|
87
|
+
initialDocument={doc}
|
|
88
|
+
onSave={(newDoc) => setDoc(newDoc)}
|
|
89
|
+
/>
|
|
90
|
+
) : (
|
|
91
|
+
<div style={{ padding: '2rem' }}>
|
|
92
|
+
<Renderer document={doc} />
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
</div>
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## 🏗️ Architecture
|
|
103
|
+
|
|
104
|
+
`@kubuild/react` serves as the umbrella package for the KUBUILD ecosystem:
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
@kubuild/react
|
|
108
|
+
├── @kubuild/editor (Visual builder UI, canvas, inspector, action builder)
|
|
109
|
+
├── @kubuild/renderer (Recursive React renderer, action dispatcher, styles)
|
|
110
|
+
├── @kubuild/components (Registry, definitions, starter form templates)
|
|
111
|
+
├── @kubuild/core (Document engine, pipeline executor, state store)
|
|
112
|
+
└── @kubuild/schema (Zod validation schemas, TypeScript interfaces)
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 📄 License
|
|
118
|
+
|
|
119
|
+
MIT © [KUBUILD](https://github.com/kustora/kubuild)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kubuild/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Unified React entrypoint for KUBUILD: editor, renderer, and document utilities",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
},
|
|
40
40
|
"homepage": "https://github.com/kustora/kubuild#readme",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@kubuild/components": "0.
|
|
43
|
-
"@kubuild/renderer": "0.
|
|
44
|
-
"@kubuild/core": "0.
|
|
45
|
-
"@kubuild/editor": "0.
|
|
46
|
-
"@kubuild/schema": "0.
|
|
42
|
+
"@kubuild/components": "0.2.0",
|
|
43
|
+
"@kubuild/renderer": "0.2.0",
|
|
44
|
+
"@kubuild/core": "0.2.0",
|
|
45
|
+
"@kubuild/editor": "0.2.0",
|
|
46
|
+
"@kubuild/schema": "0.2.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": ">=18.0.0",
|