@gem-sdk/core 1.41.3 → 1.42.0-dev.60

package/dist/esm/components/ai-generator/icons/SearchIcon.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+
+const SearchIcon = ()=>{
+    return /*#__PURE__*/ jsx("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.75 2.5C5.29822 2.5 2.5 5.29822 2.5 8.75C2.5 12.2018 5.29822 15 8.75 15C10.2508 15 11.628 14.471 12.7055 13.5893L16.4775 17.3614C16.7216 17.6054 17.1173 17.6054 17.3614 17.3614C17.6054 17.1173 17.6054 16.7216 17.3614 16.4775L13.5893 12.7055C14.471 11.628 15 10.2508 15 8.75C15 5.29822 12.2018 2.5 8.75 2.5ZM3.75 8.75C3.75 5.98858 5.98858 3.75 8.75 3.75C11.5114 3.75 13.75 5.98858 13.75 8.75C13.75 11.5114 11.5114 13.75 8.75 13.75C5.98858 13.75 3.75 11.5114 3.75 8.75Z",
+            fill: "#AAAAAA"
+        })
+    });
+};
+
+export { SearchIcon };

package/dist/esm/components/ai-generator/icons/ShowMoreIcon.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ShowMoreIcon = ()=>{
+    return /*#__PURE__*/ jsx("svg", {
+        width: "17",
+        height: "16",
+        viewBox: "0 0 17 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M4.60651 6.09763C4.74852 5.96746 4.97876 5.96746 5.12077 6.09763L8.5 9.19526L11.8792 6.09763C12.0212 5.96746 12.2515 5.96746 12.3935 6.09763C12.5355 6.22781 12.5355 6.43886 12.3935 6.56904L8.75713 9.90237C8.61512 10.0325 8.38488 10.0325 8.24287 9.90237L4.60651 6.56904C4.4645 6.43886 4.4645 6.22781 4.60651 6.09763Z",
+            fill: "#F9F9F9"
+        })
+    });
+};
+
+export { ShowMoreIcon };

package/dist/esm/components/constant.js

