@dynamic-field-kit/react 1.0.8 → 1.1.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 +163 -299
- package/dist/index.js +75 -110
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +117 -27
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -6
- package/dist/chunk-HAKPX2A2.mjs +0 -49
- package/dist/chunk-HAKPX2A2.mjs.map +0 -1
- package/dist/defaultLayouts-PVN6T4LH.mjs +0 -40
- package/dist/defaultLayouts-PVN6T4LH.mjs.map +0 -1
- package/dist/responsiveLayout-2KUYZQJ3.mjs +0 -28
- package/dist/responsiveLayout-2KUYZQJ3.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -1,299 +1,163 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
##
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
```tsx
|
|
165
|
-
import { MultiFieldInput } from "@dynamic-field-kit/react"
|
|
166
|
-
import { FieldDescription } from "@dynamic-field-kit/core"
|
|
167
|
-
|
|
168
|
-
const fields: FieldDescription[] = [
|
|
169
|
-
{ name: "email", type: "text", label: "Email" },
|
|
170
|
-
{ name: "age", type: "number", label: "Age" }
|
|
171
|
-
]
|
|
172
|
-
|
|
173
|
-
const Example = () => {
|
|
174
|
-
return (
|
|
175
|
-
<MultiFieldInput
|
|
176
|
-
fieldDescriptions={fields}
|
|
177
|
-
onChange={(data) => {
|
|
178
|
-
console.log("Form data:", data)
|
|
179
|
-
}}
|
|
180
|
-
/>
|
|
181
|
-
)
|
|
182
|
-
}
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
**Controlled Form**
|
|
186
|
-
```tsx
|
|
187
|
-
const [formData, setFormData] = useState({})
|
|
188
|
-
|
|
189
|
-
<MultiFieldInput
|
|
190
|
-
fieldDescriptions={fields}
|
|
191
|
-
properties={formData}
|
|
192
|
-
onChange={setFormData}
|
|
193
|
-
/>
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
---
|
|
197
|
-
|
|
198
|
-
## ➕ Adding a New Field Type
|
|
199
|
-
|
|
200
|
-
You **do not** need to modify the library.
|
|
201
|
-
|
|
202
|
-
Just extend `FieldTypeMap`:
|
|
203
|
-
|
|
204
|
-
```ts
|
|
205
|
-
declare module "@dynamic-field-kit/core" {
|
|
206
|
-
interface FieldTypeMap {
|
|
207
|
-
date: Date
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
Then register a renderer:
|
|
213
|
-
|
|
214
|
-
```ts
|
|
215
|
-
fieldRegistry.register("date", ({ value, onValueChange }) => (
|
|
216
|
-
<input
|
|
217
|
-
type="date"
|
|
218
|
-
value={value ? value.toISOString().slice(0, 10) : ""}
|
|
219
|
-
onChange={(e) =>
|
|
220
|
-
onValueChange?.(new Date(e.target.value))
|
|
221
|
-
}
|
|
222
|
-
/>
|
|
223
|
-
))
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
Now `"date"` is fully type-safe everywhere.
|
|
227
|
-
|
|
228
|
-
---
|
|
229
|
-
## 🧠 Domain Typing (Optional)
|
|
230
|
-
The library intentionally avoids enforcing domain types.
|
|
231
|
-
If you want strict typing, cast inside your app:
|
|
232
|
-
|
|
233
|
-
```ts
|
|
234
|
-
interface UserForm {
|
|
235
|
-
age: number
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
const fields: FieldDescription[] = [
|
|
239
|
-
{
|
|
240
|
-
name: "age",
|
|
241
|
-
type: "number",
|
|
242
|
-
appearCondition: (data) =>
|
|
243
|
-
(data as UserForm).age > 18
|
|
244
|
-
}
|
|
245
|
-
]
|
|
246
|
-
```
|
|
247
|
-
This keeps the library generic while allowing strict typing in the app.
|
|
248
|
-
|
|
249
|
-
---
|
|
250
|
-
|
|
251
|
-
## 🧩 Components API
|
|
252
|
-
|
|
253
|
-
**<DynamicInput />**
|
|
254
|
-
|
|
255
|
-
Resolves and renders a field based on its type.
|
|
256
|
-
|
|
257
|
-
```tsx
|
|
258
|
-
<DynamicInput type="text" value="hello" />
|
|
259
|
-
```
|
|
260
|
-
---
|
|
261
|
-
|
|
262
|
-
**<FieldInput />**
|
|
263
|
-
|
|
264
|
-
Renders a single field with value binding.
|
|
265
|
-
|
|
266
|
-
```tsx
|
|
267
|
-
<FieldInput
|
|
268
|
-
fieldDescription={field}
|
|
269
|
-
renderInfos={formData}
|
|
270
|
-
onChange={(value, key) => {}}
|
|
271
|
-
/>
|
|
272
|
-
```
|
|
273
|
-
|
|
274
|
-
## Demo
|
|
275
|
-
- [Examples](https://github.com/vannt-dev/dynamic-field-kit-demo)
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
## 🏗 Architecture
|
|
280
|
-
|
|
281
|
-
```
|
|
282
|
-
dynamic-field-kit
|
|
283
|
-
├─ packages/
|
|
284
|
-
│ ├─ core # framework-agnostic types
|
|
285
|
-
│ └─ react # React renderer + registry
|
|
286
|
-
```
|
|
287
|
-
|
|
288
|
-
---
|
|
289
|
-
|
|
290
|
-
## 🚫 Non-Goals
|
|
291
|
-
This library intentionally does not include:
|
|
292
|
-
-Built-in UI components
|
|
293
|
-
-Built-in UI components
|
|
294
|
-
-Form state management library
|
|
295
|
-
|
|
296
|
-
It is a **form engine**, not a full form framework.
|
|
297
|
-
|
|
298
|
-
## 📄 License
|
|
299
|
-
MIT © [vannt-dev](https://github.com/vannt-dev)
|
|
1
|
+
# @dynamic-field-kit/react
|
|
2
|
+
|
|
3
|
+
React renderer for `@dynamic-field-kit/core`.
|
|
4
|
+
|
|
5
|
+
This package provides React components that render dynamic fields from `FieldDescription[]` and resolve field renderers through the shared `fieldRegistry`.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Packages
|
|
10
|
+
|
|
11
|
+
| Package | Description |
|
|
12
|
+
|------|------------|
|
|
13
|
+
| `@dynamic-field-kit/core` | Core types and field registry |
|
|
14
|
+
| `@dynamic-field-kit/react` | React components (FieldInput, MultiFieldInput, DynamicInput) |
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @dynamic-field-kit/core @dynamic-field-kit/react react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Peer dependency:
|
|
24
|
+
|
|
25
|
+
```txt
|
|
26
|
+
react >= 17
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Exports
|
|
30
|
+
|
|
31
|
+
- `DynamicInput`
|
|
32
|
+
- `FieldInput`
|
|
33
|
+
- `MultiFieldInput`
|
|
34
|
+
- `layoutRegistry`
|
|
35
|
+
- `fieldRegistry`
|
|
36
|
+
- `FieldDescription`, `FieldTypeKey`, `FieldRendererProps`
|
|
37
|
+
|
|
38
|
+
Default layouts are registered automatically when you import the package root.
|
|
39
|
+
|
|
40
|
+
Built-in layout types:
|
|
41
|
+
|
|
42
|
+
- `column`
|
|
43
|
+
- `row`
|
|
44
|
+
- `grid`
|
|
45
|
+
- `responsive`
|
|
46
|
+
|
|
47
|
+
## Register field renderers
|
|
48
|
+
|
|
49
|
+
Register React components or functions in `fieldRegistry` before rendering your form:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { fieldRegistry } from "@dynamic-field-kit/react"
|
|
53
|
+
|
|
54
|
+
fieldRegistry.register("text", ({ value, onValueChange, label }) => (
|
|
55
|
+
<label style={{ display: "grid", gap: 4 }}>
|
|
56
|
+
<span>{label}</span>
|
|
57
|
+
<input
|
|
58
|
+
value={value ?? ""}
|
|
59
|
+
onChange={(e) => onValueChange?.(e.target.value)}
|
|
60
|
+
/>
|
|
61
|
+
</label>
|
|
62
|
+
))
|
|
63
|
+
|
|
64
|
+
fieldRegistry.register("number", ({ value, onValueChange, label }) => (
|
|
65
|
+
<label style={{ display: "grid", gap: 4 }}>
|
|
66
|
+
<span>{label}</span>
|
|
67
|
+
<input
|
|
68
|
+
type="number"
|
|
69
|
+
value={value ?? ""}
|
|
70
|
+
onChange={(e) => onValueChange?.(Number(e.target.value))}
|
|
71
|
+
/>
|
|
72
|
+
</label>
|
|
73
|
+
))
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Basic usage
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useState } from "react"
|
|
80
|
+
import { MultiFieldInput } from "@dynamic-field-kit/react"
|
|
81
|
+
import type { FieldDescription } from "@dynamic-field-kit/core"
|
|
82
|
+
|
|
83
|
+
const fields: FieldDescription[] = [
|
|
84
|
+
{ name: "name", type: "text", label: "Name" },
|
|
85
|
+
{ name: "age", type: "number", label: "Age" },
|
|
86
|
+
]
|
|
87
|
+
|
|
88
|
+
export function Example() {
|
|
89
|
+
const [data, setData] = useState({})
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<MultiFieldInput
|
|
93
|
+
fieldDescriptions={fields}
|
|
94
|
+
properties={data}
|
|
95
|
+
onChange={setData}
|
|
96
|
+
/>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Layouts
|
|
102
|
+
|
|
103
|
+
Use a simple layout name:
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<MultiFieldInput
|
|
107
|
+
fieldDescriptions={fields}
|
|
108
|
+
layout="grid"
|
|
109
|
+
/>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Use a layout config object:
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<MultiFieldInput
|
|
116
|
+
fieldDescriptions={fields}
|
|
117
|
+
layout={{ type: "grid", columns: 3, gap: 16 }}
|
|
118
|
+
/>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Use the built-in responsive layout:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
<MultiFieldInput
|
|
125
|
+
fieldDescriptions={fields}
|
|
126
|
+
layout={{
|
|
127
|
+
type: "responsive",
|
|
128
|
+
mobile: "column",
|
|
129
|
+
desktop: { type: "grid", columns: 2, gap: 12 },
|
|
130
|
+
}}
|
|
131
|
+
/>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
You can also register custom layouts:
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
import { layoutRegistry } from "@dynamic-field-kit/react"
|
|
138
|
+
|
|
139
|
+
layoutRegistry.register("stack-tight", ({ children }) => (
|
|
140
|
+
<div style={{ display: "grid", gap: 8 }}>{children}</div>
|
|
141
|
+
))
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Type augmentation
|
|
145
|
+
|
|
146
|
+
Add your app field types through module augmentation:
|
|
147
|
+
|
|
148
|
+
```ts
|
|
149
|
+
import "@dynamic-field-kit/core"
|
|
150
|
+
|
|
151
|
+
declare module "@dynamic-field-kit/core" {
|
|
152
|
+
interface FieldTypeMap {
|
|
153
|
+
text: string
|
|
154
|
+
number: number
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Notes
|
|
160
|
+
|
|
161
|
+
- The library does not ship built-in field UI. Your app owns renderer registration.
|
|
162
|
+
- `MultiFieldInput` filters fields using `appearCondition`.
|
|
163
|
+
- `DynamicInput` shows `Unknown field type: ...` if a renderer is missing.
|
package/dist/index.js
CHANGED
|
@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __esm = (fn, res) => function __init() {
|
|
9
|
-
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
10
|
-
};
|
|
11
8
|
var __commonJS = (cb, mod) => function __require() {
|
|
12
9
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
13
10
|
};
|
|
@@ -33,105 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
33
30
|
));
|
|
34
31
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
32
|
|
|
36
|
-
// src/layout/layoutRegistry.ts
|
|
37
|
-
var LayoutRegistry, layoutRegistry;
|
|
38
|
-
var init_layoutRegistry = __esm({
|
|
39
|
-
"src/layout/layoutRegistry.ts"() {
|
|
40
|
-
"use strict";
|
|
41
|
-
LayoutRegistry = class {
|
|
42
|
-
constructor() {
|
|
43
|
-
this.layouts = /* @__PURE__ */ new Map();
|
|
44
|
-
}
|
|
45
|
-
register(type, renderer) {
|
|
46
|
-
if (this.layouts.has(type)) {
|
|
47
|
-
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
48
|
-
}
|
|
49
|
-
this.layouts.set(type, renderer);
|
|
50
|
-
}
|
|
51
|
-
get(type) {
|
|
52
|
-
return this.layouts.get(type);
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
layoutRegistry = new LayoutRegistry();
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
// src/layout/defaultLayouts.tsx
|
|
60
|
-
var defaultLayouts_exports = {};
|
|
61
|
-
var import_jsx_runtime;
|
|
62
|
-
var init_defaultLayouts = __esm({
|
|
63
|
-
"src/layout/defaultLayouts.tsx"() {
|
|
64
|
-
"use strict";
|
|
65
|
-
init_layoutRegistry();
|
|
66
|
-
import_jsx_runtime = require("react/jsx-runtime");
|
|
67
|
-
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
-
"div",
|
|
69
|
-
{
|
|
70
|
-
style: {
|
|
71
|
-
display: "flex",
|
|
72
|
-
flexDirection: "column",
|
|
73
|
-
gap: config?.gap ?? 12
|
|
74
|
-
},
|
|
75
|
-
children
|
|
76
|
-
}
|
|
77
|
-
));
|
|
78
|
-
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
-
"div",
|
|
80
|
-
{
|
|
81
|
-
style: {
|
|
82
|
-
display: "flex",
|
|
83
|
-
flexDirection: "row",
|
|
84
|
-
gap: config?.gap ?? 12
|
|
85
|
-
},
|
|
86
|
-
children
|
|
87
|
-
}
|
|
88
|
-
));
|
|
89
|
-
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
-
"div",
|
|
91
|
-
{
|
|
92
|
-
style: {
|
|
93
|
-
display: "grid",
|
|
94
|
-
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
95
|
-
gap: config?.gap ?? 12
|
|
96
|
-
},
|
|
97
|
-
children
|
|
98
|
-
}
|
|
99
|
-
));
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
// src/layout/responsiveLayout.tsx
|
|
104
|
-
var responsiveLayout_exports = {};
|
|
105
|
-
function resolve(layout) {
|
|
106
|
-
if (typeof layout === "string") {
|
|
107
|
-
return { type: layout, config: {} };
|
|
108
|
-
}
|
|
109
|
-
return { type: layout.type, config: layout };
|
|
110
|
-
}
|
|
111
|
-
var import_jsx_runtime2;
|
|
112
|
-
var init_responsiveLayout = __esm({
|
|
113
|
-
"src/layout/responsiveLayout.tsx"() {
|
|
114
|
-
"use strict";
|
|
115
|
-
init_layoutRegistry();
|
|
116
|
-
import_jsx_runtime2 = require("react/jsx-runtime");
|
|
117
|
-
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
118
|
-
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
119
|
-
const current = isMobile ? config.mobile : config.desktop;
|
|
120
|
-
if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
121
|
-
children,
|
|
122
|
-
" "
|
|
123
|
-
] });
|
|
124
|
-
const { type, config: childConfig } = resolve(current);
|
|
125
|
-
const Renderer = layoutRegistry.get(type);
|
|
126
|
-
if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
127
|
-
children,
|
|
128
|
-
" "
|
|
129
|
-
] });
|
|
130
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
|
|
135
33
|
// ../core/dist/index.js
|
|
136
34
|
var require_dist = __commonJS({
|
|
137
35
|
"../core/dist/index.js"(exports2, module2) {
|
|
@@ -186,14 +84,82 @@ __export(index_exports, {
|
|
|
186
84
|
});
|
|
187
85
|
module.exports = __toCommonJS(index_exports);
|
|
188
86
|
|
|
189
|
-
// src/
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
87
|
+
// src/layout/layoutRegistry.ts
|
|
88
|
+
var LayoutRegistry = class {
|
|
89
|
+
constructor() {
|
|
90
|
+
this.layouts = /* @__PURE__ */ new Map();
|
|
91
|
+
}
|
|
92
|
+
register(type, renderer) {
|
|
93
|
+
if (this.layouts.has(type)) {
|
|
94
|
+
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
95
|
+
}
|
|
96
|
+
this.layouts.set(type, renderer);
|
|
97
|
+
}
|
|
98
|
+
get(type) {
|
|
99
|
+
return this.layouts.get(type);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var layoutRegistry = new LayoutRegistry();
|
|
103
|
+
|
|
104
|
+
// src/layout/defaultLayouts.tsx
|
|
105
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
106
|
+
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
"div",
|
|
108
|
+
{
|
|
109
|
+
style: {
|
|
110
|
+
display: "flex",
|
|
111
|
+
flexDirection: "column",
|
|
112
|
+
gap: config?.gap ?? 12
|
|
113
|
+
},
|
|
114
|
+
children
|
|
115
|
+
}
|
|
116
|
+
));
|
|
117
|
+
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
118
|
+
"div",
|
|
119
|
+
{
|
|
120
|
+
style: {
|
|
121
|
+
display: "flex",
|
|
122
|
+
flexDirection: "row",
|
|
123
|
+
gap: config?.gap ?? 12
|
|
124
|
+
},
|
|
125
|
+
children
|
|
126
|
+
}
|
|
127
|
+
));
|
|
128
|
+
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
style: {
|
|
132
|
+
display: "grid",
|
|
133
|
+
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
134
|
+
gap: config?.gap ?? 12
|
|
135
|
+
},
|
|
136
|
+
children
|
|
137
|
+
}
|
|
138
|
+
));
|
|
194
139
|
|
|
195
|
-
// src/layout/
|
|
196
|
-
|
|
140
|
+
// src/layout/responsiveLayout.tsx
|
|
141
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
142
|
+
function resolve(layout) {
|
|
143
|
+
if (typeof layout === "string") {
|
|
144
|
+
return { type: layout, config: {} };
|
|
145
|
+
}
|
|
146
|
+
return { type: layout.type, config: layout };
|
|
147
|
+
}
|
|
148
|
+
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
149
|
+
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
150
|
+
const current = isMobile ? config.mobile : config.desktop;
|
|
151
|
+
if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
152
|
+
children,
|
|
153
|
+
" "
|
|
154
|
+
] });
|
|
155
|
+
const { type, config: childConfig } = resolve(current);
|
|
156
|
+
const Renderer = layoutRegistry.get(type);
|
|
157
|
+
if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
158
|
+
children,
|
|
159
|
+
" "
|
|
160
|
+
] });
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
|
|
162
|
+
});
|
|
197
163
|
|
|
198
164
|
// src/components/DynamicInput.tsx
|
|
199
165
|
var import_core = __toESM(require_dist());
|
|
@@ -267,7 +233,6 @@ var MultiFieldInput_default = MultiFieldInput;
|
|
|
267
233
|
|
|
268
234
|
// src/index.ts
|
|
269
235
|
var import_core2 = __toESM(require_dist());
|
|
270
|
-
registerDefaults();
|
|
271
236
|
// Annotate the CommonJS export names for ESM import in node:
|
|
272
237
|
0 && (module.exports = {
|
|
273
238
|
DynamicInput,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/index.ts","../src/registerDefaults.ts","../src/layout/index.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n","import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))","import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n","export * from \"./types\"\r\nexport * from \"./FieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, not constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n","export async function registerDefaults() {\r\n await import(\"./layout/defaultLayouts\")\r\n await import(\"./layout/responsiveLayout\")\r\n}\r\n","export { layoutRegistry } from \"./layoutRegistry\"\r\nexport type { LayoutConfig } from \"../types/layout\"","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":"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","names":["import_jsx_runtime","index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_core"]}
|
|
1
|
+
{"version":3,"sources":["../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/index.ts","../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./FieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, not constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import \"./layout/defaultLayouts\"\r\nimport \"./layout/responsiveLayout\"\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// Re-export selected core APIs\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n","import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n","import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))","import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":"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","names":["index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_core"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,30 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
6
26
|
|
|
7
27
|
// ../core/dist/index.js
|
|
8
28
|
var require_dist = __commonJS({
|
|
9
29
|
"../core/dist/index.js"(exports, module) {
|
|
10
30
|
"use strict";
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
31
|
+
var __defProp2 = Object.defineProperty;
|
|
32
|
+
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
33
|
+
var __getOwnPropNames2 = Object.getOwnPropertyNames;
|
|
34
|
+
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
15
35
|
var __export = (target, all) => {
|
|
16
36
|
for (var name in all)
|
|
17
|
-
|
|
37
|
+
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
18
38
|
};
|
|
19
|
-
var
|
|
39
|
+
var __copyProps2 = (to, from, except, desc) => {
|
|
20
40
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
21
|
-
for (let key of
|
|
22
|
-
if (!
|
|
23
|
-
|
|
41
|
+
for (let key of __getOwnPropNames2(from))
|
|
42
|
+
if (!__hasOwnProp2.call(to, key) && key !== except)
|
|
43
|
+
__defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
|
|
24
44
|
}
|
|
25
45
|
return to;
|
|
26
46
|
};
|
|
27
|
-
var __toCommonJS = (mod) =>
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
|
|
28
48
|
var index_exports = {};
|
|
29
49
|
__export(index_exports, {
|
|
30
50
|
FieldRegistry: () => FieldRegistry,
|
|
@@ -47,30 +67,101 @@ var require_dist = __commonJS({
|
|
|
47
67
|
}
|
|
48
68
|
});
|
|
49
69
|
|
|
50
|
-
// src/
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
70
|
+
// src/layout/layoutRegistry.ts
|
|
71
|
+
var LayoutRegistry = class {
|
|
72
|
+
constructor() {
|
|
73
|
+
this.layouts = /* @__PURE__ */ new Map();
|
|
74
|
+
}
|
|
75
|
+
register(type, renderer) {
|
|
76
|
+
if (this.layouts.has(type)) {
|
|
77
|
+
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
78
|
+
}
|
|
79
|
+
this.layouts.set(type, renderer);
|
|
80
|
+
}
|
|
81
|
+
get(type) {
|
|
82
|
+
return this.layouts.get(type);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var layoutRegistry = new LayoutRegistry();
|
|
86
|
+
|
|
87
|
+
// src/layout/defaultLayouts.tsx
|
|
88
|
+
import { jsx } from "react/jsx-runtime";
|
|
89
|
+
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
style: {
|
|
93
|
+
display: "flex",
|
|
94
|
+
flexDirection: "column",
|
|
95
|
+
gap: config?.gap ?? 12
|
|
96
|
+
},
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
));
|
|
100
|
+
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
style: {
|
|
104
|
+
display: "flex",
|
|
105
|
+
flexDirection: "row",
|
|
106
|
+
gap: config?.gap ?? 12
|
|
107
|
+
},
|
|
108
|
+
children
|
|
109
|
+
}
|
|
110
|
+
));
|
|
111
|
+
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
style: {
|
|
115
|
+
display: "grid",
|
|
116
|
+
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
117
|
+
gap: config?.gap ?? 12
|
|
118
|
+
},
|
|
119
|
+
children
|
|
120
|
+
}
|
|
121
|
+
));
|
|
122
|
+
|
|
123
|
+
// src/layout/responsiveLayout.tsx
|
|
124
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
125
|
+
function resolve(layout) {
|
|
126
|
+
if (typeof layout === "string") {
|
|
127
|
+
return { type: layout, config: {} };
|
|
128
|
+
}
|
|
129
|
+
return { type: layout.type, config: layout };
|
|
54
130
|
}
|
|
131
|
+
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
132
|
+
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
133
|
+
const current = isMobile ? config.mobile : config.desktop;
|
|
134
|
+
if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
135
|
+
children,
|
|
136
|
+
" "
|
|
137
|
+
] });
|
|
138
|
+
const { type, config: childConfig } = resolve(current);
|
|
139
|
+
const Renderer = layoutRegistry.get(type);
|
|
140
|
+
if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
141
|
+
children,
|
|
142
|
+
" "
|
|
143
|
+
] });
|
|
144
|
+
return /* @__PURE__ */ jsx2(Renderer, { config: childConfig, children });
|
|
145
|
+
});
|
|
55
146
|
|
|
56
147
|
// src/components/DynamicInput.tsx
|
|
57
148
|
var import_core = __toESM(require_dist());
|
|
58
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
149
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
59
150
|
var DynamicInput = ({ type, value, onChange, label, options, className, description }) => {
|
|
60
151
|
const Renderer = import_core.fieldRegistry.get(type);
|
|
61
|
-
if (!Renderer) return /* @__PURE__ */
|
|
152
|
+
if (!Renderer) return /* @__PURE__ */ jsxs2("div", { children: [
|
|
62
153
|
"Unknown field type: ",
|
|
63
154
|
type
|
|
64
155
|
] });
|
|
65
|
-
return /* @__PURE__ */
|
|
156
|
+
return /* @__PURE__ */ jsx3(Renderer, { value, onValueChange: onChange, label, options, className, description });
|
|
66
157
|
};
|
|
67
158
|
var DynamicInput_default = DynamicInput;
|
|
68
159
|
|
|
69
160
|
// src/components/FieldInput.tsx
|
|
70
|
-
import { jsx as
|
|
161
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
71
162
|
var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
72
163
|
const { name, type, label, options, className, description } = fieldDescription;
|
|
73
|
-
return /* @__PURE__ */
|
|
164
|
+
return /* @__PURE__ */ jsx4(
|
|
74
165
|
DynamicInput_default,
|
|
75
166
|
{
|
|
76
167
|
type,
|
|
@@ -87,7 +178,7 @@ var FieldInput_default = FieldInput;
|
|
|
87
178
|
|
|
88
179
|
// src/components/MultiFieldInput.tsx
|
|
89
180
|
import { useEffect, useMemo, useState } from "react";
|
|
90
|
-
import { jsx as
|
|
181
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
91
182
|
function resolveLayout(layout) {
|
|
92
183
|
if (!layout) return { type: "column", config: {} };
|
|
93
184
|
if (typeof layout === "string") return { type: layout, config: {} };
|
|
@@ -107,7 +198,7 @@ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
|
107
198
|
if (!Layout) {
|
|
108
199
|
throw new Error(`Unknown layout: ${type}`);
|
|
109
200
|
}
|
|
110
|
-
return /* @__PURE__ */
|
|
201
|
+
return /* @__PURE__ */ jsx5(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx5(
|
|
111
202
|
FieldInput_default,
|
|
112
203
|
{
|
|
113
204
|
fieldDescription: f,
|
|
@@ -125,7 +216,6 @@ var MultiFieldInput_default = MultiFieldInput;
|
|
|
125
216
|
|
|
126
217
|
// src/index.ts
|
|
127
218
|
var import_core2 = __toESM(require_dist());
|
|
128
|
-
registerDefaults();
|
|
129
219
|
var export_fieldRegistry = import_core2.fieldRegistry;
|
|
130
220
|
export {
|
|
131
221
|
DynamicInput_default as DynamicInput,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/registerDefaults.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx","../src/index.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./FieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, not constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","export async function registerDefaults() {\r\n await import(\"./layout/defaultLayouts\")\r\n await import(\"./layout/responsiveLayout\")\r\n}\r\n","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,QAAA,gBAAA,CAAA;AAAA,aAAA,eAAA;MAAA,eAAA,MAAA;MAAA,eAAA,MAAAA;IAAA,CAAA;AAAA,WAAA,UAAA,aAAA,aAAA;ACKO,QAAM,gBAAN,MAAoB;MAApB,cAAA;AAEH,aAAQ,WAA+C,CAAC;MAAA;;MAGxD,SACI,MACA,UACF;AACE,aAAK,SAAS,IAAc,IAAI;MACpC;MAEA,IACI,MAC0C;AAC1C,eAAO,KAAK,SAAS,IAAc;MACvC;IACJ;AAEO,QAAMA,iBAAgB,IAAI,cAAc;;;;;ACxB/C,eAAsB,mBAAmB;AACrC,QAAM,OAAO,+BAAyB;AACtC,QAAM,OAAO,iCAA2B;AAC5C;;;ACHA,kBAAwD;AAkB9B,SAGf,KAHe;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,OAAO,SAAS,WAAW,YAAY,MAAgB;AAC1H,QAAM,WAAW,0BAAc,IAAI,IAAI;AAGvC,MAAI,CAAC,SAAU,QAAO,qBAAC,SAAI;AAAA;AAAA,IAAqB;AAAA,KAAK;AAGrD,SAAO,oBAAC,YAAS,OAAc,eAAe,UAAU,OAAc,SAAkB,WAAsB,aAA0B;AAC5I;AAGA,IAAO,uBAAQ;;;ACVX,gBAAAC,YAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,YAAY,IAAI;AAG/D,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;AC3Bf,SAAmB,WAAW,SAAS,gBAAgB;AA4C/C,gBAAAC,YAAA;AA9BR,SAAS,cAAc,QAAuB;AAC5C,MAAI,CAAC,OAAQ,QAAO,EAAE,MAAM,UAAU,QAAQ,CAAC,EAAE;AACjD,MAAI,OAAO,WAAW,SAAU,QAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAClE,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC7C;AAGA,IAAM,kBAAkB,CAAC,EAAE,mBAAmB,YAAY,UAAU,OAAO,MAAa;AACtF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB,CAAC,CAAC;AAE/C,YAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB;AAAA,IACpB,MAAM,kBAAkB,OAAO,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI,CAAC;AAAA,IACnF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,OAAO,IAAI,cAAc,MAAM;AAE7C,QAAM,SAAS,eAAe,IAAI,IAAI;AAEtC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AAAA,EAC3C;AAEA,SACE,gBAAAA,KAAC,UAAO,QACL,wBAAc,IAAI,CAAC,MAClB,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAPK,EAAE;AAAA,EAQT,CACD,GACH;AAEJ;AAGA,IAAO,0BAAQ;;;AC9Cf,IAAAC,eAKO;AAlBP,iBAAiB;","names":["fieldRegistry","jsx","jsx","import_core"]}
|
|
1
|
+
{"version":3,"sources":["../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx","../src/index.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./FieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, not constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n","import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))","import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n","import \"./layout/defaultLayouts\"\r\nimport \"./layout/responsiveLayout\"\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// Re-export selected core APIs\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n"],"mappings":"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","names":["fieldRegistry","jsx","jsx","jsxs","jsx","jsx","import_core"]}
|
package/package.json
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamic-field-kit/react",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React renderer for dynamic-field-kit",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"main": "dist/index.
|
|
7
|
-
"module": "dist/index.
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.mjs",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
-
"sideEffects":
|
|
9
|
+
"sideEffects": [
|
|
10
|
+
"./src/index.ts",
|
|
11
|
+
"./src/layout/defaultLayouts.tsx",
|
|
12
|
+
"./src/layout/responsiveLayout.tsx",
|
|
13
|
+
"./dist/index.js",
|
|
14
|
+
"./dist/index.mjs",
|
|
15
|
+
"./dist/index.d.ts"
|
|
16
|
+
],
|
|
10
17
|
"files": [
|
|
11
18
|
"dist"
|
|
12
19
|
],
|
|
@@ -16,8 +23,8 @@
|
|
|
16
23
|
"exports": {
|
|
17
24
|
".": {
|
|
18
25
|
"types": "./dist/index.d.ts",
|
|
19
|
-
"import": "./dist/index.
|
|
20
|
-
"require": "./dist/index.
|
|
26
|
+
"import": "./dist/index.mjs",
|
|
27
|
+
"require": "./dist/index.js"
|
|
21
28
|
}
|
|
22
29
|
},
|
|
23
30
|
"scripts": {
|
package/dist/chunk-HAKPX2A2.mjs
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
-
mod
|
|
25
|
-
));
|
|
26
|
-
|
|
27
|
-
// src/layout/layoutRegistry.ts
|
|
28
|
-
var LayoutRegistry = class {
|
|
29
|
-
constructor() {
|
|
30
|
-
this.layouts = /* @__PURE__ */ new Map();
|
|
31
|
-
}
|
|
32
|
-
register(type, renderer) {
|
|
33
|
-
if (this.layouts.has(type)) {
|
|
34
|
-
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
35
|
-
}
|
|
36
|
-
this.layouts.set(type, renderer);
|
|
37
|
-
}
|
|
38
|
-
get(type) {
|
|
39
|
-
return this.layouts.get(type);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
var layoutRegistry = new LayoutRegistry();
|
|
43
|
-
|
|
44
|
-
export {
|
|
45
|
-
__commonJS,
|
|
46
|
-
__toESM,
|
|
47
|
-
layoutRegistry
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=chunk-HAKPX2A2.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/layout/layoutRegistry.ts"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,MAAqB;AAAA,EAArB;AACH,SAAQ,UAAU,oBAAI,IAA4B;AAAA;AAAA,EAElD,SAAS,MAAc,UAA0B;AAC7C,QAAI,KAAK,QAAQ,IAAI,IAAI,GAAG;AACxB,cAAQ,KAAK,+BAA+B,IAAI,kBAAkB;AAAA,IACtE;AACA,SAAK,QAAQ,IAAI,MAAM,QAAQ;AAAA,EACnC;AAAA,EAEA,IAAI,MAA0C;AAC1C,WAAO,KAAK,QAAQ,IAAI,IAAI;AAAA,EAChC;AACJ;AAEO,IAAM,iBAAiB,IAAI,eAAe;","names":[]}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
layoutRegistry
|
|
3
|
-
} from "./chunk-HAKPX2A2.mjs";
|
|
4
|
-
|
|
5
|
-
// src/layout/defaultLayouts.tsx
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
8
|
-
"div",
|
|
9
|
-
{
|
|
10
|
-
style: {
|
|
11
|
-
display: "flex",
|
|
12
|
-
flexDirection: "column",
|
|
13
|
-
gap: config?.gap ?? 12
|
|
14
|
-
},
|
|
15
|
-
children
|
|
16
|
-
}
|
|
17
|
-
));
|
|
18
|
-
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
19
|
-
"div",
|
|
20
|
-
{
|
|
21
|
-
style: {
|
|
22
|
-
display: "flex",
|
|
23
|
-
flexDirection: "row",
|
|
24
|
-
gap: config?.gap ?? 12
|
|
25
|
-
},
|
|
26
|
-
children
|
|
27
|
-
}
|
|
28
|
-
));
|
|
29
|
-
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
30
|
-
"div",
|
|
31
|
-
{
|
|
32
|
-
style: {
|
|
33
|
-
display: "grid",
|
|
34
|
-
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
35
|
-
gap: config?.gap ?? 12
|
|
36
|
-
},
|
|
37
|
-
children
|
|
38
|
-
}
|
|
39
|
-
));
|
|
40
|
-
//# sourceMappingURL=defaultLayouts-PVN6T4LH.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/layout/defaultLayouts.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))"],"mappings":";;;;;AAGI;AADJ,eAAe,SAAS,UAAU,CAAC,EAAE,UAAU,OAAO,MAClD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,OAAO,CAAC,EAAE,UAAU,OAAO,MAC/C;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,QAAQ,CAAC,EAAE,UAAU,OAAO,MAChD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,qBAAqB,UAAU,QAAQ,WAAW,CAAC;AAAA,MACnD,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;","names":[]}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
layoutRegistry
|
|
3
|
-
} from "./chunk-HAKPX2A2.mjs";
|
|
4
|
-
|
|
5
|
-
// src/layout/responsiveLayout.tsx
|
|
6
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
function resolve(layout) {
|
|
8
|
-
if (typeof layout === "string") {
|
|
9
|
-
return { type: layout, config: {} };
|
|
10
|
-
}
|
|
11
|
-
return { type: layout.type, config: layout };
|
|
12
|
-
}
|
|
13
|
-
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
14
|
-
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
15
|
-
const current = isMobile ? config.mobile : config.desktop;
|
|
16
|
-
if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
|
-
children,
|
|
18
|
-
" "
|
|
19
|
-
] });
|
|
20
|
-
const { type, config: childConfig } = resolve(current);
|
|
21
|
-
const Renderer = layoutRegistry.get(type);
|
|
22
|
-
if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
23
|
-
children,
|
|
24
|
-
" "
|
|
25
|
-
] });
|
|
26
|
-
return /* @__PURE__ */ jsx(Renderer, { config: childConfig, children });
|
|
27
|
-
});
|
|
28
|
-
//# sourceMappingURL=responsiveLayout-2KUYZQJ3.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/layout/responsiveLayout.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n"],"mappings":";;;;;AAeyB,mBAQjB,KARiB;AAZzB,SAAS,QAAQ,QAAsB;AACnC,MAAI,OAAO,WAAW,UAAU;AAC5B,WAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,EACtC;AACA,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC/C;AAEA,eAAe,SAAS,cAAc,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5D,QAAM,WACF,OAAO,WAAW,eAAe,OAAO,aAAa;AAEzD,QAAM,UAAU,WAAW,OAAO,SAAS,OAAO;AAClD,MAAI,CAAC,QAAS,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAEpC,QAAM,EAAE,MAAM,QAAQ,YAAY,IAAI,QAAQ,OAAO;AACrD,QAAM,WAAW,eAAe,IAAI,IAAI;AAExC,MAAI,CAAC,SAAU,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAErC,SACI,oBAAC,YAAS,QAAU,aAClB,UACF;AAER,CAAC;","names":[]}
|