@gem-sdk/core 1.0.0

package/dist/esm/helpers/borders.js

@@ -0,0 +1,133 @@
+import { getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
+import { makeStyleResponsiveState, makeStyleState } from './make-style.js';
+
+const handleConvertBorderStyle = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.border,
+                hover: data.desktop?.hover?.border,
+                focus: data.desktop?.focus?.border,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.border,
+                hover: data.tablet?.hover?.border,
+                focus: data.tablet?.focus?.border,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.border,
+                hover: data.mobile?.hover?.border,
+                focus: data.mobile?.focus?.border,
+            },
+        };
+        return makeStyleResponsiveState('bs', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.border,
+        hover: data?.hover?.border,
+        focus: data?.focus?.border,
+    };
+    return makeStyleState('bs', newVal);
+};
+const handleConvertBorderWidth = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.width,
+                hover: data.desktop?.hover?.width,
+                focus: data.desktop?.focus?.width,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.width,
+                hover: data.tablet?.hover?.width,
+                focus: data.tablet?.focus?.width,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.width,
+                hover: data.mobile?.hover?.width,
+                focus: data.mobile?.focus?.width,
+            },
+        };
+        return makeStyleResponsiveState('bw', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.width,
+        hover: data?.hover?.width,
+        focus: data?.focus?.width,
+    };
+    return makeStyleState('bw', newVal);
+};
+const handleConvertBorderColor = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color,
+            },
+        };
+        return getGlobalColorStateResponsiveStyle('bc', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color,
+    };
+    return getGlobalColorStateStyle('bc', newVal);
+};
+const handleConvertClassColor = (value) => {
+    if (!value)
+        return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color,
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color,
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color,
+            },
+        };
+        return getGlobalColorStateResponsiveClass('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color,
+    };
+    return getGlobalColorStateClass('border', newVal);
+};
+
+export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };

package/dist/esm/helpers/clone-deep.js

@@ -0,0 +1,3 @@
+const cloneDeep = (data) => JSON.parse(JSON.stringify(data));
+
+export { cloneDeep };

package/dist/esm/helpers/cls.js

@@ -0,0 +1,18 @@
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    }
+    else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix)
+            .filter((key) => mix[key])
+            .join(' ');
+    }
+    else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+
+export { cls };

package/dist/esm/helpers/colors.js

