@webiny/app-website-builder 0.0.0-unstable.06b2ede40f

package/ecommerce/components/ResourcesPicker.js

@@ -0,0 +1,193 @@
+import React, { useEffect } from "react";
+import { runInAction, action } from "mobx";
+import { observer, useLocalObservable } from "mobx-react-lite";
+import pluralize from "pluralize";
+import throttle from "lodash/throttle";
+import { useDialogs } from "@webiny/app-admin";
+import { Avatar, Button, Loader, List, Input, Text, DelayedOnChange, useToast } from "@webiny/admin-ui";
+export const ResourcePreviewCell = observer(props => {
+  return /*#__PURE__*/React.createElement(List.Item, {
+    onClick: props.onClick,
+    title: props.resource.title !== "untitled" ? /*#__PURE__*/React.createElement("div", null, props.resource.title, " - ", props.resource.id) : props.resource.title,
+    className: props.className,
+    selected: props.selected,
+    icon: props.resource.image ? /*#__PURE__*/React.createElement(Avatar, {
+      variant: "subtle",
+      image: /*#__PURE__*/React.createElement(Avatar.Image, {
+        src: props.resource.image.src,
+        alt: props.resource.title
+      })
+    }) : undefined,
+    actions: props.actions ?? /*#__PURE__*/React.createElement(React.Fragment, null)
+  });
+});
+export const ResourcePicker = observer(props => {
+  const {
+    showToast
+  } = useToast();
+  const store = useLocalObservable(() => ({
+    searchInputText: "",
+    loading: false,
+    resources: [],
+    search: throttle(async () => {
+      runInAction(() => {
+        store.loading = true;
+      });
+      const catchError = err => {
+        console.error("search error:", err);
+        showToast({
+          title: `Failed to load ${props.resourceName}s!`,
+          description: `We were unable to get ${props.resourceName}s from the remote API.`
+        });
+      };
+      const resourcesResponse = await props.api[props.resourceName].search(store.searchInputText).catch(catchError);
+      runInAction(() => {
+        if (Array.isArray(resourcesResponse)) {
+          store.resources = resourcesResponse;
+        }
+        store.loading = false;
+      });
+    }, 400)
+  }));
+  useEffect(() => {
+    store.search();
+  }, [store.searchInputText]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      overflow: "scroll"
+    }
+  }, /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: store.searchInputText,
+    onChange: action(value => store.searchInputText = value)
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: props.title || `Search ${pluralize.plural(props.resourceName)}...`
+  })), store.loading && /*#__PURE__*/React.createElement(Loader, {
+    style: {
+      margin: "50px auto"
+    }
+  }), /*#__PURE__*/React.createElement("div", null, !store.loading && (store.resources.length ? store.resources.map(item => /*#__PURE__*/React.createElement(List, {
+    key: item.id,
+    onClick: () => {
+      props.onChange(item);
+    }
+  }, /*#__PURE__*/React.createElement(ResourcePreviewCell, {
+    selected: String(item.id) === String(props.value?.id),
+    resource: item,
+    key: item.id
+  }))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: "40px 20px",
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md"
+  }, "No ", pluralize.plural(props.resourceName), " found.")))));
+});
+export const ResourcesPickerButton = observer(props => {
+  const {
+    showToast
+  } = useToast();
+  const dialog = useDialogs();
+  const store = useLocalObservable(() => ({
+    loading: false,
+    error: null,
+    resourceInfo: null,
+    resourceId: props.value,
+    updateResourceId(newProps) {
+      this.resourceId = newProps.value;
+    },
+    async getResource() {
+      runInAction(() => {
+        this.error = null;
+        this.loading = true;
+      });
+      try {
+        const resourceService = props.api[props.resourceName];
+        const value = this.resourceId && (await resourceService.findById(this.resourceId));
+        runInAction(() => {
+          this.resourceInfo = value || null;
+        });
+      } catch (e) {
+        console.error(e);
+        runInAction(() => {
+          this.error = e;
+        });
+        showToast({
+          title: `Failed to load ${props.resourceName}!`,
+          description: `We were unable to get ${props.resourceName} from the remote API.`
+        });
+      }
+      runInAction(() => {
+        this.loading = false;
+      });
+    },
+    async showPickResourceModal(title) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {
+        value,
+        resourcePicker,
+        ...rest
+      } = props;
+      const PickerComponent = resourcePicker || ResourcePicker;
+      const closeDialog = dialog.showDialog({
+        title: `Select a ${props.resourceName}`,
+        acceptLabel: null,
+        cancelLabel: null,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "wby-h-[500px] wby-overflow-scroll"
+        }, /*#__PURE__*/React.createElement(PickerComponent, Object.assign({}, rest, {
+          resourceName: props.resourceName
+        }, this.resourceInfo && {
+          value: this.resourceInfo
+        }, {
+          title: title,
+          onChange: action(value => {
+            if (value) {
+              this.resourceId = String(value.id);
+              this.getResource();
+              props.onChange(props.api[props.resourceName].getRequestObject(this.resourceId, value));
+              closeDialog();
+            }
+          })
+        })))
+      });
+    }
+  }));
+  useEffect(() => {
+    store.updateResourceId(props);
+    store.getResource();
+  }, [props.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      padding: "10px 0"
+    }
+  }, store.loading && /*#__PURE__*/React.createElement(Loader, {
+    size: "md",
+    style: {
+      margin: "30px auto"
+    }
+  }), store.resourceInfo && !store.loading && /*#__PURE__*/React.createElement("div", {
+    className: "wby-relative"
+  }, /*#__PURE__*/React.createElement(ResourcePreviewCell, {
+    style: {
+      paddingRight: "30px"
+    },
+    resource: store.resourceInfo,
+    onClick: () => {
+      store.showPickResourceModal();
+    }
+  })), !store.resourceInfo && !store.loading && /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "secondary",
+    onClick: () => {
+      store.showPickResourceModal();
+    },
+    text: `Choose ${props.resourceName}`
+  }));
+});
+
+//# sourceMappingURL=ResourcesPicker.js.map

