@nascentdigital/funnel-editor 4.4.18

package/dist/page/components/PageStatus.js

@@ -0,0 +1,267 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageStatus = PageStatus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_cms_1 = require("@nascentdigital/funnel-cms");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const core_1 = require("../../core");
+const hooks_1 = require("../hooks");
+const status_1 = require("./status");
+// component
+function PageStatus({ className, onSelectItem }) {
+    // bind hooks
+    const router = (0, core_1.useEditorRouter)();
+    const editorApi = (0, core_1.useEditorApi)();
+    const controller = (0, hooks_1.usePageController)();
+    const page = (0, core_1.usePossiblePage)();
+    const dialog = (0, core_1.useDialog)();
+    // skip if page isn't ready
+    if (!page) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8 pt-l9 px-l8 pb-l8'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Page Status" }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", children: renderStatus({ router, editorApi, controller, page, dialog, onSelectItem }) })] }));
+}
+function renderStatus(args) {
+    // render unchanged
+    const { page, onSelectItem } = args;
+    if (page.state === 'published') {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: renderLiveUnchanged(args) }, "live"), page.modified &&
+                    (0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: (0, jsx_runtime_1.jsx)(status_1.AutoSave, { className: "mt-l8" }) }, "live-status")] }));
+    }
+    // or draft invalid/valid
+    let status;
+    const { publishedOn, errors } = page;
+    const invalid = errors.items.length > 0;
+    if (!publishedOn) {
+        status = invalid
+            ? renderDraftInvalid(Object.assign(Object.assign({}, args), { errors }))
+            : renderDraftValid(args);
+    }
+    // or live invalid/valid
+    else {
+        const { changes } = page;
+        const changedBlocks = changes.items
+            .flatMap(item => item instanceof core_1.Section
+            ? item.blocks.filter(block => block.changes.fields.length > 0)
+            : item);
+        status = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l8", children: [invalid
+                    ? renderLiveInvalid(Object.assign(Object.assign({}, args), { errors }))
+                    : renderLiveValid(args), changedBlocks.length > 0 &&
+                    (0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4 p-l7 bg-surface1 rounded-xxl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "heading-xs text-content-primary", children: "Changes" }), (0, jsx_runtime_1.jsx)(core_1.CountBadge, { variant: "secondary", count: changedBlocks.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary text-pretty", children: "These sections have been updated:" }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-wrap gap-l4", children: changedBlocks.map(item => (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(core_1.StatusChip, { variant: "info", onClick: () => onSelectItem(item), children: item.name }) }, item.identifier)) })] })] }));
+    }
+    // return packaged item
+    return ((0, jsx_runtime_1.jsxs)(core_1.FadeIn, { children: [status, (0, jsx_runtime_1.jsx)(status_1.AutoSave, { className: "mt-l8" })] }, `${publishedOn ? 'updated' : 'draft'}/${invalid ? 'invalid' : 'valid'}`));
+}
+function renderDraftInvalid(args) {
+    // bind props
+    const { page } = args;
+    const { config, content } = getTodos(page);
+    const invalidConfig = config.filter(todo => !todo.valid);
+    const invalidContent = content.filter(todo => !todo.valid);
+    const totalItems = config.length + content.length;
+    const validItems = totalItems - (invalidConfig.length + invalidContent.length);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(core_1.InfoPanel, { contentClassName: "flex flex-col gap-l8 mt-l8", title: "Finish Up", caption: "**You're almost there!** Finish up the sections below to publish your page.", status: "info", menu: [
+            {
+                id: 'delete',
+                label: 'Delete Draft',
+                icon: 'Trash',
+                destructive: true
+            }
+        ], onMenuSelect: () => onDiscard(args), children: [(0, jsx_runtime_1.jsx)(core_1.ProgressBar, { title: "Completion", percent: 100 * validItems / totalItems }), renderTodos(Object.assign({ title: 'SEO & Discoverability', todos: invalidConfig }, args)), renderTodos(Object.assign({ title: 'Content', todos: invalidContent }, args))] }));
+}
+function renderDraftValid(args) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.InfoPanel, { contentClassName: "flex flex-col gap-l8 mt-l8", title: "Launch Page", caption: "**All set!** Your page is complete and ready to go live.", status: "success", menu: [
+            {
+                id: 'delete',
+                label: 'Delete Draft',
+                icon: 'Trash',
+                destructive: true
+            }
+        ], onMenuSelect: () => onDiscard(args), children: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: () => onPublish(args), children: "Go Live!" }) }));
+}
+function renderLiveUnchanged(args) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.InfoPanel, { contentClassName: "flex flex-col gap-l8 mt-l8", title: "Live", caption: "**You're all caught up!**  There are no changes to publish.", status: "success", menu: [
+            {
+                id: 'unpublish',
+                label: 'Unpublish Page',
+                icon: 'Archive'
+            }
+        ], onMenuSelect: () => onUnpublish(args) }));
+}
+function renderLiveInvalid(args) {
+    // render
+    const { errors, onSelectItem } = args;
+    const invalidBlocks = errors.items
+        .flatMap(item => item instanceof core_1.Section
+        ? item.blocks.filter(block => !block.valid)
+        : item);
+    return ((0, jsx_runtime_1.jsx)(core_1.InfoPanel, { contentClassName: "flex flex-col gap-l8 mt-l8", title: "Action Needed", caption: "**Wait a sec!**  A few issues need fixing before you can publish.", status: "error", menu: [
+            {
+                id: 'discard',
+                label: 'Discard Changes',
+                icon: 'Trash'
+            }
+        ], onMenuSelect: () => onDiscard(args), children: (0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "heading-xs text-content-primary", children: "Errors" }), (0, jsx_runtime_1.jsx)(core_1.CountBadge, { variant: "secondary", count: invalidBlocks.length })] }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-wrap gap-l4", children: invalidBlocks.map(block => (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(core_1.StatusChip, { variant: "error", onClick: () => onSelectItem(block), children: block.name }) }, block.identifier)) })] }) }));
+}
+function renderLiveValid(args) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.InfoPanel, { contentClassName: "flex flex-col gap-l8 mt-l8", title: "Updates Ready", caption: "**All set!** Your page is complete and ready to go live.", status: "success", menu: [
+            {
+                id: 'discard',
+                label: 'Discard Changes',
+                icon: 'Trash'
+            }
+        ], onMenuSelect: () => onDiscard(args), children: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: () => onPublish(args), children: "Publish Updates" }) }));
+}
+function getTodos(page) {
+    // helper
+    const getBlockTodo = (block) => ({
+        todo: block,
+        valid: block.valid || (!block.required && !block.activated)
+    });
+    // transform todos
+    const { seo, content } = page;
+    return {
+        config: [getBlockTodo(seo)],
+        content: content
+            .flatMap(item => item instanceof core_1.Block
+            ? getBlockTodo(item)
+            : item.blocks.map(getBlockTodo))
+    };
+}
+function renderTodos({ title, todos, onSelectItem }) {
+    // skip if there are no items
+    if (!todos || todos.length === 0) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsxs)("h3", { className: "label-xs text-content-tertiary", children: [title, ":"] }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col mt-l5 label-md text-content-primary", children: todos.map(({ todo }, index) => (0, jsx_runtime_1.jsxs)("li", { children: [index > 0 &&
+                            (0, jsx_runtime_1.jsx)("span", { className: "block ml-9 w-2 h-10 bg-border-l1" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('group flex items-center gap-l4 cursor-pointer interpolate'), onClick: () => onSelectItem(todo), children: [(0, jsx_runtime_1.jsx)("span", { className: "flex justify-center items-center w-20 h-20 bg-info/tint0 rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('block w-[13.5px] h-[13.5px] interpolate-fast', 'border-2 border-solid border-content-button-contrast rounded-full', 'group-hover:border-ix-primary') }) }), (0, jsx_runtime_1.jsx)("span", { children: todo.name })] })] }, todo.identifier)) })] }));
+}
+async function onPublish({ router, page }) {
+    // skip if there's no changeset (shouldn't be possible)
+    const { changeSetId } = page;
+    if (!changeSetId) {
+        console.warn(`[PageStatus] missing changeset id for page`, page);
+        return;
+    }
+    // navigate to changeset
+    router.navigateToChangeSet(changeSetId)
+        .catch(console.error);
+}
+async function onUnpublish({ router, editorApi, controller, page, dialog }) {
+    // confirm and unpublish
+    const linkedError = { value: undefined };
+    await dialog.confirm({
+        title: `Unpublish ${page.template.name}`,
+        message: 'Are you really sure you want to unpublish this page?',
+        executingLabel: 'Unpublishing...',
+        confirmationCode: page.slug || page.type,
+        confirmLabel: 'Unpublish it',
+        destructive: true,
+        asyncTask: async () => {
+            // try to unpublish
+            try {
+                // unpublish page (will refresh afterwards)
+                await controller.unpublish();
+                // switch to remaining language
+                const { region, type } = page;
+                await router.navigateToPages({ region, page: type });
+                // indicate success
+                return { success: true };
+            }
+            // or indicate failure
+            catch (e) {
+                // special handling for dependants error
+                if (e instanceof funnel_cms_1.LinkedDependantsError) {
+                    // track error
+                    linkedError.value = e;
+                    // indicate success (so we can handle later
+                    return { success: true };
+                }
+                // or show inline error
+                else {
+                    return {
+                        success: false,
+                        error: e instanceof Error
+                            ? e
+                            : new funnel_core_1.ServerError('Something went wrong while trying to unpublish the page.')
+                    };
+                }
+            }
+        }
+    });
+    // raise linked error dialog if we failed
+    if (linkedError.value) {
+        // show error
+        const { collections, pages } = linkedError.value;
+        const unlink = await dialog.confirm({
+            title: 'Links Detected',
+            message: ((0, jsx_runtime_1.jsx)(core_1.LinkGroup, { title: "We found some dependencies that need to be unlinked before we can unpublish this page:", pages: pages, collections: collections })),
+            confirmLabel: 'Unlink',
+            executingLabel: 'Unlinking...',
+            destructive: true
+        });
+        // TODO: auto-unlink + unpublish
+    }
+}
+async function onDiscard({ router, editorApi, dialog, page, controller }) {
+    // skip if there's no changeset (not possible)
+    const { changeSetId } = page;
+    if (!changeSetId) {
+        console.warn(`[PageStatus] missing changeset id for page`, page);
+        return;
+    }
+    // confirm (or skip)
+    await dialog.confirm({
+        title: `Discard ${page.template.name} changes`,
+        message: `Are you really sure you want to discard changes this ${page.template.name} page?`,
+        executingLabel: 'Reverting...',
+        confirmationCode: page.slug || page.type.toLowerCase(),
+        confirmLabel: 'Revert',
+        destructive: true,
+        asyncTask: async () => {
+            // try to revert
+            try {
+                // revert
+                await editorApi.revertChangeSet({ changeSetId, changeIds: [page.id] });
+                // reload if it was already published (just a revert)
+                if (page.published) {
+                    // reload
+                    await controller.reload();
+                }
+                // or indicate success
+                return { success: true };
+            }
+            // or indicate failure
+            catch (e) {
+                return {
+                    success: false,
+                    error: e instanceof Error
+                        ? e
+                        : new funnel_core_1.ServerError('Something prevented us from reverting changes to this page - please try again later.')
+                };
+            }
+        }
+    });
+    // go back if page was a draft (nothing to look at)
+    if (!page.published) {
+        // go back to page list
+        if (page.template.variant === 'dynamic') {
+            await router.navigateToPages({ page: page.type, region: page.region });
+        }
+        // or back to site map
+        else {
+            await router.navigateToTemplates({ region: page.region });
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+export declare function SettingsEditor({ className }: SettingsEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace SettingsEditor {
+    type Props = {
+        className?: string;
+    };
+}

package/dist/page/components/SettingsEditor.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsEditor = SettingsEditor;
+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 SettingsEditor({ className }) {
+    // bind state + hooks
+    const { timezone } = funnel_core_1.AppConfig.get();
+    const controller = (0, hooks_1.usePageController)();
+    const page = (0, core_1.usePage)();
+    const editorApi = (0, core_1.useEditorApi)();
+    const router = (0, core_1.useEditorRouter)();
+    const { publicationField, slugField } = (0, core_1.useTempFields)({
+        publicationField: funnel_core_1.Schema.Field.timestamp({
+            name: 'Published Date',
+            hint: 'Set to override Last Published date',
+            timezone,
+            defaultHour: 8
+        }).optional(),
+        slugField: funnel_core_1.Schema.Field.slug({ name: 'Slug', minLength: 2, required: true })
+    });
+    const dialog = (0, core_1.useDialog)();
+    const publicationModified = !publicationField.sandboxed && publicationField.modified;
+    const slugModified = !slugField.sandboxed && slugField.modified;
+    const tagOptions = page.template.tags;
+    const { tags } = page;
+    const canUnpublish = page.published;
+    const canDelete = page.hasSlug && !page.published;
+    const showDangerOptions = canUnpublish || canDelete;
+    // bind field values on page update
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // bind fields
+        publicationField.reset(page.publication
+            ? funnel_core_1.Schema.TimestampField.Value.toData([page.publication, publicationField.schema.timezone])
+            : null);
+        slugField.reset(page.hasSlug
+            ? funnel_core_1.Schema.TextField.Value.toData((_a = page.slug) !== null && _a !== void 0 ? _a : '')
+            : undefined);
+    }, [page, publicationField, slugField]);
+    // sync publication changes
+    (0, react_1.useEffect)(() => {
+        if (publicationModified) {
+            const timestamp = funnel_core_1.Schema.TimestampField.Value.fromData(publicationField.value);
+            page.publication = timestamp ? timestamp[0] : undefined;
+        }
+    }, [page, publicationField, publicationModified]);
+    // sync slug changes
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (slugModified) {
+            page.slug = (_a = funnel_core_1.Schema.TextField.Value.fromData(slugField.value)) !== null && _a !== void 0 ? _a : page.slug;
+        }
+    }, [page, slugField, slugModified]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'min-h-full flex-1 flex flex-col gap-l8 p-l8'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "display-xs", children: "Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-l6", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Basic" }), (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: publicationField, secured: true }), page.hasSlug &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: slugField, secured: true })] }), (0, jsx_runtime_1.jsx)(core_1.TagEditor, { tagged: page })] }));
+}
+// helpers
+function renderDangerSetting(title, description, action) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l5 p-l5 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2 flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md text-content-primary", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "body-sm text-content-secondary", children: description })] }), action] }));
+}

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

@@ -0,0 +1,7 @@
+export * from './BlockEditor';
+export * from './PageHeader';
+export * from './PageNav';
+export * from './PageNotCreated';
+export * from './PageNotFound';
+export * from './PageStatus';
+export * from './SettingsEditor';

package/dist/page/components/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BlockEditor"), exports);
+__exportStar(require("./PageHeader"), exports);
+__exportStar(require("./PageNav"), exports);
+__exportStar(require("./PageNotCreated"), exports);
+__exportStar(require("./PageNotFound"), exports);
+__exportStar(require("./PageStatus"), exports);
+__exportStar(require("./SettingsEditor"), exports);

package/dist/page/components/nav/NavBlock.d.ts

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

package/dist/page/components/nav/NavBlock.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBlock = NavBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../../core");
+// component
+function NavBlock({ className, block, selectedItem, onSelectItem, draggable = false }) {
+    // bind props
+    const selected = block === selectedItem;
+    // render
+    return ((0, jsx_runtime_1.jsxs)("li", { id: block.identifier, className: (0, classnames_1.default)(className, 'card', {
+            'card-selected': selected,
+            'card-draggable': draggable
+        }), onClick: () => !selected && onSelectItem(block), children: [draggable &&
+                (0, jsx_runtime_1.jsx)(core_1.Icon, { className: "card-grip", variant: "GripVertical" }), (0, jsx_runtime_1.jsx)(core_1.BlockIcon, { className: (0, classnames_1.default)({
+                    'bg-content-tertiary/tint1': !selected,
+                    'bg-ix-primary/tint2': selected
+                }), block: block instanceof core_1.PageSettings
+                    ? 'Settings'
+                    : block.schema }), (0, jsx_runtime_1.jsx)("span", { children: block.name })] }));
+}

package/dist/page/components/nav/NavLayout.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export declare function NavLayout({ className, title, caption, children }: NavLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavLayout {
+    type Props = PropsWithChildren & {
+        className?: string;
+        title: string;
+        caption?: string;
+    };
+}

package/dist/page/components/nav/NavLayout.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavLayout = NavLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function NavLayout({ className, title, caption, children }) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8'), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-content-primary", children: title }), caption &&
+                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary text-pretty mt-l2", children: caption })] }), children] }));
+}

package/dist/page/components/nav/NavSection.d.ts

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

package/dist/page/components/nav/NavSection.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.NavSection = NavSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const core_1 = require("../../../core");
+const NavBlock_1 = require("./NavBlock");
+// component
+function NavSection({ className, section, selectedItem, onSelectItem }) {
+    // bind props + hooks
+    const { name, schema: { ordered }, availableBlocks } = section;
+    const items = (0, react_1.useMemo)(() => availableBlocks.map(block => ({
+        id: block.identifier,
+        label: block.name,
+        icon: core_1.BlockIcon.resolve(block.schema)
+    })), [availableBlocks]);
+    const menu = (0, core_1.useMenuController)(items);
+    // helpers
+    const onOpenBlockMenu = (anchor) => {
+        // open menu
+        menu.selectedItem = undefined;
+        menu.open(anchor);
+    };
+    const onAddBlock = (identifier) => {
+        // add block
+        const block = section.addBlock(identifier);
+        // then select it
+        onSelectItem(block);
+    };
+    const onOrderChange = ({ item, toIndex }) => {
+        // move block
+        const block = section.moveBlock(item.id, toIndex);
+        // then select it (if it was moved)
+        if (block) {
+            onSelectItem(block);
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { id: section.identifier, className: (0, classnames_1.default)(className, 'flex flex-col gap-l4 p-l5 bg-surface2 rounded-sm'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-xs", children: name }), menu.items.length > 0 &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { variant: "util", icon: "Plus", size: "sm", onClick: e => onOpenBlockMenu(e.currentTarget) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { title: "Add Block", controller: menu, onItemClick: onAddBlock })] })] }), (0, jsx_runtime_1.jsx)(core_1.Sortable, { className: "flex flex-col gap-l5", enableItemClick: true, items: section.blocks, renderItem: block => (0, jsx_runtime_1.jsx)(NavBlock_1.NavBlock, { block: block, selectedItem: selectedItem, onSelectItem: onSelectItem, draggable: true }, block.identifier), onChange: onOrderChange })] }));
+}

package/dist/page/components/nav/index.d.ts

@@ -0,0 +1,3 @@
+export * from './NavBlock';
+export * from './NavLayout';
+export * from './NavSection';

package/dist/page/components/nav/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NavBlock"), exports);
+__exportStar(require("./NavLayout"), exports);
+__exportStar(require("./NavSection"), exports);

package/dist/page/components/status/AutoSave.d.ts

@@ -0,0 +1,6 @@
+export declare function AutoSave({ className }: AutoSave.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AutoSave {
+    type Props = {
+        className?: string;
+    };
+}

package/dist/page/components/status/AutoSave.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSave = AutoSave;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const core_1 = require("../../../core");
+const hooks_1 = require("../../hooks");
+// component
+function AutoSave({ className }) {
+    var _a;
+    // bind page controller
+    const controller = (0, hooks_1.usePageController)();
+    // refresh if page changes
+    (0, core_1.usePage)();
+    // force refresh every minute (required for stuff like "Last Saved" label)
+    (0, client_1.useRefresh)('1m');
+    // determine status
+    const { state, page } = controller;
+    let status;
+    switch (state) {
+        case 'ready':
+            status = (page === null || page === void 0 ? void 0 : page.modified)
+                ? 'changed'
+                : 'saved';
+            break;
+        case 'error':
+            status = 'error';
+            break;
+        default:
+            status = 'saving';
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.AutoSave, { className: className, status: status, lastSaved: (_a = page === null || page === void 0 ? void 0 : page.updatedOn) !== null && _a !== void 0 ? _a : page === null || page === void 0 ? void 0 : page.createdOn }));
+}

package/dist/page/components/status/index.d.ts

@@ -0,0 +1 @@
+export * from './AutoSave';

package/dist/page/components/status/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutoSave"), exports);