@measured/puck 0.16.0-canary.a1d52cb → 0.16.0-canary.a3518ca

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,434 @@
1
+ import { CSSProperties, ReactElement, ReactNode } from 'react';
2
+
3
+ type ItemSelector = {
4
+ index: number;
5
+ zone?: string;
6
+ };
7
+
8
+ type DropZoneProps = {
9
+ zone: string;
10
+ allow?: string[];
11
+ disallow?: string[];
12
+ style?: CSSProperties;
13
+ };
14
+
15
+ type FieldOption = {
16
+ label: string;
17
+ value: string | number | boolean;
18
+ };
19
+ type FieldOptions = Array<FieldOption> | ReadonlyArray<FieldOption>;
20
+ type BaseField = {
21
+ label?: string;
22
+ };
23
+ type TextField = BaseField & {
24
+ type: "text";
25
+ };
26
+ type NumberField = BaseField & {
27
+ type: "number";
28
+ min?: number;
29
+ max?: number;
30
+ };
31
+ type TextareaField = BaseField & {
32
+ type: "textarea";
33
+ };
34
+ type SelectField = BaseField & {
35
+ type: "select";
36
+ options: FieldOptions;
37
+ };
38
+ type RadioField = BaseField & {
39
+ type: "radio";
40
+ options: FieldOptions;
41
+ };
42
+ type ArrayField<Props extends {
43
+ [key: string]: any;
44
+ } = {
45
+ [key: string]: any;
46
+ }> = BaseField & {
47
+ type: "array";
48
+ arrayFields: {
49
+ [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
50
+ };
51
+ defaultItemProps?: Props[0];
52
+ getItemSummary?: (item: Props[0], index?: number) => string;
53
+ max?: number;
54
+ min?: number;
55
+ };
56
+ type ObjectField<Props extends {
57
+ [key: string]: any;
58
+ } = {
59
+ [key: string]: any;
60
+ }> = BaseField & {
61
+ type: "object";
62
+ objectFields: Props extends any[] ? never : {
63
+ [SubPropName in keyof Props]: Field<Props[SubPropName]>;
64
+ };
65
+ };
66
+ type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
67
+ name: string;
68
+ fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
69
+ mapProp?: (value: TableShape) => PropShape;
70
+ };
71
+ type ExternalFieldWithAdaptor<Props extends {
72
+ [key: string]: any;
73
+ } = {
74
+ [key: string]: any;
75
+ }> = BaseField & {
76
+ type: "external";
77
+ placeholder?: string;
78
+ adaptor: Adaptor<any, any, Props>;
79
+ adaptorParams?: object;
80
+ getItemSummary: (item: Props, index?: number) => string;
81
+ };
82
+ type ExternalField<Props extends {
83
+ [key: string]: any;
84
+ } = {
85
+ [key: string]: any;
86
+ }> = BaseField & {
87
+ type: "external";
88
+ placeholder?: string;
89
+ fetchList: (params: {
90
+ query: string;
91
+ filters: Record<string, any>;
92
+ }) => Promise<any[] | null>;
93
+ mapProp?: (value: any) => Props;
94
+ mapRow?: (value: any) => Record<string, string | number>;
95
+ getItemSummary?: (item: Props, index?: number) => string;
96
+ showSearch?: boolean;
97
+ initialQuery?: string;
98
+ filterFields?: Record<string, Field>;
99
+ initialFilters?: Record<string, any>;
100
+ };
101
+ type CustomField<Props extends any = {}> = BaseField & {
102
+ type: "custom";
103
+ render: (props: {
104
+ field: CustomField<Props>;
105
+ name: string;
106
+ id: string;
107
+ value: Props;
108
+ onChange: (value: Props) => void;
109
+ readOnly?: boolean;
110
+ }) => ReactElement;
111
+ };
112
+ type Field<Props extends any = any> = TextField | NumberField | TextareaField | SelectField | RadioField | ArrayField<Props extends {
113
+ [key: string]: any;
114
+ } ? Props : any> | ObjectField<Props extends {
115
+ [key: string]: any;
116
+ } ? Props : any> | ExternalField<Props extends {
117
+ [key: string]: any;
118
+ } ? Props : any> | ExternalFieldWithAdaptor<Props extends {
119
+ [key: string]: any;
120
+ } ? Props : any> | CustomField<Props>;
121
+ type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
122
+ [PropName in keyof Omit<ComponentProps, "editMode">]: Field<ComponentProps[PropName]>;
123
+ };
124
+ type FieldProps<ValueType = any, F = Field<any>> = {
125
+ field: F;
126
+ value: ValueType;
127
+ id?: string;
128
+ onChange: (value: ValueType, uiState?: Partial<UiState>) => void;
129
+ readOnly?: boolean;
130
+ };
131
+
132
+ type PuckComponent<Props> = (props: WithId<WithPuckProps<Props>>) => JSX.Element;
133
+ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponentProps, FieldProps extends DefaultComponentProps = RenderProps, DataShape = Omit<ComponentData<FieldProps>, "type">> = {
134
+ render: PuckComponent<RenderProps>;
135
+ label?: string;
136
+ defaultProps?: FieldProps;
137
+ fields?: Fields<FieldProps>;
138
+ permissions?: Partial<Permissions>;
139
+ resolveFields?: (data: DataShape, params: {
140
+ changed: Partial<Record<keyof FieldProps, boolean>>;
141
+ fields: Fields<FieldProps>;
142
+ lastFields: Fields<FieldProps>;
143
+ lastData: DataShape;
144
+ appState: AppState;
145
+ }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
146
+ resolveData?: (data: DataShape, params: {
147
+ changed: Partial<Record<keyof FieldProps, boolean>>;
148
+ lastData: DataShape;
149
+ }) => Promise<{
150
+ props?: Partial<FieldProps>;
151
+ readOnly?: Partial<Record<keyof FieldProps, boolean>>;
152
+ }> | {
153
+ props?: Partial<FieldProps>;
154
+ readOnly?: Partial<Record<keyof FieldProps, boolean>>;
155
+ };
156
+ resolvePermissions?: (data: DataShape, params: {
157
+ changed: Partial<Record<keyof FieldProps, boolean>>;
158
+ lastPermissions: Partial<Permissions> | undefined;
159
+ initialPermissions: Partial<Permissions>;
160
+ appState: AppState;
161
+ }) => Partial<Permissions>;
162
+ };
163
+ type Category<ComponentName> = {
164
+ components?: ComponentName[];
165
+ title?: string;
166
+ visible?: boolean;
167
+ defaultExpanded?: boolean;
168
+ };
169
+ type Config<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = any, CategoryName extends string = string> = {
170
+ categories?: Record<CategoryName, Category<keyof Props>> & {
171
+ other?: Category<keyof Props>;
172
+ };
173
+ components: {
174
+ [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
175
+ };
176
+ root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData>>;
177
+ };
178
+
179
+ type WithId<Props> = Props & {
180
+ id: string;
181
+ };
182
+ type WithPuckProps<Props> = Props & {
183
+ puck: PuckContext;
184
+ editMode?: boolean;
185
+ };
186
+ type AsFieldProps<Props> = Omit<Props, "children" | "puck" | "editMode">;
187
+ type WithChildren<Props> = Props & {
188
+ children: ReactNode;
189
+ };
190
+ type ExtractPropsFromConfig<UserConfig> = UserConfig extends Config<infer P, any, any> ? P : never;
191
+ type ExtractRootPropsFromConfig<UserConfig> = UserConfig extends Config<any, infer P, any> ? P : never;
192
+
193
+ type PuckContext = {
194
+ renderDropZone: React.FC<DropZoneProps>;
195
+ isEditing: boolean;
196
+ };
197
+ type DefaultRootFieldProps = {
198
+ title?: string;
199
+ };
200
+ type DefaultRootRenderProps<Props extends DefaultComponentProps = DefaultRootFieldProps> = WithPuckProps<WithChildren<Props>>;
201
+ type DefaultRootProps = DefaultRootRenderProps;
202
+ type DefaultComponentProps = {
203
+ [key: string]: any;
204
+ };
205
+
206
+ type BaseData<Props extends {
207
+ [key: string]: any;
208
+ } = {
209
+ [key: string]: any;
210
+ }> = {
211
+ readOnly?: Partial<Record<keyof Props, boolean>>;
212
+ };
213
+ type RootDataWithProps<Props extends DefaultComponentProps = DefaultRootFieldProps> = BaseData<Props> & {
214
+ props: Props;
215
+ };
216
+ type RootDataWithoutProps<Props extends DefaultComponentProps = DefaultRootFieldProps> = Props;
217
+ type RootData<Props extends DefaultComponentProps = DefaultRootFieldProps> = Partial<RootDataWithProps<AsFieldProps<Props>>> & Partial<RootDataWithoutProps<Props>>;
218
+ type ComponentData<Props extends DefaultComponentProps = DefaultComponentProps, Name = string> = {
219
+ type: Name;
220
+ props: WithId<Props>;
221
+ } & BaseData<Props>;
222
+ type MappedItem = ComponentData;
223
+ type ComponentDataMap<Props extends Record<string, DefaultComponentProps> = DefaultComponentProps> = {
224
+ [K in keyof Props]: ComponentData<Props[K], K extends string ? K : never>;
225
+ }[keyof Props];
226
+ type Content<PropsMap extends {
227
+ [key: string]: any;
228
+ } = {
229
+ [key: string]: any;
230
+ }> = ComponentDataMap<PropsMap>[];
231
+ type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultRootFieldProps> = {
232
+ root: RootData<RootProps>;
233
+ content: Content<Props>;
234
+ zones?: Record<string, Content<Props>>;
235
+ };
236
+
237
+ type ItemWithId = {
238
+ _arrayId: string;
239
+ _originalIndex: number;
240
+ };
241
+ type ArrayState = {
242
+ items: ItemWithId[];
243
+ openId: string;
244
+ };
245
+ type UiState = {
246
+ leftSideBarVisible: boolean;
247
+ rightSideBarVisible: boolean;
248
+ itemSelector: ItemSelector | null;
249
+ arrayState: Record<string, ArrayState | undefined>;
250
+ componentList: Record<string, {
251
+ components?: string[];
252
+ title?: string;
253
+ visible?: boolean;
254
+ expanded?: boolean;
255
+ }>;
256
+ isDragging: boolean;
257
+ viewports: {
258
+ current: {
259
+ width: number;
260
+ height: number | "auto";
261
+ };
262
+ controlsVisible: boolean;
263
+ options: Viewport[];
264
+ };
265
+ };
266
+ type AppState<UserData extends Data = Data> = {
267
+ data: UserData;
268
+ ui: UiState;
269
+ };
270
+
271
+ type RenderFunc<Props extends {
272
+ [key: string]: any;
273
+ } = {
274
+ children: ReactNode;
275
+ }> = (props: Props) => ReactElement;
276
+ declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "components", "componentItem", "outline", "puck", "preview"];
277
+ type OverrideKey = (typeof overrideKeys)[number];
278
+ type OverridesGeneric<Shape extends {
279
+ [key in OverrideKey]: any;
280
+ }> = Shape;
281
+ type Overrides = OverridesGeneric<{
282
+ fieldTypes: Partial<FieldRenderFunctions>;
283
+ header: RenderFunc<{
284
+ actions: ReactNode;
285
+ children: ReactNode;
286
+ }>;
287
+ actionBar: RenderFunc<{
288
+ label?: string;
289
+ children: ReactNode;
290
+ }>;
291
+ headerActions: RenderFunc<{
292
+ children: ReactNode;
293
+ }>;
294
+ preview: RenderFunc;
295
+ fields: RenderFunc<{
296
+ children: ReactNode;
297
+ isLoading: boolean;
298
+ itemSelector?: ItemSelector | null;
299
+ }>;
300
+ fieldLabel: RenderFunc<{
301
+ children?: ReactNode;
302
+ icon?: ReactNode;
303
+ label: string;
304
+ el?: "label" | "div";
305
+ readOnly?: boolean;
306
+ className?: string;
307
+ }>;
308
+ components: RenderFunc;
309
+ componentItem: RenderFunc<{
310
+ children: ReactNode;
311
+ name: string;
312
+ }>;
313
+ iframe: RenderFunc<{
314
+ children: ReactNode;
315
+ document?: Document;
316
+ }>;
317
+ outline: RenderFunc;
318
+ puck: RenderFunc;
319
+ }>;
320
+ type FieldRenderFunctions = Omit<{
321
+ [Type in Field["type"]]: React.FunctionComponent<FieldProps<Extract<Field, {
322
+ type: Type;
323
+ }>> & {
324
+ children: ReactNode;
325
+ name: string;
326
+ }>;
327
+ }, "custom"> & {
328
+ [key: string]: React.FunctionComponent<FieldProps<any> & {
329
+ children: ReactNode;
330
+ name: string;
331
+ }>;
332
+ };
333
+
334
+ type iconTypes = "Smartphone" | "Monitor" | "Tablet";
335
+ type Viewport = {
336
+ width: number;
337
+ height?: number | "auto";
338
+ label?: string;
339
+ icon?: iconTypes | ReactNode;
340
+ };
341
+ type Viewports = Viewport[];
342
+
343
+ type Permissions = {
344
+ drag: boolean;
345
+ duplicate: boolean;
346
+ delete: boolean;
347
+ edit: boolean;
348
+ insert: boolean;
349
+ } & Record<string, boolean>;
350
+ type IframeConfig = {
351
+ enabled?: boolean;
352
+ waitForStyles?: boolean;
353
+ };
354
+ type OnAction<UserData extends Data = Data> = (action: PuckAction, appState: AppState<UserData>, prevAppState: AppState<UserData>) => void;
355
+ type Plugin = {
356
+ overrides: Partial<Overrides>;
357
+ };
358
+ type History<D = any> = {
359
+ state: D;
360
+ id?: string;
361
+ };
362
+ type InitialHistoryAppend<AS = Partial<AppState>> = {
363
+ histories: History<AS>[];
364
+ index?: number;
365
+ appendData?: true;
366
+ };
367
+ type InitialHistoryNoAppend<AS = Partial<AppState>> = {
368
+ histories: [History<AS>, ...History<AS>[]];
369
+ index?: number;
370
+ appendData?: false;
371
+ };
372
+ type InitialHistory<AS = Partial<AppState>> = InitialHistoryAppend<AS> | InitialHistoryNoAppend<AS>;
373
+
374
+ type InsertAction = {
375
+ type: "insert";
376
+ componentType: string;
377
+ destinationIndex: number;
378
+ destinationZone: string;
379
+ id?: string;
380
+ };
381
+ type DuplicateAction = {
382
+ type: "duplicate";
383
+ sourceIndex: number;
384
+ sourceZone: string;
385
+ };
386
+ type ReplaceAction = {
387
+ type: "replace";
388
+ destinationIndex: number;
389
+ destinationZone: string;
390
+ data: any;
391
+ };
392
+ type ReorderAction = {
393
+ type: "reorder";
394
+ sourceIndex: number;
395
+ destinationIndex: number;
396
+ destinationZone: string;
397
+ };
398
+ type MoveAction = {
399
+ type: "move";
400
+ sourceIndex: number;
401
+ sourceZone: string;
402
+ destinationIndex: number;
403
+ destinationZone: string;
404
+ };
405
+ type RemoveAction = {
406
+ type: "remove";
407
+ index: number;
408
+ zone: string;
409
+ };
410
+ type SetUiAction = {
411
+ type: "setUi";
412
+ ui: Partial<UiState> | ((previous: UiState) => Partial<UiState>);
413
+ };
414
+ type SetDataAction = {
415
+ type: "setData";
416
+ data: Partial<Data> | ((previous: Data) => Partial<Data>);
417
+ };
418
+ type SetAction<UserData extends Data = Data> = {
419
+ type: "set";
420
+ state: Partial<AppState<UserData>> | ((previous: AppState<UserData>) => Partial<AppState<UserData>>);
421
+ };
422
+ type RegisterZoneAction = {
423
+ type: "registerZone";
424
+ zone: string;
425
+ };
426
+ type UnregisterZoneAction = {
427
+ type: "unregisterZone";
428
+ zone: string;
429
+ };
430
+ type PuckAction = {
431
+ recordHistory?: boolean;
432
+ } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
433
+
434
+ export { type WithId as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type Field as F, type ArrayField as G, type History as H, type ItemSelector as I, type ObjectField as J, type Adaptor as K, type ExternalFieldWithAdaptor as L, type MappedItem as M, type NumberField as N, type OnAction as O, type PuckAction as P, type ExternalField as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UiState as U, type Viewports as V, type CustomField as W, type Fields as X, type PuckContext as Y, type DefaultRootRenderProps as Z, type DefaultRootProps as _, type FieldProps as a, type WithPuckProps as a0, type AsFieldProps as a1, type WithChildren as a2, type DropZoneProps as b, type ExtractRootPropsFromConfig as c, type Permissions as d, type Plugin as e, type Overrides as f, type IframeConfig as g, type InitialHistory as h, type DefaultComponentProps as i, type DefaultRootFieldProps as j, type ComponentData as k, type Viewport as l, type OverrideKey as m, type FieldRenderFunctions as n, overrideKeys as o, type ItemWithId as p, type ArrayState as q, type PuckComponent as r, type ComponentConfig as s, type RootDataWithoutProps as t, type RootData as u, type ComponentDataMap as v, type Content as w, type BaseField as x, type TextareaField as y, type RadioField as z };
@@ -94,8 +94,9 @@ var setupZone = (data, zoneKey) => {
94
94
  if (zoneKey === rootDroppableId) {
95
95
  return data;
96
96
  }
97
- const newData = __spreadValues({}, data);
98
- newData.zones = data.zones || {};
97
+ const newData = __spreadProps(__spreadValues({}, data), {
98
+ zones: data.zones || {}
99
+ });
99
100
  newData.zones[zoneKey] = newData.zones[zoneKey] || [];
100
101
  return newData;
101
102
  };
package/dist/index.css CHANGED
@@ -1732,7 +1732,7 @@ textarea._Input-input_3pq3z_47 {
1732
1732
  }
1733
1733
 
1734
1734
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1735
- ._PuckCanvas_6zd4y_1 {
1735
+ ._PuckCanvas_esbg1_1 {
1736
1736
  background: var(--puck-color-grey-11);
1737
1737
  display: flex;
1738
1738
  grid-area: editor;
@@ -1741,15 +1741,15 @@ textarea._Input-input_3pq3z_47 {
1741
1741
  overflow: auto;
1742
1742
  }
1743
1743
  @media (min-width: 1198px) {
1744
- ._PuckCanvas_6zd4y_1 {
1744
+ ._PuckCanvas_esbg1_1 {
1745
1745
  padding: calc(var(--puck-space-px) * 1.5);
1746
1746
  padding-top: var(--puck-space-px);
1747
1747
  }
1748
- ._PuckCanvas_6zd4y_1:not(._PuckCanvas_6zd4y_1:has(._PuckCanvas-controls_6zd4y_16)) {
1748
+ ._PuckCanvas_esbg1_1:not(._PuckCanvas_esbg1_1:has(._PuckCanvas-controls_esbg1_16)) {
1749
1749
  padding-top: calc(var(--puck-space-px) * 1.5);
1750
1750
  }
1751
1751
  }
1752
- ._PuckCanvas-inner_6zd4y_21 {
1752
+ ._PuckCanvas-inner_esbg1_21 {
1753
1753
  box-sizing: border-box;
1754
1754
  display: flex;
1755
1755
  height: 100%;
@@ -1759,7 +1759,7 @@ textarea._Input-input_3pq3z_47 {
1759
1759
  position: relative;
1760
1760
  width: 100%;
1761
1761
  }
1762
- ._PuckCanvas-root_6zd4y_32 {
1762
+ ._PuckCanvas-root_esbg1_32 {
1763
1763
  background: white;
1764
1764
  border: 1px solid var(--puck-color-grey-09);
1765
1765
  box-sizing: border-box;
@@ -1771,16 +1771,32 @@ textarea._Input-input_3pq3z_47 {
1771
1771
  opacity: 0;
1772
1772
  }
1773
1773
  @media (min-width: 1198px) {
1774
- ._PuckCanvas-root_6zd4y_32 {
1774
+ ._PuckCanvas-root_esbg1_32 {
1775
1775
  min-width: unset;
1776
1776
  }
1777
1777
  }
1778
1778
  @media (prefers-reduced-motion: reduce) {
1779
- ._PuckCanvas-root_6zd4y_32 {
1779
+ ._PuckCanvas-root_esbg1_32 {
1780
1780
  transition: none !important;
1781
1781
  }
1782
1782
  }
1783
- ._PuckCanvas--ready_6zd4y_56 ._PuckCanvas-root_6zd4y_32 {
1783
+ ._PuckCanvas--ready_esbg1_56 ._PuckCanvas-root_esbg1_32 {
1784
1784
  opacity: 1;
1785
- transition: opacity 150ms ease-out;
1785
+ }
1786
+ ._PuckCanvas-loader_esbg1_60 {
1787
+ align-items: center;
1788
+ color: var(--puck-color-grey-06);
1789
+ display: flex;
1790
+ height: 100%;
1791
+ justify-content: center;
1792
+ transition: opacity 250ms ease-out;
1793
+ opacity: 0;
1794
+ }
1795
+ ._PuckCanvas--showLoader_esbg1_70 ._PuckCanvas-loader_esbg1_60 {
1796
+ opacity: 1;
1797
+ }
1798
+ ._PuckCanvas--showLoader_esbg1_70._PuckCanvas--ready_esbg1_56 ._PuckCanvas-loader_esbg1_60 {
1799
+ opacity: 0;
1800
+ height: 0;
1801
+ transition: none;
1786
1802
  }