package/ecommerce/components/ResourcesPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","runInAction","action","observer","useLocalObservable","pluralize","throttle","useDialogs","Avatar","Button","Loader","List","Input","Text","DelayedOnChange","useToast","ResourcePreviewCell","props","createElement","Item","onClick","title","resource","id","className","selected","icon","image","variant","Image","src","alt","undefined","actions","Fragment","ResourcePicker","showToast","store","searchInputText","loading","resources","search","catchError","err","console","error","resourceName","description","resourcesResponse","api","catch","Array","isArray","style","display","flexDirection","overflow","value","onChange","placeholder","plural","margin","length","map","item","key","String","textAlign","size","ResourcesPickerButton","dialog","resourceInfo","resourceId","updateResourceId","newProps","getResource","resourceService","findById","e","showPickResourceModal","resourcePicker","rest","PickerComponent","closeDialog","showDialog","acceptLabel","cancelLabel","content","Object","assign","getRequestObject","padding","paddingRight","color","text"],"sources":["ResourcesPicker.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { runInAction, action } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport pluralize from \"pluralize\";\nimport throttle from \"lodash/throttle\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport {\n    Avatar,\n    Button,\n    Loader,\n    List,\n    Input,\n    Text,\n    DelayedOnChange,\n    useToast\n} from \"@webiny/admin-ui\";\nimport type { Resource } from \"../types\";\nimport type { CustomResourcePickerProps } from \"~/ecommerce\";\n\nexport interface CommerceAPIOperations {\n    [resourceName: string]: {\n        resourcePicker?: React.FC<ResourcePickerProps>;\n        findById(id: string): Promise<Resource>;\n        findByHandle?(handle: string): Promise<Resource>;\n        search(search: string, offset?: number, limit?: number): Promise<Resource[]>;\n        getRequestObject(id: string, resource?: Resource): string;\n    };\n}\n\nexport interface ResourcesPickerButtonProps extends CustomResourcePickerProps<string> {\n    api: CommerceAPIOperations;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    pluginName: string;\n    resourceName: string;\n}\n\nexport interface ResourcePreviewCellProps {\n    resource: Resource;\n    actions?: React.ReactNode;\n    selected?: boolean;\n    className?: string;\n    onClick?: () => void;\n    style?: Partial<CSSStyleDeclaration>;\n}\n\nexport const ResourcePreviewCell = observer((props: ResourcePreviewCellProps) => {\n    return (\n        <List.Item\n            onClick={props.onClick}\n            title={\n                props.resource.title !== \"untitled\" ? (\n                    <div>\n                        {props.resource.title} - {props.resource.id}\n                    </div>\n                ) : (\n                    props.resource.title\n                )\n            }\n            className={props.className}\n            selected={props.selected}\n            icon={\n                props.resource.image ? (\n                    <Avatar\n                        variant={\"subtle\"}\n                        image={\n                            <Avatar.Image\n                                src={props.resource.image.src}\n                                alt={props.resource.title}\n                            />\n                        }\n                    />\n                ) : undefined\n            }\n            actions={props.actions ?? <></>}\n        />\n    );\n});\n\nexport type ResourcePickerProps = CustomResourcePickerProps<Resource> & {\n    api: CommerceAPIOperations;\n    resourceName: string;\n    omitIds?: string[];\n    title?: string;\n};\n\nexport const ResourcePicker = observer((props: ResourcePickerProps) => {\n    const { showToast } = useToast();\n\n    const store = useLocalObservable(() => ({\n        searchInputText: \"\",\n        loading: false,\n        resources: [] as Resource[],\n        search: throttle(async () => {\n            runInAction(() => {\n                store.loading = true;\n            });\n            const catchError = (err: any) => {\n                console.error(\"search error:\", err);\n                showToast({\n                    title: `Failed to load ${props.resourceName}s!`,\n                    description: `We were unable to get ${props.resourceName}s from the remote API.`\n                });\n            };\n\n            const resourcesResponse = await props.api[props.resourceName]\n                .search(store.searchInputText)\n                .catch(catchError);\n\n            runInAction(() => {\n                if (Array.isArray(resourcesResponse)) {\n                    store.resources = resourcesResponse;\n                }\n                store.loading = false;\n            });\n        }, 400)\n    }));\n\n    useEffect(() => {\n        store.search();\n    }, [store.searchInputText]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", overflow: \"scroll\" }}>\n            <DelayedOnChange<string>\n                value={store.searchInputText}\n                onChange={action(value => (store.searchInputText = value))}\n            >\n                <Input\n                    placeholder={props.title || `Search ${pluralize.plural(props.resourceName)}...`}\n                />\n            </DelayedOnChange>\n            {store.loading && <Loader style={{ margin: \"50px auto\" }} />}\n            <div>\n                {!store.loading &&\n                    (store.resources.length ? (\n                        store.resources.map(item => (\n                            <List\n                                key={item.id}\n                                onClick={() => {\n                                    props.onChange(item);\n                                }}\n                            >\n                                <ResourcePreviewCell\n                                    selected={String(item.id) === String(props.value?.id)}\n                                    resource={item}\n                                    key={item.id}\n                                />\n                            </List>\n                        ))\n                    ) : (\n                        <div style={{ margin: \"40px 20px\", textAlign: \"center\" }}>\n                            <Text size={\"md\"}>\n                                No {pluralize.plural(props.resourceName)} found.\n                            </Text>\n                        </div>\n                    ))}\n            </div>\n        </div>\n    );\n});\n\nexport const ResourcesPickerButton: React.FC<ResourcesPickerButtonProps> = observer(props => {\n    const { showToast } = useToast();\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        loading: false,\n        error: null,\n        resourceInfo: null as Resource | null,\n        resourceId: props.value,\n        updateResourceId(newProps: ResourcesPickerButtonProps) {\n            this.resourceId = newProps.value;\n        },\n        async getResource() {\n            runInAction(() => {\n                this.error = null;\n                this.loading = true;\n            });\n\n            try {\n                const resourceService = props.api[props.resourceName];\n                const value = this.resourceId && (await resourceService.findById(this.resourceId));\n                runInAction(() => {\n                    this.resourceInfo = value || null;\n                });\n            } catch (e) {\n                console.error(e);\n                runInAction(() => {\n                    this.error = e as any;\n                });\n                showToast({\n                    title: `Failed to load ${props.resourceName}!`,\n                    description: `We were unable to get ${props.resourceName} from the remote API.`\n                });\n            }\n            runInAction(() => {\n                this.loading = false;\n            });\n        },\n        async showPickResourceModal(title?: string) {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const { value, resourcePicker, ...rest } = props;\n            const PickerComponent = resourcePicker || ResourcePicker;\n\n            const closeDialog = dialog.showDialog({\n                title: `Select a ${props.resourceName}`,\n                acceptLabel: null,\n                cancelLabel: null,\n                content: (\n                    <div className={\"wby-h-[500px] wby-overflow-scroll\"}>\n                        <PickerComponent\n                            {...rest}\n                            resourceName={props.resourceName}\n                            {...(this.resourceInfo && { value: this.resourceInfo })}\n                            title={title}\n                            onChange={action(value => {\n                                if (value) {\n                                    this.resourceId = String(value.id);\n                                    this.getResource();\n                                    props.onChange(\n                                        props.api[props.resourceName].getRequestObject(\n                                            this.resourceId,\n                                            value\n                                        )\n                                    );\n                                    closeDialog();\n                                }\n                            })}\n                        />\n                    </div>\n                )\n            });\n        }\n    }));\n\n    useEffect(() => {\n        store.updateResourceId(props);\n        store.getResource();\n    }, [props.value]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", padding: \"10px 0\" }}>\n            {store.loading && <Loader size={\"md\"} style={{ margin: \"30px auto\" }} />}\n            {store.resourceInfo && !store.loading && (\n                <div className={\"wby-relative\"}>\n                    <ResourcePreviewCell\n                        style={{ paddingRight: \"30px\" }}\n                        resource={store.resourceInfo}\n                        onClick={() => {\n                            store.showPickResourceModal();\n                        }}\n                    />\n                </div>\n            )}\n            {!store.resourceInfo && !store.loading && (\n                <Button\n                    color=\"primary\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                        store.showPickResourceModal();\n                    }}\n                    text={`Choose ${props.resourceName}`}\n                />\n            )}\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/ecommerce/components/adaptInputToBind.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { BindComponentRenderProp } from "@webiny/form";
+import type { ElementInputRendererProps } from "../../BaseEditor";
+export declare const adaptInputToBind: (Component: React.ComponentType<ElementInputRendererProps>) => (props: BindComponentRenderProp & {
+    label: string;
+}) => React.JSX.Element;

