@netlisian/softconfig 0.0.4 → 0.0.6
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 +42 -53
- package/dist/puck/index.d.mts +14 -8
- package/dist/puck/index.d.ts +14 -8
- package/dist/puck/index.js +316 -187
- package/dist/puck/index.mjs +316 -187
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -1,82 +1,71 @@
|
|
|
1
1
|
# Puck Soft Config
|
|
2
2
|
|
|
3
|
-
Enhanced configuration and UI
|
|
3
|
+
Enhanced configuration and UI utilities for Puck that add “soft components” (composable, versioned, and remodelable components) plus ready-to-use UI chrome.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Packages & Exports
|
|
6
|
+
|
|
7
|
+
- `@netlisian/softconfig` → bundled CJS/ESM + types (`./dist/index.{js,mjs,d.ts}`)
|
|
8
|
+
- `@netlisian/softconfig/puck` → Puck-focused entry (`./dist/puck/index.*`)
|
|
9
|
+
- Styles: `@netlisian/softconfig/styles.css` (alias `./dist/index.css`) and `@netlisian/softconfig/puck/index.css`
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react@^18`, `@measured/puck@0.20.x`.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
6
14
|
|
|
7
15
|
```bash
|
|
8
|
-
pnpm add @netlisian/
|
|
16
|
+
pnpm add @netlisian/softconfig @measured/puck react
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
### Basic Setup
|
|
19
|
+
## Quick Start
|
|
14
20
|
|
|
15
21
|
```tsx
|
|
16
|
-
import { SoftConfigProvider } from
|
|
17
|
-
import
|
|
22
|
+
import { SoftConfigProvider } from "@netlisian/softconfig/puck";
|
|
23
|
+
import "@netlisian/softconfig/styles.css";
|
|
24
|
+
|
|
25
|
+
const hardConfig = { components: {/* your hard Puck components */} };
|
|
26
|
+
const softComponents = {/* optional persisted soft components */};
|
|
27
|
+
const overrides = {/* optional UI overrides like map/action bar/etc. */};
|
|
18
28
|
|
|
19
|
-
function App() {
|
|
29
|
+
export default function App({ children }: { children: React.ReactNode }) {
|
|
20
30
|
return (
|
|
21
|
-
<SoftConfigProvider
|
|
22
|
-
{
|
|
31
|
+
<SoftConfigProvider
|
|
32
|
+
hardConfig={hardConfig}
|
|
33
|
+
softComponents={softComponents}
|
|
34
|
+
overrides={overrides}
|
|
35
|
+
>
|
|
36
|
+
{(softConfig, softComponentsRegistry) => (
|
|
37
|
+
/* render Puck with the soft-config-driven config */
|
|
38
|
+
<YourPuckHost config={softConfig} softComponents={softComponentsRegistry} />
|
|
39
|
+
)}
|
|
23
40
|
</SoftConfigProvider>
|
|
24
41
|
);
|
|
25
42
|
}
|
|
26
43
|
```
|
|
27
44
|
|
|
28
|
-
|
|
45
|
+
`SoftConfigProvider` accepts an optional `value` prop if you want to bring your own Zustand store (see `src/puck/context/storeProvider.tsx`). Children are rendered via a render-prop to give you the hydrated `softConfig` and `softComponents` to pass directly to Puck.
|
|
29
46
|
|
|
30
|
-
|
|
47
|
+
## Field Mapping & Transforms
|
|
31
48
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
import '@netlisian/pucksoftconfig/styles.css';
|
|
49
|
+
- Soft components support `_map` entries with optional transforms or CVA-like configs. Because functions are not persisted, the library regenerates missing transforms at runtime (including during remodel/decompose) using the stored CVA config.
|
|
50
|
+
- Field defaults are read from `_fieldSettings` when resolving mappings, so mapped props fall back to configured defaults when source data is absent.
|
|
35
51
|
|
|
36
|
-
|
|
37
|
-
import '@netlisian/pucksoftconfig/dist/index.css';
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Custom Overrides
|
|
52
|
+
## Styles
|
|
41
53
|
|
|
42
|
-
|
|
54
|
+
Import once in your app root:
|
|
43
55
|
|
|
44
|
-
```
|
|
45
|
-
import
|
|
46
|
-
CustomActionBar,
|
|
47
|
-
CustomComponentItem,
|
|
48
|
-
CustomHeader,
|
|
49
|
-
} from '@netlisian/pucksoftconfig';
|
|
50
|
-
|
|
51
|
-
const config = {
|
|
52
|
-
// ... your config
|
|
53
|
-
overrides: {
|
|
54
|
-
actionBar: CustomActionBar,
|
|
55
|
-
componentItem: CustomComponentItem,
|
|
56
|
-
header: CustomHeader,
|
|
57
|
-
},
|
|
58
|
-
};
|
|
56
|
+
```ts
|
|
57
|
+
import "@netlisian/softconfig/styles.css";
|
|
59
58
|
```
|
|
60
59
|
|
|
61
|
-
##
|
|
62
|
-
|
|
63
|
-
- ✅ Type-safe CSS modules with SUIT CSS naming
|
|
64
|
-
- ✅ Soft component management (build, remodel, decompose, demolish)
|
|
65
|
-
- ✅ Version management for soft components
|
|
66
|
-
- ✅ Error boundaries for component rendering
|
|
67
|
-
- ✅ Custom action bars and component items
|
|
68
|
-
- ✅ Zustand-based state management
|
|
69
|
-
|
|
70
|
-
## Architecture
|
|
60
|
+
## Overrides
|
|
71
61
|
|
|
72
|
-
|
|
62
|
+
You can supply custom overrides (action bar, headers, map UI, etc.) through the `overrides` prop. See `src/puck/types/Overrides.ts` for the full surface.
|
|
73
63
|
|
|
74
|
-
|
|
75
|
-
- **Type-safe class names**: Full TypeScript support
|
|
76
|
-
- **Scoped styles**: Prevents CSS conflicts
|
|
77
|
-
- **Optimized builds**: All CSS bundled into a single file
|
|
64
|
+
## Development
|
|
78
65
|
|
|
79
|
-
|
|
66
|
+
- Build: `pnpm --filter @netlisian/softconfig build`
|
|
67
|
+
- Dev (watch): `pnpm --filter @netlisian/softconfig dev`
|
|
68
|
+
- Lint: `pnpm --filter @netlisian/softconfig lint`
|
|
80
69
|
|
|
81
70
|
## License
|
|
82
71
|
|
package/dist/puck/index.d.mts
CHANGED
|
@@ -103,13 +103,10 @@ type BuilderComponentConfig = {
|
|
|
103
103
|
slot: string;
|
|
104
104
|
}[];
|
|
105
105
|
_map?: {
|
|
106
|
-
from: string | string[];
|
|
107
106
|
to: string | string[];
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
edges: any[];
|
|
112
|
-
};
|
|
107
|
+
from: string | string[];
|
|
108
|
+
transform?: (inputs: any[], props: DefaultComponentProps) => any;
|
|
109
|
+
[key: string]: any;
|
|
113
110
|
}[];
|
|
114
111
|
[key: string]: any;
|
|
115
112
|
};
|
|
@@ -129,6 +126,7 @@ type SoftSubComponent = {
|
|
|
129
126
|
}[];
|
|
130
127
|
type SoftComponent = {
|
|
131
128
|
fields: Fields;
|
|
129
|
+
fieldSettings?: Record<string, any>;
|
|
132
130
|
defaultProps: DefaultComponentProps;
|
|
133
131
|
components: SoftSubComponent;
|
|
134
132
|
slots: {
|
|
@@ -140,6 +138,7 @@ type VersionedSoftComponent = {
|
|
|
140
138
|
versions: {
|
|
141
139
|
[version: string]: {
|
|
142
140
|
fields: Fields;
|
|
141
|
+
fieldSettings?: Record<string, any>;
|
|
143
142
|
defaultProps: DefaultComponentProps;
|
|
144
143
|
components: SoftSubComponent;
|
|
145
144
|
slots: {
|
|
@@ -161,24 +160,31 @@ type Overrides = {
|
|
|
161
160
|
toOptions: {
|
|
162
161
|
label: string;
|
|
163
162
|
value: string;
|
|
164
|
-
type: Field["type"];
|
|
163
|
+
type: Field["type"] | "reference";
|
|
165
164
|
}[];
|
|
166
165
|
fromOptions: {
|
|
167
166
|
label: string;
|
|
168
167
|
value: string;
|
|
169
|
-
type: Field["type"];
|
|
168
|
+
type: Field["type"] | "reference";
|
|
170
169
|
}[];
|
|
171
170
|
props: DefaultComponentProps;
|
|
172
171
|
value: BuilderComponentConfig["_map"];
|
|
173
172
|
onChange: (value: BuilderComponentConfig["_map"]) => void;
|
|
174
173
|
id: string;
|
|
175
174
|
}>;
|
|
175
|
+
hydrateMapTransform?: (mapItem: NonNullable<BuilderComponentConfig["_map"]>[number], context: {
|
|
176
|
+
componentName: string;
|
|
177
|
+
version: string;
|
|
178
|
+
subComponentPath: string[];
|
|
179
|
+
softComponent: VersionedSoftComponent["versions"][string];
|
|
180
|
+
}) => ((inputs: any[], props: DefaultComponentProps) => any) | undefined;
|
|
176
181
|
};
|
|
177
182
|
|
|
178
183
|
type Status = "building" | "remodeling" | "ready" | "inspecting";
|
|
179
184
|
type AppStore = {
|
|
180
185
|
softConfig: Config;
|
|
181
186
|
softComponents: SoftComponents;
|
|
187
|
+
hydratedSoftComponents?: SoftComponents;
|
|
182
188
|
state: Status;
|
|
183
189
|
originalHistory: History[];
|
|
184
190
|
storedConfig?: Config;
|
package/dist/puck/index.d.ts
CHANGED
|
@@ -103,13 +103,10 @@ type BuilderComponentConfig = {
|
|
|
103
103
|
slot: string;
|
|
104
104
|
}[];
|
|
105
105
|
_map?: {
|
|
106
|
-
from: string | string[];
|
|
107
106
|
to: string | string[];
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
edges: any[];
|
|
112
|
-
};
|
|
107
|
+
from: string | string[];
|
|
108
|
+
transform?: (inputs: any[], props: DefaultComponentProps) => any;
|
|
109
|
+
[key: string]: any;
|
|
113
110
|
}[];
|
|
114
111
|
[key: string]: any;
|
|
115
112
|
};
|
|
@@ -129,6 +126,7 @@ type SoftSubComponent = {
|
|
|
129
126
|
}[];
|
|
130
127
|
type SoftComponent = {
|
|
131
128
|
fields: Fields;
|
|
129
|
+
fieldSettings?: Record<string, any>;
|
|
132
130
|
defaultProps: DefaultComponentProps;
|
|
133
131
|
components: SoftSubComponent;
|
|
134
132
|
slots: {
|
|
@@ -140,6 +138,7 @@ type VersionedSoftComponent = {
|
|
|
140
138
|
versions: {
|
|
141
139
|
[version: string]: {
|
|
142
140
|
fields: Fields;
|
|
141
|
+
fieldSettings?: Record<string, any>;
|
|
143
142
|
defaultProps: DefaultComponentProps;
|
|
144
143
|
components: SoftSubComponent;
|
|
145
144
|
slots: {
|
|
@@ -161,24 +160,31 @@ type Overrides = {
|
|
|
161
160
|
toOptions: {
|
|
162
161
|
label: string;
|
|
163
162
|
value: string;
|
|
164
|
-
type: Field["type"];
|
|
163
|
+
type: Field["type"] | "reference";
|
|
165
164
|
}[];
|
|
166
165
|
fromOptions: {
|
|
167
166
|
label: string;
|
|
168
167
|
value: string;
|
|
169
|
-
type: Field["type"];
|
|
168
|
+
type: Field["type"] | "reference";
|
|
170
169
|
}[];
|
|
171
170
|
props: DefaultComponentProps;
|
|
172
171
|
value: BuilderComponentConfig["_map"];
|
|
173
172
|
onChange: (value: BuilderComponentConfig["_map"]) => void;
|
|
174
173
|
id: string;
|
|
175
174
|
}>;
|
|
175
|
+
hydrateMapTransform?: (mapItem: NonNullable<BuilderComponentConfig["_map"]>[number], context: {
|
|
176
|
+
componentName: string;
|
|
177
|
+
version: string;
|
|
178
|
+
subComponentPath: string[];
|
|
179
|
+
softComponent: VersionedSoftComponent["versions"][string];
|
|
180
|
+
}) => ((inputs: any[], props: DefaultComponentProps) => any) | undefined;
|
|
176
181
|
};
|
|
177
182
|
|
|
178
183
|
type Status = "building" | "remodeling" | "ready" | "inspecting";
|
|
179
184
|
type AppStore = {
|
|
180
185
|
softConfig: Config;
|
|
181
186
|
softComponents: SoftComponents;
|
|
187
|
+
hydratedSoftComponents?: SoftComponents;
|
|
182
188
|
state: Status;
|
|
183
189
|
originalHistory: History[];
|
|
184
190
|
storedConfig?: Config;
|