@@ -34,7 +34,10 @@ const disableWrap = [
     'ProductImagesV2',
     'PostPurchaseProductImages',
     'Sticky',
-    'Heading'
+    'Heading',
+    'ProductBadge',
+    'Marquee',
+    'MarqueeItem'
 ];
 const customRenderChildren = [
     'Accordion',
@@ -45,7 +48,8 @@ const customRenderChildren = [
 ];
 const excludeApplyStyle = [
     'IconListV2',
-    'IconList'
+    'IconList',
+    'ProductBadge'
 ];
 const postPurchaseRequiredElements = [
     'PostPurchaseProductOffer',
@@ -64,5 +68,17 @@ const postPurchaseWrapElements = [
     'PostPurchaseCalloutBox',
     'PostPurchaseProductOffer'
 ];
+const ableGenerateContentElements = [
+    'Section',
+    'Row',
+    'Text',
+    'Heading',
+    'Accordion',
+    'Product',
+    'HeroBanner',
+    'IconList',
+    'IconListV2',
+    'AdvancedList'
+];
 
-export { customRenderChildren, disableWrap, excludeApplyStyle, postPurchaseRequiredElements, postPurchaseWrapElements };
+export { ableGenerateContentElements, customRenderChildren, disableWrap, excludeApplyStyle, postPurchaseRequiredElements, postPurchaseWrapElements };

package/dist/esm/components/resize/Spacing.js

@@ -6,10 +6,12 @@ import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import { usePageType } from '../../hooks/shop.js';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../../hooks/useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import 'classnames';
 import '../../helpers/convert.js';
 
 function Spacing(props) {

package/dist/esm/components/theme-section/CreateThemeSection.js

@@ -6,8 +6,10 @@ import { useShopStore } from '../../contexts/ShopContext.js';
 import '@gem-sdk/adapter-shopify';
 import 'swr';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../../hooks/useCartUI.js';
+import 'classnames';
 import '../../helpers/convert.js';
 
 const SHOW_TOOLTIP_TIMEOUT = 600;

package/dist/esm/contexts/ArticleContext.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useStore, createStore } from 'zustand';
+import { useId, useMemo, useContext, createContext } from 'react';
+
+// const { Provider, useStore } = createContext<StoreApi<ProductContextProps>>();
+const ArticleContext = /*#__PURE__*/ createContext(null);
+const createArticleStoreProvider = (data)=>createStore(()=>({
+            ...data
+        }));
+const ArticleProvider = ({ children, article })=>{
+    const uniqueId = useId();
+    const store = useMemo(()=>{
+        return createArticleStoreProvider({
+            article,
+            uniqueId
+        });
+    }, [
+        article,
+        uniqueId
+    ]);
+    return /*#__PURE__*/ jsx(ArticleContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        })
+    });
+};
+const useArticleStore = (selector, equalityFn)=>{
+    const store = useContext(ArticleContext);
+    if (!store) {
+        throw new Error('Element of article must be used inside a Article');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { ArticleProvider, useArticleStore };

package/dist/esm/contexts/ArticleListContext.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+import { useStore, createStore } from 'zustand';
+
+const ArticleListContext = /*#__PURE__*/ createContext(null);
+const createArticleListProvider = (data)=>createStore(()=>({
+            ...data
+        }));
+const ArticleListProvider = ({ articles, blogs, children, styles, settings })=>{
+    return /*#__PURE__*/ jsx(ArticleListContext.Provider, {
+        value: createArticleListProvider({
+            articles,
+            styles,
+            settings,
+            blogs
+        }),
+        children: children
+    });
+};
+const useArticleListStore = (selector, equalityFn)=>{
+    const store = useContext(ArticleListContext);
+    if (!store) {
+        throw new Error('useArticleListStore must be used within a useArticleListStore');
+    }
+    return useStore(store, selector, equalityFn);
+};
+
+export { ArticleListContext, ArticleListProvider, useArticleListStore };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -251,7 +251,11 @@ const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>createStore((
                 }
             },
             getItem: (id)=>{
-                return get().state[id];
+                const item = get().state[id];
+                return {
+                    ...item,
+                    rawChildrens: item?.childrens?.map((v)=>get().state[v])
+                };
             },
             removeItem: (id)=>{
                 if (id === 'ROOT') {
@@ -426,15 +430,16 @@ const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>createStore((
             updateItemAttribute: (id, value, attr)=>{
                 if (!attr || ![
                     'label',
-                    'customLabel'
+                    'customLabel',
+                    'isShopifyVisibility'
                 ].includes(attr)) 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;
+                    if (item.type !== 'section') {
+                        const dateModified = Date.now();
+                        item.dateModified = dateModified;
+                    }
                     const updatedItem = {
                         ...item,
                         [attr]: value

package/dist/esm/contexts/SectionContext.js

@@ -8,6 +8,7 @@ const SectionContext = /*#__PURE__*/ createContext(null);
 const createSectionProvider = (data)=>createStore((set, get)=>({
             data: data ?? {},
             getSection: (id)=>{
+                console.log('get().data', get().data);
                 const section = get().data[id];
                 return section ?? undefined;
             },

package/dist/esm/graphql/fragments/product-little.generated.js

@@ -17,6 +17,15 @@
   featuredImage {
     ...MediaSelect
   }
+  collections {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+  tags
 }
     `;
 

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

@@ -1,6 +1,15 @@
 /* eslint-disable */ const ProductSelect = `
     fragment ProductSelect on Product {
   ...ProductLittleSelect
+  collections {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+  tags
   medias(first: $firstMedia, after: $afterMedia, orderBy: $orderByMedia) {
     edges {
       cursor

package/dist/esm/graphql/queries/products.generated.js

@@ -11,6 +11,15 @@ const ProductsEdgeDetail = `
   cursor
   node {
     ...ProductSelect
+    tags
+    collections {
+      edges {
+        node {
+          id
+          title
+        }
+      }
+    }
   }
 }
     `;

package/dist/esm/helpers/align.js

@@ -0,0 +1,17 @@
+const convertTextAlignToJustify = (align)=>{
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const result = {};
+    devices.forEach((device)=>{
+        const deviceType = device === 'desktop' ? '' : `${device}:`;
+        result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
+        result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
+        result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
+    });
+    return result;
+};
+
+export { convertTextAlignToJustify };

package/dist/esm/helpers/carousel.js

@@ -1,23 +1,20 @@
 import { getResponsiveValueByScreen } from './get-resonsive-value.js';
 
-const getCarouselContainerHeight = (dotStyle, dotSize, dotGapToCarousel)=>{
-    const getVal = (dotStyle, dotSize, dotGapToCarousel)=>{
-        if (dotStyle === 'outside') {
-            return `calc(100% - ${dotSize ?? '0'}px - ${!dotGapToCarousel || dotGapToCarousel === 'Auto' ? '0' : dotGapToCarousel}px)`;
-        }
-        return '100%';
+const getCarouselContainerHeight = (dotStyle)=>{
+    const getVal = (dotStyle)=>{
+        return dotStyle === 'outside' ? 'auto' : '100%';
     };
     return {
-        desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop'), getResponsiveValueByScreen(dotSize, 'desktop'), getResponsiveValueByScreen(dotGapToCarousel, 'desktop')),
-        tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet'), getResponsiveValueByScreen(dotSize, 'tablet'), getResponsiveValueByScreen(dotGapToCarousel, 'tablet')),
-        mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile'), getResponsiveValueByScreen(dotSize, 'mobile'), getResponsiveValueByScreen(dotGapToCarousel, 'mobile'))
+        desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop')),
+        tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet')),
+        mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile'))
     };
 };
 const makeContainerWidthOrHeight = (setting)=>{
     const getStyleName = (vertical)=>{
         return vertical ? 'w' : 'h';
     };
-    const result = getCarouselContainerHeight(setting.dotStyle, setting.dotSize, setting.dotGapToCarousel);
+    const result = getCarouselContainerHeight(setting.dotStyle);
     return {
         [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'desktop'))}`]: result.desktop,
         [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'tablet'))}-tablet`]: result.tablet,

package/dist/esm/helpers/colors.js

@@ -154,7 +154,7 @@ const getSingleColorVariable = (color)=>{
 };
 function isColor(color) {
     if (!color || typeof color !== 'string') return false;
-    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
 }
 const getGlobalColorStyle = (data)=>{
     if (!data) return {};

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

@@ -55,6 +55,51 @@ const getProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelect
         }
     };
 };
+const getProductQueryAll = async (fetcher, arg)=>{
+    const limit = arg?.limit || 4;
+    delete arg.limit;
+    const variables = {
+        first: limit,
+        firstMedia: 1,
+        firstVariant: 1,
+        orderBy: {
+            field: 'PLATFORM_CREATED_AT',
+            direction: 'DESC'
+        },
+        orderByMedia: {
+            field: 'POSITION',
+            direction: 'ASC'
+        },
+        where: {
+            status: 'ACTIVE',
+            ...arg
+        }
+    };
+    const pageData = await fetchProducts(fetcher, variables);
+    return pageData;
+};
+const getListProductByVariables = async (fetcher, arg)=>{
+    const variables = {
+        first: arg.first || 8,
+        firstMedia: 1,
+        firstVariant: 1,
+        orderBy: {
+            field: 'PLATFORM_CREATED_AT',
+            direction: 'DESC'
+        },
+        orderByMedia: {
+            field: 'POSITION',
+            direction: 'ASC'
+        },
+        where: {
+            status: 'ACTIVE',
+            ...arg.where
+        },
+        after: arg.after
+    };
+    const pageData = await fetchProducts(fetcher, variables);
+    return pageData;
+};
 const fetchProducts = async (fetcher, variables)=>{
     return fetcher([
         ProductsDocument,
@@ -162,4 +207,4 @@ const mergeMediasToProducts = async ({ fetcher, products, isSample, isStorefront
  //   );
  // };
 
-export { getProducts };
+export { getListProductByVariables, getProductQueryAll, getProducts };

package/dist/esm/helpers/typography.js

@@ -27,7 +27,7 @@ const composeTypographyV2Css = (typography, isImportant)=>{
   ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
   ${bold ? `font-weight: bold ${composeImportant};` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
   ${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
+  ${lineHeight?.desktop ? `line-height: ${lineHeight?.desktop} ${composeImportant};` : ''}
   ${italic ? `font-style: italic ${composeImportant};` : ''}
   ${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
   ${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
@@ -61,10 +61,10 @@ const composeTypographyV2 = (value, attrs)=>{
             fs: !attrs?.italic ? value?.fontStyle : undefined,
             ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
             weight: !attrs?.bold ? value?.fontWeight : undefined,
-            ls: value?.letterSpacing,
-            lh: value?.lineHeight
+            ls: value?.letterSpacing
         }),
-        ...makeStyleResponsive('size', value?.fontSize)
+        ...makeStyleResponsive('size', value?.fontSize),
+        ...makeStyleResponsive('lh', value?.lineHeight)
     });
 };
 const composeTypographyAttr = (attrs)=>{

package/dist/esm/hooks/articles/useArticlesQuery.js

@@ -0,0 +1,149 @@
+const mock = [
+    {
+        baseID: 'gid://shopify/OnlineStoreBlog/592066740457',
+        id: 592066740457,
+        title: 'Blog post might appear in a search engine listing',
+        created_at: '2024-05-09T04:06:12-04:00',
+        body_html: '<span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span>',
+        blog_id: 91970044137,
+        author: 'Dev Team',
+        user_id: 90371653865,
+        published_at: '2024-05-09T04:06:12-04:00',
+        updated_at: '2024-05-09T04:06:13-04:00',
+        summary_html: '',
+        template_suffix: '',
+        handle: 'blog-post-might-appear-in-a-search-engine-listing',
+        tags: 'vintage',
+        admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066740457',
+        image: {
+            created_at: '2024-05-09T04:06:12-04:00',
+            alt: '',
+            width: 1073,
+            height: 719,
+            src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_2.jpg?v=1715241973'
+        }
+    },
+    {
+        baseID: 'gid://shopify/OnlineStoreBlog/592066707689',
+        id: 592066707689,
+        title: 'ar on your home page or blog.',
+        created_at: '2024-05-09T04:05:26-04:00',
+        body_html: '<span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span>',
+        blog_id: 91970044137,
+        author: 'Dev Team',
+        user_id: 90371653865,
+        published_at: '2024-05-09T04:05:25-04:00',
+        updated_at: '2024-05-09T05:35:29-04:00',
+        summary_html: '',
+        template_suffix: '',
+        handle: 'ar-on-your-home-page-or-blog',
+        tags: 'cotton, vintage',
+        admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066707689',
+        image: {
+            created_at: '2024-05-09T04:05:26-04:00',
+            alt: '',
+            width: 1080,
+            height: 719,
+            src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_1.jpg?v=1715241926'
+        }
+    },
+    {
+        baseID: 'gid://shopify/OnlineStoreBlog/592066674921',
+        id: 592066674921,
+        title: 'Add a summary of the post.',
+        created_at: '2024-05-09T04:04:44-04:00',
+        body_html: '<span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span><span data-mce-fragment="1">Add a title and description to see how this Blog post might appear in a search engine listing</span>',
+        blog_id: 91970044137,
+        author: 'Dev Team',
+        user_id: 90371653865,
+        published_at: '2024-05-09T04:04:44-04:00',
+        updated_at: '2024-05-09T04:04:45-04:00',
+        summary_html: '',
+        template_suffix: '',
+        handle: 'add-a-summary-of-the-post',
+        tags: '',
+        admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066674921',
+        image: {
+            created_at: '2024-05-09T04:04:44-04:00',
+            alt: '',
+            width: 1086,
+            height: 718,
+            src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_7.jpg?v=1715241885'
+        }
+    },
+    {
+        baseID: 'gid://shopify/OnlineStoreBlog/592058777833',
+        id: 592058777833,
+        title: 'Article Page - May 7, 10:47:14',
+        created_at: '2024-05-06T23:47:59-04:00',
+        body_html: '<h2>\n<span>Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span>\n</h2>',
+        blog_id: 91970044137,
+        author: 'GemPages',
+        user_id: null,
+        published_at: '2024-05-06T23:47:59-04:00',
+        updated_at: '2024-05-09T04:06:48-04:00',
+        summary_html: '',
+        template_suffix: 'gp-template-512584275137135821',
+        handle: 'article-page-may-7-10-47-14',
+        tags: 'vintage',
+        admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592058777833',
+        image: {
+            created_at: '2024-05-09T04:06:41-04:00',
+            alt: '',
+            width: 578,
+            height: 585,
+            src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_3.png?v=1715242002'
+        }
+    },
+    {
+        baseID: 'gid://shopify/OnlineStoreBlog/592058679529',
+        id: 592058679529,
+        title: 'Blog about your latest products or deals',
+        created_at: '2024-05-06T22:36:55-04:00',
+        body_html: '<span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span><span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span>',
+        blog_id: 91970044137,
+        author: 'Dev Team',
+        user_id: 90371653865,
+        published_at: '2024-05-06T22:36:54-04:00',
+        updated_at: '2024-05-09T03:46:39-04:00',
+        summary_html: '<span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span>',
+        template_suffix: 'gp-template-512584275137135821',
+        handle: 'blog-about-your-latest-products-or-deals',
+        tags: '',
+        admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592058679529',
+        image: {
+            created_at: '2024-05-06T22:36:55-04:00',
+            alt: '',
+            width: 497,
+            height: 618,
+            src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_3.jpg?v=1715049415'
+        }
+    }
+];
+const useArticlesQuery = ()=>{
+    return mock;
+};
+const useBlogsQuery = ()=>{
+    return {
+        blogs: {
+            edges: [
+                {
+                    node: {
+                        id: '511006979737518962',
+                        title: 'News',
+                        baseID: 'gid://shopify/OnlineStoreBlog/91970044137',
+                        tags: [],
+                        handle: 'news',
+                        descriptionMeta: '',
+                        description: '',
+                        titleMeta: '',
+                        templateSuffix: '',
+                        platform: 'SHOPIFY'
+                    }
+                }
+            ]
+        }
+    };
+};
+
+export { useArticlesQuery, useBlogsQuery };

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

@@ -1,5 +1,6 @@
 import useSWR from 'swr';
-import { getProducts } from '../../helpers/queries/get-products.js';
+import useSWRInfinite from 'swr/infinite';
+import { getProducts, getProductQueryAll, getListProductByVariables } from '../../helpers/queries/get-products.js';
 import { generateProductsQueryKey } from '../../helpers/query.js';
 import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';
 import { useFetchHandle } from '../useFetchHandle.js';
@@ -18,5 +19,41 @@ const useProductsQuery = (ids, options, params)=>{
         return getProducts(params?.fetcher || fetcher, arg);
     }, options);
 };
+const getKey = (variable)=>{
+    return (pageIndex, previousPageData)=>{
+        if (!variable || previousPageData && !previousPageData.products?.pageInfo?.hasNextPage) {
+            return null;
+        }
+        if (pageIndex === 0) {
+            return [
+                'query/products',
+                variable
+            ];
+        }
+        return [
+            'query/products',
+            {
+                ...variable,
+                after: previousPageData.products?.pageInfo?.endCursor
+            }
+        ];
+    };
+};
+const useListProductQuery = (variable, options)=>{
+    const fetcher = useFetchHandle();
+    const data = useSWRInfinite(getKey(variable), async ([, arg])=>{
+        return getListProductByVariables(fetcher, arg);
+    }, options);
+    return data;
+};
+const useProductsQueryAll = (variable, options)=>{
+    const fetcher = useFetchHandle();
+    return useSWR(variable ? [
+        'query/products',
+        variable
+    ] : null, async ([, arg])=>{
+        return getProductQueryAll(fetcher, arg);
+    }, options);
+};
 
-export { useProductsQuery };
+export { useListProductQuery, useProductsQuery, useProductsQueryAll };

package/dist/esm/hooks/useAnimations.js

@@ -5,10 +5,12 @@ import 'zustand';
 import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import './useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import 'classnames';
 import '../helpers/convert.js';
 
 const useAnimations = ()=>{

package/dist/esm/hooks/useInitialSwatchesOptions.js

@@ -9,10 +9,12 @@ import 'react/jsx-runtime';
 import 'zustand';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import './useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import 'classnames';
 import isBrowser from '../helpers/is-browser.js';
 import '../helpers/convert.js';