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

package/modules/pages/PagesList/components/Filters/Filters.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Filters as BaseFilters } from "@webiny/app-admin";
+import { useFilterPages } from "../../../../../features/pages/index.js";
+import { useDocumentList } from "../../useDocumentList.js";
+import { useNavigateFolder } from "@webiny/app-aco";
+import { usePageListConfig } from "../../../configs";
+export const Filters = () => {
+  const {
+    browser
+  } = usePageListConfig();
+  const {
+    vm
+  } = useDocumentList();
+  const {
+    filterPages
+  } = useFilterPages();
+  const {
+    currentFolderId
+  } = useNavigateFolder();
+  const applyFilters = data => {
+    if (!Object.keys(data).length) {
+      return;
+    }
+    const convertedFilters = browser.filtersToWhere.reduce((data, converter) => converter(data), data);
+    filterPages(convertedFilters, currentFolderId);
+  };
+  return /*#__PURE__*/React.createElement(BaseFilters, {
+    filters: browser.filters,
+    show: vm.isFilterVisible,
+    onChange: applyFilters
+  });
+};
+
+//# sourceMappingURL=Filters.js.map

package/modules/pages/PagesList/components/Filters/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Filters","BaseFilters","useFilterPages","useDocumentList","useNavigateFolder","usePageListConfig","browser","vm","filterPages","currentFolderId","applyFilters","data","Object","keys","length","convertedFilters","filtersToWhere","reduce","converter","createElement","filters","show","isFilterVisible","onChange"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FiltersOnSubmit } from \"@webiny/app-admin\";\nimport { Filters as BaseFilters } from \"@webiny/app-admin\";\nimport { useFilterPages } from \"~/features/pages/index.js\";\nimport { useDocumentList } from \"~/modules/pages/PagesList/useDocumentList.js\";\nimport { useNavigateFolder } from \"@webiny/app-aco\";\nimport { usePageListConfig } from \"~/modules/pages/configs\";\n\nexport const Filters = () => {\n    const { browser } = usePageListConfig();\n    const { vm } = useDocumentList();\n    const { filterPages } = useFilterPages();\n    const { currentFolderId } = useNavigateFolder();\n\n    const applyFilters: FiltersOnSubmit = data => {\n        if (!Object.keys(data).length) {\n            return;\n        }\n\n        const convertedFilters = browser.filtersToWhere.reduce(\n            (data, converter) => converter(data),\n            data\n        );\n\n        filterPages(convertedFilters, currentFolderId);\n    };\n\n    return (\n        <BaseFilters filters={browser.filters} show={vm.isFilterVisible} onChange={applyFilters} />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO,IAAIC,WAAW,QAAQ,mBAAmB;AAC1D,SAASC,cAAc;AACvB,SAASC,eAAe;AACxB,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,iBAAiB;AAE1B,OAAO,MAAML,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEM;EAAQ,CAAC,GAAGD,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEE;EAAG,CAAC,GAAGJ,eAAe,CAAC,CAAC;EAChC,MAAM;IAAEK;EAAY,CAAC,GAAGN,cAAc,CAAC,CAAC;EACxC,MAAM;IAAEO;EAAgB,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAE/C,MAAMM,YAA6B,GAAGC,IAAI,IAAI;IAC1C,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,CAACG,MAAM,EAAE;MAC3B;IACJ;IAEA,MAAMC,gBAAgB,GAAGT,OAAO,CAACU,cAAc,CAACC,MAAM,CAClD,CAACN,IAAI,EAAEO,SAAS,KAAKA,SAAS,CAACP,IAAI,CAAC,EACpCA,IACJ,CAAC;IAEDH,WAAW,CAACO,gBAAgB,EAAEN,eAAe,CAAC;EAClD,CAAC;EAED,oBACIV,KAAA,CAAAoB,aAAA,CAAClB,WAAW;IAACmB,OAAO,EAAEd,OAAO,CAACc,OAAQ;IAACC,IAAI,EAAEd,EAAE,CAACe,eAAgB;IAACC,QAAQ,EAAEb;EAAa,CAAE,CAAC;AAEnG,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Filters/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Filters.js";
+export * from "./FilterByStatus.js";

package/modules/pages/PagesList/components/Filters/index.js

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

package/modules/pages/PagesList/components/Filters/index.js.map

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

package/modules/pages/PagesList/components/Header/ButtonFilters.d.ts

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

package/modules/pages/PagesList/components/Header/ButtonFilters.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { FiltersToggle } from "@webiny/app-admin";
+import { useDocumentList } from "../../useDocumentList.js";
+export const ButtonFilters = () => {
+  const {
+    vm,
+    showFilters
+  } = useDocumentList();
+  return /*#__PURE__*/React.createElement(FiltersToggle, {
+    onFiltersToggle: () => showFilters(!vm.isFilterVisible),
+    showingFilters: vm.isFilterVisible
+  });
+};
+
+//# sourceMappingURL=ButtonFilters.js.map

package/modules/pages/PagesList/components/Header/ButtonFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FiltersToggle","useDocumentList","ButtonFilters","vm","showFilters","createElement","onFiltersToggle","isFilterVisible","showingFilters"],"sources":["ButtonFilters.tsx"],"sourcesContent":["import React from \"react\";\nimport { FiltersToggle } from \"@webiny/app-admin\";\nimport { useDocumentList } from \"~/modules/pages/PagesList/useDocumentList.js\";\n\nexport const ButtonFilters = () => {\n    const { vm, showFilters } = useDocumentList();\n\n    return (\n        <FiltersToggle\n            onFiltersToggle={() => showFilters(!vm.isFilterVisible)}\n            showingFilters={vm.isFilterVisible}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,eAAe;AAExB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAM;IAAEC,EAAE;IAAEC;EAAY,CAAC,GAAGH,eAAe,CAAC,CAAC;EAE7C,oBACIF,KAAA,CAAAM,aAAA,CAACL,aAAa;IACVM,eAAe,EAAEA,CAAA,KAAMF,WAAW,CAAC,CAACD,EAAE,CAACI,eAAe,CAAE;IACxDC,cAAc,EAAEL,EAAE,CAACI;EAAgB,CACtC,CAAC;AAEV,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Header/ButtonsCreate.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ButtonsCreateProps {
+    onCreateDocument: (event: React.SyntheticEvent) => void;
+    onCreateFolder: (event: React.SyntheticEvent) => void;
+    canCreateFolder: boolean;
+    canCreateContent: boolean;
+}
+export declare const ButtonsCreate: ({ onCreateFolder, onCreateDocument, canCreateContent, canCreateFolder }: ButtonsCreateProps) => React.JSX.Element;
+export {};

