@nascentdigital/funnel-core 4.4.14 → 4.4.16

package/dist/schema/Page.d.ts

@@ -46,12 +46,27 @@ export declare namespace Page {
             [TKey in StringKeyOf<Content.Blocks<TContent>>]: TContent[TKey] extends Block<infer TId, infer TFields> ? `${TKey}.${keyof Fields.TextLikeFields<TFields>}` : never;
         }[StringKeyOf<Content.Blocks<TContent>>];
     }
-    type Update = Update.Tags | Update.BlockCreate | Update.BlockDelete | Update.SectionInsert | Update.SectionDelete | Update.SectionReorder | Update.SectionBlockName | Update.ObjectInsert | Update.ArrayInsert | Update.ArrayDelete | Update.ArrayReorder | Update.Value;
+    type Update = Update.Page | Update.BlockCreate | Update.BlockDelete | Update.SectionInsert | Update.SectionDelete | Update.SectionReorder | Update.SectionBlockName | Update.ObjectInsert | Update.ArrayInsert | Update.ArrayDelete | Update.ArrayReorder | Update.Value;
     namespace Update {
-        type Tags = {
-            type: 'tags';
-            tags: TagGroup.Data;
-        };
+        type Page = Page.Name | Page.Tags | Page.Slug | Page.Url | Page.Preview | Page.Errors | Page.Publication;
+        namespace Page {
+            type UndefinedToNull<T> = T extends undefined ? null : T;
+            type Factory<TProp extends keyof Data> = {
+                type: 'page';
+                property: TProp;
+                value: UndefinedToNull<Data[TProp]>;
+            };
+            export type Name = Factory<'name'>;
+            export type Tags = Factory<'tags'>;
+            export type Slug = Factory<'slug'>;
+            export type Url = Factory<'url'>;
+            export type Preview = Omit<Factory<'preview'>, 'value'> & {
+                value: Block.Data;
+            };
+            export type Errors = Factory<'errors'>;
+            export type Publication = Factory<'publication'>;
+            export {};
+        }
         type BlockCreate = {
             type: 'block.create';
             path: [string, string];

package/dist/schema/PageModel.d.ts

@@ -15,8 +15,8 @@ export declare class PageModel<TPage extends Page = Page> {
      *
      * @param updates - a collection of updates to be applied to this page.
      */
-    update(updates: ReadonlyArray<Page.Update>, skipSync?: boolean): void;
-    private updateTags;
+    update(updates: ReadonlyArray<Page.Update>): void;
+    private updatePage;
     private updateBlockCreate;
     private updateBlockDelete;
     private updateSectionInsert;

package/dist/schema/PageModel.js

@@ -54,12 +54,12 @@ class PageModel {
      *
      * @param updates - a collection of updates to be applied to this page.
      */
-    update(updates, skipSync = false) {
+    update(updates) {
         // apply updates
         updates.forEach(update => {
             switch (update.type) {
-                case 'tags':
-                    this.updateTags(update);
+                case 'page':
+                    this.updatePage(update);
                     break;
                 case 'block.create':
                     this.updateBlockCreate(update);
@@ -96,15 +96,17 @@ class PageModel {
                     break;
             }
         });
-        // finally, sync the model
-        if (!skipSync) {
-            this.sync();
-        }
     }
-    updateTags(update) {
-        // replace slug
-        const { data: page } = this;
-        page.tags = update.tags;
+    updatePage(update) {
+        // clear value
+        const page = this.data;
+        if (update.value === null) {
+            delete page[update.property];
+        }
+        // update value
+        else {
+            page[update.property] = update.value;
+        }
     }
     updateBlockCreate(update) {
         var _a;

package/dist/ui/block-layout/BlockLayout.d.ts

@@ -1,64 +1,44 @@
+import { JsonObject } from 'type-fest';
+import { PartialBy } from '../../types';
 export type BlockLayout = {
     name: string;
     root: BlockLayout.Root;
-    tight?: BlockLayout.Tight;
-    tightMobile?: BlockLayout.Tight;
-    tightDesktop?: BlockLayout.Tight;
+    tight: BlockLayout.ResponsiveValue<BlockLayout.Tight>;
 };
 export declare namespace BlockLayout {
-    type Tight = 'above' | 'below' | 'both' | 'none';
-    namespace Tight {
-        const values: ReadonlyArray<Tight>;
-        function parse(value: string, fallback?: Tight): Tight;
-    }
-    type Ratio = '1/1' | '1/2' | '1/3' | '2/1' | '3/1' | '2/3' | '3/2';
-    namespace Ratio {
-        const values: ReadonlyArray<Ratio>;
-        function parse(value: string, fallback?: Ratio): Ratio;
-    }
-    namespace FullBleed {
-        function parse(value: string, fallback?: boolean): boolean;
-    }
     type Root = Row | Column | Stack;
     type Container = Row | Row.Nested | Column | Column.Nested | Stack | Stack.Nested;
-    type Row = {
+    namespace Container {
+        type Base = {
+            alignX?: Alignment;
+            alignY?: Alignment;
+        };
+        type Nested = {
+            items: ReadonlyArray<Panel>;
+            mobileOrder?: MobileOrder;
+        };
+    }
+    type Row = Container.Base & {
         type: 'row';
         items: ReadonlyArray<Column.Nested | Stack.Nested | Panel>;
-        alignX?: Alignment;
-        alignY?: Alignment;
-        ratio?: Ratio;
-        ratioMobile?: Ratio;
-        ratioDesktop?: Ratio;
+        ratio: ResponsiveValue<Ratio>;
     };
     namespace Row {
-        type Nested = Omit<Row, 'items'> & {
-            items: ReadonlyArray<Panel>;
-            mobileOrder?: MobileOrder;
-        };
+        type Nested = Omit<Row, 'items'> & Container.Nested;
     }
-    type Column = {
+    type Column = Container.Base & {
         type: 'column';
         items: ReadonlyArray<Row.Nested | Stack.Nested | Panel>;
-        alignX?: Alignment;
-        alignY?: Alignment;
     };
     namespace Column {
-        type Nested = Omit<Column, 'items'> & {
-            items: ReadonlyArray<Panel>;
-            mobileOrder?: MobileOrder;
-        };
+        type Nested = Omit<Column, 'items'> & Container.Nested;
     }
-    type Stack = {
+    type Stack = Container.Base & {
         type: 'stack';
         items: ReadonlyArray<Row.Nested | Column.Nested | Panel>;
-        alignX?: Alignment;
-        alignY?: Alignment;
     };
     namespace Stack {
-        type Nested = Omit<Stack, 'items'> & {
-            items: ReadonlyArray<Panel>;
-            mobileOrder?: MobileOrder;
-        };
+        type Nested = Omit<Stack, 'items'> & Container.Nested;
     }
     type NestedItem = Row.Nested | Column.Nested | Stack.Nested | Panel;
     type Panel = Message | Visual | List;
@@ -70,22 +50,16 @@ export declare namespace BlockLayout {
             alignX?: Alignment;
             alignY?: Alignment;
             size?: Size;
-            fullBleed?: boolean;
-            fullBleedMobile?: boolean;
-            fullBleedDesktop?: boolean;
+            fullBleed: ResponsiveValue<boolean>;
         };
     }
     type Message = Panel.Base & {
         type: 'message';
-        textAlign?: TextAlignment;
-        textAlignMobile?: TextAlignment;
-        textAlignDesktop?: TextAlignment;
+        textAlign: ResponsiveValue<TextAlignment>;
     };
     type Visual = Panel.Base & {
         type: 'visual';
-        aspectRatio: AspectRatio;
-        aspectRatioMobile?: AspectRatio;
-        aspectRatioDesktop?: AspectRatio;
+        aspectRatio: ResponsiveValue<AspectRatio>;
     };
     type List = Panel.Base & {
         type: 'list';
@@ -98,6 +72,19 @@ export declare namespace BlockLayout {
             function parse(value: string, fallback?: ItemType): ItemType;
         }
     }
+    type Tight = 'above' | 'below' | 'both' | 'none';
+    namespace Tight {
+        const values: ReadonlyArray<Tight>;
+        function parse(value: string, fallback?: Tight): Tight;
+    }
+    type Ratio = '1/1' | '1/2' | '1/3' | '2/1' | '3/1' | '2/3' | '3/2';
+    namespace Ratio {
+        const values: ReadonlyArray<Ratio>;
+        function parse(value: string, fallback?: Ratio): Ratio;
+    }
+    namespace FullBleed {
+        function parse(value: string, fallback?: boolean): boolean;
+    }
     type MobileOrder = 'first' | 'last';
     namespace MobileOrder {
         const values: ReadonlyArray<MobileOrder>;
@@ -123,5 +110,48 @@ export declare namespace BlockLayout {
         const values: ReadonlyArray<AspectRatio>;
         function parse(value: string, fallback?: AspectRatio): AspectRatio;
     }
+    type ResponsiveValue<T extends string | boolean = string | boolean> = {
+        base: T;
+        mobile: T;
+        desktop: T;
+    };
+    namespace ResponsiveValue {
+        type ParseArgs<T extends string | boolean> = {
+            element: ParsedElement;
+            property: string;
+            parser: (value: string, fallback: T) => T;
+            fallback: T | PartialBy<ResponsiveValue<T>, 'desktop' | 'mobile'>;
+        };
+        function parse<T extends string | boolean>({ element, property, parser, fallback: fallbackRaw }: ParseArgs<T>): ResponsiveValue<T>;
+    }
+    type ResponsiveClassNames<T extends ResponsiveValue> = T['base'] extends string ? ResponsiveClassNames.ForString<T, T['base']> : T['base'] extends boolean ? ResponsiveClassNames.ForBoolean<T, T['base']> : never;
+    namespace ResponsiveClassNames {
+        type ForString<T extends ResponsiveValue<V>, V extends string = string> = Record<keyof T, Record<V, string>> & {
+            value: T;
+        };
+        type ForBoolean<T extends ResponsiveValue<V>, V extends boolean = boolean> = Record<keyof T, Record<ForBoolean.Key, string>> & {
+            value: T;
+        };
+        namespace ForBoolean {
+            type Key = 'true' | 'false';
+        }
+        function parse<T extends ResponsiveValue>(args: ResponsiveClassNames<T>): string;
+    }
     function parse(xml: string): BlockLayout;
 }
+type ParsedElement<TExpected extends ParsedElement.Tag = ParsedElement.Tag> = {
+    tag: TExpected;
+    attributes: Record<string, string>;
+    children: JsonObject[];
+};
+declare namespace ParsedElement {
+    const tags: readonly ["block", "row", "col", "stack", "message", "visual", "list"];
+    type Tag = typeof tags[number];
+    type ParseArgs<TExpected extends Tag = Tag> = {
+        data: JsonObject;
+        expectedTags?: ReadonlyArray<TExpected>;
+        expectedChildren?: number | false;
+    };
+    function parse<TExpected extends Tag = Tag>({ data, expectedTags: expectedTagsRaw, expectedChildren }: ParseArgs<TExpected>): ParsedElement<TExpected>;
+}
+export {};

package/dist/ui/block-layout/BlockLayout.js

@@ -10,13 +10,41 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockLayout = void 0;
+const classnames_1 = __importDefault(require("classnames"));
 const fast_xml_parser_1 = require("fast-xml-parser");
 const errors_1 = require("../../errors");
 // extension
 var BlockLayout;
 (function (BlockLayout) {
+    let List;
+    (function (List) {
+        let ItemType;
+        (function (ItemType) {
+            // values
+            ItemType.values = ['message', 'message+visual'];
+            // helper
+            function parse(value, fallback) {
+                // return if it's a match
+                if (ItemType.values.includes(value)) {
+                    return value;
+                }
+                // or fallback if we have one
+                else if (fallback) {
+                    return fallback;
+                }
+                // or throw
+                else {
+                    throw new errors_1.ArgumentError(`Invalid BlockLayout.List.ItemType "${value}"`, 'value');
+                }
+            }
+            ItemType.parse = parse;
+        })(ItemType = List.ItemType || (List.ItemType = {}));
+    })(List = BlockLayout.List || (BlockLayout.List = {}));
     let Tight;
     (function (Tight) {
         // values
@@ -59,6 +87,7 @@ var BlockLayout;
         }
         Ratio.parse = parse;
     })(Ratio = BlockLayout.Ratio || (BlockLayout.Ratio = {}));
+    // fullbleed (for panels)
     let FullBleed;
     (function (FullBleed) {
         // helper
@@ -82,30 +111,6 @@ var BlockLayout;
         }
         FullBleed.parse = parse;
     })(FullBleed = BlockLayout.FullBleed || (BlockLayout.FullBleed = {}));
-    let List;
-    (function (List) {
-        let ItemType;
-        (function (ItemType) {
-            // values
-            ItemType.values = ['message', 'message+visual'];
-            // helper
-            function parse(value, fallback) {
-                // return if it's a match
-                if (ItemType.values.includes(value)) {
-                    return value;
-                }
-                // or fallback if we have one
-                else if (fallback) {
-                    return fallback;
-                }
-                // or throw
-                else {
-                    throw new errors_1.ArgumentError(`Invalid BlockLayout.List.ItemType "${value}"`, 'value');
-                }
-            }
-            ItemType.parse = parse;
-        })(ItemType = List.ItemType || (List.ItemType = {}));
-    })(List = BlockLayout.List || (BlockLayout.List = {}));
     let MobileOrder;
     (function (MobileOrder) {
         // values
@@ -207,6 +212,45 @@ var BlockLayout;
         }
         AspectRatio.parse = parse;
     })(AspectRatio = BlockLayout.AspectRatio || (BlockLayout.AspectRatio = {}));
+    let ResponsiveValue;
+    (function (ResponsiveValue) {
+        function parse({ element, property, parser, fallback: fallbackRaw }) {
+            var _a, _b;
+            // normalize the fallback
+            const fallback = typeof fallbackRaw === 'string' || typeof fallbackRaw === 'boolean'
+                ? { base: fallbackRaw, mobile: fallbackRaw, desktop: fallbackRaw }
+                : { base: fallbackRaw.base, mobile: (_a = fallbackRaw.mobile) !== null && _a !== void 0 ? _a : fallbackRaw.base, desktop: (_b = fallbackRaw.desktop) !== null && _b !== void 0 ? _b : fallbackRaw.base };
+            // fetch the values from the element
+            const { attributes } = element;
+            return {
+                base: parser(attributes[property], fallback.base),
+                mobile: parser(attributes[`${property}Mobile`], fallback.mobile),
+                desktop: parser(attributes[`${property}Desktop`], fallback.desktop)
+            };
+        }
+        ResponsiveValue.parse = parse;
+    })(ResponsiveValue = BlockLayout.ResponsiveValue || (BlockLayout.ResponsiveValue = {}));
+    let ResponsiveClassNames;
+    (function (ResponsiveClassNames) {
+        // helpers
+        function parse(args) {
+            // handle string types
+            if (typeof args.value.base === 'string') {
+                // destructure args
+                const { value: { mobile, base, desktop }, mobile: mobileClasses, base: baseClasses, desktop: desktopClasses } = args;
+                // return classes
+                return (0, classnames_1.default)(mobileClasses[mobile], baseClasses[base], desktopClasses[desktop]);
+            }
+            // or boolean
+            else {
+                // destructure args
+                const { value: { mobile, base, desktop }, mobile: mobileClasses, base: baseClasses, desktop: desktopClasses } = args;
+                // return classes
+                return (0, classnames_1.default)(mobileClasses[mobile ? 'true' : 'false'], baseClasses[base ? 'true' : 'false'], desktopClasses[desktop ? 'true' : 'false']);
+            }
+        }
+        ResponsiveClassNames.parse = parse;
+    })(ResponsiveClassNames = BlockLayout.ResponsiveClassNames || (BlockLayout.ResponsiveClassNames = {}));
     // parser
     const xmlParser = new fast_xml_parser_1.XMLParser({
         ignoreDeclaration: true,
@@ -224,26 +268,34 @@ var BlockLayout;
 })(BlockLayout || (exports.BlockLayout = BlockLayout = {}));
 // helpers
 function parseBlock(json) {
-    // parse block
-    const block = ParsedElement.parse({ data: json, expectedTags: ['block'], expectedChildren: 1 });
-    const tight = BlockLayout.Tight.parse(block.attributes['tight'], 'none');
+    // parse
+    const element = ParsedElement.parse({ data: json, expectedTags: ['block'], expectedChildren: 1 });
+    const tight = BlockLayout.ResponsiveValue.parse({
+        element,
+        property: 'tight',
+        parser: BlockLayout.Tight.parse,
+        fallback: 'none'
+    });
     // return block
     return {
-        name: block.attributes['name'],
+        name: element.attributes['name'],
         tight,
-        tightMobile: BlockLayout.Tight.parse(block.attributes['tightMobile'], tight),
-        tightDesktop: BlockLayout.Tight.parse(block.attributes['tightDesktop'], tight),
-        root: parseRoot(ParsedElement.parse({ data: block.children[0], expectedTags: ['row', 'col', 'stack'] })),
+        root: parseRoot(ParsedElement.parse({ data: element.children[0], expectedTags: ['row', 'col', 'stack'] })),
     };
 }
-function parseRoot({ tag, attributes, children }) {
-    const ratio = BlockLayout.Ratio.parse(attributes['ratio'], '1/1');
-    // parse attributes
+function parseRoot(element) {
+    // parse
+    const { tag, attributes, children } = element;
     const _a = parseItemAttributes(attributes), { size } = _a, itemAttributes = __rest(_a, ["size"]);
     // create root
     switch (tag) {
         case 'row':
-            return Object.assign(Object.assign({ type: 'row' }, itemAttributes), { ratio, ratioMobile: BlockLayout.Ratio.parse(attributes['ratioMobile'], ratio), ratioDesktop: BlockLayout.Ratio.parse(attributes['ratioDesktop'], ratio), items: children.map(data => parseNestedItem(ParsedElement.parse({
+            return Object.assign(Object.assign({ type: 'row' }, itemAttributes), { ratio: BlockLayout.ResponsiveValue.parse({
+                    element,
+                    property: 'ratio',
+                    parser: BlockLayout.Ratio.parse,
+                    fallback: '1/1'
+                }), items: children.map(data => parseNestedItem(ParsedElement.parse({
                     data,
                     expectedTags: ParsedElement.tags.filter(t => t !== tag)
                 }))) });
@@ -261,14 +313,19 @@ function parseRoot({ tag, attributes, children }) {
             throw new errors_1.ArgumentError(`Invalid XML BlockLayout root encountered "${tag}" where instead of "row" or "col"`);
     }
 }
-function parseNestedItem({ tag, attributes, children }) {
-    // parse attributes
+function parseNestedItem(element) {
+    // parse
+    const { tag, attributes, children } = element;
     const _a = parseItemAttributes(attributes), { size } = _a, itemAttributes = __rest(_a, ["size"]);
-    const ratio = BlockLayout.Ratio.parse(attributes['ratio'], '1/1');
     // create container
     switch (tag) {
         case 'row':
-            return Object.assign(Object.assign({ type: 'row' }, itemAttributes), { ratio, ratioMobile: BlockLayout.Ratio.parse(attributes['ratioMobile'], ratio), ratioDesktop: BlockLayout.Ratio.parse(attributes['ratioDesktop'], ratio), items: children.map(data => parsePanel(Object.assign({}, ParsedElement.parse({
+            return Object.assign(Object.assign({ type: 'row' }, itemAttributes), { ratio: BlockLayout.ResponsiveValue.parse({
+                    element,
+                    property: 'ratio',
+                    parser: BlockLayout.Ratio.parse,
+                    fallback: '1/1'
+                }), items: children.map(data => parsePanel(Object.assign({}, ParsedElement.parse({
                     data,
                     expectedTags: ParsedElement.tags.filter(t => t !== 'row' && t !== 'col')
                 })))) });
@@ -282,28 +339,36 @@ function parseNestedItem({ tag, attributes, children }) {
             return parsePanel({ tag, attributes, children });
     }
 }
-function parsePanel({ tag, attributes }) {
+function parsePanel(element) {
     var _a;
+    // parse
+    const { tag, attributes } = element;
     const key = (_a = attributes['key']) !== null && _a !== void 0 ? _a : tag;
     const itemAttributes = parseItemAttributes(attributes);
-    const textAlign = BlockLayout.TextAlignment.parse(attributes['textAlign'], 'left');
-    const aspectRatio = BlockLayout.AspectRatio.parse(attributes['aspect'], 'auto');
-    const fullBleed = BlockLayout.FullBleed.parse(attributes['fullBleed'], false);
-    const fullBleedMobile = BlockLayout.FullBleed.parse(attributes['fullBleedMobile'], fullBleed);
-    const fullBleedDesktop = BlockLayout.FullBleed.parse(attributes['fullBleedDesktop'], fullBleed);
+    const fullBleed = BlockLayout.ResponsiveValue.parse({
+        element,
+        property: 'fullBleed',
+        parser: BlockLayout.FullBleed.parse,
+        fallback: false
+    });
+    // create panel
     switch (tag) {
         case 'message':
-            return Object.assign(Object.assign({ type: 'message', key }, itemAttributes), { textAlign, textAlignMobile: BlockLayout.TextAlignment.parse(attributes['textAlignMobile'], textAlign), textAlignDesktop: BlockLayout.TextAlignment.parse(attributes['textAlignDesktop'], textAlign), fullBleed,
-                fullBleedMobile,
-                fullBleedDesktop });
+            return Object.assign({ type: 'message', key, textAlign: BlockLayout.ResponsiveValue.parse({
+                    element,
+                    property: 'textAlign',
+                    parser: BlockLayout.TextAlignment.parse,
+                    fallback: 'left'
+                }), fullBleed }, itemAttributes);
         case 'visual':
-            return Object.assign(Object.assign({ type: 'visual', key }, itemAttributes), { aspectRatio, aspectRatioMobile: BlockLayout.AspectRatio.parse(attributes['aspectMobile'], aspectRatio), aspectRatioDesktop: BlockLayout.AspectRatio.parse(attributes['aspectDesktop'], aspectRatio), fullBleed,
-                fullBleedMobile,
-                fullBleedDesktop });
+            return Object.assign({ type: 'visual', key, aspectRatio: BlockLayout.ResponsiveValue.parse({
+                    element,
+                    property: 'aspect',
+                    parser: BlockLayout.AspectRatio.parse,
+                    fallback: 'auto'
+                }), fullBleed }, itemAttributes);
         case 'list':
-            return Object.assign(Object.assign({ type: 'list', key }, itemAttributes), { fullBleed,
-                fullBleedMobile,
-                fullBleedDesktop, itemType: BlockLayout.List.ItemType.parse(attributes['itemType'], 'message+visual') });
+            return Object.assign({ type: 'list', key, itemType: BlockLayout.List.ItemType.parse(attributes['itemType'], 'message+visual'), fullBleed }, itemAttributes);
         default:
             throw new errors_1.ArgumentError(`Invalid XML BlockLayout - encountered "${tag}" where instead of BlockLayout.Panel`);
     }
@@ -313,7 +378,7 @@ function parseItemAttributes(attributes) {
         mobileOrder: BlockLayout.MobileOrder.parse(attributes['mobileOrder']),
         alignX: BlockLayout.Alignment.parse(attributes['alignX'], 'start'),
         alignY: BlockLayout.Alignment.parse(attributes['alignY'], 'start'),
-        size: BlockLayout.Size.parse(attributes['size'], 'full'),
+        size: BlockLayout.Size.parse(attributes['size'], 'full')
     };
 }
 var ParsedElement;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nascentdigital/funnel-core",
-  "version": "4.4.14",
+  "version": "4.4.16",
   "repository": {
     "url": "git+https://github.com/nascentdigital/funnel.git",
     "directory": "libs/core"
   },
   "publishConfig": {
-    "registry": "https://npmjs.org"
+    "registry": "https://registry.npmjs.org/"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,6 +37,7 @@
     "@nodable/flexible-xml-parser": "^1",
     "blurhash": "^2",
     "byte-size": "^9",
+    "classnames": "^2",
     "clone-deep": "^4",
     "css.escape": "^1",
     "date-fns": "^4",
@@ -63,5 +64,5 @@
     "jest-tsd": "^0.2.2",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "242a9e0979c03d4037eb2462c5b01b2a095e8e8f"
+  "gitHead": "d1bfd4468426b7326bd9662cd169242867025f5e"
 }