@nascentdigital/funnel-editor 4.5.7 → 4.6.1

package/dist/page/components/config/LegacyBlockConfigEditor.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyBlockConfigEditor = LegacyBlockConfigEditor;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const rxjs_1 = require("rxjs");
-const core_1 = require("../../../core");
-const hooks_1 = require("../../hooks");
-// editor
-function LegacyBlockConfigEditor({ configuration, onClose }) {
-    // bind state + hooks
-    const pageController = (0, hooks_1.usePageController)();
-    const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
-    // sync w/ configuration
-    (0, core_1.useBlockConfiguration)(configuration);
-    // 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
-        onClose();
-    };
-    // render
-    const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
-    return ((0, jsx_runtime_1.jsx)(core_1.SideSheet, { size: "lg", title: "Block Configuration", backdrop: "glass", open: !!configuration, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-wrap justify-center 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 === null || configuration === void 0 ? void 0 : 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/config/ListPanelEditor.d.ts

@@ -1,8 +0,0 @@
-import { BlockConfiguration, Popup } from '../../../core';
-export declare function ListPanelEditor({ className, anchor, open, onClose, configuration }: ListPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListPanelEditor {
-    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
-        className?: string;
-        configuration: BlockConfiguration;
-    };
-}

package/dist/page/components/config/ListPanelEditor.js

@@ -1,102 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListPanelEditor = ListPanelEditor;
-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");
-// component
-function ListPanelEditor({ className, anchor, open, onClose, configuration }) {
-    // bind props + refs
-    const _a = configuration.listFields, { layout: layoutField } = _a, listFields = __rest(_a, ["layout"]);
-    const layoutPickerRef = (0, react_1.useRef)(null);
-    // helpers
-    const onChangeLayout = async (e) => {
-        var _a;
-        // skip if there's no layout field (shouldn't happen)
-        const layoutSchema = layoutField === null || layoutField === void 0 ? void 0 : layoutField.schema;
-        if (!layoutField || !layoutSchema) {
-            return;
-        }
-        // pick new layout
-        const { value: layoutData } = layoutField;
-        const selectedLayout = await ((_a = layoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
-            anchor: e.currentTarget,
-            anchorOffset: 4,
-            placement: 'top',
-            items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
-                id: layout,
-                label: option.name
-            })),
-            selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
-        }));
-        // update if something was picked
-        if (selectedLayout) {
-            layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
-        }
-    };
-    // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "List Configuration", tip: "Lorem ipsum.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangeLayout, children: "Change" }), Object.values(listFields)
-                            .filter(funnel_core_1.Value.isDefined)
-                            .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id))] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: layoutPickerRef, variant: "card", title: "Pick List Layout", description: "Select an available layout for this list.", renderItem: (item) => renderListLayoutItem(item) })] }));
-}
-function renderListLayoutItem(item) {
-    // panel
-    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder-raised rounded-[2px]', className) }));
-    // get content
-    const panelClassName = 'w-full h-full';
-    const panelPaddedX = 'px-10';
-    const panelPaddedY = 'py-10';
-    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
-    let content;
-    switch (item.id) {
-        case 'card':
-        case 'grid':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-3 auto-cols-fr gap-x-l3 gap-y-l2 '), children: [panel(), panel(), panel(), panel(), panel()] }));
-            break;
-        case 'flexWrap':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'flex flex-wrap justify-center items-center gap-l3'), children: [panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12')] }));
-            break;
-        case 'verticalStack':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-1 auto-rows-fr gap-y-l2 '), children: [panel(), panel(), panel()] }));
-            break;
-        case 'horizontalStack':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-rows-1 auto-cols-fr grid-flow-col gap-x-l3 '), children: [panel(), panel(), panel()] }));
-            break;
-        case 'masonry':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-3 grid-flow-col gap-x-l3 pt-10'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l5'), panel('h-l6'), panel('h-l5')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-22'), panel('h-l6')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l4'), panel('h-l7'), panel('h-l5')] })] }));
-            break;
-        case 'bento':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid auto-rows-auto auto-cols-auto gap-l3'), children: [panel('w-20 row-start-1 row-span-2 col-start-1'), panel('w-28 row-start-1 col-start-2'), panel('w-18 row-start-2 col-start-2')] }));
-            break;
-        case 'brick':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-span-full'), panel('h-12 row-start-2 col-start-1'), panel('h-12 row-start-2 col-start-2'), panel('h-12 row-start-3 col-span-full')] }));
-            break;
-        case 'brickFlipped':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-start-1'), panel('h-12 row-start-1 col-start-2'), panel('h-12 row-start-2 col-span-full'), panel('h-12 row-start-3 col-start-1'), panel('h-12 row-start-3 col-start-2')] }));
-            break;
-        case 'carousel':
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'flex flex-col gap-l2 pt-10 pb-l3'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-stretch gap-l3", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-r-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-l-[2px]" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" })] })] }));
-            break;
-        default:
-            content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
-            break;
-    }
-    // render item in frame
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
-}