package/modules/pages/PagesList/components/Header/ButtonsCreate.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { ReactComponent as Add } from "@webiny/icons/add.svg";
+import { Button, Tooltip } from "@webiny/admin-ui";
+export const ButtonsCreate = ({
+  onCreateFolder,
+  onCreateDocument,
+  canCreateContent,
+  canCreateFolder
+}) => {
+  let newFolderButton = /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "new-folder-button",
+    onClick: onCreateFolder,
+    disabled: !canCreateFolder,
+    text: "New Folder",
+    icon: /*#__PURE__*/React.createElement(Add, null),
+    variant: "secondary"
+  });
+  if (!canCreateFolder) {
+    newFolderButton = /*#__PURE__*/React.createElement(Tooltip, {
+      content: `Cannot create folder because you're not an owner.`,
+      trigger: newFolderButton
+    });
+  }
+  let newEntryButton = /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "new-entry-button",
+    onClick: onCreateDocument,
+    disabled: !canCreateContent,
+    text: "New Page",
+    icon: /*#__PURE__*/React.createElement(Add, null)
+  });
+  if (!canCreateContent) {
+    newEntryButton = /*#__PURE__*/React.createElement(Tooltip, {
+      content: `Cannot create page because you're not an owner.`,
+      trigger: newEntryButton
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, newFolderButton, newEntryButton);
+};
+
+//# sourceMappingURL=ButtonsCreate.js.map

package/modules/pages/PagesList/components/Header/ButtonsCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","Add","Button","Tooltip","ButtonsCreate","onCreateFolder","onCreateDocument","canCreateContent","canCreateFolder","newFolderButton","createElement","onClick","disabled","text","icon","variant","content","trigger","newEntryButton","Fragment"],"sources":["ButtonsCreate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Add } from \"@webiny/icons/add.svg\";\nimport { Button, Tooltip } from \"@webiny/admin-ui\";\n\ninterface ButtonsCreateProps {\n    onCreateDocument: (event: React.SyntheticEvent) => void;\n    onCreateFolder: (event: React.SyntheticEvent) => void;\n    canCreateFolder: boolean;\n    canCreateContent: boolean;\n}\n\nexport const ButtonsCreate = ({\n    onCreateFolder,\n    onCreateDocument,\n    canCreateContent,\n    canCreateFolder\n}: ButtonsCreateProps) => {\n    let newFolderButton = (\n        <Button\n            data-testid=\"new-folder-button\"\n            onClick={onCreateFolder}\n            disabled={!canCreateFolder}\n            text={\"New Folder\"}\n            icon={<Add />}\n            variant={\"secondary\"}\n        />\n    );\n\n    if (!canCreateFolder) {\n        newFolderButton = (\n            <Tooltip\n                content={`Cannot create folder because you're not an owner.`}\n                trigger={newFolderButton}\n            />\n        );\n    }\n\n    let newEntryButton = (\n        <Button\n            data-testid=\"new-entry-button\"\n            onClick={onCreateDocument}\n            disabled={!canCreateContent}\n            text={\"New Page\"}\n            icon={<Add />}\n        />\n    );\n\n    if (!canCreateContent) {\n        newEntryButton = (\n            <Tooltip\n                content={`Cannot create page because you're not an owner.`}\n                trigger={newEntryButton}\n            />\n        );\n    }\n\n    return (\n        <>\n            {newFolderButton}\n            {newEntryButton}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,GAAG,QAAQ,uBAAuB;AAC7D,SAASC,MAAM,EAAEC,OAAO,QAAQ,kBAAkB;AASlD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC1BC,cAAc;EACdC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACgB,CAAC,KAAK;EACtB,IAAIC,eAAe,gBACfV,KAAA,CAAAW,aAAA,CAACR,MAAM;IACH,eAAY,mBAAmB;IAC/BS,OAAO,EAAEN,cAAe;IACxBO,QAAQ,EAAE,CAACJ,eAAgB;IAC3BK,IAAI,EAAE,YAAa;IACnBC,IAAI,eAAEf,KAAA,CAAAW,aAAA,CAACT,GAAG,MAAE,CAAE;IACdc,OAAO,EAAE;EAAY,CACxB,CACJ;EAED,IAAI,CAACP,eAAe,EAAE;IAClBC,eAAe,gBACXV,KAAA,CAAAW,aAAA,CAACP,OAAO;MACJa,OAAO,EAAE,mDAAoD;MAC7DC,OAAO,EAAER;IAAgB,CAC5B,CACJ;EACL;EAEA,IAAIS,cAAc,gBACdnB,KAAA,CAAAW,aAAA,CAACR,MAAM;IACH,eAAY,kBAAkB;IAC9BS,OAAO,EAAEL,gBAAiB;IAC1BM,QAAQ,EAAE,CAACL,gBAAiB;IAC5BM,IAAI,EAAE,UAAW;IACjBC,IAAI,eAAEf,KAAA,CAAAW,aAAA,CAACT,GAAG,MAAE;EAAE,CACjB,CACJ;EAED,IAAI,CAACM,gBAAgB,EAAE;IACnBW,cAAc,gBACVnB,KAAA,CAAAW,aAAA,CAACP,OAAO;MACJa,OAAO,EAAE,iDAAkD;MAC3DC,OAAO,EAAEC;IAAe,CAC3B,CACJ;EACL;EAEA,oBACInB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAoB,QAAA,QACKV,eAAe,EACfS,cACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface HeaderProps {
+    isRoot: boolean;
+    title?: string;
+    canCreateFolder: boolean;
+    canCreateContent: boolean;
+    onCreateDocument: (event?: React.SyntheticEvent) => void;
+    onCreateFolder: (event?: React.SyntheticEvent) => void;
+}
+export declare const Header: (props: HeaderProps) => React.JSX.Element;
+export {};

