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

package/BaseEditor/defaultConfig/DefaultEditorConfig.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { ReactComponent as TouchIcon } from "@webiny/icons/touch_app.svg";
+import { Breadcrumbs } from "./Content/Breadcrumbs";
+import { Background } from "./Content/Background";
+import { EditorConfig } from "../config";
+import { InfoMessage } from "./Sidebar/InfoMessage";
+import { StyleSettingsGroup } from "./Sidebar/StyleSettings/StyleSettingsGroup";
+import { StyleProperties } from "./Sidebar/StyleSettings/StyleProperties";
+import { ElementSettingsGroup } from "./Sidebar/ElementSettings/ElementSettingsGroup";
+import { InsertElementsTab } from "./Toolbar/InsertElements/InsertElementsTab";
+import { NavigatorTab } from "./Toolbar/Navigator/NavigatorTab";
+import { CommandHandlers } from "../commandHandlers";
+import { ElementSettings } from "./Sidebar/ElementSettings/ElementSettings";
+import { ElementInputRenderers } from "./ElementInputRenderers";
+import { DocumentPreview } from "./Content/Preview/DocumentPreview";
+const {
+  Ui
+} = EditorConfig;
+const ClickToActivate = () => {
+  return /*#__PURE__*/React.createElement(Ui.NoActiveElement, null, /*#__PURE__*/React.createElement(InfoMessage, {
+    icon: /*#__PURE__*/React.createElement(TouchIcon, null),
+    message: "Select an element on the canvas to activate this panel."
+  }));
+};
+export const DefaultEditorConfig = /*#__PURE__*/React.memo(() => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorConfig, null, /*#__PURE__*/React.createElement(CommandHandlers, null), /*#__PURE__*/React.createElement(ElementInputRenderers, null), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "breadcrumbs",
+    element: /*#__PURE__*/React.createElement(Breadcrumbs, null)
+  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "background",
+    element: /*#__PURE__*/React.createElement(Background, null)
+  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "preview",
+    element: /*#__PURE__*/React.createElement(DocumentPreview, null)
+  }), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
+    name: "insertElements",
+    group: "tabs",
+    element: /*#__PURE__*/React.createElement(InsertElementsTab, null)
+  }), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
+    name: "navigator",
+    group: "tabs",
+    element: /*#__PURE__*/React.createElement(NavigatorTab, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Group, {
+    name: "element",
+    element: /*#__PURE__*/React.createElement(ElementSettingsGroup, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Group, {
+    name: "style",
+    element: /*#__PURE__*/React.createElement(StyleSettingsGroup, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "styleSettings",
+    group: "style",
+    element: /*#__PURE__*/React.createElement(Ui.OnActiveElement, null, /*#__PURE__*/React.createElement(StyleProperties, null))
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "styleInactive",
+    group: "style",
+    element: /*#__PURE__*/React.createElement(ClickToActivate, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "elementInactive",
+    group: "element",
+    element: /*#__PURE__*/React.createElement(ClickToActivate, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "elementSettings",
+    group: "element",
+    element: /*#__PURE__*/React.createElement(Ui.OnActiveElement, null, /*#__PURE__*/React.createElement(ElementSettings, null))
+  })));
+});
+DefaultEditorConfig.displayName = "DefaultEditorConfig";
+
+//# sourceMappingURL=DefaultEditorConfig.js.map

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","TouchIcon","Breadcrumbs","Background","EditorConfig","InfoMessage","StyleSettingsGroup","StyleProperties","ElementSettingsGroup","InsertElementsTab","NavigatorTab","CommandHandlers","ElementSettings","ElementInputRenderers","DocumentPreview","Ui","ClickToActivate","createElement","NoActiveElement","icon","message","DefaultEditorConfig","memo","Fragment","Content","Element","name","element","Toolbar","group","Sidebar","Group","OnActiveElement","displayName"],"sources":["DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TouchIcon } from \"@webiny/icons/touch_app.svg\";\nimport { Breadcrumbs } from \"./Content/Breadcrumbs\";\nimport { Background } from \"./Content/Background\";\nimport { EditorConfig } from \"~/BaseEditor/config\";\nimport { InfoMessage } from \"./Sidebar/InfoMessage\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers\";\nimport { DocumentPreview } from \"./Content/Preview/DocumentPreview\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <InfoMessage\n                icon={<TouchIcon />}\n                message={\"Select an element on the canvas to activate this panel.\"}\n            />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <EditorConfig>\n                <CommandHandlers />\n                <ElementInputRenderers />\n                <Ui.Content.Element name={\"breadcrumbs\"} element={<Breadcrumbs />} />\n                <Ui.Content.Element name={\"background\"} element={<Background />} />\n                <Ui.Content.Element name={\"preview\"} element={<DocumentPreview />} />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const DocumentStateEditor: (() => React.JSX.Element) & {
+    displayName: string;
+};

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import MonacoEditor from "@monaco-editor/react";
+import { Button } from "@webiny/admin-ui";
+import { useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { useDocumentEditor } from "../../../DocumentEditor";
+import { autorun, toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+const monacoOptions = {
+  minimap: {
+    enabled: false
+  }
+};
+const DialogForm = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "state"
+  }, ({
+    value,
+    onChange
+  }) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "60vh"
+    }
+  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+    language: "json",
+    defaultValue: value,
+    options: monacoOptions,
+    onChange: onChange
+  })));
+};
+export const DocumentStateEditor = observer(() => {
+  const dialog = useDialogs();
+  const editor = useDocumentEditor();
+  const [state, setState] = useState(() => JSON.stringify(toJS(editor.getDocumentState().read().state), null, 2));
+  useEffect(() => {
+    autorun(() => {
+      const state = editor.getDocumentState().read().state;
+      setState(JSON.stringify(toJS(state), null, 2));
+    });
+  }, []);
+  const openDialog = () => {
+    dialog.showDialog({
+      title: "Document State",
+      content: /*#__PURE__*/React.createElement(DialogForm, {
+        key: state
+      }),
+      formData: {
+        state
+      },
+      acceptLabel: "Save State",
+      cancelLabel: "Cancel",
+      onAccept: ({
+        state
+      }) => {
+        editor.updateDocument(document => {
+          document.state = JSON.parse(state);
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    className: "wby-absolute wby-bottom-0 wby-w-full",
+    variant: "secondary",
+    onClick: openDialog,
+    text: "Edit State"
+  });
+});
+
+//# sourceMappingURL=DocumentStateEditor.js.map

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","MonacoEditor","Button","useDialogs","Bind","useDocumentEditor","autorun","toJS","observer","monacoOptions","minimap","enabled","DialogForm","createElement","name","value","onChange","style","height","language","defaultValue","options","DocumentStateEditor","dialog","editor","state","setState","JSON","stringify","getDocumentState","read","openDialog","showDialog","title","content","key","formData","acceptLabel","cancelLabel","onAccept","updateDocument","document","parse","className","variant","onClick","text"],"sources":["DocumentStateEditor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Bind, GenericFormData } from \"@webiny/form\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { autorun, toJS } from \"mobx\";\nimport { observer } from \"mobx-react-lite\";\nimport { EditorDocument } from \"~/sdk\";\n\nconst monacoOptions = { minimap: { enabled: false } };\n\nconst DialogForm = () => {\n    return (\n        <Bind name={\"state\"}>\n            {({ value, onChange }) => (\n                <div style={{ height: \"60vh\" }}>\n                    <MonacoEditor\n                        language={\"json\"}\n                        defaultValue={value}\n                        options={monacoOptions}\n                        onChange={onChange}\n                    />\n                </div>\n            )}\n        </Bind>\n    );\n};\n\nexport const DocumentStateEditor = observer(() => {\n    const dialog = useDialogs();\n    const editor = useDocumentEditor<EditorDocument>();\n    const [state, setState] = useState(() =>\n        JSON.stringify(toJS(editor.getDocumentState().read().state), null, 2)\n    );\n\n    useEffect(() => {\n        autorun(() => {\n            const state = editor.getDocumentState().read().state;\n            setState(JSON.stringify(toJS(state), null, 2));\n        });\n    }, []);\n\n    const openDialog = () => {\n        dialog.showDialog({\n            title: \"Document State\",\n            content: <DialogForm key={state} />,\n            formData: {\n                state\n            },\n            acceptLabel: \"Save State\",\n            cancelLabel: \"Cancel\",\n            onAccept: ({ state }: GenericFormData) => {\n                editor.updateDocument(document => {\n                    document.state = JSON.parse(state);\n                });\n            }\n        });\n    };\n\n    return (\n        <Button\n            className=\"wby-absolute wby-bottom-0 wby-w-full\"\n            variant=\"secondary\"\n            onClick={openDialog}\n            text=\"Edit State\"\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,IAAI,QAAyB,cAAc;AACpD,SAASC,iBAAiB;AAC1B,SAASC,OAAO,EAAEC,IAAI,QAAQ,MAAM;AACpC,SAASC,QAAQ,QAAQ,iBAAiB;AAG1C,MAAMC,aAAa,GAAG;EAAEC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAM;AAAE,CAAC;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBACId,KAAA,CAAAe,aAAA,CAACT,IAAI;IAACU,IAAI,EAAE;EAAQ,GACf,CAAC;IAAEC,KAAK;IAAEC;EAAS,CAAC,kBACjBlB,KAAA,CAAAe,aAAA;IAAKI,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAO;EAAE,gBAC3BpB,KAAA,CAAAe,aAAA,CAACZ,YAAY;IACTkB,QAAQ,EAAE,MAAO;IACjBC,YAAY,EAAEL,KAAM;IACpBM,OAAO,EAAEZ,aAAc;IACvBO,QAAQ,EAAEA;EAAS,CACtB,CACA,CAEP,CAAC;AAEf,CAAC;AAED,OAAO,MAAMM,mBAAmB,GAAGd,QAAQ,CAAC,MAAM;EAC9C,MAAMe,MAAM,GAAGpB,UAAU,CAAC,CAAC;EAC3B,MAAMqB,MAAM,GAAGnB,iBAAiB,CAAiB,CAAC;EAClD,MAAM,CAACoB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,QAAQ,CAAC,MAC/B2B,IAAI,CAACC,SAAS,CAACrB,IAAI,CAACiB,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACL,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CACxE,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZO,OAAO,CAAC,MAAM;MACV,MAAMmB,KAAK,GAAGD,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACL,KAAK;MACpDC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACrB,IAAI,CAACkB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMM,UAAU,GAAGA,CAAA,KAAM;IACrBR,MAAM,CAACS,UAAU,CAAC;MACdC,KAAK,EAAE,gBAAgB;MACvBC,OAAO,eAAEpC,KAAA,CAAAe,aAAA,CAACD,UAAU;QAACuB,GAAG,EAAEV;MAAM,CAAE,CAAC;MACnCW,QAAQ,EAAE;QACNX;MACJ,CAAC;MACDY,WAAW,EAAE,YAAY;MACzBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAEA,CAAC;QAAEd;MAAuB,CAAC,KAAK;QACtCD,MAAM,CAACgB,cAAc,CAACC,QAAQ,IAAI;UAC9BA,QAAQ,CAAChB,KAAK,GAAGE,IAAI,CAACe,KAAK,CAACjB,KAAK,CAAC;QACtC,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC;EAED,oBACI3B,KAAA,CAAAe,aAAA,CAACX,MAAM;IACHyC,SAAS,EAAC,sCAAsC;IAChDC,OAAO,EAAC,WAAW;IACnBC,OAAO,EAAEd,UAAW;IACpBe,IAAI,EAAC;EAAY,CACpB,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/DocumentStateEditor/index.d.ts

@@ -0,0 +1 @@
+export * from "./DocumentStateEditor";

package/BaseEditor/defaultConfig/DocumentStateEditor/index.js

@@ -0,0 +1,3 @@
+export * from "./DocumentStateEditor";
+
+//# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/DocumentStateEditor/index.js.map

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

package/BaseEditor/defaultConfig/ElementInputRenderers.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ElementInputRenderers: () => React.JSX.Element;

package/BaseEditor/defaultConfig/ElementInputRenderers.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { EditorConfig } from "./..";
+import { TextInputRenderer } from "../../inputRenderers/TextInput";
+import { NumberInputRenderer } from "../../inputRenderers/NumberInput";
+import { BooleanInputRenderer } from "../../inputRenderers/BooleanInput";
+import { TextareaInputRenderer } from "../../inputRenderers/TextareaInput";
+import { LexicalInputRenderer } from "../../inputRenderers/LexicalInput/LexicalInput";
+import { DefaultLexicalConfig } from "../../inputRenderers/LexicalInput/DefaultLexicalConfig";
+import { SlotInputRenderer } from "../../inputRenderers/SlotInput";
+import { GridLayoutInputRenderer } from "../../inputRenderers/GridLayoutInput";
+import { SelectInputRenderer } from "../../inputRenderers/SelectInput";
+import { FileInputRenderer } from "../../inputRenderers/FileInput";
+import { FragmentSelectorInputRenderer } from "../../inputRenderers/FragmentSelectorInput";
+export const ElementInputRenderers = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Slot",
+    component: SlotInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Input",
+    component: TextInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Select",
+    component: SelectInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Textarea",
+    component: TextareaInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Number",
+    component: NumberInputRenderer
+  }), /*#__PURE__*/React.createElement(DefaultLexicalConfig, null), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Lexical",
+    component: LexicalInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/Switch",
+    component: BooleanInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/GridLayout",
+    component: GridLayoutInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/FileManager",
+    component: FileInputRenderer
+  }), /*#__PURE__*/React.createElement(EditorConfig.ElementInput.Renderer, {
+    name: "Webiny/FragmentSelector",
+    component: FragmentSelectorInputRenderer
+  }));
+};
+
+//# sourceMappingURL=ElementInputRenderers.js.map

