@gem-sdk/core 1.0.0

package/dist/esm/hooks/useCartId.js

@@ -0,0 +1,32 @@
+import { useSyncExternalStore, useCallback, useMemo } from '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 = useSyncExternalStore(subscribeStorage, getCartId, () => undefined);
+    const updateCartId = useCallback((val) => {
+        writeCartId(val);
+    }, []);
+    const clearCartId = useCallback(() => {
+        removeCartId();
+    }, []);
+    return useMemo(() => ({ cartId, updateCartId, clearCartId }), [cartId, clearCartId, updateCartId]);
+};
+
+export { useCartId as default };

package/dist/esm/hooks/useCartLine.js

@@ -0,0 +1,7 @@
+import { useCartLineStore } from '../contexts/CartLineContext.js';
+
+const useCartLine = () => {
+    return useCartLineStore((s) => s.line);
+};
+
+export { useCartLine as default };

package/dist/esm/hooks/useCartUI.js

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import create from 'zustand';
+import { usePluginEnable } from './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 = usePluginEnable();
+    const isCartOpen = useStore((s) => s.isCartOpen);
+    const setOpen = useStore((s) => s.setOpen);
+    const openCart = useCallback(() => {
+        if (plugins?.includes('cart-drawer')) {
+            setOpen(true);
+        }
+    }, [plugins, setOpen]);
+    const closeCart = useCallback(() => setOpen(false), [setOpen]);
+    return {
+        isCartOpen,
+        openCart,
+        closeCart,
+    };
+}
+
+export { useCartUI as default };

package/dist/esm/hooks/useCollection.js

@@ -0,0 +1,7 @@
+import { useCollectionStore } from '../contexts/CollectionContext.js';
+
+const useCollection = () => {
+    return useCollectionStore((s) => s.collection);
+};
+
+export { useCollection };

package/dist/esm/hooks/useFetchHandle.js

@@ -0,0 +1,11 @@
+import { useSWRConfig } from 'swr';
+
+const useFetchHandle = () => {
+    const { fetcher } = useSWRConfig();
+    if (!fetcher) {
+        throw new Error('Application must be init within a fetcher');
+    }
+    return fetcher;
+};
+
+export { useFetchHandle };

package/dist/esm/hooks/useFormatMoney.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useLocale } from './shop.js';
+
+const useFormatMoney = () => {
+    const { locale } = useLocale();
+    const formatMoney = useCallback((value, options) => new Intl.NumberFormat(locale, {
+        style: 'currency',
+        ...options,
+    }).format(value), [locale]);
+    return { formatMoney };
+};
+
+export { useFormatMoney as default };

package/dist/esm/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect } from 'react';
+
+// const isBrowser = typeof window !== 'undefined';
+const useIsomorphicLayoutEffect = useLayoutEffect;
+
+export { useIsomorphicLayoutEffect as default };

package/dist/esm/hooks/useLoadScript.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+import { loadScript } from '../helpers/load-script.js';
+
+/**
+ * The `useLoadScript` hook loads an external script tag on the client-side.
+ */
+function useLoadScript(url, options) {
+    const [status, setStatus] = useState('loading');
+    const stringifiedOptions = JSON.stringify(options);
+    useEffect(() => {
+        async function loadScriptWrapper() {
+            try {
+                setStatus('loading');
+                await loadScript(url, options);
+                setStatus('done');
+            }
+            catch (error) {
+                setStatus('error');
+            }
+        }
+        loadScriptWrapper();
+    }, [url, stringifiedOptions, options]);
+    return status;
+}
+
+export { useLoadScript as default };

package/dist/esm/hooks/useMoney.js

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useLocale, useCurrency } from './shop.js';
+
+const NARROW_SYMBOL_MAP = {
+    USD: '$',
+    AUD: '$',
+    CAD: '$',
+    NZD: '$',
+    EUR: '€',
+    GBP: '£',
+    INR: '₹',
+    RUB: '₽',
+    CNY: '¥',
+    JPY: '¥',
+    BRL: 'R$',
+};
+const useMoney = (money) => {
+    const { locale } = useLocale();
+    const { currency } = useCurrency();
+    const options = useMemo(() => ({ style: 'currency', currency: currency }), [currency]);
+    const value = 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 = 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;
+};
+
+export { useMoney as default };

