@gem-sdk/core 1.14.0-next.91 → 1.14.0

package/dist/esm/helpers/queries/get-products.js

@@ -1 +1,159 @@
-import{ProductsDocument as e}from"../../graphql/queries/products.generated.js";import{calculateFirstProduct as t}from"./get-collection.js";import{fetchVariants as r,fetchMedias as o}from"./get-product.js";let getProducts=async(e,{ids:t,isSample:r,isStorefront:o})=>{let d=await loopFetchProducts(e,{ids:t,isSample:r,isStorefront:o});if(!d)throw Error("Product not found");let[s,a]=await Promise.all([mergeVariantsToProducts({fetcher:e,products:d,isSample:r,isStorefront:o}),mergeMediasToProducts({fetcher:e,products:d,isSample:r,isStorefront:o})]);return{...d,products:{...d.products,edges:d.products?.edges.map(e=>{let t=a.find(t=>t.productId===e.node?.baseID),r=s.find(t=>t.productId===e.node?.baseID);return e.node?{...e,node:{...e.node,variants:{...e.node?.variants,edges:r?.items??[]},medias:{...e.node?.medias,edges:t?.items??[]}}}:e})??[]}}},fetchProducts=async(t,r)=>t([e,r]),loopFetchProducts=async(e,{ids:r,isSample:o,isStorefront:d})=>{let s,a,n,c,i;let u=(r?.length==0?4:r?.length)??4,p=1,l=Math.ceil(u/8);for(;p<=l&&!1!==c;){s={first:t(u,p,8),firstMedia:1,firstVariant:1,orderBy:{field:"PLATFORM_CREATED_AT",direction:"DESC"},orderByMedia:{field:"POSITION",direction:"ASC"},where:{status:"ACTIVE",isSample:o,...d&&{isStorefront:d},...r?.length?{baseIDIn:r}:{}},after:a};let l=await fetchProducts(e,s);if(a=l?.products?.pageInfo?.endCursor,1===p?(n=l,i=l):i?.products&&l?.products?.edges.length&&(i.products={edges:i.products.edges.concat(l?.products?.edges),pageInfo:l?.products?.pageInfo}),p++,!i){c=!1;break}}return n},mergeVariantsToProducts=async({fetcher:e,products:t,isSample:o,isStorefront:d})=>{let s=await Promise.all(t?.products?.edges?.map(async t=>{let s=await r(e,{id:t?.node?.baseID,isSample:o,isStorefront:d});return{productId:t?.node?.baseID,items:s}})??[]);return s},mergeMediasToProducts=async({fetcher:e,products:t,isSample:r,isStorefront:d})=>{let s=await Promise.all(t?.products?.edges?.map(async t=>{let s=await o(e,{id:t?.node?.baseID,isSample:r,isStorefront:d});return{productId:t?.node?.baseID,items:s}})??[]);return s};export{getProducts};
+import { ProductsDocument } from '../../graphql/queries/products.generated.js';
+import { calculateFirstProduct } from './get-collection.js';
+import { fetchVariants, fetchMedias } from './get-product.js';
+
+const getProducts = async (fetcher, { ids, isSample, isStorefront })=>{
+    const products = await loopFetchProducts(fetcher, {
+        ids,
+        isSample,
+        isStorefront
+    });
+    if (!products) {
+        throw new Error('Product not found');
+    }
+    const [mergedVariant, mergedMedias] = await Promise.all([
+        mergeVariantsToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        }),
+        mergeMediasToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        })
+    ]);
+    return {
+        ...products,
+        products: {
+            ...products.products,
+            edges: products.products?.edges.map((edge)=>{
+                const medias = mergedMedias.find((item)=>item.productId === edge.node?.baseID);
+                const variants = mergedVariant.find((item)=>item.productId === edge.node?.baseID);
+                if (edge.node) {
+                    return {
+                        ...edge,
+                        node: {
+                            ...edge.node,
+                            variants: {
+                                ...edge.node?.variants,
+                                edges: variants?.items ?? []
+                            },
+                            medias: {
+                                ...edge.node?.medias,
+                                edges: medias?.items ?? []
+                            }
+                        }
+                    };
+                }
+                return edge;
+            }) ?? []
+        }
+    };
+};
+const fetchProducts = async (fetcher, variables)=>{
+    return fetcher([
+        ProductsDocument,
+        variables
+    ]);
+};
+const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront })=>{
+    const numberOfProducts = (ids?.length == 0 ? 4 : ids?.length) ?? 4;
+    const productsPerPage = 8; // number of products per page
+    let variables; // variables of collection query
+    let productAfterFetcher; // product after of collection query
+    let dataProducts; // data of collection query
+    let hasNextPage; //
+    let firstProducts;
+    let currentPage = 1;
+    // counter number of queries
+    const pages = Math.ceil(numberOfProducts / productsPerPage);
+    while(currentPage <= pages && hasNextPage !== false){
+        variables = {
+            first: calculateFirstProduct(numberOfProducts, currentPage, productsPerPage),
+            firstMedia: 1,
+            firstVariant: 1,
+            orderBy: {
+                field: 'PLATFORM_CREATED_AT',
+                direction: 'DESC'
+            },
+            orderByMedia: {
+                field: 'POSITION',
+                direction: 'ASC'
+            },
+            where: {
+                status: 'ACTIVE',
+                isSample,
+                ...isStorefront && {
+                    isStorefront
+                },
+                ...ids?.length ? {
+                    baseIDIn: ids
+                } : {}
+            },
+            after: productAfterFetcher
+        };
+        const pageData = await fetchProducts(fetcher, variables);
+        productAfterFetcher = pageData?.products?.pageInfo?.endCursor;
+        if (currentPage === 1) {
+            dataProducts = pageData; // set data of first page
+            firstProducts = pageData;
+        } else if (firstProducts?.products && pageData?.products?.edges.length) {
+            // concat new values to the old ones
+            firstProducts.products = {
+                edges: firstProducts.products.edges.concat(pageData?.products?.edges),
+                pageInfo: pageData?.products?.pageInfo
+            };
+        }
+        currentPage++;
+        // hasNextPage = false if there is no more pages then break the loop
+        if (!firstProducts) {
+            hasNextPage = false;
+            break;
+        }
+    }
+    return dataProducts;
+};
+const mergeVariantsToProducts = async ({ fetcher, products, isSample, isStorefront })=>{
+    const productsWithVariants = await Promise.all(products?.products?.edges?.map(async (product)=>{
+        const variants = await fetchVariants(fetcher, {
+            id: product?.node?.baseID,
+            isSample,
+            isStorefront
+        });
+        return {
+            productId: product?.node?.baseID,
+            items: variants
+        };
+    }) ?? []);
+    return productsWithVariants;
+};
+const mergeMediasToProducts = async ({ fetcher, products, isSample, isStorefront })=>{
+    const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product)=>{
+        const medias = await fetchMedias(fetcher, {
+            id: product?.node?.baseID,
+            isSample,
+            isStorefront
+        });
+        return {
+            productId: product?.node?.baseID,
+            items: medias
+        };
+    }) ?? []);
+    return productsWithMedias;
+}; // future can be used for fetching products with paging ids
+ // const pagingQuery = (
+ //   data: string[],
+ //   currentPage: number,
+ //   productsPerPage: number,
+ //   first: number,
+ // ): string[] => {
+ //   return data.slice(
+ //     (currentPage - 1) * productsPerPage,
+ //     (currentPage - 1) * productsPerPage + first,
+ //   );
+ // };
+
+export { getProducts };

