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

package/pages/editor/TopBar/RevisionsMenu.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Button, DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent as ArrowDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent as Draft } from "@webiny/icons/draw.svg";
+import { ReactComponent as Unpublished } from "@webiny/icons/lock.svg";
+import { ReactComponent as Published } from "@webiny/icons/remove_red_eye.svg";
+import { useGetPageRevisions } from "../../../features/pages";
+import { useSelectFromDocument } from "../../../BaseEditor/hooks/useSelectFromDocument";
+import { PAGE_EDITOR_ROUTE } from "../../../constants";
+const {
+  Item
+} = DropdownMenu;
+const statusIcon = {
+  draft: /*#__PURE__*/React.createElement(Draft, null),
+  published: /*#__PURE__*/React.createElement(Published, null),
+  unpublished: /*#__PURE__*/React.createElement(Unpublished, null)
+};
+export const RevisionsMenu = () => {
+  const [revisions, setRevisions] = useState([]);
+  const {
+    loading,
+    getPageRevisions
+  } = useGetPageRevisions();
+  const id = useSelectFromDocument(document => document.id);
+  const status = useSelectFromDocument(document => document.status);
+  useEffect(() => {
+    const [pageId] = id.split("#");
+    getPageRevisions({
+      pageId
+    }).then(revisions => {
+      setRevisions(revisions.sort((a, b) => {
+        return new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime();
+      }).reverse());
+    });
+  }, [id, status]);
+  const currentRevision = revisions.find(r => r.id === id);
+  const goToRevision = useCallback(id => {
+    // TODO: make this work without a full app reload
+    window.location.pathname = `${PAGE_EDITOR_ROUTE}/${encodeURIComponent(id)}`;
+  }, []);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: /*#__PURE__*/React.createElement(Button, {
+      disabled: loading,
+      variant: "ghost",
+      text: currentRevision ? currentRevision.getLabel() : "Loading...",
+      icon: /*#__PURE__*/React.createElement(ArrowDown, null),
+      iconPosition: "end"
+    })
+  }, revisions.map(revision => /*#__PURE__*/React.createElement(Item, {
+    key: revision.id,
+    className: "wby-cursor-pointer",
+    onClick: () => goToRevision(revision.id),
+    disabled: revision.locked,
+    icon: /*#__PURE__*/React.createElement(Item.Icon, {
+      label: revision.getLabel(),
+      element: statusIcon[revision.status]
+    }),
+    text: revision.getLabel()
+  })));
+};
+
+//# sourceMappingURL=RevisionsMenu.js.map

package/pages/editor/TopBar/RevisionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","useCallback","Button","DropdownMenu","ReactComponent","ArrowDown","Draft","Unpublished","Published","useGetPageRevisions","useSelectFromDocument","PAGE_EDITOR_ROUTE","Item","statusIcon","draft","createElement","published","unpublished","RevisionsMenu","revisions","setRevisions","loading","getPageRevisions","id","document","status","pageId","split","then","sort","a","b","Date","savedOn","getTime","reverse","currentRevision","find","r","goToRevision","window","location","pathname","encodeURIComponent","trigger","disabled","variant","text","getLabel","icon","iconPosition","map","revision","key","className","onClick","locked","Icon","label","element"],"sources":["RevisionsMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { Button, DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Draft } from \"@webiny/icons/draw.svg\";\nimport { ReactComponent as Unpublished } from \"@webiny/icons/lock.svg\";\nimport { ReactComponent as Published } from \"@webiny/icons/remove_red_eye.svg\";\nimport { useGetPageRevisions } from \"~/features/pages\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { PageRevision } from \"~/domain/PageRevision\";\nimport { PAGE_EDITOR_ROUTE } from \"~/constants\";\nimport type { EditorPage } from \"~/sdk\";\n\nconst { Item } = DropdownMenu;\n\nconst statusIcon: Record<string, JSX.Element> = {\n    draft: <Draft />,\n    published: <Published />,\n    unpublished: <Unpublished />\n};\n\nexport const RevisionsMenu = () => {\n    const [revisions, setRevisions] = useState<PageRevision[]>([]);\n    const { loading, getPageRevisions } = useGetPageRevisions();\n    const id = useSelectFromDocument(document => document.id);\n    const status = useSelectFromDocument<string, EditorPage>(document => document.status);\n\n    useEffect(() => {\n        const [pageId] = id.split(\"#\");\n        getPageRevisions({ pageId }).then(revisions => {\n            setRevisions(\n                revisions\n                    .sort((a, b) => {\n                        return new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime();\n                    })\n                    .reverse()\n            );\n        });\n    }, [id, status]);\n\n    const currentRevision = revisions.find(r => r.id === id);\n\n    const goToRevision = useCallback((id: string) => {\n        // TODO: make this work without a full app reload\n        window.location.pathname = `${PAGE_EDITOR_ROUTE}/${encodeURIComponent(id)}`;\n    }, []);\n\n    return (\n        <DropdownMenu\n            trigger={\n                <Button\n                    disabled={loading}\n                    variant=\"ghost\"\n                    text={currentRevision ? currentRevision.getLabel() : \"Loading...\"}\n                    icon={<ArrowDown />}\n                    iconPosition={\"end\"}\n                />\n            }\n        >\n            {revisions.map(revision => (\n                <Item\n                    key={revision.id}\n                    className={\"wby-cursor-pointer\"}\n                    onClick={() => goToRevision(revision.id)}\n                    disabled={revision.locked}\n                    icon={\n                        <Item.Icon\n                            label={revision.getLabel()}\n                            element={statusIcon[revision.status]}\n                        />\n                    }\n                    text={revision.getLabel()}\n                />\n            ))}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/pages/editor/TopBar/Settings/KeyValueGridEditor.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const KeyValueGridEditor: React.FC;

