@gem-sdk/core 1.0.0

package/dist/cjs/helpers/compose-advance-style.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var borders = require('./borders.js');
+var colors = require('./colors.js');
+var constant = require('./constant.js');
+var radius = require('./radius.js');
+var shadow = require('./shadow.js');
+
+const composeSpacing = ({ source, spacing, type, suffix = '', }) => {
+    const { top, left, bottom, right } = spacing;
+    if (top)
+        source[`--${type}t${suffix}`] = top;
+    if (left)
+        source[`--${type}l${suffix}`] = left;
+    if (bottom)
+        source[`--${type}b${suffix}`] = bottom;
+    if (right)
+        source[`--${type}r${suffix}`] = right;
+};
+const getAttrValue = (attr, value, tag) => {
+    if (value === undefined || value === null)
+        return undefined;
+    switch (attr) {
+        case 'bgc':
+        case 'c':
+            return colors.isColor(value.toString()) ? value : `var(--g-c-${value})`;
+        case 'd':
+            if (!value)
+                return 'none';
+            if (value && tag && constant.layoutComponent.includes(tag))
+                return 'grid';
+            return 'inline';
+        default:
+            return value;
+    }
+};
+function composeAdvanceStyle(data, tag) {
+    if (!data)
+        return {};
+    const styles = {};
+    const devices = ['desktop', 'tablet', 'mobile'];
+    const states = ['hover', 'normal'];
+    Object.keys(data).forEach((attr) => {
+        const value = data[attr];
+        if (value === undefined || value === null)
+            return;
+        const hasBoxShadow = (data.hasBoxShadow ? data.hasBoxShadow : {});
+        if (typeof value === 'object') {
+            if (Array.isArray(value))
+                return;
+            Object.keys(value).forEach((composeAttr) => {
+                if (devices.includes(composeAttr)) {
+                    const deviceValue = value[composeAttr];
+                    if (deviceValue !== undefined) {
+                        // Responsive border with state
+                        if (attr === 'border') {
+                            Object.assign(styles, borders.handleConvertBorderStyle(value), borders.handleConvertBorderWidth(value), borders.handleConvertBorderColor(value));
+                        }
+                        if (attr === 'rounded') {
+                            Object.assign(styles, radius.composeRadius(value));
+                        }
+                        if (composeAttr === 'desktop') {
+                            switch (attr) {
+                                case 'padding':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'p',
+                                    });
+                                    break;
+                                case 'margin':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'm',
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styles[`--${attr}`] = getAttrValue(attr, deviceValue, tag);
+                                    break;
+                            }
+                        }
+                        else {
+                            switch (attr) {
+                                case 'padding':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'p',
+                                        suffix: `-${composeAttr}`,
+                                    });
+                                    break;
+                                case 'margin':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'm',
+                                        suffix: `-${composeAttr}`,
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styles[`--${attr}-${composeAttr}`] = getAttrValue(attr, deviceValue, tag);
+                                    break;
+                            }
+                        }
+                    }
+                }
+                else if (states.includes(composeAttr)) {
+                    switch (attr) {
+                        case 'hasBoxShadow':
+                            break;
+                        case 'boxShadow':
+                            Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
+                            break;
+                    }
+                }
+            });
+        }
+        else {
+            styles[`--${attr}`] = getAttrValue(attr, value, tag);
+        }
+    });
+    return styles;
+}
+
+exports.composeAdvanceStyle = composeAdvanceStyle;

package/dist/cjs/helpers/constant.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const stateMapping = {
+    normal: '',
+    hover: '-hvr',
+    focus: '-focus',
+};
+const devicesMapping = {
+    desktop: '',
+    tablet: '-tablet',
+    mobile: '-mobile',
+};
+const layoutComponent = ['Row', 'Section', 'Product', 'HeroBanner'];
+
+exports.devicesMapping = devicesMapping;
+exports.layoutComponent = layoutComponent;
+exports.stateMapping = stateMapping;

package/dist/cjs/helpers/css-variable.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const genVariable = (variableName) => {
+    return `var(--g-${variableName})`;
+};
+
+exports.genVariable = genVariable;

package/dist/cjs/helpers/email.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const validateEmail = (email) => {
+    const emailRegex = new RegExp(/^(?:[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*|".+")@(?:\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]|(?:[a-zA-Z\-\d]+\.)+[a-zA-Z]{2,})$/);
+    return emailRegex.test(email);
+};
+
+exports.default = validateEmail;
+exports.validateEmail = validateEmail;