package/dist/esm/helpers/query.js

@@ -1 +1,25 @@
-let generateProductQueryKey=e=>["query/product",e],generateCollectionQueryKey=e=>["query/collection",e],generateProductsQueryKey=e=>["query/products",{...e,ids:[...e.ids].sort()}];export{generateCollectionQueryKey,generateProductQueryKey,generateProductsQueryKey};
+const generateProductQueryKey = (args)=>{
+    return [
+        'query/product',
+        args
+    ];
+};
+const generateCollectionQueryKey = (args)=>{
+    return [
+        'query/collection',
+        args
+    ];
+};
+const generateProductsQueryKey = (args)=>{
+    return [
+        'query/products',
+        {
+            ...args,
+            ids: [
+                ...args.ids
+            ].sort()
+        }
+    ];
+};
+
+export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey };

package/dist/esm/helpers/radius.js

@@ -1,9 +1,127 @@
-import{devicesMapping as e,stateMapping as s}from"./constant.js";import{makeStyle as a}from"./make-style.js";let getCornerCSSFromGlobal=e=>e?.radiusType?["custom","circle"].includes(e.radiusType)?a({bblr:e.bblr,bbrr:e.bbrr,btlr:e.btlr,btrr:e.btrr}):a({radius:`var(--g-radius-${e.radiusType})`}):{},getRadiusCSSFromGlobal=(a,r,t)=>{if(!r||!a)return{};let o=t&&"desktop"!==t?e?.[t]:"",i=s?.[a];return{[`-${i}-radius${o}`]:`var(--g-radius-${r})`}},getCustomRadius=(a,r,t)=>{if(!r||!a||"custom"!==r.radiusType)return{};let o=t&&"desktop"!==t?e?.[t]:"",i=s?.[a];return{[`-${i}-bblr${o}`]:r.bblr,[`-${i}-bbrr${o}`]:r.bbrr,[`-${i}-btlr${o}`]:r.btlr,[`-${i}-btrr${o}`]:r.btrr}},composeRadius=e=>e?"desktop"in e||"tablet"in e||"mobile"in e?composeRadiusResponsiveState(e):composeRadiusState(e):{},composeRadiusState=(e,s)=>{let a={};switch(e?.normal?.radiusType){case"medium":case"large":case"small":Object.assign(a,getRadiusCSSFromGlobal("normal",e?.normal?.radiusType,s));break;case"circle":case"none":case"custom":Object.assign(a,getCustomRadius("normal",e.normal,s))}switch(e?.hover?.radiusType){case"medium":case"large":case"small":Object.assign(a,getRadiusCSSFromGlobal("hover",e?.hover?.radiusType,s));break;case"circle":case"none":case"custom":Object.assign(a,getCustomRadius("hover",e.hover,s))}switch(e?.focus?.radiusType){case"medium":case"large":case"small":Object.assign(a,getRadiusCSSFromGlobal("focus",e?.focus?.radiusType,s));break;case"circle":case"none":case"custom":Object.assign(a,getCustomRadius("focus",e.focus,s))}return a},composeRadiusResponsiveState=e=>{let s={};return Object.assign(s,composeRadiusState(e?.desktop,"desktop")),Object.assign(s,composeRadiusState(e?.tablet,"tablet")),Object.assign(s,composeRadiusState(e?.mobile,"mobile")),s},getRadiusStyleActiveState=e=>e?.active?.radiusType==="custom"?getCustomRadius("normal",e?.active):getRadiusCSSFromGlobal("normal",e?.active?.radiusType),composeCornerCss=e=>{let s;if(!e)return;let{radiusType:a,bblr:r,bbrr:t,btlr:o,btrr:i}=e;switch(a){case"medium":case"large":case"small":s=`border-radius: var(--g-radius-${a});`;break;case"circle":case"none":case"custom":s=`
-      ${r?`border-bottom-left-radius: ${r};`:""}
+import { devicesMapping, stateMapping } from './constant.js';
+import { makeStyle } from './make-style.js';
+
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    if ([
+        'custom',
+        'circle'
+    ].includes(corner.radiusType)) return makeStyle({
+        bblr: corner.bblr,
+        bbrr: corner.bbrr,
+        btlr: corner.btlr,
+        btrr: corner.btrr
+    });
+    return makeStyle({
+        radius: `var(--g-radius-${corner.radiusType})`
+    });
+};
+const getRadiusCSSFromGlobal = (state, key, device)=>{
+    if (!key || !state) return {};
+    const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
+    const mState = stateMapping?.[state];
+    return {
+        [`-${mState}-radius${suffix}`]: `var(--g-radius-${key})`
+    };
+};
+const getCustomRadius = (state, radius, device)=>{
+    if (!radius || !state || radius.radiusType !== 'custom') return {};
+    const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
+    const mState = stateMapping?.[state];
+    return {
+        [`-${mState}-bblr${suffix}`]: radius.bblr,
+        [`-${mState}-bbrr${suffix}`]: radius.bbrr,
+        [`-${mState}-btlr${suffix}`]: radius.btlr,
+        [`-${mState}-btrr${suffix}`]: radius.btrr
+    };
+};
+const composeRadius = (value)=>{
+    if (!value) return {};
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        return composeRadiusResponsiveState(value);
+    }
+    return composeRadiusState(value);
+};
+const composeRadiusState = (radiusValue, device)=>{
+    const style = {};
+    switch(radiusValue?.normal?.radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            Object.assign(style, getRadiusCSSFromGlobal('normal', radiusValue?.normal?.radiusType, device));
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            Object.assign(style, getCustomRadius('normal', radiusValue.normal, device));
+            break;
+    }
+    switch(radiusValue?.hover?.radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            Object.assign(style, getRadiusCSSFromGlobal('hover', radiusValue?.hover?.radiusType, device));
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            Object.assign(style, getCustomRadius('hover', radiusValue.hover, device));
+            break;
+    }
+    switch(radiusValue?.focus?.radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            Object.assign(style, getRadiusCSSFromGlobal('focus', radiusValue?.focus?.radiusType, device));
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            Object.assign(style, getCustomRadius('focus', radiusValue.focus, device));
+            break;
+    }
+    return style;
+};
+const composeRadiusResponsiveState = (radiusValue)=>{
+    const style = {};
+    Object.assign(style, composeRadiusState(radiusValue?.desktop, 'desktop'));
+    Object.assign(style, composeRadiusState(radiusValue?.tablet, 'tablet'));
+    Object.assign(style, composeRadiusState(radiusValue?.mobile, 'mobile'));
+    return style;
+};
+const getRadiusStyleActiveState = (radiusValue)=>{
+    if (radiusValue?.active?.radiusType === 'custom') {
+        return getCustomRadius('normal', radiusValue?.active);
+    }
+    return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
+};
+const composeCornerCss = (value)=>{
+    if (!value) {
+        return;
+    }
+    const { radiusType, bblr, bbrr, btlr, btrr } = value;
+    let radiusValue = undefined;
+    switch(radiusType){
+        case 'medium':
+        case 'large':
+        case 'small':
+            radiusValue = `border-radius: var(--g-radius-${radiusType});`;
+            break;
+        case 'circle':
+        case 'none':
+        case 'custom':
+            radiusValue = `
+      ${bblr ? `border-bottom-left-radius: ${bblr};` : ''}
       
-      ${t?`border-bottom-right-radius: ${t};`:""}
+      ${bbrr ? `border-bottom-right-radius: ${bbrr};` : ''}
 
-      ${o?`border-top-left-radius: ${o};`:""}
+      ${btlr ? `border-top-left-radius: ${btlr};` : ''}
       
-      ${i?`border-top-right-radius: ${i};`:""}
-      `}return s};export{composeCornerCss,composeRadius,getCornerCSSFromGlobal,getCustomRadius,getRadiusCSSFromGlobal,getRadiusStyleActiveState};
+      ${btrr ? `border-top-right-radius: ${btrr};` : ''}
+      `;
+            break;
+    }
+    return radiusValue;
+};
+
+export { composeCornerCss, composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/helpers/render.js

@@ -1 +1,64 @@
-let RenderIf=(e,t,r)=>e?"string"==typeof t?t:t():("string"==typeof r?r:r?.())??"",isObject=e=>!("object"!=typeof e||Array.isArray(e))&&null!==e,props=(e,...t)=>{let r=t[0],o=[];for(let e in r)if(Object.hasOwnProperty.call(r,e)){let t=r[e];["symbol","object","function"].includes(typeof t)||(t?o.push(`${e}="${t}"`):o.push(`${e}`))}return o.join(" ")},styles=(e,...t)=>{let r=t[0],o=[];for(let e in r)if(Object.hasOwnProperty.call(r,e)){let t=r[e];void 0!==t&&!1!==t&&o.push(`${e}:${t}`)}return o.join(";")},dataStringify=e=>JSON.stringify(e).replace(/\\"/g,'"'),template=(e,...t)=>{let r="";return e.forEach((e,o)=>{r+=e,void 0!==t[o]&&(isObject(t[o])?/style=["|']/.test(e)?r+=styles`${t[o]}`:r+=props`${t[o]}`:r+=t[o])}),r},composeMemo=(e,t)=>e();export{RenderIf,composeMemo,dataStringify,props,styles,template};
+const RenderIf = (c, t, f)=>c ? typeof t === 'string' ? t : t() : (typeof f === 'string' ? f : f?.()) ?? '';
+const isObject = (obj)=>{
+    if (typeof obj === 'object' && !Array.isArray(obj) && obj !== null) {
+        return true;
+    }
+    return false;
+};
+const props = (strings, ...keys)=>{
+    const props = keys[0];
+    const propsArr = [];
+    for(const attr in props){
+        if (Object.hasOwnProperty.call(props, attr)) {
+            const val = props[attr];
+            if (![
+                'symbol',
+                'object',
+                'function'
+            ].includes(typeof val)) {
+                if (val) {
+                    propsArr.push(`${attr}="${val}"`);
+                } else {
+                    propsArr.push(`${attr}`);
+                }
+            }
+        }
+    }
+    return propsArr.join(' ');
+};
+const styles = (strings, ...keys)=>{
+    const styles = keys[0];
+    const styleArr = [];
+    for(const attr in styles){
+        if (Object.hasOwnProperty.call(styles, attr)) {
+            const val = styles[attr];
+            if (val !== undefined && val !== false) styleArr.push(`${attr}:${val}`);
+        }
+    }
+    return styleArr.join(';');
+};
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
+const template = (strings, ...keys)=>{
+    let str = '';
+    strings.forEach((item, index)=>{
+        str += item;
+        if (keys[index] !== undefined) {
+            if (isObject(keys[index])) {
+                if (/style=["|']/.test(item)) {
+                    str += styles`${keys[index]}`;
+                } else {
+                    str += props`${keys[index]}`;
+                }
+            } else {
+                str += keys[index];
+            }
+        }
+    });
+    return str;
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const composeMemo = (fn, _)=>fn();
+
+export { RenderIf, composeMemo, dataStringify, props, styles, template };

package/dist/esm/helpers/shadow.js

@@ -1 +1,51 @@
-import{getSingleColorVariable as t}from"./colors.js";import{stateMapping as e}from"./constant.js";import{getShortName as a}from"./get-shortname.js";let parseValueWithUnit=t=>{let e=t.match(/(\d+)(.+)/);if(e&&3===e.length){let t=Number(e[1]??0),a=e[2];return{value:t,unit:a??"px"}}return{value:0,unit:"px"}},getStyleShadow=(r,o=!1)=>{let{styleAppliedFor:l,value:s,isEnableShadow:n}=r||{},{state:i}=r||{};if(i||(i="normal"),!l||!s||void 0===s.distance)return{};let{value:$,unit:h}=parseValueWithUnit(`${s?.distance}`);return{[`-${o?"":e?.[i]}-${a(l)}`]:n?`${Math.cos(parseFloat(`${s?.angle}`)*Math.PI/180)*parseFloat(`${$}`)}${h} ${Math.sin(parseFloat(`${s?.angle}`)*Math.PI/180)*parseFloat(`${$}`)}${h} ${s?.blur} ${"box-shadow"===l?s?.spread+" ":""}${t(s?.color)}`:"none"}},getStyleShadowState=(t,e,a)=>{if(!t||!e)return{};let r={};for(let[o,l]of Object.entries(t))Object.assign(r,getStyleShadow({value:l,state:o,styleAppliedFor:e,isEnableShadow:a?.[o]}));return r},composeShadowCss=({hasBoxShadow:e,boxShadowValue:a})=>{if(!e||!a)return;let{value:r,unit:o}=parseValueWithUnit(`${a?.distance}`);return`box-shadow: ${Math.cos(parseFloat(`${a?.angle}`)*Math.PI/180)*parseFloat(`${r}`)}${o} ${Math.sin(parseFloat(`${a?.angle}`)*Math.PI/180)*parseFloat(`${r}`)}${o} ${a?.blur} ${a?.spread+" "}${t(a?.color)};`};export{composeShadowCss,getStyleShadow,getStyleShadowState,parseValueWithUnit};
+import { getSingleColorVariable } from './colors.js';
+import { stateMapping } from './constant.js';
+import { getShortName } from './get-shortname.js';
+
+const parseValueWithUnit = (valueWithUnit)=>{
+    const matches = valueWithUnit.match(/(\d+)(.+)/);
+    if (matches && matches.length === 3) {
+        const value = Number(matches[1] ?? 0);
+        const unit = matches[2];
+        return {
+            value,
+            unit: unit ?? 'px'
+        };
+    }
+    return {
+        value: 0,
+        unit: 'px'
+    };
+};
+const getStyleShadow = (shadowStyle, isActiveState = false)=>{
+    const { styleAppliedFor, value, isEnableShadow } = shadowStyle || {};
+    let { state } = shadowStyle || {};
+    if (!state) state = 'normal';
+    if (!styleAppliedFor || !value) return {};
+    if (typeof value.distance == 'undefined') return {};
+    const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
+    return {
+        [`-${!isActiveState ? stateMapping?.[state] : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+    };
+};
+const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
+    if (!shadow || !styleAppliedFor) return {};
+    const style = {};
+    for (const [key, value] of Object.entries(shadow)){
+        Object.assign(style, getStyleShadow({
+            value: value,
+            state: key,
+            styleAppliedFor,
+            isEnableShadow: isEnableShadow?.[key]
+        }));
+    }
+    return style;
+};
+const composeShadowCss = ({ hasBoxShadow, boxShadowValue })=>{
+    if (!hasBoxShadow) return undefined;
+    if (!boxShadowValue) return undefined;
+    const { value: distance, unit: unitDistance } = parseValueWithUnit(`${boxShadowValue?.distance}`);
+    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)};`;
+};
+
+export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit };

package/dist/esm/helpers/size.js

@@ -1,4 +1,31 @@
-import{devicesMapping as e}from"./constant.js";function getCustomSizeCSSByDevice(t,o){if(!t||!o)return{};let i=e[o]??"";return{[`--pl${i}`]:t?.[o]?.horizontal,[`--pr${i}`]:t?.[o]?.horizontal,[`--pt${i}`]:t?.[o]?.vertical,[`--pb${i}`]:t?.[o]?.vertical}}let composeSize=e=>Object.assign({},getCustomSizeCSSByDevice(e,"desktop"),getCustomSizeCSSByDevice(e,"tablet"),getCustomSizeCSSByDevice(e,"mobile"));function genSizeClass(e){return`g-s-${e}`}let composeSizeCss=e=>{if(void 0===e)return"";let t=e?.custom?.desktop?.horizontal,o=e?.custom?.desktop?.vertical;if(e?.custom)return`
-  ${t?`padding-left: ${t}; padding-right: ${t};`:void 0}
-  ${o?`padding-top: ${o}; padding-bottom: ${o};`:void 0}
-  `};export{composeSize,composeSizeCss,genSizeClass};
+import { devicesMapping } from './constant.js';
+
+function getCustomSizeCSSByDevice(size, device) {
+    if (!size || !device) return {};
+    const suffix = devicesMapping[device] ?? '';
+    return {
+        [`--pl${suffix}`]: size?.[device]?.horizontal,
+        [`--pr${suffix}`]: size?.[device]?.horizontal,
+        [`--pt${suffix}`]: size?.[device]?.vertical,
+        [`--pb${suffix}`]: size?.[device]?.vertical
+    };
+}
+const composeSize = (size)=>{
+    return Object.assign({}, getCustomSizeCSSByDevice(size, 'desktop'), getCustomSizeCSSByDevice(size, 'tablet'), getCustomSizeCSSByDevice(size, 'mobile'));
+};
+function genSizeClass(name) {
+    return `g-s-${name}`;
+}
+const composeSizeCss = (spacing)=>{
+    if (spacing === undefined) return '';
+    const size = spacing;
+    const sizeHozi = spacing?.custom?.desktop?.horizontal;
+    const sizeVerti = spacing?.custom?.desktop?.vertical;
+    if (!size?.custom) return undefined;
+    return `
+  ${sizeHozi ? `padding-left: ${sizeHozi}; padding-right: ${sizeHozi};` : undefined}
+  ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
+  `;
+};
+
+export { composeSize, composeSizeCss, genSizeClass };

package/dist/esm/helpers/spacing.js

@@ -1 +1,40 @@
-import{devicesMapping as e}from"./constant.js";function getSpacingCSSByType(t,a){if(!t)return{};let s=a?e?.[a]??"":"";return{[`--p${s}`]:`var(--g-s-${t})`}}function getSpacingVariable(e){return e?`var(--g-s-${e})`:""}let composeSpacing=e=>{let t={};switch(e?.desktop){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.desktop))}switch(e?.tablet){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.tablet,"tablet"))}switch(e?.mobile){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.mobile,"mobile"))}return t};export{composeSpacing,getSpacingVariable};
+import { devicesMapping } from './constant.js';
+
+function getSpacingCSSByType(key, device) {
+    if (!key) return {};
+    const suffix = device ? devicesMapping?.[device] ?? '' : '';
+    return {
+        [`--p${suffix}`]: `var(--g-s-${key})`
+    };
+}
+function getSpacingVariable(key) {
+    if (!key) return '';
+    return `var(--g-s-${key})`;
+}
+const composeSpacing = (spacingValue)=>{
+    const style = {};
+    switch(spacingValue?.desktop){
+        case 'm':
+        case 'l':
+        case 's':
+            Object.assign(style, getSpacingCSSByType(spacingValue.desktop));
+            break;
+    }
+    switch(spacingValue?.tablet){
+        case 'm':
+        case 'l':
+        case 's':
+            Object.assign(style, getSpacingCSSByType(spacingValue.tablet, 'tablet'));
+            break;
+    }
+    switch(spacingValue?.mobile){
+        case 'm':
+        case 'l':
+        case 's':
+            Object.assign(style, getSpacingCSSByType(spacingValue.mobile, 'mobile'));
+            break;
+    }
+    return style;
+};
+
+export { composeSpacing, getSpacingVariable };