package/pages/editor/TopBar/Settings/KeyValueGridEditor.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Grid, Input, Button, IconButton, Text } from "@webiny/admin-ui";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+export const KeyValueGridEditor = () => {
+  const [items, setItems] = useState([]);
+  const handleChange = (index, field, value) => {
+    const updated = [...items];
+    updated[index][field] = value;
+    setItems(updated);
+  };
+  const handleDelete = index => {
+    const updated = items.filter((_, i) => i !== index);
+    setItems(updated);
+  };
+  const handleAdd = () => {
+    setItems([...items, {
+      key: "",
+      value: ""
+    }]);
+  };
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md"
+  }, "Add your SEO tags here.")), items.map((item, index) => /*#__PURE__*/React.createElement(Grid.Column, {
+    key: index,
+    span: 12
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 5
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Key",
+    value: item.key,
+    onChange: value => handleChange(index, "key", value)
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 5
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Value",
+    value: item.value,
+    onChange: value => handleChange(index, "value", value)
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "md",
+    variant: "tertiary",
+    onClick: () => handleDelete(index),
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+  })))))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12,
+    key: "action"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleAdd,
+    variant: "secondary",
+    text: "+ Add"
+  })));
+};
+
+//# sourceMappingURL=KeyValueGridEditor.js.map