package/modules/pages/PagesList/components/Header/Header.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { Separator } from "@webiny/admin-ui";
+import { ButtonFilters } from "./ButtonFilters.js";
+import { ButtonsCreate } from "./ButtonsCreate";
+import { Search } from "./Search";
+import { Title } from "./Title";
+export const Header = props => {
+  const {
+    title,
+    isRoot,
+    canCreateFolder,
+    canCreateContent,
+    onCreateDocument,
+    onCreateFolder
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-gap-md"
+  }, /*#__PURE__*/React.createElement(Title, {
+    title: title,
+    isRoot: isRoot
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-px-md wby-pb-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center wby-gap-sm wby-w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex-1"
+  }, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-sm"
+  }, /*#__PURE__*/React.createElement(ButtonFilters, null), /*#__PURE__*/React.createElement(ButtonsCreate, {
+    canCreateFolder: canCreateFolder,
+    canCreateContent: canCreateContent,
+    onCreateFolder: onCreateFolder,
+    onCreateDocument: onCreateDocument
+  })))))), /*#__PURE__*/React.createElement(Separator, null));
+};
+
+//# sourceMappingURL=Header.js.map

package/modules/pages/PagesList/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Separator","ButtonFilters","ButtonsCreate","Search","Title","Header","props","title","isRoot","canCreateFolder","canCreateContent","onCreateDocument","onCreateFolder","createElement","Fragment","className"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"@webiny/admin-ui\";\nimport { ButtonFilters } from \"./ButtonFilters.js\";\nimport { ButtonsCreate } from \"./ButtonsCreate\";\nimport { Search } from \"./Search\";\nimport { Title } from \"./Title\";\n\ninterface HeaderProps {\n    isRoot: boolean;\n    title?: string;\n    canCreateFolder: boolean;\n    canCreateContent: boolean;\n    onCreateDocument: (event?: React.SyntheticEvent) => void;\n    onCreateFolder: (event?: React.SyntheticEvent) => void;\n}\n\nexport const Header = (props: HeaderProps) => {\n    const { title, isRoot, canCreateFolder, canCreateContent, onCreateDocument, onCreateFolder } =\n        props;\n\n    return (\n        <>\n            <div className={\"wby-flex wby-flex-col wby-gap-md\"}>\n                <Title title={title} isRoot={isRoot} />\n                <div className={\"wby-px-md wby-pb-sm\"}>\n                    <div className={\"wby-flex wby-items-center wby-gap-sm wby-w-full\"}>\n                        <div className={\"wby-flex-1\"}>\n                            <Search />\n                        </div>\n                        <div>\n                            <div className={\"wby-flex wby-gap-sm\"}>\n                                <ButtonFilters />\n                                <ButtonsCreate\n                                    canCreateFolder={canCreateFolder}\n                                    canCreateContent={canCreateContent}\n                                    onCreateFolder={onCreateFolder}\n                                    onCreateDocument={onCreateDocument}\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <Separator />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,aAAa;AACtB,SAASC,aAAa;AACtB,SAASC,MAAM;AACf,SAASC,KAAK;AAWd,OAAO,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EAC1C,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC,gBAAgB;IAAEC;EAAe,CAAC,GACxFN,KAAK;EAET,oBACIP,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAmC,gBAC/ChB,KAAA,CAAAc,aAAA,CAACT,KAAK;IAACG,KAAK,EAAEA,KAAM;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC,eACvCT,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAsB,gBAClChB,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAkD,gBAC9DhB,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAa,gBACzBhB,KAAA,CAAAc,aAAA,CAACV,MAAM,MAAE,CACR,CAAC,eACNJ,KAAA,CAAAc,aAAA,2BACId,KAAA,CAAAc,aAAA;IAAKE,SAAS,EAAE;EAAsB,gBAClChB,KAAA,CAAAc,aAAA,CAACZ,aAAa,MAAE,CAAC,eACjBF,KAAA,CAAAc,aAAA,CAACX,aAAa;IACVO,eAAe,EAAEA,eAAgB;IACjCC,gBAAgB,EAAEA,gBAAiB;IACnCE,cAAc,EAAEA,cAAe;IAC/BD,gBAAgB,EAAEA;EAAiB,CACtC,CACA,CACJ,CACJ,CACJ,CACJ,CAAC,eACNZ,KAAA,CAAAc,aAAA,CAACb,SAAS,MAAE,CACd,CAAC;AAEX,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Header/Search.d.ts

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

package/modules/pages/PagesList/components/Header/Search.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
+import { useLoadPages, useSearchPages } from "../../../../../features/pages/index.js";
+import { useNavigateFolder } from "@webiny/app-aco";
+import { useDocumentList } from "../../useDocumentList.js";
+export const Search = () => {
+  const {
+    vm
+  } = useDocumentList();
+  const {
+    searchPages
+  } = useSearchPages();
+  const {
+    loadPages
+  } = useLoadPages();
+  const {
+    currentFolderId
+  } = useNavigateFolder();
+  return /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: vm.searchQuery,
+    onChange: value => {
+      const searchQuery = value.trim();
+      if (searchQuery === vm.searchQuery) {
+        return;
+      }
+      if (!searchQuery) {
+        loadPages({
+          folderId: currentFolderId,
+          resetSearch: true
+        });
+        return;
+      }
+      searchPages(searchQuery, currentFolderId);
+    }
+  }, ({
+    value,
+    onChange
+  }) => /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: e => onChange(e.target.value),
+    forwardEventOnChange: true,
+    placeholder: vm.searchLabel,
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(SearchIcon, null),
+      label: "Search"
+    }),
+    size: "md",
+    variant: "ghost",
+    className: "wby-w-full"
+  }));
+};
+
+//# sourceMappingURL=Search.js.map

