@nascentdigital/funnel-editor 4.4.18

package/dist/page/components/BlockConfig.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfig = BlockConfig;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const core_1 = require("../../core");
+const hooks_1 = require("../hooks");
+// component
+function BlockConfig({ className, block: blockOrSectionBlock }) {
+    // bind ref
+    const editorRef = (0, react_1.useRef)(null);
+    // skip if there's no config
+    const block = blockOrSectionBlock instanceof core_1.SectionBlock
+        ? blockOrSectionBlock.block
+        : blockOrSectionBlock;
+    const { config } = block;
+    if (config.length === 0) {
+        return undefined;
+    }
+    // helpers
+    const onEdit = async (event) => {
+        var _a;
+        // edit configuration
+        await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
+            block: blockOrSectionBlock,
+            anchor: event.currentTarget
+        }));
+    };
+    // render
+    const valid = config.every(field => field.valid);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.StatusChip, { className: className, variant: valid ? 'success' : 'error', onClick: onEdit, children: "Configure" }), (0, jsx_runtime_1.jsx)(BlockConfigEditor, { ref: editorRef })] }));
+}
+// editor
+const BlockConfigEditor = (0, react_1.forwardRef)(function BlockConfigEditor(_, ref) {
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [configuration, setConfiguration] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const pageController = (0, hooks_1.usePageController)();
+    const touch = (0, client_1.useTouch)();
+    const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
+    // sync w/ configuration
+    (0, core_1.useBlockConfiguration)(configuration);
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ block, anchor }) => {
+            // reset state
+            setConfiguration(block.getConfiguration());
+            setAnchor(anchor);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // helpers
+    const onSave = async () => {
+        // save config
+        configuration === null || configuration === void 0 ? void 0 : configuration.save();
+        // wait for page to save
+        await (0, rxjs_1.firstValueFrom)(pageController.saved$);
+        // complete (we're done)
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve();
+        // refresh
+        touch();
+    };
+    const onCancel = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // cancel
+        deferral.resolve(undefined);
+        // touch
+        touch();
+    };
+    // skip if there's no config
+    if (!configuration) {
+        return null;
+    }
+    // render
+    const { layout } = configuration;
+    return ((0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: "Block Configuration", open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, onSave: onSave, onClose: onCancel, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-start items-start gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
+});

package/dist/page/components/BlockEditor.d.ts

@@ -0,0 +1,10 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Block, PageSettings, Section, SectionBlock } from '../../core';
+export declare function BlockEditor({ className, block, onSelectItem }: BlockEditor.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace BlockEditor {
+    type Props = {
+        className?: string;
+        block: Block | SectionBlock;
+        onSelectItem: Callback<Block | SectionBlock | Section | PageSettings>;
+    };
+}

package/dist/page/components/BlockEditor.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockEditor = BlockEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../core");
+const BlockConfig_1 = require("./BlockConfig");
+// component
+function BlockEditor({ className, block, onSelectItem }) {
+    // bind props + hooks
+    const dialog = (0, core_1.useDialog)();
+    const menu = (0, core_1.useMenuController)(blockMenu);
+    (0, core_1.useBlock)(block);
+    // render empty state if block isn't selected
+    if (!block) {
+        return null;
+    }
+    // or render empty state if block isn't created yet
+    if (!block.activated) {
+        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("p", { className: "max-w-screen-sm heading-md text-content-secondary", children: ["The ", (0, jsx_runtime_1.jsx)("span", { className: "text-content-primary", children: block.name }), " block hasn't been created yet."] }), (0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)('mt-l10', 'label-md text-background bg-content-primary rounded-sm px-l6 py-l4 cursor-pointer interpolate-fast', 'hover:bg-content-secondary active:bg-content-primary'), onClick: () => block.activated = true, children: "Get Started!" })] }));
+    }
+    // helpers
+    const onDeleteBlock = async () => {
+        // confirm deletion (or skip)
+        const confirmed = await dialog.confirm({
+            title: `Delete Block`,
+            message: ((0, jsx_runtime_1.jsxs)("p", { children: ["Are you really sure that you want to delete the ", (0, jsx_runtime_1.jsx)("b", { children: block.name }), " block?  This can't be undone!"] })),
+            confirmLabel: 'Delete it',
+            destructive: true
+        });
+        if (!confirmed) {
+            return;
+        }
+        // determine next block (needs to be done before deleting)
+        const nearestBlock = block.getClosestBlock();
+        // delete the block
+        block.delete();
+        // and select the nearest neighbour (if any)
+        if (block.parent instanceof core_1.Section && nearestBlock) {
+            onSelectItem(nearestBlock);
+        }
+    };
+    const onMenuClick = async (id) => {
+        // clear selection
+        menu.selectedItem = undefined;
+        // action selection
+        switch (id) {
+            case 'delete':
+                await onDeleteBlock();
+                break;
+        }
+    };
+    // render editor
+    return ((0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { className: (0, classnames_1.default)(className, 'px-l6 py-l10'), title: block.name, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockConfig_1.BlockConfig, { className: "shrink-0", block: block }), block.canDelete &&
+                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(e.currentTarget) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), fields: block.fields }));
+}
+const blockMenu = [
+    {
+        id: 'delete',
+        label: 'Delete Block',
+        icon: 'Trash',
+        destructive: true
+    }
+];