package/pages/editor/TopBar/Settings/KeyValueGridEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Grid","Input","Button","IconButton","Text","ReactComponent","DeleteIcon","KeyValueGridEditor","items","setItems","handleChange","index","field","value","updated","handleDelete","filter","_","i","handleAdd","key","createElement","className","Fragment","Column","span","size","map","item","placeholder","onChange","variant","onClick","icon","text"],"sources":["KeyValueGridEditor.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Grid, Input, Button, IconButton, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\n\ntype KeyValue = {\n    key: string;\n    value: string;\n};\n\nexport const KeyValueGridEditor: React.FC = () => {\n    const [items, setItems] = useState<KeyValue[]>([]);\n\n    const handleChange = (index: number, field: \"key\" | \"value\", value: string) => {\n        const updated = [...items];\n        updated[index][field] = value;\n        setItems(updated);\n    };\n\n    const handleDelete = (index: number) => {\n        const updated = items.filter((_, i) => i !== index);\n        setItems(updated);\n    };\n\n    const handleAdd = () => {\n        setItems([...items, { key: \"\", value: \"\" }]);\n    };\n\n    return (\n        <Grid className={\"wby-mt-md\"}>\n            <>\n                <Grid.Column span={12}>\n                    <Text size={\"md\"}>Add your SEO tags here.</Text>\n                </Grid.Column>\n                {items.map((item, index) => (\n                    <Grid.Column key={index} span={12}>\n                        <Grid>\n                            <Grid.Column span={5}>\n                                <Input\n                                    placeholder=\"Key\"\n                                    value={item.key}\n                                    onChange={value => handleChange(index, \"key\", value)}\n                                />\n                            </Grid.Column>\n                            <Grid.Column span={5}>\n                                <Input\n                                    placeholder=\"Value\"\n                                    value={item.value}\n                                    onChange={value => handleChange(index, \"value\", value)}\n                                />\n                            </Grid.Column>\n                            <Grid.Column span={2}>\n                                <IconButton\n                                    size={\"md\"}\n                                    variant={\"tertiary\"}\n                                    onClick={() => handleDelete(index)}\n                                    icon={<DeleteIcon />}\n                                />\n                            </Grid.Column>\n                        </Grid>\n                    </Grid.Column>\n                ))}\n            </>\n            <Grid.Column span={12} key={\"action\"}>\n                <Button onClick={handleAdd} variant={\"secondary\"} text={\"+ Add\"} />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/pages/editor/TopBar/Settings/MetaTags.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface MetaTagsProps {
+    label: string;
+    description: string;
+    bindName: string;
+    keyName: string;
+    keyLabel: string;
+    valueName: string;
+    valueLabel: string;
+}
+export declare const MetaTags: (props: MetaTagsProps) => React.JSX.Element;

package/pages/editor/TopBar/Settings/MetaTags.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Bind, useBind } from "@webiny/form";
+import { Button, DynamicFieldset, FormComponentDescription, FormComponentLabel, IconButton, Input } from "@webiny/admin-ui";
+const Header = ({
+  label,
+  description
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description
+  }));
+};
+const Footer = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    text: "Add tag",
+    variant: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  }));
+};
+export const MetaTags = props => {
+  const {
+    value,
+    onChange
+  } = useBind({
+    name: props.bindName,
+    defaultValue: []
+  });
+  return /*#__PURE__*/React.createElement(DynamicFieldset, {
+    value: value,
+    onChange: onChange
+  }, ({
+    actions,
+    header,
+    footer,
+    row,
+    empty
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, row(({
+    index
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-start wby-gap-sm"
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: `${props.bindName}.${index}.${props.keyName}`
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: props.keyLabel,
+    size: "lg"
+  })), /*#__PURE__*/React.createElement(Bind, {
+    name: `${props.bindName}.${index}.${props.valueName}`
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: props.valueLabel,
+    size: "lg"
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    variant: "ghost",
+    size: "lg",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: actions.remove(index)
+  })))), footer(() => /*#__PURE__*/React.createElement(Footer, {
+    onClick: actions.add()
+  })), header(() => /*#__PURE__*/React.createElement(Header, {
+    label: props.label,
+    description: props.description
+  })), empty(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    label: props.label,
+    description: props.description
+  }), /*#__PURE__*/React.createElement(Footer, {
+    onClick: actions.add()
+  })))));
+};
+
+//# sourceMappingURL=MetaTags.js.map

package/pages/editor/TopBar/Settings/MetaTags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","AddIcon","DeleteIcon","Bind","useBind","Button","DynamicFieldset","FormComponentDescription","FormComponentLabel","IconButton","Input","Header","label","description","createElement","Fragment","text","Footer","onClick","className","variant","size","icon","MetaTags","props","value","onChange","name","bindName","defaultValue","actions","header","footer","row","empty","index","keyName","placeholder","keyLabel","valueName","valueLabel","remove","add"],"sources":["MetaTags.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Bind, useBind } from \"@webiny/form\";\nimport {\n    Button,\n    DynamicFieldset,\n    FormComponentDescription,\n    FormComponentLabel,\n    IconButton,\n    Input\n} from \"@webiny/admin-ui\";\n\ninterface HeaderProps {\n    label: string;\n    description: string;\n}\n\nconst Header = ({ label, description }: HeaderProps) => {\n    return (\n        <>\n            <FormComponentLabel text={label} />\n            <FormComponentDescription text={description} />\n        </>\n    );\n};\n\ninterface FooterProps {\n    onClick: () => void;\n}\n\nconst Footer = ({ onClick }: FooterProps) => {\n    return (\n        <div className={\"wby-mt-md\"}>\n            <Button\n                onClick={onClick}\n                text=\"Add tag\"\n                variant={\"secondary\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n            />\n        </div>\n    );\n};\n\nexport interface MetaTagsProps {\n    label: string;\n    description: string;\n    bindName: string;\n    keyName: string;\n    keyLabel: string;\n    valueName: string;\n    valueLabel: string;\n}\n\nexport const MetaTags = (props: MetaTagsProps) => {\n    const { value, onChange } = useBind({ name: props.bindName, defaultValue: [] });\n\n    return (\n        <DynamicFieldset value={value} onChange={onChange}>\n            {({ actions, header, footer, row, empty }) => (\n                <>\n                    {row(({ index }) => (\n                        <div className={\"wby-mt-md\"}>\n                            <div className={\"wby-flex wby-items-start wby-gap-sm\"}>\n                                <Bind name={`${props.bindName}.${index}.${props.keyName}`}>\n                                    <Input placeholder={props.keyLabel} size={\"lg\"} />\n                                </Bind>\n                                <Bind name={`${props.bindName}.${index}.${props.valueName}`}>\n                                    <Input placeholder={props.valueLabel} size={\"lg\"} />\n                                </Bind>\n                                <IconButton\n                                    variant={\"ghost\"}\n                                    size={\"lg\"}\n                                    icon={<DeleteIcon />}\n                                    onClick={actions.remove(index)}\n                                />\n                            </div>\n                        </div>\n                    ))}\n                    {footer(() => (\n                        <Footer onClick={actions.add()} />\n                    ))}\n                    {header(() => (\n                        <Header label={props.label} description={props.description} />\n                    ))}\n                    {empty(() => (\n                        <>\n                            <Header label={props.label} description={props.description} />\n                            <Footer onClick={actions.add()} />\n                        </>\n                    ))}\n                </>\n            )}\n        </DynamicFieldset>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/pages/editor/TopBar/Settings/SettingsDialogBody.d.ts

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

