@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/link/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("./LinkCard"), exports);
+__exportStar(require("./LinkEditor"), exports);

package/dist/core/components/fields/list/CreateFieldButton.d.ts

@@ -0,0 +1,10 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+import { Button } from '../../interaction';
+export declare function CreateFieldButton({ schema, onCreated, onEditing, children, ...props }: CreateFieldButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CreateFieldButton {
+    type Props = Omit<Button.Props, 'onClick' | 'variant' | 'iconLeft' | 'iconRight'> & {
+        schema: Schema.Field.Type;
+        onCreated: Callback<Schema.Field.Data>;
+        onEditing?: Callback<boolean>;
+    };
+}

package/dist/core/components/fields/list/CreateFieldButton.js

@@ -0,0 +1,45 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateFieldButton = CreateFieldButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+const factories_1 = require("../factories");
+// component
+function CreateFieldButton(_a) {
+    var { schema, onCreated, onEditing = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["schema", "onCreated", "onEditing", "children"]);
+    // bind props + state
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    const rootElementRef = (0, react_1.useRef)(null);
+    const rootElement = rootElementRef.current;
+    const onCreatedRef = (0, react_1.useRef)(onCreated);
+    onCreatedRef.current = onCreated;
+    // helpers
+    const onCreateStart = () => {
+        setCreating(true);
+    };
+    const onCreate = (data) => {
+        // reset card
+        setCreating(false);
+        // set value
+        onCreatedRef.current(data);
+    };
+    const onCreateCancel = () => {
+        setCreating(false);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { ref: rootElementRef, onClick: onCreateStart, variant: "text", iconLeft: "Plus", children: children })), creating && rootElement &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, anchor: rootElement, onCommit: onCreate, onCancel: onCreateCancel })] }));
+}

package/dist/core/components/fields/list/CreateFieldCard.d.ts

@@ -0,0 +1,12 @@
+import { Callback, Field, ObjectField, Schema } from '@nascentdigital/funnel-core';
+export declare function CreateFieldCard({ className, schema, field, onClick, onCreated, onEditing }: CreateFieldCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CreateFieldCard {
+    type Props = {
+        className?: string;
+        schema: Schema.Field.Type;
+        field?: Field | ObjectField;
+        onClick?: Callback.Void;
+        onCreated?: Callback<Schema.Field.Data>;
+        onEditing?: Callback<boolean>;
+    };
+}

package/dist/core/components/fields/list/CreateFieldCard.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateFieldCard = CreateFieldCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const visuals_1 = require("../../visuals");
+const factories_1 = require("../factories");
+// component
+function CreateFieldCard({ className, schema, field, onClick, onCreated = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp }) {
+    // bind props + state
+    const { name } = schema;
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    const rootElementRef = (0, react_1.useRef)(null);
+    const rootElement = rootElementRef.current;
+    const onCreatedRef = (0, react_1.useRef)(onCreated);
+    onCreatedRef.current = onCreated;
+    // helpers
+    const onCreateStart = (e) => {
+        // consume event
+        e.preventDefault();
+        e.stopPropagation();
+        // forward if there's a click event
+        if (onClick) {
+            onClick();
+        }
+        // or start creating if it's keyboard (or there's no click)
+        else {
+            setCreating(true);
+            onEditing(true);
+        }
+    };
+    const onCreateCancel = () => {
+        setCreating(false);
+        onEditing(false);
+    };
+    const onCreateComplete = (data) => {
+        // reset card
+        setCreating(false);
+        onEditing(false);
+        // set value
+        onCreatedRef.current(data);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("section", { ref: rootElementRef, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Add ", name] })] }) }) }), !onClick && creating && rootElement &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: rootElement, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
+}

package/dist/core/components/fields/list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CreateFieldButton';
+export * from './CreateFieldCard';

package/dist/core/components/fields/list/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("./CreateFieldButton"), exports);
+__exportStar(require("./CreateFieldCard"), exports);

package/dist/core/components/fields/object/ObjectCard.d.ts

@@ -0,0 +1,6 @@
+import { ObjectField } from '@nascentdigital/funnel-core';
+import type { FieldCard } from '../FieldCard';
+export declare function ObjectCard({ className, field, ...props }: ObjectCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ObjectCard {
+    type Props = FieldCard.Props.For<ObjectField>;
+}

package/dist/core/components/fields/object/ObjectCard.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectCard = ObjectCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("../../../hooks");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function ObjectCard(_a) {
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props
+    const { schema, value: data } = field;
+    const { value } = data !== null && data !== void 0 ? data : {};
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render error if no value
+    let content;
+    if (!value) {
+        content = renderError('Missing!');
+    }
+    // or render page
+    else {
+        const { title, subtitle, visual } = field.preview;
+        content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l1", children: [(0, jsx_runtime_1.jsx)("span", { className: "body-xs text-content-primary uppercase", children: schema.name }), (0, jsx_runtime_1.jsx)("h3", { className: "label-md text-content-primary", children: funnel_core_1.Schema.Field.Data.getText(title.value) })] }));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, children: content })));
+}
+// helper
+function renderError(message) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "label-md text-destructive-content", children: message }));
+}

package/dist/core/components/fields/object/ObjectEditor.d.ts

@@ -0,0 +1,12 @@
+import { ObjectField, Schema } from '@nascentdigital/funnel-core';
+export declare const ObjectEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<ObjectEditor.Ref>>;
+export declare namespace ObjectEditor {
+    type Props = {};
+    interface Ref {
+        edit(options: Options): Promise<Schema.Field.Data<Schema.ObjectField> | undefined>;
+    }
+    type Options = {
+        schema: Schema.ObjectField;
+        field?: ObjectField;
+    };
+}

package/dist/core/components/fields/object/ObjectEditor.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const interaction_1 = require("../../interaction");
+const FieldsPanel_1 = require("../FieldsPanel");
+// component
+exports.ObjectEditor = (0, react_1.forwardRef)(function ObjectEditor(_, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [field, setField] = (0, react_1.useState)();
+    // sync field
+    (0, hooks_1.useField)(field);
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, field: existingField }) => {
+            // reset state
+            setSchema(schema);
+            // create new field (clone data from existing field if provided)
+            const clonedField = funnel_core_1.ObjectField.forSchema(schema);
+            if (existingField) {
+                clonedField.reset(existingField.value);
+            }
+            setField(clonedField);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // helpers
+    const onClose = () => {
+        console.debug('[ObjectEditor/onClose] closing');
+        // set result (triggers editor to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            console.debug('[ObjectEditor/onClosed] ignoring invalid trigger');
+            return;
+        }
+        console.debug('[ObjectEditor/onClosed] completing edit:', result);
+        // clear field
+        setField(undefined);
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if there's no schema
+    if (!schema || !field) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: field.name, open: !!deferral && result === undefined, onClose: onClose, onClosed: onClosed, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l4 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onClose }), (0, jsx_runtime_1.jsx)("h1", { className: "label-sm text-content-primary", children: field.name }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field.modified, onClick: () => setResult(field.value), children: field.isNew ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1 px-l7", title: schema.name, fields: field.fields })] }));
+});