package/dist/page/components/config/MessagePanelEditor.d.ts

@@ -1,8 +0,0 @@
-import { BlockConfiguration, Popup } from '../../../core';
-export declare function MessagePanelEditor({ className, anchor, open, onClose, configuration }: MessagePanelEditor.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace MessagePanelEditor {
-    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
-        className?: string;
-        configuration: BlockConfiguration;
-    };
-}

package/dist/page/components/config/MessagePanelEditor.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessagePanelEditor = MessagePanelEditor;
-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");
-// component
-function MessagePanelEditor({ className, anchor, open, onClose, configuration }) {
-    // render
-    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Message Configuration", tip: "Medium and Large are relative to this block's text area, not the page width.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-l4", children: Object.values(configuration.messageFields)
-                .filter(funnel_core_1.Value.isDefined)
-                .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id)) }) }));
-}

package/dist/page/components/config/VisualPanelEditor.d.ts

@@ -1,8 +0,0 @@
-import { BlockConfiguration, Popup } from '../../../core';
-export declare function VisualPanelEditor({ className, anchor, open, onClose, configuration }: VisualPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace VisualPanelEditor {
-    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
-        className?: string;
-        configuration: BlockConfiguration;
-    };
-}

package/dist/page/components/config/VisualPanelEditor.js

@@ -1,76 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualPanelEditor = VisualPanelEditor;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const core_1 = require("../../../core");
-const FieldHeader_1 = require("../../../core/components/fields/FieldHeader");
-const framer_motion_1 = require("framer-motion");
-// component
-function VisualPanelEditor({ className, anchor, open, onClose, configuration }) {
-    var _a;
-    // get fields
-    const { visualFields: { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } } = configuration;
-    const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
-    const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
-        ? value
-        : undefined;
-    // sync config
-    (0, core_1.useBlockConfiguration)(configuration);
-    // render
-    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Visual Configuration", tip: "Cropping changes how the image appears on your site, not your original file.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [aspectField &&
-                            (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: aspectField, size: "xs" }), anchorField
-                            ? (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: anchorField, size: "xs" })
-                            :
-                                (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Anchor", size: "xs" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-secondary text-pretty", children: "Your current image size and aspect ratio don't require and anchor (there's no cropping)." })] })] }), visual && renderVisual({
-                    configuration,
-                    visual,
-                    aspectField: aspectField,
-                    anchorField: anchorField
-                })] }) }));
-}
-function renderVisual({ configuration, visual, aspectField, anchorField }) {
-    var _a, _b, _c;
-    // determine layout info
-    const { metadata, name, description } = visual;
-    const { dimensions: { width, height } } = metadata;
-    const isPortrait = width < height;
-    const aspect = (_b = (_a = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'auto';
-    const anchor = (_c = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _c === void 0 ? void 0 : _c.value;
-    const anchorDirection = anchorField
-        ? anchorField.schema.isValidOption('left')
-            ? 'x'
-            : 'y'
-        : undefined;
-    // render
-    return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('w-full h-[210px]', 'flex flex-col justify-center items-center', 'bg-background rounded-xs'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative bg-destructive', {
-                'h-full max-h-full w-auto': isPortrait,
-                'w-full': !isPortrait
-            }), children: [funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)
-                    ? renderImage({ configuration, visual })
-                    : renderVideo({ configuration, visual }), aspect !== 'auto' && anchor && anchorDirection &&
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-supersurface flex', {
-                            'flex-col': anchorDirection === 'y'
-                        }), children: (0, jsx_runtime_1.jsxs)(framer_motion_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
-                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.start"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('shrink-0 outline outline-1 outline-ix-primary', {
-                                        'h-full w-auto': anchorDirection === 'x',
-                                        'w-full h-auto': anchorDirection === 'y',
-                                        'aspect-square': aspect === 'square',
-                                        'aspect-phone': aspect === 'phone',
-                                        'aspect-tv': aspect === 'tv',
-                                        'aspect-widescreen': aspect === 'widescreen',
-                                        'aspect-cinema': aspect === 'cinema'
-                                    }), layout: true }, "visible"), anchor !== 'right' && anchor !== 'bottom' &&
-                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.end")] }) })] }) }));
-}
-function renderImage({ visual }) {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.url, alt: (_a = visual.description) !== null && _a !== void 0 ? _a : visual.name }));
-}
-function renderVideo({ visual }) {
-    return ((0, jsx_runtime_1.jsx)("video", { className: "max-w-full max-h-full", src: visual.url, autoPlay: true, muted: true, loop: true, playsInline: true }));
-}

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

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