package/pages/editor/TopBar/Settings/SettingsDialogBody.js

@@ -0,0 +1,120 @@
+import React from "react";
+import { Tabs, Grid, Input, Textarea } from "@webiny/admin-ui";
+import { Bind } from "@webiny/form";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as SeoIcon } from "@webiny/icons/search.svg";
+import { ReactComponent as SocialIcon } from "@webiny/icons/thumb_up.svg";
+import { MetaTags } from "./MetaTags";
+import { SimpleTags } from "./SimpleTags";
+export const SettingsDialogBody = () => {
+  return /*#__PURE__*/React.createElement(Tabs, {
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "general",
+      value: "general",
+      trigger: "General",
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      content: /*#__PURE__*/React.createElement(GeneralSettingsForm, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "seo",
+      value: "seo",
+      trigger: "SEO",
+      icon: /*#__PURE__*/React.createElement(SeoIcon, null),
+      content: /*#__PURE__*/React.createElement(SeoSettingsForm, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "social",
+      value: "social",
+      trigger: "Social",
+      icon: /*#__PURE__*/React.createElement(SocialIcon, null),
+      content: /*#__PURE__*/React.createElement(SocialSettingsForm, null)
+    })]
+  });
+};
+const GeneralSettingsForm = () => {
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.title"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Page title"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.path"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Path"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.snippet"
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    label: "Snippet"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(SimpleTags, {
+    bindName: "properties.tags",
+    label: "Tags",
+    description: "Add page tags. These can be used for page rendering, filtering, etc."
+  })));
+};
+const SeoSettingsForm = () => {
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.seo.title"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Title",
+    description: "SEO title"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.seo.description"
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    label: "Description",
+    description: "SEO description"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(MetaTags, {
+    label: "Meta Tags",
+    description: "Add SEO tags",
+    bindName: "properties.seo.metaTags",
+    keyName: "name",
+    keyLabel: "Name",
+    valueName: "content",
+    valueLabel: "Content"
+  })));
+};
+const SocialSettingsForm = () => {
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.social.title"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Title",
+    description: "Title for social platforms (og:title)"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "properties.social.description"
+  }, /*#__PURE__*/React.createElement(Textarea, {
+    label: "Description",
+    description: "Description for social platforms (og:description)"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(MetaTags, {
+    label: "Meta Tags",
+    description: "Add more Open Graph tags",
+    bindName: "properties.social.metaTags",
+    keyName: "property",
+    keyLabel: "Property",
+    valueName: "content",
+    valueLabel: "Content"
+  })));
+};
+
+//# sourceMappingURL=SettingsDialogBody.js.map

