@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/src/Templates/Stores/ThemeStore.js

@@ -1,24 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -27,28 +7,27 @@ exports.ThemeStore = void 0;
 exports.mergeThemeLayers = mergeThemeLayers;
 exports.getActiveBreakpoint = getActiveBreakpoint;
 exports.getOverridesAtActiveBreakpoint = getOverridesAtActiveBreakpoint;
-var mobx_1 = require("mobx");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var is_plain_object_1 = require("is-plain-object");
-var mergeProps_1 = require("../../../components/src/utilities/mergeProps");
-var ThemeStore = /** @class */ (function () {
-    function ThemeStore(params) {
-        var _a, _b, _c, _d, _e, _f;
-        var config = params.config, dependencies = params.dependencies, settings = params.settings;
+const mobx_1 = require("mobx");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const is_plain_object_1 = require("is-plain-object");
+const mergeProps_1 = require("../../../components/src/utilities/mergeProps");
+class ThemeStore {
+    constructor(params) {
+        const { config, dependencies, settings } = params;
         this.dependencies = dependencies;
         this.editMode = settings.editMode;
-        var name = config.name, style = config.style, type = config.type, base = config.base, overrides = config.overrides, editorOverrides = config.editorOverrides, variables = config.variables, currency = config.currency, language = config.language, languageOverrides = config.languageOverrides, innerWidth = config.innerWidth;
+        const { name, style, type, base, overrides, editorOverrides, variables, currency, language, languageOverrides, innerWidth } = config;
         // add prefixes to base theme components and responsive components
         base.components = prefixComponentKeys('*', base.components);
         if (base.responsive) {
-            base.responsive.mobile = prefixComponentKeys('*(M)', (_a = base.responsive) === null || _a === void 0 ? void 0 : _a.mobile);
-            base.responsive.tablet = prefixComponentKeys('*(T)', (_b = base.responsive) === null || _b === void 0 ? void 0 : _b.tablet);
-            base.responsive.desktop = prefixComponentKeys('*(D)', (_c = base.responsive) === null || _c === void 0 ? void 0 : _c.desktop);
+            base.responsive.mobile = prefixComponentKeys('*(M)', base.responsive?.mobile);
+            base.responsive.tablet = prefixComponentKeys('*(T)', base.responsive?.tablet);
+            base.responsive.desktop = prefixComponentKeys('*(D)', base.responsive?.desktop);
         }
-        if (overrides === null || overrides === void 0 ? void 0 : overrides.responsive) {
-            overrides.responsive.mobile = prefixComponentKeys('(M)', (_d = overrides.responsive) === null || _d === void 0 ? void 0 : _d.mobile);
-            overrides.responsive.tablet = prefixComponentKeys('(T)', (_e = overrides.responsive) === null || _e === void 0 ? void 0 : _e.tablet);
-            overrides.responsive.desktop = prefixComponentKeys('(D)', (_f = overrides.responsive) === null || _f === void 0 ? void 0 : _f.desktop);
+        if (overrides?.responsive) {
+            overrides.responsive.mobile = prefixComponentKeys('(M)', overrides.responsive?.mobile);
+            overrides.responsive.tablet = prefixComponentKeys('(T)', overrides.responsive?.tablet);
+            overrides.responsive.desktop = prefixComponentKeys('(D)', overrides.responsive?.desktop);
         }
         this.name = name;
         this.type = type;
@@ -71,120 +50,101 @@ var ThemeStore = /** @class */ (function () {
             theme: mobx_1.computed, // make theme getter a computed property (memoized)
         });
     }
-    Object.defineProperty(ThemeStore.prototype, "theme", {
-        get: function () {
-            /*
-                Themes consist of layers which are deep merged together in order (last merge has highest priority)
-                    1. base theme
-                    2. base theme responsive breakpoints
-                    3. currency
-                    4. language
-                    5. language translation overrides
-                    6. theme overrides
-                    7. theme overrides at responsive breakpoints
-                    8. altered theme variables
-                    9. stored theme editor overrides
-                    10. stored theme editor overrides at responsive breakpoints
-            */
-            var _a, _b, _c;
-            // const breakpoints = this.variables.breakpoints || this.base.variables?.breakpoints;
-            var breakpoints = deepmerge_1.default.all([
-                this.base.variables.breakpoints,
-                this.variables.breakpoints || {},
-                (this.editMode && ((_b = (_a = this.editorOverrides) === null || _a === void 0 ? void 0 : _a.variables) === null || _b === void 0 ? void 0 : _b.breakpoints)) || {},
-            ]);
-            var activeBreakpoint = getActiveBreakpoint(this.innerWidth, breakpoints);
-            // overrides breakpoint is index file responsive overrides that match current breakpoint
-            var overrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.overrides);
-            // currently selected theme layer for current breakpoint
-            var baseBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.base);
-            // currently selected theme
-            var base = __assign({}, this.base);
-            // overrides is index file default overrides
-            var overrides = __assign({}, this.overrides);
-            var themeOverrides = mergeThemeLayers(overrides, overrideBreakpoint, {
-                variables: (0, mobx_1.toJS)(this.variables),
-            });
-            var theme = mergeThemeLayers(base, baseBreakpoint, this.currency, this.language, this.languageOverrides, themeOverrides, {
-                activeBreakpoint: activeBreakpoint,
-            });
-            var _loop_1 = function (componentName) {
-                var component = theme.components[componentName];
-                var themeComponents = (_c = component === null || component === void 0 ? void 0 : component.theme) === null || _c === void 0 ? void 0 : _c.components;
-                // if a component has a theme property with components
-                if (themeComponents) {
-                    var _loop_2 = function (themeComponentName) {
-                        var themeComponentsApplicableSelectors = (0, mergeProps_1.filterSelectors)(themeOverrides.components || {}, "".concat(componentName, " ").concat(themeComponentName)).sort(mergeProps_1.sortSelectors);
-                        themeComponentsApplicableSelectors.forEach(function (selector) {
-                            var themeComponentPropsOverrides = themeOverrides.components[selector];
-                            if (themeComponentPropsOverrides) {
-                                var themeComponentProps = themeComponents[themeComponentName];
-                                // @ts-ignore - hard to type this
-                                themeComponents[themeComponentName] = __assign(__assign({}, themeComponentProps), themeComponentPropsOverrides);
-                            }
-                        });
-                    };
-                    for (var themeComponentName in themeComponents) {
-                        _loop_2(themeComponentName);
-                    }
+    get theme() {
+        /*
+            Themes consist of layers which are deep merged together in order (last merge has highest priority)
+                1. base theme
+                2. base theme responsive breakpoints
+                3. currency
+                4. language
+                5. language translation overrides
+                6. theme overrides
+                7. theme overrides at responsive breakpoints
+                8. altered theme variables
+                9. stored theme editor overrides
+                10. stored theme editor overrides at responsive breakpoints
+        */
+        // const breakpoints = this.variables.breakpoints || this.base.variables?.breakpoints;
+        const breakpoints = deepmerge_1.default.all([
+            this.base.variables.breakpoints,
+            this.variables.breakpoints || {},
+            (this.editMode && this.editorOverrides?.variables?.breakpoints) || {},
+        ]);
+        const activeBreakpoint = getActiveBreakpoint(this.innerWidth, breakpoints);
+        // overrides breakpoint is index file responsive overrides that match current breakpoint
+        const overrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.overrides);
+        // currently selected theme layer for current breakpoint
+        const baseBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.base);
+        // currently selected theme
+        const base = { ...this.base };
+        // overrides is index file default overrides
+        const overrides = { ...this.overrides };
+        const themeOverrides = mergeThemeLayers(overrides, overrideBreakpoint, {
+            variables: (0, mobx_1.toJS)(this.variables),
+        });
+        let theme = mergeThemeLayers(base, baseBreakpoint, this.currency, this.language, this.languageOverrides, themeOverrides, {
+            activeBreakpoint: activeBreakpoint,
+        });
+        /*
+            Ensure 'theme' prop has overrides applied to it
+            - separate the "base" theme from "overrides"
+            - inspect the "base" theme object for keys that have a 'theme' property
+            - if the 'theme' property exists, merge overrides for matching keys in overrides
+        */
+        // loop through all components
+        for (const componentName in theme.components) {
+            const component = theme.components[componentName];
+            const themeComponents = component?.theme?.components;
+            // if a component has a theme property with components
+            if (themeComponents) {
+                for (const themeComponentName in themeComponents) {
+                    const themeComponentsApplicableSelectors = (0, mergeProps_1.filterSelectors)(themeOverrides.components || {}, `${componentName} ${themeComponentName}`).sort(mergeProps_1.sortSelectors);
+                    themeComponentsApplicableSelectors.forEach((selector) => {
+                        const themeComponentPropsOverrides = themeOverrides.components[selector];
+                        if (themeComponentPropsOverrides) {
+                            const themeComponentProps = themeComponents[themeComponentName];
+                            // @ts-ignore - hard to type this
+                            themeComponents[themeComponentName] = { ...themeComponentProps, ...themeComponentPropsOverrides };
+                        }
+                    });
                 }
-            };
-            /*
-                Ensure 'theme' prop has overrides applied to it
-                - separate the "base" theme from "overrides"
-                - inspect the "base" theme object for keys that have a 'theme' property
-                - if the 'theme' property exists, merge overrides for matching keys in overrides
-            */
-            // loop through all components
-            for (var componentName in theme.components) {
-                _loop_1(componentName);
-            }
-            // TemplateEditor overrides
-            if (this.editMode) {
-                theme = mergeThemeLayers(theme, this.editorOverrides);
-                var editorOverrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.editorOverrides);
-                theme = mergeThemeLayers(theme, editorOverrideBreakpoint);
             }
-            var activeStyleFns = [this.base.globalStyle, this.style].filter(Boolean);
-            if (activeStyleFns.length > 0) {
-                theme.globalStyle = function (_a) {
-                    var name = _a.name, variables = _a.variables;
-                    return Object.assign.apply(Object, __spreadArray([{}], activeStyleFns.map(function (fn) { return fn({ name: name, variables: variables }); }), false));
-                };
-            }
-            // change the theme name to match the ThemeStore theme name
-            theme.name = this.name;
-            return theme;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ThemeStore.prototype.setInnerWidth = function (innerWidth) {
+        }
+        // TemplateEditor overrides
+        if (this.editMode) {
+            theme = mergeThemeLayers(theme, this.editorOverrides);
+            const editorOverrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.editorOverrides);
+            theme = mergeThemeLayers(theme, editorOverrideBreakpoint);
+        }
+        const activeStyleFns = [this.base.globalStyle, this.style].filter(Boolean);
+        if (activeStyleFns.length > 0) {
+            theme.globalStyle = ({ name, variables }) => Object.assign({}, ...activeStyleFns.map((fn) => fn({ name, variables })));
+        }
+        // change the theme name to match the ThemeStore theme name
+        theme.name = this.name;
+        return theme;
+    }
+    setInnerWidth(innerWidth) {
         this.innerWidth = innerWidth;
-    };
-    ThemeStore.prototype.setCurrency = function (currency) {
+    }
+    setCurrency(currency) {
         this.currency = currency;
-    };
-    ThemeStore.prototype.setLanguage = function (language) {
+    }
+    setLanguage(language) {
         this.language = language;
-    };
-    ThemeStore.prototype.setEditorOverrides = function (overrides) {
+    }
+    setEditorOverrides(overrides) {
         this.editorOverrides = overrides;
-    };
-    return ThemeStore;
-}());
-exports.ThemeStore = ThemeStore;
-function mergeThemeLayers() {
-    var layers = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        layers[_i] = arguments[_i];
     }
+}
+exports.ThemeStore = ThemeStore;
+function mergeThemeLayers(...layers) {
     return deepmerge_1.default.all(layers, { arrayMerge: arrayMerge });
 }
 function getActiveBreakpoint(width, breakpoints) {
-    var breakpoint;
+    let breakpoint;
     if (Number.isInteger(width) && breakpoints) {
-        Object.keys(breakpoints).forEach(function (bp) {
+        Object.keys(breakpoints).forEach((bp) => {
             if (width <= breakpoints[bp]) {
                 if (!breakpoint || breakpoints[breakpoint] > breakpoints[bp]) {
                     breakpoint = bp;
@@ -195,16 +155,16 @@ function getActiveBreakpoint(width, breakpoints) {
     return breakpoint || 'default';
 }
 function getOverridesAtActiveBreakpoint(activeBreakpoint, theme) {
-    var overrides = {};
+    let overrides = {};
     if (activeBreakpoint && theme.responsive) {
         overrides = (theme.responsive && theme.responsive[activeBreakpoint]) || {};
     }
     return { components: overrides };
 }
-var arrayMerge = function (target, source, options) {
+const arrayMerge = (target, source, options) => {
     // trim off any excess array entries
-    var destination = target.slice(0, source.length);
-    source.forEach(function (item, index) {
+    const destination = target.slice(0, source.length);
+    source.forEach((item, index) => {
         if (typeof destination[index] === 'undefined') {
             destination[index] = options.cloneUnlessOtherwiseSpecified(item, options);
         }
@@ -219,16 +179,16 @@ var arrayMerge = function (target, source, options) {
 };
 function prefixComponentKeys(prefix, components) {
     // TODO: remove any?
-    var newComponents = {};
+    const newComponents = {};
     if (components) {
-        Object.keys(components).forEach(function (key) {
+        Object.keys(components).forEach((key) => {
             //does the key already have the prefix? - this is needed when using the editor.
             if (key.indexOf(prefix) === 0) {
                 newComponents[key] = components[key];
                 return;
             }
             // add the prefix to the key
-            newComponents["".concat(prefix).concat(key)] = components[key];
+            newComponents[`${prefix}${key}`] = components[key];
         });
     }
     return newComponents;

package/dist/cjs/src/Templates/Stores/library/components/CustomComponent.js

@@ -1,68 +1,13 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomComponent = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var CustomComponentWrapper_1 = require("./CustomComponentWrapper");
-var CustomComponent = function (props) { return __awaiter(void 0, void 0, void 0, function () {
-    var type, name, componentFn, Component;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                type = props.type, name = props.name, componentFn = props.componentFn;
-                return [4 /*yield*/, componentFn()];
-            case 1:
-                Component = (_a.sent());
-                return [2 /*return*/, function (props) {
-                        return ((0, jsx_runtime_1.jsx)(CustomComponentWrapper_1.CustomComponentWrapper, { type: type, name: name, children: (0, jsx_runtime_1.jsx)(Component, __assign({}, props)) }));
-                    }];
-        }
-    });
-}); };
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const CustomComponentWrapper_1 = require("./CustomComponentWrapper");
+const CustomComponent = async (props) => {
+    const { type, name, componentFn } = props;
+    const Component = (await componentFn());
+    return (props) => {
+        return ((0, jsx_runtime_1.jsx)(CustomComponentWrapper_1.CustomComponentWrapper, { type: type, name: name, children: (0, jsx_runtime_1.jsx)(Component, { ...props }) }));
+    };
+};
 exports.CustomComponent = CustomComponent;