package/modules/pages/PagesList/components/Header/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","SearchIcon","DelayedOnChange","Icon","Input","useLoadPages","useSearchPages","useNavigateFolder","useDocumentList","Search","vm","searchPages","loadPages","currentFolderId","createElement","value","searchQuery","onChange","trim","folderId","resetSearch","e","target","forwardEventOnChange","placeholder","searchLabel","startIcon","icon","label","size","variant","className"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\nimport { useLoadPages, useSearchPages } from \"~/features/pages/index.js\";\nimport { useNavigateFolder } from \"@webiny/app-aco\";\nimport { useDocumentList } from \"~/modules/pages/PagesList/useDocumentList.js\";\n\nexport const Search = () => {\n    const { vm } = useDocumentList();\n    const { searchPages } = useSearchPages();\n    const { loadPages } = useLoadPages();\n    const { currentFolderId } = useNavigateFolder();\n\n    return (\n        <DelayedOnChange\n            value={vm.searchQuery}\n            onChange={value => {\n                const searchQuery = value.trim();\n\n                if (searchQuery === vm.searchQuery) {\n                    return;\n                }\n\n                if (!searchQuery) {\n                    loadPages({ folderId: currentFolderId, resetSearch: true });\n                    return;\n                }\n\n                searchPages(searchQuery, currentFolderId);\n            }}\n        >\n            {({ value, onChange }) => (\n                <Input\n                    value={value}\n                    onChange={e => onChange(e.target.value)}\n                    forwardEventOnChange={true}\n                    placeholder={vm.searchLabel}\n                    startIcon={<Icon icon={<SearchIcon />} label=\"Search\" />}\n                    size={\"md\"}\n                    variant={\"ghost\"}\n                    className={\"wby-w-full\"}\n                />\n            )}\n        </DelayedOnChange>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC/D,SAASC,YAAY,EAAEC,cAAc;AACrC,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,eAAe;AAExB,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,MAAM;IAAEC;EAAG,CAAC,GAAGF,eAAe,CAAC,CAAC;EAChC,MAAM;IAAEG;EAAY,CAAC,GAAGL,cAAc,CAAC,CAAC;EACxC,MAAM;IAAEM;EAAU,CAAC,GAAGP,YAAY,CAAC,CAAC;EACpC,MAAM;IAAEQ;EAAgB,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EAE/C,oBACIR,KAAA,CAAAe,aAAA,CAACZ,eAAe;IACZa,KAAK,EAAEL,EAAE,CAACM,WAAY;IACtBC,QAAQ,EAAEF,KAAK,IAAI;MACf,MAAMC,WAAW,GAAGD,KAAK,CAACG,IAAI,CAAC,CAAC;MAEhC,IAAIF,WAAW,KAAKN,EAAE,CAACM,WAAW,EAAE;QAChC;MACJ;MAEA,IAAI,CAACA,WAAW,EAAE;QACdJ,SAAS,CAAC;UAAEO,QAAQ,EAAEN,eAAe;UAAEO,WAAW,EAAE;QAAK,CAAC,CAAC;QAC3D;MACJ;MAEAT,WAAW,CAACK,WAAW,EAAEH,eAAe,CAAC;IAC7C;EAAE,GAED,CAAC;IAAEE,KAAK;IAAEE;EAAS,CAAC,kBACjBlB,KAAA,CAAAe,aAAA,CAACV,KAAK;IACFW,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEI,CAAC,IAAIJ,QAAQ,CAACI,CAAC,CAACC,MAAM,CAACP,KAAK,CAAE;IACxCQ,oBAAoB,EAAE,IAAK;IAC3BC,WAAW,EAAEd,EAAE,CAACe,WAAY;IAC5BC,SAAS,eAAE3B,KAAA,CAAAe,aAAA,CAACX,IAAI;MAACwB,IAAI,eAAE5B,KAAA,CAAAe,aAAA,CAACb,UAAU,MAAE,CAAE;MAAC2B,KAAK,EAAC;IAAQ,CAAE,CAAE;IACzDC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,OAAQ;IACjBC,SAAS,EAAE;EAAa,CAC3B,CAEQ,CAAC;AAE1B,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Header/Title.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TitleProps {
+    isRoot: boolean;
+    title?: string;
+}
+export declare const Title: ({ title, isRoot }: TitleProps) => React.JSX.Element;
+export {};

package/modules/pages/PagesList/components/Header/Title.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import { Heading, Icon, Skeleton } from "@webiny/admin-ui";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+export const Title = ({
+  title,
+  isRoot
+}) => {
+  const icon = useMemo(() => {
+    return isRoot ? /*#__PURE__*/React.createElement(HomeIcon, null) : /*#__PURE__*/React.createElement(FolderIcon, null);
+  }, [isRoot]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-5/12 wby-pt-md wby-px-lg"
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-sm wby-items-center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    label: title,
+    size: "md",
+    color: "neutral-strong"
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    as: "h1",
+    className: "wby-truncate"
+  }, title)) || /*#__PURE__*/React.createElement(Skeleton, {
+    size: "xl"
+  }));
+};
+
+//# sourceMappingURL=Title.js.map

