@gem-sdk/core 1.0.0

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

@@ -0,0 +1,133 @@
+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 { ...mergedMedias, ...mergedVariant };
+};
+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',
+            },
+            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 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 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,
+//   );
+// };
+
+export { getProducts };

package/dist/esm/helpers/radius.js

@@ -0,0 +1,86 @@
+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);
+};
+
+export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/helpers/shadow.js

@@ -0,0 +1,45 @@
+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;
+};
+
+export { getStyleShadow, getStyleShadowState };

package/dist/esm/helpers/size.js

@@ -0,0 +1,18 @@
+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'));
+};
+
+export { composeSize };

package/dist/esm/helpers/spacing.js

@@ -0,0 +1,42 @@
+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/tiktokpixel.js

@@ -0,0 +1,15 @@
+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 };

package/dist/esm/helpers/typography.js

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

package/dist/esm/hooks/cart/use-add-to-cart.js

@@ -0,0 +1,18 @@
+import { addToCartOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useAddToCart = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('add-to-cart', (_, { arg }) => addToCartOperation(shop)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useAddToCart };

package/dist/esm/hooks/cart/use-cart-data.js

@@ -0,0 +1,24 @@
+import { getCartOperation } from '@gem-sdk/adapter-shopify';
+import useSWR from 'swr';
+import { useStoreFront } from '../shop.js';
+import useCartId from '../useCartId.js';
+
+const useCartData = (options) => {
+    const { cartId, clearCartId } = useCartId();
+    const shop = useStoreFront();
+    return useSWR(cartId ? 'cart' : null, () => getCartOperation(shop)({ cartId: cartId }), {
+        revalidateOnMount: true,
+        revalidateOnFocus: true,
+        keepPreviousData: false,
+        dedupingInterval: 2000,
+        ...options,
+        onSuccess(data, key, config) {
+            if (!data) {
+                clearCartId();
+            }
+            options?.onSuccess?.(data, key, config);
+        },
+    });
+};
+
+export { useCartData };

package/dist/esm/hooks/cart/use-cart-discount-codes-update.js

@@ -0,0 +1,18 @@
+import { cartDiscountCodesUpdateOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useCartDiscountCodesUpdate = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('cart-discount-codes-update', (_, { arg }) => cartDiscountCodesUpdateOperation(shop)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useCartDiscountCodesUpdate };

package/dist/esm/hooks/cart/use-cart-note-update.js

@@ -0,0 +1,18 @@
+import { cartNoteUpdateOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useCartNoteUpdate = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('cart-note-update', (_, { arg }) => cartNoteUpdateOperation(shop)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useCartNoteUpdate };

package/dist/esm/hooks/cart/use-create-cart.js

@@ -0,0 +1,20 @@
+import { createCartOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useCreateCart = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('create-cart', (_, { arg }) => {
+        return createCartOperation(shop)(arg);
+    }, {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useCreateCart };

package/dist/esm/hooks/cart/use-remove-cart-item.js

@@ -0,0 +1,18 @@
+import { removeCartItemOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useRemoveCartItem = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('remove-cart-item', (_, { arg }) => removeCartItemOperation(shop)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useRemoveCartItem };

package/dist/esm/hooks/cart/use-update-cart-item.js

@@ -0,0 +1,18 @@
+import { updateCartLineOperation } from '@gem-sdk/adapter-shopify';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useStoreFront } from '../shop.js';
+
+const useUpdateCartItem = (options) => {
+    const shop = useStoreFront();
+    const { mutate } = useSWRConfig();
+    return useSWRMutation('update-cart-item', (_, { arg }) => updateCartLineOperation(shop)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+export { useUpdateCartItem };

package/dist/esm/hooks/shop/use-collection-query.js

@@ -0,0 +1,14 @@
+import useSWR from 'swr';
+import { getCollection } from '../../helpers/queries/get-collection.js';
+import { useIsSampleProduct } from '../shop.js';
+import { useFetchHandle } from '../useFetchHandle.js';
+
+const useCollectionQuery = (args, options) => {
+    const fetcher = useFetchHandle();
+    const isSample = useIsSampleProduct();
+    return useSWR(['query/collection', { ...args, isSample }], ([, arg]) => {
+        return getCollection(fetcher, arg);
+    }, options);
+};
+
+export { useCollectionQuery };

package/dist/esm/hooks/shop/use-product-query.js

@@ -0,0 +1,14 @@
+import useSWR from 'swr';
+import { getProduct } from '../../helpers/queries/get-product.js';
+import { useIsSampleProduct } from '../shop.js';
+import { useFetchHandle } from '../useFetchHandle.js';
+
+const useProductQuery = (productId, options) => {
+    const fetcher = useFetchHandle();
+    const isSample = useIsSampleProduct();
+    return useSWR(productId ? ['query/product', { id: productId ?? 'latest', isSample }] : null, async ([, arg]) => {
+        return getProduct(fetcher, arg);
+    }, options);
+};
+
+export { useProductQuery };

package/dist/esm/hooks/shop/use-products-query.js

@@ -0,0 +1,14 @@
+import useSWR from 'swr';
+import { getProducts } from '../../helpers/queries/get-products.js';
+import { useIsSampleProduct } from '../shop.js';
+import { useFetchHandle } from '../useFetchHandle.js';
+
+const useProductsQuery = (ids, options) => {
+    const fetcher = useFetchHandle();
+    const isSample = useIsSampleProduct();
+    return useSWR(['query/products', { ids, isSample }], async ([, arg]) => {
+        return getProducts(fetcher, arg);
+    }, options);
+};
+
+export { useProductsQuery };

package/dist/esm/hooks/shop.js

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+import { useSWRConfig } from 'swr';
+import { useShopStore } from '../contexts/ShopContext.js';
+
+const useLocale = () => {
+    const locale = useShopStore((state) => state.locale);
+    const changeLocale = useShopStore((state) => state.changeLocale);
+    return useMemo(() => ({ locale, changeLocale }), [locale, changeLocale]);
+};
+const useCurrency = () => {
+    const currency = useShopStore((state) => state.currency);
+    const changeCurrency = useShopStore((state) => state.changeCurrency);
+    return useMemo(() => ({ currency, changeCurrency }), [currency, changeCurrency]);
+};
+const useSwatches = () => {
+    const swatches = useShopStore((state) => state.swatches);
+    const changeSwatches = useShopStore((state) => state.changeSwatches);
+    return useMemo(() => ({ swatches, changeSwatches }), [swatches, changeSwatches]);
+};
+const usePageType = () => {
+    const pageType = useShopStore((state) => state.pageType);
+    return useMemo(() => pageType || 'STATIC', [pageType]);
+};
+const useStoreFront = () => {
+    const provider = useShopStore((state) => state.provider);
+    const storefrontToken = useShopStore((state) => state.storefrontToken);
+    const storefrontUrl = useShopStore((state) => state.storefrontUrl);
+    return {
+        provider,
+        storefrontToken,
+        storefrontUrl,
+    };
+};
+const usePluginEnable = () => {
+    return useShopStore((state) => state.plugins);
+};
+const useEditorMode = () => {
+    return useShopStore((state) => state.mode);
+};
+const useMobileOnly = () => {
+    return useShopStore((state) => state.mobileOnly);
+};
+const useMatchMutate = () => {
+    const { cache, mutate } = useSWRConfig();
+    return (matcher, ...args) => {
+        if (!(cache instanceof Map)) {
+            throw new Error('matchMutate requires the cache provider to be a Map instance');
+        }
+        const keys = [];
+        cache.forEach((_, key) => {
+            if (matcher.test(key)) {
+                keys.push(key);
+            }
+        });
+        const mutations = keys.map((key) => mutate(key, ...args));
+        return Promise.all(mutations);
+    };
+};
+function useConnectedShopify() {
+    const { storefrontToken } = useStoreFront();
+    return !!storefrontToken;
+}
+function useIsSampleProduct() {
+    const { storefrontToken } = useStoreFront();
+    return !storefrontToken;
+}
+
+export { useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/hooks/use-current-device.js

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react';
+
+function subscribe(callback) {
+    window.addEventListener('resize', callback);
+    return () => window.removeEventListener('resize', callback);
+}
+const useCurrentDevice = () => {
+    return useSyncExternalStore(subscribe, () => {
+        if (window.innerWidth < 768) {
+            return 'mobile';
+        }
+        else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
+            return 'tablet';
+        }
+        else {
+            return 'desktop';
+        }
+    }, () => 'desktop');
+};
+
+export { useCurrentDevice };

package/dist/esm/hooks/use-lazy-video.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import LazyLoad from 'vanilla-lazyload';
+
+const useLazyVideo = () => {
+    useEffect(() => {
+        const lazyLoadInstance = new LazyLoad({
+            use_native: true,
+        });
+        lazyLoadInstance.update();
+    }, []);
+};
+
+export { useLazyVideo };