@gem-sdk/core 1.0.0

package/dist/cjs/helpers/product.js

@@ -0,0 +1,35 @@
+'use strict';
+
+function getSelectedVariant(variants, choices) {
+    /**
+     * Ensure the user has selected all the required options, not just some.
+     */
+    if (!variants ||
+        !variants.length ||
+        !choices ||
+        variants[0]?.selectedOptions.length !== Object.keys(choices).length) {
+        return;
+    }
+    return variants.find((variant) => {
+        return Object.entries(choices).every(([name, value]) => {
+            return variant?.selectedOptions.some((option) => option.name === name && option.value === value);
+        });
+    });
+}
+function parseSelectedOption(options) {
+    if (!options || (options && options.length === 0)) {
+        return;
+    }
+    return options.reduce((acc, { name, value }) => {
+        if (name && value) {
+            return {
+                ...acc,
+                [name]: value,
+            };
+        }
+        return acc;
+    }, {});
+}
+
+exports.getSelectedVariant = getSelectedVariant;
+exports.parseSelectedOption = parseSelectedOption;

package/dist/cjs/helpers/queries/get-collection.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var collectionDetailFilter_generated = require('../../graphql/queries/collection-detail-filter.generated.js');
+var productVariants_generated = require('../../graphql/queries/product-variants.generated.js');
+var isDefined = require('../is-defined.js');
+
+function productSortedByOrder(key) {
+    switch (key) {
+        case 'TITLE_ASC':
+            return { direction: 'ASC', field: 'TITLE' };
+        case 'TITLE_DESC':
+            return { direction: 'DESC', field: 'TITLE' };
+        case 'CREATED_AT_ASC':
+            return { direction: 'ASC', field: 'CREATED_AT' };
+        case 'CREATED_AT_DESC':
+            return { direction: 'DESC', field: 'CREATED_AT' };
+        case 'none':
+            return undefined;
+        default:
+            return undefined;
+    }
+}
+const getCollection = async (fetcher, arg) => {
+    const collections = await loopFetchCollection(fetcher, arg);
+    if (!collections) {
+        throw new Error('collections not found');
+    }
+    // merge product collection variant
+    const mergeProducts = await mergeProductCollectionVariant(fetcher, collections, arg.isSample);
+    return mergeProducts;
+};
+const fetchCollection = async (fetcher, variables) => {
+    return fetcher([
+        collectionDetailFilter_generated.CollectionDetailFilterDocument,
+        variables,
+    ]);
+};
+const calculateFirstProduct = (numberOfProducts, currentPage, productsPerPage) => {
+    const remainingProducts = numberOfProducts - productsPerPage * currentPage;
+    if (numberOfProducts < productsPerPage)
+        return numberOfProducts;
+    return remainingProducts > 0 ? productsPerPage : productsPerPage + remainingProducts;
+};
+const loopFetchCollection = async (fetcher, arg) => {
+    const productsPerPage = 8; // number of products per page
+    let variables; // variables of collection query
+    let productAfterFetcher; // product after of collection query
+    let dataCollection; // data of collection query
+    let hasNextPage; //
+    let firstCollection;
+    let currentPage = 1;
+    if (arg.numberOfProducts) {
+        const pages = Math.ceil(arg.numberOfProducts / productsPerPage);
+        while (currentPage <= pages && hasNextPage !== false) {
+            variables = {
+                firstVariant: 1,
+                firstMedia: 30,
+                orderBy: {
+                    field: 'UPDATED_AT',
+                    direction: 'DESC',
+                },
+                firstProduct: calculateFirstProduct(arg.numberOfProducts, currentPage, productsPerPage),
+                ...(!arg.id || arg.id.toLowerCase() === 'latest'
+                    ? { where: { hasCollectionProducts: true } }
+                    : { where: { baseID: arg.id } }),
+                orderByProduct: productSortedByOrder(arg.orderBy),
+                whereProduct: {
+                    isStorefront: true,
+                    isSample: arg.isSample,
+                },
+                productsAfter: productAfterFetcher,
+            };
+            const pageData = await fetchCollection(fetcher, variables);
+            productAfterFetcher = pageData?.collections?.edges?.[0]?.node?.products?.pageInfo?.endCursor;
+            if (currentPage === 1) {
+                dataCollection = pageData; // set data of first page
+                firstCollection = dataCollection?.collections?.edges?.[0];
+            }
+            else if (firstCollection?.node?.products &&
+                pageData?.collections?.edges?.[0]?.node?.products?.edges) {
+                // concat new values to the old ones
+                firstCollection.node.products = {
+                    pageInfo: pageData?.collections?.edges?.[0]?.node?.products?.pageInfo,
+                    edges: firstCollection.node?.products?.edges.concat(pageData?.collections?.edges?.[0]?.node?.products?.edges),
+                };
+            }
+            currentPage++;
+            // hasNextPage = false if there is no more pages then break the loop
+            if (!firstCollection?.node?.products?.pageInfo?.hasNextPage) {
+                hasNextPage = false;
+                break;
+            }
+        }
+        return dataCollection;
+    }
+};
+const mergeProductCollectionVariant = async (fetcher, collection, isSample) => {
+    const node = collection?.collections?.edges?.[0]?.node;
+    if (!node)
+        return collection;
+    const productList = node?.products?.edges;
+    const listBaseId = productList?.map((product) => product?.node?.baseID).filter(isDefined.isDefined);
+    const ProductListWithVariants = await fetchVariantsByBaseIds(fetcher, {
+        ids: listBaseId,
+        isSample,
+    });
+    // mapping variant to product list in collections
+    const newProductList = productList?.map((product) => {
+        const productVariants = ProductListWithVariants?.variants?.edges?.filter((productV) => productV?.node?.id === product?.node?.id);
+        return {
+            ...product,
+            node: product.node
+                ? {
+                    ...product.node,
+                    variants: product.node?.variants
+                        ? {
+                            ...product.node?.variants,
+                            edges: productVariants?.[0]?.node?.variants?.edges ?? [],
+                        }
+                        : undefined,
+                }
+                : undefined,
+        };
+    }) ?? [];
+    const newCollection = {
+        ...collection,
+        collections: {
+            edges: [
+                {
+                    node: {
+                        ...node,
+                        products: {
+                            edges: newProductList,
+                        },
+                    },
+                    cursor: undefined,
+                },
+            ],
+        },
+    };
+    return newCollection;
+};
+const fetchVariantsByBaseIds = async (fetcher, { ids, isSample }) => {
+    const initVariables = {
+        firstVariant: 100,
+        first: ids?.length || 1,
+        orderBy: {
+            field: 'UPDATED_AT',
+            direction: 'DESC',
+        },
+        where: {
+            isStorefront: true,
+            isSample,
+            ...(ids?.length && { baseIDIn: ids.sort() }),
+        },
+    };
+    const query = async (variables) => {
+        try {
+            const response = await fetcher([
+                productVariants_generated.ProductVariantsDocument,
+                variables,
+            ]);
+            return response;
+        }
+        catch {
+            return {};
+        }
+    };
+    return query(initVariables);
+};
+
+exports.calculateFirstProduct = calculateFirstProduct;
+exports.getCollection = getCollection;

