@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/admin/components/ContentModelEditor/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","prompt","ContentContainer","styled","paddingTop","EditContainer","padding","position","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","useModelEditor","data","setData","isPristine","tabsRef","useRef","useState","activeTabIndex","setActiveTabIndex","onChange","fields","layout","current","switchTab","e"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs, TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useModelEditor } from \"./useModelEditor\";\nimport { CmsModelField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor: React.FC = () => {\n    const { data, setData, isPristine } = useModelEditor();\n\n    const tabsRef = useRef<TabsImperativeApi>();\n    const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    if (!tabsRef.current) {\n                                        return;\n                                    }\n                                    tabsRef.current.switchTab(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            className={formTabs}\n                            ref={tabsRef}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":"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"}

package/admin/components/ContentModelEditor/FieldsSidebar.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
-export declare const FieldsSidebar: ({ onFieldDragStart }: {
-    onFieldDragStart: any;
-}) => JSX.Element;
+import React, { DragEventHandler } from "react";
+interface FieldsSidebarProps {
+    onFieldDragStart: DragEventHandler;
+}
+export declare const FieldsSidebar: React.FC<FieldsSidebarProps>;
+export {};

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -1,9 +1,16 @@
-import React from "react";
-import { plugins } from "@webiny/plugins";
-import styled from "@emotion/styled";
-import { Icon } from "@webiny/ui/Icon";
-import Draggable from "../Draggable";
-var FieldContainer = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldsSidebar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _plugins = require("@webiny/plugins");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Icon = require("@webiny/ui/Icon");
+var _Draggable = _interopRequireDefault(require("../Draggable"));
+var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i00",
   label: "FieldContainer"
 })({
@@ -24,11 +31,11 @@ var FieldContainer = /*#__PURE__*/styled("div", {
     marginBottom: 0
   }
 });
-var FileInfo = /*#__PURE__*/styled("div", {
+var FileInfo = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i01",
   label: "FileInfo"
 })({});
-var FieldLabel = /*#__PURE__*/styled("div", {
+var FieldLabel = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i02",
   label: "FieldLabel"
 })({
@@ -36,56 +43,55 @@ var FieldLabel = /*#__PURE__*/styled("div", {
   lineHeight: "145%",
   color: "var(--mdc-theme-on-surface)"
 });
-var FieldDescription = /*#__PURE__*/styled("div", {
+var FieldDescription = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i03",
   label: "FieldDescription"
 })({
   fontSize: 14,
   color: "var(--mdc-theme-text-secondary-on-background)"
 });
-var FieldHandle = /*#__PURE__*/styled("div", {
+var FieldHandle = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i04",
   label: "FieldHandle"
 })({
   marginRight: 15,
   color: "var(--mdc-theme-on-surface)"
 });
-
-var Field = function Field(_ref) {
-  var onFieldDragStart = _ref.onFieldDragStart,
-      _ref$fieldType = _ref.fieldType,
-      type = _ref$fieldType.type,
-      label = _ref$fieldType.label,
-      icon = _ref$fieldType.icon,
-      description = _ref$fieldType.description;
-  return /*#__PURE__*/React.createElement(Draggable, {
+var Field = function Field(props) {
+  var onFieldDragStart = props.onFieldDragStart,
+    _props$fieldType = props.fieldType,
+    type = _props$fieldType.type,
+    label = _props$fieldType.label,
+    icon = _props$fieldType.icon,
+    description = _props$fieldType.description;
+  return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
     beginDrag: {
       type: "newField",
       fieldType: type
     }
-  }, function (_ref2) {
-    var drag = _ref2.drag;
-    return /*#__PURE__*/React.createElement("div", {
+  }, function (_ref) {
+    var drag = _ref.drag;
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: drag,
       style: {
         marginBottom: 10
       },
       "data-testid": "cms-editor-fields-field-".concat(type),
       onDragStart: onFieldDragStart
-    }, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(FieldHandle, null, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(FieldHandle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       icon: icon
-    })), /*#__PURE__*/React.createElement(FileInfo, null, /*#__PURE__*/React.createElement(FieldLabel, null, label), /*#__PURE__*/React.createElement(FieldDescription, null, description))));
+    })), /*#__PURE__*/_react.default.createElement(FileInfo, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(FieldDescription, null, description))));
   });
 };
