@webiny/app-website-builder 6.0.0-alpha.0

package/ecommerce/EcommercePlugin.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { IEcommerceApiFactory, SettingsInput } from "./types";
+import { ResourcePageProps } from "./components/ResourcePage";
+export interface CustomResourcePickerProps<T = any> {
+    value?: T;
+    onChange(val: T | undefined): void;
+}
+export type EcommercePluginProps = {
+    name: string;
+    init: IEcommerceApiFactory;
+    settings: SettingsInput[];
+    children?: React.ReactNode;
+};
+export type PageTypeProps = Omit<ResourcePageProps, "apiName">;
+export declare const EcommercePlugin: ((props: EcommercePluginProps) => React.JSX.Element) & {
+    PageType: (props: PageTypeProps) => null;
+};

package/ecommerce/EcommercePlugin.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { Editor } from "./..";
+import { CreateInputRenderers } from "./CreateInputRenderers";
+import { ResourcePage } from "./components/ResourcePage";
+import { createGenericContext } from "@webiny/app";
+import { usePageTypes } from "./usePageTypes";
+import { EcommerceApiManifest, useEcommerceApiProvider } from "../features";
+const Context = createGenericContext("EcommercePluginContext");
+const EcommercePluginBase = props => {
+  const provider = useEcommerceApiProvider();
+  useEffect(() => {
+    provider.addApiManifest(new EcommerceApiManifest(props.name, props.init, props.settings));
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    pluginName: props.name
+  }, /*#__PURE__*/React.createElement(Editor.EditorConfig, {
+    priority: "secondary"
+  }, /*#__PURE__*/React.createElement(CreateInputRenderers, {
+    pluginName: props.name
+  })), props.children);
+};
+const PageType = props => {
+  const {
+    pluginName
+  } = Context.useHook();
+  const {
+    addPageType
+  } = usePageTypes();
+  useEffect(() => {
+    addPageType({
+      name: props.name,
+      label: props.label,
+      element: /*#__PURE__*/React.createElement(ResourcePage, Object.assign({}, props, {
+        apiName: pluginName
+      }))
+    });
+  }, []);
+  return null;
+};
+export const EcommercePlugin = Object.assign(EcommercePluginBase, {
+  PageType
+});
+
+//# sourceMappingURL=EcommercePlugin.js.map