package/modules/pages/PagesList/components/Header/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Heading","Icon","Skeleton","ReactComponent","HomeIcon","FolderIcon","Title","title","isRoot","icon","createElement","className","label","size","color","level","as"],"sources":["Title.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Heading, Icon, Skeleton } from \"@webiny/admin-ui\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\n\ninterface TitleProps {\n    isRoot: boolean;\n    title?: string;\n}\n\nexport const Title = ({ title, isRoot }: TitleProps) => {\n    const icon = useMemo(() => {\n        return isRoot ? <HomeIcon /> : <FolderIcon />;\n    }, [isRoot]);\n\n    return (\n        <div className={\"wby-w-5/12 wby-pt-md wby-px-lg\"}>\n            {(title && (\n                <div className={\"wby-flex wby-gap-sm wby-items-center\"}>\n                    <Icon icon={icon} label={title} size={\"md\"} color={\"neutral-strong\"} />\n                    <Heading level={4} as={\"h1\"} className={\"wby-truncate\"}>\n                        {title}\n                    </Heading>\n                </div>\n            )) || <Skeleton size={\"xl\"} />}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,kBAAkB;AAC1D,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,UAAU,QAAQ,0BAA0B;AAOvE,OAAO,MAAMC,KAAK,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAmB,CAAC,KAAK;EACpD,MAAMC,IAAI,GAAGV,OAAO,CAAC,MAAM;IACvB,OAAOS,MAAM,gBAAGV,KAAA,CAAAY,aAAA,CAACN,QAAQ,MAAE,CAAC,gBAAGN,KAAA,CAAAY,aAAA,CAACL,UAAU,MAAE,CAAC;EACjD,CAAC,EAAE,CAACG,MAAM,CAAC,CAAC;EAEZ,oBACIV,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAAiC,GAC3CJ,KAAK,iBACHT,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDb,KAAA,CAAAY,aAAA,CAACT,IAAI;IAACQ,IAAI,EAAEA,IAAK;IAACG,KAAK,EAAEL,KAAM;IAACM,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAiB,CAAE,CAAC,eACvEhB,KAAA,CAAAY,aAAA,CAACV,OAAO;IAACe,KAAK,EAAE,CAAE;IAACC,EAAE,EAAE,IAAK;IAACL,SAAS,EAAE;EAAe,GAClDJ,KACI,CACR,CACR,iBAAKT,KAAA,CAAAY,aAAA,CAACR,QAAQ;IAACW,IAAI,EAAE;EAAK,CAAE,CAC5B,CAAC;AAEd,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Header/index.d.ts

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

package/modules/pages/PagesList/components/Header/index.js

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

package/modules/pages/PagesList/components/Header/index.js.map

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

package/modules/pages/PagesList/components/Layout/Layout.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface LayoutProps {
+    main: React.ReactNode;
+    sidebar: React.ReactNode;
+}
+declare const Layout: (props: LayoutProps) => React.JSX.Element;
+export { Layout, type LayoutProps };

package/modules/pages/PagesList/components/Layout/Layout.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView/index.js";
+import { useLayoutId } from "./useLayoutId.js";
+import { WB_PAGE_APP } from "../../../../../constants.js";
+const Layout = props => {
+  const layoutId = useLayoutId(WB_PAGE_APP);
+  return /*#__PURE__*/React.createElement(SplitView, {
+    layoutId: layoutId
+  }, /*#__PURE__*/React.createElement(LeftPanel, {
+    span: 2
+  }, props.sidebar), /*#__PURE__*/React.createElement(RightPanel, {
+    span: 10
+  }, props.main));
+};
+export { Layout };
+
+//# sourceMappingURL=Layout.js.map

package/modules/pages/PagesList/components/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","LeftPanel","RightPanel","SplitView","useLayoutId","WB_PAGE_APP","Layout","props","layoutId","createElement","span","sidebar","main"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView/index.js\";\nimport { useLayoutId } from \"./useLayoutId.js\";\nimport { WB_PAGE_APP } from \"~/constants.js\";\n\ninterface LayoutProps {\n    main: React.ReactNode;\n    sidebar: React.ReactNode;\n}\n\nconst Layout = (props: LayoutProps) => {\n    const layoutId = useLayoutId(WB_PAGE_APP);\n\n    return (\n        <SplitView layoutId={layoutId}>\n            <LeftPanel span={2}>{props.sidebar}</LeftPanel>\n            <RightPanel span={10}>{props.main}</RightPanel>\n        </SplitView>\n    );\n};\n\nexport { Layout, type LayoutProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,UAAU,EAAEC,SAAS,QAAQ,iDAAiD;AAClG,SAASC,WAAW;AACpB,SAASC,WAAW;AAOpB,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EACnC,MAAMC,QAAQ,GAAGJ,WAAW,CAACC,WAAW,CAAC;EAEzC,oBACIL,KAAA,CAAAS,aAAA,CAACN,SAAS;IAACK,QAAQ,EAAEA;EAAS,gBAC1BR,KAAA,CAAAS,aAAA,CAACR,SAAS;IAACS,IAAI,EAAE;EAAE,GAAEH,KAAK,CAACI,OAAmB,CAAC,eAC/CX,KAAA,CAAAS,aAAA,CAACP,UAAU;IAACQ,IAAI,EAAE;EAAG,GAAEH,KAAK,CAACK,IAAiB,CACvC,CAAC;AAEpB,CAAC;AAED,SAASN,MAAM","ignoreList":[]}

package/modules/pages/PagesList/components/Layout/index.d.ts

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

package/modules/pages/PagesList/components/Layout/index.js

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

package/modules/pages/PagesList/components/Layout/index.js.map

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

package/modules/pages/PagesList/components/Layout/useLayoutId.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a `layoutId` to be used with the `<SplitView />` component.
+ * The `layoutId` is essential for saving user preferences into localStorage.
+ * The generation of the `layoutId` takes into account the current `tenantId`, `localeCode`, and the provided `applicationId`.
+ *
+ *  TODO: export the useLayoutId from a generic use package, such as app-admin. At the moment is not possible because of circular dependency issues.
+ */
+declare const useLayoutId: (applicationId: string) => string | null;
+export { useLayoutId };

package/modules/pages/PagesList/components/Layout/useLayoutId.js

@@ -0,0 +1,27 @@
+import { useI18N } from "@webiny/app-i18n";
+import { useTenancy } from "@webiny/app-tenancy";
+
+/**
+ * Generates a `layoutId` to be used with the `<SplitView />` component.
+ * The `layoutId` is essential for saving user preferences into localStorage.
+ * The generation of the `layoutId` takes into account the current `tenantId`, `localeCode`, and the provided `applicationId`.
+ *
+ *  TODO: export the useLayoutId from a generic use package, such as app-admin. At the moment is not possible because of circular dependency issues.
+ */
+const useLayoutId = applicationId => {
+  const {
+    tenant
+  } = useTenancy();
+  const {
+    getCurrentLocale
+  } = useI18N();
+  const localeCode = getCurrentLocale("content");
+  if (!tenant || !localeCode) {
+    console.warn("Missing tenant or localeCode while creating layoutId");
+    return null;
+  }
+  return `T#${tenant}#L#${localeCode}#A#${applicationId}`;
+};
+export { useLayoutId };
+
+//# sourceMappingURL=useLayoutId.js.map