package/ecommerce/components/adaptInputToBind.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { NullMetadata } from "../../BaseEditor/metadata";
+import { InputValueObject } from "../../BaseEditor/hooks/useInputValue";
+const metadata = new NullMetadata();
+const noop = () => void 0;
+export const adaptInputToBind = Component => {
+  return function ElementInputAsFormInput(props) {
+    const onChange = cb => {
+      const value = new InputValueObject(props.value);
+      cb({
+        value,
+        metadata
+      });
+      props.onChange(value.get());
+    };
+    return /*#__PURE__*/React.createElement(Component, {
+      label: props.label,
+      value: props.value,
+      onChange: onChange,
+      metadata: metadata,
+      onPreviewChange: noop,
+      input: {}
+    });
+  };
+};
+
+//# sourceMappingURL=adaptInputToBind.js.map

package/ecommerce/components/adaptInputToBind.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","NullMetadata","InputValueObject","metadata","noop","adaptInputToBind","Component","ElementInputAsFormInput","props","onChange","cb","value","get","createElement","label","onPreviewChange","input"],"sources":["adaptInputToBind.tsx"],"sourcesContent":["import React from \"react\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\nimport { NullMetadata } from \"~/BaseEditor/metadata\";\nimport { InputValueObject } from \"~/BaseEditor/hooks/useInputValue\";\n\nconst metadata = new NullMetadata();\nconst noop = () => void 0;\n\nexport const adaptInputToBind = (Component: React.ComponentType<ElementInputRendererProps>) => {\n    return function ElementInputAsFormInput(props: BindComponentRenderProp & { label: string }) {\n        const onChange: ElementInputRendererProps[\"onChange\"] = cb => {\n            const value = new InputValueObject(props.value);\n            cb({ value, metadata });\n            props.onChange(value.get());\n        };\n\n        return (\n            <Component\n                label={props.label}\n                value={props.value}\n                onChange={onChange}\n                metadata={metadata}\n                onPreviewChange={noop}\n                input={{} as any}\n            />\n        );\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,YAAY;AACrB,SAASC,gBAAgB;AAEzB,MAAMC,QAAQ,GAAG,IAAIF,YAAY,CAAC,CAAC;AACnC,MAAMG,IAAI,GAAGA,CAAA,KAAM,KAAK,CAAC;AAEzB,OAAO,MAAMC,gBAAgB,GAAIC,SAAyD,IAAK;EAC3F,OAAO,SAASC,uBAAuBA,CAACC,KAAkD,EAAE;IACxF,MAAMC,QAA+C,GAAGC,EAAE,IAAI;MAC1D,MAAMC,KAAK,GAAG,IAAIT,gBAAgB,CAACM,KAAK,CAACG,KAAK,CAAC;MAC/CD,EAAE,CAAC;QAAEC,KAAK;QAAER;MAAS,CAAC,CAAC;MACvBK,KAAK,CAACC,QAAQ,CAACE,KAAK,CAACC,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,oBACIZ,KAAA,CAAAa,aAAA,CAACP,SAAS;MACNQ,KAAK,EAAEN,KAAK,CAACM,KAAM;MACnBH,KAAK,EAAEH,KAAK,CAACG,KAAM;MACnBF,QAAQ,EAAEA,QAAS;MACnBN,QAAQ,EAAEA,QAAS;MACnBY,eAAe,EAAEX,IAAK;MACtBY,KAAK,EAAE,CAAC;IAAS,CACpB,CAAC;EAEV,CAAC;AACL,CAAC","ignoreList":[]}