package/pages/editor/TopBar/Settings/SettingsDialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tabs","Grid","Input","Textarea","Bind","ReactComponent","SettingsIcon","SeoIcon","SocialIcon","MetaTags","SimpleTags","SettingsDialogBody","createElement","tabs","Tab","key","value","trigger","icon","content","GeneralSettingsForm","SeoSettingsForm","SocialSettingsForm","className","Column","span","name","label","bindName","description","keyName","keyLabel","valueName","valueLabel"],"sources":["SettingsDialogBody.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tabs, Grid, Input, Textarea } from \"@webiny/admin-ui\";\nimport { Bind } from \"@webiny/form\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as SeoIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as SocialIcon } from \"@webiny/icons/thumb_up.svg\";\nimport { MetaTags } from \"./MetaTags\";\nimport { SimpleTags } from \"~/pages/editor/TopBar/Settings/SimpleTags\";\n\nexport const SettingsDialogBody = () => {\n    return (\n        <Tabs\n            tabs={[\n                <Tabs.Tab\n                    key={\"general\"}\n                    value={\"general\"}\n                    trigger={\"General\"}\n                    icon={<SettingsIcon />}\n                    content={<GeneralSettingsForm />}\n                />,\n                <Tabs.Tab\n                    key={\"seo\"}\n                    value={\"seo\"}\n                    trigger={\"SEO\"}\n                    icon={<SeoIcon />}\n                    content={<SeoSettingsForm />}\n                />,\n                <Tabs.Tab\n                    key={\"social\"}\n                    value={\"social\"}\n                    trigger={\"Social\"}\n                    icon={<SocialIcon />}\n                    content={<SocialSettingsForm />}\n                />\n            ]}\n        />\n    );\n};\n\nconst GeneralSettingsForm = () => {\n    return (\n        <Grid className={\"wby-mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.title\"}>\n                    <Input label={\"Page title\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.path\"}>\n                    <Input label={\"Path\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.snippet\"}>\n                    <Textarea label={\"Snippet\"} />\n                </Bind>\n            </Grid.Column>\n            {/*<Grid.Column span={12}>\n                <Bind name={\"properties.image\"}>\n                    {({ value, onChange }) => (\n                        <FileManager\n                            images={true}\n                            render={({ showFileManager }) => (\n                                <FilePicker\n                                    label={\"Image\"}\n                                    description=\"Select an image to represent this page\"\n                                    type=\"compact\"\n                                    value={value}\n                                    onSelectItem={() => showFileManager()}\n                                    onRemoveItem={() => onChange(undefined)}\n                                    onEditItem={() => showFileManager()}\n                                />\n                            )}\n                        />\n                    )}\n                </Bind>\n            </Grid.Column>*/}\n            <Grid.Column span={12}>\n                <SimpleTags\n                    bindName={\"properties.tags\"}\n                    label={\"Tags\"}\n                    description={\n                        \"Add page tags. These can be used for page rendering, filtering, etc.\"\n                    }\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst SeoSettingsForm = () => {\n    return (\n        <Grid className={\"wby-mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.seo.title\"}>\n                    <Input label={\"Title\"} description={\"SEO title\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.seo.description\"}>\n                    <Textarea label={\"Description\"} description={\"SEO description\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <MetaTags\n                    label={\"Meta Tags\"}\n                    description={\"Add SEO tags\"}\n                    bindName={\"properties.seo.metaTags\"}\n                    keyName={\"name\"}\n                    keyLabel={\"Name\"}\n                    valueName={\"content\"}\n                    valueLabel={\"Content\"}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst SocialSettingsForm = () => {\n    return (\n        <Grid className={\"wby-mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.social.title\"}>\n                    <Input label={\"Title\"} description={\"Title for social platforms (og:title)\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"properties.social.description\"}>\n                    <Textarea\n                        label={\"Description\"}\n                        description={\"Description for social platforms (og:description)\"}\n                    />\n                </Bind>\n            </Grid.Column>\n            {/*<Grid.Column span={12}>\n                <Bind name={\"properties.social.image\"}>\n                    {({ value, onChange }) => (\n                        <FileManager\n                            images={true}\n                            render={({ showFileManager }) => (\n                                <FilePicker\n                                    label={\"Image\"}\n                                    description=\"Select an image for social platforms (og:image)\"\n                                    type=\"compact\"\n                                    value={value}\n                                    onSelectItem={() => showFileManager()}\n                                    onRemoveItem={() => onChange(undefined)}\n                                    onEditItem={() => showFileManager()}\n                                />\n                            )}\n                        />\n                    )}\n                </Bind>\n            </Grid.Column>*/}\n            <Grid.Column span={12}>\n                <MetaTags\n                    label={\"Meta Tags\"}\n                    description={\"Add more Open Graph tags\"}\n                    bindName={\"properties.social.metaTags\"}\n                    keyName={\"property\"}\n                    keyLabel={\"Property\"}\n                    valueName={\"content\"}\n                    valueLabel={\"Content\"}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/pages/editor/TopBar/Settings/SimpleTags.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface MetaTagsProps {
+    bindName: string;
+    label: string;
+    description: string;
+}
+export declare const SimpleTags: (props: MetaTagsProps) => React.JSX.Element;