package/dist/esm/hooks/usePrevious.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect } from 'react';
+
+const usePrevious = (value) => {
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    const ref = useRef();
+    // Store current value in ref
+    useEffect(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
+};
+
+export { usePrevious };

package/dist/esm/hooks/useProduct.js

@@ -0,0 +1,78 @@
+import { useCallback, useMemo } from 'react';
+import { useProductStore } from '../contexts/ProductContext.js';
+import { flattenConnection } from '../helpers/flatten-connection.js';
+import 'swr';
+import { getSelectedVariant } from '../helpers/product.js';
+
+const useUniqProductID = () => {
+    return useProductStore((s) => s.uiqueId);
+};
+const useProduct = () => {
+    return useProductStore((s) => s.product);
+};
+const useFeaturedImageGlobal = () => {
+    return useProductStore((s) => s.featuredImageGlobal);
+};
+const useProductProperties = () => {
+    return useProductStore((s) => s.properties);
+};
+const useQuantity = () => {
+    const quantity = useProductStore((s) => s.quantity);
+    const decrement = useProductStore((s) => s.decrementQuantity);
+    const increment = useProductStore((s) => s.incrementQuantity);
+    const updateQuantity = useProductStore((s) => s.setQuantity);
+    const reset = useCallback(() => {
+        updateQuantity(1);
+    }, [updateQuantity]);
+    return useMemo(() => ({ quantity, increment, decrement, reset, setQuantity: updateQuantity }), [decrement, increment, quantity, reset, updateQuantity]);
+};
+const useSelectedOption = () => {
+    const setSelectedOption = useProductStore((s) => s.setSelectedOption);
+    const selectedOptions = useProductStore((s) => s.selectedOptions);
+    const forceSelectedOption = useProductStore((s) => s.forceSelectedOption);
+    const updateOption = useCallback((optionId, optionValue) => {
+        setSelectedOption(optionId, optionValue);
+    }, [setSelectedOption]);
+    return useMemo(() => ({
+        selectedOptions,
+        setSelectedOption: updateOption,
+        forceSelectedOption,
+    }), [selectedOptions, updateOption, forceSelectedOption]);
+};
+const useVariants = () => {
+    const variants = useProductStore((s) => s.product?.variants);
+    return flattenConnection(variants);
+};
+const useVariant = (id) => {
+    const variants = useVariants();
+    return useMemo(() => variants?.find((v) => v?.id === id), [id, variants]);
+};
+const useCurrentVariant = () => {
+    const { selectedOptions } = useSelectedOption();
+    const variants = useVariants();
+    return useMemo(() => getSelectedVariant(variants, selectedOptions), [selectedOptions, variants]);
+};
+function checkInStock(variant) {
+    if (!variant)
+        return false;
+    return ((variant?.inventoryQuantity && variant.inventoryQuantity > 0) ||
+        !variant?.manageInventory ||
+        variant.inventoryPolicy === 'continue');
+}
+const useCurrentVariantInStock = () => {
+    const currentVariant = useCurrentVariant();
+    const isInStock = checkInStock(currentVariant);
+    return isInStock;
+};
+const useVariantOutStock = (optionId, optionValue) => {
+    const { selectedOptions } = useSelectedOption();
+    const variants = useVariants();
+    const matchedVariant = getSelectedVariant(variants, {
+        ...selectedOptions,
+        [optionId]: optionValue,
+    });
+    const isInStock = checkInStock(matchedVariant);
+    return !isInStock;
+};
+
+export { useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useProduct, useProductProperties, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants };

package/dist/esm/hooks/useProductList.js

@@ -0,0 +1,16 @@
+import { useProductListStore } from '../contexts/ProductListContext.js';
+
+const useProductList = () => {
+    return useProductListStore((s) => s.collection);
+};
+const useProductListProducts = () => {
+    return useProductListStore((s) => s.products);
+};
+const useProductListSettings = () => {
+    return useProductListStore((s) => s.settings);
+};
+const useProductListStyles = () => {
+    return useProductListStore((s) => s.styles);
+};
+
+export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles };

package/dist/esm/hooks/useSuspenseFetch.js

@@ -0,0 +1,20 @@
+const cache = new Map();
+const useSuspenseFetch = (key, promise) => {
+    const value = cache.get(key) || { status: 'new', data: null };
+    if (value.status === 'resolved') {
+        return { data: value.data };
+    }
+    promise()
+        .then((data) => {
+        value.status = 'resolved';
+        value.data = data;
+        cache.set(key, value);
+    })
+        .catch(() => {
+        value.status = 'error';
+        value.data = null;
+    });
+    throw promise();
+};
+
+export { useSuspenseFetch as default };

package/dist/esm/hooks/useSwatchesOptions.js

@@ -0,0 +1,35 @@
+import { useSwatches } from './shop.js';
+
+const initialSwatchOptionValue = {
+    label: '',
+    colors: [],
+    imageUrl: '',
+};
+const initialGlobalSwatchesData = {
+    optionTitle: '',
+    optionType: '',
+    optionValues: [],
+};
+const useSwatchesOptions = (options) => {
+    const { swatches } = useSwatches();
+    if (!options)
+        return [];
+    return options?.map((option) => {
+        const swatchOption = swatches?.find((sw) => sw?.optionTitle === option?.name) || { ...initialGlobalSwatchesData };
+        return {
+            ...option,
+            optionType: swatchOption ? swatchOption.optionType : '',
+            values: option.values?.map((val) => {
+                const swatchValue = (swatchOption &&
+                    swatchOption?.optionValues?.find((swatOp) => swatOp?.label === val?.label)) || { ...initialSwatchOptionValue };
+                return {
+                    ...val,
+                    colors: swatchValue?.colors || [],
+                    imageUrl: swatchValue?.imageUrl || '',
+                };
+            }),
+        };
+    });
+};
+
+export { useSwatchesOptions as default };

package/dist/esm/index.js

