@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/plugins/fieldRenderers/dateTime/dateTimeFields.js

@@ -1,84 +1,82 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import React from "react";
 import get from "lodash/get";
-import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
 import DynamicSection from "../DynamicSection";
-import DateTimeWithoutTimezone from "./DateTimeWithoutTimezone";
-import DateTimeWithTimezone from "./DateTimeWithTimezone";
-import Time from "./Time";
-import Input from "./Input";
-var t = i18n.ns("app-headless-cms/admin/fields/date-time");
-var plugin = {
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone";
+import { DateTimeWithTimezone } from "./DateTimeWithTimezone";
+import { DateOnly } from "./DateOnly";
+import { Time } from "./Time";
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+const t = i18n.ns("app-headless-cms/admin/fields/date-time");
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-date-times",
   renderer: {
     rendererName: "date-time-inputs",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Date/Time Inputs"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders inputs for various formats of dates and times."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "datetime" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    name: t`Date/Time Inputs`,
+    description: t`Renders inputs for various formats of dates and times.`,
+    canUse({
+      field
+    }) {
+      return !!(field.type === "datetime" && field.multipleValues && !get(field, "predefinedValues.enabled"));
     },
-    render: function render(props) {
-      var field = props.field;
-      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
-        var bind = _ref2.bind,
-            index = _ref2.index;
-        var trailingIcon = index > 0 && {
+    render(props) {
+      const {
+        field
+      } = props;
+      const fieldSettingsType = field.settings ? field.settings.type : null;
+      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+        bind,
+        index
+      }) => {
+        const trailingIcon = {
           icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-          onClick: function onClick() {
-            return bind.field.removeValue(index);
-          }
+          onClick: () => bind.field.removeValue(index)
         };
-
-        if (field.settings.type === "dateTimeWithoutTimezone") {
+        if (fieldSettingsType === "dateTimeWithoutTimezone") {
           return /*#__PURE__*/React.createElement(DateTimeWithoutTimezone, {
             field: field,
             bind: bind.index,
             trailingIcon: trailingIcon
           });
         }
-
-        if (field.settings.type === "dateTimeWithTimezone") {
+        if (fieldSettingsType === "dateTimeWithTimezone") {
           return /*#__PURE__*/React.createElement(DateTimeWithTimezone, {
             field: field,
             bind: bind.index,
             trailingIcon: trailingIcon
           });
         }
-
-        if (field.settings.type === "time") {
+        if (fieldSettingsType === "time") {
           return /*#__PURE__*/React.createElement(Time, {
-            field: _objectSpread(_objectSpread({}, props.field), {}, {
-              label: props.field.label + t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([" Value {number}"])))({
+            field: {
+              ...props.field,
+              label: props.field.label + t` Value {number}`({
                 number: index + 1
               })
-            }),
+            },
             bind: bind.index,
-            label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Value {number}"])))({
-              number: index + 1
-            }),
             trailingIcon: trailingIcon
           });
         }
-
-        return /*#__PURE__*/React.createElement(Input, {
+        return /*#__PURE__*/React.createElement(DateOnly, {
           bind: bind.index,
-          field: _objectSpread(_objectSpread({}, props.field), {}, {
-            label: props.field.label + t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([" Value {number}"])))({
+          field: {
+            ...props.field,
+            label: props.field.label + t` Value {number}`({
               number: index + 1
             })
-          }),
-          type: field.settings.type,
+          },
           trailingIcon: trailingIcon
         });
       });
+    },
+    renderSettings(props) {
+      return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=dateTimeFields.js.map

package/admin/plugins/fieldRenderers/dateTime/dateTimeFields.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","get","DynamicSection","i18n","ReactComponent","DeleteIcon","DateTimeWithoutTimezone","DateTimeWithTimezone","DateOnly","Time","MultiValueRendererSettings","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","fieldSettingsType","settings","createElement","bind","index","trailingIcon","icon","onClick","removeValue","label","number","renderSettings"],"sources":["dateTimeFields.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport DynamicSection from \"../DynamicSection\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { DateTimeWithoutTimezone } from \"./DateTimeWithoutTimezone\";\nimport { DateTimeWithTimezone } from \"./DateTimeWithTimezone\";\nimport { DateOnly } from \"./DateOnly\";\nimport { Time } from \"./Time\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/date-time\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-date-times\",\n    renderer: {\n        rendererName: \"date-time-inputs\",\n        name: t`Date/Time Inputs`,\n        description: t`Renders inputs for various formats of dates and times.`,\n        canUse({ field }) {\n            return !!(\n                field.type === \"datetime\" &&\n                field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = props;\n\n            const fieldSettingsType = field.settings ? field.settings.type : null;\n\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => {\n                        const trailingIcon = {\n                            icon: <DeleteIcon />,\n                            onClick: () => bind.field.removeValue(index)\n                        };\n\n                        if (fieldSettingsType === \"dateTimeWithoutTimezone\") {\n                            return (\n                                <DateTimeWithoutTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"dateTimeWithTimezone\") {\n                            return (\n                                <DateTimeWithTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"time\") {\n                            return (\n                                <Time\n                                    field={{\n                                        ...props.field,\n                                        label:\n                                            props.field.label +\n                                            t` Value {number}`({ number: index + 1 })\n                                    }}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n\n                        return (\n                            <DateOnly\n                                bind={bind.index}\n                                field={{\n                                    ...props.field,\n                                    label:\n                                        props.field.label +\n                                        t` Value {number}`({ number: index + 1 })\n                                }}\n                                trailingIcon={trailingIcon}\n                            />\n                        );\n                    }}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dateTime/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
 export default _default;

package/admin/plugins/fieldRenderers/dateTime/index.js

@@ -1,3 +1,5 @@
 import dateTimeField from "./dateTimeField";
 import dateTimeFields from "./dateTimeFields";
-export default [dateTimeField, dateTimeFields];
+export default [dateTimeField, dateTimeFields];
+
+//# sourceMappingURL=index.js.map

package/admin/plugins/fieldRenderers/dateTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dateTimeField","dateTimeFields"],"sources":["index.ts"],"sourcesContent":["import dateTimeField from \"./dateTimeField\";\nimport dateTimeFields from \"./dateTimeFields\";\n\nexport default [dateTimeField, dateTimeFields];\n"],"mappings":"AAAA,OAAOA,aAAa;AACpB,OAAOC,cAAc;AAErB,eAAe,CAACD,aAAa,EAAEC,cAAc,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/dateTime/utils.d.ts

@@ -1,15 +1,16 @@
-/// <reference types="react" />
-export declare const UTC_TIMEZONES: {
-    value: string;
-    label: string;
-}[];
-/**
- * @returns Current date string in format `YYYY-MM-DD`
- */
-export declare const getCurrentDateString: () => string;
-export declare const DEFAULT_TIME = "00:00:00";
-export declare const DEFAULT_DATE: string;
+import React from "react";
+import type { CmsModelField } from "../../../../types";
 export declare const DEFAULT_TIMEZONE = "+01:00";
-export declare const RemoveFieldButton: ({ trailingIcon }: {
+export declare const getDefaultFieldValue: (field: CmsModelField, bind: {
+    value: string | null | undefined;
+}, getCurrent: () => string) => string;
+export declare const getCurrentTimeZone: (date?: Date) => string | null;
+export declare const getCurrentLocalTime: (date?: Date) => string;
+export declare const getCurrentDate: (date?: Date) => string;
+export declare const getHHmm: (time?: string) => string;
+export declare const getHHmmss: (time?: string) => string;
+interface RemoveFieldButtonProps {
     trailingIcon: any;
-}) => JSX.Element;
+}
+export declare const RemoveFieldButton: ({ trailingIcon }: RemoveFieldButtonProps) => React.JSX.Element | null;
+export {};

package/admin/plugins/fieldRenderers/dateTime/utils.js

@@ -1,153 +1,75 @@
 import React from "react";
-import { css } from "emotion";
-import { Cell } from "@webiny/ui/Grid";
-import { IconButton } from "@webiny/ui/Button";
-export var UTC_TIMEZONES = [{
-  value: "-12:00",
-  label: "UTC-12:00"
-}, {
-  value: "-11:00",
-  label: "UTC-11:00"
-}, {
-  value: "-10:00",
-  label: "UTC-10:00"
-}, {
-  value: "-09:30",
-  label: "UTC-09:30"
-}, {
-  value: "-09:00",
-  label: "UTC-09:00"
-}, {
-  value: "-08:00",
-  label: "UTC-08:00"
-}, {
-  value: "-07:00",
-  label: "UTC-07:00"
-}, {
-  value: "-06:00",
-  label: "UTC-06:00"
-}, {
-  value: "-05:00",
-  label: "UTC-05:00"
-}, {
-  value: "-04:30",
-  label: "UTC-04:30"
-}, {
-  value: "-04:00",
-  label: "UTC-04:00"
-}, {
-  value: "-03:30",
-  label: "UTC-03:30"
-}, {
-  value: "-03:00",
-  label: "UTC-03:00"
-}, {
-  value: "-02:00",
-  label: "UTC-02:00"
-}, {
-  value: "-01:00",
-  label: "UTC-01:00"
-}, {
-  value: "+00:00",
-  label: "UTC+00:00"
-}, {
-  value: "+01:00",
-  label: "UTC+01:00"
-}, {
-  value: "+02:00",
-  label: "UTC+02:00"
-}, {
-  value: "+03:00",
-  label: "UTC+03:00"
-}, {
-  value: "+03:30",
-  label: "UTC+03:30"
-}, {
-  value: "+04:00",
-  label: "UTC+04:00"
-}, {
-  value: "+04:30",
-  label: "UTC+04:30"
-}, {
-  value: "+05:30",
-  label: "UTC+05:30"
-}, {
-  value: "+05:45",
-  label: "UTC+05:45"
-}, {
-  value: "+06:00",
-  label: "UTC+06:00"
-}, {
-  value: "+06:30",
-  label: "UTC+06:30"
-}, {
-  value: "+07:00",
-  label: "UTC+07:00"
-}, {
-  value: "+08:00",
-  label: "UTC+08:00"
-}, {
-  value: "+08:45",
-  label: "UTC+08:45"
-}, {
-  value: "+09:00",
-  label: "UTC+09:00"
-}, {
-  value: "+09:30",
-  label: "UTC+09:30"
-}, {
-  value: "+10:00",
-  label: "UTC+10:00"
-}, {
-  value: "+10:30",
-  label: "UTC+10:30"
-}, {
-  value: "+11:00",
-  label: "UTC+11:00"
-}, {
-  value: "+11:30",
-  label: "UTC+11:30"
-}, {
-  value: "+12:00",
-  label: "UTC+12:00"
-}, {
-  value: "+12:45",
-  label: "UTC+12:45"
-}, {
-  value: "+13:00",
-  label: "UTC+13:00"
-}, {
-  value: "+14:00",
-  label: "UTC+14:00"
-}];
-/**
- * @returns Current date string in format `YYYY-MM-DD`
- */
-
-export var getCurrentDateString = function getCurrentDateString() {
-  var today = new Date().toISOString();
-  return today.substr(0, 10);
+import { Grid, IconButton } from "@webiny/admin-ui";
+export const DEFAULT_TIMEZONE = "+01:00";
+export const getDefaultFieldValue = (field, bind, getCurrent) => {
+  const def = field.settings ? field.settings.defaultSetValue || "null" : "null";
+  if (bind.value || def !== "current") {
+    return bind.value || "";
+  }
+  return getCurrent();
+};
+export const getCurrentTimeZone = date => {
+  if (!date) {
+    date = new Date();
+  }
+  const value = date.toTimeString();
+  const matches = value.match(/GMT([+-][0-9]{4})/);
+  if (!matches) {
+    return null;
+  }
+  const timezone = matches[1];
+  return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;
+};
+export const getCurrentLocalTime = date => {
+  if (!date) {
+    date = new Date();
+  }
+  const value = date.toTimeString();
+  const [time] = value.split(" ");
+  if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {
+    return "00:00:00";
+  }
+  return time;
+};
+export const getCurrentDate = date => {
+  if (!date) {
+    date = new Date();
+  }
+  const year = String(date.getFullYear()).padStart(4, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+export const getHHmm = time => {
+  if (!time) {
+    return "";
+  }
+  const parsableTime = time || getCurrentLocalTime();
+  return parsableTime.split(":").slice(0, 2).join(":");
 };
-export var DEFAULT_TIME = "00:00:00";
-export var DEFAULT_DATE = getCurrentDateString();
-export var DEFAULT_TIMEZONE = "+01:00";
-var deleteIconStyles = /*#__PURE__*/css({
-  width: "100% !important",
-  height: "100% !important",
-  color: "var(--mdc-theme-text-secondary-on-background) !important"
-}, "label:deleteIconStyles;");
-export var RemoveFieldButton = function RemoveFieldButton(_ref) {
-  var trailingIcon = _ref.trailingIcon;
 
+// Ensure a valid HH:mm:ss string, ending with :00 for seconds.
+export const getHHmmss = time => {
+  const parsableTime = time || getCurrentLocalTime();
+  const parts = [...parsableTime.split(":").slice(0, 2), "00"];
+  return parts.join(":");
+};
+export const RemoveFieldButton = ({
+  trailingIcon
+}) => {
   if (!trailingIcon) {
     return null;
   }
-
-  return /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/React.createElement(Grid.Column, {
     span: 1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-end wby-justify-center wby-h-full"
   }, /*#__PURE__*/React.createElement(IconButton, {
-    className: deleteIconStyles,
+    variant: "ghost",
     onClick: trailingIcon.onClick,
-    icon: trailingIcon.icon
-  }));
-};
+    icon: trailingIcon.icon,
+    className: "wby-mb-xs-plus"
+  })));
+};
+
+//# sourceMappingURL=utils.js.map

package/admin/plugins/fieldRenderers/dateTime/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Grid","IconButton","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","value","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","time","split","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","getHHmm","parsableTime","join","getHHmmss","parts","RemoveFieldButton","trailingIcon","createElement","Column","span","className","variant","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, IconButton } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types\";\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsModelField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nexport const getHHmm = (time?: string) => {\n    if (!time) {\n        return \"\";\n    }\n    const parsableTime = time || getCurrentLocalTime();\n    return parsableTime.split(\":\").slice(0, 2).join(\":\");\n};\n\n// Ensure a valid HH:mm:ss string, ending with :00 for seconds.\nexport const getHHmmss = (time?: string) => {\n    const parsableTime = time || getCurrentLocalTime();\n    const parts = [...parsableTime.split(\":\").slice(0, 2), \"00\"];\n\n    return parts.join(\":\");\n};\n\ninterface RemoveFieldButtonProps {\n    trailingIcon: any;\n}\nexport const RemoveFieldButton = ({ trailingIcon }: RemoveFieldButtonProps) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Grid.Column span={1}>\n            <div className={\"wby-flex wby-items-end wby-justify-center wby-h-full\"}>\n                <IconButton\n                    variant={\"ghost\"}\n                    onClick={trailingIcon.onClick}\n                    icon={trailingIcon.icon}\n                    className={\"wby-mb-xs-plus\"}\n                />\n            </div>\n        </Grid.Column>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { CmsDynamicZoneTemplateWithTypename } from "../../../../types";
+interface UseAddTemplateParams {
+    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;
+}
+interface AddTemplateProps {
+    label?: string;
+    onTemplate: UseAddTemplateParams["onTemplate"];
+}
+export declare const AddTemplateButton: (props: AddTemplateProps) => React.JSX.Element;
+export declare const AddTemplateIcon: (props: AddTemplateProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.js

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as AddCircleIcon } from "@webiny/icons/add_circle_outline.svg";
+import { TemplateGallery } from "./TemplateGallery";
+import { useTemplateTypename } from "./useTemplateTypename";
+import { Button, cn, IconButton, Link, Text, Tooltip } from "@webiny/admin-ui";
+function useAddTemplate(params) {
+  const [showGallery, setShowGallery] = useState(false);
+  const {
+    getFullTypename
+  } = useTemplateTypename();
+  const browseTemplates = () => {
+    setShowGallery(true);
+  };
+  const onTemplate = template => {
+    params.onTemplate({
+      ...template,
+      __typename: getFullTypename(template)
+    });
+    onGalleryClose();
+  };
+  const onGalleryClose = () => {
+    setShowGallery(false);
+  };
+  return {
+    showGallery,
+    browseTemplates,
+    onTemplate,
+    onGalleryClose
+  };
+}
+export const AddTemplateButton = props => {
+  const {
+    showGallery,
+    onTemplate,
+    browseTemplates,
+    onGalleryClose
+  } = useAddTemplate({
+    onTemplate: props.onTemplate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-mb-md wby-relative"
+  }, showGallery ? /*#__PURE__*/React.createElement(TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-w-full wby-flex wby-flex-col wby-gap-sm-extra wby-px-xl wby-pt-xl wby-pb-lg wby-bg-neutral-subtle wby-rounded wby-text-center", "hover:wby-bg-neutral-light"])
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "ghost",
+    onClick: browseTemplates,
+    text: "Pick a template",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    className: "wby-text-neutral-strong"
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: "http://webiny.link/admin/how-to-use/dynamic-zones",
+    target: "_blank"
+  }, "Learn how"), " ", "templates and dynamic zones work."))));
+};
+export const AddTemplateIcon = props => {
+  const {
+    showGallery,
+    onTemplate,
+    browseTemplates,
+    onGalleryClose
+  } = useAddTemplate({
+    onTemplate: props.onTemplate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-text-center wby-mt-md"
+  }, showGallery ? /*#__PURE__*/React.createElement(TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Add template",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: browseTemplates,
+      icon: /*#__PURE__*/React.createElement(AddCircleIcon, null),
+      size: "lg",
+      variant: "ghost"
+    })
+  }));
+};
+
+//# sourceMappingURL=AddTemplate.js.map

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ReactComponent","AddIcon","AddCircleIcon","TemplateGallery","useTemplateTypename","Button","cn","IconButton","Link","Text","Tooltip","useAddTemplate","params","showGallery","setShowGallery","getFullTypename","browseTemplates","onTemplate","template","__typename","onGalleryClose","AddTemplateButton","props","createElement","className","onClose","size","variant","onClick","text","icon","to","target","AddTemplateIcon","content","trigger"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as AddCircleIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { CmsDynamicZoneTemplate, CmsDynamicZoneTemplateWithTypename } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { useTemplateTypename } from \"~/admin/plugins/fieldRenderers/dynamicZone/useTemplateTypename\";\nimport { Button, cn, IconButton, Link, Text, Tooltip } from \"@webiny/admin-ui\";\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n    const { getFullTypename } = useTemplateTypename();\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate({ ...template, __typename: getFullTypename(template) });\n        onGalleryClose();\n    };\n\n    const onGalleryClose = () => {\n        setShowGallery(false);\n    };\n\n    return {\n        showGallery,\n        browseTemplates,\n        onTemplate,\n        onGalleryClose\n    };\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div\n            className={\n                \"wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-mb-md wby-relative\"\n            }\n        >\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <div\n                    className={cn([\n                        \"wby-w-full wby-flex wby-flex-col wby-gap-sm-extra wby-px-xl wby-pt-xl wby-pb-lg wby-bg-neutral-subtle wby-rounded wby-text-center\",\n                        \"hover:wby-bg-neutral-light\"\n                    ])}\n                >\n                    <Button\n                        size={\"sm\"}\n                        variant={\"ghost\"}\n                        onClick={browseTemplates}\n                        text={\"Pick a template\"}\n                        icon={<AddIcon />}\n                    />\n                    <div\n                        className={\n                            \"wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center\"\n                        }\n                    >\n                        <Text size={\"sm\"} className={\"wby-text-neutral-strong\"}>\n                            <Link\n                                to={\"http://webiny.link/admin/how-to-use/dynamic-zones\"}\n                                target={\"_blank\"}\n                            >\n                                Learn how\n                            </Link>{\" \"}\n                            templates and dynamic zones work.\n                        </Text>\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div className={\"wby-w-full wby-text-center wby-mt-md\"}>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <Tooltip\n                    content={\"Add template\"}\n                    trigger={\n                        <IconButton\n                            onClick={browseTemplates}\n                            icon={<AddCircleIcon />}\n                            size={\"lg\"}\n                            variant={\"ghost\"}\n                        />\n                    }\n                />\n            )}\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.d.ts

@@ -0,0 +1,96 @@
+import React from "react";
+import type { BindComponent, BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+export interface MultiValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    onClone: (value: TemplateValue) => void;
+    title: React.ReactNode;
+    description: string;
+    icon: JSX.Element;
+    actions?: JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const MultiValueItemContainer: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+    original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export interface MultiValueItemItemProps {
+    template: CmsDynamicZoneTemplate;
+    contentModel: CmsModel;
+    Bind: BindComponent;
+}
+export declare const MultiValueItem: ((props: MultiValueItemItemProps) => React.JSX.Element) & {
+    original: (props: MultiValueItemItemProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: MultiValueItemItemProps) => React.JSX.Element) & {
+        original: (props: MultiValueItemItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: MultiValueItemItemProps) => React.JSX.Element) & {
+        original: (props: MultiValueItemItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+export interface MultiValueContainerProps extends MultiValueDynamicZoneProps {
+    children: React.ReactNode;
+}
+export declare const MultiValueContainer: (({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+    original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+        original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+        original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface MultiValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const MultiValueDynamicZone: (props: MultiValueDynamicZoneProps) => React.JSX.Element;
+export {};