@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/asset/preview/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("./ImagePreview"), exports);
+__exportStar(require("./VideoPreview"), exports);

package/dist/core/components/fields/asset/useAssetFields.d.ts

@@ -0,0 +1,20 @@
+import { Position, Schema } from '@nascentdigital/funnel-core';
+export declare function useAssetFields(): import("../../..").TranslateSchema.Fields<{
+    nameField: Schema.TextField;
+    anchorField: Schema.EnumField<Schema.EnumField.Options<Position>>;
+    accessibleField: Schema.EnumField<{
+        system: {
+            name: string;
+            hint: string;
+        };
+        true: {
+            name: string;
+            hint: string;
+        };
+        false: {
+            name: string;
+            hint: string;
+        };
+    }>;
+    descriptionField: Schema.TextField;
+}>;

package/dist/core/components/fields/asset/useAssetFields.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAssetFields = useAssetFields;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("../../../hooks");
+// hook
+function useAssetFields() {
+    return (0, hooks_1.useTempFields)({
+        nameField: funnel_core_1.Schema.TextField.slug({
+            name: 'Name'
+        }),
+        anchorField: funnel_core_1.Schema.Field.enumeration({
+            name: 'Cropping',
+            options: funnel_core_1.Position.values.reduce((options, position) => {
+                // bind position
+                options[position] = {
+                    name: funnel_core_1.Position.getName(position)
+                };
+                // keep reducing
+                return options;
+            }, {}),
+            defaultOption: 'center',
+            required: true
+        }),
+        accessibleField: funnel_core_1.Schema.Field.enumeration({
+            name: 'Pause Button',
+            options: {
+                system: { name: 'Site Default', hint: `Use the default for the site (${funnel_core_1.AppConfig.get().accessible ? 'enabled' : 'disabled'})` },
+                true: { name: 'Enable', hint: 'A pause button will be included' },
+                false: { name: 'Disable', hint: 'There will be no way to pause the video' }
+            }
+        }),
+        descriptionField: funnel_core_1.Schema.TextField.text({
+            name: 'Alt Text',
+            hint: 'What\'s happening in this visual?',
+            required: false
+        })
+    });
+}

package/dist/core/components/fields/collection/CollectionCard.d.ts

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

package/dist/core/components/fields/collection/CollectionCard.js

@@ -0,0 +1,58 @@
+"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.CollectionCard = CollectionCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+const previews_1 = require("./previews");
+// component
+function CollectionCard(_a) {
+    var _b;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props
+    const { schema, value: data } = field;
+    const value = funnel_core_1.Schema.CollectionField.Value.fromData(data);
+    const collectionSchema = value && schema.collections.find(schema => value.type === schema.type);
+    const collection = (0, hooks_1.useCollectionData)({ schema: collectionSchema, value });
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render loader
+    let content;
+    if (!collection) {
+        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 handle error
+    else if (collection instanceof funnel_core_1.IsometricError) {
+        content = ((0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: feedback_1.ErrorMessage.coerce(collection) }));
+    }
+    // create preview
+    else {
+        switch (collection.type) {
+            // client
+            case funnel_ui_1.Client.schema.type:
+                content = ((0, jsx_runtime_1.jsx)(previews_1.ClientPreview, { schema: schema, client: collection }));
+                break;
+            // generic
+            default:
+                content = ((0, jsx_runtime_1.jsx)(previews_1.GenericPreview, { schema: schema, collection: collection }));
+                break;
+        }
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, tip: (_b = schema.description) !== null && _b !== void 0 ? _b : collectionSchema === null || collectionSchema === void 0 ? void 0 : collectionSchema.description, children: content })));
+}

package/dist/core/components/fields/collection/CollectionEditor.d.ts

@@ -0,0 +1,15 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+export declare const CollectionEditor: import("react").ForwardRefExoticComponent<CollectionEditor.Props & import("react").RefAttributes<CollectionEditor.Ref>>;
+export declare namespace CollectionEditor {
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        edit(options: Options): Promise<Schema.Field.Data<Schema.CollectionField> | undefined>;
+    }
+    type Options = {
+        schema: Schema.CollectionField;
+        collectionSchema: Schema.Collection;
+        value?: Schema.CollectionField.Value;
+    };
+}

