@measured/puck 0.14.0-canary.5bb1708 → 0.14.0-canary.674ac43

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -15,6 +15,9 @@ The visual editor for React.
15
15
  <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
16
16
  <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
17
17
  </a>
18
+ <a aria-label="Browse the awesome-puck community repo" href="https://github.com/measuredco/awesome-puck">
19
+ <img alt="" src="https://img.shields.io/badge/repo-awesome--puck-fc60a8.svg?style=for-the-badge&labelColor=000000&logoWidth=20">
20
+ </a>
18
21
  </p>
19
22
 
20
23
  ## Demo
@@ -96,6 +99,11 @@ Available recipes include:
96
99
  - [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js 13 app example, using App Router and static page generation
97
100
  - [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 app example, using dynamic routes at root-level
98
101
 
102
+ ## Community
103
+
104
+ - [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
105
+ - [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more
106
+
99
107
  ## Hire the Puck team
100
108
 
101
109
  Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
@@ -1,5 +1,4 @@
1
- import { CSSProperties, ReactElement, ReactNode } from 'react';
2
- import * as react_jsx_runtime from 'react/jsx-runtime';
1
+ import { CSSProperties, ReactNode, ReactElement } from 'react';
3
2
 
4
3
  type ItemSelector = {
5
4
  index: number;
@@ -12,7 +11,15 @@ type DropZoneProps = {
12
11
  disallow?: string[];
13
12
  style?: CSSProperties;
14
13
  };
15
- declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
14
+
15
+ type iconTypes = "Smartphone" | "Monitor" | "Tablet";
16
+ type Viewport = {
17
+ width: number;
18
+ height?: number | "auto";
19
+ label?: string;
20
+ icon?: iconTypes | ReactNode;
21
+ };
22
+ type Viewports = Viewport[];
16
23
 
17
24
  type WithPuckProps<Props> = Props & {
18
25
  id: string;
@@ -138,20 +145,26 @@ type Content<Props extends {
138
145
  } = {
139
146
  [key: string]: any;
140
147
  }> = ComponentData<Props>[];
141
- type PuckComponent<Props extends DefaultComponentProps = DefaultComponentProps> = (props: WithPuckProps<Props & {
148
+ type PuckComponent<Props> = (props: WithPuckProps<Props & {
142
149
  puck: PuckContext;
143
150
  }>) => JSX.Element;
144
151
  type PuckContext = {
145
- renderDropZone: typeof DropZone;
152
+ renderDropZone: React.FC<DropZoneProps>;
146
153
  };
147
- type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = ComponentData<ComponentProps>> = {
154
+ type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = Omit<ComponentData<ComponentProps>, "type">> = {
148
155
  render: PuckComponent<ComponentProps>;
149
156
  label?: string;
150
157
  defaultProps?: DefaultProps;
151
158
  fields?: Fields<ComponentProps>;
152
159
  resolveData?: (data: DataShape, params: {
153
160
  changed: Partial<Record<keyof ComponentProps, boolean>>;
154
- }) => Promise<Partial<ComponentDataWithOptionalProps<ComponentProps>>> | Partial<ComponentDataWithOptionalProps<ComponentProps>>;
161
+ }) => Promise<{
162
+ props?: Partial<ComponentProps>;
163
+ readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
164
+ }> | {
165
+ props?: Partial<ComponentProps>;
166
+ readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
167
+ };
155
168
  };
156
169
  type Category<ComponentName> = {
157
170
  components?: ComponentName[];
@@ -159,22 +172,18 @@ type Category<ComponentName> = {
159
172
  visible?: boolean;
160
173
  defaultExpanded?: boolean;
161
174
  };
162
- type Config<Props extends {
163
- [key: string]: any;
164
- } = {
165
- [key: string]: any;
166
- }, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = any> = {
175
+ type Config<Props extends Record<string, any> = Record<string, any>, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = string> = {
167
176
  categories?: Record<CategoryName, Category<keyof Props>> & {
168
- other?: Category<Props>;
177
+ other?: Category<keyof Props>;
169
178
  };
170
179
  components: {
171
180
  [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
172
181
  };
173
182
  root?: Partial<ComponentConfig<RootProps & {
174
- children: ReactNode;
183
+ children?: ReactNode;
175
184
  }, Partial<RootProps & {
176
- children: ReactNode;
177
- }>, RootDataWithProps<RootProps>>>;
185
+ children?: ReactNode;
186
+ }>, RootDataWithProps>>;
178
187
  };
179
188
  type BaseData<Props extends {
180
189
  [key: string]: any;
@@ -192,13 +201,6 @@ type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
192
201
  };
193
202
  type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
194
203
  type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
195
- type ComponentDataWithOptionalProps<Props extends {
196
- [key: string]: any;
197
- } = {
198
- [key: string]: any;
199
- }> = Omit<ComponentData, "props"> & {
200
- props: Partial<WithPuckProps<Props>>;
201
- };
202
204
  type MappedItem = ComponentData;
203
205
  type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
204
206
  root: RootData<RootProps>;
@@ -225,10 +227,18 @@ type UiState = {
225
227
  expanded?: boolean;
226
228
  }>;
227
229
  isDragging: boolean;
230
+ viewports: {
231
+ current: {
232
+ width: number;
233
+ height: number | "auto";
234
+ };
235
+ controlsVisible: boolean;
236
+ options: Viewport[];
237
+ };
228
238
  };
229
239
  type AppState = {
230
240
  data: Data;
231
241
  ui: UiState;
232
242
  };
233
243
 
234
- export { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, NumberField as N, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultComponentProps as a, DefaultRootProps as b, RootData as c, TextareaField as d, RadioField as e, ArrayField as f, Adaptor as g, ExternalField as h, CustomField as i, Fields as j, Content as k, PuckContext as l, ComponentConfig as m, BaseData as n, ComponentData as o, RootDataWithoutProps as p, ItemWithId as q, ArrayState as r, DropZone as s };
244
+ export type { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, NumberField as N, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, Viewports as V, DefaultRootProps as a, DropZoneProps as b, DefaultComponentProps as c, RootData as d, ComponentData as e, TextareaField as f, RadioField as g, ArrayField as h, Adaptor as i, ExternalField as j, CustomField as k, Fields as l, Content as m, PuckContext as n, ComponentConfig as o, BaseData as p, RootDataWithoutProps as q, ItemWithId as r, ArrayState as s };