@measured/puck 0.1.6 → 0.2.1
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 +152 -0
- package/dist/index.css +97 -55
- package/dist/index.d.ts +2 -2
- package/dist/index.js +78 -40
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# puck
|
|
2
|
+
|
|
3
|
+
The self-hosted, drag and drop editor for React.
|
|
4
|
+
|
|
5
|
+
- 🖱️ **Drag and drop**: Visual editing for your existing React component library
|
|
6
|
+
- 🌐 **Integrations**: Load your content from a 3rd party headless CMS
|
|
7
|
+
- ✍️ **Inline editing**: Author content directly via puck for convenience
|
|
8
|
+
- ⭐️ **No vendor lock-in**: Self-host or integrate with your existing application
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
[See demo](https://puck-demo-six.vercel.app/custom/edit)
|
|
13
|
+
|
|
14
|
+
## Example
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
import { Puck } from "puck";
|
|
18
|
+
|
|
19
|
+
// Create puck component config
|
|
20
|
+
const config = {
|
|
21
|
+
HeadingBlock: {
|
|
22
|
+
fields: {
|
|
23
|
+
children: {
|
|
24
|
+
type: "text",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
render: ({ children }) => {
|
|
28
|
+
return <h1>{children}</h1>;
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// Describe the initial data
|
|
34
|
+
const data = {
|
|
35
|
+
content: [
|
|
36
|
+
{
|
|
37
|
+
type: "HeadingBlock",
|
|
38
|
+
props: {
|
|
39
|
+
title: "Home Page",
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// Render Puck
|
|
46
|
+
export function Page() {
|
|
47
|
+
return <Puck config={config} data={data} />;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Installation
|
|
52
|
+
|
|
53
|
+
Install the package
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
npm i puck --save
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Or generate a puck application using a recipe
|
|
60
|
+
|
|
61
|
+
```sh
|
|
62
|
+
npx create-puck-app my-app
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Recipes
|
|
66
|
+
|
|
67
|
+
Puck is a React component that can be easily integrated into your existing application. We also provide helpful recipes for common use cases:
|
|
68
|
+
|
|
69
|
+
- [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js app example
|
|
70
|
+
|
|
71
|
+
## Plugins
|
|
72
|
+
|
|
73
|
+
Puck can be configured to work with plugins. Plugins can extend the functionality to support novel functionality.
|
|
74
|
+
|
|
75
|
+
### Official plugins
|
|
76
|
+
|
|
77
|
+
- [`heading-analyzer`](https://github.com/measuredco/puck/tree/main/packages/plugin-heading-analyzer): Analyze the heading outline of your page and be warned when you're not respecting WCAG 2 accessiblity standards.
|
|
78
|
+
|
|
79
|
+
### Developing a plugin
|
|
80
|
+
|
|
81
|
+
The plugin API follows a React paradigm. Each plugin passed to the Puck editor can provide three functions:
|
|
82
|
+
|
|
83
|
+
#### `Plugin`
|
|
84
|
+
|
|
85
|
+
- `renderPage` (`Component`): Render the root node of the preview content
|
|
86
|
+
- `renderPageFields` (`Component`): Render the page fields
|
|
87
|
+
- `renderFields` (`Component`): Render the fields for the currently selected component
|
|
88
|
+
|
|
89
|
+
Each render function receives the `children` prop, which you should render to show the page or fields, and the `data` prop, which can be used to read the data model for the page.
|
|
90
|
+
|
|
91
|
+
#### Example
|
|
92
|
+
|
|
93
|
+
Here's a basic plugin that renders a "My plugin" heading in the page field area:
|
|
94
|
+
|
|
95
|
+
```jsx
|
|
96
|
+
const myPlugin = {
|
|
97
|
+
renderPageFields: (props) => (
|
|
98
|
+
<div>
|
|
99
|
+
{props.children}
|
|
100
|
+
|
|
101
|
+
<h2>My plugin</h2>
|
|
102
|
+
</div>
|
|
103
|
+
),
|
|
104
|
+
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Reference
|
|
108
|
+
|
|
109
|
+
### `Config`
|
|
110
|
+
|
|
111
|
+
The `Config` object describes which components Puck should render, how they should render and which inputs are available to them.
|
|
112
|
+
|
|
113
|
+
- **page** (`object`)
|
|
114
|
+
- **fields** (`object`):
|
|
115
|
+
- **title** (`Field`): A mandatory field for the page title.
|
|
116
|
+
- **[fieldName]** (`Field`): User defined fields, used to describe the input data stored in the `page` key.
|
|
117
|
+
- **render** (`Component`): Render a React component at the root of your component tree. Useful for defining context providers.
|
|
118
|
+
- **components** (`object`): Definitions for each of the components you want to show in the visual editor
|
|
119
|
+
- **[componentName]** (`object`)
|
|
120
|
+
- **fields** (`Field`): The Field objects describing the input data stored against this component.
|
|
121
|
+
- **render** (`Component`): Render function for your React component. Receives props as defined in fields.
|
|
122
|
+
- **defaultProps** (`object` [optional]): Default props to pass to your component. Will show in fields.
|
|
123
|
+
|
|
124
|
+
### `Field`
|
|
125
|
+
|
|
126
|
+
A `Field` represents a user input field shown in the Puck interface.
|
|
127
|
+
|
|
128
|
+
- **type** (`text` | `textarea` | `number` | `select` | `radio` | `external` | `array`): The input type to render
|
|
129
|
+
- **label** (`text` [optional]): A label for the input. Will use the key if not provided.
|
|
130
|
+
- **arrayFields** (`object`): Object describing sub-fields for items in an `array` input
|
|
131
|
+
- **[fieldName]** (`Field`): The Field objects describing the input data for each item
|
|
132
|
+
- **getItemSummary** (`(object, number) => string` [optional]): Function to get the name of each item when using an `array` field type
|
|
133
|
+
- **defaultItemProps** (`object` [optional]): Default props to pass to each new item added, when using a `array` field type
|
|
134
|
+
- **options** (`object[]`): array of items to render for select-type inputs
|
|
135
|
+
- **label** (`string`)
|
|
136
|
+
- **value** (`string`)
|
|
137
|
+
|
|
138
|
+
### `Data`
|
|
139
|
+
|
|
140
|
+
The `Data` object stores the state of a page.
|
|
141
|
+
|
|
142
|
+
- **page** (`object`):
|
|
143
|
+
- **title** (string): Page title
|
|
144
|
+
- **[prop]** (string): User defined data from page fields
|
|
145
|
+
- **content** (`object[]`):
|
|
146
|
+
- **type** (string): Component name
|
|
147
|
+
- **props** (object):
|
|
148
|
+
- **[prop]** (string): User defined data from component fields
|
|
149
|
+
|
|
150
|
+
## License
|
|
151
|
+
|
|
152
|
+
MIT © [Measured Co.](https://github.com/measuredco)
|
package/dist/index.css
CHANGED
|
@@ -140,13 +140,15 @@
|
|
|
140
140
|
/* styles/global.css */
|
|
141
141
|
|
|
142
142
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
|
|
143
|
-
.
|
|
143
|
+
._DraggableComponent_1ywkv_1 {
|
|
144
144
|
position: relative;
|
|
145
145
|
}
|
|
146
|
-
._DraggableComponent-
|
|
146
|
+
._DraggableComponent-contents_1ywkv_5 {
|
|
147
|
+
margin-top: -1px;
|
|
148
|
+
padding-top: 1px;
|
|
147
149
|
position: relative;
|
|
148
150
|
}
|
|
149
|
-
._DraggableComponent-
|
|
151
|
+
._DraggableComponent-overlay_1ywkv_11 {
|
|
150
152
|
display: none;
|
|
151
153
|
height: 100%;
|
|
152
154
|
width: 100%;
|
|
@@ -155,22 +157,22 @@
|
|
|
155
157
|
z-index: 1;
|
|
156
158
|
font-family: var(--puck-font-stack);
|
|
157
159
|
}
|
|
158
|
-
.
|
|
160
|
+
._DraggableComponent_1ywkv_1:hover ._DraggableComponent-overlay_1ywkv_11 {
|
|
159
161
|
display: block;
|
|
160
162
|
background-color: #cdcdcd50;
|
|
161
163
|
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
|
162
164
|
}
|
|
163
|
-
._DraggableComponent--
|
|
165
|
+
._DraggableComponent--isModifierHeld_1ywkv_27:hover ._DraggableComponent-overlay_1ywkv_11 {
|
|
164
166
|
display: none;
|
|
165
167
|
}
|
|
166
|
-
._DraggableComponent--
|
|
168
|
+
._DraggableComponent--isSelected_1ywkv_31 ._DraggableComponent-overlay_1ywkv_11 {
|
|
167
169
|
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
|
168
170
|
display: block;
|
|
169
171
|
}
|
|
170
|
-
._DraggableComponent-
|
|
172
|
+
._DraggableComponent-actions_1ywkv_36 {
|
|
171
173
|
display: none;
|
|
172
174
|
}
|
|
173
|
-
.
|
|
175
|
+
._DraggableComponent_1ywkv_1:hover ._DraggableComponent-actions_1ywkv_36 {
|
|
174
176
|
position: absolute;
|
|
175
177
|
right: 0;
|
|
176
178
|
padding: 8px;
|
|
@@ -180,7 +182,7 @@
|
|
|
180
182
|
gap: 4px;
|
|
181
183
|
border: 1px solid var(--puck-color-grey-8);
|
|
182
184
|
}
|
|
183
|
-
._DraggableComponent-
|
|
185
|
+
._DraggableComponent-actionsLabel_1ywkv_51 {
|
|
184
186
|
display: flex;
|
|
185
187
|
justify-content: center;
|
|
186
188
|
align-items: center;
|
|
@@ -189,14 +191,14 @@
|
|
|
189
191
|
margin-right: 8px;
|
|
190
192
|
border-right: 1px solid var(--puck-color-grey-8);
|
|
191
193
|
}
|
|
192
|
-
._DraggableComponent-
|
|
194
|
+
._DraggableComponent-action_1ywkv_36 {
|
|
193
195
|
background: transparent;
|
|
194
196
|
border: none;
|
|
195
197
|
color: var(--puck-color-grey-2);
|
|
196
198
|
padding: 8px;
|
|
197
199
|
border-radius: 4px;
|
|
198
200
|
}
|
|
199
|
-
._DraggableComponent-
|
|
201
|
+
._DraggableComponent-action_1ywkv_36:hover {
|
|
200
202
|
background: var(--puck-color-grey-9);
|
|
201
203
|
color: var(--puck-color-blue);
|
|
202
204
|
cursor: pointer;
|
|
@@ -317,22 +319,34 @@
|
|
|
317
319
|
}
|
|
318
320
|
|
|
319
321
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
|
|
320
|
-
.
|
|
322
|
+
._Input_y3456_1 {
|
|
323
|
+
background: white;
|
|
324
|
+
color: var(--puck-color-grey-3);
|
|
325
|
+
padding: 16px;
|
|
326
|
+
border-radius: 4px;
|
|
321
327
|
display: block;
|
|
322
328
|
font-family: var(--puck-font-stack);
|
|
323
329
|
}
|
|
324
|
-
.
|
|
330
|
+
._Input_y3456_1 ._Input_y3456_1 {
|
|
331
|
+
padding: 0px;
|
|
332
|
+
}
|
|
333
|
+
._Input_y3456_1 * {
|
|
325
334
|
box-sizing: border-box;
|
|
326
335
|
}
|
|
327
|
-
.
|
|
336
|
+
._Input_y3456_1 + ._Input_y3456_1 {
|
|
328
337
|
margin-top: 8px;
|
|
329
338
|
}
|
|
330
|
-
._Input-
|
|
331
|
-
|
|
339
|
+
._Input-label_y3456_22 {
|
|
340
|
+
display: flex;
|
|
341
|
+
padding-bottom: 12px;
|
|
332
342
|
font-size: var(--puck-font-size-xxs);
|
|
333
343
|
font-weight: 500;
|
|
334
344
|
}
|
|
335
|
-
._Input-
|
|
345
|
+
._Input-labelIcon_y3456_29 {
|
|
346
|
+
color: var(--puck-color-grey-6);
|
|
347
|
+
margin-right: 4px;
|
|
348
|
+
}
|
|
349
|
+
._Input-input_y3456_34 {
|
|
336
350
|
border-width: 1px;
|
|
337
351
|
border-style: solid;
|
|
338
352
|
border-color: var(--puck-color-grey-8);
|
|
@@ -341,7 +355,7 @@
|
|
|
341
355
|
padding: 12px 16px;
|
|
342
356
|
width: 100%;
|
|
343
357
|
}
|
|
344
|
-
.
|
|
358
|
+
._Input_y3456_1 select {
|
|
345
359
|
appearance: none;
|
|
346
360
|
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
|
|
347
361
|
background-size: 12px;
|
|
@@ -349,34 +363,40 @@
|
|
|
349
363
|
background-repeat: no-repeat;
|
|
350
364
|
background-color: white;
|
|
351
365
|
}
|
|
352
|
-
._Input--
|
|
366
|
+
._Input--readOnly_y3456_55 ._Input-input_y3456_34 {
|
|
353
367
|
background-color: var(--puck-color-grey-9);
|
|
354
368
|
border-color: var(--puck-color-grey-8);
|
|
355
369
|
}
|
|
356
|
-
._Input-
|
|
370
|
+
._Input-input_y3456_34:hover {
|
|
357
371
|
border-color: var(--puck-color-neutral-3);
|
|
358
372
|
}
|
|
359
|
-
._Input-
|
|
373
|
+
._Input-array_y3456_64 {
|
|
360
374
|
background: white;
|
|
361
|
-
border-bottom: var(--puck-color-grey-8) solid 1px;
|
|
362
375
|
}
|
|
363
|
-
._Input-
|
|
364
|
-
|
|
376
|
+
._Input-array_y3456_64 > summary {
|
|
377
|
+
color: var(--puck-color-grey-3);
|
|
378
|
+
font-size: var(--puck-font-size-xxs);
|
|
379
|
+
padding: 12px 16px;
|
|
365
380
|
position: relative;
|
|
366
381
|
}
|
|
367
|
-
._Input-
|
|
382
|
+
._Input-array_y3456_64 > summary:hover {
|
|
368
383
|
cursor: pointer;
|
|
369
384
|
color: var(--puck-color-blue);
|
|
370
385
|
}
|
|
371
|
-
._Input-
|
|
386
|
+
._Input-array_y3456_64 > fieldset {
|
|
372
387
|
border: none;
|
|
373
|
-
border-top: var(--puck-color-grey-8) solid 1px;
|
|
374
388
|
margin: 0;
|
|
375
|
-
padding: 16px;
|
|
376
389
|
}
|
|
377
|
-
._Input-
|
|
390
|
+
._Input-array_y3456_64 > fieldset ._Input_y3456_1 + ._Input-array_y3456_64 > fieldset ._Input_y3456_1 {
|
|
391
|
+
margin-top: 16px;
|
|
392
|
+
}
|
|
393
|
+
._Input-array_y3456_64 > fieldset ._Input-label_y3456_22 {
|
|
394
|
+
padding-bottom: 4px;
|
|
395
|
+
}
|
|
396
|
+
._Input-array_y3456_64 ._Input-action_y3456_92 {
|
|
378
397
|
background: transparent;
|
|
379
398
|
border: none;
|
|
399
|
+
border-radius: 4px;
|
|
380
400
|
color: var(--puck-color-grey-2);
|
|
381
401
|
display: none;
|
|
382
402
|
padding: 8px;
|
|
@@ -384,15 +404,15 @@
|
|
|
384
404
|
right: 4px;
|
|
385
405
|
top: 4px;
|
|
386
406
|
}
|
|
387
|
-
._Input-
|
|
407
|
+
._Input-array_y3456_64 summary:hover ._Input-action_y3456_92 {
|
|
388
408
|
display: block;
|
|
389
409
|
}
|
|
390
|
-
._Input-
|
|
410
|
+
._Input-array_y3456_64 ._Input-action_y3456_92:hover {
|
|
391
411
|
background: var(--puck-color-grey-9);
|
|
392
412
|
color: var(--puck-color-blue);
|
|
393
413
|
cursor: pointer;
|
|
394
414
|
}
|
|
395
|
-
._Input-
|
|
415
|
+
._Input-addButton_y3456_114 {
|
|
396
416
|
background-color: white;
|
|
397
417
|
border: none;
|
|
398
418
|
color: var(--puck-color-blue);
|
|
@@ -400,29 +420,44 @@
|
|
|
400
420
|
width: 100%;
|
|
401
421
|
margin: 0;
|
|
402
422
|
padding: 12px 16px;
|
|
423
|
+
text-align: left;
|
|
403
424
|
}
|
|
404
|
-
._Input-
|
|
425
|
+
._Input-addButton_y3456_114:hover {
|
|
405
426
|
background: var(--puck-color-grey-9);
|
|
406
427
|
}
|
|
407
|
-
._Input-
|
|
408
|
-
border: 1px solid var(--puck-color-grey-8);
|
|
409
|
-
border-radius: 4px;
|
|
410
|
-
margin-top: 4px;
|
|
428
|
+
._Input-item_y3456_129 {
|
|
411
429
|
overflow: hidden;
|
|
412
430
|
}
|
|
413
|
-
._Input-
|
|
414
|
-
margin-bottom: 8px;
|
|
415
|
-
margin-top: 8px;
|
|
416
|
-
}
|
|
417
|
-
._Input-radioGroupItems_1vwgb_119 {
|
|
431
|
+
._Input-radioGroupItems_y3456_133 {
|
|
418
432
|
display: flex;
|
|
419
|
-
|
|
433
|
+
border: 1px solid var(--puck-color-grey-7);
|
|
434
|
+
border-radius: 4px;
|
|
420
435
|
flex-wrap: wrap;
|
|
436
|
+
overflow: hidden;
|
|
421
437
|
}
|
|
422
|
-
._Input-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
438
|
+
._Input-radio_y3456_133 {
|
|
439
|
+
border-right: 1px solid var(--puck-color-grey-7);
|
|
440
|
+
flex-grow: 1;
|
|
441
|
+
}
|
|
442
|
+
._Input-radio_y3456_133:last-of-type {
|
|
443
|
+
border-right: none;
|
|
444
|
+
}
|
|
445
|
+
._Input-radioInner_y3456_150 {
|
|
446
|
+
font-size: var(--puck-font-size-xxxs);
|
|
447
|
+
padding: 8px 12px;
|
|
448
|
+
text-align: center;
|
|
449
|
+
}
|
|
450
|
+
._Input-radioInner_y3456_150:hover {
|
|
451
|
+
background-color: var(--puck-color-azure-8);
|
|
452
|
+
cursor: pointer;
|
|
453
|
+
}
|
|
454
|
+
._Input-radio_y3456_133 input:checked ~ ._Input-radioInner_y3456_150 {
|
|
455
|
+
background-color: var(--puck-color-azure-4);
|
|
456
|
+
color: white;
|
|
457
|
+
font-weight: 500;
|
|
458
|
+
}
|
|
459
|
+
._Input-radio_y3456_133 input {
|
|
460
|
+
display: none;
|
|
426
461
|
}
|
|
427
462
|
|
|
428
463
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
|
|
@@ -549,27 +584,34 @@
|
|
|
549
584
|
}
|
|
550
585
|
|
|
551
586
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
|
|
552
|
-
.
|
|
553
|
-
|
|
554
|
-
|
|
587
|
+
._SidebarSection_yd8db_1 {
|
|
588
|
+
display: flex;
|
|
589
|
+
flex-direction: column;
|
|
555
590
|
}
|
|
556
|
-
.
|
|
591
|
+
._SidebarSection_yd8db_1:last-of-type {
|
|
592
|
+
flex-grow: 1;
|
|
593
|
+
}
|
|
594
|
+
._SidebarSection-title_yd8db_10 {
|
|
557
595
|
background: white;
|
|
558
596
|
padding: 16px;
|
|
559
597
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
|
560
598
|
}
|
|
561
|
-
._SidebarSection-
|
|
599
|
+
._SidebarSection-title_yd8db_10:hover {
|
|
562
600
|
opacity: 0.6;
|
|
563
601
|
cursor: pointer;
|
|
564
602
|
}
|
|
565
|
-
._SidebarSection-
|
|
603
|
+
._SidebarSection-content_yd8db_21 {
|
|
566
604
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
|
567
605
|
padding: 16px;
|
|
568
606
|
}
|
|
569
|
-
.
|
|
607
|
+
._SidebarSection_yd8db_1:last-of-type ._SidebarSection-content_yd8db_21 {
|
|
608
|
+
border-bottom: none;
|
|
609
|
+
flex-grow: 1;
|
|
610
|
+
}
|
|
611
|
+
._SidebarSection_yd8db_1 > summary {
|
|
570
612
|
list-style: none;
|
|
571
613
|
}
|
|
572
|
-
.
|
|
614
|
+
._SidebarSection_yd8db_1 > summary::-webkit-details-marker {
|
|
573
615
|
display: none;
|
|
574
616
|
}
|
|
575
617
|
|
package/dist/index.d.ts
CHANGED
|
@@ -10,11 +10,11 @@ type Field<Props extends {
|
|
|
10
10
|
} = {
|
|
11
11
|
[key: string]: any;
|
|
12
12
|
}> = {
|
|
13
|
-
type: "text" | "textarea" | "number" | "select" | "
|
|
13
|
+
type: "text" | "textarea" | "number" | "select" | "array" | "external" | "radio";
|
|
14
14
|
label?: string;
|
|
15
15
|
adaptor?: Adaptor;
|
|
16
16
|
adaptorParams?: object;
|
|
17
|
-
|
|
17
|
+
arrayFields?: {
|
|
18
18
|
[SubPropName in keyof Props]: Field<Props[SubPropName]>;
|
|
19
19
|
};
|
|
20
20
|
getItemSummary?: (item: Props, index: number) => string;
|
package/dist/index.js
CHANGED
|
@@ -188,7 +188,7 @@ var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
|
|
|
188
188
|
|
|
189
189
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
|
|
190
190
|
init_react_import();
|
|
191
|
-
var styles_module_default = { "DraggableComponent": "
|
|
191
|
+
var styles_module_default = { "DraggableComponent": "_DraggableComponent_1ywkv_1", "DraggableComponent-contents": "_DraggableComponent-contents_1ywkv_5", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ywkv_11", "DraggableComponent--isModifierHeld": "_DraggableComponent--isModifierHeld_1ywkv_27", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ywkv_31", "DraggableComponent-actions": "_DraggableComponent-actions_1ywkv_36", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1ywkv_51", "DraggableComponent-action": "_DraggableComponent-action_1ywkv_36" };
|
|
192
192
|
|
|
193
193
|
// lib/get-class-name-factory.ts
|
|
194
194
|
init_react_import();
|
|
@@ -383,7 +383,7 @@ var ExternalInput = ({
|
|
|
383
383
|
|
|
384
384
|
// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
|
|
385
385
|
init_react_import();
|
|
386
|
-
var styles_module_default3 = { "Input": "
|
|
386
|
+
var styles_module_default3 = { "Input": "_Input_y3456_1", "Input-label": "_Input-label_y3456_22", "Input-labelIcon": "_Input-labelIcon_y3456_29", "Input-input": "_Input-input_y3456_34", "Input--readOnly": "_Input--readOnly_y3456_55", "Input-array": "_Input-array_y3456_64", "Input-action": "_Input-action_y3456_92", "Input-addButton": "_Input-addButton_y3456_114", "Input-item": "_Input-item_y3456_129", "Input-radioGroupItems": "_Input-radioGroupItems_y3456_133", "Input-radio": "_Input-radio_y3456_133", "Input-radioInner": "_Input-radioInner_y3456_150" };
|
|
387
387
|
|
|
388
388
|
// lib/index.ts
|
|
389
389
|
init_react_import();
|
|
@@ -429,14 +429,17 @@ var InputOrGroup = ({
|
|
|
429
429
|
onChange,
|
|
430
430
|
readOnly
|
|
431
431
|
}) => {
|
|
432
|
-
if (field.type === "
|
|
433
|
-
if (!field.
|
|
432
|
+
if (field.type === "array") {
|
|
433
|
+
if (!field.arrayFields) {
|
|
434
434
|
return null;
|
|
435
435
|
}
|
|
436
436
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3(), children: [
|
|
437
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
437
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("b", { className: getClassName3("label"), children: [
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.List, { size: 16 }) }),
|
|
439
|
+
label || name
|
|
440
|
+
] }),
|
|
438
441
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("item"), children: [
|
|
439
|
-
Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: getClassName3("
|
|
442
|
+
Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: getClassName3("array"), children: [
|
|
440
443
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("summary", { children: [
|
|
441
444
|
field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
|
|
442
445
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -448,12 +451,12 @@ var InputOrGroup = ({
|
|
|
448
451
|
existingValue.splice(i, 1);
|
|
449
452
|
onChange(existingValue);
|
|
450
453
|
},
|
|
451
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Trash, {})
|
|
454
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Trash, { size: 21 })
|
|
452
455
|
}
|
|
453
456
|
)
|
|
454
457
|
] }),
|
|
455
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("fieldset", { children: Object.keys(field.
|
|
456
|
-
const subField = field.
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("fieldset", { children: Object.keys(field.arrayFields).map((fieldName) => {
|
|
459
|
+
const subField = field.arrayFields[fieldName];
|
|
457
460
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
458
461
|
InputOrGroup,
|
|
459
462
|
{
|
|
@@ -477,7 +480,7 @@ var InputOrGroup = ({
|
|
|
477
480
|
const existingValue = value || [];
|
|
478
481
|
onChange([...existingValue, field.defaultItemProps || {}]);
|
|
479
482
|
},
|
|
480
|
-
children: "Add item"
|
|
483
|
+
children: "+ Add item"
|
|
481
484
|
}
|
|
482
485
|
)
|
|
483
486
|
] })
|
|
@@ -497,7 +500,10 @@ var InputOrGroup = ({
|
|
|
497
500
|
return null;
|
|
498
501
|
}
|
|
499
502
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3(), children: [
|
|
500
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
503
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("label"), children: [
|
|
504
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.ChevronDown, { size: 16 }) }),
|
|
505
|
+
label || name
|
|
506
|
+
] }),
|
|
501
507
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
502
508
|
"select",
|
|
503
509
|
{
|
|
@@ -518,7 +524,10 @@ var InputOrGroup = ({
|
|
|
518
524
|
}
|
|
519
525
|
if (field.type === "textarea") {
|
|
520
526
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
|
|
521
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("label"), children: [
|
|
528
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Type, { size: 16 }) }),
|
|
529
|
+
label || name
|
|
530
|
+
] }),
|
|
522
531
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
523
532
|
"textarea",
|
|
524
533
|
{
|
|
@@ -537,8 +546,11 @@ var InputOrGroup = ({
|
|
|
537
546
|
if (!field.options) {
|
|
538
547
|
return null;
|
|
539
548
|
}
|
|
540
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("radioGroup"), children: [
|
|
541
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("radioGroup"), children: [
|
|
550
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("label"), children: [
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.CheckCircle, { size: 16 }) }),
|
|
552
|
+
field.label || name
|
|
553
|
+
] }),
|
|
542
554
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
543
555
|
"label",
|
|
544
556
|
{
|
|
@@ -555,15 +567,21 @@ var InputOrGroup = ({
|
|
|
555
567
|
defaultChecked: value === option.value
|
|
556
568
|
}
|
|
557
569
|
),
|
|
558
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: option.label || option.value })
|
|
570
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("radioInner"), children: option.label || option.value })
|
|
559
571
|
]
|
|
560
572
|
},
|
|
561
573
|
option.label + option.value
|
|
562
574
|
)) })
|
|
563
|
-
] });
|
|
575
|
+
] }) });
|
|
564
576
|
}
|
|
565
577
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
|
|
566
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.
|
|
578
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("label"), children: [
|
|
579
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("labelIcon"), children: [
|
|
580
|
+
field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Type, { size: 16 }),
|
|
581
|
+
field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Hash, { size: 16 })
|
|
582
|
+
] }),
|
|
583
|
+
label || name
|
|
584
|
+
] }),
|
|
567
585
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
568
586
|
"input",
|
|
569
587
|
{
|
|
@@ -760,7 +778,9 @@ var usePlaceholderStyle = () => {
|
|
|
760
778
|
if (destinationIndex > 0) {
|
|
761
779
|
const children = Array.from(targetListElement.children).filter((item) => item !== draggedDOM).slice(0, destinationIndex);
|
|
762
780
|
clientY = children.reduce(
|
|
763
|
-
(total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", ""))
|
|
781
|
+
(total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", "")) + parseInt(
|
|
782
|
+
window.getComputedStyle(item).marginBottom.replace("px", "")
|
|
783
|
+
),
|
|
764
784
|
0
|
|
765
785
|
);
|
|
766
786
|
}
|
|
@@ -780,7 +800,7 @@ init_react_import();
|
|
|
780
800
|
|
|
781
801
|
// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
|
|
782
802
|
init_react_import();
|
|
783
|
-
var styles_module_default6 = { "SidebarSection": "
|
|
803
|
+
var styles_module_default6 = { "SidebarSection": "_SidebarSection_yd8db_1", "SidebarSection-title": "_SidebarSection-title_yd8db_10", "SidebarSection-content": "_SidebarSection-content_yd8db_21" };
|
|
784
804
|
|
|
785
805
|
// components/Heading/index.tsx
|
|
786
806
|
init_react_import();
|
|
@@ -810,9 +830,10 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
|
810
830
|
var getClassName8 = get_class_name_factory_default("SidebarSection", styles_module_default6);
|
|
811
831
|
var SidebarSection = ({
|
|
812
832
|
children,
|
|
813
|
-
title
|
|
833
|
+
title,
|
|
834
|
+
background
|
|
814
835
|
}) => {
|
|
815
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("details", { className: getClassName8(
|
|
836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("details", { className: getClassName8(), open: true, style: { background }, children: [
|
|
816
837
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("summary", { className: getClassName8("title"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading, { rank: 2, size: "xs", children: title }) }),
|
|
817
838
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName8("content"), children })
|
|
818
839
|
] });
|
|
@@ -945,7 +966,7 @@ function Puck({
|
|
|
945
966
|
style: {
|
|
946
967
|
display: "grid",
|
|
947
968
|
gridTemplateAreas: '"header header header" "left editor right"',
|
|
948
|
-
gridTemplateColumns: "
|
|
969
|
+
gridTemplateColumns: "288px auto 288px",
|
|
949
970
|
gridTemplateRows: "min-content auto",
|
|
950
971
|
height: "100vh",
|
|
951
972
|
position: "fixed",
|
|
@@ -1003,28 +1024,42 @@ function Puck({
|
|
|
1003
1024
|
style: {
|
|
1004
1025
|
gridArea: "left",
|
|
1005
1026
|
background: "var(--puck-color-grey-10)",
|
|
1006
|
-
overflowY: "auto"
|
|
1027
|
+
overflowY: "auto",
|
|
1028
|
+
display: "flex",
|
|
1029
|
+
flexDirection: "column"
|
|
1007
1030
|
},
|
|
1008
1031
|
children: [
|
|
1009
1032
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComponentList, { config }) }),
|
|
1010
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.
|
|
1011
|
-
|
|
1012
|
-
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SidebarSection, { title: "Outline", children: [
|
|
1034
|
+
data.content.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1035
|
+
"div",
|
|
1013
1036
|
{
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
scrollIntoView(
|
|
1018
|
-
document.querySelector(
|
|
1019
|
-
`[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
|
|
1020
|
-
)
|
|
1021
|
-
);
|
|
1037
|
+
style: {
|
|
1038
|
+
textAlign: "center",
|
|
1039
|
+
color: "var(--puck-color-grey-6)"
|
|
1022
1040
|
},
|
|
1023
|
-
children:
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
)
|
|
1027
|
-
|
|
1041
|
+
children: "Add items to your page"
|
|
1042
|
+
}
|
|
1043
|
+
),
|
|
1044
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OutlineList, { children: data.content.map((item, i) => {
|
|
1045
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1046
|
+
OutlineList.Item,
|
|
1047
|
+
{
|
|
1048
|
+
onClick: () => {
|
|
1049
|
+
setSelectedIndex(i);
|
|
1050
|
+
const id = data.content[i].props.id;
|
|
1051
|
+
scrollIntoView(
|
|
1052
|
+
document.querySelector(
|
|
1053
|
+
`[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
|
|
1054
|
+
)
|
|
1055
|
+
);
|
|
1056
|
+
},
|
|
1057
|
+
children: item.type
|
|
1058
|
+
},
|
|
1059
|
+
i
|
|
1060
|
+
);
|
|
1061
|
+
}) })
|
|
1062
|
+
] })
|
|
1028
1063
|
]
|
|
1029
1064
|
}
|
|
1030
1065
|
),
|
|
@@ -1123,11 +1158,14 @@ function Puck({
|
|
|
1123
1158
|
background: "var(--puck-color-grey-10)",
|
|
1124
1159
|
overflowY: "auto",
|
|
1125
1160
|
gridArea: "right",
|
|
1126
|
-
fontFamily: "var(--puck-font-stack)"
|
|
1161
|
+
fontFamily: "var(--puck-font-stack)",
|
|
1162
|
+
display: "flex",
|
|
1163
|
+
flexDirection: "column"
|
|
1127
1164
|
},
|
|
1128
1165
|
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1129
1166
|
SidebarSection,
|
|
1130
1167
|
{
|
|
1168
|
+
background: "var(--puck-color-grey-9)",
|
|
1131
1169
|
title: selectedIndex !== null ? data.content[selectedIndex].type : "Page",
|
|
1132
1170
|
children: Object.keys(fields).map((fieldName) => {
|
|
1133
1171
|
var _a2, _b2, _c, _d;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@measured/puck",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"lint": "eslint \"**/*.ts*\"",
|
|
10
10
|
"build": "rm -rf dist && tsup index.ts",
|
|
11
|
-
"prepare": "yarn build"
|
|
11
|
+
"prepare": "cp ../../README.md . && yarn build",
|
|
12
|
+
"postpublish": "rm README.md"
|
|
12
13
|
},
|
|
13
14
|
"files": [
|
|
14
15
|
"dist"
|