@nascentdigital/funnel-editor 4.4.18

package/dist/changesets/screens/ChangeSetViewer.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeSetViewer = ChangeSetViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// component
+function ChangeSetViewer({ changeSetId }) {
+    // bind hooks
+    const { user } = (0, core_1.useAuthenticator)();
+    const editorApi = (0, core_1.useEditorApi)();
+    const router = (0, core_1.useEditorRouter)();
+    const splash = (0, core_1.useSplash)();
+    const dialog = (0, core_1.useDialog)();
+    const result = (0, core_1.useChangeSet)(changeSetId);
+    const changeIds = (0, react_1.useMemo)(() => result.__type === 'success'
+        ? result.result.changes.map(change => change.id)
+        : [], [result]);
+    const ready = result.__type !== 'pending';
+    const [multiSelectRef, multiSelect] = (0, core_1.useMultiSelectControls)();
+    // dismiss splash
+    (0, react_1.useEffect)(() => {
+        if (ready) {
+            splash.dismiss();
+        }
+    }, [splash, ready]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { back: "back", breadcrumbs: ['Publishing'], onBack: () => router.navigateToChangeSets() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: renderChangeSet({ user, editorApi, router, multiSelectRef, multiSelect, dialog, result, changeIds }) }) }) })] }));
+}
+function renderChangeSet({ user, editorApi, multiSelectRef, multiSelect, router, dialog, result, changeIds }) {
+    // skip if pending
+    if (result.__type === 'pending') {
+        return null;
+    }
+    // or show error if there's an issue
+    else if (result.__type === 'failure') {
+        console.error('[ChangeSetView] failed to fetch changes', result.error);
+        return ((0, jsx_runtime_1.jsx)(core_1.ErrorMessage, { error: core_1.ErrorMessage.getGenericError(result.error) }, "error"));
+    }
+    // resolve props
+    const { regions, collections } = funnel_core_1.Schema.Site.current();
+    const changeSet = result.result;
+    const { status } = changeSet;
+    const { selecting = false, selectedIds = [] } = multiSelect !== null && multiSelect !== void 0 ? multiSelect : {};
+    // helpers
+    const onCommit = async () => {
+        // confirm commit
+        const confirmed = await dialog.confirm({
+            title: 'Ready to launch changes?',
+            message: 'We\'ll make all changes in this change-set go live if you\'re ready.',
+            confirmLabel: 'Go live',
+            executingLabel: 'Launching...',
+            asyncTask: async () => {
+                try {
+                    // commit changeset
+                    await editorApi.commitChangeSet(changeSet.id);
+                    // indicate success
+                    return { success: true };
+                }
+                catch (e) {
+                    return {
+                        success: false,
+                        error: e instanceof Error
+                            ? e
+                            : new funnel_core_1.ServerError('We\'re having trouble launching changes - please try again later.')
+                    };
+                }
+            }
+        });
+        // navigate back on success
+        if (confirmed) {
+            router.navigateToChangeSets({ mode: 'replace' })
+                .catch(console.error);
+        }
+    };
+    const onChangeClick = async (change) => {
+        // toggle if selecting
+        if (selecting) {
+            multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.setSelectedIds(selectedIds => selectedIds.includes(change.id)
+                ? selectedIds.filter(id => id !== change.id)
+                : [...selectedIds, change.id]);
+        }
+        // or show dialog if clicking something unpublished
+        else if (change.type === 'unpublish') {
+            return;
+        }
+        // or navigate to page
+        else if (change.__type === 'page') {
+            await router.navigateToPage({
+                page: change.schema,
+                region: change.region,
+                language: change.language,
+                slug: change.slug
+            });
+        }
+        // or navigate to change
+        else if (change.__type === 'collection') {
+            await router.navigateToCollection({
+                type: change.schema,
+                groupId: change.groupId,
+                language: change.language
+            });
+        }
+    };
+    const onDiscardSelected = async () => {
+        const selectedIdCount = selectedIds.length;
+        console.debug(`[ChangeSetViewer] discarding ${selectedIds.length} changes`);
+        // confirm (or skip)
+        await dialog.confirm({
+            title: `Discard ${selectedIdCount} change${selectedIdCount > 1 ? 's' : ''}?`,
+            message: `Are you really sure you want to discard the selected changes?  The changes will be lost forever!`,
+            executingLabel: 'Discarding...',
+            confirmationCode: 'discard',
+            confirmLabel: 'Discard',
+            destructive: true,
+            asyncTask: async () => {
+                // try to revert
+                try {
+                    // revert
+                    await editorApi.revertChangeSet({ changeSetId: changeSet.id, changeIds: selectedIds });
+                    // go back if all changes were reset
+                    if (changeIds.length === selectedIdCount) {
+                        await router.navigateToChangeSets({ mode: 'replace' });
+                    }
+                    // or just reload
+                    else {
+                        router.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 - please try again later.')
+                    };
+                }
+            }
+        });
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [changeSet.name, " changes"] }), status === 'commited'
+                        // show date of commit
+                        ?
+                            (0, jsx_runtime_1.jsx)("div", { className: "label label-strong text-content-secondary", children: changeSet.publishedOn
+                                    ? funnel_core_1.DateUtils.format(changeSet.publishedOn)
+                                    : 'Previously published' })
+                        : status === 'incomplete'
+                            // incomplete if there are drafts that aren't ready
+                            ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "Not Ready" })
+                            : status === 'errors'
+                                // broken if there are errors on updated pages
+                                ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "error", label: "Broken" })
+                                : user.has('content.publish')
+                                    // allow committing if there's access
+                                    ?
+                                        (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: onCommit, children: "Launch Changes" })
+                                    // or just communicate we're ready
+                                    : (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: "Ready to publish" })] }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Changes", actions: status !== 'commited' &&
+                    (0, jsx_runtime_1.jsx)(core_1.MultiSelectControls, { ref: multiSelectRef, className: "justify-self-end", ids: changeIds, actions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "destructive", size: "sm", onClick: onDiscardSelected, disabled: selectedIds.length === 0, children: "Discard" }) }), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [changeSet.pageChanges.map(change => {
+                            var _a;
+                            // render
+                            const { statusBadge, errorBadge } = getBadges(change);
+                            const pages = (_a = regions[change.region]) !== null && _a !== void 0 ? _a : {};
+                            const schema = pages[change.schema];
+                            const selected = selecting && selectedIds.includes(change.id);
+                            return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { iconLeft: selecting &&
+                                    (0, jsx_runtime_1.jsx)(core_1.SelectionDecorator, { className: "mr-l5", selected: selected }), details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusBadge, errorBadge] }), onClick: () => onChangeClick(change), disabled: change.type === 'delete', children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l6 label-sm ellipsis", children: [(0, jsx_runtime_1.jsx)("span", { children: change.name }), (schema === null || schema === void 0 ? void 0 : schema.variant) === 'dynamic' &&
+                                            (0, jsx_runtime_1.jsx)("span", { className: "label-xs label-strong text-ix-disabled-content", children: schema.name })] }) }, change.id));
+                        }), changeSet.collectionChanges.map(change => {
+                            var _a;
+                            // render
+                            const selected = selecting && selectedIds.includes(change.id);
+                            const { statusBadge, errorBadge } = getBadges(change);
+                            const schema = collections.find(collection => collection.type === change.schema);
+                            return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { iconLeft: selecting &&
+                                    (0, jsx_runtime_1.jsx)(core_1.SelectionDecorator, { selected: selected }), details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusBadge, errorBadge] }), onClick: () => onChangeClick(change), disabled: change.type === 'delete', children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l6 label-sm ellipsis", children: [(0, jsx_runtime_1.jsx)("span", { children: change.name }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs label-strong text-ix-disabled-content", children: (_a = schema === null || schema === void 0 ? void 0 : schema.name) !== null && _a !== void 0 ? _a : change.schema })] }) }, change.id));
+                        })] }) })] }, "changeset"));
+}
+function getBadges(change) {
+    // resolve badges
+    let statusBadge = null;
+    let errorBadge = null;
+    switch (change.type) {
+        case 'create':
+            statusBadge = (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { label: "New" });
+            errorBadge = change.errors
+                ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "Incomplete" })
+                : null;
+            break;
+        case 'update':
+            statusBadge = (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "info", label: "Updated" });
+            errorBadge = change.errors
+                ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "error", label: "Broken" })
+                : null;
+            break;
+        case 'unpublish':
+            statusBadge = (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "Unpublished" });
+            break;
+        case 'delete':
+            statusBadge = (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "Deleted" });
+            break;
+    }
+    // return badges
+    return { statusBadge, errorBadge };
+}