package/dist/cjs/helpers/flatten-connection.js

@@ -0,0 +1,10 @@
+'use strict';
+
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.
+ */
+const flattenConnection = (connection) => {
+    return connection?.edges?.map((edge) => edge.node) ?? [];
+};
+
+exports.flattenConnection = flattenConnection;

package/dist/cjs/helpers/fpixel.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const pageview = () => {
+    if (!window.fbq)
+        return;
+    window.fbq('track', 'PageView');
+};
+// https://developers.facebook.com/docs/facebook-pixel/advanced/
+const event = (name, options = {}) => {
+    if (!window.fbq)
+        return;
+    window.fbq('track', name, options);
+};
+const addToCart = (product) => {
+    if (!window.fbq)
+        return;
+    window.fbq('track', 'AddToCart', {
+        content_ids: [product.id],
+        content_name: product.name,
+        content_category: product.category,
+        content_type: 'product',
+        value: product.price,
+        currency: product.currency,
+    });
+};
+
+exports.addToCart = addToCart;
+exports.event = event;
+exports.pageview = pageview;

package/dist/cjs/helpers/get-resonsive-value.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const getResponsiveValue = (input, k) => {
+    if (!k)
+        return {};
+    return {
+        desktop: input?.desktop?.[k],
+        tablet: input?.tablet?.[k],
+        mobile: input?.mobile?.[k],
+    };
+};
+const getResponsiveStateValue = (k, input) => {
+    return {
+        desktop: input?.desktop?.[k],
+        tablet: input?.tablet?.[k],
+        mobile: input?.mobile?.[k],
+    };
+};
+const getResponsiveValueByScreen = (value, breakpoint, defaultValue) => {
+    switch (breakpoint) {
+        case 'tablet':
+            return value?.tablet ?? value?.desktop ?? defaultValue;
+        case 'mobile':
+            return value?.mobile ?? value?.tablet ?? value?.desktop ?? defaultValue;
+        default:
+            return value?.desktop ?? defaultValue;
+    }
+};
+
+exports.getResponsiveStateValue = getResponsiveStateValue;
+exports.getResponsiveValue = getResponsiveValue;
+exports.getResponsiveValueByScreen = getResponsiveValueByScreen;