-
-export var FieldsSidebar = function FieldsSidebar(_ref3) {
-  var onFieldDragStart = _ref3.onFieldDragStart;
-  var fieldTypePlugin = plugins.byType("cms-editor-field-type");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
-    return /*#__PURE__*/React.createElement(Field, {
+var FieldsSidebar = function FieldsSidebar(_ref2) {
+  var onFieldDragStart = _ref2.onFieldDragStart;
+  var fieldTypePlugin = _plugins.plugins.byType("cms-editor-field-type");
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
+    return /*#__PURE__*/_react.default.createElement(Field, {
       key: fieldPlugin.field.type,
       fieldType: fieldPlugin.field,
       onFieldDragStart: onFieldDragStart
     });
   }));
-};
+};
+exports.FieldsSidebar = FieldsSidebar;

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,OAAO,EAAE,WAAW;EACpBC,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,MAAM;EACfC,KAAK,EAAE,MAAM;EACbC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,EAAE;EAChBC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,CAAC;EACVC,UAAU,EAAE,eAAe;EAC3B,SAAS,EAAE;IACPD,OAAO,EAAE;EACb,CAAC;EACD,cAAc,EAAE;IACZP,YAAY,EAAE;EAClB;AACJ,CAAC,CAAC;AAEF,IAAMS,QAAQ,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE,CAAC,CAAC,CAAC;AAElC,IAAMY,UAAU,oBAAGZ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC7Ba,aAAa,EAAE,WAAW;EAC1BC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,gBAAgB,oBAAGhB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCiB,QAAQ,EAAE,EAAE;EACZF,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMG,WAAW,oBAAGlB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC9BmB,WAAW,EAAE,EAAE;EACfJ,KAAK,EAAE;AACX,CAAC,CAAC;AAMF,IAAMK,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IACIC,gBAAgB,GAEhBD,KAAK,CAFLC,gBAAgB;IAAA,mBAEhBD,KAAK,CADLE,SAAS;IAAIC,IAAI,oBAAJA,IAAI;IAAEC,KAAK,oBAALA,KAAK;IAAEC,IAAI,oBAAJA,IAAI;IAAEC,WAAW,oBAAXA,WAAW;EAE/C,oBACI,6BAAC,kBAAS;IAAC,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAU;MAAED,SAAS,EAAEC;IAAK;EAAE,GACvD;IAAA,IAAGI,IAAI,QAAJA,IAAI;IAAA,oBACJ;MACI,GAAG,EAAEA,IAAK;MACV,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAG,CAAE;MAC5B,iDAAwCsB,IAAI,CAAG;MAC/C,WAAW,EAAEF;IAAiB,gBAE9B,6BAAC,cAAc,qBACX,6BAAC,WAAW,qBACR,6BAAC,UAAI;MAAC,IAAI,EAAEI;IAA2B,EAAG,CAChC,eACd,6BAAC,QAAQ,qBACL,6BAAC,UAAU,QAAED,KAAK,CAAc,eAChC,6BAAC,gBAAgB,QAAEE,WAAW,CAAoB,CAC3C,CACE,CACf;EAAA,CACT,CACO;AAEpB,CAAC;AAKM,IAAME,aAA2C,GAAG,SAA9CA,aAA2C,QAA6B;EAAA,IAAvBP,gBAAgB,SAAhBA,gBAAgB;EAC1E,IAAMQ,eAAe,GAAGC,gBAAO,CAACC,MAAM,CAA0B,uBAAuB,CAAC;EAExF,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVF,eAAe,CAACG,GAAG,CAAC,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAK;MACF,GAAG,EAAEA,WAAW,CAACC,KAAK,CAACX,IAAK;MAC5B,SAAS,EAAEU,WAAW,CAACC,KAAM;MAC7B,gBAAgB,EAAEb;IAAiB,EACrC;EAAA,CACL,CAAC,CACW;AAEzB,CAAC;AAAC"}

package/admin/components/ContentModelEditor/Header.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function EditorBar(): JSX.Element;
+import React from "react";
+declare const EditorBar: React.FC;
+export default EditorBar;

package/admin/components/ContentModelEditor/Header.js

@@ -1,24 +1,33 @@
-import React from "react";
-import { TopAppBar, TopAppBarSection } from "@webiny/ui/TopAppBar";
-import { renderPlugins } from "@webiny/app/plugins";
-import { css } from "emotion";
-var topBar = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TopAppBar = require("@webiny/ui/TopAppBar");
+var _plugins = require("@webiny/app/plugins");
+var _emotion = require("emotion");
+var topBar = /*#__PURE__*/(0, _emotion.css)({
   boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
 }, "label:topBar;");