package/dist/core/components/fields/collection/CollectionEditor.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const domain_1 = require("../../../domain");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const TagEditor_1 = require("../../TagEditor");
+const transitions_1 = require("../../transitions");
+const FieldsPanel_1 = require("../FieldsPanel");
+// component
+exports.CollectionEditor = (0, react_1.forwardRef)(function CollectionEditor({ language }, ref) {
+    var _a;
+    // 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 [collectionSchema, setCollectionSchema] = (0, react_1.useState)();
+    const [initialValue, setInitialValue] = (0, react_1.useState)();
+    const [field, setField] = (0, react_1.useState)();
+    const [shared, setShared] = (0, react_1.useState)(false);
+    const page = (0, hooks_1.usePossiblePage)();
+    const collection = (0, hooks_1.usePossibleCollection)();
+    const collectionRepository = (0, hooks_1.useCollectionRepository)();
+    const collectionStore = page !== null && page !== void 0 ? page : collection;
+    const dialog = (0, feedback_1.useDialog)();
+    // sync field
+    (0, hooks_1.useCollectionFieldProxy)(field);
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, collectionSchema, value }) => {
+            // reset state
+            setSchema(schema);
+            setCollectionSchema(collectionSchema);
+            setInitialValue(value);
+            setField(undefined);
+            setShared(false);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // create field
+    (0, react_1.useEffect)(() => {
+        // ignore if schemas aren't set
+        if (!schema || !collectionSchema || !collectionStore) {
+            return;
+        }
+        // create new field (wraps existing data for editing)
+        domain_1.CollectionFieldProxy
+            .create({
+            collectionRepository,
+            collectionStore,
+            assetStore: collectionStore,
+            schema,
+            collectionSchema,
+            language,
+            initialValue
+        })
+            .then(field => {
+            setField(field);
+            setShared(!field.isNew && field.isRef);
+        });
+    }, [language, collectionRepository, collectionStore, schema, collectionSchema, initialValue]);
+    // skip if there's no schema
+    if (!schema || !collectionSchema) {
+        return null;
+    }
+    // helpers
+    const onSave = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if it's shared (skip if user bails)
+        if (shared) {
+            const confirmed = await dialog.confirm(field.isNew
+                ?
+                    {
+                        title: `Create a new shared ${collectionSchema.name}?`,
+                        message: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("b", { children: field.name }), " will be created as a shared content entry."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["You will also need to go to the Collection editor in order to publish this entry before attempting to the changes to this ", page ? 'page' : 'collection', " can go live."] })] })),
+                        confirmLabel: 'Update'
+                    }
+                :
+                    {
+                        title: `Update shared ${collectionSchema.name}?`,
+                        message: 'Updating this content may affect other pages.',
+                        confirmLabel: 'Update'
+                    });
+            if (!confirmed) {
+                return;
+            }
+        }
+        // TODO: handle errors
+        // save
+        await field.save(shared);
+        // update after closing
+        setResult(funnel_core_1.Schema.CollectionField.Value.toData(field.value));
+    };
+    const onCancel = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if there are unsaved changes
+        if (field.modified) {
+            // confirm
+            const confirmed = await dialog.confirm({
+                title: 'Are you sure?',
+                message: 'You have unsaved changes that you\'ll lose.',
+                confirmLabel: 'Yes',
+                destructive: true
+            });
+            // skip if user cancelled
+            if (!confirmed) {
+                return;
+            }
+        }
+        // set result (triggers editor to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            console.debug('[CollectionEditor/onClosed] ignoring invalid trigger');
+            return;
+        }
+        console.debug('[CollectionEditor/onClosed] completing edit:', result);
+        // clear field
+        setSchema(undefined);
+        setCollectionSchema(undefined);
+        setInitialValue(undefined);
+        setField(undefined);
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    const name = (_a = field === null || field === void 0 ? void 0 : field.name) !== null && _a !== void 0 ? _a : collectionSchema.name;
+    return ((0, jsx_runtime_1.jsx)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: name, open: !!deferral && result === undefined, onClose: onCancel, onClosed: onClosed, children: (0, jsx_runtime_1.jsx)(hooks_1.CollectionStoreContext.Provider, { value: field, children: (0, jsx_runtime_1.jsxs)(hooks_1.AssetStoreContext.Provider, { value: field, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l8 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onCancel }), (0, jsx_runtime_1.jsxs)("h1", { className: "label-md text-content-primary", children: [schema.name, " / ", (0, jsx_runtime_1.jsx)("span", { className: "label-md label-strong", children: name || 'Untitled' })] }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(feedback_1.StatusChip, { variant: shared ? 'success' : 'warn', onClick: (field === null || field === void 0 ? void 0 : field.isNew)
+                                    ? () => setShared(!shared)
+                                    : undefined, children: shared ? 'Shared' : 'Unshared' }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field || !field.nameField.valid || !field.modified, onClick: onSave, children: !initialValue ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: field
+                            ?
+                                (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "flex flex-col gap-l7", children: [(0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1 px-l7", fields: field.allFields, autoFocus: true }), field.tagGroups.length > 0 &&
+                                            (0, jsx_runtime_1.jsx)("div", { className: "px-l7", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l8 p-l8 bg-surface1 rounded-md", children: [(0, jsx_runtime_1.jsx)("h2", { className: "display-xxs flex-1", children: "Tags" }), (0, jsx_runtime_1.jsx)(TagEditor_1.TagEditor, { className: "bg-surface2 p-l6 rounded-sm", tagged: field })] }) })] }, "fields")
+                            :
+                                (0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader") })] }) }) }));
+});

package/dist/core/components/fields/collection/CollectionPicker.d.ts

@@ -0,0 +1,15 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Collection } from '../../../domain';
+export declare const CollectionPicker: import("react").ForwardRefExoticComponent<CollectionPicker.Props & import("react").RefAttributes<CollectionPicker.Ref>>;
+export declare namespace CollectionPicker {
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        pick(options?: Options): Promise<Result>;
+    }
+    type Options = {
+        schema: Schema.CollectionField;
+    };
+    type Result = Collection.Ref | undefined;
+}

package/dist/core/components/fields/collection/CollectionPicker.js

@@ -0,0 +1,252 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionPicker = void 0;
+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 framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const client_2 = require("../../../client");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+// component
+exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ language }, 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 [collectionGroups, setCollectionGroups] = (0, react_1.useState)();
+    const [collectionGroup, setCollectionGroup] = (0, react_1.useState)();
+    const [collections, setCollections] = (0, react_1.useState)();
+    const [tagOptions, setTagOptions] = (0, react_1.useState)();
+    const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
+    const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
+    const [fetching, setFetching] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const editorApi = (0, client_2.useEditorApi)();
+    const siteCollections = (0, hooks_1.useCollections)();
+    const collectionStore = (0, hooks_1.useCollectionStore)();
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        pick: async ({ schema }) => {
+            // reset state
+            setSchema(schema);
+            setCollectionGroups(undefined);
+            setCollectionGroup(undefined);
+            setTagOptions(undefined);
+            setTagFilters([]);
+            setTagTooltip(undefined);
+            setCollections(undefined);
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // fetch collection groups when schema changes
+    (0, react_1.useEffect)(() => {
+        // skip if there's no deferral
+        if (!schema || !deferral) {
+            return;
+        }
+        // reset error (if any)
+        setError(undefined);
+        // sync site
+        siteCollections.sync()
+            // bind groups, filtering out types that aren't part of the set
+            .then(() => {
+            // determine group list
+            const { collections } = schema;
+            const collectionGroups = collections.length === 0
+                ? siteCollections.items
+                : siteCollections.items
+                    .filter(group => collections.some(collection => collection.type === group.type));
+            setCollectionGroups(collectionGroups);
+            // bind first group as in initial selection
+            const [collectionGroup] = collectionGroups;
+            setCollectionGroup(collectionGroup);
+            // short-circuit collections if none are present
+            if (!collectionGroup) {
+                setCollections([]);
+                setTagOptions([]);
+                setTagFilters([]);
+            }
+        })
+            // handle error
+            .catch(e => {
+            console.error('[CollectionPicker/sync] sync failed', e);
+            setError(feedback_1.ErrorMessage.coerce(e));
+        });
+    }, [siteCollections, deferral, schema]);
+    // fetch collection items when group changes
+    (0, react_1.useEffect)(() => {
+        // ignore if not ready
+        if (!collectionGroup) {
+            return;
+        }
+        console.debug('[CollectionPicker/sync] syncing group', collectionGroup);
+        // clear collections
+        setCollections(undefined);
+        setTagOptions(undefined);
+        setTagFilters([]);
+        // sync group
+        collectionGroup.sync()
+            // then update filters
+            .then(() => {
+            // transform items
+            const collections = collectionGroup.items
+                .map(summary => summary.getClosestCollectionRef(language, collectionGroup.defaultLanguage))
+                .filter(funnel_core_1.Value.isDefined);
+            // set collections
+            setCollections(collections);
+            // setup tags (if there are items in group)
+            if (collections.length > 0) {
+                const { tags: tagGroups } = collectionGroup.template;
+                const tagOptions = tagGroups
+                    .map(tagGroup => {
+                    // get all tags in group
+                    const tags = Object.values(tagGroup.tags).reduce((tags, tag) => {
+                        // add tag if it matches
+                        if (collections.some(collection => collection.tags.includes(tag))) {
+                            tags.add(tag);
+                        }
+                        // keep reducing
+                        return tags;
+                    }, new Set());
+                    // create filter group (if there are items)
+                    return tags.size > 0
+                        ? { group: tagGroup, tags }
+                        : undefined;
+                })
+                    .filter(funnel_core_1.Value.isDefined);
+                // set options
+                setTagOptions(tagOptions);
+            }
+            // or clear tags
+            else {
+                setTagOptions([]);
+            }
+        })
+            // or capture error
+            .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
+    }, [language, collectionGroup]);
+    // helpers
+    const onPick = async (collectionRef) => {
+        // clear tooltips
+        setTagTooltip(undefined);
+        // fetch ref (or fail)
+        const { template, id, name } = collectionRef;
+        const collection = await editorApi.getCollection({ id, version: 'draft' });
+        if (!collection) {
+            setFetching(false);
+            setError({
+                title: `Unable to find ${template.name}`,
+                message: `We ran into an issue while trying to fetch the "${name}" collection item.  Please refresh your browser and try again.`
+            });
+            return;
+        }
+        // add collection
+        collectionStore.addCollection(collection);
+        // set result (triggers picker to close)
+        setResult(collectionRef);
+    };
+    const onCancel = () => {
+        // clear tooltips
+        setTagTooltip(undefined);
+        // set result (triggers picker to close)
+        setResult(null);
+    };
+    const onPickerClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(client_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+});
+function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
+    // show error if we have one
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }, "error"));
+    }
+    // or show loader if filters aren't loaded (or if fetching)
+    else if (fetching || !collectionGroups || !collections || !tagOptions) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader"));
+    }
+    // show empty state if there are no pages
+    else if (!collectionGroup || collections.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-wrap justify-center items-center", children: (0, jsx_runtime_1.jsxs)(feedback_1.EmptyState, { variant: "missing", size: "sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "There are no collections available that match your criteria." }), (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Create a new collection." })] }) }, "pages.empty"));
+    }
+    // or show pages (filtered)
+    else {
+        // get tags that are available (no tags at all means "all" of the group is chosen)
+        const collectionSchema = collectionGroup.template;
+        const schemaTags = collectionSchema.tags.flatMap(tagGroup => Object.values(tagGroup.tags));
+        const activeTagFilters = tagFilters.filter(tag => schemaTags.includes(tag));
+        const tags = tagOptions
+            .filter(({ group }) => collectionSchema.tags.includes(group))
+            .flatMap(({ tags }) => {
+            const filteredTags = activeTagFilters.filter(tag => tags.has(tag));
+            return filteredTags.length > 0 ? filteredTags : tags.values().toArray();
+        });
+        const filteredCollections = activeTagFilters.length > 0
+            ? collections.filter(collection => collection.tags.some(tag => tags.includes(tag)))
+            : collections;
+        // render empty list if there are no items
+        if (filteredCollections.length === 0) {
+            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-col items-center justify-center gap-l5 px-l10", variant: "blur", children: (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Sorry, but no collections match your filters." }) }, "pages.dyanmic.empty"));
+        }
+        // or render items
+        else {
+            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col gap-l3", children: filteredCollections.map(ref => renderCollectionRef({
+                    language,
+                    template: ref.template,
+                    ref,
+                    onPick,
+                    setTagTooltip
+                })) }, "pages.dynamic"));
+        }
+    }
+}
+function renderCollectionRef({ language, template, ref, onPick, setTagTooltip }) {
+    var _a;
+    // resolve props
+    const title = (_a = ref.name) !== null && _a !== void 0 ? _a : template.name;
+    const tags = ref ? ref.tags : [];
+    const visibleTags = tags.slice(0, Math.min(tags.length, 2));
+    const tooltipTags = tags.length > 2
+        ? tags.slice(2)
+        : [];
+    const disabled = ref.language !== language;
+    // helpers
+    const onClick = () => {
+        // ignore if disabled
+        if (disabled) {
+            return;
+        }
+        // otherwise, pick
+        else {
+            onPick(ref);
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
+            'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
+            'cursor-default': disabled
+        }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
+                'opacity-disabled': disabled
+            }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)("h3", { className: "flex-1 label-sm text-content-primary ellipsis", children: title }), tags.length > 0 &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: e.currentTarget, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
+}

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