@@ -0,0 +1,82 @@
+export { default as AddOn } from './components/AddOn.js';
+export { default as Render } from './components/Render.js';
+export { default as RenderPreview } from './components/RenderPreview.js';
+export { AddonProvider, useAddon, useAddons } from './contexts/AddonContext.js';
+export { BuilderComponentProvider, useBuilderComponent } from './contexts/BuilderComponent.js';
+export { BuilderProvider, useBuilderStore } from './contexts/BuilderContext.js';
+export { BuilderPreviewProvider, useBuilderPreviewStore } from './contexts/BuilderPreviewContext.js';
+export { CartLineProvider, useCartLineStore } from './contexts/CartLineContext.js';
+export { ProductListProvider, useProductListStore } from './contexts/ProductListContext.js';
+export { ProductProvider, useProductStore } from './contexts/ProductContext.js';
+export { SectionProvider, useSection, useSectionStore } from './contexts/SectionContext.js';
+export { ShopProvider, useShopStore } from './contexts/ShopContext.js';
+export { CollectionProvider, useCollectionStore } from './contexts/CollectionContext.js';
+export { CollectionDetailFilterDocument } from './graphql/queries/collection-detail-filter.generated.js';
+export { CollectionDocument } from './graphql/queries/collection.generated.js';
+export { PublishedThemePagesDocument } from './graphql/queries/published-theme-pages.generated.js';
+export { ProductsDocument } from './graphql/queries/products.generated.js';
+export { StorePropertyDocument } from './graphql/queries/storeProperty.generated.js';
+export { PreviewPageDocument } from './graphql/queries/preview-page.generated.js';
+export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor } from './helpers/borders.js';
+export { cls } from './helpers/cls.js';
+export { flattenConnection } from './helpers/flatten-connection.js';
+export { getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen } from './helpers/get-resonsive-value.js';
+export { getShortName } from './helpers/get-shortname.js';
+export { default as globalEvent } from './helpers/GlobalEvent.js';
+export { default as isBrowser } from './helpers/is-browser.js';
+export { isEmptyChildren } from './helpers/is-empty-children.js';
+export { makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth } from './helpers/make-style.js';
+export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
+export { prefetchQueries } from './helpers/prefetch-queries.js';
+export { getStyleShadow, getStyleShadowState } from './helpers/shadow.js';
+export { composeSize } from './helpers/size.js';
+export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
+export { loadScript } from './helpers/load-script.js';
+export { validateEmail } from './helpers/email.js';
+export { optionLayoutStyle } from './helpers/layout.js';
+export { getStyleBackgroundByDevice } from './helpers/background.js';
+export { genVariable } from './helpers/css-variable.js';
+export { isDefined } from './helpers/is-defined.js';
+export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
+export { genTypoClass } from './helpers/typography.js';
+export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
+export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
+import * as fpixel from './helpers/fpixel.js';
+export { fpixel };
+import * as gtag from './helpers/gtag.js';
+export { gtag };
+import * as tiktokpixel from './helpers/tiktokpixel.js';
+export { tiktokpixel };
+export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
+export { useCartData } from './hooks/cart/use-cart-data.js';
+export { useCartDiscountCodesUpdate } from './hooks/cart/use-cart-discount-codes-update.js';
+export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
+export { useCreateCart } from './hooks/cart/use-create-cart.js';
+export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
+export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
+export { useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront } from './hooks/shop.js';
+export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
+export { useProductQuery } from './hooks/shop/use-product-query.js';
+export { useProductsQuery } from './hooks/shop/use-products-query.js';
+export { useCurrentDevice } from './hooks/use-current-device.js';
+export { useLazyVideo } from './hooks/use-lazy-video.js';
+export { default as useCartId } from './hooks/useCartId.js';
+export { default as useCartLine } from './hooks/useCartLine.js';
+export { default as useCartUI } from './hooks/useCartUI.js';
+export { useCollection } from './hooks/useCollection.js';
+export { default as useFormatMoney } from './hooks/useFormatMoney.js';
+export { useId } from 'react';
+export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
+export { default as useLoadScript } from './hooks/useLoadScript.js';
+export { default as useMoney } from './hooks/useMoney.js';
+export { usePrevious } from './hooks/usePrevious.js';
+export { useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useProduct, useProductProperties, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants } from './hooks/useProduct.js';
+export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles } from './hooks/useProductList.js';
+export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
+export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
+import * as shop from './types/shop.js';
+export { shop as ShopType };
+export { OptionNormalStyle, OptionSpecialStyle } from './types/global-style.js';
+export { calculateFirstProduct, getCollection } from './helpers/queries/get-collection.js';
+export { fetchMedias, fetchVariants, getProduct } from './helpers/queries/get-product.js';
+export { getProductBySlug } from './helpers/queries/get-product-by-slug.js';

package/dist/esm/types/global-style.js

@@ -0,0 +1,4 @@
+const OptionNormalStyle = ['radio_buttons', 'dropdown'];
+const OptionSpecialStyle = ['color', 'image', 'rectangle_list'];
+
+export { OptionNormalStyle, OptionSpecialStyle };

package/dist/esm/types/shop.js

@@ -0,0 +1 @@
+