package/ecommerce/components/toTitleCaseLabel.d.ts

@@ -0,0 +1 @@
+export declare function toTitleCaseLabel(input: string): string;

package/ecommerce/components/toTitleCaseLabel.js

@@ -0,0 +1,9 @@
+export function toTitleCaseLabel(input) {
+  // Convert camelCase to spaced: "originalSize" → "original Size"
+  const spaced = input.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  // Split by space, capitalize each word
+  return spaced.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+//# sourceMappingURL=toTitleCaseLabel.js.map

package/ecommerce/components/toTitleCaseLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toTitleCaseLabel","input","spaced","replace","split","map","word","charAt","toUpperCase","slice","join"],"sources":["toTitleCaseLabel.ts"],"sourcesContent":["export function toTitleCaseLabel(input: string): string {\n    // Convert camelCase to spaced: \"originalSize\" → \"original Size\"\n    const spaced = input.replace(/([a-z])([A-Z])/g, \"$1 $2\");\n\n    // Split by space, capitalize each word\n    return spaced\n        .split(\" \")\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(\" \");\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAgBA,CAACC,KAAa,EAAU;EACpD;EACA,MAAMC,MAAM,GAAGD,KAAK,CAACE,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;;EAExD;EACA,OAAOD,MAAM,CACRE,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAACC,IAAI,IAAIA,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,GAAGF,IAAI,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC,CACzDC,IAAI,CAAC,GAAG,CAAC;AAClB","ignoreList":[]}

package/ecommerce/createResourceListPicker.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Editor } from "../index";
+import type { IEcommerceApi } from "./types";
+export declare const createResourceListPicker: (pluginName: string, api: IEcommerceApi, resourceName: string) => {
+    (props: Editor.ElementInputRendererProps): React.JSX.Element;
+    displayName: string;
+};

package/ecommerce/createResourceListPicker.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { FormComponentLabel } from "@webiny/admin-ui";
+import { PickResourcesListButton } from "./components/ResourcesList";
+export const createResourceListPicker = (pluginName, api, resourceName) => {
+  const ListResourcePicker = props => {
+    const onChange = newValue => {
+      props.onChange(({
+        value
+      }) => {
+        value.set(newValue);
+      });
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+      text: props.label
+    }), /*#__PURE__*/React.createElement(PickResourcesListButton, {
+      api: api,
+      resourceName: resourceName,
+      pluginName: pluginName,
+      value: props.value,
+      onChange: onChange
+    }));
+  };
+  ListResourcePicker.displayName = `${pluginName}${resourceName}List`;
+  return ListResourcePicker;
+};
+
+//# sourceMappingURL=createResourceListPicker.js.map