package/dist/core/components/fields/object/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ObjectCard';
+export * from './ObjectEditor';

package/dist/core/components/fields/object/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("./ObjectCard"), exports);
+__exportStar(require("./ObjectEditor"), exports);

package/dist/core/components/fields/page/PageCard.d.ts

@@ -0,0 +1,6 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import type { FieldCard } from '../FieldCard';
+export declare function PageCard({ className, field, ...props }: PageCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageCard {
+    type Props = FieldCard.Props.For<Field<Schema.PageField>>;
+}

package/dist/core/components/fields/page/PageCard.js

@@ -0,0 +1,48 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCard = PageCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("../../../hooks");
+const interaction_1 = require("../../interaction");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function PageCard(_a) {
+    var _b;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props
+    const { schema, value: data } = field;
+    const { id } = (_b = funnel_core_1.Schema.PageField.Value.fromData(data)) !== null && _b !== void 0 ? _b : {};
+    const store = (0, hooks_1.usePageRefStore)();
+    const page = id && store.getPageRef(id);
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render content
+    let content;
+    if (!page) {
+        // show loader if syncing
+        if (store.syncing || store.modified) {
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary", children: "Loading..." })] }));
+        }
+        // or show error
+        else {
+            content = ((0, jsx_runtime_1.jsx)("span", { className: "label-md text-destructive-content", children: "Missing!" }));
+        }
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex flex-col gap-l1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-xs text-content-tertiary uppercase", children: schema.name }), (0, jsx_runtime_1.jsx)("h4", { className: "label-md label-strong text-content-primary", children: page.name })] }));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center p-l5 text-center", children: content }) })));
+}

package/dist/core/components/fields/page/PagePicker.d.ts

@@ -0,0 +1,18 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Page } from '../../../domain';
+export declare const PagePicker: import("react").ForwardRefExoticComponent<PagePicker.Props & import("react").RefAttributes<PagePicker.Ref>>;
+export declare namespace PagePicker {
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        readonly available: boolean;
+        pick(options?: Options): Promise<Result>;
+    }
+    type Options = {
+        pageTypes?: ReadonlyArray<Schema.Page.Type> | 'all';
+        tags?: ReadonlyArray<Schema.Tag>;
+        disabledIds?: ReadonlyArray<Schema.Page.Id>;
+    };
+    type Result = Page.Ref | undefined;
+}