-export default function EditorBar() {
-  return /*#__PURE__*/React.createElement(TopAppBar, {
+var EditorBar = function EditorBar() {
+  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, {
     className: topBar,
     fixed: true,
     "data-testid": "cms-editor-top-bar"
-  }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+  }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
     style: {
       width: "50%"
     },
     alignEnd: true
-  }, renderPlugins("content-model-editor-default-bar-left")), /*#__PURE__*/React.createElement(TopAppBarSection, {
+  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-left")), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
     style: {
       width: "50%"
     },
     alignEnd: true
-  }, renderPlugins("content-model-editor-default-bar-right")));
-}
+  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-right")));
+};
+var _default = EditorBar;
+exports.default = _default;

package/admin/components/ContentModelEditor/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,SAAS,EAAE;AACf,CAAC,kBAAC;AAEF,IAAMC,SAAmB,GAAG,SAAtBA,SAAmB,GAAS;EAC9B,oBACI,6BAAC,oBAAS;IAAC,SAAS,EAAEH,MAAO;IAAC,KAAK;IAAC,eAAa;EAAqB,gBAClE,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,uCAAuC,CAAC,CACxC,eAEnB,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAED,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,wCAAwC,CAAC,CACzC,CACX;AAEpB,CAAC;AAAC,eAEaF,SAAS;AAAA"}

package/admin/components/ContentModelEditor/PreviewTab.js

@@ -1,36 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewTab = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _emotion = require("emotion");
+var _Elevation = require("@webiny/ui/Elevation");
+var _i18n = require("@webiny/app/i18n");
+var _hooks = require("../../hooks");
+var _ContentEntryFormPreview = require("../ContentEntryForm/ContentEntryFormPreview");
 var _templateObject;
-
-import React from "react";
-import { css } from "emotion";
-import { Elevation } from "@webiny/ui/Elevation";
-import { i18n } from "@webiny/app/i18n";
-import { useContentModelEditor } from "./useContentModelEditor";
-import { ContentEntryFormPreview } from "../ContentEntryForm/ContentEntryFormPreview";
-var t = i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
-var formPreviewWrapper = /*#__PURE__*/css({
+var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
+var formPreviewWrapper = /*#__PURE__*/(0, _emotion.css)({
   padding: 40,
   margin: 40,
   boxSizing: "border-box"
 }, "label:formPreviewWrapper;");
 var style = {
-  noFieldsMessage: /*#__PURE__*/css({
+  noFieldsMessage: /*#__PURE__*/(0, _emotion.css)({
     textAlign: "center"
   }, "label:noFieldsMessage;")
 };
-export var PreviewTab = function PreviewTab(_ref) {
+var PreviewTab = function PreviewTab(_ref) {
   var activeTab = _ref.activeTab;
-
-  var _useContentModelEdito = useContentModelEditor(),
-      data = _useContentModelEdito.data;
-
-  return /*#__PURE__*/React.createElement(Elevation, {
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+    data = _useModelEditor.data;
+  return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
     z: 1,
     className: formPreviewWrapper
-  }, data.fields && data.fields.length && activeTab ? /*#__PURE__*/React.createElement(ContentEntryFormPreview, {
+  }, data.fields && data.fields.length && activeTab ? /*#__PURE__*/_react.default.createElement(_ContentEntryFormPreview.ContentEntryFormPreview, {
     contentModel: data
-  }) : /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/_react.default.createElement("div", {
     className: style.noFieldsMessage
-  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Before previewing the form, please add at least one field to the content model."])))));
-};
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Before previewing the form, please add at least one field to the content model."])))));
+};
+exports.PreviewTab = PreviewTab;

package/admin/components/ContentModelEditor/PreviewTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAAsF;AAEtF,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,uDAAuD,CAAC;AAE1E,IAAMC,kBAAkB,gBAAG,IAAAC,YAAG,EAAC;EAC3BC,OAAO,EAAE,EAAE;EACXC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE;AACf,CAAC,8BAAC;AAEF,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAG,EAAC;IACjBM,SAAS,EAAE;EACf,CAAC;AACL,CAAC;AAEM,IAAMC,UAA+B,GAAG,SAAlCA,UAA+B,OAAsB;EAAA,IAAhBC,SAAS,QAATA,SAAS;EACvD,sBAAiB,IAAAC,qBAAc,GAAE;IAAzBC,IAAI,mBAAJA,IAAI;EAEZ,oBACI,6BAAC,oBAAS;IAAC,CAAC,EAAE,CAAE;IAAC,SAAS,EAAEX;EAAmB,GAC1CW,IAAI,CAACC,MAAM,IAAID,IAAI,CAACC,MAAM,CAACC,MAAM,IAAIJ,SAAS,gBAC3C,6BAAC,gDAAuB;IAAC,YAAY,EAAEE;EAAK,EAAG,gBAE/C;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAgB,GACjCT,CAAC,mKAET,CACO;AAEpB,CAAC;AAAC"}

package/admin/components/ContentModelEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ContentModelEditorProvider";
+export * from "./useModelEditor";

package/admin/components/ContentModelEditor/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+Object.keys(_ContentModelEditorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContentModelEditorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ContentModelEditorProvider[key];
+    }
+  });
+});
+var _useModelEditor = require("./useModelEditor");
+Object.keys(_useModelEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModelEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useModelEditor[key];
+    }
+  });
+});