package/pages/editor/TopBar/Settings/SimpleTags.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Bind, useBind } from "@webiny/form";
+import { Button, DynamicFieldset, FormComponentDescription, FormComponentLabel, IconButton, Input } from "@webiny/admin-ui";
+const Header = ({
+  label,
+  description
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description
+  }));
+};
+const Footer = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    text: "Add tag",
+    variant: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  }));
+};
+export const SimpleTags = props => {
+  const {
+    value,
+    onChange
+  } = useBind({
+    name: props.bindName,
+    defaultValue: []
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-my-lg"
+  }, /*#__PURE__*/React.createElement(DynamicFieldset, {
+    value: value,
+    onChange: onChange,
+    onAdd: () => ""
+  }, ({
+    actions,
+    header,
+    footer,
+    row,
+    empty
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, row(({
+    index
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-start wby-gap-sm"
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: `${props.bindName}.${index}`
+  }, /*#__PURE__*/React.createElement(Input, {
+    size: "lg"
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    variant: "ghost",
+    size: "lg",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: actions.remove(index)
+  })))), footer(() => /*#__PURE__*/React.createElement(Footer, {
+    onClick: actions.add()
+  })), header(() => /*#__PURE__*/React.createElement(Header, {
+    label: props.label,
+    description: props.description
+  })), empty(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    label: props.label,
+    description: props.description
+  }), /*#__PURE__*/React.createElement(Footer, {
+    onClick: actions.add()
+  }))))));
+};
+
+//# sourceMappingURL=SimpleTags.js.map

package/pages/editor/TopBar/Settings/SimpleTags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","AddIcon","DeleteIcon","Bind","useBind","Button","DynamicFieldset","FormComponentDescription","FormComponentLabel","IconButton","Input","Header","label","description","createElement","Fragment","text","Footer","onClick","className","variant","size","icon","SimpleTags","props","value","onChange","name","bindName","defaultValue","onAdd","actions","header","footer","row","empty","index","remove","add"],"sources":["SimpleTags.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Bind, useBind } from \"@webiny/form\";\nimport {\n    Button,\n    DynamicFieldset,\n    FormComponentDescription,\n    FormComponentLabel,\n    IconButton,\n    Input\n} from \"@webiny/admin-ui\";\n\ninterface HeaderProps {\n    label: string;\n    description: string;\n}\n\nconst Header = ({ label, description }: HeaderProps) => {\n    return (\n        <>\n            <FormComponentLabel text={label} />\n            <FormComponentDescription text={description} />\n        </>\n    );\n};\n\ninterface FooterProps {\n    onClick: () => void;\n}\n\nconst Footer = ({ onClick }: FooterProps) => {\n    return (\n        <div className={\"wby-mt-md\"}>\n            <Button\n                onClick={onClick}\n                text=\"Add tag\"\n                variant={\"secondary\"}\n                size={\"sm\"}\n                icon={<AddIcon />}\n            />\n        </div>\n    );\n};\n\nexport interface MetaTagsProps {\n    bindName: string;\n    label: string;\n    description: string;\n}\n\nexport const SimpleTags = (props: MetaTagsProps) => {\n    const { value, onChange } = useBind({ name: props.bindName, defaultValue: [] });\n\n    return (\n        <div className={\"wby-my-lg\"}>\n            <DynamicFieldset value={value} onChange={onChange} onAdd={() => \"\"}>\n                {({ actions, header, footer, row, empty }) => (\n                    <>\n                        {row(({ index }) => (\n                            <div className={\"wby-mt-md\"}>\n                                <div className={\"wby-flex wby-items-start wby-gap-sm\"}>\n                                    <Bind name={`${props.bindName}.${index}`}>\n                                        <Input size={\"lg\"} />\n                                    </Bind>\n                                    <IconButton\n                                        variant={\"ghost\"}\n                                        size={\"lg\"}\n                                        icon={<DeleteIcon />}\n                                        onClick={actions.remove(index)}\n                                    />\n                                </div>\n                            </div>\n                        ))}\n                        {footer(() => (\n                            <Footer onClick={actions.add()} />\n                        ))}\n                        {header(() => (\n                            <Header label={props.label} description={props.description} />\n                        ))}\n                        {empty(() => (\n                            <>\n                                <Header label={props.label} description={props.description} />\n                                <Footer onClick={actions.add()} />\n                            </>\n                        ))}\n                    </>\n                )}\n            </DynamicFieldset>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/pages/editor/TopBar/SettingsButton.d.ts

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