package/dist/cjs/helpers/queries/get-product-by-slug.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var productLittleDetail_generated = require('../../graphql/queries/product-little-detail.generated.js');
+var productMedias_generated = require('../../graphql/queries/product-medias.generated.js');
+var productVariants_generated = require('../../graphql/queries/product-variants.generated.js');
+
+const getProductBySlug = async (fetcher, slug) => {
+    const [product, variants, medias] = await Promise.all([
+        fetchProduct(fetcher, slug),
+        fetchVariants(fetcher, slug),
+        fetchMedias(fetcher, slug),
+    ]);
+    if (!product) {
+        throw new Error('Product not found');
+    }
+    return {
+        ...product,
+        variants: {
+            edges: variants,
+        },
+        medias: {
+            edges: medias,
+        },
+    };
+};
+const orderBy = {
+    field: 'UPDATED_AT',
+    direction: 'DESC',
+};
+const fetchProduct = async (fetcher, handle) => {
+    const variables = {
+        orderBy,
+        where: { handle, isStorefront: true },
+    };
+    const response = await fetcher([productLittleDetail_generated.ProductLittleDetailDocument, variables]);
+    return response.product?.edges?.[0]?.node;
+};
+const fetchVariants = async (fetcher, handle) => {
+    const initVariables = {
+        orderBy,
+        where: { handle, isStorefront: true },
+    };
+    const query = async (variables, olds) => {
+        try {
+            const response = await fetcher([
+                productVariants_generated.ProductVariantsDocument,
+                variables,
+            ]);
+            const product = response.variants?.edges?.[0];
+            const items = olds?.concat(product?.node?.variants?.edges ?? []);
+            if (product?.node?.variants?.pageInfo?.hasNextPage) {
+                return query({
+                    ...variables,
+                    afterVariant: product?.node?.variants?.pageInfo.endCursor,
+                }, items);
+            }
+            return items ?? [];
+        }
+        catch {
+            return olds ?? [];
+        }
+    };
+    return query(initVariables, []);
+};
+const fetchMedias = async (fetcher, handle) => {
+    const initVariables = {
+        orderBy,
+        where: { handle, isStorefront: true },
+    };
+    const query = async (variables) => {
+        try {
+            const response = await fetcher([
+                productMedias_generated.ProductMediasDocument,
+                variables,
+            ]);
+            const product = response.medias?.edges?.[0];
+            const items = product?.node?.medias?.edges ?? [];
+            if (product?.node?.medias?.pageInfo?.hasNextPage) {
+                try {
+                    const newData = await query({
+                        ...variables,
+                        afterMedia: product?.node?.medias?.pageInfo.endCursor,
+                    });
+                    return items.concat(newData);
+                }
+                catch {
+                    return items;
+                }
+            }
+            return items;
+        }
+        catch {
+            return [];
+        }
+    };
+    return query(initVariables);
+};
+
+exports.getProductBySlug = getProductBySlug;

