@nascentdigital/funnel-editor 4.6.1 → 4.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.6.1",
+  "version": "4.6.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -14,6 +14,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./api": "./dist/api/EditorApi.js",
+    "./components": "./dist/components.js",
     "./styles.css": "./dist/styles/index.css"
   },
   "files": [
@@ -90,5 +91,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "4a1d18f6f87148196b5e820c0ada8f2a8111b9f6"
+  "gitHead": "b17e33b4400391b3984e61225c572f097c4c26c9"
 }

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

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

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

@@ -1,452 +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.LegacyBlockPreview = LegacyBlockPreview;
-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");
-// component
-function LegacyBlockPreview({ className, configuration }) {
-    // bind props + state + refs
-    const { scope, layout } = configuration;
-    const previewRef = (0, react_2.useRef)(null);
-    // sync configuration
-    (0, core_1.useBlockConfiguration)(configuration);
-    // render
-    const tight = scope === 'mobile'
-        ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
-        : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { ref: previewRef, className: (0, classnames_1.default)(className, 'w-full flex justify-center'), layout: true, children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)('bg-surface2 rounded-xs', {
-                    'min-h-[100px]': !layout,
-                    'w-[120px]': scope === 'desktop',
-                    'w-[64px]': scope === 'mobile',
-                    'pb-l4': tight === 'above',
-                    'pt-l4': tight === 'below',
-                    'py-l4': tight === 'none'
-                }), layoutRoot: true, layout: true, children: renderLayout({ variant: scope, layout }) }) }) }));
-}
-// helpers
-var Skeleton;
-(function (Skeleton) {
-    function HeadlinePart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
-                'h-6 ': size === 'sm',
-                'h-8': size === 'md'
-            }), layout: true }));
-    }
-    Skeleton.HeadlinePart = HeadlinePart;
-    function CaptionPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
-                '': size === 'sm'
-            }), layout: true }));
-    }
-    Skeleton.CaptionPart = CaptionPart;
-    function MediaPart({ className, aspect }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
-                'aspect-square': aspect === 'square' || aspect === 'auto',
-                'aspect-phone': aspect === 'phone',
-                'aspect-tv': aspect === 'tv',
-                'aspect-widescreen': aspect === 'widescreen',
-                'aspect-cinema': aspect === 'cinema'
-            }), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { className: "text-content-tertiary", variant: "Image", size: {
-                    size: 20,
-                    strokeWidth: 1.5,
-                    absoluteStrokeWidth: false
-                } }) }));
-    }
-    Skeleton.MediaPart = MediaPart;
-    function IconPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-full overflow-hidden', {
-                'w-10 h-10': size === 'sm',
-                'w-14 h-14': size === 'md'
-            }) }));
-    }
-    Skeleton.IconPart = IconPart;
-    function LogoPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-px overflow-hidden', {
-                'w-14 h-6': size === 'sm',
-                'w-20 h-9': size === 'md'
-            }) }));
-    }
-    Skeleton.LogoPart = LogoPart;
-})(Skeleton || (Skeleton = {}));
-function renderLayout({ className, variant, layout }) {
-    // TODO: render empty state if there's no layout
-    if (!layout) {
-        return null;
-    }
-    // render root layout
-    const { type, items } = layout.root;
-    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), layout: true, children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderItem({
-                className: (0, classnames_1.default)({
-                    'flex-1': type === 'row' && variant !== 'mobile'
-                }),
-                variant,
-                parent: type,
-                parentNested: false,
-                siblingCount: items.length,
-                item,
-                itemPosition: new ItemPosition({
-                    parent: type,
-                    parentOffset,
-                    parentSize: items.length
-                })
-            }) }, `${item.type}.${parentOffset}`)) }));
-}
-function renderItem({ className, parent, parentNested, siblingCount, variant, item, itemPosition }) {
-    // render item
-    const { type: itemType } = item;
-    switch (itemType) {
-        case 'row':
-        case 'column':
-        case 'stack':
-            return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getContainerClasses({ className, parent, siblingCount, variant, item }), layout: true, children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderItem({
-                        className: (0, classnames_1.default)({
-                            'flex-1': itemType === 'row'
-                        }),
-                        variant,
-                        parent: itemType,
-                        parentNested: true,
-                        siblingCount: items.length,
-                        item: item,
-                        itemPosition: new ItemPosition({
-                            parent: itemType,
-                            parentOffset,
-                            parentSize: items.length
-                        })
-                    }) }, `${item.type}.${parentOffset}`)) }));
-        case 'message':
-            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        case 'visual':
-            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        case 'list':
-            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        default:
-            console.error('[BlockPreview] no support for BlockLayout item', item);
-            return null;
-    }
-}
-function getContainerClasses({ className, variant, parent, item }) {
-    const { type, alignY } = item;
-    // row style
-    if (type === 'row' && variant !== 'mobile') {
-        return (0, classnames_1.default)(className, 'grid gap-l3 px-l4', {
-            'items-start': alignY === 'start',
-            'items-center': alignY === 'center',
-            'items-end': alignY === 'end',
-            'grid-cols-[1fr,1fr]': item.ratio.desktop === '1/1',
-            'grid-cols-[1fr,2fr]': item.ratio.desktop === '1/2',
-            'grid-cols-[1fr,3fr]': item.ratio.desktop === '1/3',
-            'grid-cols-[2fr,1fr]': item.ratio.desktop === '2/1',
-            'grid-cols-[2fr,3fr]': item.ratio.desktop === '2/3',
-            'grid-cols-[3fr,1fr]': item.ratio.desktop === '3/1',
-            'grid-cols-[3fr,2fr]': item.ratio.desktop === '3/2'
-        });
-    }
-    // or stack
-    else if (type === 'stack') {
-        return (0, classnames_1.default)(className, 'stacked-stretch');
-    }
-    // or column
-    else {
-        return (0, classnames_1.default)(className, 'flex flex-col gap-l4');
-    }
-}
-function renderMessage(args) {
-    // resolve props
-    const { variant, item: { textAlign } } = args;
-    const messageClasses = variant === 'mobile'
-        ? (0, classnames_1.default)({
-            'items-start': textAlign.mobile === 'left',
-            'items-center': textAlign.mobile === 'center',
-            'items-end': textAlign.mobile === 'right'
-        })
-        : (0, classnames_1.default)({
-            'items-start': textAlign.desktop === 'left',
-            'items-center': textAlign.desktop === 'center',
-            'items-end': textAlign.desktop === 'right'
-        });
-    // render
-    return ((0, jsx_runtime_1.jsxs)(EditablePanel, Object.assign({}, args, { panelClassName: (0, classnames_1.default)(messageClasses, getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col' }))), children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-full mb-l2", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-20", size: "md" })] })));
-}
-function renderVisual(args) {
-    // resolve props
-    const { variant, item: { aspectRatio }, parent } = args;
-    const aspect = variant === 'mobile' ? aspectRatio.mobile : aspectRatio.desktop;
-    // render
-    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: '' }))), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { className: "w-full", aspect: aspect }) })));
-}
-function renderList(args) {
-    // resolve props
-    const { variant, parent, parentNested, item: { layout: layoutRaw, itemType, itemCount: itemCountRaw } } = args;
-    const layout = variant === 'mobile'
-        ? layoutRaw.mobile
-        : layoutRaw.desktop;
-    // render a grid
-    if (layout === 'grid') {
-        return renderGrid(args);
-    }
-    // or render row/column
-    const itemCount = variant === 'mobile'
-        ? itemCountRaw.mobile
-        : itemCountRaw.desktop;
-    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: getListPanelClasses(args), children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderListItem({ variant, parent, parentNested, layout, itemType, index: row, count: itemCount }) }, `list.${row}`)) })));
-}
-function getListPanelClasses(args) {
-    // resolve props
-    const { variant, item: { layout: layoutRaw } } = args;
-    const layout = variant === 'mobile'
-        ? layoutRaw.mobile
-        : layoutRaw.desktop;
-    // determine list classes
-    let listClasses = '';
-    switch (layout) {
-        case 'row':
-            listClasses = 'grid grid-rows-1 auto-cols-auto grid-flow-col gap-l2';
-            break;
-        case 'column':
-            listClasses = 'flex flex-col gap-l2';
-            break;
-    }
-    // return completed classes
-    return getPanelClasses(Object.assign(Object.assign({}, args), { className: listClasses }));
-}
-function renderListItem({ className, variant, parent, parentNested, layout, itemType, index, count }) {
-    let itemClassName = '';
-    switch (itemType) {
-        case 'message':
-        case 'message+visual':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-row p-3 bg-background rounded-xxs'), children: [itemType === 'message+visual' &&
-                        (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-content-tertiary rounded-full w-4 h-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-11/12 mb-l1", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-8/12", size: "sm" })] })] }));
-        case 'visual': {
-            // determine aspect
-            let aspect;
-            switch (layout) {
-                case 'column':
-                    aspect = parent === 'row' || parentNested
-                        ? 'widescreen'
-                        : variant === 'mobile'
-                            ? 'widescreen'
-                            : 'cinema';
-                    break;
-                case 'row':
-                    aspect = parent === 'row' || parentNested
-                        ? 'square'
-                        : 'widescreen';
-                    break;
-                case 'grid': {
-                    // aspect for mobile/nested
-                    if (variant === 'mobile' || parent === 'row' || parentNested) {
-                        itemClassName = 'w-full';
-                        aspect = count === 1
-                            ? 'square'
-                            : count <= 3
-                                ? 'tv'
-                                : 'widescreen';
-                    }
-                    // adjust aspect based on layout (if it's a grid)
-                    else if (layout === 'grid') {
-                        // set base class
-                        itemClassName = 'min-w-[50px]';
-                        // override base + pick aspect
-                        switch (count) {
-                            case 1:
-                                aspect = 'widescreen';
-                                break;
-                            case 2:
-                                aspect = 'widescreen';
-                                break;
-                            case 3:
-                                itemClassName = index === 1
-                                    ? 'min-w-full'
-                                    : 'min-w-[50px]';
-                                aspect = index === 1
-                                    ? 'cinema'
-                                    : 'tv';
-                                break;
-                            case 4:
-                                aspect = 'tv';
-                                break;
-                            case 5:
-                                itemClassName = index === 3
-                                    ? 'min-w-full'
-                                    : 'min-w-[50px]';
-                                aspect = index === 3
-                                    ? 'cinema'
-                                    : 'tv';
-                                break;
-                            default:
-                                aspect = 'widescreen';
-                                break;
-                        }
-                    }
-                    // otherwise standard
-                    else {
-                        aspect = 'widescreen';
-                    }
-                    break;
-                }
-            }
-            // create visual
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, itemClassName), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { aspect: aspect }) }));
-        }
-        case 'icon':
-            return ((0, jsx_runtime_1.jsx)(Skeleton.IconPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
-        case 'logo':
-            return ((0, jsx_runtime_1.jsx)(Skeleton.LogoPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
-        default:
-            return null;
-    }
-}
-function renderGrid(args) {
-    // determine props
-    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw } } = args;
-    const itemCount = variant === 'mobile'
-        ? itemCountRaw.mobile
-        : itemCountRaw.desktop;
-    const { panelClassName, panelItemClassName } = getGridPanelClasses(args);
-    // render grid (really a flexbox layout with controlled item widths)
-    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: panelClassName, children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderListItem({
-                className: panelItemClassName,
-                variant,
-                parent,
-                parentNested,
-                layout: 'grid',
-                itemType, index: row,
-                count: itemCount
-            }) }, `list.${row}`)) })));
-}
-function getGridPanelClasses(args) {
-    // resolve props
-    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw, itemAlign: itemAlignRaw } } = args;
-    const itemAlign = variant === 'mobile'
-        ? itemAlignRaw.mobile
-        : itemAlignRaw.desktop;
-    // determine list classes
-    const panelClasses = (0, classnames_1.default)('flex flex-wrap gap-l2', {
-        'justify-center': itemAlign === 'center',
-        'justify-end': itemAlign === 'end'
-    });
-    let panelItemClasses = '';
-    switch (itemType) {
-        case 'message':
-        case 'message+visual':
-            panelItemClasses = (0, classnames_1.default)({
-                'w-full': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
-                'w-[50px]': variant === 'desktop' && parent !== 'row' && !parentNested
-            });
-            break;
-        case 'visual':
-            panelItemClasses = (0, classnames_1.default)({
-                '': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
-                'flex-1': variant === 'desktop' && parent !== 'row' && !parentNested
-            });
-            break;
-        case 'icon':
-            panelItemClasses = (0, classnames_1.default)({});
-            break;
-        case 'logo':
-            panelItemClasses = (0, classnames_1.default)({
-                '': variant === 'desktop',
-                '': variant === 'mobile'
-            });
-            break;
-    }
-    // return completed classes
-    return {
-        panelClassName: getPanelClasses(Object.assign(Object.assign({}, args), { className: panelClasses })),
-        panelItemClassName: panelItemClasses
-    };
-}
-function getPanelWrapClasses({ className, variant, parent, parentNested, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
-    return variant === 'mobile'
-        ? (0, classnames_1.default)(className, 'relative w-full flex flex-col', {
-            'justify-start': alignY === 'start',
-            'justify-center': alignY === 'center',
-            'justify-end': alignY === 'end',
-            'order-first': mobileOrder === 'first',
-            'order-last': mobileOrder === 'last',
-            'px-l4': !fullBleed.mobile
-        })
-        : (0, classnames_1.default)(className, 'relative grid grid-cols-12', {
-            'items-start': alignY === 'start',
-            'items-center': alignY === 'center',
-            'items-end': alignY === 'end',
-            'px-l4': parent !== 'row' && !fullBleed.desktop && !parentNested,
-            '-ml-l4': itemPosition.left && fullBleed.desktop,
-            '-mr-l4': itemPosition.right && fullBleed.desktop
-        });
-}
-function getPanelClasses({ className, variant, parent, parentNested, item: { alignX, size } }) {
-    // force full width for mobile
-    if (variant === 'mobile') {
-        return (0, classnames_1.default)(className);
-    }
-    // or size for desktop
-    switch (parent === 'row' || parentNested ? 'full' : size) {
-        case 'xs':
-            return (0, classnames_1.default)(className, 'col-span-4', {
-                'col-start-1': alignX === 'start',
-                'col-start-5': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'sm':
-            return (0, classnames_1.default)(className, 'col-span-6', {
-                'col-start-1': alignX === 'start',
-                'col-start-4': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'md':
-            return (0, classnames_1.default)(className, 'col-span-8', {
-                'col-start-1': alignX === 'start',
-                'col-start-3': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'lg':
-            return (0, classnames_1.default)(className, 'col-span-10', {
-                'col-start-1': alignX === 'start',
-                'col-start-2': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'full':
-            return (0, classnames_1.default)(className, 'col-span-full');
-        default:
-            return className;
-    }
-}
-function EditablePanel(_a) {
-    var { panelClassName, children } = _a, args = __rest(_a, ["panelClassName", "children"]);
-    // render
-    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getPanelWrapClasses(args), layout: true, layoutId: args.item.key, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(panelClassName, 'relative'), children: children }) }, args.item.key));
-}
-// TODO: scrap this
-class ItemPosition {
-    constructor(args) {
-        // initialize instance variables
-        this.parent = args.parent;
-        this.parentOffset = args.parentOffset;
-        this.parentSize = args.parentSize;
-    }
-    get left() {
-        return this.parent === 'row' && this.parentOffset === 0;
-    }
-    get right() {
-        return this.parent === 'row' && this.parentOffset === 1;
-    }
-}