package/admin/components/ContentModelEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ContentModelEditorProvider\";\nexport * from \"./useModelEditor\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/admin/components/ContentModelEditor/useModelEditor.d.ts

@@ -0,0 +1 @@
+export declare function useModelEditor(): import("./ContentModelEditorProvider").ContentModelEditorProviderContext;

package/admin/components/ContentModelEditor/useModelEditor.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModelEditor = useModelEditor;
+var _react = _interopRequireDefault(require("react"));
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+function useModelEditor() {
+  var context = _react.default.useContext(_ContentModelEditorProvider.contentModelEditorContext);
+  if (!context) {
+    throw new Error("useContentModelEditor must be used within a ContentModelEditorProvider");
+  }
+  return context;
+}

package/admin/components/ContentModelEditor/useModelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useModelEditor","context","React","useContext","contentModelEditorContext","Error"],"sources":["useModelEditor.ts"],"sourcesContent":["import React from \"react\";\nimport { contentModelEditorContext } from \"./ContentModelEditorProvider\";\n\nexport function useModelEditor() {\n    const context = React.useContext(contentModelEditorContext);\n    if (!context) {\n        throw new Error(\"useContentModelEditor must be used within a ContentModelEditorProvider\");\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,SAASA,cAAc,GAAG;EAC7B,IAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,qDAAyB,CAAC;EAC3D,IAAI,CAACH,OAAO,EAAE;IACV,MAAM,IAAII,KAAK,CAAC,wEAAwE,CAAC;EAC7F;EAEA,OAAOJ,OAAO;AAClB"}

package/admin/components/DelayedOnChange.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+interface OnChangeCbCallable {
+    (value: string): void;
+}
+interface OnChangeCallable {
+    (value: string, cb?: OnChangeCbCallable): void;
+}
+interface ChildrenParams {
+    value: string;
+    onChange: OnChangeCallable;
+}
+interface DelayedOnChangeProps {
+    delay?: number;
+    value?: string;
+    onChange: OnChangeCallable;
+    onKeyDown?: (ev: React.SyntheticEvent) => void;
+    onBlur?: (ev: React.SyntheticEvent) => void;
+    children: (params: ChildrenParams) => React.ReactElement;
+}
+interface DelayedOnChangeState {
+    value?: string;
+}
+declare class DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {
+    static defaultProps: Partial<DelayedOnChangeProps>;
+    private delay;
+    readonly state: DelayedOnChangeState;
+    componentDidMount(): void;
+    private applyValue;
+    private onChange;
+    private changed;
+    render(): React.ReactNode;
+}
+export default DelayedOnChange;

