@gem-sdk/core 1.5.15 → 1.5.22

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

@@ -2,130 +2,142 @@ 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 }) => {
-    const products = await loopFetchProducts(fetcher, { ids, isSample });
-    if (!products) {
-        throw new Error('Product not found');
-    }
-    const [mergedVariant, mergedMedias] = await Promise.all([
-        mergeVariantsToProducts(fetcher, products, isSample),
-        mergeMediasToProducts(fetcher, products, isSample),
-    ]);
-    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 }) => {
-    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: {
-                direction: 'DESC',
-                field: 'UPDATED_AT',
-            },
-            orderByMedia: {
-                field: 'POSITION',
-                direction: 'ASC',
-            },
-            where: {
-                isStorefront: true,
-                isSample: isSample,
-                ...(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) => {
-    const productsWithVariants = await Promise.all(products?.products?.edges?.map(async (product) => {
-        const variants = await fetchVariants(fetcher, { id: product?.node?.baseID, isSample });
-        return {
-            productId: product?.node?.baseID,
-            items: variants,
-        };
-    }) ?? []);
-    return productsWithVariants;
-};
-const mergeMediasToProducts = async (fetcher, products, isSample) => {
-    const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product) => {
-        const medias = await fetchMedias(fetcher, { id: product?.node?.baseID, isSample });
-        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,
-//   );
-// };
+const getProducts = async (fetcher, { ids , isSample  })=>{
+    const products = await loopFetchProducts(fetcher, {
+        ids,
+        isSample
+    });
+    if (!products) {
+        throw new Error('Product not found');
+    }
+    const [mergedVariant, mergedMedias] = await Promise.all([
+        mergeVariantsToProducts(fetcher, products, isSample),
+        mergeMediasToProducts(fetcher, products, isSample)
+    ]);
+    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  })=>{
+    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: {
+                direction: 'DESC',
+                field: 'UPDATED_AT'
+            },
+            orderByMedia: {
+                field: 'POSITION',
+                direction: 'ASC'
+            },
+            where: {
+                isStorefront: true,
+                isSample: isSample,
+                ...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)=>{
+    const productsWithVariants = await Promise.all(products?.products?.edges?.map(async (product)=>{
+        const variants = await fetchVariants(fetcher, {
+            id: product?.node?.baseID,
+            isSample
+        });
+        return {
+            productId: product?.node?.baseID,
+            items: variants
+        };
+    }) ?? []);
+    return productsWithVariants;
+};
+const mergeMediasToProducts = async (fetcher, products, isSample)=>{
+    const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product)=>{
+        const medias = await fetchMedias(fetcher, {
+            id: product?.node?.baseID,
+            isSample
+        });
+        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/radius.js

@@ -1,86 +1,83 @@
 import { devicesMapping, stateMapping } from './constant.js';
 
-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)
-        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 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) 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);
 };
 
 export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/helpers/render.js

@@ -1,59 +1,59 @@
-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)
-                styleArr.push(`${attr}:${val}`);
-        }
-    }
-    return styleArr.join(';');
-};
-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;
+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) styleArr.push(`${attr}:${val}`);
+        }
+    }
+    return styleArr.join(';');
+};
+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;
 };
 
 export { RenderIf, props, styles, template };

package/dist/esm/helpers/shadow.js

@@ -2,44 +2,44 @@ 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 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;
 };
 
 export { getStyleShadow, getStyleShadowState };