package/dist/esm/helpers/tracking/fpixel.js

@@ -1 +1,24 @@
-let pageview=()=>{window.fbq&&window.fbq("track","PageView")},event=(e,t={})=>{window.fbq&&window.fbq("track",e,t)},addToCart=e=>{window.fbq&&window.fbq("track","AddToCart",{content_ids:[e.id],content_name:e.name,content_category:e.category,content_type:"product",value:e.price,currency:e.currency})};export{addToCart,event,pageview};
+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/tracking/gtag.js

@@ -1 +1,87 @@
-let pageview=(e,a)=>{window.gtag&&a&&window.gtag("config",a,{page_path:e}),window.ga&&window.ga("send","pageview",e)},addToCart=e=>{window.ga&&e&&(window.ga("ec:addProduct",{...e,id:e.sku,name:"Default Title"===e.variant?e.name:`${e.name} - ${e.variant}`,variant:"Default Title"===e.variant?e.name:e.variant}),window.ga("ec:setAction","add"),window.ga("send","event",{eventCategory:"EnhancedEcommerce",eventAction:"Added Product",nonInteraction:!0}))},productClick=e=>{window.ga&&(ga("ec:addProduct",{id:e.id,name:e.name,category:e.category,brand:e.brand,variant:e.variant}),ga("ec:setAction","click"),ga("send","event",{eventAction:"Click",eventCategory:"Product"}))},productDetail=e=>{e&&window.ga&&(ga("ec:addProduct",{brand:e.brand,category:e.category,id:e.id,name:e.name,variant:e.variant}),ga("ec:setAction","detail"),ga("send","event",{eventAction:"Detail",eventCategory:"Ecommerce",nonInteraction:1}))},removeFromCart=(e,a)=>{e&&window.ga&&(ga("ec:addProduct",{id:e.id,name:e.name,price:a}),ga("ec:setAction","remove"),ga("send","event",{eventAction:"Click",eventCategory:"Remove from cart"}))};export{addToCart,pageview,productClick,productDetail,removeFromCart};
+// 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);
+    }
+};
+/** Addition to cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */ const addToCart = (product)=>{
+    // GA 3
+    if (!window.ga || !product) {
+        return;
+    }
+    window.ga('ec:addProduct', {
+        ...product,
+        id: product.sku,
+        name: product.variant === 'Default Title' ? product.name : `${product.name} - ${product.variant}`,
+        variant: product.variant === 'Default Title' ? product.name : product.variant
+    });
+    window.ga('ec:setAction', 'add');
+    window.ga('send', 'event', {
+        eventCategory: 'EnhancedEcommerce',
+        eventAction: 'Added Product',
+        nonInteraction: true
+    });
+};
+/** Product clicked event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#product-click
+ */ const productClick = (product)=>{
+    if (!window.ga) {
+        return;
+    }
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        category: product.category,
+        brand: product.brand,
+        variant: product.variant
+    });
+    ga('ec:setAction', 'click');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Product'
+    });
+};
+/** Product viewed event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
+ */ const productDetail = (product)=>{
+    if (!product || !window.ga) return;
+    ga('ec:addProduct', {
+        brand: product.brand,
+        category: product.category,
+        id: product.id,
+        name: product.name,
+        variant: product.variant
+    });
+    ga('ec:setAction', 'detail');
+    ga('send', 'event', {
+        eventAction: 'Detail',
+        eventCategory: 'Ecommerce',
+        nonInteraction: 1
+    });
+};
+/** Removal from cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */ const removeFromCart = (product, price)=>{
+    if (!product || !window.ga) return;
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        price
+    });
+    ga('ec:setAction', 'remove');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Remove from cart'
+    });
+};
+
+export { addToCart, pageview, productClick, productDetail, removeFromCart };

package/dist/esm/helpers/tracking/tiktokpixel.js

@@ -1 +1,15 @@
-let addToCart=t=>{window?.ttq?.track&&window.ttq.track("AddToCart",{content_id:t.id,content_type:"product",content_name:t.name,quantity:t.quantity,price:t.price,value:(t.price??0)*(t.quantity??0),currency:t.currency})};export{addToCart};
+// @ts-nocheck
+const addToCart = (product)=>{
+    if (!window?.ttq?.track) return;
+    window.ttq.track('AddToCart', {
+        content_id: product.id,
+        content_type: 'product',
+        content_name: product.name,
+        quantity: product.quantity,
+        price: product.price,
+        value: (product.price ?? 0) * (product.quantity ?? 0),
+        currency: product.currency
+    });
+};
+
+export { addToCart };