@gem-sdk/core 1.0.0

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

@@ -0,0 +1,7 @@
+import { Children } from 'react';
+
+const isEmptyChildren = (children) => {
+    return Children.count(children) < 1 || !children;
+};
+
+export { isEmptyChildren as default, isEmptyChildren };

package/dist/esm/helpers/layout.js

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

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

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

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

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

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

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

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

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

package/dist/esm/helpers/product.js

@@ -0,0 +1,32 @@
+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;
+    }, {});
+}
+
+export { getSelectedVariant, parseSelectedOption };

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

@@ -0,0 +1,170 @@
+import { CollectionDetailFilterDocument } from '../../graphql/queries/collection-detail-filter.generated.js';
+import { ProductVariantsDocument } from '../../graphql/queries/product-variants.generated.js';
+import { isDefined } from '../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([
+        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);
+    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([
+                ProductVariantsDocument,
+                variables,
+            ]);
+            return response;
+        }
+        catch {
+            return {};
+        }
+    };
+    return query(initVariables);
+};
+
+export { calculateFirstProduct, getCollection };

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

@@ -0,0 +1,97 @@
+import { ProductLittleDetailDocument } from '../../graphql/queries/product-little-detail.generated.js';
+import { ProductMediasDocument } from '../../graphql/queries/product-medias.generated.js';
+import { ProductVariantsDocument } from '../../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([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([
+                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([
+                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);
+};
+
+export { getProductBySlug };

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

@@ -0,0 +1,109 @@
+import { ProductLittleDetailDocument } from '../../graphql/queries/product-little-detail.generated.js';
+import { ProductMediasDocument } from '../../graphql/queries/product-medias.generated.js';
+import { ProductVariantsDocument } from '../../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([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([
+                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([
+                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);
+};
+
+export { fetchMedias, fetchVariants, getProduct };