package/modules/pages/PagesList/components/Layout/useLayoutId.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useI18N","useTenancy","useLayoutId","applicationId","tenant","getCurrentLocale","localeCode","console","warn"],"sources":["useLayoutId.ts"],"sourcesContent":["import { useI18N } from \"@webiny/app-i18n\";\nimport { useTenancy } from \"@webiny/app-tenancy\";\n\n/**\n * Generates a `layoutId` to be used with the `<SplitView />` component.\n * The `layoutId` is essential for saving user preferences into localStorage.\n * The generation of the `layoutId` takes into account the current `tenantId`, `localeCode`, and the provided `applicationId`.\n *\n *  TODO: export the useLayoutId from a generic use package, such as app-admin. At the moment is not possible because of circular dependency issues.\n */\nconst useLayoutId = (applicationId: string) => {\n    const { tenant } = useTenancy();\n    const { getCurrentLocale } = useI18N();\n    const localeCode = getCurrentLocale(\"content\");\n\n    if (!tenant || !localeCode) {\n        console.warn(\"Missing tenant or localeCode while creating layoutId\");\n        return null;\n    }\n\n    return `T#${tenant}#L#${localeCode}#A#${applicationId}`;\n};\n\nexport { useLayoutId };\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,UAAU,QAAQ,qBAAqB;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAIC,aAAqB,IAAK;EAC3C,MAAM;IAAEC;EAAO,CAAC,GAAGH,UAAU,CAAC,CAAC;EAC/B,MAAM;IAAEI;EAAiB,CAAC,GAAGL,OAAO,CAAC,CAAC;EACtC,MAAMM,UAAU,GAAGD,gBAAgB,CAAC,SAAS,CAAC;EAE9C,IAAI,CAACD,MAAM,IAAI,CAACE,UAAU,EAAE;IACxBC,OAAO,CAACC,IAAI,CAAC,sDAAsD,CAAC;IACpE,OAAO,IAAI;EACf;EAEA,OAAO,KAAKJ,MAAM,MAAME,UAAU,MAAMH,aAAa,EAAE;AAC3D,CAAC;AAED,SAASD,WAAW","ignoreList":[]}

package/modules/pages/PagesList/components/Main/CreatePage/CreatePage.d.ts

@@ -0,0 +1,3 @@
+export declare const useCreatePageDialog: (folderId: string) => {
+    showCreatePageDialog: () => void;
+};

package/modules/pages/PagesList/components/Main/CreatePage/CreatePage.js

@@ -0,0 +1,96 @@
+import React, { useMemo } from "react";
+import { Grid, Select } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { useDialogs } from "@webiny/app-admin";
+import { useCreatePage } from "../../../../../../features/pages";
+import { useGetEditPageUrl } from "../../../hooks/useGetEditPageUrl";
+import { useRouter } from "@webiny/react-router";
+import { useGetPageType, usePageTypes } from "../../../../../../features";
+export const useCreatePageDialog = folderId => {
+  const dialog = useDialogs();
+  const {
+    createPage
+  } = useCreatePage();
+  const {
+    getEditPageUrl
+  } = useGetEditPageUrl();
+  const {
+    history
+  } = useRouter();
+  const {
+    getPageType
+  } = useGetPageType();
+  const showCreatePageDialog = () => {
+    dialog.showDialog({
+      title: "Create a Page",
+      acceptLabel: "Create",
+      cancelLabel: "Cancel",
+      content: /*#__PURE__*/React.createElement(CreatePageWizard, null),
+      formData: {},
+      onAccept: async ({
+        type,
+        ...formData
+      }) => {
+        const pageType = getPageType(type);
+        if (!pageType) {
+          // This edge-case can hardly happen, but let's still check for it.
+          return;
+        }
+        const input = {
+          location: {
+            folderId
+          },
+          properties: {
+            ...(formData.properties ?? {})
+          },
+          metadata: {
+            documentType: "page",
+            pageType: type,
+            ...(formData.metadata ?? {})
+          },
+          elements: {
+            root: {
+              type: "Webiny/Element",
+              id: "root",
+              component: {
+                name: "Webiny/Root"
+              }
+            }
+          }
+        };
+        const result = await createPage(input);
+        history.push(getEditPageUrl(result.id));
+      }
+    });
+  };
+  return {
+    showCreatePageDialog
+  };
+};
+const CreatePageWizard = () => {
+  const {
+    pageTypes
+  } = usePageTypes();
+  const options = useMemo(() => {
+    return Array.from(pageTypes.entries()).map(([, type]) => ({
+      label: type.label,
+      value: type.name
+    }));
+  }, [pageTypes]);
+  const pageTypeBind = useBind({
+    name: "type",
+    validators: [validation.create("required")]
+  });
+  const pageType = pageTypes.find(type => type.name === pageTypeBind.value);
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Select, Object.assign({
+    label: "Page Type"
+  }, pageTypeBind, {
+    value: pageTypeBind.value ?? "",
+    options: options
+  }))), /*#__PURE__*/React.createElement(React.Fragment, null, pageType ? pageType.element : null));
+};
+
+//# sourceMappingURL=CreatePage.js.map

