@gem-sdk/core 1.0.0

package/dist/esm/contexts/BuilderComponent.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStore, createStore } from 'zustand';
+import { createContext, useContext } from 'react';
+import Empty from '../components/Empty.js';
+
+const BuilderComponentContext = createContext(null);
+const createBuilderComponentStore = (components) => createStore((_, get) => ({
+    components,
+    getItem: (id) => {
+        return get().components[id];
+    },
+}));
+const BuilderComponentProvider = ({ children, components, ...passProps }) => {
+    return (jsx(BuilderComponentContext.Provider, { ...passProps, value: createBuilderComponentStore(components), children: children }));
+};
+// export const useBuilderComponent = (id?: string) => {
+//   return useStore((s) => (id ? s.getItem(id) ?? Empty : Empty));
+// };
+const useBuilderComponent = (id) => {
+    const store = useContext(BuilderComponentContext);
+    if (!store) {
+        throw new Error('useBuilderComponent must be used within a BuilderComponentProvider');
+    }
+    return useStore(store, (s) => (id ? s.getItem(id) ?? Empty : Empty));
+};
+
+export { BuilderComponentProvider, useBuilderComponent };

package/dist/esm/contexts/BuilderContext.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, Suspense, Fragment } from 'react';
+import { useStore, createStore } from 'zustand';
+
+const BuilderContext = createContext(null);
+const createBuilderProvider = (data) => createStore((_, get) => ({
+    state: data,
+    getItem: (id) => {
+        return get().state[id];
+    },
+}));
+const BuilderProvider = ({ children, state, lazy, priority, ...passProps }) => {
+    const Component = lazy ? Suspense : Fragment;
+    const store = createBuilderProvider(state);
+    return (jsx(Component, { children: jsx(BuilderContext.Provider, { ...passProps, value: store, children: children }) }));
+};
+// export const useBuilderStore = useStore;
+const useBuilderStore = (selector, equalityFn) => {
+    const store = useContext(BuilderContext);
+    if (!store) {
+        throw new Error('useBuilderStore must be used within a BuilderProvider');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { BuilderProvider, useBuilderStore };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -0,0 +1,350 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, Suspense, Fragment } from 'react';
+import { useStore, createStore } from 'zustand';
+import { cloneDeep } from '../helpers/clone-deep.js';
+import { normalizeBuilderData } from '../helpers/normalize-builder-data.js';
+
+function moveByIndex(input, from, to) {
+    const elm = input.splice(from, 1)[0];
+    if (elm !== undefined) {
+        input.splice(to, 0, elm);
+    }
+}
+function removeByKey(id, data) {
+    const item = data[id];
+    if (item) {
+        delete data[id];
+        if (item.type !== 'section') {
+            item.childrens?.map((child) => removeByKey(child, data));
+        }
+    }
+}
+const BuilderPreviewContext = createContext(null);
+const root = {
+    uid: 'ROOT',
+    tag: 'Root',
+    label: 'Root',
+    childrens: [],
+};
+const createBuilderPreviewProvider = (args) => createStore((set, get) => ({
+    state: args,
+    addItem: (args) => {
+        const { position, data } = args;
+        const state = get().state;
+        const dateModified = Date.now();
+        if (args.type === 'section') {
+            if (!Array.isArray(data)) {
+                const sectionId = data.uid;
+                // Section only add to ROOT
+                const ROOT = state.ROOT;
+                if (!ROOT.childrens) {
+                    ROOT.childrens = [sectionId];
+                }
+                else {
+                    ROOT.childrens.splice(position ?? 0, 0, sectionId);
+                }
+                ROOT.dateModified = dateModified;
+                set({
+                    state: {
+                        ...state,
+                        [sectionId]: {
+                            uid: sectionId,
+                            type: 'section',
+                            label: data.label,
+                        },
+                        ROOT: cloneDeep(ROOT),
+                    },
+                });
+            }
+        }
+        else {
+            const { id, data } = args;
+            const parent = id ? state[id] ?? state.ROOT : state.ROOT;
+            // Can't add item to section
+            if (parent.type === 'section')
+                return;
+            if (Array.isArray(data)) {
+                const childrens = data.map((v) => v.uid);
+                const newState = data.reduceRight((prev, current) => {
+                    const item = normalizeBuilderData(current);
+                    return {
+                        ...prev,
+                        ...item,
+                    };
+                }, {});
+                parent.dateModified = dateModified;
+                parent.childrens = parent.childrens ?? [];
+                parent.childrens.splice(position ?? 0, 0, ...childrens);
+                set({
+                    state: {
+                        ...state,
+                        ...newState,
+                        [parent.uid]: cloneDeep(parent),
+                    },
+                });
+            }
+            else {
+                const item = normalizeBuilderData(data);
+                parent.dateModified = dateModified;
+                parent.childrens = parent.childrens ?? [];
+                parent.childrens.splice(position ?? 0, 0, data.uid);
+                set({
+                    state: {
+                        ...state,
+                        ...item,
+                        [parent.uid]: cloneDeep(parent),
+                    },
+                });
+            }
+        }
+    },
+    changeItemProp: (id, data, group) => {
+        if (!group || !['setting', 'style', 'advanced'].includes(group))
+            return;
+        const state = get().state;
+        const item = state[id];
+        // Ignore section
+        if (item?.type === 'section')
+            return;
+        if (item) {
+            const dateModified = Date.now();
+            item.dateModified = dateModified;
+            switch (group) {
+                case 'setting':
+                    set({
+                        state: {
+                            ...state,
+                            [id]: {
+                                ...item,
+                                settings: {
+                                    ...item.settings,
+                                    ...data,
+                                },
+                            },
+                        },
+                    });
+                    break;
+                case 'style':
+                    set({
+                        state: {
+                            ...state,
+                            [id]: {
+                                ...item,
+                                styles: {
+                                    ...item.styles,
+                                    ...data,
+                                },
+                            },
+                        },
+                    });
+                    break;
+                case 'advanced':
+                    set({
+                        state: {
+                            ...state,
+                            [id]: {
+                                ...item,
+                                advanced: {
+                                    ...item.advanced,
+                                    ...data,
+                                },
+                            },
+                        },
+                    });
+                    break;
+            }
+        }
+    },
+    changeItemPropByKey: ({ id, key, data, group }) => {
+        if (!group || !['setting', 'style', 'advanced'].includes(group))
+            return;
+        const state = get().state;
+        const item = state[id];
+        // Ignore section
+        if (item?.type === 'section')
+            return;
+        if (item) {
+            const itemSetting = {
+                style: item.styles ?? {},
+                advanced: item.advanced ?? {},
+                setting: item.settings ?? {},
+            };
+            if (data === undefined) {
+                console.warn('Data is undefined');
+                delete itemSetting[group][key];
+            }
+            else {
+                itemSetting[group][key] = data;
+            }
+            set({
+                state: {
+                    ...state,
+                    [id]: {
+                        ...item,
+                        settings: { ...itemSetting.setting },
+                        styles: { ...itemSetting.style },
+                        advanced: { ...itemSetting.advanced },
+                    },
+                },
+            });
+        }
+    },
+    getItem: (id) => {
+        return get().state[id];
+    },
+    removeItem: (id) => {
+        if (id === 'ROOT') {
+            set({
+                state: {
+                    ROOT: root,
+                },
+            });
+        }
+        else {
+            const state = get().state;
+            removeByKey(id, state);
+            // Get parent node by id
+            const parent = Object.entries(state).find(([, value]) => value.type !== 'section' && value.childrens?.includes(id));
+            if (parent) {
+                const dateModified = Date.now();
+                const [parentId, parentValue] = parent;
+                if (parentValue.type === 'section')
+                    return;
+                parentValue.childrens = parentValue.childrens?.filter((child) => child !== id);
+                parentValue.dateModified = dateModified;
+                set({
+                    state: {
+                        ...state,
+                        [parentId]: cloneDeep(parentValue),
+                    },
+                });
+            }
+        }
+    },
+    moveItem: (id, toId, position) => {
+        const state = get().state;
+        const item = state[id];
+        const moveTo = state[toId];
+        // Ignore section
+        if (!item || !moveTo || moveTo.type === 'section')
+            return;
+        if (item.type === 'section') {
+            // Section only add to ROOT
+            const ROOT = state.ROOT;
+            if (!ROOT.childrens)
+                return;
+            const currentIndex = ROOT.childrens.findIndex((uid) => uid === id);
+            moveByIndex(ROOT.childrens, currentIndex, position ?? 0);
+            set({
+                state: {
+                    ...state,
+                    ROOT: cloneDeep(ROOT),
+                },
+            });
+        }
+        else {
+            const parent = Object.entries(state).find(([, value]) => value.type !== 'section' && value.childrens?.includes(id));
+            if (item && parent) {
+                const dateModified = Date.now();
+                const [, parentItem] = parent;
+                // Ignore section
+                if (parentItem.type === 'section')
+                    return;
+                parentItem.dateModified = dateModified;
+                if (toId === parentItem.uid && parentItem.childrens) {
+                    // Move item to the same parent
+                    const currentIndex = parentItem.childrens.findIndex((uid) => uid === id);
+                    if (parentItem.childrens && currentIndex !== position) {
+                        moveByIndex(parentItem.childrens, currentIndex, position ?? 0);
+                        set({
+                            state: {
+                                ...state,
+                                [parentItem.uid]: cloneDeep(parentItem),
+                            },
+                        });
+                    }
+                }
+                else {
+                    // Move item to another parent
+                    // Remove item from parent node
+                    parentItem.childrens = parentItem.childrens?.filter((uid) => uid !== id);
+                    if (moveTo) {
+                        moveTo.dateModified = dateModified;
+                        moveTo.childrens = moveTo.childrens ?? [];
+                        moveTo.childrens.splice(position ?? 0, 0, item.uid);
+                        set({
+                            state: {
+                                ...state,
+                                [moveTo.uid]: cloneDeep(moveTo),
+                                [parentItem.uid]: cloneDeep(parentItem),
+                            },
+                        });
+                    }
+                }
+            }
+        }
+    },
+    forceChangeState: (data) => {
+        set({ state: data });
+    },
+    initState: (data) => {
+        if (Array.isArray(data)) {
+            const childrens = data.map((v) => v.uid);
+            const newState = data.reduceRight((prev, current) => {
+                const item = normalizeBuilderData(current);
+                return {
+                    ...prev,
+                    ...item,
+                };
+            }, {});
+            set({
+                state: {
+                    ROOT: {
+                        ...root,
+                        childrens,
+                    },
+                    ...newState,
+                },
+            });
+        }
+        else {
+            const newState = normalizeBuilderData(data);
+            set({
+                state: {
+                    ROOT: {
+                        ...root,
+                        childrens: [data.uid],
+                    },
+                    ...newState,
+                },
+            });
+        }
+    },
+    addSection: (data, position) => {
+        const state = get().state;
+        const ROOT = state.ROOT;
+        if (!ROOT.childrens)
+            ROOT.childrens = [];
+        ROOT.childrens.splice(position ?? 0, 0, data.uid);
+        set({
+            state: {
+                ...state,
+                ROOT: cloneDeep(ROOT),
+            },
+        });
+    },
+}));
+const BuilderPreviewProvider = ({ children, state, lazy, ...passProps }) => {
+    const Component = lazy ? Suspense : Fragment;
+    return (jsx(Component, { children: jsx(BuilderPreviewContext.Provider, { ...passProps, value: createBuilderPreviewProvider(state), children: children }) }));
+};
+// export const useBuilderPreviewStore = useStore;
+const useBuilderPreviewStore = (selector, equalityFn) => {
+    const store = useContext(BuilderPreviewContext);
+    if (!store) {
+        throw new Error('useBuilderPreviewStore must be used within a BuilderPreviewProvider');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { BuilderPreviewProvider, useBuilderPreviewStore };

package/dist/esm/contexts/CartLineContext.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStore, createStore } from 'zustand';
+import { createContext, useContext } from 'react';
+
+const CartLineContext = createContext(null);
+const createCartLineStore = (data) => createStore(() => ({
+    ...data,
+}));
+const CartLineProvider = ({ children, line }) => {
+    return (jsx(CartLineContext.Provider, { value: createCartLineStore({ line }), children: children }, `${line.id}-${line.quantity}`));
+};
+// export const useCartLineStore = useStore;
+const useCartLineStore = (selector, equalityFn) => {
+    const store = useContext(CartLineContext);
+    if (!store) {
+        throw new Error('useCartLineStore must be used within a CartLineProvider');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { CartLineProvider, useCartLineStore };

package/dist/esm/contexts/CollectionContext.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { useStore, createStore } from 'zustand';
+
+const CollectionListContext = createContext(null);
+const createCollectionProvider = (data) => createStore(() => ({
+    ...data,
+}));
+const CollectionProvider = ({ children, collection, products, settings, styles, }) => {
+    return (jsx(CollectionListContext.Provider, { value: createCollectionProvider({ products, collection, settings, styles }), children: children }, collection?.id));
+};
+const useCollectionStore = (selector, equalityFn) => {
+    const store = useContext(CollectionListContext);
+    if (!store) {
+        throw new Error('useCollectionStore must be used within a useCollectionStore');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { CollectionListContext, CollectionProvider, useCollectionStore };

package/dist/esm/contexts/ProductContext.js

@@ -0,0 +1,123 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useStore, createStore } from 'zustand';
+import { createContext, useId, useMemo, useContext } from 'react';
+import { flattenConnection } from '../helpers/flatten-connection.js';
+
+// const { Provider, useStore } = createContext<StoreApi<ProductContextProps>>();
+const ProductContext = createContext(null);
+const createProductStoreProvider = (data) => createStore((set, get) => ({
+    ...data,
+    updateProperty: (name, data) => {
+        set((state) => {
+            return {
+                properties: state.properties?.map((v) => {
+                    if (v.key === name) {
+                        return { ...v, ...data };
+                    }
+                    return v;
+                }),
+            };
+        });
+    },
+    addProperty: (data) => {
+        const properties = get().properties;
+        if (!properties?.some((v) => v.key === data.key)) {
+            set((state) => ({ properties: [...(state.properties ?? []), data] }));
+        }
+    },
+    removeProperty: (name) => {
+        set((state) => ({ properties: state.properties?.filter((v) => v.key !== name) }));
+    },
+    setQuantity: (num) => {
+        set({
+            quantity: num > 0 ? num : 1,
+        });
+    },
+    setProductFeaturedImage: (image) => {
+        set({
+            featuredImageGlobal: image,
+        });
+    },
+    incrementQuantity: () => {
+        set((state) => {
+            const quantity = state.quantity ?? 1;
+            return {
+                quantity: quantity + 1,
+            };
+        });
+    },
+    decrementQuantity: () => {
+        set((state) => {
+            const quantity = state.quantity ?? 1;
+            return {
+                quantity: quantity > 2 ? quantity - 1 : 1,
+            };
+        });
+    },
+    setSelectedOption: (optionId, optionValue) => {
+        set((state) => {
+            if (optionId && optionValue) {
+                return {
+                    selectedOptions: {
+                        ...state?.selectedOptions,
+                        [optionId]: optionValue,
+                    },
+                };
+            }
+            return state;
+        });
+    },
+    forceSelectedOption: (value) => {
+        set((state) => {
+            return {
+                selectedOptions: {
+                    ...state?.selectedOptions,
+                    ...value,
+                },
+            };
+        });
+    },
+    updateIsSubmit: (value) => {
+        set({
+            isSubmit: value,
+        });
+    },
+}));
+const ProductProvider = ({ children, product, initialVariantId, quantity = 1, }) => {
+    const uiqueId = useId();
+    const store = useMemo(() => {
+        let selectedOptions = {};
+        let featuredImageGlobal = undefined;
+        if (product) {
+            const variants = flattenConnection(product.variants);
+            const firstVariant = flattenConnection(product.variants)[0];
+            const initialVariant = variants.find((v) => v?.id === initialVariantId) ?? firstVariant;
+            selectedOptions = initialVariant?.selectedOptions.reduce((acc, option) => {
+                if (option.name) {
+                    return { ...acc, [option.name]: option.value };
+                }
+                return acc;
+            }, {});
+            featuredImageGlobal =
+                product.medias?.edges.find((v) => v.node?.id === initialVariant?.mediaId)?.node ??
+                    product.featuredImage;
+        }
+        return createProductStoreProvider({
+            product,
+            quantity,
+            selectedOptions,
+            uiqueId,
+            featuredImageGlobal,
+        });
+    }, [initialVariantId, product, quantity, uiqueId]);
+    return (jsx(ProductContext.Provider, { value: store, children: jsx(Fragment, { children: children }) }));
+};
+const useProductStore = (selector, equalityFn) => {
+    const store = useContext(ProductContext);
+    if (!store) {
+        throw new Error('Element of product must be used inside a Product');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { ProductProvider, useProductStore };

package/dist/esm/contexts/ProductListContext.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { useStore, createStore } from 'zustand';
+
+const ProductListContext = createContext(null);
+const createProductListProvider = (data) => createStore(() => ({
+    ...data,
+}));
+const ProductListProvider = ({ children, collection, products, settings, styles, }) => {
+    return (jsx(ProductListContext.Provider, { value: createProductListProvider({ products, collection, settings, styles }), children: children }));
+};
+const useProductListStore = (selector, equalityFn) => {
+    const store = useContext(ProductListContext);
+    if (!store) {
+        throw new Error('useProductListStore must be used within a useProductListStore');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { ProductListContext, ProductListProvider, useProductListStore };

package/dist/esm/contexts/SectionContext.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStore, createStore } from 'zustand';
+import { createContext, useContext } from 'react';
+import { cloneDeep } from '../helpers/clone-deep.js';
+import { normalizeBuilderData } from '../helpers/normalize-builder-data.js';
+
+const SectionContext = createContext(null);
+const createSectionProvider = (data) => createStore((set, get) => ({
+    data: data ?? {},
+    getSection: (id) => {
+        const section = get().data[id];
+        return section ?? undefined;
+    },
+    addSection: (id, data) => {
+        const item = normalizeBuilderData(data);
+        set((prev) => ({
+            data: {
+                ...prev.data,
+                [id]: cloneDeep(item),
+            },
+        }));
+    },
+    removeSection: (id) => {
+        set((prev) => {
+            const { [id]: _, ...rest } = prev.data;
+            return {
+                data: rest,
+            };
+        });
+    },
+}));
+const SectionProvider = ({ children, data, ...passProps }) => {
+    return (jsx(SectionContext.Provider, { ...passProps, value: createSectionProvider(data), children: children }));
+};
+// export const useSectionStore = useStore;
+const useSectionStore = (selector, equalityFn) => {
+    const store = useContext(SectionContext);
+    if (!store) {
+        throw new Error('useSectionStore must be used within a SectionProvider');
+    }
+    return useStore(store, selector, equalityFn);
+};
+const useSection = (id) => useSectionStore((s) => s.getSection(id));
+
+export { SectionProvider, useSection, useSectionStore };

package/dist/esm/contexts/ShopContext.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { SWRConfig } from 'swr';
+import { useStore, createStore } from 'zustand';
+import { createContext, useMemo, useContext } from 'react';
+import { AddonProvider } from './AddonContext.js';
+
+const ShopContext = createContext(null);
+const createShopStoreProvider = (data) => createStore((set) => ({
+    mobileOnly: false,
+    ...data,
+    changeLocale: (locale) => {
+        set({ locale });
+    },
+    changeCurrency: (currency) => {
+        set({ currency });
+    },
+    changeSwatches: (swatches) => {
+        set({ swatches });
+    },
+    changeStorefrontInfo: ({ url, token }) => {
+        set((prev) => ({
+            storefrontUrl: url ?? prev.storefrontUrl,
+            storefrontToken: token ?? prev.storefrontToken,
+        }));
+    },
+}));
+const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps }) => {
+    const store = useMemo(() => createShopStoreProvider(storeOption), [storeOption]);
+    return (jsx(AddonProvider, { components: addons, children: jsx(SWRConfig, { value: queryOption, children: jsx(ShopContext.Provider, { ...passProps, value: store, children: children }, JSON.stringify(storeOption)) }) }));
+};
+// export const useShopStore = useStore;
+const useShopStore = (selector, equalityFn) => {
+    const store = useContext(ShopContext);
+    if (!store) {
+        throw new Error('useShopStore must be used within a ShopProvider');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { ShopProvider, useShopStore };

package/dist/esm/graphql/fragments/analytic.generated.js

@@ -0,0 +1,9 @@
+const AnalyticSelect = `
+    fragment AnalyticSelect on Analytic {
+  fbPixelID
+  gaTrackingID
+  tiktokPixelID
+}
+    `;
+
+export { AnalyticSelect };