package/dist/cjs/helpers/queries/get-product.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var productLittleDetail_generated = require('../../graphql/queries/product-little-detail.generated.js');
+var productMedias_generated = require('../../graphql/queries/product-medias.generated.js');
+var productVariants_generated = require('../../graphql/queries/product-variants.generated.js');
+
+const getProduct = async (fetcher, { id, isSample }) => {
+    const [product, variants, medias] = await Promise.all([
+        fetchProduct(fetcher, { id, isSample }),
+        fetchVariants(fetcher, { id, isSample }),
+        fetchMedias(fetcher, { id, isSample }),
+    ]);
+    if (!product) {
+        throw new Error('Product not found');
+    }
+    return {
+        ...product,
+        variants: {
+            edges: variants,
+        },
+        medias: {
+            edges: medias,
+        },
+    };
+};
+const orderBy = {
+    field: 'UPDATED_AT',
+    direction: 'DESC',
+};
+const fetchProduct = async (fetcher, { id, isSample }) => {
+    const variables = {
+        orderBy,
+        where: {
+            isStorefront: true,
+            isSample,
+            ...(id && id.toLowerCase() !== 'latest' && { baseID: id }),
+        },
+    };
+    const response = await fetcher([productLittleDetail_generated.ProductLittleDetailDocument, variables]);
+    return response.product?.edges?.[0]?.node;
+};
+const fetchVariants = async (fetcher, { id, isSample }) => {
+    const initVariables = {
+        orderBy,
+        where: {
+            isStorefront: true,
+            isSample,
+            ...(id && id.toLowerCase() !== 'latest' && { baseID: id }),
+        },
+    };
+    const query = async (variables, olds) => {
+        try {
+            const response = await fetcher([
+                productVariants_generated.ProductVariantsDocument,
+                variables,
+            ]);
+            const product = response.variants?.edges?.[0];
+            const items = olds?.concat(product?.node?.variants?.edges ?? []);
+            if (product?.node?.variants?.pageInfo?.hasNextPage) {
+                return query({
+                    ...variables,
+                    afterVariant: product?.node?.variants?.pageInfo.endCursor,
+                }, items);
+            }
+            return items ?? [];
+        }
+        catch {
+            return olds ?? [];
+        }
+    };
+    return query(initVariables, []);
+};
+const fetchMedias = async (fetcher, { id, isSample }) => {
+    const initVariables = {
+        orderBy,
+        where: {
+            isStorefront: true,
+            isSample,
+            ...(id && id.toLowerCase() !== 'latest' && { baseID: id }),
+        },
+    };
+    const query = async (variables) => {
+        try {
+            const response = await fetcher([
+                productMedias_generated.ProductMediasDocument,
+                variables,
+            ]);
+            const product = response.medias?.edges?.[0];
+            const items = product?.node?.medias?.edges ?? [];
+            if (product?.node?.medias?.pageInfo?.hasNextPage) {
+                try {
+                    const newData = await query({
+                        ...variables,
+                        afterMedia: product?.node?.medias?.pageInfo.endCursor,
+                    });
+                    return items.concat(newData);
+                }
+                catch {
+                    return items;
+                }
+            }
+            return items;
+        }
+        catch {
+            return [];
+        }
+    };
+    return query(initVariables);
+};
+
+exports.fetchMedias = fetchMedias;
+exports.fetchVariants = fetchVariants;
+exports.getProduct = getProduct;

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

