@measured/puck 0.1.5 → 0.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 +152 -0
- package/dist/index.css +96 -55
- package/dist/index.d.ts +2 -2
- package/dist/index.js +157 -62
- 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,14 @@
|
|
|
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_1sbv6_1 {
|
|
144
144
|
position: relative;
|
|
145
145
|
}
|
|
146
|
-
._DraggableComponent-
|
|
146
|
+
._DraggableComponent-contents_1sbv6_5 {
|
|
147
|
+
border: 1px inset transparent;
|
|
147
148
|
position: relative;
|
|
148
149
|
}
|
|
149
|
-
._DraggableComponent-
|
|
150
|
+
._DraggableComponent-overlay_1sbv6_10 {
|
|
150
151
|
display: none;
|
|
151
152
|
height: 100%;
|
|
152
153
|
width: 100%;
|
|
@@ -155,22 +156,22 @@
|
|
|
155
156
|
z-index: 1;
|
|
156
157
|
font-family: var(--puck-font-stack);
|
|
157
158
|
}
|
|
158
|
-
.
|
|
159
|
+
._DraggableComponent_1sbv6_1:hover ._DraggableComponent-overlay_1sbv6_10 {
|
|
159
160
|
display: block;
|
|
160
161
|
background-color: #cdcdcd50;
|
|
161
162
|
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
|
162
163
|
}
|
|
163
|
-
._DraggableComponent--
|
|
164
|
+
._DraggableComponent--isModifierHeld_1sbv6_26:hover ._DraggableComponent-overlay_1sbv6_10 {
|
|
164
165
|
display: none;
|
|
165
166
|
}
|
|
166
|
-
._DraggableComponent--
|
|
167
|
+
._DraggableComponent--isSelected_1sbv6_30 ._DraggableComponent-overlay_1sbv6_10 {
|
|
167
168
|
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
|
168
169
|
display: block;
|
|
169
170
|
}
|
|
170
|
-
._DraggableComponent-
|
|
171
|
+
._DraggableComponent-actions_1sbv6_35 {
|
|
171
172
|
display: none;
|
|
172
173
|
}
|
|
173
|
-
.
|
|
174
|
+
._DraggableComponent_1sbv6_1:hover ._DraggableComponent-actions_1sbv6_35 {
|
|
174
175
|
position: absolute;
|
|
175
176
|
right: 0;
|
|
176
177
|
padding: 8px;
|
|
@@ -180,7 +181,7 @@
|
|
|
180
181
|
gap: 4px;
|
|
181
182
|
border: 1px solid var(--puck-color-grey-8);
|
|
182
183
|
}
|
|
183
|
-
._DraggableComponent-
|
|
184
|
+
._DraggableComponent-actionsLabel_1sbv6_50 {
|
|
184
185
|
display: flex;
|
|
185
186
|
justify-content: center;
|
|
186
187
|
align-items: center;
|
|
@@ -189,14 +190,14 @@
|
|
|
189
190
|
margin-right: 8px;
|
|
190
191
|
border-right: 1px solid var(--puck-color-grey-8);
|
|
191
192
|
}
|
|
192
|
-
._DraggableComponent-
|
|
193
|
+
._DraggableComponent-action_1sbv6_35 {
|
|
193
194
|
background: transparent;
|
|
194
195
|
border: none;
|
|
195
196
|
color: var(--puck-color-grey-2);
|
|
196
197
|
padding: 8px;
|
|
197
198
|
border-radius: 4px;
|
|
198
199
|
}
|
|
199
|
-
._DraggableComponent-
|
|
200
|
+
._DraggableComponent-action_1sbv6_35:hover {
|
|
200
201
|
background: var(--puck-color-grey-9);
|
|
201
202
|
color: var(--puck-color-blue);
|
|
202
203
|
cursor: pointer;
|
|
@@ -317,22 +318,34 @@
|
|
|
317
318
|
}
|
|
318
319
|
|
|
319
320
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
|
|
320
|
-
.
|
|
321
|
+
._Input_y3456_1 {
|
|
322
|
+
background: white;
|
|
323
|
+
color: var(--puck-color-grey-3);
|
|
324
|
+
padding: 16px;
|
|
325
|
+
border-radius: 4px;
|
|
321
326
|
display: block;
|
|
322
327
|
font-family: var(--puck-font-stack);
|
|
323
328
|
}
|
|
324
|
-
.
|
|
329
|
+
._Input_y3456_1 ._Input_y3456_1 {
|
|
330
|
+
padding: 0px;
|
|
331
|
+
}
|
|
332
|
+
._Input_y3456_1 * {
|
|
325
333
|
box-sizing: border-box;
|
|
326
334
|
}
|
|
327
|
-
.
|
|
335
|
+
._Input_y3456_1 + ._Input_y3456_1 {
|
|
328
336
|
margin-top: 8px;
|
|
329
337
|
}
|
|
330
|
-
._Input-
|
|
331
|
-
|
|
338
|
+
._Input-label_y3456_22 {
|
|
339
|
+
display: flex;
|
|
340
|
+
padding-bottom: 12px;
|
|
332
341
|
font-size: var(--puck-font-size-xxs);
|
|
333
342
|
font-weight: 500;
|
|
334
343
|
}
|
|
335
|
-
._Input-
|
|
344
|
+
._Input-labelIcon_y3456_29 {
|
|
345
|
+
color: var(--puck-color-grey-6);
|
|
346
|
+
margin-right: 4px;
|
|
347
|
+
}
|
|
348
|
+
._Input-input_y3456_34 {
|
|
336
349
|
border-width: 1px;
|
|
337
350
|
border-style: solid;
|
|
338
351
|
border-color: var(--puck-color-grey-8);
|
|
@@ -341,7 +354,7 @@
|
|
|
341
354
|
padding: 12px 16px;
|
|
342
355
|
width: 100%;
|
|
343
356
|
}
|
|
344
|
-
.
|
|
357
|
+
._Input_y3456_1 select {
|
|
345
358
|
appearance: none;
|
|
346
359
|
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
360
|
background-size: 12px;
|
|
@@ -349,34 +362,40 @@
|
|
|
349
362
|
background-repeat: no-repeat;
|
|
350
363
|
background-color: white;
|
|
351
364
|
}
|
|
352
|
-
._Input--
|
|
365
|
+
._Input--readOnly_y3456_55 ._Input-input_y3456_34 {
|
|
353
366
|
background-color: var(--puck-color-grey-9);
|
|
354
367
|
border-color: var(--puck-color-grey-8);
|
|
355
368
|
}
|
|
356
|
-
._Input-
|
|
369
|
+
._Input-input_y3456_34:hover {
|
|
357
370
|
border-color: var(--puck-color-neutral-3);
|
|
358
371
|
}
|
|
359
|
-
._Input-
|
|
372
|
+
._Input-array_y3456_64 {
|
|
360
373
|
background: white;
|
|
361
|
-
border-bottom: var(--puck-color-grey-8) solid 1px;
|
|
362
374
|
}
|
|
363
|
-
._Input-
|
|
364
|
-
|
|
375
|
+
._Input-array_y3456_64 > summary {
|
|
376
|
+
color: var(--puck-color-grey-3);
|
|
377
|
+
font-size: var(--puck-font-size-xxs);
|
|
378
|
+
padding: 12px 16px;
|
|
365
379
|
position: relative;
|
|
366
380
|
}
|
|
367
|
-
._Input-
|
|
381
|
+
._Input-array_y3456_64 > summary:hover {
|
|
368
382
|
cursor: pointer;
|
|
369
383
|
color: var(--puck-color-blue);
|
|
370
384
|
}
|
|
371
|
-
._Input-
|
|
385
|
+
._Input-array_y3456_64 > fieldset {
|
|
372
386
|
border: none;
|
|
373
|
-
border-top: var(--puck-color-grey-8) solid 1px;
|
|
374
387
|
margin: 0;
|
|
375
|
-
padding: 16px;
|
|
376
388
|
}
|
|
377
|
-
._Input-
|
|
389
|
+
._Input-array_y3456_64 > fieldset ._Input_y3456_1 + ._Input-array_y3456_64 > fieldset ._Input_y3456_1 {
|
|
390
|
+
margin-top: 16px;
|
|
391
|
+
}
|
|
392
|
+
._Input-array_y3456_64 > fieldset ._Input-label_y3456_22 {
|
|
393
|
+
padding-bottom: 4px;
|
|
394
|
+
}
|
|
395
|
+
._Input-array_y3456_64 ._Input-action_y3456_92 {
|
|
378
396
|
background: transparent;
|
|
379
397
|
border: none;
|
|
398
|
+
border-radius: 4px;
|
|
380
399
|
color: var(--puck-color-grey-2);
|
|
381
400
|
display: none;
|
|
382
401
|
padding: 8px;
|
|
@@ -384,15 +403,15 @@
|
|
|
384
403
|
right: 4px;
|
|
385
404
|
top: 4px;
|
|
386
405
|
}
|
|
387
|
-
._Input-
|
|
406
|
+
._Input-array_y3456_64 summary:hover ._Input-action_y3456_92 {
|
|
388
407
|
display: block;
|
|
389
408
|
}
|
|
390
|
-
._Input-
|
|
409
|
+
._Input-array_y3456_64 ._Input-action_y3456_92:hover {
|
|
391
410
|
background: var(--puck-color-grey-9);
|
|
392
411
|
color: var(--puck-color-blue);
|
|
393
412
|
cursor: pointer;
|
|
394
413
|
}
|
|
395
|
-
._Input-
|
|
414
|
+
._Input-addButton_y3456_114 {
|
|
396
415
|
background-color: white;
|
|
397
416
|
border: none;
|
|
398
417
|
color: var(--puck-color-blue);
|
|
@@ -400,29 +419,44 @@
|
|
|
400
419
|
width: 100%;
|
|
401
420
|
margin: 0;
|
|
402
421
|
padding: 12px 16px;
|
|
422
|
+
text-align: left;
|
|
403
423
|
}
|
|
404
|
-
._Input-
|
|
424
|
+
._Input-addButton_y3456_114:hover {
|
|
405
425
|
background: var(--puck-color-grey-9);
|
|
406
426
|
}
|
|
407
|
-
._Input-
|
|
408
|
-
border: 1px solid var(--puck-color-grey-8);
|
|
409
|
-
border-radius: 4px;
|
|
410
|
-
margin-top: 4px;
|
|
427
|
+
._Input-item_y3456_129 {
|
|
411
428
|
overflow: hidden;
|
|
412
429
|
}
|
|
413
|
-
._Input-
|
|
414
|
-
margin-bottom: 8px;
|
|
415
|
-
margin-top: 8px;
|
|
416
|
-
}
|
|
417
|
-
._Input-radioGroupItems_1vwgb_119 {
|
|
430
|
+
._Input-radioGroupItems_y3456_133 {
|
|
418
431
|
display: flex;
|
|
419
|
-
|
|
432
|
+
border: 1px solid var(--puck-color-grey-7);
|
|
433
|
+
border-radius: 4px;
|
|
420
434
|
flex-wrap: wrap;
|
|
435
|
+
overflow: hidden;
|
|
421
436
|
}
|
|
422
|
-
._Input-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
437
|
+
._Input-radio_y3456_133 {
|
|
438
|
+
border-right: 1px solid var(--puck-color-grey-7);
|
|
439
|
+
flex-grow: 1;
|
|
440
|
+
}
|
|
441
|
+
._Input-radio_y3456_133:last-of-type {
|
|
442
|
+
border-right: none;
|
|
443
|
+
}
|
|
444
|
+
._Input-radioInner_y3456_150 {
|
|
445
|
+
font-size: var(--puck-font-size-xxxs);
|
|
446
|
+
padding: 8px 12px;
|
|
447
|
+
text-align: center;
|
|
448
|
+
}
|
|
449
|
+
._Input-radioInner_y3456_150:hover {
|
|
450
|
+
background-color: var(--puck-color-azure-8);
|
|
451
|
+
cursor: pointer;
|
|
452
|
+
}
|
|
453
|
+
._Input-radio_y3456_133 input:checked ~ ._Input-radioInner_y3456_150 {
|
|
454
|
+
background-color: var(--puck-color-azure-4);
|
|
455
|
+
color: white;
|
|
456
|
+
font-weight: 500;
|
|
457
|
+
}
|
|
458
|
+
._Input-radio_y3456_133 input {
|
|
459
|
+
display: none;
|
|
426
460
|
}
|
|
427
461
|
|
|
428
462
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
|
|
@@ -549,27 +583,34 @@
|
|
|
549
583
|
}
|
|
550
584
|
|
|
551
585
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
|
|
552
|
-
.
|
|
553
|
-
|
|
554
|
-
|
|
586
|
+
._SidebarSection_yd8db_1 {
|
|
587
|
+
display: flex;
|
|
588
|
+
flex-direction: column;
|
|
555
589
|
}
|
|
556
|
-
.
|
|
590
|
+
._SidebarSection_yd8db_1:last-of-type {
|
|
591
|
+
flex-grow: 1;
|
|
592
|
+
}
|
|
593
|
+
._SidebarSection-title_yd8db_10 {
|
|
557
594
|
background: white;
|
|
558
595
|
padding: 16px;
|
|
559
596
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
|
560
597
|
}
|
|
561
|
-
._SidebarSection-
|
|
598
|
+
._SidebarSection-title_yd8db_10:hover {
|
|
562
599
|
opacity: 0.6;
|
|
563
600
|
cursor: pointer;
|
|
564
601
|
}
|
|
565
|
-
._SidebarSection-
|
|
602
|
+
._SidebarSection-content_yd8db_21 {
|
|
566
603
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
|
567
604
|
padding: 16px;
|
|
568
605
|
}
|
|
569
|
-
.
|
|
606
|
+
._SidebarSection_yd8db_1:last-of-type ._SidebarSection-content_yd8db_21 {
|
|
607
|
+
border-bottom: none;
|
|
608
|
+
flex-grow: 1;
|
|
609
|
+
}
|
|
610
|
+
._SidebarSection_yd8db_1 > summary {
|
|
570
611
|
list-style: none;
|
|
571
612
|
}
|
|
572
|
-
.
|
|
613
|
+
._SidebarSection_yd8db_1 > summary::-webkit-details-marker {
|
|
573
614
|
display: none;
|
|
574
615
|
}
|
|
575
616
|
|
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
|
@@ -34,6 +34,9 @@ var __objRest = (source, exclude) => {
|
|
|
34
34
|
}
|
|
35
35
|
return target;
|
|
36
36
|
};
|
|
37
|
+
var __esm = (fn, res) => function __init() {
|
|
38
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
39
|
+
};
|
|
37
40
|
var __commonJS = (cb, mod) => function __require() {
|
|
38
41
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
39
42
|
};
|
|
@@ -79,9 +82,19 @@ var __async = (__this, __arguments, generator) => {
|
|
|
79
82
|
});
|
|
80
83
|
};
|
|
81
84
|
|
|
85
|
+
// ../tsup-config/react-import.js
|
|
86
|
+
var import_react;
|
|
87
|
+
var init_react_import = __esm({
|
|
88
|
+
"../tsup-config/react-import.js"() {
|
|
89
|
+
"use strict";
|
|
90
|
+
import_react = __toESM(require("react"));
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
82
94
|
// ../../node_modules/classnames/index.js
|
|
83
95
|
var require_classnames = __commonJS({
|
|
84
96
|
"../../node_modules/classnames/index.js"(exports, module2) {
|
|
97
|
+
init_react_import();
|
|
85
98
|
(function() {
|
|
86
99
|
"use strict";
|
|
87
100
|
var hasOwn = {}.hasOwnProperty;
|
|
@@ -137,19 +150,25 @@ __export(core_exports, {
|
|
|
137
150
|
Render: () => Render
|
|
138
151
|
});
|
|
139
152
|
module.exports = __toCommonJS(core_exports);
|
|
153
|
+
init_react_import();
|
|
154
|
+
|
|
155
|
+
// types/Config.tsx
|
|
156
|
+
init_react_import();
|
|
140
157
|
|
|
141
158
|
// components/Puck/index.tsx
|
|
142
|
-
|
|
159
|
+
init_react_import();
|
|
160
|
+
var import_react7 = require("react");
|
|
143
161
|
var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
|
|
144
162
|
|
|
145
163
|
// components/DroppableStrictMode/index.tsx
|
|
146
|
-
|
|
164
|
+
init_react_import();
|
|
165
|
+
var import_react2 = require("react");
|
|
147
166
|
var import_react_beautiful_dnd = require("react-beautiful-dnd");
|
|
148
167
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
149
168
|
var DroppableStrictMode = (_a) => {
|
|
150
169
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
151
|
-
const [enabled, setEnabled] = (0,
|
|
152
|
-
(0,
|
|
170
|
+
const [enabled, setEnabled] = (0, import_react2.useState)(false);
|
|
171
|
+
(0, import_react2.useEffect)(() => {
|
|
153
172
|
const animation = requestAnimationFrame(() => setEnabled(true));
|
|
154
173
|
return () => {
|
|
155
174
|
cancelAnimationFrame(animation);
|
|
@@ -164,12 +183,15 @@ var DroppableStrictMode = (_a) => {
|
|
|
164
183
|
var DroppableStrictMode_default = DroppableStrictMode;
|
|
165
184
|
|
|
166
185
|
// components/DraggableComponent/index.tsx
|
|
186
|
+
init_react_import();
|
|
167
187
|
var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
|
|
168
188
|
|
|
169
189
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
|
|
170
|
-
|
|
190
|
+
init_react_import();
|
|
191
|
+
var styles_module_default = { "DraggableComponent": "_DraggableComponent_1sbv6_1", "DraggableComponent-contents": "_DraggableComponent-contents_1sbv6_5", "DraggableComponent-overlay": "_DraggableComponent-overlay_1sbv6_10", "DraggableComponent--isModifierHeld": "_DraggableComponent--isModifierHeld_1sbv6_26", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1sbv6_30", "DraggableComponent-actions": "_DraggableComponent-actions_1sbv6_35", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1sbv6_50", "DraggableComponent-action": "_DraggableComponent-action_1sbv6_35" };
|
|
171
192
|
|
|
172
193
|
// lib/get-class-name-factory.ts
|
|
194
|
+
init_react_import();
|
|
173
195
|
var import_classnames = __toESM(require_classnames());
|
|
174
196
|
var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
|
|
175
197
|
let descendant = false;
|
|
@@ -200,9 +222,10 @@ var get_class_name_factory_default = getClassNameFactory;
|
|
|
200
222
|
var import_react_feather = require("react-feather");
|
|
201
223
|
|
|
202
224
|
// lib/use-modifier-held.ts
|
|
203
|
-
|
|
225
|
+
init_react_import();
|
|
226
|
+
var import_react3 = require("react");
|
|
204
227
|
var useModifierHeld = (modifier) => {
|
|
205
|
-
const [modifierHeld, setModifierHeld] = (0,
|
|
228
|
+
const [modifierHeld, setModifierHeld] = (0, import_react3.useState)(false);
|
|
206
229
|
function downHandler({ key }) {
|
|
207
230
|
if (key === modifier) {
|
|
208
231
|
setModifierHeld(true);
|
|
@@ -213,7 +236,7 @@ var useModifierHeld = (modifier) => {
|
|
|
213
236
|
setModifierHeld(false);
|
|
214
237
|
}
|
|
215
238
|
}
|
|
216
|
-
(0,
|
|
239
|
+
(0, import_react3.useEffect)(() => {
|
|
217
240
|
window.addEventListener("keydown", downHandler);
|
|
218
241
|
window.addEventListener("keyup", upHandler);
|
|
219
242
|
return () => {
|
|
@@ -261,10 +284,15 @@ var DraggableComponent = ({
|
|
|
261
284
|
) }, id);
|
|
262
285
|
};
|
|
263
286
|
|
|
287
|
+
// components/InputOrGroup/index.tsx
|
|
288
|
+
init_react_import();
|
|
289
|
+
|
|
264
290
|
// components/ExternalInput/index.tsx
|
|
265
|
-
|
|
291
|
+
init_react_import();
|
|
292
|
+
var import_react4 = require("react");
|
|
266
293
|
|
|
267
294
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
|
|
295
|
+
init_react_import();
|
|
268
296
|
var styles_module_default2 = { "ExternalInput": "_ExternalInput_v316c_1", "ExternalInput-actions": "_ExternalInput-actions_v316c_5", "ExternalInput-button": "_ExternalInput-button_v316c_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_v316c_23", "ExternalInput--hasData": "_ExternalInput--hasData_v316c_30", "ExternalInput-modal": "_ExternalInput-modal_v316c_45", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_v316c_59", "ExternalInput-modalInner": "_ExternalInput-modalInner_v316c_63", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_v316c_74", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_v316c_79" };
|
|
269
297
|
|
|
270
298
|
// components/ExternalInput/index.tsx
|
|
@@ -275,10 +303,10 @@ var ExternalInput = ({
|
|
|
275
303
|
onChange,
|
|
276
304
|
value = null
|
|
277
305
|
}) => {
|
|
278
|
-
const [data, setData] = (0,
|
|
279
|
-
const [isOpen, setOpen] = (0,
|
|
280
|
-
const [selectedData, setSelectedData] = (0,
|
|
281
|
-
(0,
|
|
306
|
+
const [data, setData] = (0, import_react4.useState)([]);
|
|
307
|
+
const [isOpen, setOpen] = (0, import_react4.useState)(false);
|
|
308
|
+
const [selectedData, setSelectedData] = (0, import_react4.useState)(value);
|
|
309
|
+
(0, import_react4.useEffect)(() => {
|
|
282
310
|
(() => __async(void 0, null, function* () {
|
|
283
311
|
if (field.adaptor) {
|
|
284
312
|
const listData = yield field.adaptor.fetchList(field.adaptorParams);
|
|
@@ -354,9 +382,14 @@ var ExternalInput = ({
|
|
|
354
382
|
};
|
|
355
383
|
|
|
356
384
|
// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
|
|
357
|
-
|
|
385
|
+
init_react_import();
|
|
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
|
+
|
|
388
|
+
// lib/index.ts
|
|
389
|
+
init_react_import();
|
|
358
390
|
|
|
359
391
|
// lib/filter.ts
|
|
392
|
+
init_react_import();
|
|
360
393
|
var filter = (obj, validKeys) => {
|
|
361
394
|
return validKeys.reduce((acc, item) => {
|
|
362
395
|
if (typeof obj[item] !== "undefined") {
|
|
@@ -367,6 +400,7 @@ var filter = (obj, validKeys) => {
|
|
|
367
400
|
};
|
|
368
401
|
|
|
369
402
|
// lib/reorder.ts
|
|
403
|
+
init_react_import();
|
|
370
404
|
var reorder = (list, startIndex, endIndex) => {
|
|
371
405
|
const result = Array.from(list);
|
|
372
406
|
const [removed] = result.splice(startIndex, 1);
|
|
@@ -375,6 +409,7 @@ var reorder = (list, startIndex, endIndex) => {
|
|
|
375
409
|
};
|
|
376
410
|
|
|
377
411
|
// lib/replace.ts
|
|
412
|
+
init_react_import();
|
|
378
413
|
var replace = (list, index, newItem) => {
|
|
379
414
|
const result = Array.from(list);
|
|
380
415
|
result.splice(index, 1);
|
|
@@ -394,14 +429,17 @@ var InputOrGroup = ({
|
|
|
394
429
|
onChange,
|
|
395
430
|
readOnly
|
|
396
431
|
}) => {
|
|
397
|
-
if (field.type === "
|
|
398
|
-
if (!field.
|
|
432
|
+
if (field.type === "array") {
|
|
433
|
+
if (!field.arrayFields) {
|
|
399
434
|
return null;
|
|
400
435
|
}
|
|
401
436
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3(), children: [
|
|
402
|
-
/* @__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
|
+
] }),
|
|
403
441
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("item"), children: [
|
|
404
|
-
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: [
|
|
405
443
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("summary", { children: [
|
|
406
444
|
field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
|
|
407
445
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -413,12 +451,12 @@ var InputOrGroup = ({
|
|
|
413
451
|
existingValue.splice(i, 1);
|
|
414
452
|
onChange(existingValue);
|
|
415
453
|
},
|
|
416
|
-
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 })
|
|
417
455
|
}
|
|
418
456
|
)
|
|
419
457
|
] }),
|
|
420
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("fieldset", { children: Object.keys(field.
|
|
421
|
-
const subField = field.
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("fieldset", { children: Object.keys(field.arrayFields).map((fieldName) => {
|
|
459
|
+
const subField = field.arrayFields[fieldName];
|
|
422
460
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
423
461
|
InputOrGroup,
|
|
424
462
|
{
|
|
@@ -442,7 +480,7 @@ var InputOrGroup = ({
|
|
|
442
480
|
const existingValue = value || [];
|
|
443
481
|
onChange([...existingValue, field.defaultItemProps || {}]);
|
|
444
482
|
},
|
|
445
|
-
children: "Add item"
|
|
483
|
+
children: "+ Add item"
|
|
446
484
|
}
|
|
447
485
|
)
|
|
448
486
|
] })
|
|
@@ -462,7 +500,10 @@ var InputOrGroup = ({
|
|
|
462
500
|
return null;
|
|
463
501
|
}
|
|
464
502
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3(), children: [
|
|
465
|
-
/* @__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
|
+
] }),
|
|
466
507
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
467
508
|
"select",
|
|
468
509
|
{
|
|
@@ -483,7 +524,10 @@ var InputOrGroup = ({
|
|
|
483
524
|
}
|
|
484
525
|
if (field.type === "textarea") {
|
|
485
526
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
|
|
486
|
-
/* @__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
|
+
] }),
|
|
487
531
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
488
532
|
"textarea",
|
|
489
533
|
{
|
|
@@ -502,8 +546,11 @@ var InputOrGroup = ({
|
|
|
502
546
|
if (!field.options) {
|
|
503
547
|
return null;
|
|
504
548
|
}
|
|
505
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("radioGroup"), children: [
|
|
506
|
-
/* @__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
|
+
] }),
|
|
507
554
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
508
555
|
"label",
|
|
509
556
|
{
|
|
@@ -520,15 +567,21 @@ var InputOrGroup = ({
|
|
|
520
567
|
defaultChecked: value === option.value
|
|
521
568
|
}
|
|
522
569
|
),
|
|
523
|
-
/* @__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 })
|
|
524
571
|
]
|
|
525
572
|
},
|
|
526
573
|
option.label + option.value
|
|
527
574
|
)) })
|
|
528
|
-
] });
|
|
575
|
+
] }) });
|
|
529
576
|
}
|
|
530
577
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
|
|
531
|
-
/* @__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
|
+
] }),
|
|
532
585
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
533
586
|
"input",
|
|
534
587
|
{
|
|
@@ -545,9 +598,11 @@ var InputOrGroup = ({
|
|
|
545
598
|
};
|
|
546
599
|
|
|
547
600
|
// components/ComponentList/index.tsx
|
|
601
|
+
init_react_import();
|
|
548
602
|
var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
|
|
549
603
|
|
|
550
604
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
|
|
605
|
+
init_react_import();
|
|
551
606
|
var styles_module_default4 = { "ComponentList": "_ComponentList_91nmt_1", "ComponentList-item": "_ComponentList-item_91nmt_9", "ComponentList-itemShadow": "_ComponentList-itemShadow_91nmt_10", "ComponentList-itemIcon": "_ComponentList-itemIcon_91nmt_24" };
|
|
552
607
|
|
|
553
608
|
// components/ComponentList/index.tsx
|
|
@@ -606,7 +661,11 @@ var ComponentList = ({ config }) => {
|
|
|
606
661
|
) });
|
|
607
662
|
};
|
|
608
663
|
|
|
664
|
+
// components/OutlineList/index.tsx
|
|
665
|
+
init_react_import();
|
|
666
|
+
|
|
609
667
|
// css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
|
|
668
|
+
init_react_import();
|
|
610
669
|
var styles_module_default5 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
|
|
611
670
|
|
|
612
671
|
// components/OutlineList/index.tsx
|
|
@@ -630,10 +689,15 @@ OutlineList.Item = ({
|
|
|
630
689
|
);
|
|
631
690
|
};
|
|
632
691
|
|
|
692
|
+
// components/Button/index.ts
|
|
693
|
+
init_react_import();
|
|
694
|
+
|
|
633
695
|
// components/Button/Button.tsx
|
|
634
|
-
|
|
696
|
+
init_react_import();
|
|
697
|
+
var import_react5 = require("react");
|
|
635
698
|
|
|
636
699
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
|
|
700
|
+
init_react_import();
|
|
637
701
|
var Button_module_default = { "Button": "_Button_1bqmn_1", "Button--primary": "_Button--primary_1bqmn_25", "Button--secondary": "_Button--secondary_1bqmn_34", "Button--flush": "_Button--flush_1bqmn_45", "Button--disabled": "_Button--disabled_1bqmn_49", "Button--fullWidth": "_Button--fullWidth_1bqmn_59" };
|
|
638
702
|
|
|
639
703
|
// components/Button/Button.tsx
|
|
@@ -651,7 +715,7 @@ var Button = ({
|
|
|
651
715
|
newTab,
|
|
652
716
|
fullWidth
|
|
653
717
|
}) => {
|
|
654
|
-
const [loading, setLoading] = (0,
|
|
718
|
+
const [loading, setLoading] = (0, import_react5.useState)(false);
|
|
655
719
|
const ElementType = href ? "a" : "button";
|
|
656
720
|
const el = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
657
721
|
ElementType,
|
|
@@ -689,10 +753,11 @@ var Button = ({
|
|
|
689
753
|
};
|
|
690
754
|
|
|
691
755
|
// lib/use-placeholder-style.ts
|
|
692
|
-
|
|
756
|
+
init_react_import();
|
|
757
|
+
var import_react6 = require("react");
|
|
693
758
|
var usePlaceholderStyle = () => {
|
|
694
759
|
const queryAttr = "data-rbd-drag-handle-draggable-id";
|
|
695
|
-
const [placeholderStyle, setPlaceholderStyle] = (0,
|
|
760
|
+
const [placeholderStyle, setPlaceholderStyle] = (0, import_react6.useState)();
|
|
696
761
|
const onDragUpdate = (update) => {
|
|
697
762
|
if (!update.destination) {
|
|
698
763
|
return;
|
|
@@ -713,7 +778,9 @@ var usePlaceholderStyle = () => {
|
|
|
713
778
|
if (destinationIndex > 0) {
|
|
714
779
|
const children = Array.from(targetListElement.children).filter((item) => item !== draggedDOM).slice(0, destinationIndex);
|
|
715
780
|
clientY = children.reduce(
|
|
716
|
-
(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
|
+
),
|
|
717
784
|
0
|
|
718
785
|
);
|
|
719
786
|
}
|
|
@@ -728,10 +795,18 @@ var usePlaceholderStyle = () => {
|
|
|
728
795
|
return { onDragUpdate, placeholderStyle };
|
|
729
796
|
};
|
|
730
797
|
|
|
798
|
+
// components/SidebarSection/index.tsx
|
|
799
|
+
init_react_import();
|
|
800
|
+
|
|
731
801
|
// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
|
|
732
|
-
|
|
802
|
+
init_react_import();
|
|
803
|
+
var styles_module_default6 = { "SidebarSection": "_SidebarSection_yd8db_1", "SidebarSection-title": "_SidebarSection-title_yd8db_10", "SidebarSection-content": "_SidebarSection-content_yd8db_21" };
|
|
804
|
+
|
|
805
|
+
// components/Heading/index.tsx
|
|
806
|
+
init_react_import();
|
|
733
807
|
|
|
734
808
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
|
|
809
|
+
init_react_import();
|
|
735
810
|
var styles_module_default7 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
|
|
736
811
|
|
|
737
812
|
// components/Heading/index.tsx
|
|
@@ -755,15 +830,17 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
|
755
830
|
var getClassName8 = get_class_name_factory_default("SidebarSection", styles_module_default6);
|
|
756
831
|
var SidebarSection = ({
|
|
757
832
|
children,
|
|
758
|
-
title
|
|
833
|
+
title,
|
|
834
|
+
background
|
|
759
835
|
}) => {
|
|
760
|
-
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: [
|
|
761
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 }) }),
|
|
762
838
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName8("content"), children })
|
|
763
839
|
] });
|
|
764
840
|
};
|
|
765
841
|
|
|
766
842
|
// lib/scroll-into-view.ts
|
|
843
|
+
init_react_import();
|
|
767
844
|
var scrollIntoView = (el) => {
|
|
768
845
|
const oldStyle = __spreadValues({}, el.style);
|
|
769
846
|
el.style.scrollMargin = "256px";
|
|
@@ -798,9 +875,9 @@ function Puck({
|
|
|
798
875
|
renderHeader
|
|
799
876
|
}) {
|
|
800
877
|
var _a, _b;
|
|
801
|
-
const [data, setData] = (0,
|
|
802
|
-
const [selectedIndex, setSelectedIndex] = (0,
|
|
803
|
-
const Page = (0,
|
|
878
|
+
const [data, setData] = (0, import_react7.useState)(initialData);
|
|
879
|
+
const [selectedIndex, setSelectedIndex] = (0, import_react7.useState)(null);
|
|
880
|
+
const Page = (0, import_react7.useCallback)(
|
|
804
881
|
(pageProps) => {
|
|
805
882
|
var _a2, _b2;
|
|
806
883
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
@@ -815,7 +892,7 @@ function Puck({
|
|
|
815
892
|
},
|
|
816
893
|
[config.page]
|
|
817
894
|
);
|
|
818
|
-
const PageFieldWrapper = (0,
|
|
895
|
+
const PageFieldWrapper = (0, import_react7.useCallback)(
|
|
819
896
|
(props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
820
897
|
PluginRenderer,
|
|
821
898
|
{
|
|
@@ -827,7 +904,7 @@ function Puck({
|
|
|
827
904
|
),
|
|
828
905
|
[]
|
|
829
906
|
);
|
|
830
|
-
const ComponentFieldWrapper = (0,
|
|
907
|
+
const ComponentFieldWrapper = (0, import_react7.useCallback)(
|
|
831
908
|
(props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
832
909
|
PluginRenderer,
|
|
833
910
|
{
|
|
@@ -842,7 +919,7 @@ function Puck({
|
|
|
842
919
|
const FieldWrapper = selectedIndex !== null ? ComponentFieldWrapper : PageFieldWrapper;
|
|
843
920
|
const pageFields = ((_a = config.page) == null ? void 0 : _a.fields) || defaultPageFields;
|
|
844
921
|
let fields = selectedIndex !== null ? ((_b = config.components[data.content[selectedIndex].type]) == null ? void 0 : _b.fields) || {} : pageFields;
|
|
845
|
-
(0,
|
|
922
|
+
(0, import_react7.useEffect)(() => {
|
|
846
923
|
if (onChange)
|
|
847
924
|
onChange(data);
|
|
848
925
|
}, [data]);
|
|
@@ -889,7 +966,7 @@ function Puck({
|
|
|
889
966
|
style: {
|
|
890
967
|
display: "grid",
|
|
891
968
|
gridTemplateAreas: '"header header header" "left editor right"',
|
|
892
|
-
gridTemplateColumns: "
|
|
969
|
+
gridTemplateColumns: "288px auto 288px",
|
|
893
970
|
gridTemplateRows: "min-content auto",
|
|
894
971
|
height: "100vh",
|
|
895
972
|
position: "fixed",
|
|
@@ -947,28 +1024,42 @@ function Puck({
|
|
|
947
1024
|
style: {
|
|
948
1025
|
gridArea: "left",
|
|
949
1026
|
background: "var(--puck-color-grey-10)",
|
|
950
|
-
overflowY: "auto"
|
|
1027
|
+
overflowY: "auto",
|
|
1028
|
+
display: "flex",
|
|
1029
|
+
flexDirection: "column"
|
|
951
1030
|
},
|
|
952
1031
|
children: [
|
|
953
1032
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComponentList, { config }) }),
|
|
954
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.
|
|
955
|
-
|
|
956
|
-
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SidebarSection, { title: "Outline", children: [
|
|
1034
|
+
data.content.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1035
|
+
"div",
|
|
957
1036
|
{
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
scrollIntoView(
|
|
962
|
-
document.querySelector(
|
|
963
|
-
`[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
|
|
964
|
-
)
|
|
965
|
-
);
|
|
1037
|
+
style: {
|
|
1038
|
+
textAlign: "center",
|
|
1039
|
+
color: "var(--puck-color-grey-6)"
|
|
966
1040
|
},
|
|
967
|
-
children:
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
)
|
|
971
|
-
|
|
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
|
+
] })
|
|
972
1063
|
]
|
|
973
1064
|
}
|
|
974
1065
|
),
|
|
@@ -1067,11 +1158,14 @@ function Puck({
|
|
|
1067
1158
|
background: "var(--puck-color-grey-10)",
|
|
1068
1159
|
overflowY: "auto",
|
|
1069
1160
|
gridArea: "right",
|
|
1070
|
-
fontFamily: "var(--puck-font-stack)"
|
|
1161
|
+
fontFamily: "var(--puck-font-stack)",
|
|
1162
|
+
display: "flex",
|
|
1163
|
+
flexDirection: "column"
|
|
1071
1164
|
},
|
|
1072
1165
|
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1073
1166
|
SidebarSection,
|
|
1074
1167
|
{
|
|
1168
|
+
background: "var(--puck-color-grey-9)",
|
|
1075
1169
|
title: selectedIndex !== null ? data.content[selectedIndex].type : "Page",
|
|
1076
1170
|
children: Object.keys(fields).map((fieldName) => {
|
|
1077
1171
|
var _a2, _b2, _c, _d;
|
|
@@ -1161,6 +1255,7 @@ function Puck({
|
|
|
1161
1255
|
}
|
|
1162
1256
|
|
|
1163
1257
|
// components/Render/index.tsx
|
|
1258
|
+
init_react_import();
|
|
1164
1259
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1165
1260
|
function Render({ config, data }) {
|
|
1166
1261
|
const children = data.content.map((item) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@measured/puck",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
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"
|