@netlisian/softconfig 0.0.0-alpha-20251026130436
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 +83 -0
- package/dist/index.css +337 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.mjs +1 -0
- package/dist/puck/index.css +337 -0
- package/dist/puck/index.d.mts +345 -0
- package/dist/puck/index.d.ts +345 -0
- package/dist/puck/index.js +2842 -0
- package/dist/puck/index.mjs +2792 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Puck Soft Config
|
|
2
|
+
|
|
3
|
+
Enhanced configuration and UI components for Puck with soft component support and CSS modules.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @netlisian/pucksoftconfig
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Basic Setup
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { SoftConfigProvider } from '@netlisian/pucksoftconfig';
|
|
17
|
+
import '@netlisian/pucksoftconfig/styles.css'; // Import the styles
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
return (
|
|
21
|
+
<SoftConfigProvider>
|
|
22
|
+
{/* Your app content */}
|
|
23
|
+
</SoftConfigProvider>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Importing Styles
|
|
29
|
+
|
|
30
|
+
The package includes compiled CSS that follows SUIT CSS naming convention. You can import it in two ways:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
// Using the named export
|
|
34
|
+
import '@netlisian/pucksoftconfig/styles.css';
|
|
35
|
+
|
|
36
|
+
// Or using the full path
|
|
37
|
+
import '@netlisian/pucksoftconfig/dist/index.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Custom Overrides
|
|
41
|
+
|
|
42
|
+
You can use the provided custom components:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
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
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Features
|
|
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
|
|
71
|
+
|
|
72
|
+
This package follows the CSS modules pattern from `@measured/puck`:
|
|
73
|
+
|
|
74
|
+
- **SUIT CSS naming convention**: `.ComponentName-descendant`
|
|
75
|
+
- **Type-safe class names**: Full TypeScript support
|
|
76
|
+
- **Scoped styles**: Prevents CSS conflicts
|
|
77
|
+
- **Optimized builds**: All CSS bundled into a single file
|
|
78
|
+
|
|
79
|
+
See [CSS_MODULES_MIGRATION.md](./CSS_MODULES_MIGRATION.md) for detailed implementation notes.
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
/* src/puck/components/error-boundary/styles.module.css */
|
|
2
|
+
.ErrorBoundary {
|
|
3
|
+
padding: 20px;
|
|
4
|
+
border: 1px solid #ff5858;
|
|
5
|
+
border-radius: 4px;
|
|
6
|
+
background-color: #fff0f0;
|
|
7
|
+
margin: 10px 0;
|
|
8
|
+
}
|
|
9
|
+
.ErrorBoundary-title {
|
|
10
|
+
color: #d32f2f;
|
|
11
|
+
margin: 0 0 10px 0;
|
|
12
|
+
}
|
|
13
|
+
.ErrorBoundary-details {
|
|
14
|
+
white-space: pre-wrap;
|
|
15
|
+
}
|
|
16
|
+
.ErrorBoundary-button {
|
|
17
|
+
margin-top: 10px;
|
|
18
|
+
padding: 5px 10px;
|
|
19
|
+
background-color: #d32f2f;
|
|
20
|
+
color: white;
|
|
21
|
+
border: none;
|
|
22
|
+
border-radius: 4px;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
}
|
|
25
|
+
.ErrorBoundary-button:hover {
|
|
26
|
+
background-color: #b71c1c;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* src/puck/overrides/Header.module.css */
|
|
30
|
+
.Header {
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 0.5rem;
|
|
35
|
+
flex-wrap: wrap;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* src/puck/overrides/ActionBar.module.css */
|
|
39
|
+
.ActionBar {
|
|
40
|
+
align-items: center;
|
|
41
|
+
cursor: default;
|
|
42
|
+
display: flex;
|
|
43
|
+
width: auto;
|
|
44
|
+
padding: 4px;
|
|
45
|
+
padding-inline-start: 0;
|
|
46
|
+
padding-inline-end: 0;
|
|
47
|
+
border-top-left-radius: 8px;
|
|
48
|
+
border-top-right-radius: 8px;
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
background: var(--puck-color-grey-01);
|
|
51
|
+
color: var(--puck-color-white);
|
|
52
|
+
font-family: var(--puck-font-family);
|
|
53
|
+
min-height: 26px;
|
|
54
|
+
}
|
|
55
|
+
.ActionBar-label {
|
|
56
|
+
color: var(--puck-color-grey-08);
|
|
57
|
+
font-size: var(--puck-font-size-xxxs);
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
padding-inline-start: 8px;
|
|
60
|
+
padding-inline-end: 8px;
|
|
61
|
+
margin-inline-start: 4px;
|
|
62
|
+
margin-inline-end: 4px;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
}
|
|
66
|
+
.ActionBar-action + .ActionBar-label {
|
|
67
|
+
padding-inline-start: 0;
|
|
68
|
+
}
|
|
69
|
+
.ActionBar-label + .ActionBar-action {
|
|
70
|
+
margin-inline-start: -4px;
|
|
71
|
+
}
|
|
72
|
+
.ActionBar-group {
|
|
73
|
+
align-items: center;
|
|
74
|
+
border-inline-start: 0.5px solid var(--puck-color-grey-05);
|
|
75
|
+
display: flex;
|
|
76
|
+
height: 100%;
|
|
77
|
+
padding-inline-start: 4px;
|
|
78
|
+
padding-inline-end: 4px;
|
|
79
|
+
}
|
|
80
|
+
.ActionBar-group:first-of-type {
|
|
81
|
+
border-inline-start: 0;
|
|
82
|
+
}
|
|
83
|
+
.ActionBar-group:empty {
|
|
84
|
+
display: none;
|
|
85
|
+
}
|
|
86
|
+
.ActionBar-action {
|
|
87
|
+
background: transparent;
|
|
88
|
+
border: none;
|
|
89
|
+
color: var(--puck-color-grey-08);
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
padding: 6px 8px;
|
|
92
|
+
margin-inline-start: 4px;
|
|
93
|
+
margin-inline-end: 4px;
|
|
94
|
+
border-radius: 4px;
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
transition: color 50ms ease-in;
|
|
100
|
+
}
|
|
101
|
+
.ActionBar-action svg {
|
|
102
|
+
max-width: none !important;
|
|
103
|
+
}
|
|
104
|
+
.ActionBar-action:focus-visible {
|
|
105
|
+
outline: 2px solid var(--puck-color-azure-05);
|
|
106
|
+
outline-offset: -2px;
|
|
107
|
+
}
|
|
108
|
+
@media (hover: hover) and (pointer: fine) {
|
|
109
|
+
.ActionBar-action:hover {
|
|
110
|
+
color: var(--puck-color-azure-06);
|
|
111
|
+
transition: none;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.ActionBar-action:active {
|
|
115
|
+
color: var(--puck-color-azure-07);
|
|
116
|
+
transition: none;
|
|
117
|
+
}
|
|
118
|
+
.ActionBar-group * {
|
|
119
|
+
margin: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* src/puck/overrides/ComponentItem.module.css */
|
|
123
|
+
.ComponentItem {
|
|
124
|
+
background: var(--puck-color-white);
|
|
125
|
+
cursor: grab;
|
|
126
|
+
border: 1px solid var(--puck-color-grey-09);
|
|
127
|
+
font-size: var(--puck-font-size-xxs);
|
|
128
|
+
border-radius: 4px;
|
|
129
|
+
justify-content: space-between;
|
|
130
|
+
align-items: center;
|
|
131
|
+
padding: 12px;
|
|
132
|
+
transition: background-color 50ms ease-in, color 50ms ease-in;
|
|
133
|
+
display: flex;
|
|
134
|
+
}
|
|
135
|
+
.ComponentItem-content {
|
|
136
|
+
flex: 1;
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
gap: 2px;
|
|
140
|
+
text-overflow: ellipsis;
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
overflow-x: hidden;
|
|
143
|
+
}
|
|
144
|
+
.ComponentItem-name {
|
|
145
|
+
font-weight: 500;
|
|
146
|
+
}
|
|
147
|
+
.ComponentItem-version {
|
|
148
|
+
font-size: 10px;
|
|
149
|
+
color: var(--puck-color-grey-05);
|
|
150
|
+
}
|
|
151
|
+
.ComponentItem-actions {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 8px;
|
|
155
|
+
}
|
|
156
|
+
.ComponentItem-settingsButton {
|
|
157
|
+
opacity: 0;
|
|
158
|
+
transition: opacity 120ms ease;
|
|
159
|
+
color: var(--puck-color-grey-05);
|
|
160
|
+
}
|
|
161
|
+
.ComponentItem:hover .ComponentItem-settingsButton {
|
|
162
|
+
opacity: 1;
|
|
163
|
+
}
|
|
164
|
+
.ComponentItem-grip {
|
|
165
|
+
color: var(--puck-color-grey-05);
|
|
166
|
+
display: flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
}
|
|
169
|
+
.ComponentItem-modal {
|
|
170
|
+
background: var(--puck-color-white);
|
|
171
|
+
display: flex;
|
|
172
|
+
flex-direction: column;
|
|
173
|
+
height: 100%;
|
|
174
|
+
}
|
|
175
|
+
.ComponentItem-modalHeader {
|
|
176
|
+
padding: 24px 32px;
|
|
177
|
+
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
178
|
+
}
|
|
179
|
+
.ComponentItem-modalTitle {
|
|
180
|
+
margin: 0 0 4px 0;
|
|
181
|
+
font-size: 24px;
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
color: var(--puck-color-black);
|
|
184
|
+
}
|
|
185
|
+
.ComponentItem-modalSubtitle {
|
|
186
|
+
margin: 0;
|
|
187
|
+
font-size: 14px;
|
|
188
|
+
color: var(--puck-color-grey-04);
|
|
189
|
+
}
|
|
190
|
+
.ComponentItem-modalBody {
|
|
191
|
+
flex: 1;
|
|
192
|
+
padding: 32px;
|
|
193
|
+
overflow-y: auto;
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: column;
|
|
196
|
+
gap: 32px;
|
|
197
|
+
}
|
|
198
|
+
.ComponentItem-section {
|
|
199
|
+
display: flex;
|
|
200
|
+
flex-direction: column;
|
|
201
|
+
gap: 16px;
|
|
202
|
+
}
|
|
203
|
+
.ComponentItem-sectionTitle {
|
|
204
|
+
margin: 0;
|
|
205
|
+
font-size: 16px;
|
|
206
|
+
font-weight: 600;
|
|
207
|
+
color: var(--puck-color-black);
|
|
208
|
+
}
|
|
209
|
+
.ComponentItem-sectionDescription {
|
|
210
|
+
margin: 0;
|
|
211
|
+
font-size: 14px;
|
|
212
|
+
color: var(--puck-color-grey-04);
|
|
213
|
+
}
|
|
214
|
+
.ComponentItem-versionList {
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
gap: 8px;
|
|
218
|
+
}
|
|
219
|
+
.ComponentItem-versionRow {
|
|
220
|
+
display: flex;
|
|
221
|
+
justify-content: space-between;
|
|
222
|
+
align-items: center;
|
|
223
|
+
padding: 16px;
|
|
224
|
+
border-radius: 6px;
|
|
225
|
+
border: 1px solid var(--puck-color-grey-09);
|
|
226
|
+
background: var(--puck-color-white);
|
|
227
|
+
transition: all 150ms ease;
|
|
228
|
+
}
|
|
229
|
+
.ComponentItem-versionRow--isDefault {
|
|
230
|
+
border-color: var(--puck-color-azure-07);
|
|
231
|
+
background: var(--puck-color-azure-10);
|
|
232
|
+
}
|
|
233
|
+
.ComponentItem-versionRow--isMarkedForDeletion {
|
|
234
|
+
opacity: 0.6;
|
|
235
|
+
background: var(--puck-color-grey-11);
|
|
236
|
+
}
|
|
237
|
+
.ComponentItem-versionInfo {
|
|
238
|
+
display: flex;
|
|
239
|
+
align-items: center;
|
|
240
|
+
gap: 12px;
|
|
241
|
+
flex: 1;
|
|
242
|
+
}
|
|
243
|
+
.ComponentItem-versionNumber {
|
|
244
|
+
font-size: 14px;
|
|
245
|
+
font-weight: 500;
|
|
246
|
+
color: var(--puck-color-black);
|
|
247
|
+
}
|
|
248
|
+
.ComponentItem-defaultBadge {
|
|
249
|
+
font-size: 11px;
|
|
250
|
+
padding: 3px 8px;
|
|
251
|
+
border-radius: 4px;
|
|
252
|
+
background: var(--puck-color-azure-07);
|
|
253
|
+
color: var(--puck-color-white);
|
|
254
|
+
font-weight: 500;
|
|
255
|
+
text-transform: uppercase;
|
|
256
|
+
letter-spacing: 0.5px;
|
|
257
|
+
}
|
|
258
|
+
.ComponentItem-deleteBadge {
|
|
259
|
+
font-size: 11px;
|
|
260
|
+
padding: 3px 8px;
|
|
261
|
+
border-radius: 4px;
|
|
262
|
+
background: var(--puck-color-grey-07);
|
|
263
|
+
color: var(--puck-color-white);
|
|
264
|
+
font-weight: 500;
|
|
265
|
+
text-transform: uppercase;
|
|
266
|
+
letter-spacing: 0.5px;
|
|
267
|
+
}
|
|
268
|
+
.ComponentItem-versionActions {
|
|
269
|
+
display: flex;
|
|
270
|
+
gap: 8px;
|
|
271
|
+
align-items: center;
|
|
272
|
+
}
|
|
273
|
+
.ComponentItem-migrationOptions {
|
|
274
|
+
width: 100%;
|
|
275
|
+
}
|
|
276
|
+
.ComponentItem-select {
|
|
277
|
+
width: 100%;
|
|
278
|
+
padding: 10px 12px;
|
|
279
|
+
border: 1px solid var(--puck-color-grey-09);
|
|
280
|
+
border-radius: 6px;
|
|
281
|
+
font-size: 14px;
|
|
282
|
+
background: var(--puck-color-white);
|
|
283
|
+
color: var(--puck-color-black);
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
transition: border-color 150ms ease;
|
|
286
|
+
}
|
|
287
|
+
.ComponentItem-select:hover {
|
|
288
|
+
border-color: var(--puck-color-grey-07);
|
|
289
|
+
}
|
|
290
|
+
.ComponentItem-select:focus {
|
|
291
|
+
outline: none;
|
|
292
|
+
border-color: var(--puck-color-azure-07);
|
|
293
|
+
}
|
|
294
|
+
.ComponentItem-modalFooter {
|
|
295
|
+
padding: 20px 32px;
|
|
296
|
+
border-top: 1px solid var(--puck-color-grey-09);
|
|
297
|
+
display: flex;
|
|
298
|
+
justify-content: space-between;
|
|
299
|
+
align-items: center;
|
|
300
|
+
background: var(--puck-color-grey-11);
|
|
301
|
+
}
|
|
302
|
+
.ComponentItem-footerLeft {
|
|
303
|
+
display: flex;
|
|
304
|
+
gap: 12px;
|
|
305
|
+
}
|
|
306
|
+
.ComponentItem-footerRight {
|
|
307
|
+
display: flex;
|
|
308
|
+
gap: 12px;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/* src/puck/components/modal/styles.module.css */
|
|
312
|
+
.Modal {
|
|
313
|
+
background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
|
|
314
|
+
display: none;
|
|
315
|
+
justify-content: center;
|
|
316
|
+
align-items: center;
|
|
317
|
+
position: fixed;
|
|
318
|
+
top: 0;
|
|
319
|
+
left: 0;
|
|
320
|
+
bottom: 0;
|
|
321
|
+
right: 0;
|
|
322
|
+
z-index: 1;
|
|
323
|
+
padding: 32px;
|
|
324
|
+
}
|
|
325
|
+
.Modal--isOpen {
|
|
326
|
+
display: flex;
|
|
327
|
+
}
|
|
328
|
+
.Modal-inner {
|
|
329
|
+
width: 100%;
|
|
330
|
+
max-width: 1024px;
|
|
331
|
+
border-radius: 8px;
|
|
332
|
+
overflow: hidden;
|
|
333
|
+
background: var(--puck-color-white);
|
|
334
|
+
display: flex;
|
|
335
|
+
flex-direction: column;
|
|
336
|
+
max-height: 90dvh;
|
|
337
|
+
}
|
package/dist/index.d.mts
ADDED
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'use client'
|