package/dist/changesets/screens/ChangeSetsExplorer.d.ts

@@ -0,0 +1 @@
+export declare function ChangeSetsExplorer(): import("react/jsx-runtime").JSX.Element;

package/dist/changesets/screens/ChangeSetsExplorer.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeSetsExplorer = ChangeSetsExplorer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// component
+function ChangeSetsExplorer() {
+    // bind hooks
+    const browser = (0, core_1.useChangeSetBrowser)();
+    const router = (0, core_1.useEditorRouter)();
+    const splash = (0, core_1.useSplash)();
+    const { ready } = browser;
+    // dismiss splash
+    (0, react_1.useEffect)(() => {
+        if (ready) {
+            splash.dismiss();
+        }
+    }, [splash, ready]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { back: "back", breadcrumbs: ['Dashboard'], onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: renderChangeSets({ router, browser }) }) }) })] }));
+}
+function renderChangeSets({ router, browser }) {
+    // skip if loading
+    const { ready, items } = browser;
+    if (!ready) {
+        return null;
+    }
+    // render empty state if there are no items
+    else if (items.length === 0) {
+        const { regionalization } = funnel_core_1.AppConfig.brandConfig();
+        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-sm flex flex-col items-center gap-l4 text-center text-pretty whitespace-pre", children: [(0, jsx_runtime_1.jsx)("p", { children: "It doesn't look like you've created anything yet." }), (0, jsx_runtime_1.jsx)("p", { children: "Get started by creating your first item.  It's pretty simple and shouldn't take too long!" })] }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: () => router.navigateToTemplates({ region: regionalization.fallback }), children: "Create a page" })] }, "empty"));
+    }
+    // or render top-level changes
+    else {
+        // separate items
+        const unpublished = [];
+        const published = [];
+        items.forEach(item => {
+            if (item.latest.publishedOn) {
+                published.push(item);
+            }
+            else {
+                unpublished.push(item);
+            }
+        });
+        // helpers
+        const onItemClick = (item) => {
+            router.navigateToChangeSet(item.id)
+                .catch(console.error);
+        };
+        console.debug('[ChangeSetExplorer] rendering', { unpublished, published });
+        // render
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg text-content-primary", children: "Browse Changes" }), unpublished.length > 0 &&
+                    (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Work in progress", children: unpublished.map(({ groupId, latest }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { details: latest.errors
+                                ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "Fix Errors" })
+                                : (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: "Ready" }), iconRight: "ChevronRight", onClick: () => onItemClick(latest), children: latest.name }, groupId)) }), published.length > 0 &&
+                    (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Live", children: published.map(({ groupId, latest }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { details: latest.publishedOn &&
+                                (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-secondary", children: funnel_core_1.DateUtils.ageInWeeks(latest.publishedOn) > 12
+                                        ? funnel_core_1.DateUtils.format(latest.publishedOn, { variant: 'date' })
+                                        : funnel_core_1.DateUtils.formatAge(latest.publishedOn) }), iconRight: "ChevronRight", onClick: () => onItemClick(latest), children: latest.name }, groupId)) })] }, "changes"));
+    }
+}

