@measured/puck 0.7.1-canary.104091a → 0.7.1-canary.85b14d2
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 +15 -0
- package/dist/index.css +244 -101
- package/dist/index.d.ts +108 -6
- package/dist/index.js +1609 -756
- package/package.json +3 -2
package/README.md
CHANGED
@@ -1,5 +1,20 @@
|
|
1
1
|
# puck
|
2
2
|
|
3
|
+
<p align="left">
|
4
|
+
<a aria-label="Measured logo" href="https://measured.co">
|
5
|
+
<img src="https://img.shields.io/badge/MADE%20BY%20Measured-000000.svg?style=for-the-badge&labelColor=000">
|
6
|
+
</a>
|
7
|
+
<a aria-label="NPM version" href="https://www.npmjs.com/package/@measured/puck">
|
8
|
+
<img alt="" src="https://img.shields.io/npm/v/@measured/puck.svg?style=for-the-badge&labelColor=000000">
|
9
|
+
</a>
|
10
|
+
<a aria-label="License" href="https://github.com/measuredco/puck/blob/main/LICENSE">
|
11
|
+
<img alt="" src="https://img.shields.io/npm/l/@measured/puck.svg?style=for-the-badge&labelColor=000000">
|
12
|
+
</a>
|
13
|
+
<a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
|
14
|
+
<img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
|
15
|
+
</a>
|
16
|
+
</p>
|
17
|
+
|
3
18
|
The self-hosted, drag and drop editor for React.
|
4
19
|
|
5
20
|
- 🖱️ **Drag and drop**: Visual editing for your existing React component library
|
package/dist/index.css
CHANGED
@@ -30,6 +30,7 @@
|
|
30
30
|
--puck-color-azure-6: #88b0da;
|
31
31
|
--puck-color-azure-7: #abc7e5;
|
32
32
|
--puck-color-azure-8: #cfdff0;
|
33
|
+
--puck-color-azure-85: #e1eaf6;
|
33
34
|
--puck-color-azure-9: #f3f6fb;
|
34
35
|
--puck-color-green-0: #002000;
|
35
36
|
--puck-color-green-1: #043604;
|
@@ -208,87 +209,169 @@
|
|
208
209
|
width: 100%;
|
209
210
|
}
|
210
211
|
|
211
|
-
/* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
|
212
|
-
._IconButton_13gzt_1 {
|
213
|
-
background: transparent;
|
214
|
-
border: none;
|
215
|
-
color: var(--puck-color-grey-3);
|
216
|
-
display: flex;
|
217
|
-
align-items: center;
|
218
|
-
justify-content: center;
|
219
|
-
border-radius: 4px;
|
220
|
-
padding: 4px;
|
221
|
-
}
|
222
|
-
._IconButton_13gzt_1:hover {
|
223
|
-
background: var(--puck-color-grey-9);
|
224
|
-
color: var(--puck-color-blue);
|
225
|
-
cursor: pointer;
|
226
|
-
}
|
227
|
-
|
228
212
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
|
229
|
-
.
|
213
|
+
._DraggableComponent_1nlo8_1 {
|
230
214
|
position: relative;
|
215
|
+
pointer-events: auto;
|
231
216
|
}
|
232
|
-
._DraggableComponent
|
217
|
+
._DraggableComponent--isDragging_1nlo8_6 {
|
218
|
+
background: #abc7e510;
|
219
|
+
outline: 2px var(--puck-color-azure-8) solid;
|
220
|
+
overflow: hidden;
|
221
|
+
}
|
222
|
+
._DraggableComponent-contents_1nlo8_12 {
|
233
223
|
position: relative;
|
224
|
+
pointer-events: none;
|
234
225
|
}
|
235
|
-
._DraggableComponent-
|
236
|
-
._DraggableComponent-
|
226
|
+
._DraggableComponent-contents_1nlo8_12::before,
|
227
|
+
._DraggableComponent-contents_1nlo8_12::after {
|
237
228
|
content: " ";
|
238
229
|
display: table;
|
239
230
|
}
|
240
|
-
._DraggableComponent-
|
231
|
+
._DraggableComponent-overlay_1nlo8_24 {
|
241
232
|
display: none;
|
233
|
+
background: #abc7e530;
|
234
|
+
outline: 2px var(--puck-color-azure-8) solid;
|
235
|
+
cursor: pointer;
|
242
236
|
height: 100%;
|
243
237
|
width: 100%;
|
244
238
|
top: 0;
|
245
239
|
position: absolute;
|
246
240
|
z-index: 1;
|
247
241
|
font-family: var(--puck-font-stack);
|
242
|
+
pointer-events: none;
|
243
|
+
box-sizing: border-box;
|
248
244
|
}
|
249
|
-
.
|
245
|
+
._DraggableComponent_1nlo8_1:hover:not(._DraggableComponent--isLocked_1nlo8_39) > ._DraggableComponent-overlay_1nlo8_24 {
|
250
246
|
display: block;
|
251
|
-
|
252
|
-
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
247
|
+
pointer-events: none;
|
253
248
|
}
|
254
|
-
._DraggableComponent--
|
255
|
-
display:
|
249
|
+
._DraggableComponent--forceHover_1nlo8_45 > ._DraggableComponent-overlay_1nlo8_24 {
|
250
|
+
display: block;
|
251
|
+
pointer-events: none;
|
256
252
|
}
|
257
|
-
._DraggableComponent--
|
258
|
-
box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
|
253
|
+
._DraggableComponent--indicativeHover_1nlo8_50 > ._DraggableComponent-overlay_1nlo8_24 {
|
259
254
|
display: block;
|
255
|
+
background: transparent;
|
256
|
+
pointer-events: none;
|
260
257
|
}
|
261
|
-
._DraggableComponent-
|
258
|
+
._DraggableComponent_1nlo8_1:not(._DraggableComponent--isSelected_1nlo8_57):has(._DraggableComponent_1nlo8_1:hover > ._DraggableComponent-overlay_1nlo8_24) > ._DraggableComponent-overlay_1nlo8_24 {
|
262
259
|
display: none;
|
263
260
|
}
|
264
|
-
.
|
261
|
+
._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 {
|
262
|
+
background: none;
|
263
|
+
display: block;
|
264
|
+
outline: 2px var(--puck-color-azure-6) solid;
|
265
|
+
}
|
266
|
+
._DraggableComponent-actions_1nlo8_70 {
|
265
267
|
position: absolute;
|
266
|
-
right:
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
268
|
+
right: 6.5px;
|
269
|
+
width: auto;
|
270
|
+
top: -48px;
|
271
|
+
padding: 4px;
|
272
|
+
border-top-left-radius: 8px;
|
273
|
+
border-top-right-radius: 8px;
|
274
|
+
border-radius: 8px;
|
275
|
+
background: var(--puck-color-grey-0);
|
276
|
+
color: white;
|
277
|
+
display: none;
|
271
278
|
gap: 4px;
|
272
|
-
|
279
|
+
pointer-events: auto;
|
280
|
+
box-sizing: border-box;
|
281
|
+
}
|
282
|
+
._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 > ._DraggableComponent-actions_1nlo8_70 {
|
283
|
+
display: flex;
|
273
284
|
}
|
274
|
-
._DraggableComponent-
|
275
|
-
color: var(--puck-color-grey-
|
285
|
+
._DraggableComponent-actionsLabel_1nlo8_93 {
|
286
|
+
color: var(--puck-color-grey-7);
|
276
287
|
display: flex;
|
288
|
+
font-size: var(--puck-font-size-xxxs);
|
289
|
+
font-weight: 500;
|
277
290
|
justify-content: center;
|
278
291
|
align-items: center;
|
279
|
-
padding-left:
|
292
|
+
padding-left: 8px;
|
280
293
|
padding-right: 16px;
|
281
294
|
margin-right: 8px;
|
282
|
-
border-right: 1px solid var(--puck-color-grey-
|
295
|
+
border-right: 1px solid var(--puck-color-grey-4);
|
296
|
+
text-overflow: ellipsis;
|
297
|
+
white-space: nowrap;
|
283
298
|
}
|
284
|
-
._DraggableComponent-
|
299
|
+
._DraggableComponent-action_1nlo8_70 {
|
285
300
|
background: transparent;
|
286
301
|
border: none;
|
287
|
-
color: var(--puck-color-grey-
|
288
|
-
padding: 8px;
|
302
|
+
color: var(--puck-color-grey-7);
|
303
|
+
padding: 6px 8px;
|
289
304
|
border-radius: 4px;
|
305
|
+
overflow: hidden;
|
306
|
+
}
|
307
|
+
._DraggableComponent-action_1nlo8_70:hover {
|
308
|
+
background: var(--puck-color-grey-2);
|
309
|
+
color: var(--puck-color-azure-5);
|
310
|
+
cursor: pointer;
|
311
|
+
}
|
312
|
+
|
313
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
|
314
|
+
._DropZone_1980k_1 {
|
315
|
+
margin-left: auto;
|
316
|
+
margin-right: auto;
|
317
|
+
zoom: 1.33;
|
318
|
+
position: relative;
|
319
|
+
height: 100%;
|
320
|
+
outline-offset: -1px;
|
321
|
+
width: 100%;
|
322
|
+
}
|
323
|
+
._DropZone-content_1980k_11 {
|
324
|
+
min-height: 128px;
|
325
|
+
height: 100%;
|
326
|
+
}
|
327
|
+
._DropZone--userIsDragging_1980k_16 ._DropZone-content_1980k_11 {
|
328
|
+
pointer-events: all;
|
329
|
+
}
|
330
|
+
._DropZone--userIsDragging_1980k_16:not(._DropZone--draggingOverArea_1980k_20):not(._DropZone--draggingNewComponent_1980k_21) > ._DropZone-content_1980k_11 {
|
331
|
+
pointer-events: none;
|
332
|
+
}
|
333
|
+
._DropZone--isAreaSelected_1980k_27,
|
334
|
+
._DropZone--draggingOverArea_1980k_20:not(:has(._DropZone--hoveringOverArea_1980k_28)),
|
335
|
+
._DropZone--hoveringOverArea_1980k_28:not(._DropZone--isDisabled_1980k_29):not(._DropZone--isRootZone_1980k_30) {
|
336
|
+
background: var(--puck-color-azure-9);
|
337
|
+
outline: 2px dashed var(--puck-color-azure-7);
|
338
|
+
}
|
339
|
+
._DropZone_1980k_1:not(._DropZone--hasChildren_1980k_36) {
|
340
|
+
background: var(--puck-color-azure-9);
|
341
|
+
outline: 2px dashed var(--puck-color-azure-7);
|
342
|
+
}
|
343
|
+
._DropZone--isDestination_1980k_41 {
|
344
|
+
outline: 2px dashed var(--puck-color-azure-3) !important;
|
290
345
|
}
|
291
|
-
.
|
346
|
+
._DropZone--isDestination_1980k_41:not(._DropZone--isRootZone_1980k_30) {
|
347
|
+
background: var(--puck-color-azure-85) !important;
|
348
|
+
}
|
349
|
+
._DropZone-item_1980k_49 {
|
350
|
+
position: relative;
|
351
|
+
}
|
352
|
+
._DropZone-item_1980k_49:has(._DropZone--draggingOverArea_1980k_20) {
|
353
|
+
z-index: 1;
|
354
|
+
}
|
355
|
+
._DropZone-hitbox_1980k_57 {
|
356
|
+
position: absolute;
|
357
|
+
bottom: -12px;
|
358
|
+
height: 24px;
|
359
|
+
width: 100%;
|
360
|
+
z-index: 1;
|
361
|
+
}
|
362
|
+
|
363
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
|
364
|
+
._IconButton_13gzt_1 {
|
365
|
+
background: transparent;
|
366
|
+
border: none;
|
367
|
+
color: var(--puck-color-grey-3);
|
368
|
+
display: flex;
|
369
|
+
align-items: center;
|
370
|
+
justify-content: center;
|
371
|
+
border-radius: 4px;
|
372
|
+
padding: 4px;
|
373
|
+
}
|
374
|
+
._IconButton_13gzt_1:hover {
|
292
375
|
background: var(--puck-color-grey-9);
|
293
376
|
color: var(--puck-color-blue);
|
294
377
|
cursor: pointer;
|
@@ -580,14 +663,15 @@
|
|
580
663
|
}
|
581
664
|
|
582
665
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
|
583
|
-
.
|
666
|
+
._ComponentList_1ybn0_1 {
|
584
667
|
display: grid;
|
585
668
|
font-family: var(--puck-font-stack);
|
586
669
|
grid-template-columns: 1fr;
|
587
670
|
max-width: 100%;
|
671
|
+
grid-gap: 12px;
|
588
672
|
}
|
589
|
-
._ComponentList-
|
590
|
-
._ComponentList-
|
673
|
+
._ComponentList-item_1ybn0_9,
|
674
|
+
._ComponentList-itemShadow_1ybn0_10 {
|
591
675
|
background: white;
|
592
676
|
padding: 12px;
|
593
677
|
display: flex;
|
@@ -598,92 +682,66 @@
|
|
598
682
|
align-items: center;
|
599
683
|
gap: 12px;
|
600
684
|
cursor: grab;
|
601
|
-
margin-bottom: 12px;
|
602
685
|
}
|
603
|
-
._ComponentList-
|
604
|
-
._ComponentList-
|
686
|
+
._ComponentList-item_1ybn0_9:last-of-type,
|
687
|
+
._ComponentList-itemShadow_1ybn0_10:last-of-type {
|
605
688
|
margin-bottom: 0px;
|
606
689
|
}
|
607
|
-
._ComponentList-
|
690
|
+
._ComponentList-itemIcon_1ybn0_28 {
|
608
691
|
color: var(--puck-color-grey-4);
|
609
692
|
}
|
610
|
-
._ComponentList-
|
693
|
+
._ComponentList-item_1ybn0_9:hover {
|
611
694
|
background-color: var(--puck-color-azure-9);
|
612
695
|
}
|
613
696
|
|
614
|
-
/* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
|
615
|
-
._OutlineList_gor6f_1 {
|
616
|
-
color: var(--puck-color-grey-2);
|
617
|
-
font-family: var(--puck-font-stack);
|
618
|
-
margin: 0;
|
619
|
-
margin-left: 16px;
|
620
|
-
padding-left: 16px;
|
621
|
-
position: relative;
|
622
|
-
list-style: none;
|
623
|
-
}
|
624
|
-
._OutlineList_gor6f_1::before {
|
625
|
-
background: var(--puck-color-grey-7);
|
626
|
-
position: absolute;
|
627
|
-
left: -1px;
|
628
|
-
top: 0px;
|
629
|
-
width: 1px;
|
630
|
-
height: calc(100% - 9px);
|
631
|
-
content: "";
|
632
|
-
}
|
633
|
-
._OutlineList_gor6f_1 li {
|
634
|
-
position: relative;
|
635
|
-
margin-bottom: 4px;
|
636
|
-
}
|
637
|
-
._OutlineList_gor6f_1 li::before {
|
638
|
-
background: var(--puck-color-grey-7);
|
639
|
-
position: absolute;
|
640
|
-
left: -17px;
|
641
|
-
top: 9px;
|
642
|
-
width: 13px;
|
643
|
-
height: 1px;
|
644
|
-
content: "";
|
645
|
-
}
|
646
|
-
._OutlineList_gor6f_1 ._OutlineList-clickableItem_gor6f_36:hover {
|
647
|
-
color: var(--puck-color-blue);
|
648
|
-
cursor: pointer;
|
649
|
-
}
|
650
|
-
._OutlineList_gor6f_1 li > ._OutlineList_gor6f_1 {
|
651
|
-
margin: 8px;
|
652
|
-
}
|
653
|
-
|
654
697
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
|
655
|
-
.
|
698
|
+
._SidebarSection_ivnrs_1 {
|
656
699
|
display: flex;
|
657
700
|
position: relative;
|
658
701
|
flex-direction: column;
|
659
702
|
}
|
660
|
-
.
|
703
|
+
._SidebarSection_ivnrs_1:last-of-type {
|
661
704
|
flex-grow: 1;
|
662
705
|
}
|
663
|
-
._SidebarSection-
|
706
|
+
._SidebarSection-title_ivnrs_11 {
|
664
707
|
background: white;
|
665
708
|
padding: 16px;
|
666
709
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
710
|
+
overflow-x: scroll;
|
667
711
|
}
|
668
|
-
._SidebarSection-
|
712
|
+
._SidebarSection-content_ivnrs_18 {
|
669
713
|
border-bottom: 1px solid var(--puck-color-grey-8);
|
670
714
|
padding: 16px;
|
671
715
|
}
|
672
|
-
._SidebarSection--
|
716
|
+
._SidebarSection--noPadding_ivnrs_23 ._SidebarSection-content_ivnrs_18 {
|
673
717
|
padding: 0px;
|
674
718
|
}
|
675
|
-
.
|
719
|
+
._SidebarSection_ivnrs_1:last-of-type ._SidebarSection-content_ivnrs_18 {
|
676
720
|
border-bottom: none;
|
677
721
|
flex-grow: 1;
|
678
722
|
}
|
679
|
-
._SidebarSection-
|
723
|
+
._SidebarSection-breadcrumbLabel_ivnrs_32 {
|
680
724
|
color: var(--puck-color-azure-3);
|
725
|
+
flex-shrink: 0;
|
681
726
|
}
|
682
|
-
._SidebarSection-
|
727
|
+
._SidebarSection-breadcrumbLabel_ivnrs_32:hover {
|
683
728
|
color: var(--puck-color-azure-4);
|
684
729
|
cursor: pointer;
|
685
730
|
text-decoration: underline;
|
686
731
|
}
|
732
|
+
._SidebarSection-breadcrumbs_ivnrs_43 {
|
733
|
+
align-items: center;
|
734
|
+
display: flex;
|
735
|
+
gap: 4px;
|
736
|
+
}
|
737
|
+
._SidebarSection-breadcrumb_ivnrs_32 {
|
738
|
+
align-items: center;
|
739
|
+
display: flex;
|
740
|
+
gap: 4px;
|
741
|
+
}
|
742
|
+
._SidebarSection-heading_ivnrs_55 {
|
743
|
+
padding-right: 16px;
|
744
|
+
}
|
687
745
|
|
688
746
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
|
689
747
|
._Heading_1y35v_1 {
|
@@ -721,3 +779,88 @@
|
|
721
779
|
._Heading--xs_1y35v_42 {
|
722
780
|
font-size: var(--puck-font-size-xs);
|
723
781
|
}
|
782
|
+
|
783
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
|
784
|
+
._LayerTree_1dcmd_1 {
|
785
|
+
color: var(--puck-color-grey-2);
|
786
|
+
font-family: var(--puck-font-stack);
|
787
|
+
font-size: var(--puck-font-size-xxs);
|
788
|
+
margin: 0;
|
789
|
+
position: relative;
|
790
|
+
list-style: none;
|
791
|
+
padding: 0;
|
792
|
+
}
|
793
|
+
._LayerTree-zoneTitle_1dcmd_11 {
|
794
|
+
color: var(--puck-color-grey-4);
|
795
|
+
font-size: var(--puck-font-size-xxxs);
|
796
|
+
text-transform: uppercase;
|
797
|
+
}
|
798
|
+
._LayerTree-helper_1dcmd_17 {
|
799
|
+
text-align: center;
|
800
|
+
color: var(--puck-color-grey-6);
|
801
|
+
font-family: var(--puck-font-stack);
|
802
|
+
margin: 8px 4px;
|
803
|
+
}
|
804
|
+
._Layer_1dcmd_1 {
|
805
|
+
position: relative;
|
806
|
+
border: 1px solid transparent;
|
807
|
+
}
|
808
|
+
._Layer-inner_1dcmd_29 {
|
809
|
+
padding-left: 20px;
|
810
|
+
padding-right: 8px;
|
811
|
+
border-radius: 3px;
|
812
|
+
}
|
813
|
+
._Layer--containsZone_1dcmd_35 > ._Layer-inner_1dcmd_29 {
|
814
|
+
padding-left: 8px;
|
815
|
+
}
|
816
|
+
._Layer-clickable_1dcmd_39 {
|
817
|
+
align-items: center;
|
818
|
+
display: flex;
|
819
|
+
}
|
820
|
+
._Layer-inner_1dcmd_29:hover {
|
821
|
+
cursor: pointer;
|
822
|
+
}
|
823
|
+
._Layer_1dcmd_1:not(._Layer--isSelected_1dcmd_48) > ._Layer-inner_1dcmd_29:hover,
|
824
|
+
._Layer--isHovering_1dcmd_49 > ._Layer-inner_1dcmd_29 {
|
825
|
+
color: var(--puck-color-blue);
|
826
|
+
background: var(--puck-color-azure-85);
|
827
|
+
}
|
828
|
+
._Layer--isSelected_1dcmd_48 {
|
829
|
+
background: var(--puck-color-azure-9);
|
830
|
+
border-color: var(--puck-color-azure-7);
|
831
|
+
border-radius: 4px;
|
832
|
+
}
|
833
|
+
._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 {
|
834
|
+
background: var(--puck-color-azure-85);
|
835
|
+
font-weight: 600;
|
836
|
+
}
|
837
|
+
._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65,
|
838
|
+
._Layer--childIsSelected_1dcmd_66 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65 {
|
839
|
+
transform: scaleY(-1);
|
840
|
+
}
|
841
|
+
._Layer-zones_1dcmd_70 {
|
842
|
+
display: none;
|
843
|
+
margin-left: 20px;
|
844
|
+
}
|
845
|
+
._Layer--isSelected_1dcmd_48 > ._Layer-zones_1dcmd_70,
|
846
|
+
._Layer--childIsSelected_1dcmd_66 > ._Layer-zones_1dcmd_70 {
|
847
|
+
display: block;
|
848
|
+
}
|
849
|
+
._Layer-zones_1dcmd_70 > ._LayerTree_1dcmd_1 {
|
850
|
+
margin-left: 16px;
|
851
|
+
}
|
852
|
+
._Layer-title_1dcmd_84,
|
853
|
+
._LayerTree-zoneTitle_1dcmd_11 {
|
854
|
+
display: flex;
|
855
|
+
gap: 8px;
|
856
|
+
align-items: center;
|
857
|
+
margin: 8px 4px;
|
858
|
+
}
|
859
|
+
._Layer-icon_1dcmd_92 {
|
860
|
+
color: var(--puck-color-rose-6);
|
861
|
+
margin-top: 4px;
|
862
|
+
}
|
863
|
+
._Layer-zoneIcon_1dcmd_97 {
|
864
|
+
color: var(--puck-color-grey-7);
|
865
|
+
margin-top: 4px;
|
866
|
+
}
|
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,7 @@
|
|
1
|
-
import
|
1
|
+
import * as react from 'react';
|
2
|
+
import { ReactElement, ReactNode, CSSProperties } from 'react';
|
2
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
4
|
+
import { DragStart, DragUpdate } from 'react-beautiful-dnd';
|
3
5
|
|
4
6
|
type Adaptor<AdaptorParams = {}> = {
|
5
7
|
name: string;
|
@@ -44,6 +46,11 @@ type DefaultComponentProps = {
|
|
44
46
|
type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
|
45
47
|
[PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName][0]>;
|
46
48
|
};
|
49
|
+
type Content<Props extends {
|
50
|
+
[key: string]: any;
|
51
|
+
} = {
|
52
|
+
[key: string]: any;
|
53
|
+
}> = MappedItem<Props>[];
|
47
54
|
type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps> = {
|
48
55
|
render: (props: ComponentProps) => ReactElement;
|
49
56
|
defaultProps?: DefaultProps;
|
@@ -55,7 +62,7 @@ type Config<Props extends {
|
|
55
62
|
[key: string]: any;
|
56
63
|
}, RootProps extends DefaultRootProps = DefaultRootProps> = {
|
57
64
|
components: {
|
58
|
-
[ComponentName in keyof Props]: ComponentConfig<Props[ComponentName]>;
|
65
|
+
[ComponentName in keyof Props]: ComponentConfig<Props[ComponentName], Props[ComponentName]>;
|
59
66
|
};
|
60
67
|
root?: ComponentConfig<RootProps & {
|
61
68
|
children: ReactNode;
|
@@ -87,7 +94,8 @@ type Data<Props extends {
|
|
87
94
|
[key: string]: any;
|
88
95
|
}> = {
|
89
96
|
root: RootProps;
|
90
|
-
content:
|
97
|
+
content: Content<Props>;
|
98
|
+
zones?: Record<string, Content<Props>>;
|
91
99
|
};
|
92
100
|
|
93
101
|
declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
|
@@ -104,6 +112,100 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
|
|
104
112
|
size?: "medium" | "large" | undefined;
|
105
113
|
}) => react_jsx_runtime.JSX.Element;
|
106
114
|
|
115
|
+
type ItemSelector = {
|
116
|
+
index: number;
|
117
|
+
zone?: string;
|
118
|
+
};
|
119
|
+
|
120
|
+
type InsertAction = {
|
121
|
+
type: "insert";
|
122
|
+
componentType: string;
|
123
|
+
destinationIndex: number;
|
124
|
+
destinationZone: string;
|
125
|
+
};
|
126
|
+
type DuplicateAction = {
|
127
|
+
type: "duplicate";
|
128
|
+
sourceIndex: number;
|
129
|
+
sourceZone: string;
|
130
|
+
};
|
131
|
+
type ReplaceAction = {
|
132
|
+
type: "replace";
|
133
|
+
destinationIndex: number;
|
134
|
+
destinationZone: string;
|
135
|
+
data: any;
|
136
|
+
};
|
137
|
+
type ReorderAction = {
|
138
|
+
type: "reorder";
|
139
|
+
sourceIndex: number;
|
140
|
+
destinationIndex: number;
|
141
|
+
destinationZone: string;
|
142
|
+
};
|
143
|
+
type MoveAction = {
|
144
|
+
type: "move";
|
145
|
+
sourceIndex: number;
|
146
|
+
sourceZone: string;
|
147
|
+
destinationIndex: number;
|
148
|
+
destinationZone: string;
|
149
|
+
};
|
150
|
+
type RemoveAction = {
|
151
|
+
type: "remove";
|
152
|
+
index: number;
|
153
|
+
zone: string;
|
154
|
+
};
|
155
|
+
type SetDataAction = {
|
156
|
+
type: "set";
|
157
|
+
data: Partial<Data>;
|
158
|
+
};
|
159
|
+
type RegisterZoneAction = {
|
160
|
+
type: "registerZone";
|
161
|
+
zone: string;
|
162
|
+
};
|
163
|
+
type UnregisterZoneAction = {
|
164
|
+
type: "unregisterZone";
|
165
|
+
zone: string;
|
166
|
+
};
|
167
|
+
type PuckAction = ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetDataAction | RegisterZoneAction | UnregisterZoneAction;
|
168
|
+
|
169
|
+
type PathData = Record<string, {
|
170
|
+
selector: ItemSelector | null;
|
171
|
+
label: string;
|
172
|
+
}[]>;
|
173
|
+
type DropZoneContext = {
|
174
|
+
data: Data;
|
175
|
+
config: Config;
|
176
|
+
itemSelector?: ItemSelector | null;
|
177
|
+
setItemSelector?: (newIndex: ItemSelector | null) => void;
|
178
|
+
dispatch?: (action: PuckAction) => void;
|
179
|
+
areaId?: string;
|
180
|
+
draggedItem?: DragStart & Partial<DragUpdate>;
|
181
|
+
placeholderStyle?: CSSProperties;
|
182
|
+
hoveringArea?: string | null;
|
183
|
+
setHoveringArea?: (area: string | null) => void;
|
184
|
+
hoveringZone?: string | null;
|
185
|
+
setHoveringZone?: (zone: string | null) => void;
|
186
|
+
hoveringComponent?: string | null;
|
187
|
+
setHoveringComponent?: (id: string | null) => void;
|
188
|
+
registerZoneArea?: (areaId: string) => void;
|
189
|
+
areasWithZones?: Record<string, boolean>;
|
190
|
+
registerZone?: (zoneCompound: string) => void;
|
191
|
+
unregisterZone?: (zoneCompound: string) => void;
|
192
|
+
activeZones?: Record<string, boolean>;
|
193
|
+
pathData?: PathData;
|
194
|
+
registerPath?: (selector: ItemSelector) => void;
|
195
|
+
mode?: "edit" | "render";
|
196
|
+
} | null;
|
197
|
+
declare const dropZoneContext: react.Context<DropZoneContext>;
|
198
|
+
declare const DropZoneProvider: ({ children, value, }: {
|
199
|
+
children: ReactNode;
|
200
|
+
value: DropZoneContext;
|
201
|
+
}) => react_jsx_runtime.JSX.Element;
|
202
|
+
|
203
|
+
type DropZoneProps = {
|
204
|
+
zone: string;
|
205
|
+
style?: CSSProperties;
|
206
|
+
};
|
207
|
+
declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
|
208
|
+
|
107
209
|
declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
|
108
210
|
children: ReactNode;
|
109
211
|
href?: string | undefined;
|
@@ -141,11 +243,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
|
|
141
243
|
renderHeader?: (props: {
|
142
244
|
children: ReactNode;
|
143
245
|
data: Data;
|
144
|
-
|
246
|
+
dispatch: (action: PuckAction) => void;
|
145
247
|
}) => ReactElement;
|
146
248
|
renderHeaderActions?: (props: {
|
147
249
|
data: Data;
|
148
|
-
|
250
|
+
dispatch: (action: PuckAction) => void;
|
149
251
|
}) => ReactElement;
|
150
252
|
headerTitle?: string;
|
151
253
|
headerPath?: string;
|
@@ -162,4 +264,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
|
|
162
264
|
label: string;
|
163
265
|
}) => react_jsx_runtime.JSX.Element;
|
164
266
|
|
165
|
-
export { Adaptor, Button, ComponentConfig, Config, Data, DefaultComponentProps, DefaultRootProps, Field, FieldLabel, Fields, IconButton, Puck, Render };
|
267
|
+
export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };
|