package/ecommerce/createResourceListPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentLabel","PickResourcesListButton","createResourceListPicker","pluginName","api","resourceName","ListResourcePicker","props","onChange","newValue","value","set","createElement","className","text","label","displayName"],"sources":["createResourceListPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport type { Editor } from \"~/index\";\nimport type { IEcommerceApi } from \"./types\";\nimport { PickResourcesListButton } from \"./components/ResourcesList\";\n\nexport const createResourceListPicker = (\n    pluginName: string,\n    api: IEcommerceApi,\n    resourceName: string\n) => {\n    const ListResourcePicker = (props: Editor.ElementInputRendererProps) => {\n        const onChange = (newValue: unknown) => {\n            props.onChange(({ value }) => {\n                value.set(newValue);\n            });\n        };\n\n        return (\n            <div className={\"wby-w-full\"}>\n                <FormComponentLabel text={props.label} />\n                <PickResourcesListButton\n                    api={api}\n                    resourceName={resourceName}\n                    pluginName={pluginName}\n                    value={props.value}\n                    onChange={onChange}\n                />\n            </div>\n        );\n    };\n\n    ListResourcePicker.displayName = `${pluginName}${resourceName}List`;\n\n    return ListResourcePicker;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD,SAASC,uBAAuB;AAEhC,OAAO,MAAMC,wBAAwB,GAAGA,CACpCC,UAAkB,EAClBC,GAAkB,EAClBC,YAAoB,KACnB;EACD,MAAMC,kBAAkB,GAAIC,KAAuC,IAAK;IACpE,MAAMC,QAAQ,GAAIC,QAAiB,IAAK;MACpCF,KAAK,CAACC,QAAQ,CAAC,CAAC;QAAEE;MAAM,CAAC,KAAK;QAC1BA,KAAK,CAACC,GAAG,CAACF,QAAQ,CAAC;MACvB,CAAC,CAAC;IACN,CAAC;IAED,oBACIV,KAAA,CAAAa,aAAA;MAAKC,SAAS,EAAE;IAAa,gBACzBd,KAAA,CAAAa,aAAA,CAACZ,kBAAkB;MAACc,IAAI,EAAEP,KAAK,CAACQ;IAAM,CAAE,CAAC,eACzChB,KAAA,CAAAa,aAAA,CAACX,uBAAuB;MACpBG,GAAG,EAAEA,GAAI;MACTC,YAAY,EAAEA,YAAa;MAC3BF,UAAU,EAAEA,UAAW;MACvBO,KAAK,EAAEH,KAAK,CAACG,KAAM;MACnBF,QAAQ,EAAEA;IAAS,CACtB,CACA,CAAC;EAEd,CAAC;EAEDF,kBAAkB,CAACU,WAAW,GAAG,GAAGb,UAAU,GAAGE,YAAY,MAAM;EAEnE,OAAOC,kBAAkB;AAC7B,CAAC","ignoreList":[]}

package/ecommerce/createResourcePicker.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Editor } from "../index";
+import type { IEcommerceApi } from "./types";
+export declare const createResourcePicker: (pluginName: string, api: IEcommerceApi, resourceName: string) => {
+    (props: Editor.ElementInputRendererProps): React.JSX.Element;
+    displayName: string;
+};

package/ecommerce/createResourcePicker.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { FormComponentLabel } from "@webiny/admin-ui";
+import { ResourcesPickerButton } from "./components/ResourcesPicker";
+export const createResourcePicker = (pluginName, api, resourceName) => {
+  const SingleResourcePicker = props => {
+    const onChange = newValue => {
+      props.onChange(({
+        value
+      }) => {
+        value.set(newValue);
+      });
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+      text: props.label
+    }), /*#__PURE__*/React.createElement(ResourcesPickerButton, {
+      api: api,
+      resourceName: resourceName,
+      pluginName: pluginName,
+      value: props.value,
+      onChange: onChange
+    }));
+  };
+  SingleResourcePicker.displayName = `${pluginName}${resourceName}`;
+  return SingleResourcePicker;
+};
+
+//# sourceMappingURL=createResourcePicker.js.map

package/ecommerce/createResourcePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentLabel","ResourcesPickerButton","createResourcePicker","pluginName","api","resourceName","SingleResourcePicker","props","onChange","newValue","value","set","createElement","className","text","label","displayName"],"sources":["createResourcePicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport type { Editor } from \"~/index\";\nimport type { IEcommerceApi } from \"./types\";\nimport { ResourcesPickerButton } from \"./components/ResourcesPicker\";\n\nexport const createResourcePicker = (\n    pluginName: string,\n    api: IEcommerceApi,\n    resourceName: string\n) => {\n    const SingleResourcePicker = (props: Editor.ElementInputRendererProps) => {\n        const onChange = (newValue: unknown) => {\n            props.onChange(({ value }) => {\n                value.set(newValue);\n            });\n        };\n        return (\n            <div className={\"wby-w-full\"}>\n                <FormComponentLabel text={props.label} />\n                <ResourcesPickerButton\n                    api={api}\n                    resourceName={resourceName}\n                    pluginName={pluginName}\n                    value={props.value}\n                    onChange={onChange}\n                />\n            </div>\n        );\n    };\n\n    SingleResourcePicker.displayName = `${pluginName}${resourceName}`;\n\n    return SingleResourcePicker;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD,SAASC,qBAAqB;AAE9B,OAAO,MAAMC,oBAAoB,GAAGA,CAChCC,UAAkB,EAClBC,GAAkB,EAClBC,YAAoB,KACnB;EACD,MAAMC,oBAAoB,GAAIC,KAAuC,IAAK;IACtE,MAAMC,QAAQ,GAAIC,QAAiB,IAAK;MACpCF,KAAK,CAACC,QAAQ,CAAC,CAAC;QAAEE;MAAM,CAAC,KAAK;QAC1BA,KAAK,CAACC,GAAG,CAACF,QAAQ,CAAC;MACvB,CAAC,CAAC;IACN,CAAC;IACD,oBACIV,KAAA,CAAAa,aAAA;MAAKC,SAAS,EAAE;IAAa,gBACzBd,KAAA,CAAAa,aAAA,CAACZ,kBAAkB;MAACc,IAAI,EAAEP,KAAK,CAACQ;IAAM,CAAE,CAAC,eACzChB,KAAA,CAAAa,aAAA,CAACX,qBAAqB;MAClBG,GAAG,EAAEA,GAAI;MACTC,YAAY,EAAEA,YAAa;MAC3BF,UAAU,EAAEA,UAAW;MACvBO,KAAK,EAAEH,KAAK,CAACG,KAAM;MACnBF,QAAQ,EAAEA;IAAS,CACtB,CACA,CAAC;EAEd,CAAC;EAEDF,oBAAoB,CAACU,WAAW,GAAG,GAAGb,UAAU,GAAGE,YAAY,EAAE;EAEjE,OAAOC,oBAAoB;AAC/B,CAAC","ignoreList":[]}