package/dist/changesets/screens/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChangeSetsExplorer';
+export * from './ChangeSetViewer';

package/dist/changesets/screens/index.js

@@ -0,0 +1,18 @@
+"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("./ChangeSetsExplorer"), exports);
+__exportStar(require("./ChangeSetViewer"), exports);

package/dist/collection/components/CollectionHeader.d.ts

@@ -0,0 +1,10 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { CollectionTarget } from '../../core';
+export declare function CollectionHeader({ className, target, onBack }: CollectionHeader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CollectionHeader {
+    type Props = {
+        className?: string;
+        target: CollectionTarget;
+        onBack: Callback.Void;
+    };
+}

package/dist/collection/components/CollectionHeader.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionHeader = CollectionHeader;
+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 CollectionHeader({ className, target, onBack }) {
+    var _a;
+    // bind props + hooks
+    const editorApi = (0, core_1.useEditorApi)();
+    const router = (0, core_1.useEditorRouter)();
+    const site = (0, core_1.useSite)();
+    const controller = (0, hooks_1.useCollectionController)();
+    const languageDialogRef = (0, react_1.useRef)(null);
+    const { collectionGroup, collection } = controller;
+    const { breadcrumbs } = (0, react_1.useMemo)(() => {
+        // build breadcrumbs for nested item
+        const { template } = target;
+        const brand = funnel_core_1.AppConfig.brandConfig();
+        const breadcrumbs = [
+            brand.name,
+            template.name
+        ];
+        // add slug (if any)
+        if (collectionGroup) {
+            breadcrumbs.push(collectionGroup.name);
+        }
+        // return
+        return { breadcrumbs };
+    }, [collectionGroup, target]);
+    const groupItems = controller.collectionGroup
+        ? controller.collectionGroup.collections
+        : [];
+    // 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 selected language
+        await router.navigateToCollection(Object.assign(Object.assign({}, target), { type: target.template.type, language: selectedLanguage }));
+    };
+    const onCreateBlank = async (targetLanguage) => {
+        // throw if collection not ready
+        if (!collection) {
+            throw new Error('collection not ready');
+        }
+        // create blank collection
+        await editorApi.createCollection({
+            groupId: collection.groupId,
+            type: target.template.type,
+            language: targetLanguage,
+            version: 1
+        });
+    };
+    const onDuplicate = async (source, targetLanguage) => {
+        // duplicate collection
+        await editorApi.duplicateCollection({
+            source: source,
+            targetCollection: 'current',
+            targetLanguage
+        });
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col'), children: [(0, jsx_runtime_1.jsx)(core_1.Header, { title: `Edit ${(_a = collectionGroup === null || collectionGroup === void 0 ? void 0 : collectionGroup.name) !== null && _a !== void 0 ? _a : target.template.name}`, breadcrumbs: breadcrumbs, back: "back", onBack: onBack, children: controller.languages.length > 0 &&
+                    (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", 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/collection/components/CollectionNotCreated.d.ts

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

package/dist/collection/components/CollectionNotCreated.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionNotCreated = CollectionNotCreated;
+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 CollectionNotCreated({ className, target }) {
+    // bind props + hooks
+    const dialog = (0, core_1.useDialog)();
+    const controller = (0, hooks_1.useCollectionController)();
+    const { collectionGroup } = controller;
+    // brick if there's no summary AND target is dynamic (should NEVER happen)
+    if (!collectionGroup) {
+        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 ${collectionGroup.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.createLanguage(target);
+        }
+        // TODO: handle error
+        catch (e) {
+            console.error('[CollectionNotCreated] 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: "Collection doesn't exist" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", onClick: onCreate, children: "Create it" })] }));
+}

package/dist/collection/components/CollectionStatus.d.ts

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