package/dist/cjs/helpers/get-shortname.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const globalSortNameMapping = {
+    'typography-heading-1-fontFamily': 'h1-ff',
+    'typography-heading-1-fontSize': 'h1-size',
+    'typography-heading-1-fontWeight': 'h1-weight',
+    'typography-heading-1-lineHeight': 'h1-lh',
+    'typography-heading-1-letterSpacing': 'h1-ls',
+    'typography-heading-1-fontStyle': 'h1-fs',
+    'typography-heading-2-fontFamily': 'h2-ff',
+    'typography-heading-2-fontSize': 'h2-size',
+    'typography-heading-2-fontWeight': 'h2-weight',
+    'typography-heading-2-lineHeight': 'h2-lh',
+    'typography-heading-2-letterSpacing': 'h2-ls',
+    'typography-heading-2-fontStyle': 'h2-fs',
+    'typography-heading-3-fontFamily': 'h3-ff',
+    'typography-heading-3-fontSize': 'h3-size',
+    'typography-heading-3-fontWeight': 'h3-weight',
+    'typography-heading-3-lineHeight': 'h3-lh',
+    'typography-heading-3-letterSpacing': 'h3-ls',
+    'typography-heading-3-fontStyle': 'h3-fs',
+    'typography-subheading-1-fontFamily': 'sh1-ff',
+    'typography-subheading-1-fontSize': 'sh1-size',
+    'typography-subheading-1-fontWeight': 'sh1-weight',
+    'typography-subheading-1-lineHeight': 'sh1-lh',
+    'typography-subheading-1-letterSpacing': 'sh1-ls',
+    'typography-subheading-1-fontStyle': 'sh1-fs',
+    'typography-subheading-2-fontFamily': 'sh2-ff',
+    'typography-subheading-2-fontSize': 'sh2-size',
+    'typography-subheading-2-fontWeight': 'sh2-weight',
+    'typography-subheading-2-lineHeight': 'sh2-lh',
+    'typography-subheading-2-letterSpacing': 'sh2-ls',
+    'typography-subheading-2-fontStyle': 'sh2-fs',
+    'typography-subheading-3-fontFamily': 'sh3-ff',
+    'typography-subheading-3-fontSize': 'sh3-size',
+    'typography-subheading-3-fontWeight': 'sh3-weight',
+    'typography-subheading-3-lineHeight': 'sh3-lh',
+    'typography-subheading-3-letterSpacing': 'sh3-ls',
+    'typography-subheading-3-fontStyle': 'sh3-fs',
+    'typography-paragraph-1-fontFamily': 'p1-ff',
+    'typography-paragraph-1-fontSize': 'p1-size',
+    'typography-paragraph-1-fontWeight': 'p1-weight',
+    'typography-paragraph-1-lineHeight': 'p1-lh',
+    'typography-paragraph-1-letterSpacing': 'p1-ls',
+    'typography-paragraph-1-fontStyle': 'p1-fs',
+    'typography-paragraph-2-fontFamily': 'p2-ff',
+    'typography-paragraph-2-fontSize': 'p2-size',
+    'typography-paragraph-2-fontWeight': 'p2-weight',
+    'typography-paragraph-2-lineHeight': 'p2-lh',
+    'typography-paragraph-2-letterSpacing': 'p2-ls',
+    'typography-paragraph-2-fontStyle': 'p2-fs',
+    'typography-paragraph-3-fontFamily': 'p3-ff',
+    'typography-paragraph-3-fontSize': 'p3-size',
+    'typography-paragraph-3-fontWeight': 'p3-weight',
+    'typography-paragraph-3-lineHeight': 'p3-lh',
+    'typography-paragraph-3-letterSpacing': 'p3-ls',
+    'typography-paragraph-3-fontStyle': 'p3-fs',
+    'color-brand': 'c-brand',
+    'color-highlight': 'c-highlight',
+    'color-text-1': 'c-text-1',
+    'color-text-2': 'c-text-2',
+    'color-text-3': 'c-text-3',
+    'color-bg-1': 'c-bg-1',
+    'color-bg-2': 'c-bg-2',
+    'color-bg-3': 'c-bg-3',
+    'color-line-1': 'c-line-1',
+    'color-line-2': 'c-line-2',
+    'color-line-3': 'c-line-3',
+    'color-success': 'c-success',
+    'color-info': 'c-info',
+    'color-warning': 'c-warning',
+    'color-error': 'c-error',
+    'spacing-xxs': 's-xxs',
+    'spacing-xs': 's-xs',
+    'spacing-s': 's-s',
+    'spacing-m': 's-m',
+    'spacing-l': 's-l',
+    'spacing-xl': 's-xl',
+    'spacing-2xl': 's-2xl',
+    'spacing-3xl': 's-3xl',
+    'spacing-4xl': 's-4xl',
+    'spacing-5xl': 's-5xl',
+    'container-width': 'ct-w',
+    'container-padding': 'ct-p',
+    'text-shadow': 'ts',
+    'box-shadow': 'shadow',
+};
+function getShortName(name) {
+    return globalSortNameMapping[name] || name;
+}
+
+exports.getShortName = getShortName;

package/dist/cjs/helpers/gtag.js

@@ -0,0 +1,48 @@
+'use strict';
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+const pageview = (url, trackingId) => {
+    // GA 4
+    if (window.gtag && trackingId) {
+        window.gtag('config', trackingId, {
+            page_path: url,
+        });
+    }
+    // GA 3
+    if (window.ga) {
+        window.ga('send', 'pageview', url);
+    }
+};
+const addToCart = (product) => {
+    // GA 3
+    if (window.ga) {
+        window.ga('ec:addProduct', product);
+        window.ga('send', 'event', {
+            eventCategory: 'EnhancedEcommerce',
+            eventAction: 'Added Product',
+            eventLabel: undefined,
+            nonInteraction: true,
+        });
+    }
+    // GA 4
+    if (window.gtag) {
+        window.gtag('event', 'add_to_cart', {
+            currency: product.currency,
+            value: product.price,
+            items: [
+                {
+                    currency: product.currency,
+                    item_brand: product.brand,
+                    item_id: product.id,
+                    item_name: product.name,
+                    item_variant: product.variant,
+                    item_category: product.category,
+                },
+            ],
+            debug_mode: true,
+        });
+    }
+};
+
+exports.addToCart = addToCart;
+exports.pageview = pageview;

package/dist/cjs/helpers/is-browser.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function isBrowser() {
+    return typeof window !== 'undefined';
+}
+
+exports.default = isBrowser;