package/ecommerce/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./EcommercePlugin";
+export * from "./types";

package/ecommerce/index.js

@@ -0,0 +1,4 @@
+export * from "./EcommercePlugin";
+export * from "./types";
+
+//# sourceMappingURL=index.js.map

package/ecommerce/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./EcommercePlugin\";\nexport * from \"./types\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/ecommerce/types.d.ts

@@ -0,0 +1,52 @@
+export type Image = {
+    width?: number;
+    height?: number;
+    src: string;
+};
+export type Resource = {
+    id: string | number;
+    title: string;
+    handle?: string;
+    image?: Image;
+};
+export interface IEcommerceApi {
+    [resourceName: string]: {
+        findById(id: string): Promise<Resource>;
+        findByHandle?(handle: string): Promise<Resource>;
+        search(search: string, offset?: number, limit?: number): Promise<Resource[]>;
+        getRequestObject(id: string, resource?: Resource): string;
+    };
+}
+export interface IEcommerceApiFactory {
+    (settings: any): Promise<IEcommerceApi> | IEcommerceApi;
+}
+export type BaseInput<T = any> = {
+    type: string;
+    name: string;
+    defaultValue?: T;
+    label?: string;
+    description?: string;
+    note?: string;
+    required?: boolean;
+};
+export type TextInput = BaseInput<string> & {
+    type: "text";
+    placeholder?: string;
+};
+export type NumberInput = BaseInput<number> & {
+    type: "number";
+    min?: number;
+    max?: number;
+};
+export type BooleanInput = BaseInput<boolean> & {
+    type: "boolean";
+    required?: never;
+};
+export type SelectInput = BaseInput<string> & {
+    type: "select";
+    options: {
+        label: string;
+        value: string;
+    }[];
+};
+export type SettingsInput = TextInput | SelectInput | NumberInput | BooleanInput;

package/ecommerce/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/ecommerce/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type Image = {\n    width?: number;\n    height?: number;\n    src: string;\n};\n\nexport type Resource = {\n    id: string | number;\n    title: string;\n    handle?: string;\n    image?: Image;\n};\n\nexport interface IEcommerceApi {\n    [resourceName: string]: {\n        findById(id: string): Promise<Resource>;\n        findByHandle?(handle: string): Promise<Resource>;\n        search(search: string, offset?: number, limit?: number): Promise<Resource[]>;\n        getRequestObject(id: string, resource?: Resource): string;\n    };\n}\n\nexport interface IEcommerceApiFactory {\n    (settings: any): Promise<IEcommerceApi> | IEcommerceApi;\n}\n\nexport type BaseInput<T = any> = {\n    type: string;\n    name: string;\n    defaultValue?: T;\n    label?: string;\n    description?: string;\n    note?: string;\n    required?: boolean;\n};\n\nexport type TextInput = BaseInput<string> & {\n    type: \"text\";\n    placeholder?: string;\n};\n\nexport type NumberInput = BaseInput<number> & {\n    type: \"number\";\n    min?: number;\n    max?: number;\n};\n\nexport type BooleanInput = BaseInput<boolean> & {\n    type: \"boolean\";\n    required?: never;\n};\n\nexport type SelectInput = BaseInput<string> & {\n    type: \"select\";\n    options: { label: string; value: string }[];\n};\n\nexport type SettingsInput = TextInput | SelectInput | NumberInput | BooleanInput;\n"],"mappings":"","ignoreList":[]}

package/editorSdk/CommandBus.d.ts

@@ -0,0 +1,20 @@
+import type { Command } from "./createCommand.js";
+export * from "./createCommand.js";
+declare const INTERNAL_STOP: unique symbol;
+export type CommandHandler<T> = (payload: T, control: CommandHandlerControl) => void | typeof INTERNAL_STOP | Promise<void | typeof INTERNAL_STOP>;
+export type CommandHandlerControl = {
+    stop: () => typeof INTERNAL_STOP;
+};
+export declare enum CommandPriority {
+    LOW = -100,
+    NORMAL = 0,
+    HIGH = 100,
+    CRITICAL = 1000
+}
+export declare class CommandBus {
+    private handlers;
+    private middleware;
+    register<T>(command: Command<T>, handler: CommandHandler<T>, priority?: CommandPriority): () => void;
+    use(mw: (type: string, payload: any, next: (payload: any) => Promise<void>) => Promise<void>): void;
+    execute<T>(command: Command<T>, payload?: T): Promise<void>;
+}

