@measured/puck 0.11.3-canary.487ab83 → 0.12.0-canary.2e931bc

package/README.md

@@ -270,7 +270,7 @@ When the user interacts with this external field, they'll be presented with a li
 
 ## Dynamic prop resolution
 
-Dynamic prop resolution allows developers to resolve props for components without saving the data to the Puck data model.
+Dynamic prop resolution allows developers to change the props for a component after the props have been changed by the user. This is useful for making third-party API calls, such as requesting the latest content from a headless CMS.
 
 ### resolveData()
 
@@ -374,6 +374,36 @@ import { resolveAllData } from "@measured/puck";
 const resolvedData = resolveAllData(data, config);
 ```
 
+### React server components
+
+If you want to use React server components, use ` <Render>` from the `@measured/puck/rsc` bundle instead of the main bundle.
+
+```tsx
+import { Render } from "@measured/puck/rsc";
+import "@measured/puck/dist/index.css";
+
+export function Page() {
+  return <Render config={config} data={data} />;
+}
+```
+
+If you're using DropZones with React server components, use the `puck.renderDropZone` prop provided to your render function instead of the `<DropZone>` component.
+
+```tsx
+export const MyComponent: ComponentConfig = {
+  render: ({ puck: { renderDropZone } }) => {
+    return (
+      <div>
+        {renderDropZone({ zone: "first-drop-zone" })}
+        {renderDropZone({ zone: "second-drop-zone" })}
+      </div>
+    );
+  },
+};
+```
+
+In future, we may deprecate DropZone in favour of renderDropZone.
+
 ## Reference
 
 ### `<Puck>`

package/dist/Config-60a50493.d.ts

@@ -0,0 +1,195 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ItemSelector = {
+    index: number;
+    zone?: string;
+};
+
+type DropZoneProps = {
+    zone: string;
+    style?: CSSProperties;
+};
+declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
+
+type WithPuckProps<Props> = Props & {
+    id: string;
+};
+type BaseField = {
+    label?: string;
+};
+type TextField = BaseField & {
+    type: "text" | "number" | "textarea";
+};
+type SelectField = BaseField & {
+    type: "select" | "radio";
+    options: {
+        label: string;
+        value: string | number | boolean;
+    }[];
+};
+type ArrayField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "array";
+    arrayFields: {
+        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
+    };
+    defaultItemProps?: Props[0];
+    getItemSummary?: (item: Props[0], index?: number) => string;
+};
+type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
+    name: string;
+    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
+    mapProp?: (value: TableShape) => PropShape;
+};
+type ExternalFieldWithAdaptor<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "external";
+    placeholder?: string;
+    adaptor: Adaptor<any, any, Props>;
+    adaptorParams?: object;
+    getItemSummary: (item: Props, index?: number) => string;
+};
+type ExternalField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "external";
+    placeholder?: string;
+    fetchList: () => Promise<any[] | null>;
+    mapProp?: (value: any) => Props;
+    getItemSummary: (item: Props, index?: number) => string;
+};
+type CustomField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "custom";
+    render: (props: {
+        field: CustomField;
+        name: string;
+        value: any;
+        onChange: (value: Props) => void;
+        readOnly?: boolean;
+    }) => ReactElement;
+};
+type Field<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
+type DefaultRootProps = {
+    title?: string;
+    [key: string]: any;
+};
+type DefaultComponentProps = {
+    [key: string]: any;
+    editMode?: boolean;
+};
+type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
+    [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName]>;
+};
+type Content<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = ComponentData<Props>[];
+type PuckComponent<Props extends DefaultComponentProps = DefaultComponentProps> = (props: WithPuckProps<Props & {
+    puck: PuckContext;
+}>) => JSX.Element;
+type PuckContext = {
+    renderDropZone: typeof DropZone;
+};
+type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = ComponentData<ComponentProps>> = {
+    render: PuckComponent<ComponentProps>;
+    defaultProps?: DefaultProps;
+    fields?: Fields<ComponentProps>;
+    resolveData?: (data: DataShape, params: {
+        changed: Partial<Record<keyof ComponentProps, boolean>>;
+    }) => Promise<Partial<ComponentDataWithOptionalProps<ComponentProps>>> | Partial<ComponentDataWithOptionalProps<ComponentProps>>;
+};
+type Category<ComponentName> = {
+    components?: ComponentName[];
+    title?: string;
+    visible?: boolean;
+    defaultExpanded?: boolean;
+};
+type Config<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = string> = {
+    categories?: Record<CategoryName, Category<keyof Props>> & {
+        other?: Category<Props>;
+    };
+    components: {
+        [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
+    };
+    root?: Partial<ComponentConfig<RootProps & {
+        children: ReactNode;
+    }, Partial<RootProps & {
+        children: ReactNode;
+    }>, RootDataWithProps<RootProps>>>;
+};
+type BaseData<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = {
+    readOnly?: Partial<Record<keyof Props, boolean>>;
+};
+type ComponentData<Props extends DefaultComponentProps = DefaultComponentProps> = {
+    type: keyof Props;
+    props: WithPuckProps<Props>;
+} & BaseData<Props>;
+type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
+    props: Props;
+};
+type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
+type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
+type ComponentDataWithOptionalProps<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = Omit<ComponentData, "props"> & {
+    props: Partial<WithPuckProps<Props>>;
+};
+type MappedItem = ComponentData;
+type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
+    root: RootData<RootProps>;
+    content: Content<WithPuckProps<Props>>;
+    zones?: Record<string, Content<WithPuckProps<Props>>>;
+};
+type ItemWithId = {
+    _arrayId: string;
+    data: any;
+};
+type ArrayState = {
+    items: ItemWithId[];
+    openId: string;
+};
+type UiState = {
+    leftSideBarVisible: boolean;
+    itemSelector: ItemSelector | null;
+    arrayState: Record<string, ArrayState | undefined>;
+    componentList: Record<string, {
+        components?: string[];
+        title?: string;
+        visible?: boolean;
+        expanded?: boolean;
+    }>;
+};
+type AppState = {
+    data: Data;
+    ui: UiState;
+};
+
+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, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultRootProps as a, RootData as b, ArrayField as c, Adaptor as d, ExternalField as e, CustomField as f, DefaultComponentProps as g, Fields as h, Content as i, PuckContext as j, ComponentConfig as k, BaseData as l, ComponentData as m, RootDataWithoutProps as n, ItemWithId as o, ArrayState as p, DropZone as q };

package/dist/index.d.ts

@@ -1,203 +1,9 @@
-import * as react from 'react';
-import { ReactElement, ReactNode, CSSProperties } from 'react';
+import { U as UiState, D as Data, A as AppState, C as Config, I as ItemSelector, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-60a50493.js';
+export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-60a50493.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DragStart, DragUpdate } from 'react-beautiful-dnd';
-
-type ItemSelector = {
-    index: number;
-    zone?: string;
-};
-
-type WithPuckProps<Props> = Props & {
-    id: string;
-};
-type BaseField = {
-    label?: string;
-};
-type TextField = BaseField & {
-    type: "text" | "number" | "textarea";
-};
-type SelectField = BaseField & {
-    type: "select" | "radio";
-    options: {
-        label: string;
-        value: string | number | boolean;
-    }[];
-};
-type ArrayField<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "array";
-    arrayFields: {
-        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
-    };
-    defaultItemProps?: Props[0];
-    getItemSummary?: (item: Props[0], index?: number) => string;
-};
-type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
-    name: string;
-    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
-    mapProp?: (value: TableShape) => PropShape;
-};
-type ExternalFieldWithAdaptor<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "external";
-    placeholder?: string;
-    adaptor: Adaptor<any, any, Props>;
-    adaptorParams?: object;
-    getItemSummary: (item: Props, index?: number) => string;
-};
-type ExternalField<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "external";
-    placeholder?: string;
-    fetchList: () => Promise<any[] | null>;
-    mapProp?: (value: any) => Props;
-    getItemSummary: (item: Props, index?: number) => string;
-};
-type CustomField<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "custom";
-    render: (props: {
-        field: CustomField;
-        name: string;
-        value: any;
-        onChange: (value: Props) => void;
-        readOnly?: boolean;
-    }) => ReactElement;
-};
-type Field<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
-type DefaultRootProps = {
-    title?: string;
-    [key: string]: any;
-};
-type DefaultRootRenderProps = {
-    editMode: boolean;
-} & DefaultRootProps;
-type DefaultComponentProps = {
-    [key: string]: any;
-    editMode?: boolean;
-};
-type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
-    [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName]>;
-};
-type Content<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = ComponentData<Props>[];
-type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = ComponentData<ComponentProps>> = {
-    render: (props: WithPuckProps<ComponentProps>) => ReactElement;
-    defaultProps?: DefaultProps;
-    fields?: Fields<ComponentProps>;
-    resolveData?: (data: DataShape, params: {
-        changed: Partial<Record<keyof ComponentProps, boolean>>;
-    }) => Promise<Partial<ComponentDataWithOptionalProps<ComponentProps>>> | Partial<ComponentDataWithOptionalProps<ComponentProps>>;
-};
-type Category<ComponentName> = {
-    components?: ComponentName[];
-    title?: string;
-    visible?: boolean;
-    defaultExpanded?: boolean;
-};
-type Config<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = string> = {
-    categories?: Record<CategoryName, Category<keyof Props>> & {
-        other?: Category<Props>;
-    };
-    components: {
-        [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
-    };
-    root?: Partial<ComponentConfig<RootProps & {
-        children: ReactNode;
-    }, Partial<RootProps & {
-        children: ReactNode;
-    }>, RootDataWithProps<RootProps>>>;
-};
-type BaseData<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = {
-    readOnly?: Partial<Record<keyof Props, boolean>>;
-};
-type ComponentData<Props extends DefaultComponentProps = DefaultComponentProps> = {
-    type: keyof Props;
-    props: WithPuckProps<Props>;
-} & BaseData<Props>;
-type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
-    props: Props;
-};
-type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
-type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
-type ComponentDataWithOptionalProps<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = Omit<ComponentData, "props"> & {
-    props: Partial<WithPuckProps<Props>>;
-};
-type MappedItem = ComponentData;
-type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
-    root: RootData<RootProps>;
-    content: Content<WithPuckProps<Props>>;
-    zones?: Record<string, Content<WithPuckProps<Props>>>;
-};
-type ItemWithId = {
-    _arrayId: string;
-    data: any;
-};
-type ArrayState = {
-    items: ItemWithId[];
-    openId: string;
-};
-type UiState = {
-    leftSideBarVisible: boolean;
-    itemSelector: ItemSelector | null;
-    arrayState: Record<string, ArrayState | undefined>;
-    componentList: Record<string, {
-        components?: string[];
-        title?: string;
-        visible?: boolean;
-        expanded?: boolean;
-    }>;
-};
-type AppState = {
-    data: Data;
-    ui: UiState;
-};
-
-declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
-    children: ReactNode;
-    href?: string | undefined;
-    onClick?: ((e: any) => void | Promise<void>) | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
-    disabled?: boolean | undefined;
-    tabIndex?: number | undefined;
-    newTab?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    icon?: ReactNode;
-    size?: "medium" | "large" | undefined;
-}) => react_jsx_runtime.JSX.Element;
+import * as react from 'react';
+import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { DragStart, DragUpdate } from '@hello-pangea/dnd';
 
 type InsertAction = {
     type: "insert";
@@ -293,18 +99,26 @@ declare const DropZoneProvider: ({ children, value, }: {
     value: DropZoneContext;
 }) => react_jsx_runtime.JSX.Element;
 
-type DropZoneProps = {
-    zone: string;
-    style?: CSSProperties;
-};
-declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
+declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
+    children: ReactNode;
+    href?: string | undefined;
+    onClick?: ((e: any) => void | Promise<void>) | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    disabled?: boolean | undefined;
+    tabIndex?: number | undefined;
+    newTab?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    icon?: ReactNode;
+    size?: "medium" | "large" | undefined;
+}) => react_jsx_runtime.JSX.Element;
 
 declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
     children: ReactNode;
     href?: string | undefined;
     onClick?: ((e: any) => void | Promise<void>) | undefined;
     variant?: "primary" | "secondary" | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
     disabled?: boolean | undefined;
     tabIndex?: number | undefined;
     newTab?: boolean | undefined;
@@ -369,9 +183,9 @@ declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }:
     children?: ReactNode;
     icon?: ReactNode;
     label: string;
-    el?: "div" | "label" | undefined;
+    el?: "label" | "div" | undefined;
     readOnly?: boolean | undefined;
     className?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppState, ArrayField, ArrayState, BaseData, BaseField, Button, ComponentConfig, ComponentData, Config, Content, CustomField, Data, DefaultComponentProps, DefaultRootProps, DefaultRootRenderProps, DropZone, DropZoneProvider, ExternalField, ExternalFieldWithAdaptor, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, RootData, RootDataWithProps, RootDataWithoutProps, SelectField, TextField, UiState, dropZoneContext, resolveAllData };
+export { AppState, Button, Config, Data, DefaultRootProps, DropZoneProvider, FieldLabel, IconButton, MappedItem, Puck, Render, RootData, RootDataWithProps, UiState, dropZoneContext, resolveAllData };