package/modules/pages/PagesList/components/Main/CreatePage/CreatePage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Grid","Select","useBind","validation","useDialogs","useCreatePage","useGetEditPageUrl","useRouter","useGetPageType","usePageTypes","useCreatePageDialog","folderId","dialog","createPage","getEditPageUrl","history","getPageType","showCreatePageDialog","showDialog","title","acceptLabel","cancelLabel","content","createElement","CreatePageWizard","formData","onAccept","type","pageType","input","location","properties","metadata","documentType","elements","root","id","component","name","result","push","pageTypes","options","Array","from","entries","map","label","value","pageTypeBind","validators","create","find","Column","span","Object","assign","Fragment","element"],"sources":["CreatePage.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid, Select } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { useCreatePage } from \"~/features/pages\";\nimport type { CreatePageParams } from \"~/features/pages/createPage/ICreatePageUseCase\";\nimport { useGetEditPageUrl } from \"~/modules/pages/PagesList/hooks/useGetEditPageUrl\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useGetPageType, usePageTypes } from \"~/features\";\n\nexport const useCreatePageDialog = (folderId: string) => {\n    const dialog = useDialogs();\n    const { createPage } = useCreatePage();\n    const { getEditPageUrl } = useGetEditPageUrl();\n    const { history } = useRouter();\n    const { getPageType } = useGetPageType();\n\n    const showCreatePageDialog = () => {\n        dialog.showDialog({\n            title: \"Create a Page\",\n            acceptLabel: \"Create\",\n            cancelLabel: \"Cancel\",\n            content: <CreatePageWizard />,\n            formData: {},\n            onAccept: async ({ type, ...formData }) => {\n                const pageType = getPageType(type);\n\n                if (!pageType) {\n                    // This edge-case can hardly happen, but let's still check for it.\n                    return;\n                }\n\n                const input: CreatePageParams = {\n                    location: {\n                        folderId\n                    },\n                    properties: {\n                        ...(formData.properties ?? {})\n                    },\n                    metadata: {\n                        documentType: \"page\",\n                        pageType: type,\n                        ...(formData.metadata ?? {})\n                    },\n                    elements: {\n                        root: {\n                            type: \"Webiny/Element\",\n                            id: \"root\",\n                            component: {\n                                name: \"Webiny/Root\"\n                            }\n                        }\n                    }\n                };\n\n                const result = await createPage(input);\n                history.push(getEditPageUrl(result.id));\n            }\n        });\n    };\n\n    return { showCreatePageDialog };\n};\n\nconst CreatePageWizard = () => {\n    const { pageTypes } = usePageTypes();\n\n    const options = useMemo(() => {\n        return Array.from(pageTypes.entries()).map(([, type]) => ({\n            label: type.label,\n            value: type.name\n        }));\n    }, [pageTypes]);\n\n    const pageTypeBind = useBind({\n        name: \"type\",\n        validators: [validation.create(\"required\")]\n    });\n\n    const pageType = pageTypes.find(type => type.name === pageTypeBind.value);\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                <Select\n                    label={\"Page Type\"}\n                    {...pageTypeBind}\n                    value={pageTypeBind.value ?? \"\"}\n                    options={options}\n                ></Select>\n            </Grid.Column>\n            <>{pageType ? pageType.element : null}</>\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;AAC/C,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,aAAa;AAEtB,SAASC,iBAAiB;AAC1B,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,cAAc,EAAEC,YAAY;AAErC,OAAO,MAAMC,mBAAmB,GAAIC,QAAgB,IAAK;EACrD,MAAMC,MAAM,GAAGR,UAAU,CAAC,CAAC;EAC3B,MAAM;IAAES;EAAW,CAAC,GAAGR,aAAa,CAAC,CAAC;EACtC,MAAM;IAAES;EAAe,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EAC9C,MAAM;IAAES;EAAQ,CAAC,GAAGR,SAAS,CAAC,CAAC;EAC/B,MAAM;IAAES;EAAY,CAAC,GAAGR,cAAc,CAAC,CAAC;EAExC,MAAMS,oBAAoB,GAAGA,CAAA,KAAM;IAC/BL,MAAM,CAACM,UAAU,CAAC;MACdC,KAAK,EAAE,eAAe;MACtBC,WAAW,EAAE,QAAQ;MACrBC,WAAW,EAAE,QAAQ;MACrBC,OAAO,eAAExB,KAAA,CAAAyB,aAAA,CAACC,gBAAgB,MAAE,CAAC;MAC7BC,QAAQ,EAAE,CAAC,CAAC;MACZC,QAAQ,EAAE,MAAAA,CAAO;QAAEC,IAAI;QAAE,GAAGF;MAAS,CAAC,KAAK;QACvC,MAAMG,QAAQ,GAAGZ,WAAW,CAACW,IAAI,CAAC;QAElC,IAAI,CAACC,QAAQ,EAAE;UACX;UACA;QACJ;QAEA,MAAMC,KAAuB,GAAG;UAC5BC,QAAQ,EAAE;YACNnB;UACJ,CAAC;UACDoB,UAAU,EAAE;YACR,IAAIN,QAAQ,CAACM,UAAU,IAAI,CAAC,CAAC;UACjC,CAAC;UACDC,QAAQ,EAAE;YACNC,YAAY,EAAE,MAAM;YACpBL,QAAQ,EAAED,IAAI;YACd,IAAIF,QAAQ,CAACO,QAAQ,IAAI,CAAC,CAAC;UAC/B,CAAC;UACDE,QAAQ,EAAE;YACNC,IAAI,EAAE;cACFR,IAAI,EAAE,gBAAgB;cACtBS,EAAE,EAAE,MAAM;cACVC,SAAS,EAAE;gBACPC,IAAI,EAAE;cACV;YACJ;UACJ;QACJ,CAAC;QAED,MAAMC,MAAM,GAAG,MAAM1B,UAAU,CAACgB,KAAK,CAAC;QACtCd,OAAO,CAACyB,IAAI,CAAC1B,cAAc,CAACyB,MAAM,CAACH,EAAE,CAAC,CAAC;MAC3C;IACJ,CAAC,CAAC;EACN,CAAC;EAED,OAAO;IAAEnB;EAAqB,CAAC;AACnC,CAAC;AAED,MAAMO,gBAAgB,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEiB;EAAU,CAAC,GAAGhC,YAAY,CAAC,CAAC;EAEpC,MAAMiC,OAAO,GAAG3C,OAAO,CAAC,MAAM;IAC1B,OAAO4C,KAAK,CAACC,IAAI,CAACH,SAAS,CAACI,OAAO,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC,GAAGnB,IAAI,CAAC,MAAM;MACtDoB,KAAK,EAAEpB,IAAI,CAACoB,KAAK;MACjBC,KAAK,EAAErB,IAAI,CAACW;IAChB,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAACG,SAAS,CAAC,CAAC;EAEf,MAAMQ,YAAY,GAAG/C,OAAO,CAAC;IACzBoC,IAAI,EAAE,MAAM;IACZY,UAAU,EAAE,CAAC/C,UAAU,CAACgD,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC,CAAC;EAEF,MAAMvB,QAAQ,GAAGa,SAAS,CAACW,IAAI,CAACzB,IAAI,IAAIA,IAAI,CAACW,IAAI,KAAKW,YAAY,CAACD,KAAK,CAAC;EAEzE,oBACIlD,KAAA,CAAAyB,aAAA,CAACvB,IAAI,qBACDF,KAAA,CAAAyB,aAAA,CAACvB,IAAI,CAACqD,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBxD,KAAA,CAAAyB,aAAA,CAACtB,MAAM,EAAAsD,MAAA,CAAAC,MAAA;IACHT,KAAK,EAAE;EAAY,GACfE,YAAY;IAChBD,KAAK,EAAEC,YAAY,CAACD,KAAK,IAAI,EAAG;IAChCN,OAAO,EAAEA;EAAQ,EACZ,CACA,CAAC,eACd5C,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA2D,QAAA,QAAG7B,QAAQ,GAAGA,QAAQ,CAAC8B,OAAO,GAAG,IAAO,CACtC,CAAC;AAEf,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Main/CreatePage/StaticPageForm.d.ts

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