package/dist/page/components/PageHeader.d.ts

@@ -0,0 +1,12 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Block, PageSettings, Section, SectionBlock } from '../../core';
+import { PageController } from '../hooks';
+export declare function PageHeader({ className, target, onBack }: PageHeader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageHeader {
+    type Props = {
+        className?: string;
+        target: PageController.Target;
+        selectedItem?: Block | SectionBlock | Section | PageSettings | undefined;
+        onBack: Callback.Void;
+    };
+}

package/dist/page/components/PageHeader.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = PageHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const core_1 = require("../../core");
+const hooks_1 = require("../hooks");
+// component
+function PageHeader({ className, target, onBack }) {
+    // bind props + hooks
+    const editorApi = (0, core_1.useEditorApi)();
+    const router = (0, core_1.useEditorRouter)();
+    const controller = (0, hooks_1.usePageController)();
+    const languageDialogRef = (0, react_1.useRef)(null);
+    const { breadcrumbs } = (0, react_1.useMemo)(() => {
+        // build breadcrumbs for nested item
+        const { template, slug } = target;
+        const brand = funnel_core_1.AppConfig.brandConfig();
+        const breadcrumbs = [
+            brand.name,
+            template.name
+        ];
+        // add slug (if any)
+        if (slug) {
+            breadcrumbs.push(slug);
+        }
+        // return
+        return { breadcrumbs };
+    }, [target]);
+    const groupItems = controller.pageSummary
+        ? controller.pageSummary.pages
+        : [];
+    // helpers
+    const onOpenLanguageDialog = async () => {
+        var _a;
+        // open language dialog
+        const selectedLanguage = await ((_a = languageDialogRef.current) === null || _a === void 0 ? void 0 : _a.open());
+        if (!selectedLanguage) {
+            return;
+        }
+        // navigate to the selected language
+        await router.navigateToPage(Object.assign(Object.assign({}, target), { page: target.template.type, language: selectedLanguage }));
+    };
+    const onCreateBlank = async (targetLanguage) => {
+        // throw if page not ready
+        if (!controller.page) {
+            throw new Error('page not ready');
+        }
+        // create blank page
+        await editorApi.createPage({
+            groupId: controller.page.groupId,
+            type: target.template.type,
+            region: target.region,
+            language: targetLanguage,
+            slug: target.slug
+        });
+    };
+    const onDuplicate = async (source, targetLanguage) => {
+        // duplicate page
+        await editorApi.duplicatePage({
+            source: source,
+            targetLanguage,
+            targetPage: 'current',
+            targetSlug: target.slug
+        });
+    };
+    // render
+    const { page } = controller;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col'), children: [(0, jsx_runtime_1.jsxs)(core_1.Header, { breadcrumbs: breadcrumbs, back: "back", onBack: onBack, children: [page &&
+                        (0, jsx_runtime_1.jsx)(core_1.ButtonLink, { variant: "secondary", size: "sm", iconLeft: "Eye", target: "_blank", href: editorApi.getPreviewUrl(page.url), children: "Preview" }), controller.languages.length > 1 &&
+                        (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "Globe", onClick: onOpenLanguageDialog, children: funnel_core_1.Language.getName(target.language) })] }), (0, jsx_runtime_1.jsx)(core_1.LanguageDialog, { ref: languageDialogRef, currentLanguage: target.language, groupItems: groupItems, onCreateBlank: onCreateBlank, onDuplicate: onDuplicate })] }));
+}

package/dist/page/components/PageNav.d.ts