package/pages/editor/TopBar/SettingsButton.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import { toJS, observable } from "mobx";
+import { IconButton } from "@webiny/admin-ui";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { useDialogs } from "@webiny/app-admin";
+import { SettingsDialogBody } from "./Settings/SettingsDialogBody";
+import { useDocumentEditor } from "../../../DocumentEditor";
+import { useSelectFromDocument } from "../../../BaseEditor/hooks/useSelectFromDocument";
+export const SettingsButton = () => {
+  const dialogs = useDialogs();
+  const editor = useDocumentEditor();
+  useUpdatePreviewUrl();
+  const showDialog = () => {
+    dialogs.showDialog({
+      title: "Page Settings",
+      description: "Configure your page settings, SEO and Social metadata.",
+      dismissible: false,
+      acceptLabel: "Save Settings",
+      formData: async () => {
+        const formData = {
+          properties: editor.getDocumentState().read().properties,
+          metadata: editor.getDocumentState().read().metadata
+        };
+        return structuredClone(toJS(formData));
+      },
+      content: /*#__PURE__*/React.createElement(SettingsDialogBody, null),
+      onAccept: data => {
+        editor.updateDocument(document => {
+          document.properties = observable(data.properties);
+          document.metadata = observable(data.metadata);
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-x-sm"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    onClick: showDialog
+  }));
+};
+const useUpdatePreviewUrl = () => {
+  const editor = useDocumentEditor();
+  const path = useSelectFromDocument(document => {
+    return document.properties.path;
+  });
+  useEffect(() => {
+    editor.updateDocument(document => {
+      const lastPreviewUrl = document.metadata.lastPreviewUrl;
+      if (!lastPreviewUrl) {
+        return;
+      }
+      const url = new URL(lastPreviewUrl);
+      if (url.pathname !== path) {
+        url.pathname = path;
+        document.metadata.lastPreviewUrl = url.toString();
+      }
+    });
+  }, [path]);
+};
+
+//# sourceMappingURL=SettingsButton.js.map

package/pages/editor/TopBar/SettingsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","toJS","observable","IconButton","ReactComponent","SettingsIcon","useDialogs","SettingsDialogBody","useDocumentEditor","useSelectFromDocument","SettingsButton","dialogs","editor","useUpdatePreviewUrl","showDialog","title","description","dismissible","acceptLabel","formData","properties","getDocumentState","read","metadata","structuredClone","content","createElement","onAccept","data","updateDocument","document","className","variant","icon","onClick","path","lastPreviewUrl","url","URL","pathname","toString"],"sources":["SettingsButton.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { toJS, observable } from \"mobx\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { SettingsDialogBody } from \"./Settings/SettingsDialogBody\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { EditorPage } from \"~/sdk\";\n\nexport const SettingsButton = () => {\n    const dialogs = useDialogs();\n    const editor = useDocumentEditor();\n    useUpdatePreviewUrl();\n\n    const showDialog = () => {\n        dialogs.showDialog({\n            title: \"Page Settings\",\n            description: \"Configure your page settings, SEO and Social metadata.\",\n            dismissible: false,\n            acceptLabel: \"Save Settings\",\n            formData: async () => {\n                const formData = {\n                    properties: editor.getDocumentState().read().properties,\n                    metadata: editor.getDocumentState().read().metadata\n                };\n                return structuredClone(toJS(formData));\n            },\n            content: <SettingsDialogBody />,\n            onAccept: data => {\n                editor.updateDocument(document => {\n                    document.properties = observable(data.properties);\n                    document.metadata = observable(data.metadata);\n                });\n            }\n        });\n    };\n\n    return (\n        <div className={\"wby-flex wby-gap-x-sm\"}>\n            <IconButton\n                variant=\"secondary\"\n                icon={<SettingsIcon />}\n                onClick={showDialog}\n            ></IconButton>\n        </div>\n    );\n};\n\nconst useUpdatePreviewUrl = () => {\n    const editor = useDocumentEditor();\n    const path = useSelectFromDocument<any, EditorPage>(document => {\n        return document.properties.path;\n    });\n\n    useEffect(() => {\n        editor.updateDocument(document => {\n            const lastPreviewUrl = document.metadata.lastPreviewUrl;\n            if (!lastPreviewUrl) {\n                return;\n            }\n            const url = new URL(lastPreviewUrl);\n            if (url.pathname !== path) {\n                url.pathname = path;\n                document.metadata.lastPreviewUrl = url.toString();\n            }\n        });\n    }, [path]);\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,UAAU,QAAQ,MAAM;AACvC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAC1B,SAASC,qBAAqB;AAG9B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,OAAO,GAAGL,UAAU,CAAC,CAAC;EAC5B,MAAMM,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClCK,mBAAmB,CAAC,CAAC;EAErB,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACrBH,OAAO,CAACG,UAAU,CAAC;MACfC,KAAK,EAAE,eAAe;MACtBC,WAAW,EAAE,wDAAwD;MACrEC,WAAW,EAAE,KAAK;MAClBC,WAAW,EAAE,eAAe;MAC5BC,QAAQ,EAAE,MAAAA,CAAA,KAAY;QAClB,MAAMA,QAAQ,GAAG;UACbC,UAAU,EAAER,MAAM,CAACS,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACF,UAAU;UACvDG,QAAQ,EAAEX,MAAM,CAACS,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC;QAC/C,CAAC;QACD,OAAOC,eAAe,CAACvB,IAAI,CAACkB,QAAQ,CAAC,CAAC;MAC1C,CAAC;MACDM,OAAO,eAAE1B,KAAA,CAAA2B,aAAA,CAACnB,kBAAkB,MAAE,CAAC;MAC/BoB,QAAQ,EAAEC,IAAI,IAAI;QACdhB,MAAM,CAACiB,cAAc,CAACC,QAAQ,IAAI;UAC9BA,QAAQ,CAACV,UAAU,GAAGlB,UAAU,CAAC0B,IAAI,CAACR,UAAU,CAAC;UACjDU,QAAQ,CAACP,QAAQ,GAAGrB,UAAU,CAAC0B,IAAI,CAACL,QAAQ,CAAC;QACjD,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC;EAED,oBACIxB,KAAA,CAAA2B,aAAA;IAAKK,SAAS,EAAE;EAAwB,gBACpChC,KAAA,CAAA2B,aAAA,CAACvB,UAAU;IACP6B,OAAO,EAAC,WAAW;IACnBC,IAAI,eAAElC,KAAA,CAAA2B,aAAA,CAACrB,YAAY,MAAE,CAAE;IACvB6B,OAAO,EAAEpB;EAAW,CACX,CACZ,CAAC;AAEd,CAAC;AAED,MAAMD,mBAAmB,GAAGA,CAAA,KAAM;EAC9B,MAAMD,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,MAAM2B,IAAI,GAAG1B,qBAAqB,CAAkBqB,QAAQ,IAAI;IAC5D,OAAOA,QAAQ,CAACV,UAAU,CAACe,IAAI;EACnC,CAAC,CAAC;EAEFnC,SAAS,CAAC,MAAM;IACZY,MAAM,CAACiB,cAAc,CAACC,QAAQ,IAAI;MAC9B,MAAMM,cAAc,GAAGN,QAAQ,CAACP,QAAQ,CAACa,cAAc;MACvD,IAAI,CAACA,cAAc,EAAE;QACjB;MACJ;MACA,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACF,cAAc,CAAC;MACnC,IAAIC,GAAG,CAACE,QAAQ,KAAKJ,IAAI,EAAE;QACvBE,GAAG,CAACE,QAAQ,GAAGJ,IAAI;QACnBL,QAAQ,CAACP,QAAQ,CAACa,cAAc,GAAGC,GAAG,CAACG,QAAQ,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACL,IAAI,CAAC,CAAC;AACd,CAAC","ignoreList":[]}

package/pages/editor/TopBar/Title.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Title(): React.JSX.Element;