package/ecommerce/EcommercePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","Editor","CreateInputRenderers","ResourcePage","createGenericContext","usePageTypes","EcommerceApiManifest","useEcommerceApiProvider","Context","EcommercePluginBase","props","provider","addApiManifest","name","init","settings","createElement","Provider","pluginName","EditorConfig","priority","children","PageType","useHook","addPageType","label","element","Object","assign","apiName","EcommercePlugin"],"sources":["EcommercePlugin.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Editor } from \"~/index\";\nimport type { IEcommerceApiFactory, SettingsInput } from \"./types\";\nimport { CreateInputRenderers } from \"./CreateInputRenderers\";\nimport { ResourcePage, ResourcePageProps } from \"./components/ResourcePage\";\nimport { createGenericContext } from \"@webiny/app\";\nimport { usePageTypes } from \"./usePageTypes\";\nimport { EcommerceApiManifest, useEcommerceApiProvider } from \"~/features\";\n\nexport interface CustomResourcePickerProps<T = any> {\n    value?: T;\n    onChange(val: T | undefined): void;\n}\n\nexport type EcommercePluginProps = {\n    name: string;\n    init: IEcommerceApiFactory;\n    settings: SettingsInput[];\n    children?: React.ReactNode;\n};\n\nconst Context = createGenericContext<{ pluginName: string }>(\"EcommercePluginContext\");\n\nconst EcommercePluginBase = (props: EcommercePluginProps) => {\n    const provider = useEcommerceApiProvider();\n\n    useEffect(() => {\n        provider.addApiManifest(new EcommerceApiManifest(props.name, props.init, props.settings));\n    }, []);\n\n    return (\n        <Context.Provider pluginName={props.name}>\n            <Editor.EditorConfig priority={\"secondary\"}>\n                <CreateInputRenderers pluginName={props.name} />\n            </Editor.EditorConfig>\n            {props.children}\n        </Context.Provider>\n    );\n};\n\nexport type PageTypeProps = Omit<ResourcePageProps, \"apiName\">;\n\nconst PageType = (props: PageTypeProps) => {\n    const { pluginName } = Context.useHook();\n    const { addPageType } = usePageTypes();\n\n    useEffect(() => {\n        addPageType({\n            name: props.name,\n            label: props.label,\n            element: <ResourcePage {...props} apiName={pluginName} />\n        });\n    }, []);\n\n    return null;\n};\n\nexport const EcommercePlugin = Object.assign(EcommercePluginBase, { PageType });\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,MAAM;AAEf,SAASC,oBAAoB;AAC7B,SAASC,YAAY;AACrB,SAASC,oBAAoB,QAAQ,aAAa;AAClD,SAASC,YAAY;AACrB,SAASC,oBAAoB,EAAEC,uBAAuB;AActD,MAAMC,OAAO,GAAGJ,oBAAoB,CAAyB,wBAAwB,CAAC;AAEtF,MAAMK,mBAAmB,GAAIC,KAA2B,IAAK;EACzD,MAAMC,QAAQ,GAAGJ,uBAAuB,CAAC,CAAC;EAE1CP,SAAS,CAAC,MAAM;IACZW,QAAQ,CAACC,cAAc,CAAC,IAAIN,oBAAoB,CAACI,KAAK,CAACG,IAAI,EAAEH,KAAK,CAACI,IAAI,EAAEJ,KAAK,CAACK,QAAQ,CAAC,CAAC;EAC7F,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIhB,KAAA,CAAAiB,aAAA,CAACR,OAAO,CAACS,QAAQ;IAACC,UAAU,EAAER,KAAK,CAACG;EAAK,gBACrCd,KAAA,CAAAiB,aAAA,CAACf,MAAM,CAACkB,YAAY;IAACC,QAAQ,EAAE;EAAY,gBACvCrB,KAAA,CAAAiB,aAAA,CAACd,oBAAoB;IAACgB,UAAU,EAAER,KAAK,CAACG;EAAK,CAAE,CAC9B,CAAC,EACrBH,KAAK,CAACW,QACO,CAAC;AAE3B,CAAC;AAID,MAAMC,QAAQ,GAAIZ,KAAoB,IAAK;EACvC,MAAM;IAAEQ;EAAW,CAAC,GAAGV,OAAO,CAACe,OAAO,CAAC,CAAC;EACxC,MAAM;IAAEC;EAAY,CAAC,GAAGnB,YAAY,CAAC,CAAC;EAEtCL,SAAS,CAAC,MAAM;IACZwB,WAAW,CAAC;MACRX,IAAI,EAAEH,KAAK,CAACG,IAAI;MAChBY,KAAK,EAAEf,KAAK,CAACe,KAAK;MAClBC,OAAO,eAAE3B,KAAA,CAAAiB,aAAA,CAACb,YAAY,EAAAwB,MAAA,CAAAC,MAAA,KAAKlB,KAAK;QAAEmB,OAAO,EAAEX;MAAW,EAAE;IAC5D,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAMY,eAAe,GAAGH,MAAM,CAACC,MAAM,CAACnB,mBAAmB,EAAE;EAAEa;AAAS,CAAC,CAAC","ignoreList":[]}

package/ecommerce/components/ResourcePage.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Resource } from "../types";
+export interface ResourcePageProps {
+    apiName: string;
+    name: string;
+    label: string;
+    resourceType: string;
+    previewPath: (resource: Resource) => string;
+}
+export declare const ResourcePage: (props: ResourcePageProps) => React.JSX.Element;