@@ -0,0 +1,3 @@
+export * from './CollectionCard';
+export * from './CollectionEditor';
+export * from './CollectionPicker';

package/dist/core/components/fields/collection/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("./CollectionCard"), exports);
+__exportStar(require("./CollectionEditor"), exports);
+__exportStar(require("./CollectionPicker"), exports);

package/dist/core/components/fields/collection/previews/ClientPreview.d.ts

@@ -0,0 +1,10 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { Client } from '@nascentdigital/funnel-ui';
+export declare function ClientPreview({ className, client }: ClientPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ClientPreview {
+    type Props = {
+        className?: string;
+        schema: Schema.CollectionField;
+        client: Client.Value;
+    };
+}

package/dist/core/components/fields/collection/previews/ClientPreview.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientPreview = ClientPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+// components
+function ClientPreview({ className, client }) {
+    // bind props
+    const { name, fields } = client;
+    const { logo: logoRaw, division: divisionRaw, location: locationRaw } = fields !== null && fields !== void 0 ? fields : {};
+    const logo = logoRaw === null || logoRaw === void 0 ? void 0 : logoRaw.value;
+    const division = divisionRaw === null || divisionRaw === void 0 ? void 0 : divisionRaw.value;
+    const location = locationRaw === null || locationRaw === void 0 ? void 0 : locationRaw.value;
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-full flex flex-col justify-center items-center gap-l8 p-l8', '[--nd-icon-color:theme(colors.content-primary)]', '[--nd-icon-color:theme(colors.content-primary)]'), children: [logo
+                ?
+                    (0, jsx_runtime_1.jsx)(funnel_ui_1.Icon, { className: "w-[100px] h-40", icon: logo })
+                :
+                    (0, jsx_runtime_1.jsx)("div", { className: "text-border-l1 border border-dashed border-border-l1 rounded-xs p-l6", children: "Logo" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center text-center", children: [(0, jsx_runtime_1.jsx)("h4", { className: "body-xs body-strong text-content-secondary", children: name }), division && location &&
+                        (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary", children: division
+                                ? location
+                                    ? `${division}, ${location}`
+                                    : division
+                                : location })] })] }));
+}