package/BaseEditor/defaultConfig/ElementInputRenderers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","EditorConfig","TextInputRenderer","NumberInputRenderer","BooleanInputRenderer","TextareaInputRenderer","LexicalInputRenderer","DefaultLexicalConfig","SlotInputRenderer","GridLayoutInputRenderer","SelectInputRenderer","FileInputRenderer","FragmentSelectorInputRenderer","ElementInputRenderers","createElement","Fragment","ElementInput","Renderer","name","component"],"sources":["ElementInputRenderers.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor\";\nimport { TextInputRenderer } from \"~/inputRenderers/TextInput\";\nimport { NumberInputRenderer } from \"~/inputRenderers/NumberInput\";\nimport { BooleanInputRenderer } from \"~/inputRenderers/BooleanInput\";\nimport { TextareaInputRenderer } from \"~/inputRenderers/TextareaInput\";\nimport { LexicalInputRenderer } from \"~/inputRenderers/LexicalInput/LexicalInput\";\nimport { DefaultLexicalConfig } from \"~/inputRenderers/LexicalInput/DefaultLexicalConfig\";\nimport { SlotInputRenderer } from \"~/inputRenderers/SlotInput\";\nimport { GridLayoutInputRenderer } from \"~/inputRenderers/GridLayoutInput\";\nimport { SelectInputRenderer } from \"~/inputRenderers/SelectInput\";\nimport { FileInputRenderer } from \"~/inputRenderers/FileInput\";\nimport { FragmentSelectorInputRenderer } from \"~/inputRenderers/FragmentSelectorInput\";\n\nexport const ElementInputRenderers = () => {\n    return (\n        <>\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Slot\"}\n                component={SlotInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Input\"}\n                component={TextInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Select\"}\n                component={SelectInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Textarea\"}\n                component={TextareaInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Number\"}\n                component={NumberInputRenderer}\n            />\n            {/* Configure Lexical Editor*/}\n            <DefaultLexicalConfig />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Lexical\"}\n                component={LexicalInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/Switch\"}\n                component={BooleanInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/GridLayout\"}\n                component={GridLayoutInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FileManager\"}\n                component={FileInputRenderer}\n            />\n            <EditorConfig.ElementInput.Renderer\n                name={\"Webiny/FragmentSelector\"}\n                component={FragmentSelectorInputRenderer}\n            />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB;AAC7B,SAASC,qBAAqB;AAC9B,SAASC,oBAAoB;AAC7B,SAASC,oBAAoB;AAC7B,SAASC,iBAAiB;AAC1B,SAASC,uBAAuB;AAChC,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAC1B,SAASC,6BAA6B;AAEtC,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;EACvC,oBACIb,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,aAAc;IACpBC,SAAS,EAAEX;EAAkB,CAChC,CAAC,eACFR,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,cAAe;IACrBC,SAAS,EAAEjB;EAAkB,CAChC,CAAC,eACFF,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,eAAgB;IACtBC,SAAS,EAAET;EAAoB,CAClC,CAAC,eACFV,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,iBAAkB;IACxBC,SAAS,EAAEd;EAAsB,CACpC,CAAC,eACFL,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,eAAgB;IACtBC,SAAS,EAAEhB;EAAoB,CAClC,CAAC,eAEFH,KAAA,CAAAc,aAAA,CAACP,oBAAoB,MAAE,CAAC,eACxBP,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,gBAAiB;IACvBC,SAAS,EAAEb;EAAqB,CACnC,CAAC,eACFN,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,eAAgB;IACtBC,SAAS,EAAEf;EAAqB,CACnC,CAAC,eACFJ,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,mBAAoB;IAC1BC,SAAS,EAAEV;EAAwB,CACtC,CAAC,eACFT,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,oBAAqB;IAC3BC,SAAS,EAAER;EAAkB,CAChC,CAAC,eACFX,KAAA,CAAAc,aAAA,CAACb,YAAY,CAACe,YAAY,CAACC,QAAQ;IAC/BC,IAAI,EAAE,yBAA0B;IAChCC,SAAS,EAAEP;EAA8B,CAC5C,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementActions.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const COLORS: {
+    lightGray: string;
+    gray: string;
+    darkGray: string;
+    darkestGray: string;
+    black: string;
+};
+export declare const ElementActions: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementActions.js