package/editorSdk/CommandBus.js

@@ -0,0 +1,61 @@
+export * from "./createCommand.js";
+const INTERNAL_STOP = Symbol("INTERNAL_STOP");
+export let CommandPriority = /*#__PURE__*/function (CommandPriority) {
+  CommandPriority[CommandPriority["LOW"] = -100] = "LOW";
+  CommandPriority[CommandPriority["NORMAL"] = 0] = "NORMAL";
+  CommandPriority[CommandPriority["HIGH"] = 100] = "HIGH";
+  CommandPriority[CommandPriority["CRITICAL"] = 1000] = "CRITICAL";
+  return CommandPriority;
+}({});
+export class CommandBus {
+  handlers = new Map();
+  middleware = [];
+  register(command, handler, priority = CommandPriority.NORMAL) {
+    const list = this.handlers.get(command.type) ?? [];
+    const entry = {
+      handler,
+      priority
+    };
+    list.push(entry);
+    list.sort((a, b) => b.priority - a.priority);
+    this.handlers.set(command.type, list);
+
+    // Return an unregister function
+    return () => {
+      const current = this.handlers.get(command.type);
+      if (!current) {
+        return;
+      }
+      const index = current.indexOf(entry);
+      if (index !== -1) {
+        current.splice(index, 1);
+      }
+      if (current.length === 0) {
+        this.handlers.delete(command.type);
+      }
+    };
+  }
+  use(mw) {
+    this.middleware.push(mw);
+  }
+  async execute(command, payload) {
+    const list = this.handlers.get(command.type) ?? [];
+    const runHandlers = async p => {
+      const control = {
+        stop: () => INTERNAL_STOP
+      };
+      for (const entry of list) {
+        const result = await entry.handler(p, control);
+        if (result === INTERNAL_STOP) {
+          break;
+        }
+      }
+    };
+    const composed = this.middleware.reduceRight((next, mw) => async p => mw(command.type, p, next), runHandlers);
+
+    // console.log("[Execute Command]", command.type, payload);
+    await composed(payload);
+  }
+}
+
+//# sourceMappingURL=CommandBus.js.map