package/dist/cjs/helpers/is-defined.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function isDefined(argument) {
+    return argument !== undefined;
+}
+
+exports.isDefined = isDefined;

package/dist/cjs/helpers/is-empty-children.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const isEmptyChildren = (children) => {
+    return react.Children.count(children) < 1 || !children;
+};
+
+exports.default = isEmptyChildren;
+exports.isEmptyChildren = isEmptyChildren;

package/dist/cjs/helpers/layout.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var constant = require('./constant.js');
+
+const optionLayoutStyle = (column) => {
+    if (!column)
+        return {};
+    const style = {};
+    for (const [key, value] of Object.entries(column)) {
+        Object.assign(style, {
+            [`--gtc${constant.devicesMapping?.[key]}`]: `repeat(${parseFloat(value + '') || 1}, minmax(0, 1fr))`,
+        });
+    }
+    return style;
+};
+
+exports.optionLayoutStyle = optionLayoutStyle;

package/dist/cjs/helpers/load-script.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const SCRIPTS_LOADED = {};
+function loadScript(src, options) {
+    const isScriptLoaded = SCRIPTS_LOADED[src];
+    if (isScriptLoaded) {
+        return isScriptLoaded;
+    }
+    const promise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        if (options?.module) {
+            script.type = 'module';
+        }
+        script.src = src;
+        script.onload = () => {
+            resolve(true);
+        };
+        script.onerror = () => {
+            reject(false);
+        };
+        if (options?.in === 'head') {
+            document.head.appendChild(script);
+        }
+        else {
+            document.body.appendChild(script);
+        }
+    });
+    SCRIPTS_LOADED[src] = promise;
+    return promise;
+}
+
+exports.loadScript = loadScript;

package/dist/cjs/helpers/make-style.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var getResonsiveValue = require('./get-resonsive-value.js');
+
+const makeStyle = (style) => {
+    return Object.fromEntries(Object.entries(style).map(([key, value]) => [`--${key}`, value]));
+};
+const makeStyleState = (name, value) => {
+    if (!value)
+        return {};
+    return {
+        [`--${name}`]: value?.normal,
+        [`--hvr-${name}`]: value?.hover,
+        [`--focus-${name}`]: value?.focus,
+    };
+};
+const makeStyleResponsiveState = (name, value) => {
+    if (!value)
+        return {};
+    return {
+        [`--${name}`]: value?.desktop?.normal,
+        [`--hvr-${name}`]: value?.desktop?.hover,
+        [`--focus-${name}`]: value?.desktop?.focus,
+        [`--${name}-tablet`]: value?.tablet?.normal,
+        [`--hvr-${name}-tablet`]: value?.tablet?.hover,
+        [`--focus-${name}-tablet`]: value?.tablet?.focus,
+        [`--${name}-mobile`]: value?.mobile?.normal,
+        [`--hvr-${name}-mobile`]: value?.mobile?.hover,
+        [`--focus-${name}-mobile`]: value?.mobile?.focus,
+    };
+};
+const makeStyleResponsive = (name, value) => {
+    return {
+        [`--${name}`]: value?.desktop,
+        [`--${name}-tablet`]: value?.tablet,
+        [`--${name}-mobile`]: value?.mobile,
+    };
+};
+const makeWidth = (widthValue, fullWidthValue) => {
+    const getVal = (deviceValue, widthValue, fullWidthValue) => {
+        const widthVal = widthValue?.[deviceValue];
+        const fullWidthVal = fullWidthValue?.[deviceValue];
+        if (fullWidthVal) {
+            return '100%';
+        }
+        else if (fullWidthVal === false) {
+            return widthVal ?? widthVal;
+        }
+        else {
+            return widthVal;
+        }
+    };
+    return {
+        desktop: getVal('desktop', widthValue, fullWidthValue),
+        tablet: getVal('tablet', widthValue, fullWidthValue),
+        mobile: getVal('mobile', widthValue, fullWidthValue),
+    };
+};
+const makeHeight = (heighValue, autoHeight) => {
+    const getVal = (deviceValue, heighValue, autoHeight) => {
+        const heightVal = heighValue?.[deviceValue];
+        const isAuto = autoHeight?.[deviceValue];
+        if (isAuto) {
+            return 'auto';
+        }
+        else if (isAuto === false) {
+            return heightVal ?? heightVal;
+        }
+        else {
+            return heightVal;
+        }
+    };
+    return {
+        desktop: getVal('desktop', heighValue, autoHeight),
+        tablet: getVal('tablet', heighValue, autoHeight),
+        mobile: getVal('mobile', heighValue, autoHeight),
+    };
+};
+const makeAspectRatio = (aspectRatio, aspectWidth, aspectHeight) => {
+    return {
+        desktop: aspectRatio?.desktop === 'custom'
+            ? `${getResonsiveValue.getResponsiveValueByScreen(aspectWidth, 'desktop')}/${getResonsiveValue.getResponsiveValueByScreen(aspectHeight, 'desktop')}`
+            : aspectRatio?.desktop,
+        tablet: aspectRatio?.tablet === 'custom'
+            ? `${getResonsiveValue.getResponsiveValueByScreen(aspectWidth, 'tablet')}/${getResonsiveValue.getResponsiveValueByScreen(aspectHeight, 'tablet')}`
+            : aspectRatio?.tablet,
+        mobile: aspectRatio?.mobile === 'custom'
+            ? `${getResonsiveValue.getResponsiveValueByScreen(aspectWidth, 'mobile')}/${getResonsiveValue.getResponsiveValueByScreen(aspectHeight, 'mobile')}`
+            : aspectRatio?.mobile,
+    };
+};
+
+exports.makeAspectRatio = makeAspectRatio;
+exports.makeHeight = makeHeight;
+exports.makeStyle = makeStyle;
+exports.makeStyleResponsive = makeStyleResponsive;
+exports.makeStyleResponsiveState = makeStyleResponsiveState;
+exports.makeStyleState = makeStyleState;
+exports.makeWidth = makeWidth;