package/modules/pages/PagesList/components/Main/CreatePage/StaticPageForm.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Grid, Input } from "@webiny/admin-ui";
+import { UnsetOnUnmount, useBind, useForm } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { pagePathFromTitle } from "../../../../../../shared/pagePathFromTitle";
+const generatePath = form => () => {
+  if (form.getValue("properties.path")) {
+    return;
+  }
+  const titlePath = pagePathFromTitle(form.getValue("properties.title")) ?? "";
+  form.setValue("properties.path", `/${titlePath}`);
+};
+export const StaticPageForm = () => {
+  const form = useForm();
+  const titleBind = useBind({
+    name: "properties.title",
+    validators: [validation.create("required")]
+  });
+  const pathBind = useBind({
+    name: "properties.path",
+    validators: [validation.create("required")]
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "properties.title"
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({
+    label: "Title"
+  }, titleBind, {
+    onBlur: generatePath(form)
+  })))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UnsetOnUnmount, {
+    name: "properties.path"
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({
+    label: "Path"
+  }, pathBind)))));
+};
+
+//# sourceMappingURL=StaticPageForm.js.map

package/modules/pages/PagesList/components/Main/CreatePage/StaticPageForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Grid","Input","UnsetOnUnmount","useBind","useForm","validation","pagePathFromTitle","generatePath","form","getValue","titlePath","setValue","StaticPageForm","titleBind","name","validators","create","pathBind","createElement","Fragment","Column","span","Object","assign","label","onBlur"],"sources":["StaticPageForm.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, Input } from \"@webiny/admin-ui\";\nimport type { FormAPI } from \"@webiny/form\";\nimport { UnsetOnUnmount, useBind, useForm } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { pagePathFromTitle } from \"~/shared/pagePathFromTitle\";\n\nconst generatePath = (form: FormAPI) => () => {\n    if (form.getValue(\"properties.path\")) {\n        return;\n    }\n    const titlePath = pagePathFromTitle(form.getValue(\"properties.title\")) ?? \"\";\n    form.setValue(\"properties.path\", `/${titlePath}`);\n};\n\nexport const StaticPageForm = () => {\n    const form = useForm();\n    const titleBind = useBind({\n        name: \"properties.title\",\n        validators: [validation.create(\"required\")]\n    });\n    const pathBind = useBind({\n        name: \"properties.path\",\n        validators: [validation.create(\"required\")]\n    });\n\n    return (\n        <>\n            <Grid.Column span={12}>\n                <UnsetOnUnmount name={\"properties.title\"}>\n                    <Input label={\"Title\"} {...titleBind} onBlur={generatePath(form)} />\n                </UnsetOnUnmount>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <UnsetOnUnmount name={\"properties.path\"}>\n                    <Input label={\"Path\"} {...pathBind} />\n                </UnsetOnUnmount>\n            </Grid.Column>\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAE9C,SAASC,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,cAAc;AAC/D,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,iBAAiB;AAE1B,MAAMC,YAAY,GAAIC,IAAa,IAAK,MAAM;EAC1C,IAAIA,IAAI,CAACC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;IAClC;EACJ;EACA,MAAMC,SAAS,GAAGJ,iBAAiB,CAACE,IAAI,CAACC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE;EAC5ED,IAAI,CAACG,QAAQ,CAAC,iBAAiB,EAAE,IAAID,SAAS,EAAE,CAAC;AACrD,CAAC;AAED,OAAO,MAAME,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMJ,IAAI,GAAGJ,OAAO,CAAC,CAAC;EACtB,MAAMS,SAAS,GAAGV,OAAO,CAAC;IACtBW,IAAI,EAAE,kBAAkB;IACxBC,UAAU,EAAE,CAACV,UAAU,CAACW,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC,CAAC;EACF,MAAMC,QAAQ,GAAGd,OAAO,CAAC;IACrBW,IAAI,EAAE,iBAAiB;IACvBC,UAAU,EAAE,CAACV,UAAU,CAACW,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC,CAAC;EAEF,oBACIjB,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,qBACIpB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACoB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBtB,KAAA,CAAAmB,aAAA,CAAChB,cAAc;IAACY,IAAI,EAAE;EAAmB,gBACrCf,KAAA,CAAAmB,aAAA,CAACjB,KAAK,EAAAqB,MAAA,CAAAC,MAAA;IAACC,KAAK,EAAE;EAAQ,GAAKX,SAAS;IAAEY,MAAM,EAAElB,YAAY,CAACC,IAAI;EAAE,EAAE,CACvD,CACP,CAAC,eACdT,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACoB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBtB,KAAA,CAAAmB,aAAA,CAAChB,cAAc;IAACY,IAAI,EAAE;EAAkB,gBACpCf,KAAA,CAAAmB,aAAA,CAACjB,KAAK,EAAAqB,MAAA,CAAAC,MAAA;IAACC,KAAK,EAAE;EAAO,GAAKP,QAAQ,CAAG,CACzB,CACP,CACf,CAAC;AAEX,CAAC","ignoreList":[]}

package/modules/pages/PagesList/components/Main/Main.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Main: () => React.JSX.Element;
+export { Main };