package/ecommerce/components/ResourcePage.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo } from "react";
+import { Grid, Input, Skeleton } from "@webiny/admin-ui";
+import { UnsetOnUnmount, useBind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { createResourcePicker } from "../createResourcePicker";
+import { adaptInputToBind } from "./adaptInputToBind";
+import { toTitleCaseLabel } from "./toTitleCaseLabel";
+import { useEcommerceApi } from "../../features";
+export const ResourcePage = props => {
+  const {
+    api
+  } = useEcommerceApi(props.apiName);
+  const ResourcePicker = useMemo(() => {
+    if (!api) {
+      return () => null;
+    }
+    const ElementInput = createResourcePicker(props.apiName, api, props.resourceType);
+    return adaptInputToBind(ElementInput);
+  }, [api]);
+  const resourceIdBind = useBind({
+    name: "resourceId",
+    validators: [validation.create("required")]
+  });
+  const resourceTypeBind = useBind({
+    name: "resourceType",
+    defaultValue: props.resourceType
+  });
+  const titleBind = useBind({
+    name: "title",
+    validators: [validation.create("required")]
+  });
+  const pathBind = useBind({
+    name: "path",
+    validators: [validation.create("required")]
+  });
+  useEffect(() => {
+    if (!api || !resourceIdBind) {
+      return;
+    }
+    if (resourceIdBind.value) {
+      api[props.resourceType].findById(resourceIdBind.value).then(resource => {
+        titleBind.onChange(resource.title);
+        pathBind.onChange(props.previewPath(resource));
+      });
+    }
+  }, [resourceIdBind.value]);
+  const onResourceChange = resource => {
+    resourceIdBind.onChange(resource);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "resourceType"
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({}, resourceTypeBind, {
+    type: "hidden"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-border-sm wby-rounded-md wby-border-neutral-muted wby-p-sm"
+  }, api ? /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "resourceId"
+  }, /*#__PURE__*/React.createElement(ResourcePicker, Object.assign({}, resourceIdBind, {
+    label: toTitleCaseLabel(props.resourceType),
+    onChange: onResourceChange
+  }))) : /*#__PURE__*/React.createElement(Skeleton, null))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "title"
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({
+    label: "Title"
+  }, titleBind, {
+    disabled: !resourceIdBind.value
+  })))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "path"
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({
+    label: "Path"
+  }, pathBind, {
+    disabled: !resourceIdBind.value
+  })))));
+};
+
+//# sourceMappingURL=ResourcePage.js.map