@@ -0,0 +1,145 @@
+import { isDefined } from './is-defined.js';
+import { stateMapping } from './constant.js';
+
+const getGlobalColorCSSProp = (color) => {
+    return getSingleColorVariable(color);
+};
+const getGlobalColorClass = (type, color) => {
+    if (typeof color !== 'string' ||
+        !color ||
+        color?.startsWith('#') ||
+        color?.startsWith('rgb') ||
+        color?.startsWith('hsl') ||
+        color?.startsWith('transparent'))
+        return '';
+    return `${type}-g-${color}`;
+};
+const getGlobalColorResponsiveClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([device, value]) => {
+        if (device === 'desktop') {
+            return getGlobalColorClass(type, value);
+        }
+        else {
+            return `${device}:${getGlobalColorClass(type, value)}`;
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorStateClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([state, value]) => {
+        if (state === 'normal') {
+            return getGlobalColorClass(type, value);
+        }
+        else {
+            return `${state}:${getGlobalColorClass(type, value)}`;
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorStateResponsiveClass = (type, data) => {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([device, objectState]) => {
+        if (device === 'desktop') {
+            return Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'normal') {
+                    return getGlobalColorClass(type, value);
+                }
+                else {
+                    return `${state}:${getGlobalColorClass(type, value)}`;
+                }
+            })
+                .join(' ');
+        }
+        else {
+            return Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'normal') {
+                    return `${device}:${getGlobalColorClass(type, value)}`;
+                }
+                else {
+                    return `${device}:${state}:${getGlobalColorClass(type, value)}`;
+                }
+            })
+                .join(' ');
+        }
+    })
+        .join(' ');
+};
+const getGlobalColorResponsiveStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.fromEntries(Object.entries(data).map(([device, value]) => {
+        if (device === 'desktop') {
+            return [`--${type}`, getSingleColorVariable(value)];
+        }
+        else {
+            return [`--${type}-${device}`, getSingleColorVariable(value)];
+        }
+    }));
+};
+const getGlobalColorStateStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.fromEntries(Object.entries(data)
+        .map(([state, value]) => {
+        if (state === 'active')
+            return [];
+        return [`-${stateMapping?.[state]}-${type}`, getSingleColorVariable(value)];
+    })
+        .filter(isDefined));
+};
+const getGlobalColorStateResponsiveStyle = (type, data) => {
+    if (!data)
+        return {};
+    return Object.entries(data)
+        .map(([device, objectState]) => {
+        if (device === 'desktop') {
+            return Object.fromEntries(Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'active')
+                    return [];
+                return [`-${stateMapping[state]}-${type}`, getSingleColorVariable(value)];
+            })
+                .filter(isDefined));
+        }
+        else {
+            return Object.fromEntries(Object.entries(objectState)
+                .map(([state, value]) => {
+                if (state === 'active')
+                    return [];
+                return [`-${stateMapping[state]}-${type}-${device}`, getSingleColorVariable(value)];
+            })
+                .filter(isDefined));
+        }
+    })
+        .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+};
+const getSingleColorVariable = (color) => {
+    if (!color)
+        return undefined;
+    if (isColor(color))
+        return color;
+    return `var(--g-c-${color}, ${color})`;
+};
+function isColor(color) {
+    return (color?.startsWith('#') ||
+        color?.startsWith('rgb') ||
+        color?.startsWith('hsl') ||
+        color?.startsWith('transparent'));
+}
+const getGlobalColorStyle = (data) => {
+    if (!data)
+        return {};
+    return { '--c': getSingleColorVariable(data) };
+};
+
+export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor };

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

@@ -0,0 +1,130 @@
+import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor } from './borders.js';
+import { isColor } from './colors.js';
+import { layoutComponent } from './constant.js';
+import { composeRadius } from './radius.js';
+import { getStyleShadowState } from './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 isColor(value.toString()) ? value : `var(--g-c-${value})`;
+        case 'd':
+            if (!value)
+                return 'none';
+            if (value && tag && 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, handleConvertBorderStyle(value), handleConvertBorderWidth(value), handleConvertBorderColor(value));
+                        }
+                        if (attr === 'rounded') {
+                            Object.assign(styles, 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, getStyleShadowState(value, 'box-shadow', hasBoxShadow));
+                            break;
+                    }
+                }
+            });
+        }
+        else {
+            styles[`--${attr}`] = getAttrValue(attr, value, tag);
+        }
+    });
+    return styles;
+}
+
+export { composeAdvanceStyle };

package/dist/esm/helpers/constant.js

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

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

@@ -0,0 +1,5 @@
+const genVariable = (variableName) => {
+    return `var(--g-${variableName})`;
+};
+
+export { genVariable };

package/dist/esm/helpers/email.js

@@ -0,0 +1,6 @@
+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);
+};
+
+export { validateEmail as default, validateEmail };

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

@@ -0,0 +1,8 @@
+/**
+ * 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) ?? [];
+};
+
+export { flattenConnection };

package/dist/esm/helpers/fpixel.js

@@ -0,0 +1,25 @@
+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,
+    });
+};
+
+export { addToCart, event, pageview };

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

@@ -0,0 +1,28 @@
+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;
+    }
+};
+
+export { getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen };

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

@@ -0,0 +1,90 @@
+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;
+}
+
+export { getShortName };

package/dist/esm/helpers/gtag.js

@@ -0,0 +1,45 @@
+// 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,
+        });
+    }
+};
+
+export { addToCart, pageview };

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

@@ -0,0 +1,5 @@
+function isBrowser() {
+    return typeof window !== 'undefined';
+}
+
+export { isBrowser as default };

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

@@ -0,0 +1,5 @@
+function isDefined(argument) {
+    return argument !== undefined;
+}
+
+export { isDefined };