package/admin/components/DelayedOnChange.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _excluded = ["children"];
+var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DelayedOnChange, _React$Component);
+  var _super = (0, _createSuper2.default)(DelayedOnChange);
+  function DelayedOnChange() {
+    var _this;
+    (0, _classCallCheck2.default)(this, DelayedOnChange);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "delay", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      value: ""
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyValue", function (value) {
+      var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop.default;
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+      _this.props.onChange(value, callback);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
+      _this.setState({
+        value: value
+      }, _this.changed);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changed", function () {
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+      _this.delay = setTimeout(function () {
+        return _this.applyValue(_this.state.value);
+      }, _this.props.delay);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(DelayedOnChange, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        value: this.props.value
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        children = _this$props.children,
+        other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+        value: this.state.value,
+        onChange: this.onChange
+      });
+      var renderProp = typeof children === "function" ? children : false;
+      var child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
+      var props = (0, _objectSpread2.default)({}, child.props);
+      var realOnKeyDown = props.onKeyDown || _noop.default;
+      var realOnBlur = props.onBlur || _noop.default;
+
+      // Need to apply value if input lost focus
+      props.onBlur = function (ev) {
+        ev.persist();
+        _this2.applyValue(ev.target.value, function () {
+          return realOnBlur(ev);
+        });
+      };
+
+      // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+      props.onKeyDown = function (ev) {
+        ev.persist();
+        if (ev.key === "Tab") {
+          _this2.applyValue(ev.target.value, function () {
+            return realOnKeyDown(ev);
+          });
+        } else if (ev.key === "Enter" && props["data-on-enter"]) {
+          _this2.applyValue(ev.target.value, function () {
+            return realOnKeyDown(ev);
+          });
+        } else {
+          realOnKeyDown(ev);
+        }
+      };
+      return /*#__PURE__*/React.cloneElement(child, props);
+    }
+  }]);
+  return DelayedOnChange;
+}(React.Component);
+(0, _defineProperty2.default)(DelayedOnChange, "defaultProps", {
+  delay: 400
+});
+var _default = DelayedOnChange;
+exports.default = _default;

package/admin/components/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DelayedOnChange","value","callback","noop","delay","clearTimeout","props","onChange","setState","changed","setTimeout","applyValue","state","children","other","newProps","renderProp","child","React","cloneElement","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","Component"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import * as React from \"react\";\nimport noop from \"lodash/noop\";\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCbCallable {\n    (value: string): void;\n}\ninterface OnChangeCallable {\n    (value: string, cb?: OnChangeCbCallable): void;\n}\ninterface ChildrenParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface DelayedOnChangeProps {\n    delay?: number;\n    value?: string;\n    onChange: OnChangeCallable;\n    onKeyDown?: (ev: React.SyntheticEvent) => void;\n    onBlur?: (ev: React.SyntheticEvent) => void;\n    children: (params: ChildrenParams) => React.ReactElement;\n}\ninterface DelayedOnChangeState {\n    value?: string;\n}\nclass DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {\n    static defaultProps: Partial<DelayedOnChangeProps> = {\n        delay: 400\n    };\n\n    private delay: number | null = null;\n\n    public override readonly state: DelayedOnChangeState = {\n        value: \"\"\n    };\n\n    public override componentDidMount() {\n        this.setState({ value: this.props.value });\n    }\n\n    private applyValue = (value: any, callback: OnChangeCbCallable = noop): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.props.onChange(value, callback);\n    };\n\n    private onChange = (value: string): void => {\n        this.setState({ value }, this.changed);\n    };\n\n    private changed = (): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.delay = setTimeout(\n            () => this.applyValue(this.state.value),\n            this.props.delay\n        ) as unknown as number;\n    };\n\n    public override render(): React.ReactNode {\n        const { children, ...other } = this.props;\n        const newProps: Omit<DelayedOnChangeProps, \"children\"> = {\n            ...other,\n            value: this.state.value,\n            onChange: this.onChange\n        };\n\n        const renderProp = typeof children === \"function\" ? children : false;\n        const child = renderProp\n            ? renderProp(newProps as Required<DelayedOnChangeProps>)\n            : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n        const props = { ...child.props };\n        const realOnKeyDown = props.onKeyDown || noop;\n        const realOnBlur = props.onBlur || noop;\n\n        // Need to apply value if input lost focus\n        props.onBlur = (ev: React.SyntheticEvent) => {\n            ev.persist();\n            this.applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n        };\n\n        // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n        props.onKeyDown = (ev: React.KeyboardEvent) => {\n            ev.persist();\n            if (ev.key === \"Tab\") {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else {\n                realOnKeyDown(ev);\n            }\n        };\n\n        return React.cloneElement(child, props);\n    }\n}\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/admin/components/Dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
+export * from "@webiny/ui/Dialog";
+export declare const Dialog: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, Pick<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, keyof import("@webiny/ui/Dialog").DialogProps>, object>;

package/admin/components/Dialog.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dialog: true
+};
+exports.Dialog = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Dialog = require("@webiny/ui/Dialog");
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});
+var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  label: "Dialog",
+  target: "e1q5k1p00"
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+exports.Dialog = Dialog;

package/admin/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,8JAatC;AAAC"}

package/admin/components/DragPreview.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function DragPreview(): JSX.Element;
+import React from "react";
+declare const DragPreview: React.FC;
+export default DragPreview;