@@ -0,0 +1,135 @@
+'use strict';
+
+var products_generated = require('../../graphql/queries/products.generated.js');
+var getCollection = require('./get-collection.js');
+var getProduct = require('./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 { ...mergedMedias, ...mergedVariant };
+};
+const fetchProducts = async (fetcher, variables) => {
+    return fetcher([products_generated.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: getCollection.calculateFirstProduct(numberOfProducts, currentPage, productsPerPage),
+            firstMedia: 1,
+            firstVariant: 1,
+            orderBy: {
+                direction: 'DESC',
+                field: 'UPDATED_AT',
+            },
+            where: {
+                isStorefront: true,
+                isSample: isSample,
+                ...(ids?.length ? { baseIDIn: ids.sort() } : {}),
+            },
+            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) => {
+        return getProduct.fetchVariants(fetcher, { id: product?.node?.baseID, isSample }).then((variants) => {
+            const res = {
+                ...product,
+                ...(product.node
+                    ? {
+                        node: {
+                            ...product.node,
+                            variants: variants.length ? { edges: variants } : undefined,
+                        },
+                    }
+                    : {}),
+            };
+            return res;
+        });
+    }) ?? []).then((res) => {
+        return {
+            products: {
+                edges: res,
+                pageInfo: products?.products?.pageInfo,
+            },
+        };
+    });
+    return productsWithVariants;
+};
+const mergeMediasToProducts = async (fetcher, products, isSample) => {
+    const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product) => {
+        return getProduct.fetchMedias(fetcher, { id: product?.node?.baseID, isSample }).then((media) => {
+            const res = {
+                ...product,
+                ...(product.node
+                    ? {
+                        node: {
+                            ...product.node,
+                            medias: media.length ? { edges: media } : undefined,
+                        },
+                    }
+                    : {}),
+            };
+            return res;
+        });
+    }) ?? []).then((res) => {
+        return {
+            products: {
+                edges: res,
+                pageInfo: products?.products?.pageInfo,
+            },
+        };
+    });
+    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,
+//   );
+// };
+
+exports.getProducts = getProducts;

package/dist/cjs/helpers/radius.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var constant = require('./constant.js');
+
+const getRadiusCSSFromGlobal = (state, key, device) => {
+    if (!key || !state)
+        return {};
+    const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
+    const mState = constant.stateMapping?.[state];
+    return {
+        [`-${mState}-radius${suffix}`]: `var(--g-radius-${key})`,
+    };
+};
+const getCustomRadius = (state, radius, device) => {
+    if (!radius || !state)
+        return {};
+    const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
+    const mState = constant.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);
+};
+
+exports.composeRadius = composeRadius;
+exports.getCustomRadius = getCustomRadius;
+exports.getRadiusCSSFromGlobal = getRadiusCSSFromGlobal;
+exports.getRadiusStyleActiveState = getRadiusStyleActiveState;

package/dist/cjs/helpers/shadow.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var colors = require('./colors.js');
+var constant = require('./constant.js');
+var getShortname = require('./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 ? constant.stateMapping?.[state] : ''}-${getShortname.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 + ' ' : ''}${colors.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;
+};
+
+exports.getStyleShadow = getStyleShadow;
+exports.getStyleShadowState = getStyleShadowState;