@gem-sdk/core 1.0.0

package/dist/cjs/helpers/size.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var constant = require('./constant.js');
+
+function getCustomSizeCSSByDevice(size, device) {
+    if (!size || !device)
+        return {};
+    const suffix = constant.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'));
+};
+
+exports.composeSize = composeSize;

package/dist/cjs/helpers/spacing.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var constant = require('./constant.js');
+
+function getSpacingCSSByType(key, device) {
+    if (!key)
+        return {};
+    const suffix = device ? constant.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;
+};
+
+exports.composeSpacing = composeSpacing;
+exports.getSpacingVariable = getSpacingVariable;

package/dist/cjs/helpers/tiktokpixel.js

@@ -0,0 +1,17 @@
+'use strict';
+
+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,
+    });
+};
+
+exports.addToCart = addToCart;

package/dist/cjs/helpers/typography.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const genTypoClass = (name) => {
+    return `g-${name}`;
+};
+
+exports.genTypoClass = genTypoClass;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useAddToCart = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('add-to-cart', (_, { arg }) => adapterShopify.addToCartOperation(shop$1)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useAddToCart = useAddToCart;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var shop = require('../shop.js');
+var useCartId = require('../useCartId.js');
+
+const useCartData = (options) => {
+    const { cartId, clearCartId } = useCartId.default();
+    const shop$1 = shop.useStoreFront();
+    return useSWR(cartId ? 'cart' : null, () => adapterShopify.getCartOperation(shop$1)({ cartId: cartId }), {
+        revalidateOnMount: true,
+        revalidateOnFocus: true,
+        keepPreviousData: false,
+        dedupingInterval: 2000,
+        ...options,
+        onSuccess(data, key, config) {
+            if (!data) {
+                clearCartId();
+            }
+            options?.onSuccess?.(data, key, config);
+        },
+    });
+};
+
+exports.useCartData = useCartData;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useCartDiscountCodesUpdate = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('cart-discount-codes-update', (_, { arg }) => adapterShopify.cartDiscountCodesUpdateOperation(shop$1)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useCartNoteUpdate = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('cart-note-update', (_, { arg }) => adapterShopify.cartNoteUpdateOperation(shop$1)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useCartNoteUpdate = useCartNoteUpdate;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useCreateCart = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('create-cart', (_, { arg }) => {
+        return adapterShopify.createCartOperation(shop$1)(arg);
+    }, {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useCreateCart = useCreateCart;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useRemoveCartItem = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('remove-cart-item', (_, { arg }) => adapterShopify.removeCartItemOperation(shop$1)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useRemoveCartItem = useRemoveCartItem;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var useSWR = require('swr');
+var useSWRMutation = require('swr/mutation');
+var shop = require('../shop.js');
+
+const useUpdateCartItem = (options) => {
+    const shop$1 = shop.useStoreFront();
+    const { mutate } = useSWR.useSWRConfig();
+    return useSWRMutation('update-cart-item', (_, { arg }) => adapterShopify.updateCartLineOperation(shop$1)(arg), {
+        ...options,
+        onSuccess: (result, key, config) => {
+            mutate('cart', result, false);
+            options?.onSuccess?.(result, key, config);
+        },
+    });
+};
+
+exports.useUpdateCartItem = useUpdateCartItem;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var useSWR = require('swr');
+var getCollection = require('../../helpers/queries/get-collection.js');
+var shop = require('../shop.js');
+var useFetchHandle = require('../useFetchHandle.js');
+
+const useCollectionQuery = (args, options) => {
+    const fetcher = useFetchHandle.useFetchHandle();
+    const isSample = shop.useIsSampleProduct();
+    return useSWR(['query/collection', { ...args, isSample }], ([, arg]) => {
+        return getCollection.getCollection(fetcher, arg);
+    }, options);
+};
+
+exports.useCollectionQuery = useCollectionQuery;

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var useSWR = require('swr');
+var getProducts = require('../../helpers/queries/get-products.js');
+var shop = require('../shop.js');
+var useFetchHandle = require('../useFetchHandle.js');
+
+const useProductsQuery = (ids, options) => {
+    const fetcher = useFetchHandle.useFetchHandle();
+    const isSample = shop.useIsSampleProduct();
+    return useSWR(['query/products', { ids, isSample }], async ([, arg]) => {
+        return getProducts.getProducts(fetcher, arg);
+    }, options);
+};
+
+exports.useProductsQuery = useProductsQuery;

package/dist/cjs/hooks/shop.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var react = require('react');
+var useSWR = require('swr');
+var ShopContext = require('../contexts/ShopContext.js');
+
+const useLocale = () => {
+    const locale = ShopContext.useShopStore((state) => state.locale);
+    const changeLocale = ShopContext.useShopStore((state) => state.changeLocale);
+    return react.useMemo(() => ({ locale, changeLocale }), [locale, changeLocale]);
+};
+const useCurrency = () => {
+    const currency = ShopContext.useShopStore((state) => state.currency);
+    const changeCurrency = ShopContext.useShopStore((state) => state.changeCurrency);
+    return react.useMemo(() => ({ currency, changeCurrency }), [currency, changeCurrency]);
+};
+const useSwatches = () => {
+    const swatches = ShopContext.useShopStore((state) => state.swatches);
+    const changeSwatches = ShopContext.useShopStore((state) => state.changeSwatches);
+    return react.useMemo(() => ({ swatches, changeSwatches }), [swatches, changeSwatches]);
+};
+const usePageType = () => {
+    const pageType = ShopContext.useShopStore((state) => state.pageType);
+    return react.useMemo(() => pageType || 'STATIC', [pageType]);
+};
+const useStoreFront = () => {
+    const provider = ShopContext.useShopStore((state) => state.provider);
+    const storefrontToken = ShopContext.useShopStore((state) => state.storefrontToken);
+    const storefrontUrl = ShopContext.useShopStore((state) => state.storefrontUrl);
+    return {
+        provider,
+        storefrontToken,
+        storefrontUrl,
+    };
+};
+const usePluginEnable = () => {
+    return ShopContext.useShopStore((state) => state.plugins);
+};
+const useEditorMode = () => {
+    return ShopContext.useShopStore((state) => state.mode);
+};
+const useMobileOnly = () => {
+    return ShopContext.useShopStore((state) => state.mobileOnly);
+};
+const useMatchMutate = () => {
+    const { cache, mutate } = useSWR.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;
+}
+
+exports.useConnectedShopify = useConnectedShopify;
+exports.useCurrency = useCurrency;
+exports.useEditorMode = useEditorMode;
+exports.useIsSampleProduct = useIsSampleProduct;
+exports.useLocale = useLocale;
+exports.useMatchMutate = useMatchMutate;
+exports.useMobileOnly = useMobileOnly;
+exports.usePageType = usePageType;
+exports.usePluginEnable = usePluginEnable;
+exports.useStoreFront = useStoreFront;
+exports.useSwatches = useSwatches;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var react = require('react');
+
+function subscribe(callback) {
+    window.addEventListener('resize', callback);
+    return () => window.removeEventListener('resize', callback);
+}
+const useCurrentDevice = () => {
+    return react.useSyncExternalStore(subscribe, () => {
+        if (window.innerWidth < 768) {
+            return 'mobile';
+        }
+        else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
+            return 'tablet';
+        }
+        else {
+            return 'desktop';
+        }
+    }, () => 'desktop');
+};
+
+exports.useCurrentDevice = useCurrentDevice;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('react');
+var LazyLoad = require('vanilla-lazyload');
+
+const useLazyVideo = () => {
+    react.useEffect(() => {
+        const lazyLoadInstance = new LazyLoad({
+            use_native: true,
+        });
+        lazyLoadInstance.update();
+    }, []);
+};
+
+exports.useLazyVideo = useLazyVideo;

package/dist/cjs/hooks/useCartId.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const cartKey = 'cart-id';
+const getCartId = () => {
+    return window.localStorage.getItem(cartKey);
+};
+const writeCartId = (value) => {
+    if (value) {
+        window.localStorage.setItem(cartKey, value);
+    }
+};
+const removeCartId = () => {
+    window.localStorage.removeItem(cartKey);
+};
+const subscribeStorage = (callback) => {
+    window.addEventListener('storage', callback);
+    return () => {
+        window.removeEventListener('storage', callback);
+    };
+};
+const useCartId = () => {
+    const cartId = react.useSyncExternalStore(subscribeStorage, getCartId, () => undefined);
+    const updateCartId = react.useCallback((val) => {
+        writeCartId(val);
+    }, []);
+    const clearCartId = react.useCallback(() => {
+        removeCartId();
+    }, []);
+    return react.useMemo(() => ({ cartId, updateCartId, clearCartId }), [cartId, clearCartId, updateCartId]);
+};
+
+exports.default = useCartId;

package/dist/cjs/hooks/useCartLine.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CartLineContext = require('../contexts/CartLineContext.js');
+
+const useCartLine = () => {
+    return CartLineContext.useCartLineStore((s) => s.line);
+};
+
+exports.default = useCartLine;

package/dist/cjs/hooks/useCartUI.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var create = require('zustand');
+var shop = require('./shop.js');
+
+const useStore = create((set) => ({
+    isCartOpen: false,
+    setOpen: (isCartOpen) => {
+        const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+        const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+        if (isCartOpen) {
+            document.body.style.overflow = `hidden`;
+            document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+        }
+        else {
+            document.body.style.overflow = '';
+            document.body.style.paddingRight = '';
+        }
+        set({ isCartOpen });
+    },
+}));
+function useCartUI() {
+    const plugins = shop.usePluginEnable();
+    const isCartOpen = useStore((s) => s.isCartOpen);
+    const setOpen = useStore((s) => s.setOpen);
+    const openCart = react.useCallback(() => {
+        if (plugins?.includes('cart-drawer')) {
+            setOpen(true);
+        }
+    }, [plugins, setOpen]);
+    const closeCart = react.useCallback(() => setOpen(false), [setOpen]);
+    return {
+        isCartOpen,
+        openCart,
+        closeCart,
+    };
+}
+
+exports.default = useCartUI;

package/dist/cjs/hooks/useCollection.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var CollectionContext = require('../contexts/CollectionContext.js');
+
+const useCollection = () => {
+    return CollectionContext.useCollectionStore((s) => s.collection);
+};
+
+exports.useCollection = useCollection;

package/dist/cjs/hooks/useFetchHandle.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var useSWR = require('swr');
+
+const useFetchHandle = () => {
+    const { fetcher } = useSWR.useSWRConfig();
+    if (!fetcher) {
+        throw new Error('Application must be init within a fetcher');
+    }
+    return fetcher;
+};
+
+exports.useFetchHandle = useFetchHandle;

package/dist/cjs/hooks/useFormatMoney.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var shop = require('./shop.js');
+
+const useFormatMoney = () => {
+    const { locale } = shop.useLocale();
+    const formatMoney = react.useCallback((value, options) => new Intl.NumberFormat(locale, {
+        style: 'currency',
+        ...options,
+    }).format(value), [locale]);
+    return { formatMoney };
+};
+
+exports.default = useFormatMoney;

package/dist/cjs/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+// const isBrowser = typeof window !== 'undefined';
+const useIsomorphicLayoutEffect = react.useLayoutEffect;
+
+exports.default = useIsomorphicLayoutEffect;

package/dist/cjs/hooks/useLoadScript.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var loadScript = require('../helpers/load-script.js');
+
+/**
+ * The `useLoadScript` hook loads an external script tag on the client-side.
+ */
+function useLoadScript(url, options) {
+    const [status, setStatus] = react.useState('loading');
+    const stringifiedOptions = JSON.stringify(options);
+    react.useEffect(() => {
+        async function loadScriptWrapper() {
+            try {
+                setStatus('loading');
+                await loadScript.loadScript(url, options);
+                setStatus('done');
+            }
+            catch (error) {
+                setStatus('error');
+            }
+        }
+        loadScriptWrapper();
+    }, [url, stringifiedOptions, options]);
+    return status;
+}
+
+exports.default = useLoadScript;

package/dist/cjs/hooks/useMoney.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var shop = require('./shop.js');
+
+const NARROW_SYMBOL_MAP = {
+    USD: '$',
+    AUD: '$',
+    CAD: '$',
+    NZD: '$',
+    EUR: '€',
+    GBP: '£',
+    INR: '₹',
+    RUB: '₽',
+    CNY: '¥',
+    JPY: '¥',
+    BRL: 'R$',
+};
+const useMoney = (money) => {
+    const { locale } = shop.useLocale();
+    const { currency } = shop.useCurrency();
+    const options = react.useMemo(() => ({ style: 'currency', currency: currency }), [currency]);
+    const value = react.useMemo(() => new Intl.NumberFormat(locale, options).format(money), [locale, options, money]);
+    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
+    const nameParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'name',
+    }).formatToParts(money);
+    const narrowParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'narrowSymbol',
+    }).formatToParts(money);
+    const moneyValue = react.useMemo(() => ({
+        currencyCode: currency,
+        currencyName: nameParts.find((part) => part.type === 'currency')?.value ?? // e.g. "US dollars"
+            currency,
+        currencyNarrowSymbol: narrowParts.find((part) => part.type === 'currency')?.value ?? // e.g. "$"
+            (currency ? NARROW_SYMBOL_MAP[currency] : '') ??
+            '',
+        parts: baseParts,
+        localizedString: value,
+        amount: baseParts
+            .filter((part) => ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(part.type))
+            .map((part) => part.value)
+            .join(''),
+    }), [baseParts, nameParts, narrowParts, value, currency]);
+    return moneyValue;
+};
+
+exports.default = useMoney;