@@ -0,0 +1,30 @@
+import _styled from "@emotion/styled/base";
+import React from "react";
+import { EditorConfig } from "../../..";
+
+// TODO: find a good place for this!
+export const COLORS = {
+  lightGray: "hsla(0, 0%, 97%, 1)",
+  gray: "hsla(300, 2%, 92%, 1)",
+  darkGray: "hsla(0, 0%, 70%, 1)",
+  darkestGray: "hsla(0, 0%, 20%, 1)",
+  black: "hsla(208, 100%, 5%, 1)"
+};
+const SidebarActions = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1yqke5y0"
+} : {
+  target: "e1yqke5y0",
+  label: "SidebarActions"
+})({
+  display: "flex",
+  flexWrap: "wrap",
+  borderBottom: `1px solid ${COLORS.gray}`,
+  backgroundColor: COLORS.lightGray,
+  borderTop: `1px solid ${COLORS.gray}`,
+  justifyContent: "center"
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVsZW1lbnRBY3Rpb25zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhdUIiLCJmaWxlIjoiRWxlbWVudEFjdGlvbnMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBFZGl0b3JDb25maWcgfSBmcm9tIFwifi9CYXNlRWRpdG9yXCI7XG5cbi8vIFRPRE86IGZpbmQgYSBnb29kIHBsYWNlIGZvciB0aGlzIVxuZXhwb3J0IGNvbnN0IENPTE9SUyA9IHtcbiAgICBsaWdodEdyYXk6IFwiaHNsYSgwLCAwJSwgOTclLCAxKVwiLFxuICAgIGdyYXk6IFwiaHNsYSgzMDAsIDIlLCA5MiUsIDEpXCIsXG4gICAgZGFya0dyYXk6IFwiaHNsYSgwLCAwJSwgNzAlLCAxKVwiLFxuICAgIGRhcmtlc3RHcmF5OiBcImhzbGEoMCwgMCUsIDIwJSwgMSlcIixcbiAgICBibGFjazogXCJoc2xhKDIwOCwgMTAwJSwgNSUsIDEpXCJcbn07XG5cbmNvbnN0IFNpZGViYXJBY3Rpb25zID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7Q09MT1JTLmdyYXl9YCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SUy5saWdodEdyYXksXG4gICAgYm9yZGVyVG9wOiBgMXB4IHNvbGlkICR7Q09MT1JTLmdyYXl9YCxcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIlxufSk7XG5cbmV4cG9ydCBjb25zdCBFbGVtZW50QWN0aW9ucyA9ICgpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8U2lkZWJhckFjdGlvbnM+XG4gICAgICAgICAgICA8RWRpdG9yQ29uZmlnLkVsZW1lbnRBY3Rpb25zIC8+XG4gICAgICAgIDwvU2lkZWJhckFjdGlvbnM+XG4gICAgKTtcbn07XG4iXX0= */");
+export const ElementActions = () => {
+  return /*#__PURE__*/React.createElement(SidebarActions, null, /*#__PURE__*/React.createElement(EditorConfig.ElementActions, null));
+};
+
+//# sourceMappingURL=ElementActions.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementActions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","EditorConfig","COLORS","lightGray","gray","darkGray","darkestGray","black","SidebarActions","_styled","process","env","NODE_ENV","target","label","display","flexWrap","borderBottom","backgroundColor","borderTop","justifyContent","ElementActions","createElement"],"sources":["ElementActions.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { EditorConfig } from \"~/BaseEditor\";\n\n// TODO: find a good place for this!\nexport const COLORS = {\n    lightGray: \"hsla(0, 0%, 97%, 1)\",\n    gray: \"hsla(300, 2%, 92%, 1)\",\n    darkGray: \"hsla(0, 0%, 70%, 1)\",\n    darkestGray: \"hsla(0, 0%, 20%, 1)\",\n    black: \"hsla(208, 100%, 5%, 1)\"\n};\n\nconst SidebarActions = styled(\"div\")({\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    borderBottom: `1px solid ${COLORS.gray}`,\n    backgroundColor: COLORS.lightGray,\n    borderTop: `1px solid ${COLORS.gray}`,\n    justifyContent: \"center\"\n});\n\nexport const ElementActions = () => {\n    return (\n        <SidebarActions>\n            <EditorConfig.ElementActions />\n        </SidebarActions>\n    );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY;;AAErB;AACA,OAAO,MAAMC,MAAM,GAAG;EAClBC,SAAS,EAAE,qBAAqB;EAChCC,IAAI,EAAE,uBAAuB;EAC7BC,QAAQ,EAAE,qBAAqB;EAC/BC,WAAW,EAAE,qBAAqB;EAClCC,KAAK,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EACjCC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,YAAY,EAAE,aAAaf,MAAM,CAACE,IAAI,EAAE;EACxCc,eAAe,EAAEhB,MAAM,CAACC,SAAS;EACjCgB,SAAS,EAAE,aAAajB,MAAM,CAACE,IAAI,EAAE;EACrCgB,cAAc,EAAE;AACpB,CAAC,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA,u0CAAC;AAEF,OAAO,MAAMS,cAAc,GAAGA,CAAA,KAAM;EAChC,oBACIrB,KAAA,CAAAsB,aAAA,CAACd,cAAc,qBACXR,KAAA,CAAAsB,aAAA,CAACrB,YAAY,CAACoB,cAAc,MAAE,CAClB,CAAC;AAEzB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DocumentElement } from "../../../../sdk/types";
+interface ElementInputsProps {
+    element: DocumentElement;
+}
+export declare const ElementInputs: ({ element }: ElementInputsProps) => React.JSX.Element | null;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js

@@ -0,0 +1,88 @@
+// @ts-nocheck We're not using this file, but it's here for reference.
+import React, { useMemo } from "react";
+import { Grid } from "@webiny/admin-ui";
+import { useComponent } from "../../../hooks/useComponent";
+// import { ExpressionRenderer } from "./ExpressionRenderer";
+// import { WithBindingToggle } from "./WithBindingToggle";
+import { useStateArrays } from "./useStateArrays";
+import { useRepeatValue } from "./useRepeatValue";
+import { InputRenderer } from "./InputRenderer";
+import { ComponentManifestToAstConverter } from "../../../../sdk/ComponentManifestToAstConverter";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { InfoMessage } from "../InfoMessage";
+export const ElementInputs = ({
+  element
+}) => {
+  const component = useComponent(element.component.name);
+  const repeat = useRepeatValue(element.id);
+  const arrayOptions = useStateArrays();
+  const bindings = useSelectFromDocument(document => {
+    return document.bindings[element.id] ?? {
+      inputs: {}
+    };
+  }, [element.id]);
+  const inputsAst = useMemo(() => {
+    return ComponentManifestToAstConverter.convert(component.inputs ?? []);
+  }, [component.name, element.id]);
+  const hasEditableInputs = useMemo(() => {
+    return inputsAst.filter(input => input.type !== "slot").length > 0;
+  }, [inputsAst]);
+  if (!element) {
+    return null;
+  }
+  if (!hasEditableInputs) {
+    return /*#__PURE__*/React.createElement(InfoMessage, {
+      message: "This element has no inputs."
+    });
+  }
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(InputRenderer, {
+    key: element.id,
+    ast: inputsAst,
+    bindings: bindings.inputs
+  }));
+};
+
+// interface ElementInputProps {
+//     element: DocumentElement;
+//     input: ComponentInput;
+// }
+//
+// const ElementInput = ({ element, input }: ElementInputProps) => {
+//     const Renderer = useInputRenderer(input.renderer || "__unknown__");
+//
+//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);
+//
+//     /*   return (
+//         <Renderer
+//             value={value.static}
+//             input={input}
+//             onChange={onChange}
+//             onPreviewChange={onPreviewChange}
+//         />
+//     );*/
+//     if (value.expression) {
+//         return (
+//             <WithBindingToggle type={"expression"} setBindingType={setBindingType}>
+//                 <ExpressionRenderer
+//                     element={element}
+//                     value={value.expression}
+//                     onChange={onChange}
+//                     input={input}
+//                 />
+//             </WithBindingToggle>
+//         );
+//     }
+//
+//     return (
+//         <WithBindingToggle type={"static"} setBindingType={setBindingType}>
+//             <Renderer
+//                 value={value.static}
+//                 input={input}
+//                 onChange={onChange}
+//                 onPreviewChange={onPreviewChange}
+//             />
+//         </WithBindingToggle>
+//     );
+// };
+
+//# sourceMappingURL=ElementInputs.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Grid","useComponent","useStateArrays","useRepeatValue","InputRenderer","ComponentManifestToAstConverter","useSelectFromDocument","InfoMessage","ElementInputs","element","component","name","repeat","id","arrayOptions","bindings","document","inputs","inputsAst","convert","hasEditableInputs","filter","input","type","length","createElement","message","key","ast"],"sources":["ElementInputs.tsx"],"sourcesContent":["// @ts-nocheck We're not using this file, but it's here for reference.\nimport React, { useMemo } from \"react\";\nimport { Grid, Select } from \"@webiny/admin-ui\";\nimport type { ComponentInput, DocumentElement } from \"~/sdk/types\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent\";\nimport { useInputRenderer } from \"./useInputRenderer\";\nimport { useInputValue } from \"./useInputValue\";\n// import { ExpressionRenderer } from \"./ExpressionRenderer\";\n// import { WithBindingToggle } from \"./WithBindingToggle\";\nimport { useStateArrays } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays\";\nimport { useRepeatValue } from \"./useRepeatValue\";\nimport { InputRenderer } from \"./InputRenderer\";\nimport { ComponentManifestToAstConverter } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n    const repeat = useRepeatValue(element.id);\n    const arrayOptions = useStateArrays();\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    if (!hasEditableInputs) {\n        return <InfoMessage message={\"This element has no inputs.\"} />;\n    }\n\n    return (\n        <Grid>\n            {/*<Grid.Column key={\"repeat\"} span={12}>*/}\n            {/*    <Select*/}\n            {/*        label={\"Repeat for each\"}*/}\n            {/*        placeholder={\"Select binding\"}*/}\n            {/*        options={arrayOptions}*/}\n            {/*        value={repeat.value ?? \"\"}*/}\n            {/*        onChange={value => repeat.onChange(value === \"\" ? undefined : value)}*/}\n            {/*    />*/}\n            {/*</Grid.Column>*/}\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n};\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAgB,kBAAkB;AAE/C,SAASC,YAAY;AAGrB;AACA;AACA,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,aAAa;AACtB,SAASC,+BAA+B;AACxC,SAASC,qBAAqB;AAC9B,SAASC,WAAW;AAMpB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA4B,CAAC,KAAK;EAC9D,MAAMC,SAAS,GAAGT,YAAY,CAACQ,OAAO,CAACC,SAAS,CAACC,IAAI,CAAC;EACtD,MAAMC,MAAM,GAAGT,cAAc,CAACM,OAAO,CAACI,EAAE,CAAC;EACzC,MAAMC,YAAY,GAAGZ,cAAc,CAAC,CAAC;EACrC,MAAMa,QAAQ,GAAGT,qBAAqB,CAClCU,QAAQ,IAAI;IACR,OAAOA,QAAQ,CAACD,QAAQ,CAACN,OAAO,CAACI,EAAE,CAAC,IAAI;MAAEI,MAAM,EAAE,CAAC;IAAE,CAAC;EAC1D,CAAC,EACD,CAACR,OAAO,CAACI,EAAE,CACf,CAAC;EAED,MAAMK,SAAS,GAAGnB,OAAO,CAAC,MAAM;IAC5B,OAAOM,+BAA+B,CAACc,OAAO,CAACT,SAAS,CAACO,MAAM,IAAI,EAAE,CAAC;EAC1E,CAAC,EAAE,CAACP,SAAS,CAACC,IAAI,EAAEF,OAAO,CAACI,EAAE,CAAC,CAAC;EAEhC,MAAMO,iBAAiB,GAAGrB,OAAO,CAAC,MAAM;IACpC,OAAOmB,SAAS,CAACG,MAAM,CAACC,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,CAAC,CAACC,MAAM,GAAG,CAAC;EACtE,CAAC,EAAE,CAACN,SAAS,CAAC,CAAC;EAEf,IAAI,CAACT,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,IAAI,CAACW,iBAAiB,EAAE;IACpB,oBAAOtB,KAAA,CAAA2B,aAAA,CAAClB,WAAW;MAACmB,OAAO,EAAE;IAA8B,CAAE,CAAC;EAClE;EAEA,oBACI5B,KAAA,CAAA2B,aAAA,CAACzB,IAAI,qBAUDF,KAAA,CAAA2B,aAAA,CAACrB,aAAa;IAACuB,GAAG,EAAElB,OAAO,CAACI,EAAG;IAACe,GAAG,EAAEV,SAAU;IAACH,QAAQ,EAAEA,QAAQ,CAACE;EAAO,CAAE,CAC1E,CAAC;AAEf,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ElementSettings: () => React.JSX.Element | null;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useActiveElement } from "../../../hooks/useActiveElement";
+import { ElementInputs } from "./ElementInputs";
+export const ElementSettings = () => {
+  const [element] = useActiveElement();
+  if (!element) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ElementInputs, {
+    element: element
+  });
+};
+
+//# sourceMappingURL=ElementSettings.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useActiveElement","ElementInputs","ElementSettings","element","createElement"],"sources":["ElementSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\nimport { ElementInputs } from \"./ElementInputs\";\n\nexport const ElementSettings = () => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return <ElementInputs element={element} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AACzB,SAASC,aAAa;AAEtB,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAEpC,IAAI,CAACG,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAK,aAAA,CAACH,aAAa;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC;AAC9C,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ElementSettingsGroup: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Sidebar } from "../../../config/Sidebar/Sidebar";
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
+export const ElementSettingsGroup = () => {
+  return /*#__PURE__*/React.createElement(ScrollableContainer, {
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Sidebar.Group.Tab, {
+    name: "element",
+    label: "Element",
+    element: /*#__PURE__*/React.createElement(Sidebar.Elements, {
+      group: "element"
+    })
+  }));
+};
+
+//# sourceMappingURL=ElementSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Sidebar","ScrollableContainer","ElementSettingsGroup","createElement","tabIndex","Group","Tab","name","label","element","Elements","group"],"sources":["ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer\";\n\nexport const ElementSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"element\"}\n                label={\"Element\"}\n                element={<Sidebar.Elements group={\"element\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACtC,oBACIH,KAAA,CAAAI,aAAA,CAACF,mBAAmB;IAACG,QAAQ,EAAE,CAAC;EAAE,gBAC9BL,KAAA,CAAAI,aAAA,CAACH,OAAO,CAACK,KAAK,CAACC,GAAG;IACdC,IAAI,EAAE,SAAU;IAChBC,KAAK,EAAE,SAAU;IACjBC,OAAO,eAAEV,KAAA,CAAAI,aAAA,CAACH,OAAO,CAACU,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE;EAAE,CACnD,CACgB,CAAC;AAE9B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ExpressionRenderer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ComponentInput, DocumentElement } from "../../../../sdk/types";
+interface ExpressionRendererProps {
+    element: DocumentElement;
+    input: ComponentInput;
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare const ExpressionRenderer: ({ element, input, value, onChange }: ExpressionRendererProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ExpressionRenderer.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Select } from "@webiny/admin-ui";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { StatePathsExtractor } from "./StatePathsExtractor";
+export const ExpressionRenderer = ({
+  element,
+  input,
+  value,
+  onChange
+}) => {
+  const options = useSelectFromDocument(document => {
+    const repeat = document.bindings[element.id]?.$repeat;
+    if (repeat) {
+      return new StatePathsExtractor(document.state).getChildPaths(repeat.expression)
+      // TODO: implement data type adapters
+      // .filter(option => option.type.matches(input.dataType))
+      .values();
+    }
+    return new StatePathsExtractor(document.state).getPaths()
+    // TODO: implement data type adapters
+    // .filter(option => option.type.matches(input.dataType))
+    .values();
+  });
+  return /*#__PURE__*/React.createElement(Select, {
+    label: input.label,
+    placeholder: "Select binding",
+    options: options,
+    value: value,
+    onChange: value => onChange(value === "" ? undefined : value)
+  });
+};
+
+//# sourceMappingURL=ExpressionRenderer.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ExpressionRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Select","useSelectFromDocument","StatePathsExtractor","ExpressionRenderer","element","input","value","onChange","options","document","repeat","bindings","id","$repeat","state","getChildPaths","expression","values","getPaths","createElement","label","placeholder","undefined"],"sources":["ExpressionRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Select } from \"@webiny/admin-ui\";\n\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor\";\nimport { ComponentInput, DocumentElement } from \"~/sdk/types\";\n\ninterface ExpressionRendererProps {\n    element: DocumentElement;\n    input: ComponentInput;\n    value: string;\n    onChange: (value: string) => void;\n}\n\nexport const ExpressionRenderer = ({\n    element,\n    input,\n    value,\n    onChange\n}: ExpressionRendererProps) => {\n    const options = useSelectFromDocument(document => {\n        const repeat = document.bindings[element.id]?.$repeat;\n\n        if (repeat) {\n            return new StatePathsExtractor(document.state)\n                .getChildPaths(repeat.expression)\n                // TODO: implement data type adapters\n                // .filter(option => option.type.matches(input.dataType))\n                .values();\n        }\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            // TODO: implement data type adapters\n            // .filter(option => option.type.matches(input.dataType))\n            .values();\n    });\n\n    return (\n        <Select\n            label={input.label}\n            placeholder={\"Select binding\"}\n            options={options}\n            value={value}\n            onChange={value => onChange(value === \"\" ? undefined : value)}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAU5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAC/BC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC;AACqB,CAAC,KAAK;EAC3B,MAAMC,OAAO,GAAGP,qBAAqB,CAACQ,QAAQ,IAAI;IAC9C,MAAMC,MAAM,GAAGD,QAAQ,CAACE,QAAQ,CAACP,OAAO,CAACQ,EAAE,CAAC,EAAEC,OAAO;IAErD,IAAIH,MAAM,EAAE;MACR,OAAO,IAAIR,mBAAmB,CAACO,QAAQ,CAACK,KAAK,CAAC,CACzCC,aAAa,CAACL,MAAM,CAACM,UAAU;MAChC;MACA;MAAA,CACCC,MAAM,CAAC,CAAC;IACjB;IACA,OAAO,IAAIf,mBAAmB,CAACO,QAAQ,CAACK,KAAK,CAAC,CACzCI,QAAQ,CAAC;IACV;IACA;IAAA,CACCD,MAAM,CAAC,CAAC;EACjB,CAAC,CAAC;EAEF,oBACIlB,KAAA,CAAAoB,aAAA,CAACnB,MAAM;IACHoB,KAAK,EAAEf,KAAK,CAACe,KAAM;IACnBC,WAAW,EAAE,gBAAiB;IAC9Bb,OAAO,EAAEA,OAAQ;IACjBF,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAED,KAAK,IAAIC,QAAQ,CAACD,KAAK,KAAK,EAAE,GAAGgB,SAAS,GAAGhB,KAAK;EAAE,CACjE,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/FieldArray.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { InputAstNode } from "../../../../sdk/ComponentManifestToAstConverter";
+export declare function FieldArray({ node, bindings }: {
+    node: InputAstNode;
+    bindings: Record<string, any>;
+}): React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/FieldArray.js

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from "react";
+import { InputField } from "./InputField";
+export function FieldArray({
+  node,
+  bindings
+}) {
+  // Determine how many items there are
+  const items = new Set(Object.keys(bindings).filter(key => key.startsWith(`${node.name}[`)).map(key => {
+    const match = key.match(/\[(\d+)\]/);
+    return match ? Number(match[1]) : null;
+  }).filter(i => i !== null));
+  return /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, node.input.label || node.name), [...items].map(index => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        border: "1px solid #ccc",
+        padding: "0.5em"
+      }
+    }, node.children.map(child => {
+      const cloned = {
+        ...child,
+        path: `${node.name}[${index}].${child.name}`
+      };
+      return /*#__PURE__*/React.createElement(InputField, {
+        key: cloned.path,
+        node: cloned,
+        bindings: bindings
+      });
+    }));
+  }));
+}
+
+//# sourceMappingURL=FieldArray.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/FieldArray.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","InputField","FieldArray","node","bindings","items","Set","Object","keys","filter","key","startsWith","name","map","match","Number","i","createElement","input","label","index","style","border","padding","children","child","cloned","path"],"sources":["FieldArray.tsx"],"sourcesContent":["// @ts-nocheck\nimport React from \"react\";\nimport { InputAstNode } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { InputField } from \"./InputField\";\n\nexport function FieldArray({\n    node,\n    bindings\n}: {\n    node: InputAstNode;\n    bindings: Record<string, any>;\n}) {\n    // Determine how many items there are\n    const items = new Set(\n        Object.keys(bindings)\n            .filter(key => key.startsWith(`${node.name}[`))\n            .map(key => {\n                const match = key.match(/\\[(\\d+)\\]/);\n                return match ? Number(match[1]) : null;\n            })\n            .filter((i): i is number => i !== null)\n    );\n\n    return (\n        <fieldset>\n            <legend>{node.input.label || node.name}</legend>\n            {[...items].map(index => {\n                return (\n                    <div key={index} style={{ border: \"1px solid #ccc\", padding: \"0.5em\" }}>\n                        {node.children.map(child => {\n                            const cloned = {\n                                ...child,\n                                path: `${node.name}[${index}].${child.name}`\n                            };\n                            return (\n                                <InputField key={cloned.path} node={cloned} bindings={bindings} />\n                            );\n                        })}\n                    </div>\n                );\n            })}\n        </fieldset>\n    );\n}\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU;AAEnB,OAAO,SAASC,UAAUA,CAAC;EACvBC,IAAI;EACJC;AAIJ,CAAC,EAAE;EACC;EACA,MAAMC,KAAK,GAAG,IAAIC,GAAG,CACjBC,MAAM,CAACC,IAAI,CAACJ,QAAQ,CAAC,CAChBK,MAAM,CAACC,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC,GAAGR,IAAI,CAACS,IAAI,GAAG,CAAC,CAAC,CAC9CC,GAAG,CAACH,GAAG,IAAI;IACR,MAAMI,KAAK,GAAGJ,GAAG,CAACI,KAAK,CAAC,WAAW,CAAC;IACpC,OAAOA,KAAK,GAAGC,MAAM,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;EAC1C,CAAC,CAAC,CACDL,MAAM,CAAEO,CAAC,IAAkBA,CAAC,KAAK,IAAI,CAC9C,CAAC;EAED,oBACIhB,KAAA,CAAAiB,aAAA,gCACIjB,KAAA,CAAAiB,aAAA,iBAASd,IAAI,CAACe,KAAK,CAACC,KAAK,IAAIhB,IAAI,CAACS,IAAa,CAAC,EAC/C,CAAC,GAAGP,KAAK,CAAC,CAACQ,GAAG,CAACO,KAAK,IAAI;IACrB,oBACIpB,KAAA,CAAAiB,aAAA;MAAKP,GAAG,EAAEU,KAAM;MAACC,KAAK,EAAE;QAAEC,MAAM,EAAE,gBAAgB;QAAEC,OAAO,EAAE;MAAQ;IAAE,GAClEpB,IAAI,CAACqB,QAAQ,CAACX,GAAG,CAACY,KAAK,IAAI;MACxB,MAAMC,MAAM,GAAG;QACX,GAAGD,KAAK;QACRE,IAAI,EAAE,GAAGxB,IAAI,CAACS,IAAI,IAAIQ,KAAK,KAAKK,KAAK,CAACb,IAAI;MAC9C,CAAC;MACD,oBACIZ,KAAA,CAAAiB,aAAA,CAAChB,UAAU;QAACS,GAAG,EAAEgB,MAAM,CAACC,IAAK;QAACxB,IAAI,EAAEuB,MAAO;QAACtB,QAAQ,EAAEA;MAAS,CAAE,CAAC;IAE1E,CAAC,CACA,CAAC;EAEd,CAAC,CACK,CAAC;AAEnB","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/InputField.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { InputAstNode } from "../../../../sdk/ComponentManifestToAstConverter";
+import type { DocumentElement, DocumentElementBindings } from "../../../../sdk/types";
+interface InputFieldProps {
+    node: InputAstNode;
+    element: DocumentElement;
+    bindings: DocumentElementBindings["inputs"];
+}
+export declare function InputField({ element, node }: InputFieldProps): React.JSX.Element | undefined;
+export {};