@@ -0,0 +1,10 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Block, PageSettings, Section, SectionBlock } from '../../core';
+export declare function PageNav({ className, selectedItem, onSelectItem }: PageNav.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PageNav {
+    type Props = {
+        className?: string;
+        selectedItem: Block | SectionBlock | Section | PageSettings | undefined;
+        onSelectItem: Callback<Block | SectionBlock | Section | PageSettings>;
+    };
+}

package/dist/page/components/PageNav.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageNav = PageNav;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const core_1 = require("../../core");
+const nav_1 = require("./nav");
+// component
+function PageNav({ className, selectedItem, onSelectItem }) {
+    // bind page
+    const page = (0, core_1.usePossiblePage)();
+    // bind block
+    (0, react_2.useEffect)(() => {
+        // skip if there's no page
+        if (!page || !selectedItem) {
+            return;
+        }
+        // scroll to block
+        const element = funnel_core_1.Browser.getElement(`#${CSS.escape(selectedItem.identifier)}`);
+        element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [page, selectedItem]);
+    // skip if page isn't ready
+    if (!page) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: (0, jsx_runtime_1.jsxs)(core_1.FadeIn, { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8 px-l8 py-l10'), children: [renderSection({
+                    title: 'SEO & Discoverability',
+                    caption: 'Tune your page for search and share',
+                    items: [page.settings, ...page.discover],
+                    selectedItem,
+                    onSelectItem
+                }), (0, jsx_runtime_1.jsx)("hr", { className: "border-border-l1" }), renderSection({
+                    title: 'Page Blocks',
+                    caption: 'Select a block to modify',
+                    items: page.content,
+                    selectedItem,
+                    onSelectItem
+                })] }) }));
+}
+function renderSection({ className, title, caption, items, selectedItem, onSelectItem }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(nav_1.NavLayout, { className: className, title: title, caption: caption, children: (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-l6", children: items.map(item => {
+                // render block/settings
+                if (item instanceof core_1.Block || item instanceof core_1.PageSettings) {
+                    return ((0, jsx_runtime_1.jsx)(nav_1.NavBlock, { block: item, selectedItem: selectedItem, onSelectItem: onSelectItem }, item.identifier));
+                }
+                // or render section
+                else {
+                    return ((0, jsx_runtime_1.jsx)(nav_1.NavSection, { section: item, selectedItem: selectedItem, onSelectItem: onSelectItem }, item.identifier));
+                }
+            }) }) }, title));
+}

package/dist/page/components/PageNotCreated.d.ts

@@ -0,0 +1,8 @@
+import { PageController } from '../hooks';
+export declare function PageNotCreated({ className, target }: PageNotCreated.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PageNotCreated {
+    type Props = {
+        className?: string;
+        target: PageController.Target;
+    };
+}

package/dist/page/components/PageNotCreated.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageNotCreated = PageNotCreated;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../core");
+const hooks_1 = require("../hooks");
+// component
+function PageNotCreated({ className, target }) {
+    // bind props + hooks
+    const { template } = target;
+    const dialog = (0, core_1.useDialog)();
+    const controller = (0, hooks_1.usePageController)();
+    const { pageSummary } = controller;
+    // brick if there's no summary AND target is dynamic (should NEVER happen)
+    if (!pageSummary && template.variant === 'dynamic') {
+        return null;
+    }
+    // helpers
+    const onCreate = async () => {
+        // confirm creation (or skip)
+        const confirmed = await dialog.confirm({
+            title: 'Are you ready?',
+            message: `Do you want to create the ${template.name} page in ${funnel_core_1.Language.getName(target.language)}?`,
+            confirmLabel: 'Get Started'
+        });
+        if (!confirmed) {
+            return;
+        }
+        // create page (will cause a refresh)
+        try {
+            await controller.create(target);
+        }
+        // TODO: handle error
+        catch (e) {
+            console.error('[PageNotCreate] failed to create page:', e);
+        }
+    };
+    // render prompt
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8 p-l8'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "display-sm md:display-md", children: "Page doesn't exist" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: onCreate, children: "Create it" })] }));
+}

package/dist/page/components/PageNotFound.d.ts

@@ -0,0 +1,8 @@
+import { PageController } from '../hooks';
+export declare function PageNotFound({ className, target }: PageNotFound.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageNotFound {
+    type Props = {
+        className?: string;
+        target: PageController.Target;
+    };
+}

package/dist/page/components/PageNotFound.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageNotFound = PageNotFound;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../core");
+// component
+function PageNotFound({ className, target }) {
+    // bind hooks
+    const router = (0, core_1.useEditorRouter)();
+    // helpers
+    const onGoBack = async () => {
+    };
+    // render prompt
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8 p-l8'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "display-sm md:display-md", children: "Page Not Found" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: onGoBack, children: "Go Back" })] }));
+}

package/dist/page/components/PageStatus.d.ts

@@ -0,0 +1,10 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Block, PageSettings, Section, SectionBlock } from '../../core';
+export declare function PageStatus({ className, onSelectItem }: PageStatus.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PageStatus {
+    type Props = {
+        className?: string;
+        selectedItem: Block | SectionBlock | Section | PageSettings | undefined;
+        onSelectItem: Callback<Block | SectionBlock | Section | PageSettings>;
+    };
+}