package/editorSdk/CommandBus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INTERNAL_STOP","Symbol","CommandPriority","CommandBus","handlers","Map","middleware","register","command","handler","priority","NORMAL","list","get","type","entry","push","sort","a","b","set","current","index","indexOf","splice","length","delete","use","mw","execute","payload","runHandlers","p","control","stop","result","composed","reduceRight","next"],"sources":["CommandBus.ts"],"sourcesContent":["import type { Command } from \"./createCommand.js\";\nexport * from \"./createCommand.js\";\n\nconst INTERNAL_STOP = Symbol(\"INTERNAL_STOP\");\n\nexport type CommandHandler<T> = (\n    payload: T,\n    control: CommandHandlerControl\n) => void | typeof INTERNAL_STOP | Promise<void | typeof INTERNAL_STOP>;\n\nexport type CommandHandlerControl = {\n    stop: () => typeof INTERNAL_STOP;\n};\n\nexport enum CommandPriority {\n    LOW = -100,\n    NORMAL = 0,\n    HIGH = 100,\n    CRITICAL = 1000\n}\n\nexport class CommandBus {\n    private handlers = new Map<\n        string,\n        { priority: number; handler: (payload: any, control: CommandHandlerControl) => any }[]\n    >();\n\n    private middleware: ((\n        type: string,\n        payload: any,\n        next: (payload: any) => Promise<void>\n    ) => Promise<void>)[] = [];\n\n    register<T>(\n        command: Command<T>,\n        handler: CommandHandler<T>,\n        priority: CommandPriority = CommandPriority.NORMAL\n    ): () => void {\n        const list = this.handlers.get(command.type) ?? [];\n\n        const entry = { handler, priority };\n        list.push(entry);\n        list.sort((a, b) => b.priority - a.priority);\n        this.handlers.set(command.type, list);\n\n        // Return an unregister function\n        return () => {\n            const current = this.handlers.get(command.type);\n            if (!current) {\n                return;\n            }\n\n            const index = current.indexOf(entry);\n\n            if (index !== -1) {\n                current.splice(index, 1);\n            }\n\n            if (current.length === 0) {\n                this.handlers.delete(command.type);\n            }\n        };\n    }\n\n    use(mw: (type: string, payload: any, next: (payload: any) => Promise<void>) => Promise<void>) {\n        this.middleware.push(mw);\n    }\n\n    async execute<T>(command: Command<T>, payload?: T) {\n        const list = this.handlers.get(command.type) ?? [];\n\n        const runHandlers = async (p?: T) => {\n            const control: CommandHandlerControl = {\n                stop: () => INTERNAL_STOP\n            };\n\n            for (const entry of list) {\n                const result = await entry.handler(p, control);\n                if (result === INTERNAL_STOP) {\n                    break;\n                }\n            }\n        };\n\n        const composed = this.middleware.reduceRight(\n            (next, mw) => async (p?: T) => mw(command.type, p, next),\n            runHandlers\n        );\n\n        // console.log(\"[Execute Command]\", command.type, payload);\n        await composed(payload);\n    }\n}\n"],"mappings":"AACA;AAEA,MAAMA,aAAa,GAAGC,MAAM,CAAC,eAAe,CAAC;AAW7C,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAO3B,OAAO,MAAMC,UAAU,CAAC;EACZC,QAAQ,GAAG,IAAIC,GAAG,CAGxB,CAAC;EAEKC,UAAU,GAIM,EAAE;EAE1BC,QAAQA,CACJC,OAAmB,EACnBC,OAA0B,EAC1BC,QAAyB,GAAGR,eAAe,CAACS,MAAM,EACxC;IACV,MAAMC,IAAI,GAAG,IAAI,CAACR,QAAQ,CAACS,GAAG,CAACL,OAAO,CAACM,IAAI,CAAC,IAAI,EAAE;IAElD,MAAMC,KAAK,GAAG;MAAEN,OAAO;MAAEC;IAAS,CAAC;IACnCE,IAAI,CAACI,IAAI,CAACD,KAAK,CAAC;IAChBH,IAAI,CAACK,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAACT,QAAQ,GAAGQ,CAAC,CAACR,QAAQ,CAAC;IAC5C,IAAI,CAACN,QAAQ,CAACgB,GAAG,CAACZ,OAAO,CAACM,IAAI,EAAEF,IAAI,CAAC;;IAErC;IACA,OAAO,MAAM;MACT,MAAMS,OAAO,GAAG,IAAI,CAACjB,QAAQ,CAACS,GAAG,CAACL,OAAO,CAACM,IAAI,CAAC;MAC/C,IAAI,CAACO,OAAO,EAAE;QACV;MACJ;MAEA,MAAMC,KAAK,GAAGD,OAAO,CAACE,OAAO,CAACR,KAAK,CAAC;MAEpC,IAAIO,KAAK,KAAK,CAAC,CAAC,EAAE;QACdD,OAAO,CAACG,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;MAC5B;MAEA,IAAID,OAAO,CAACI,MAAM,KAAK,CAAC,EAAE;QACtB,IAAI,CAACrB,QAAQ,CAACsB,MAAM,CAAClB,OAAO,CAACM,IAAI,CAAC;MACtC;IACJ,CAAC;EACL;EAEAa,GAAGA,CAACC,EAAwF,EAAE;IAC1F,IAAI,CAACtB,UAAU,CAACU,IAAI,CAACY,EAAE,CAAC;EAC5B;EAEA,MAAMC,OAAOA,CAAIrB,OAAmB,EAAEsB,OAAW,EAAE;IAC/C,MAAMlB,IAAI,GAAG,IAAI,CAACR,QAAQ,CAACS,GAAG,CAACL,OAAO,CAACM,IAAI,CAAC,IAAI,EAAE;IAElD,MAAMiB,WAAW,GAAG,MAAOC,CAAK,IAAK;MACjC,MAAMC,OAA8B,GAAG;QACnCC,IAAI,EAAEA,CAAA,KAAMlC;MAChB,CAAC;MAED,KAAK,MAAMe,KAAK,IAAIH,IAAI,EAAE;QACtB,MAAMuB,MAAM,GAAG,MAAMpB,KAAK,CAACN,OAAO,CAACuB,CAAC,EAAEC,OAAO,CAAC;QAC9C,IAAIE,MAAM,KAAKnC,aAAa,EAAE;UAC1B;QACJ;MACJ;IACJ,CAAC;IAED,MAAMoC,QAAQ,GAAG,IAAI,CAAC9B,UAAU,CAAC+B,WAAW,CACxC,CAACC,IAAI,EAAEV,EAAE,KAAK,MAAOI,CAAK,IAAKJ,EAAE,CAACpB,OAAO,CAACM,IAAI,EAAEkB,CAAC,EAAEM,IAAI,CAAC,EACxDP,WACJ,CAAC;;IAED;IACA,MAAMK,QAAQ,CAACN,OAAO,CAAC;EAC3B;AACJ","ignoreList":[]}

package/editorSdk/Editor.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentManifest, EditorDocument, EditorViewportData, PreviewViewportData, SerializedComponentGroup } from "@webiny/website-builder-sdk";
+import type { CommandHandler } from "./CommandBus.js";
+import { type Command, CommandPriority } from "./CommandBus.js";
+import { type StateChangeListener, StateWithHistory } from "./StateWithHistory.js";
+import { type MutableState, State } from "./State.js";
+export type EditorState = {
+    boxes: {
+        preview: PreviewViewportData["boxes"];
+        editor: EditorViewportData["boxes"];
+    };
+    viewport: EditorViewportData["viewport"];
+    selectedElement: string | null;
+    highlightedElement: string | null;
+    showOverlays: boolean;
+    components: Record<string, ComponentManifest>;
+    componentGroups: Record<string, SerializedComponentGroup>;
+    breakpoint?: string;
+    [key: string]: any;
+};
+export declare class Editor<TDocument extends EditorDocument = EditorDocument> {
+    private readonly documentState;
+    private readonly editorState;
+    private readonly commandBus;
+    constructor(initialState: TDocument);
+    registerCommandHandler<T>(command: Command<T>, handler: CommandHandler<T>, priority?: CommandPriority): () => void;
+    executeCommand<T>(command: Command<T>, payload?: T): Promise<void>;
+    undo(): void;
+    redo(): void;
+    updateDocument(cb: (state: MutableState<TDocument>) => void): void;
+    updateEditor(cb: (state: MutableState<EditorState>) => void): void;
+    getEditorState(): State<EditorState>;
+    getDocumentState(): StateWithHistory<TDocument>;
+    onDocumentStateChange(listener: StateChangeListener<TDocument>): () => void;
+}