package/dist/cjs/helpers/normalize-builder-data.js

@@ -0,0 +1,17 @@
+'use strict';
+
+function normalizeBuilderData(data) {
+    const result = {};
+    function compose(data, res = {}) {
+        const childrens = data.childrens;
+        const items = childrens?.map((child) => child.uid) ?? [];
+        res[data.uid] = { ...data, childrens: items, type: 'component' };
+        if (childrens) {
+            childrens.map((child) => compose(child, res));
+        }
+    }
+    compose(data, result);
+    return { ...result };
+}
+
+exports.normalizeBuilderData = normalizeBuilderData;

package/dist/cjs/helpers/prefetch-queries.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var useSWR = require('swr');
+var getCollection = require('./queries/get-collection.js');
+var getProduct = require('./queries/get-product.js');
+var getProducts = require('./queries/get-products.js');
+
+const prefetchQueries = (input, isSample) => {
+    const queries = [];
+    Object.keys(input).forEach((key) => {
+        const item = input[key];
+        let data = undefined;
+        switch (item.tag) {
+            case 'Product': {
+                if (item.settings?.isAuto)
+                    break;
+                data = {
+                    key: useSWR.unstable_serialize([
+                        'query/product',
+                        { id: item.settings?.productSetting?.productId ?? 'latest', isSample },
+                    ]),
+                    func: getProduct.getProduct,
+                    variables: { id: item.settings?.productSetting?.productId ?? 'latest', isSample },
+                };
+                break;
+            }
+            case 'ProductList': {
+                if (item?.settings?.productSrc === 'Collection') {
+                    data = {
+                        key: useSWR.unstable_serialize([
+                            'query/collection',
+                            {
+                                id: item.settings?.collectionId ?? 'latest',
+                                numberOfProducts: item.settings?.numberOfProducts ?? 4,
+                                orderBy: item.settings?.orderBy,
+                                isSample,
+                            },
+                        ]),
+                        func: getCollection.getCollection,
+                        variables: {
+                            id: item.settings?.collectionId ?? 'latest',
+                            numberOfProducts: item.settings?.numberOfProducts ?? 4,
+                            orderBy: item.settings?.orderBy,
+                            isSample,
+                        },
+                    };
+                }
+                else {
+                    data = {
+                        key: useSWR.unstable_serialize([
+                            'query/products',
+                            { ids: item?.settings?.productIds?.sort(), isSample },
+                        ]),
+                        func: getProducts.getProducts,
+                        variables: { ids: item?.settings?.productIds?.sort(), isSample },
+                    };
+                }
+                break;
+            }
+        }
+        if (data) {
+            queries.push(data);
+        }
+    });
+    return queries;
+};
+
+exports.prefetchQueries = prefetchQueries;