@dynamic-field-kit/react 1.1.0 → 1.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 +53 -57
- package/dist/index.d.mts +17 -10
- package/dist/index.d.ts +17 -10
- package/dist/index.js +72 -76
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +77 -103
- package/dist/index.mjs.map +1 -1
- package/package.json +53 -47
package/README.md
CHANGED
|
@@ -1,30 +1,20 @@
|
|
|
1
1
|
# @dynamic-field-kit/react
|
|
2
2
|
|
|
3
|
-
React
|
|
3
|
+
React adapter for `@dynamic-field-kit/core`.
|
|
4
4
|
|
|
5
|
-
This package provides React components
|
|
5
|
+
This package provides React components for rendering `FieldDescription[]` and exports a React-typed `fieldRegistry`, so registered renderers can be used directly as JSX components.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
|
|
8
8
|
|
|
9
|
-
##
|
|
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
|
|
9
|
+
## Install
|
|
18
10
|
|
|
19
11
|
```bash
|
|
20
12
|
npm install @dynamic-field-kit/core @dynamic-field-kit/react react
|
|
21
13
|
```
|
|
22
14
|
|
|
23
|
-
|
|
15
|
+
Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
react >= 17
|
|
27
|
-
```
|
|
17
|
+
- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/react`
|
|
28
18
|
|
|
29
19
|
## Exports
|
|
30
20
|
|
|
@@ -33,11 +23,15 @@ react >= 17
|
|
|
33
23
|
- `MultiFieldInput`
|
|
34
24
|
- `layoutRegistry`
|
|
35
25
|
- `fieldRegistry`
|
|
36
|
-
- `
|
|
26
|
+
- `ReactFieldRenderer`
|
|
27
|
+
- `ReactFieldRegistry`
|
|
28
|
+
- `FieldDescription`
|
|
29
|
+
- `FieldTypeKey`
|
|
30
|
+
- `FieldRendererProps`
|
|
37
31
|
|
|
38
32
|
Default layouts are registered automatically when you import the package root.
|
|
39
33
|
|
|
40
|
-
Built-in
|
|
34
|
+
Built-in layouts:
|
|
41
35
|
|
|
42
36
|
- `column`
|
|
43
37
|
- `row`
|
|
@@ -46,47 +40,47 @@ Built-in layout types:
|
|
|
46
40
|
|
|
47
41
|
## Register field renderers
|
|
48
42
|
|
|
49
|
-
Register React components or
|
|
43
|
+
Register React components or function components through the React adapter:
|
|
50
44
|
|
|
51
45
|
```tsx
|
|
52
|
-
import { fieldRegistry } from
|
|
46
|
+
import { fieldRegistry } from '@dynamic-field-kit/react';
|
|
53
47
|
|
|
54
|
-
fieldRegistry.register(
|
|
55
|
-
<label style={{ display:
|
|
48
|
+
fieldRegistry.register('text', ({ value, onValueChange, label }) => (
|
|
49
|
+
<label style={{ display: 'grid', gap: 4 }}>
|
|
56
50
|
<span>{label}</span>
|
|
57
51
|
<input
|
|
58
|
-
value={value ??
|
|
52
|
+
value={value ?? ''}
|
|
59
53
|
onChange={(e) => onValueChange?.(e.target.value)}
|
|
60
54
|
/>
|
|
61
55
|
</label>
|
|
62
|
-
))
|
|
56
|
+
));
|
|
63
57
|
|
|
64
|
-
fieldRegistry.register(
|
|
65
|
-
<label style={{ display:
|
|
58
|
+
fieldRegistry.register('number', ({ value, onValueChange, label }) => (
|
|
59
|
+
<label style={{ display: 'grid', gap: 4 }}>
|
|
66
60
|
<span>{label}</span>
|
|
67
61
|
<input
|
|
68
62
|
type="number"
|
|
69
|
-
value={value ??
|
|
63
|
+
value={value ?? ''}
|
|
70
64
|
onChange={(e) => onValueChange?.(Number(e.target.value))}
|
|
71
65
|
/>
|
|
72
66
|
</label>
|
|
73
|
-
))
|
|
67
|
+
));
|
|
74
68
|
```
|
|
75
69
|
|
|
76
70
|
## Basic usage
|
|
77
71
|
|
|
78
72
|
```tsx
|
|
79
|
-
import { useState } from
|
|
80
|
-
import { MultiFieldInput } from
|
|
81
|
-
import type { FieldDescription } from
|
|
73
|
+
import { useState } from 'react';
|
|
74
|
+
import { MultiFieldInput } from '@dynamic-field-kit/react';
|
|
75
|
+
import type { FieldDescription } from '@dynamic-field-kit/core';
|
|
82
76
|
|
|
83
77
|
const fields: FieldDescription[] = [
|
|
84
|
-
{ name:
|
|
85
|
-
{ name:
|
|
86
|
-
]
|
|
78
|
+
{ name: 'name', type: 'text', label: 'Name' },
|
|
79
|
+
{ name: 'age', type: 'number', label: 'Age' },
|
|
80
|
+
];
|
|
87
81
|
|
|
88
82
|
export function Example() {
|
|
89
|
-
const [data, setData] = useState({})
|
|
83
|
+
const [data, setData] = useState({});
|
|
90
84
|
|
|
91
85
|
return (
|
|
92
86
|
<MultiFieldInput
|
|
@@ -94,19 +88,16 @@ export function Example() {
|
|
|
94
88
|
properties={data}
|
|
95
89
|
onChange={setData}
|
|
96
90
|
/>
|
|
97
|
-
)
|
|
91
|
+
);
|
|
98
92
|
}
|
|
99
93
|
```
|
|
100
94
|
|
|
101
95
|
## Layouts
|
|
102
96
|
|
|
103
|
-
Use a
|
|
97
|
+
Use a layout name:
|
|
104
98
|
|
|
105
99
|
```tsx
|
|
106
|
-
<MultiFieldInput
|
|
107
|
-
fieldDescriptions={fields}
|
|
108
|
-
layout="grid"
|
|
109
|
-
/>
|
|
100
|
+
<MultiFieldInput fieldDescriptions={fields} layout="grid" />
|
|
110
101
|
```
|
|
111
102
|
|
|
112
103
|
Use a layout config object:
|
|
@@ -114,7 +105,7 @@ Use a layout config object:
|
|
|
114
105
|
```tsx
|
|
115
106
|
<MultiFieldInput
|
|
116
107
|
fieldDescriptions={fields}
|
|
117
|
-
layout={{ type:
|
|
108
|
+
layout={{ type: 'grid', columns: 3, gap: 16 }}
|
|
118
109
|
/>
|
|
119
110
|
```
|
|
120
111
|
|
|
@@ -124,40 +115,45 @@ Use the built-in responsive layout:
|
|
|
124
115
|
<MultiFieldInput
|
|
125
116
|
fieldDescriptions={fields}
|
|
126
117
|
layout={{
|
|
127
|
-
type:
|
|
128
|
-
mobile:
|
|
129
|
-
desktop: { type:
|
|
118
|
+
type: 'responsive',
|
|
119
|
+
mobile: 'column',
|
|
120
|
+
desktop: { type: 'grid', columns: 2, gap: 12 },
|
|
130
121
|
}}
|
|
131
122
|
/>
|
|
132
123
|
```
|
|
133
124
|
|
|
134
|
-
|
|
125
|
+
Register a custom layout:
|
|
135
126
|
|
|
136
127
|
```tsx
|
|
137
|
-
import { layoutRegistry } from
|
|
128
|
+
import { layoutRegistry } from '@dynamic-field-kit/react';
|
|
138
129
|
|
|
139
|
-
layoutRegistry.register(
|
|
140
|
-
<div style={{ display:
|
|
141
|
-
))
|
|
130
|
+
layoutRegistry.register('stack-tight', ({ children }) => (
|
|
131
|
+
<div style={{ display: 'grid', gap: 8 }}>{children}</div>
|
|
132
|
+
));
|
|
142
133
|
```
|
|
143
134
|
|
|
144
135
|
## Type augmentation
|
|
145
136
|
|
|
146
|
-
Add your app field types through module augmentation:
|
|
137
|
+
Add your app's field types through module augmentation:
|
|
147
138
|
|
|
148
139
|
```ts
|
|
149
|
-
import
|
|
140
|
+
import '@dynamic-field-kit/core';
|
|
150
141
|
|
|
151
|
-
declare module
|
|
142
|
+
declare module '@dynamic-field-kit/core' {
|
|
152
143
|
interface FieldTypeMap {
|
|
153
|
-
text: string
|
|
154
|
-
number: number
|
|
144
|
+
text: string;
|
|
145
|
+
number: number;
|
|
155
146
|
}
|
|
156
147
|
}
|
|
157
148
|
```
|
|
158
149
|
|
|
159
150
|
## Notes
|
|
160
151
|
|
|
161
|
-
-
|
|
152
|
+
- `@dynamic-field-kit/core` stays framework-agnostic and does not export React-specific JSX types.
|
|
153
|
+
- `@dynamic-field-kit/react` narrows the shared registry to React component types so `fieldRegistry.get(type)` can be rendered safely in TSX.
|
|
162
154
|
- `MultiFieldInput` filters fields using `appearCondition`.
|
|
163
|
-
- `DynamicInput`
|
|
155
|
+
- `DynamicInput` renders `Unknown field type: ...` when a renderer is missing.
|
|
156
|
+
|
|
157
|
+
## License
|
|
158
|
+
|
|
159
|
+
MIT
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode, ComponentType } from 'react';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { FieldTypeKey, Properties, FieldDescription } from '@dynamic-field-kit/core';
|
|
4
|
-
export { FieldDescription, FieldRendererProps, FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, Properties, FieldDescription, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
|
|
4
|
+
export { FieldDescription, FieldRendererProps, FieldTypeKey } from '@dynamic-field-kit/core';
|
|
5
5
|
|
|
6
6
|
type LayoutRenderer<C = any> = (props: {
|
|
7
7
|
children: React.ReactNode;
|
|
@@ -14,13 +14,13 @@ declare class LayoutRegistry {
|
|
|
14
14
|
}
|
|
15
15
|
declare const layoutRegistry: LayoutRegistry;
|
|
16
16
|
|
|
17
|
-
type BaseLayout =
|
|
18
|
-
type:
|
|
17
|
+
type BaseLayout = 'column' | 'row' | {
|
|
18
|
+
type: 'grid';
|
|
19
19
|
columns?: number;
|
|
20
20
|
gap?: number;
|
|
21
21
|
};
|
|
22
22
|
type LayoutConfig = BaseLayout | {
|
|
23
|
-
type:
|
|
23
|
+
type: 'responsive';
|
|
24
24
|
mobile: BaseLayout;
|
|
25
25
|
desktop: BaseLayout;
|
|
26
26
|
};
|
|
@@ -34,14 +34,14 @@ interface Props$2<T extends FieldTypeKey> {
|
|
|
34
34
|
className?: string;
|
|
35
35
|
description?: ReactNode;
|
|
36
36
|
}
|
|
37
|
-
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
38
38
|
|
|
39
39
|
interface Props$1 {
|
|
40
40
|
fieldDescription: FieldDescription;
|
|
41
41
|
renderInfos: Properties;
|
|
42
42
|
onValueChangeField: (value: any, key: string) => void;
|
|
43
43
|
}
|
|
44
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
45
45
|
|
|
46
46
|
interface Props {
|
|
47
47
|
fieldDescriptions: FieldDescription[];
|
|
@@ -49,6 +49,13 @@ interface Props {
|
|
|
49
49
|
onChange?: (data: Properties) => void;
|
|
50
50
|
layout?: LayoutConfig;
|
|
51
51
|
}
|
|
52
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, }: Props) => react_jsx_runtime.JSX.Element;
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;
|
|
55
|
+
interface ReactFieldRegistry {
|
|
56
|
+
register<K extends keyof FieldTypeMap>(type: K, renderer: ReactFieldRenderer<FieldTypeMap[K]>): void;
|
|
57
|
+
get<K extends keyof FieldTypeMap>(type: K): ReactFieldRenderer<FieldTypeMap[K]> | undefined;
|
|
58
|
+
}
|
|
59
|
+
declare const fieldRegistry: ReactFieldRegistry;
|
|
60
|
+
|
|
61
|
+
export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, fieldRegistry, layoutRegistry };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode, ComponentType } from 'react';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { FieldTypeKey, Properties, FieldDescription } from '@dynamic-field-kit/core';
|
|
4
|
-
export { FieldDescription, FieldRendererProps, FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, Properties, FieldDescription, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
|
|
4
|
+
export { FieldDescription, FieldRendererProps, FieldTypeKey } from '@dynamic-field-kit/core';
|
|
5
5
|
|
|
6
6
|
type LayoutRenderer<C = any> = (props: {
|
|
7
7
|
children: React.ReactNode;
|
|
@@ -14,13 +14,13 @@ declare class LayoutRegistry {
|
|
|
14
14
|
}
|
|
15
15
|
declare const layoutRegistry: LayoutRegistry;
|
|
16
16
|
|
|
17
|
-
type BaseLayout =
|
|
18
|
-
type:
|
|
17
|
+
type BaseLayout = 'column' | 'row' | {
|
|
18
|
+
type: 'grid';
|
|
19
19
|
columns?: number;
|
|
20
20
|
gap?: number;
|
|
21
21
|
};
|
|
22
22
|
type LayoutConfig = BaseLayout | {
|
|
23
|
-
type:
|
|
23
|
+
type: 'responsive';
|
|
24
24
|
mobile: BaseLayout;
|
|
25
25
|
desktop: BaseLayout;
|
|
26
26
|
};
|
|
@@ -34,14 +34,14 @@ interface Props$2<T extends FieldTypeKey> {
|
|
|
34
34
|
className?: string;
|
|
35
35
|
description?: ReactNode;
|
|
36
36
|
}
|
|
37
|
-
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
38
38
|
|
|
39
39
|
interface Props$1 {
|
|
40
40
|
fieldDescription: FieldDescription;
|
|
41
41
|
renderInfos: Properties;
|
|
42
42
|
onValueChangeField: (value: any, key: string) => void;
|
|
43
43
|
}
|
|
44
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
45
45
|
|
|
46
46
|
interface Props {
|
|
47
47
|
fieldDescriptions: FieldDescription[];
|
|
@@ -49,6 +49,13 @@ interface Props {
|
|
|
49
49
|
onChange?: (data: Properties) => void;
|
|
50
50
|
layout?: LayoutConfig;
|
|
51
51
|
}
|
|
52
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, }: Props) => react_jsx_runtime.JSX.Element;
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;
|
|
55
|
+
interface ReactFieldRegistry {
|
|
56
|
+
register<K extends keyof FieldTypeMap>(type: K, renderer: ReactFieldRenderer<FieldTypeMap[K]>): void;
|
|
57
|
+
get<K extends keyof FieldTypeMap>(type: K): ReactFieldRenderer<FieldTypeMap[K]> | undefined;
|
|
58
|
+
}
|
|
59
|
+
declare const fieldRegistry: ReactFieldRegistry;
|
|
60
|
+
|
|
61
|
+
export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, fieldRegistry, layoutRegistry };
|
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 __commonJS = (cb, mod) => function __require() {
|
|
9
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
-
};
|
|
11
8
|
var __export = (target, all) => {
|
|
12
9
|
for (var name in all)
|
|
13
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -30,56 +27,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
30
27
|
));
|
|
31
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
29
|
|
|
33
|
-
// ../core/dist/index.js
|
|
34
|
-
var require_dist = __commonJS({
|
|
35
|
-
"../core/dist/index.js"(exports2, module2) {
|
|
36
|
-
"use strict";
|
|
37
|
-
var __defProp2 = Object.defineProperty;
|
|
38
|
-
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
39
|
-
var __getOwnPropNames2 = Object.getOwnPropertyNames;
|
|
40
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
41
|
-
var __export2 = (target, all) => {
|
|
42
|
-
for (var name in all)
|
|
43
|
-
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
44
|
-
};
|
|
45
|
-
var __copyProps2 = (to, from, except, desc) => {
|
|
46
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
47
|
-
for (let key of __getOwnPropNames2(from))
|
|
48
|
-
if (!__hasOwnProp2.call(to, key) && key !== except)
|
|
49
|
-
__defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
|
|
50
|
-
}
|
|
51
|
-
return to;
|
|
52
|
-
};
|
|
53
|
-
var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
|
|
54
|
-
var index_exports2 = {};
|
|
55
|
-
__export2(index_exports2, {
|
|
56
|
-
FieldRegistry: () => FieldRegistry,
|
|
57
|
-
fieldRegistry: () => fieldRegistry3
|
|
58
|
-
});
|
|
59
|
-
module2.exports = __toCommonJS2(index_exports2);
|
|
60
|
-
var FieldRegistry = class {
|
|
61
|
-
constructor() {
|
|
62
|
-
this.registry = {};
|
|
63
|
-
}
|
|
64
|
-
// ✅ Type safety API
|
|
65
|
-
register(type, renderer) {
|
|
66
|
-
this.registry[type] = renderer;
|
|
67
|
-
}
|
|
68
|
-
get(type) {
|
|
69
|
-
return this.registry[type];
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
var fieldRegistry3 = new FieldRegistry();
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
|
|
76
30
|
// src/index.ts
|
|
77
31
|
var index_exports = {};
|
|
78
32
|
__export(index_exports, {
|
|
79
33
|
DynamicInput: () => DynamicInput_default,
|
|
80
34
|
FieldInput: () => FieldInput_default,
|
|
81
35
|
MultiFieldInput: () => MultiFieldInput_default,
|
|
82
|
-
fieldRegistry: () =>
|
|
36
|
+
fieldRegistry: () => fieldRegistry,
|
|
83
37
|
layoutRegistry: () => layoutRegistry
|
|
84
38
|
});
|
|
85
39
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -148,35 +102,67 @@ function resolve(layout) {
|
|
|
148
102
|
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
149
103
|
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
150
104
|
const current = isMobile ? config.mobile : config.desktop;
|
|
151
|
-
if (!current)
|
|
152
|
-
children
|
|
153
|
-
|
|
154
|
-
|
|
105
|
+
if (!current) {
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
107
|
+
children,
|
|
108
|
+
" "
|
|
109
|
+
] });
|
|
110
|
+
}
|
|
155
111
|
const { type, config: childConfig } = resolve(current);
|
|
156
112
|
const Renderer = layoutRegistry.get(type);
|
|
157
|
-
if (!Renderer)
|
|
158
|
-
children
|
|
159
|
-
|
|
160
|
-
|
|
113
|
+
if (!Renderer) {
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
115
|
+
children,
|
|
116
|
+
" "
|
|
117
|
+
] });
|
|
118
|
+
}
|
|
161
119
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
|
|
162
120
|
});
|
|
163
121
|
|
|
164
122
|
// src/components/DynamicInput.tsx
|
|
165
|
-
var
|
|
123
|
+
var import_react = __toESM(require("react"));
|
|
124
|
+
|
|
125
|
+
// src/fieldRegistry.ts
|
|
126
|
+
var import_core = require("@dynamic-field-kit/core");
|
|
127
|
+
var fieldRegistry = import_core.fieldRegistry;
|
|
128
|
+
|
|
129
|
+
// src/components/DynamicInput.tsx
|
|
166
130
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
167
|
-
var DynamicInput = ({
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
131
|
+
var DynamicInput = ({
|
|
132
|
+
type,
|
|
133
|
+
value,
|
|
134
|
+
onChange,
|
|
135
|
+
label,
|
|
136
|
+
options,
|
|
137
|
+
className,
|
|
138
|
+
description
|
|
139
|
+
}) => {
|
|
140
|
+
const Renderer = (0, import_react.useMemo)(() => fieldRegistry.get(type), [type]);
|
|
141
|
+
if (!Renderer) {
|
|
142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
|
|
143
|
+
"Unknown field type: ",
|
|
144
|
+
type
|
|
145
|
+
] });
|
|
146
|
+
}
|
|
147
|
+
const RendererEl = Renderer;
|
|
148
|
+
return import_react.default.createElement(RendererEl, {
|
|
149
|
+
value,
|
|
150
|
+
onValueChange: onChange,
|
|
151
|
+
label,
|
|
152
|
+
options,
|
|
153
|
+
className,
|
|
154
|
+
description
|
|
155
|
+
});
|
|
174
156
|
};
|
|
175
157
|
var DynamicInput_default = DynamicInput;
|
|
176
158
|
|
|
177
159
|
// src/components/FieldInput.tsx
|
|
178
160
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
179
|
-
var FieldInput = ({
|
|
161
|
+
var FieldInput = ({
|
|
162
|
+
fieldDescription,
|
|
163
|
+
renderInfos,
|
|
164
|
+
onValueChangeField
|
|
165
|
+
}) => {
|
|
180
166
|
const { name, type, label, options, className, description } = fieldDescription;
|
|
181
167
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
182
168
|
DynamicInput_default,
|
|
@@ -194,20 +180,33 @@ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
|
194
180
|
var FieldInput_default = FieldInput;
|
|
195
181
|
|
|
196
182
|
// src/components/MultiFieldInput.tsx
|
|
197
|
-
var
|
|
183
|
+
var import_react2 = require("react");
|
|
198
184
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
199
185
|
function resolveLayout(layout) {
|
|
200
|
-
if (!layout)
|
|
201
|
-
|
|
186
|
+
if (!layout) {
|
|
187
|
+
return { type: "column", config: {} };
|
|
188
|
+
}
|
|
189
|
+
if (typeof layout === "string") {
|
|
190
|
+
return { type: layout, config: {} };
|
|
191
|
+
}
|
|
202
192
|
return { type: layout.type, config: layout };
|
|
203
193
|
}
|
|
204
|
-
var MultiFieldInput = ({
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
194
|
+
var MultiFieldInput = ({
|
|
195
|
+
fieldDescriptions,
|
|
196
|
+
properties,
|
|
197
|
+
onChange,
|
|
198
|
+
layout
|
|
199
|
+
}) => {
|
|
200
|
+
const [data, setData] = (0, import_react2.useState)({});
|
|
201
|
+
(0, import_react2.useEffect)(() => {
|
|
202
|
+
if (properties) {
|
|
203
|
+
setData(properties);
|
|
204
|
+
}
|
|
208
205
|
}, [properties]);
|
|
209
|
-
const visibleFields = (0,
|
|
210
|
-
() => fieldDescriptions.filter(
|
|
206
|
+
const visibleFields = (0, import_react2.useMemo)(
|
|
207
|
+
() => fieldDescriptions.filter(
|
|
208
|
+
(f) => !f.appearCondition || f.appearCondition(data)
|
|
209
|
+
),
|
|
211
210
|
[fieldDescriptions, data]
|
|
212
211
|
);
|
|
213
212
|
const { type, config } = resolveLayout(layout);
|
|
@@ -230,9 +229,6 @@ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
|
230
229
|
)) });
|
|
231
230
|
};
|
|
232
231
|
var MultiFieldInput_default = MultiFieldInput;
|
|
233
|
-
|
|
234
|
-
// src/index.ts
|
|
235
|
-
var import_core2 = __toESM(require_dist());
|
|
236
232
|
// Annotate the CommonJS export names for ESM import in node:
|
|
237
233
|
0 && (module.exports = {
|
|
238
234
|
DynamicInput,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../src/components/DynamicInput.tsx","../src/fieldRegistry.ts","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["import './layout/defaultLayouts';\nimport './layout/responsiveLayout';\n\nexport { layoutRegistry } from './layout';\n\nexport { default as DynamicInput } from './components/DynamicInput';\nexport { default as FieldInput } from './components/FieldInput';\nexport { default as MultiFieldInput } from './components/MultiFieldInput';\nexport {\n fieldRegistry,\n type ReactFieldRenderer,\n type ReactFieldRegistry,\n} from './fieldRegistry';\n\nexport type { LayoutConfig } from './types/layout';\n// Re-export selected core APIs\nexport {\n type FieldTypeKey,\n type FieldDescription,\n type FieldRendererProps,\n} from '@dynamic-field-kit/core';\n","import React from 'react';\n\nexport type LayoutRenderer<C = any> = (props: {\n children: React.ReactNode;\n config?: C;\n}) => React.ReactElement;\n\nexport class LayoutRegistry {\n private layouts = new Map<string, LayoutRenderer>();\n\n register(type: string, renderer: LayoutRenderer) {\n if (this.layouts.has(type)) {\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`);\n }\n this.layouts.set(type, renderer);\n }\n\n get(type: string): LayoutRenderer | undefined {\n return this.layouts.get(type);\n }\n}\n\nexport const layoutRegistry = new LayoutRegistry();\n","import { layoutRegistry } from './layoutRegistry';\n\nlayoutRegistry.register('column', ({ children, config }) => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n\nlayoutRegistry.register('row', ({ children, config }) => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'row',\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n\nlayoutRegistry.register('grid', ({ children, config }) => (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n","import React from 'react';\nimport { LayoutConfig } from '../types/layout';\nimport { layoutRegistry } from './layoutRegistry';\n\nfunction resolve(layout: LayoutConfig) {\n if (typeof layout === 'string') {\n return { type: layout, config: {} };\n }\n return { type: layout.type, config: layout };\n}\n\nlayoutRegistry.register('responsive', ({ children, config }) => {\n const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;\n\n const current = isMobile ? config.mobile : config.desktop;\n if (!current) {\n return <>{children} </>;\n }\n\n const { type, config: childConfig } = resolve(current);\n const Renderer = layoutRegistry.get(type);\n\n if (!Renderer) {\n return <>{children} </>;\n }\n\n return <Renderer config={childConfig}>{children}</Renderer>;\n});\n","import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';\nimport React, { ReactNode, useMemo } from 'react';\nimport { fieldRegistry } from '../fieldRegistry';\n\ninterface Props<T extends FieldTypeKey> {\n type: T;\n value?: any;\n onChange?: (value: any) => void;\n label?: string;\n options?: Properties[];\n className?: string;\n description?: ReactNode;\n}\n\nconst DynamicInput = <T extends FieldTypeKey>({\n type,\n value,\n onChange,\n label,\n options,\n className,\n description,\n}: Props<T>) => {\n // Memoize renderer lookup to avoid unnecessary work on re-renders\n const Renderer = useMemo(() => fieldRegistry.get(type), [type]) as any;\n\n if (!Renderer) {\n return <div>Unknown field type: {type}</div>;\n }\n\n // Use direct element creation to avoid TSX generic typing pitfalls\n const RendererEl = Renderer as any;\n return React.createElement(RendererEl, {\n value,\n onValueChange: onChange,\n label,\n options,\n className,\n description,\n });\n};\n\nexport default DynamicInput;\n","import {\n fieldRegistry as coreFieldRegistry,\n type FieldRendererProps,\n type FieldTypeMap,\n} from '@dynamic-field-kit/core';\nimport type { ComponentType } from 'react';\n\nexport type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;\n\nexport interface ReactFieldRegistry {\n register<K extends keyof FieldTypeMap>(\n type: K,\n renderer: ReactFieldRenderer<FieldTypeMap[K]>\n ): void;\n get<K extends keyof FieldTypeMap>(\n type: K\n ): ReactFieldRenderer<FieldTypeMap[K]> | undefined;\n}\n\nexport const fieldRegistry = coreFieldRegistry as ReactFieldRegistry;\n","import { FieldDescription, Properties } from '@dynamic-field-kit/core';\nimport DynamicInput from './DynamicInput';\n\ninterface Props {\n fieldDescription: FieldDescription;\n renderInfos: Properties;\n onValueChangeField: (value: any, key: string) => void;\n}\n\nconst FieldInput = ({\n fieldDescription,\n renderInfos,\n onValueChangeField,\n}: Props) => {\n const { name, type, label, options, className, description } =\n fieldDescription;\n\n return (\n <DynamicInput\n type={type}\n label={label}\n value={renderInfos[name]}\n options={options}\n className={className}\n description={description}\n onChange={(v) => onValueChangeField(v, name)}\n />\n );\n};\n\nexport default FieldInput;\n","import { FieldDescription, Properties } from '@dynamic-field-kit/core';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\n\r\nimport { layoutRegistry } from '../layout';\r\nimport { LayoutConfig } from '../types/layout';\r\nimport FieldInput from './FieldInput';\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\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) {\r\n return { type: 'column', config: {} };\r\n }\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\nconst MultiFieldInput = ({\r\n fieldDescriptions,\r\n properties,\r\n onChange,\r\n layout,\r\n}: Props) => {\r\n const [data, setData] = useState<Properties>({});\r\n\r\n useEffect(() => {\r\n if (properties) {\r\n setData(properties);\r\n }\r\n }, [properties]);\r\n\r\n const visibleFields = useMemo(\r\n () =>\r\n fieldDescriptions.filter(\r\n (f) => !f.appearCondition || f.appearCondition(data)\r\n ),\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\nexport default MultiFieldInput;\r\n"],"mappings":"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","names":["import_jsx_runtime","coreFieldRegistry","import_jsx_runtime","React","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,72 +1,3 @@
|
|
|
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
|
-
// ../core/dist/index.js
|
|
28
|
-
var require_dist = __commonJS({
|
|
29
|
-
"../core/dist/index.js"(exports, module) {
|
|
30
|
-
"use strict";
|
|
31
|
-
var __defProp2 = Object.defineProperty;
|
|
32
|
-
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
33
|
-
var __getOwnPropNames2 = Object.getOwnPropertyNames;
|
|
34
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
35
|
-
var __export = (target, all) => {
|
|
36
|
-
for (var name in all)
|
|
37
|
-
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
38
|
-
};
|
|
39
|
-
var __copyProps2 = (to, from, except, desc) => {
|
|
40
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
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 });
|
|
44
|
-
}
|
|
45
|
-
return to;
|
|
46
|
-
};
|
|
47
|
-
var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
|
|
48
|
-
var index_exports = {};
|
|
49
|
-
__export(index_exports, {
|
|
50
|
-
FieldRegistry: () => FieldRegistry,
|
|
51
|
-
fieldRegistry: () => fieldRegistry3
|
|
52
|
-
});
|
|
53
|
-
module.exports = __toCommonJS(index_exports);
|
|
54
|
-
var FieldRegistry = class {
|
|
55
|
-
constructor() {
|
|
56
|
-
this.registry = {};
|
|
57
|
-
}
|
|
58
|
-
// ✅ Type safety API
|
|
59
|
-
register(type, renderer) {
|
|
60
|
-
this.registry[type] = renderer;
|
|
61
|
-
}
|
|
62
|
-
get(type) {
|
|
63
|
-
return this.registry[type];
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
var fieldRegistry3 = new FieldRegistry();
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
|
|
70
1
|
// src/layout/layoutRegistry.ts
|
|
71
2
|
var LayoutRegistry = class {
|
|
72
3
|
constructor() {
|
|
@@ -131,37 +62,71 @@ function resolve(layout) {
|
|
|
131
62
|
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
132
63
|
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
133
64
|
const current = isMobile ? config.mobile : config.desktop;
|
|
134
|
-
if (!current)
|
|
135
|
-
children
|
|
136
|
-
|
|
137
|
-
|
|
65
|
+
if (!current) {
|
|
66
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
67
|
+
children,
|
|
68
|
+
" "
|
|
69
|
+
] });
|
|
70
|
+
}
|
|
138
71
|
const { type, config: childConfig } = resolve(current);
|
|
139
72
|
const Renderer = layoutRegistry.get(type);
|
|
140
|
-
if (!Renderer)
|
|
141
|
-
children
|
|
142
|
-
|
|
143
|
-
|
|
73
|
+
if (!Renderer) {
|
|
74
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
75
|
+
children,
|
|
76
|
+
" "
|
|
77
|
+
] });
|
|
78
|
+
}
|
|
144
79
|
return /* @__PURE__ */ jsx2(Renderer, { config: childConfig, children });
|
|
145
80
|
});
|
|
146
81
|
|
|
147
82
|
// src/components/DynamicInput.tsx
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
83
|
+
import React, { useMemo } from "react";
|
|
84
|
+
|
|
85
|
+
// src/fieldRegistry.ts
|
|
86
|
+
import {
|
|
87
|
+
fieldRegistry as coreFieldRegistry
|
|
88
|
+
} from "@dynamic-field-kit/core";
|
|
89
|
+
var fieldRegistry = coreFieldRegistry;
|
|
90
|
+
|
|
91
|
+
// src/components/DynamicInput.tsx
|
|
92
|
+
import { jsxs as jsxs2 } from "react/jsx-runtime";
|
|
93
|
+
var DynamicInput = ({
|
|
94
|
+
type,
|
|
95
|
+
value,
|
|
96
|
+
onChange,
|
|
97
|
+
label,
|
|
98
|
+
options,
|
|
99
|
+
className,
|
|
100
|
+
description
|
|
101
|
+
}) => {
|
|
102
|
+
const Renderer = useMemo(() => fieldRegistry.get(type), [type]);
|
|
103
|
+
if (!Renderer) {
|
|
104
|
+
return /* @__PURE__ */ jsxs2("div", { children: [
|
|
105
|
+
"Unknown field type: ",
|
|
106
|
+
type
|
|
107
|
+
] });
|
|
108
|
+
}
|
|
109
|
+
const RendererEl = Renderer;
|
|
110
|
+
return React.createElement(RendererEl, {
|
|
111
|
+
value,
|
|
112
|
+
onValueChange: onChange,
|
|
113
|
+
label,
|
|
114
|
+
options,
|
|
115
|
+
className,
|
|
116
|
+
description
|
|
117
|
+
});
|
|
157
118
|
};
|
|
158
119
|
var DynamicInput_default = DynamicInput;
|
|
159
120
|
|
|
160
121
|
// src/components/FieldInput.tsx
|
|
161
|
-
import { jsx as
|
|
162
|
-
var FieldInput = ({
|
|
122
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
123
|
+
var FieldInput = ({
|
|
124
|
+
fieldDescription,
|
|
125
|
+
renderInfos,
|
|
126
|
+
onValueChangeField
|
|
127
|
+
}) => {
|
|
163
128
|
const { name, type, label, options, className, description } = fieldDescription;
|
|
164
|
-
return /* @__PURE__ */
|
|
129
|
+
return /* @__PURE__ */ jsx3(
|
|
165
130
|
DynamicInput_default,
|
|
166
131
|
{
|
|
167
132
|
type,
|
|
@@ -177,20 +142,33 @@ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
|
177
142
|
var FieldInput_default = FieldInput;
|
|
178
143
|
|
|
179
144
|
// src/components/MultiFieldInput.tsx
|
|
180
|
-
import { useEffect, useMemo, useState } from "react";
|
|
181
|
-
import { jsx as
|
|
145
|
+
import { useEffect, useMemo as useMemo2, useState } from "react";
|
|
146
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
182
147
|
function resolveLayout(layout) {
|
|
183
|
-
if (!layout)
|
|
184
|
-
|
|
148
|
+
if (!layout) {
|
|
149
|
+
return { type: "column", config: {} };
|
|
150
|
+
}
|
|
151
|
+
if (typeof layout === "string") {
|
|
152
|
+
return { type: layout, config: {} };
|
|
153
|
+
}
|
|
185
154
|
return { type: layout.type, config: layout };
|
|
186
155
|
}
|
|
187
|
-
var MultiFieldInput = ({
|
|
156
|
+
var MultiFieldInput = ({
|
|
157
|
+
fieldDescriptions,
|
|
158
|
+
properties,
|
|
159
|
+
onChange,
|
|
160
|
+
layout
|
|
161
|
+
}) => {
|
|
188
162
|
const [data, setData] = useState({});
|
|
189
163
|
useEffect(() => {
|
|
190
|
-
if (properties)
|
|
164
|
+
if (properties) {
|
|
165
|
+
setData(properties);
|
|
166
|
+
}
|
|
191
167
|
}, [properties]);
|
|
192
|
-
const visibleFields =
|
|
193
|
-
() => fieldDescriptions.filter(
|
|
168
|
+
const visibleFields = useMemo2(
|
|
169
|
+
() => fieldDescriptions.filter(
|
|
170
|
+
(f) => !f.appearCondition || f.appearCondition(data)
|
|
171
|
+
),
|
|
194
172
|
[fieldDescriptions, data]
|
|
195
173
|
);
|
|
196
174
|
const { type, config } = resolveLayout(layout);
|
|
@@ -198,7 +176,7 @@ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
|
198
176
|
if (!Layout) {
|
|
199
177
|
throw new Error(`Unknown layout: ${type}`);
|
|
200
178
|
}
|
|
201
|
-
return /* @__PURE__ */
|
|
179
|
+
return /* @__PURE__ */ jsx4(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx4(
|
|
202
180
|
FieldInput_default,
|
|
203
181
|
{
|
|
204
182
|
fieldDescription: f,
|
|
@@ -213,15 +191,11 @@ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
|
213
191
|
)) });
|
|
214
192
|
};
|
|
215
193
|
var MultiFieldInput_default = MultiFieldInput;
|
|
216
|
-
|
|
217
|
-
// src/index.ts
|
|
218
|
-
var import_core2 = __toESM(require_dist());
|
|
219
|
-
var export_fieldRegistry = import_core2.fieldRegistry;
|
|
220
194
|
export {
|
|
221
195
|
DynamicInput_default as DynamicInput,
|
|
222
196
|
FieldInput_default as FieldInput,
|
|
223
197
|
MultiFieldInput_default as MultiFieldInput,
|
|
224
|
-
|
|
198
|
+
fieldRegistry,
|
|
225
199
|
layoutRegistry
|
|
226
200
|
};
|
|
227
201
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;ACjBxC,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;;;ACnB7C;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;;;ACrBwB,mBAQjB,OAAAC,MARiB;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,gBAAAA,KAAC,YAAS,QAAU,aAClB,UACF;AAER,CAAC;;;AC3BD,kBAAwD;AAkB9B,SAGf,OAAAC,MAHe,QAAAC,aAAA;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,OAAO,SAAS,WAAW,YAAY,MAAgB;AAC1H,QAAM,WAAW,0BAAc,IAAI,IAAI;AAGvC,MAAI,CAAC,SAAU,QAAO,gBAAAA,MAAC,SAAI;AAAA;AAAA,IAAqB;AAAA,KAAK;AAGrD,SAAO,gBAAAD,KAAC,YAAS,OAAc,eAAe,UAAU,OAAc,SAAkB,WAAsB,aAA0B;AAC5I;AAGA,IAAO,uBAAQ;;;ACVX,gBAAAE,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;;;AC/Cf,IAAAC,eAKO;","names":["fieldRegistry","jsx","jsx","jsxs","jsx","jsx","import_core"]}
|
|
1
|
+
{"version":3,"sources":["../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../src/components/DynamicInput.tsx","../src/fieldRegistry.ts","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["import React from 'react';\n\nexport type LayoutRenderer<C = any> = (props: {\n children: React.ReactNode;\n config?: C;\n}) => React.ReactElement;\n\nexport class LayoutRegistry {\n private layouts = new Map<string, LayoutRenderer>();\n\n register(type: string, renderer: LayoutRenderer) {\n if (this.layouts.has(type)) {\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`);\n }\n this.layouts.set(type, renderer);\n }\n\n get(type: string): LayoutRenderer | undefined {\n return this.layouts.get(type);\n }\n}\n\nexport const layoutRegistry = new LayoutRegistry();\n","import { layoutRegistry } from './layoutRegistry';\n\nlayoutRegistry.register('column', ({ children, config }) => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n\nlayoutRegistry.register('row', ({ children, config }) => (\n <div\n style={{\n display: 'flex',\n flexDirection: 'row',\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n\nlayoutRegistry.register('grid', ({ children, config }) => (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\n gap: config?.gap ?? 12,\n }}\n >\n {children}\n </div>\n));\n","import React from 'react';\nimport { LayoutConfig } from '../types/layout';\nimport { layoutRegistry } from './layoutRegistry';\n\nfunction resolve(layout: LayoutConfig) {\n if (typeof layout === 'string') {\n return { type: layout, config: {} };\n }\n return { type: layout.type, config: layout };\n}\n\nlayoutRegistry.register('responsive', ({ children, config }) => {\n const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;\n\n const current = isMobile ? config.mobile : config.desktop;\n if (!current) {\n return <>{children} </>;\n }\n\n const { type, config: childConfig } = resolve(current);\n const Renderer = layoutRegistry.get(type);\n\n if (!Renderer) {\n return <>{children} </>;\n }\n\n return <Renderer config={childConfig}>{children}</Renderer>;\n});\n","import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';\nimport React, { ReactNode, useMemo } from 'react';\nimport { fieldRegistry } from '../fieldRegistry';\n\ninterface Props<T extends FieldTypeKey> {\n type: T;\n value?: any;\n onChange?: (value: any) => void;\n label?: string;\n options?: Properties[];\n className?: string;\n description?: ReactNode;\n}\n\nconst DynamicInput = <T extends FieldTypeKey>({\n type,\n value,\n onChange,\n label,\n options,\n className,\n description,\n}: Props<T>) => {\n // Memoize renderer lookup to avoid unnecessary work on re-renders\n const Renderer = useMemo(() => fieldRegistry.get(type), [type]) as any;\n\n if (!Renderer) {\n return <div>Unknown field type: {type}</div>;\n }\n\n // Use direct element creation to avoid TSX generic typing pitfalls\n const RendererEl = Renderer as any;\n return React.createElement(RendererEl, {\n value,\n onValueChange: onChange,\n label,\n options,\n className,\n description,\n });\n};\n\nexport default DynamicInput;\n","import {\n fieldRegistry as coreFieldRegistry,\n type FieldRendererProps,\n type FieldTypeMap,\n} from '@dynamic-field-kit/core';\nimport type { ComponentType } from 'react';\n\nexport type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;\n\nexport interface ReactFieldRegistry {\n register<K extends keyof FieldTypeMap>(\n type: K,\n renderer: ReactFieldRenderer<FieldTypeMap[K]>\n ): void;\n get<K extends keyof FieldTypeMap>(\n type: K\n ): ReactFieldRenderer<FieldTypeMap[K]> | undefined;\n}\n\nexport const fieldRegistry = coreFieldRegistry as ReactFieldRegistry;\n","import { FieldDescription, Properties } from '@dynamic-field-kit/core';\nimport DynamicInput from './DynamicInput';\n\ninterface Props {\n fieldDescription: FieldDescription;\n renderInfos: Properties;\n onValueChangeField: (value: any, key: string) => void;\n}\n\nconst FieldInput = ({\n fieldDescription,\n renderInfos,\n onValueChangeField,\n}: Props) => {\n const { name, type, label, options, className, description } =\n fieldDescription;\n\n return (\n <DynamicInput\n type={type}\n label={label}\n value={renderInfos[name]}\n options={options}\n className={className}\n description={description}\n onChange={(v) => onValueChangeField(v, name)}\n />\n );\n};\n\nexport default FieldInput;\n","import { FieldDescription, Properties } from '@dynamic-field-kit/core';\r\nimport React, { useEffect, useMemo, useState } from 'react';\r\n\r\nimport { layoutRegistry } from '../layout';\r\nimport { LayoutConfig } from '../types/layout';\r\nimport FieldInput from './FieldInput';\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\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) {\r\n return { type: 'column', config: {} };\r\n }\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\nconst MultiFieldInput = ({\r\n fieldDescriptions,\r\n properties,\r\n onChange,\r\n layout,\r\n}: Props) => {\r\n const [data, setData] = useState<Properties>({});\r\n\r\n useEffect(() => {\r\n if (properties) {\r\n setData(properties);\r\n }\r\n }, [properties]);\r\n\r\n const visibleFields = useMemo(\r\n () =>\r\n fieldDescriptions.filter(\r\n (f) => !f.appearCondition || f.appearCondition(data)\r\n ),\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\nexport default MultiFieldInput;\r\n"],"mappings":"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","names":["jsx","jsxs","jsx","useMemo","jsx","useMemo"]}
|
package/package.json
CHANGED
|
@@ -1,47 +1,53 @@
|
|
|
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
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@dynamic-field-kit/react",
|
|
3
|
+
"version": "1.2.0",
|
|
4
|
+
"description": "React renderer for dynamic-field-kit",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.mjs",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"sideEffects": [
|
|
10
|
+
"./dist/index.js",
|
|
11
|
+
"./dist/index.mjs",
|
|
12
|
+
"./dist/index.d.ts",
|
|
13
|
+
"./src/layout/defaultLayouts.tsx",
|
|
14
|
+
"./src/layout/responsiveLayout.tsx"
|
|
15
|
+
],
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"peerDependencies": {
|
|
20
|
+
"@dynamic-field-kit/core": "^1.1.0"
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@dynamic-field-kit/core": "^1.1.0",
|
|
24
|
+
"react": "^18.2.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"tsup": "^8.0.1"
|
|
28
|
+
},
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
|
+
"import": "./dist/index.mjs",
|
|
33
|
+
"require": "./dist/index.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "npx tsup",
|
|
38
|
+
"clean": "rimraf dist",
|
|
39
|
+
"prepublishOnly": "npm run clean && npm run build",
|
|
40
|
+
"release:patch": "npm version patch && npm publish",
|
|
41
|
+
"release:minor": "npm version minor && npm publish",
|
|
42
|
+
"release:major": "npm version major && npm publish"
|
|
43
|
+
},
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "git+https://github.com/vannt-dev/dynamic-field-kit.git"
|
|
47
|
+
},
|
|
48
|
+
"keywords": [
|
|
49
|
+
"dynamic-field",
|
|
50
|
+
"dynamic-field-kit",
|
|
51
|
+
"dynamic-field-kit/react"
|
|
52
|
+
]
|
|
53
|
+
}
|