@nascentdigital/funnel-core 4.4.15 → 4.4.16

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

@@ -1,63 +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;
-        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;
@@ -69,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';
@@ -97,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>;
@@ -122,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, 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, 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,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-core",
-  "version": "4.4.15",
+  "version": "4.4.16",
   "repository": {
     "url": "git+https://github.com/nascentdigital/funnel.git",
     "directory": "libs/core"
@@ -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"
+}