package/ecommerce/components/ResourcePage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","Grid","Input","Skeleton","UnsetOnUnmount","useBind","validation","createResourcePicker","adaptInputToBind","toTitleCaseLabel","useEcommerceApi","ResourcePage","props","api","apiName","ResourcePicker","ElementInput","resourceType","resourceIdBind","name","validators","create","resourceTypeBind","defaultValue","titleBind","pathBind","value","findById","then","resource","onChange","title","previewPath","onResourceChange","createElement","Fragment","Object","assign","type","Column","span","className","label","disabled"],"sources":["ResourcePage.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { Grid, Input, Skeleton } from \"@webiny/admin-ui\";\nimport { UnsetOnUnmount, useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { createResourcePicker } from \"~/ecommerce/createResourcePicker\";\nimport { adaptInputToBind } from \"./adaptInputToBind\";\nimport { Resource } from \"../types\";\nimport { toTitleCaseLabel } from \"~/ecommerce/components/toTitleCaseLabel\";\nimport { useEcommerceApi } from \"~/features\";\n\nexport interface ResourcePageProps {\n    apiName: string;\n    name: string;\n    label: string;\n    resourceType: string;\n    previewPath: (resource: Resource) => string;\n}\n\nexport const ResourcePage = (props: ResourcePageProps) => {\n    const { api } = useEcommerceApi(props.apiName);\n\n    const ResourcePicker = useMemo(() => {\n        if (!api) {\n            return () => null;\n        }\n\n        const ElementInput = createResourcePicker(props.apiName, api, props.resourceType);\n        return adaptInputToBind(ElementInput);\n    }, [api]);\n\n    const resourceIdBind = useBind({\n        name: \"resourceId\",\n        validators: [validation.create(\"required\")]\n    });\n\n    const resourceTypeBind = useBind({\n        name: \"resourceType\",\n        defaultValue: props.resourceType\n    });\n\n    const titleBind = useBind({ name: \"title\", validators: [validation.create(\"required\")] });\n    const pathBind = useBind({ name: \"path\", validators: [validation.create(\"required\")] });\n\n    useEffect(() => {\n        if (!api || !resourceIdBind) {\n            return;\n        }\n\n        if (resourceIdBind.value) {\n            api[props.resourceType].findById(resourceIdBind.value).then(resource => {\n                titleBind.onChange(resource.title);\n                pathBind.onChange(props.previewPath(resource));\n            });\n        }\n    }, [resourceIdBind.value]);\n\n    const onResourceChange = (resource: Resource) => {\n        resourceIdBind.onChange(resource);\n    };\n\n    return (\n        <>\n            <UnsetOnUnmount name={\"resourceType\"}>\n                <Input {...resourceTypeBind} type={\"hidden\"} />\n            </UnsetOnUnmount>\n            <Grid.Column span={12}>\n                <div className={\"wby-border-sm wby-rounded-md wby-border-neutral-muted wby-p-sm\"}>\n                    {api ? (\n                        <UnsetOnUnmount name={\"resourceId\"}>\n                            <ResourcePicker\n                                {...resourceIdBind}\n                                label={toTitleCaseLabel(props.resourceType)}\n                                onChange={onResourceChange}\n                            />\n                        </UnsetOnUnmount>\n                    ) : (\n                        <Skeleton />\n                    )}\n                </div>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <UnsetOnUnmount name={\"title\"}>\n                    <Input label={\"Title\"} {...titleBind} disabled={!resourceIdBind.value} />\n                </UnsetOnUnmount>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <UnsetOnUnmount name={\"path\"}>\n                    <Input label={\"Path\"} {...pathBind} disabled={!resourceIdBind.value} />\n                </UnsetOnUnmount>\n            </Grid.Column>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/ecommerce/components/ResourcesList.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ResourcePickerProps } from "./ResourcesPicker";
+import type { IEcommerceApi } from "..";
+export type PickResourceListProps = {
+    api: IEcommerceApi;
+    value?: string[];
+    onChange(newValue: string[]): void;
+    resourcePicker?: React.FC<ResourcePickerProps>;
+    resourceName: string;
+    pluginName: string;
+};
+export declare const PickResourceList: ((props: PickResourceListProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const PickResourcesListButton: ((props: Omit<PickResourceListProps, "onDone">) => React.JSX.Element) & {
+    displayName: string;
+};

package/ecommerce/components/ResourcesList.js

@@ -0,0 +1,138 @@
+import React, { useEffect } from "react";
+import { action, runInAction } from "mobx";
+import { observer, useLocalObservable } from "mobx-react-lite";
+import capitalize from "lodash/capitalize";
+import pluralize from "pluralize";
+import { ResourcePreviewCell, ResourcePicker } from "./ResourcesPicker";
+import { useDialogs } from "@webiny/app-admin";
+import { Loader, Button, Text, List } from "@webiny/admin-ui";
+import { ReactComponent as Delete } from "@webiny/icons/delete.svg";
+const ResourcePreviewById = observer(props => {
+  const {
+    id,
+    ...rest
+  } = props;
+  const store = useLocalObservable(() => ({
+    loading: false,
+    resourceInfo: null,
+    async getResource() {
+      runInAction(() => {
+        this.loading = true;
+      });
+      try {
+        const value = await props.api[props.resourceName].findById(props.id);
+        runInAction(() => {
+          this.resourceInfo = value;
+        });
+      } catch (e) {
+        console.error(e);
+      }
+      runInAction(() => {
+        this.loading = false;
+      });
+    }
+  }));
+  useEffect(() => {
+    store.getResource();
+  }, []);
+  if (store.loading) {
+    return /*#__PURE__*/React.createElement(Loader, {
+      size: "md"
+    });
+  }
+  return store.resourceInfo && /*#__PURE__*/React.createElement(ResourcePreviewCell, Object.assign({
+    resource: store.resourceInfo
+  }, rest)) || /*#__PURE__*/React.createElement(React.Fragment, null);
+});
+const NoResourcesSelected = ({
+  resourceName
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(Text, null, "There are no ", pluralize(resourceName), " in this list."));
+};
+export const PickResourceList = observer(props => {
+  const dialog = useDialogs();
+  const store = useLocalObservable(() => ({
+    value: props.value || []
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List, null, store.value?.map((item, index) => /*#__PURE__*/React.createElement(ResourcePreviewById, {
+    resourceName: props.resourceName,
+    key: `${item}:${index}`,
+    id: item,
+    api: props.api,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
+      icon: /*#__PURE__*/React.createElement(Delete, null),
+      onClick: action(() => {
+        const res = [...store.value.slice(0, store.value.indexOf(item)), ...store.value.slice(store.value.indexOf(item) + 1)];
+        store.value = res;
+        props.onChange(res);
+      })
+    }))
+  }))), (store.value || []).length === 0 ? /*#__PURE__*/React.createElement(NoResourcesSelected, {
+    resourceName: props.resourceName
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-align-center wby-my-lg"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: `+ Select ${capitalize(pluralize(props.resourceName))}`,
+    variant: "secondary",
+    onClick: () => {
+      const {
+        value,
+        resourcePicker,
+        ...rest
+      } = props;
+      const PickerComponent = resourcePicker || ResourcePicker;
+      const closeDialog = dialog.showDialog({
+        title: `Select ${pluralize(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, {
+          omitIds: store.value,
+          onChange: action(resource => {
+            if (resource) {
+              if (!Array.isArray(store.value)) {
+                store.value = [];
+              }
+              store.value.push(String(resource.id));
+              props.onChange(store.value);
+            }
+            closeDialog();
+          })
+        })))
+      });
+    }
+  })));
+});
+export const PickResourcesListButton = observer(props => {
+  const dialogs = useDialogs();
+  useEffect(() => {
+    if (typeof props.value === "undefined") {
+      try {
+        props.onChange([]);
+      } catch (e) {
+        console.warn("Could not set default value", e);
+      }
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    text: `${props.value?.length || 0} ${pluralize(props.resourceName, props.value?.length || 0)}`,
+    variant: "secondary",
+    onClick: () => {
+      dialogs.showDialog({
+        title: `Selected ${pluralize(props.resourceName)}`,
+        acceptLabel: null,
+        cancelLabel: null,
+        content: /*#__PURE__*/React.createElement(PickResourceList, props)
+      });
+    },
+    style: {
+      color: "#999",
+      whiteSpace: "nowrap"
+    }
+  }));
+});
+
+//# sourceMappingURL=ResourcesList.js.map

package/ecommerce/components/ResourcesList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","action","runInAction","observer","useLocalObservable","capitalize","pluralize","ResourcePreviewCell","ResourcePicker","useDialogs","Loader","Button","Text","List","ReactComponent","Delete","ResourcePreviewById","props","id","rest","store","loading","resourceInfo","getResource","value","api","resourceName","findById","e","console","error","createElement","size","Object","assign","resource","Fragment","NoResourcesSelected","className","PickResourceList","dialog","map","item","index","key","actions","Item","Action","icon","onClick","res","slice","indexOf","onChange","length","text","variant","resourcePicker","PickerComponent","closeDialog","showDialog","title","acceptLabel","cancelLabel","content","omitIds","Array","isArray","push","String","PickResourcesListButton","dialogs","warn","style","color","whiteSpace"],"sources":["ResourcesList.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { action, runInAction } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport capitalize from \"lodash/capitalize\";\nimport pluralize from \"pluralize\";\nimport {\n    ResourcePreviewCell,\n    ResourcePreviewCellProps,\n    ResourcePicker,\n    ResourcePickerProps\n} from \"./ResourcesPicker\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Loader, Button, Text, List } from \"@webiny/admin-ui\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport type { IEcommerceApi, Resource } from \"~/ecommerce\";\n\nexport type PickResourceListProps = {\n    api: IEcommerceApi;\n    value?: string[];\n    onChange(newValue: string[]): void;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    resourceName: string;\n    pluginName: string;\n};\n\nconst ResourcePreviewById = observer(\n    (\n        props: {\n            id: string;\n            api: IEcommerceApi;\n            resourceName: string;\n            actions?: React.ReactNode;\n        } & Partial<ResourcePreviewCellProps>\n    ) => {\n        const { id, ...rest } = props;\n        const store = useLocalObservable(() => ({\n            loading: false,\n            resourceInfo: null as Resource | null,\n            async getResource() {\n                runInAction(() => {\n                    this.loading = true;\n                });\n                try {\n                    const value = await props.api[props.resourceName].findById(props.id);\n                    runInAction(() => {\n                        this.resourceInfo = value;\n                    });\n                } catch (e) {\n                    console.error(e);\n                }\n                runInAction(() => {\n                    this.loading = false;\n                });\n            }\n        }));\n        useEffect(() => {\n            store.getResource();\n        }, []);\n\n        if (store.loading) {\n            return <Loader size={\"md\"} />;\n        }\n\n        return (\n            (store.resourceInfo && (\n                <ResourcePreviewCell resource={store.resourceInfo} {...rest} />\n            )) || <React.Fragment></React.Fragment>\n        );\n    }\n);\n\ninterface NoResourcesSelectedProps {\n    resourceName: string;\n}\n\nconst NoResourcesSelected = ({ resourceName }: NoResourcesSelectedProps) => {\n    return (\n        <div className={\"wby-w-full\"}>\n            <Text>There are no {pluralize(resourceName)} in this list.</Text>\n        </div>\n    );\n};\n\nexport const PickResourceList = observer((props: PickResourceListProps) => {\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        value: props.value || []\n    }));\n\n    return (\n        <React.Fragment>\n            <List>\n                {store.value?.map((item, index) => (\n                    <ResourcePreviewById\n                        resourceName={props.resourceName}\n                        key={`${item}:${index}`}\n                        id={item}\n                        api={props.api}\n                        actions={\n                            <>\n                                <List.Item.Action\n                                    icon={<Delete />}\n                                    onClick={action(() => {\n                                        const res = [\n                                            ...store.value!.slice(0, store.value!.indexOf(item)),\n                                            ...store.value!.slice(store.value!.indexOf(item) + 1)\n                                        ];\n                                        store.value = res;\n                                        props.onChange(res);\n                                    })}\n                                />\n                            </>\n                        }\n                    />\n                ))}\n            </List>\n            {(store.value || []).length === 0 ? (\n                <NoResourcesSelected resourceName={props.resourceName} />\n            ) : null}\n            {/* On click - choose product */}\n            <div className={\"wby-align-center wby-my-lg\"}>\n                <Button\n                    text={`+ Select ${capitalize(pluralize(props.resourceName))}`}\n                    variant=\"secondary\"\n                    onClick={() => {\n                        const { value, resourcePicker, ...rest } = props;\n                        const PickerComponent = resourcePicker || ResourcePicker;\n\n                        const closeDialog = dialog.showDialog({\n                            title: `Select ${pluralize(props.resourceName)}`,\n                            acceptLabel: null,\n                            cancelLabel: null,\n                            content: (\n                                <div className={\"wby-h-[500px] wby-overflow-scroll\"}>\n                                    <PickerComponent\n                                        {...rest}\n                                        omitIds={store.value}\n                                        onChange={action(resource => {\n                                            if (resource) {\n                                                if (!Array.isArray(store.value)) {\n                                                    store.value = [];\n                                                }\n                                                store.value.push(String(resource.id));\n                                                props.onChange(store.value);\n                                            }\n                                            closeDialog();\n                                        })}\n                                    />\n                                </div>\n                            )\n                        });\n                    }}\n                />\n            </div>\n        </React.Fragment>\n    );\n});\n\nexport const PickResourcesListButton = observer((props: Omit<PickResourceListProps, \"onDone\">) => {\n    const dialogs = useDialogs();\n\n    useEffect(() => {\n        if (typeof props.value === \"undefined\") {\n            try {\n                props.onChange([]);\n            } catch (e) {\n                console.warn(\"Could not set default value\", e);\n            }\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <Button\n                text={`${props.value?.length || 0} ${pluralize(\n                    props.resourceName,\n                    props.value?.length || 0\n                )}`}\n                variant={\"secondary\"}\n                onClick={() => {\n                    dialogs.showDialog({\n                        title: `Selected ${pluralize(props.resourceName)}`,\n                        acceptLabel: null,\n                        cancelLabel: null,\n                        content: <PickResourceList {...props} />\n                    });\n                }}\n                style={{ color: \"#999\", whiteSpace: \"nowrap\" }}\n            />\n        </React.Fragment>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/ecommerce/components/ResourcesPicker.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { Resource } from "../types";
+import { CustomResourcePickerProps } from "..";
+export interface CommerceAPIOperations {
+    [resourceName: string]: {
+        resourcePicker?: React.FC<ResourcePickerProps>;
+        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 ResourcesPickerButtonProps extends CustomResourcePickerProps<string> {
+    api: CommerceAPIOperations;
+    resourcePicker?: React.FC<ResourcePickerProps>;
+    pluginName: string;
+    resourceName: string;
+}
+export interface ResourcePreviewCellProps {
+    resource: Resource;
+    actions?: React.ReactNode;
+    selected?: boolean;
+    className?: string;
+    onClick?: () => void;
+    style?: Partial<CSSStyleDeclaration>;
+}
+export declare const ResourcePreviewCell: ((props: ResourcePreviewCellProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export type ResourcePickerProps = CustomResourcePickerProps<Resource> & {
+    api: CommerceAPIOperations;
+    resourceName: string;
+    omitIds?: string[];
+    title?: string;
+};
+export declare const ResourcePicker: ((props: ResourcePickerProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const ResourcesPickerButton: React.FC<ResourcesPickerButtonProps>;

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, useSnackbar } 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 { Resource } from \"../types\";\nimport { 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;