@gem-sdk/core 1.42.7 → 1.43.0-dev.100

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

@@ -0,0 +1,61 @@
+const BlogsDocument = `
+    query blogs($after: Cursor, $before: Cursor, $first: Int, $last: Int, $orderBy: BlogOrder, $where: BlogWhereInput) {
+  blogs(
+    after: $after
+    before: $before
+    first: $first
+    last: $last
+    orderBy: $orderBy
+    where: $where
+  ) {
+    edges {
+      cursor
+      node {
+        baseID
+        description
+        descriptionMeta
+        handle
+        articles {
+          edges {
+            node {
+              id
+              title
+              handle
+              description
+              templateSuffix
+              titleMeta
+              descriptionMeta
+              baseID
+              tags
+              isSample
+              platformCreatedAt
+              author
+              media {
+                width
+                src
+                height
+              }
+            }
+          }
+          totalCount
+        }
+        id
+        platform
+        tags
+        templateSuffix
+        title
+        titleMeta
+      }
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    totalCount
+  }
+}
+    `;
+
+export { BlogsDocument };

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/background.js

@@ -7,7 +7,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
         return {};
     }
     return {
-        ...getStyleBgColor(background),
+        ...!options?.ignoreBackgroundColor ? {
+            ...getStyleBgColor(background)
+        } : {},
         ...!options?.ignoreBackgroundImage ? {
             ...getStyleBgImage(background, options),
             ...getStyleBgPosition(background),
@@ -201,7 +203,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -212,11 +214,11 @@ const getGradientBgrStyleByDevice = (backgroundStyle)=>{
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             Object.assign(bgrStyle, {
                 [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
             });
         }
     });
     return bgrStyle;
 };
 
-export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, makeFixedBgAttachment };
+export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment };

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

@@ -117,7 +117,7 @@ const getGlobalColorStateStyle = (type, data)=>{
     return Object.fromEntries(Object.entries(data).map(([state, value])=>{
         if (state === 'active') return [];
         return [
-            `-${stateMapping?.[state]}-${type}`,
+            `-${stateMapping?.[state] || ''}-${type}`,
             getSingleColorVariable(value)
         ];
     }).filter(isDefined));
@@ -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

@@ -78,6 +78,28 @@ const getProductQueryAll = async (fetcher, 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,
@@ -185,4 +207,4 @@ const mergeMediasToProducts = async ({ fetcher, products, isSample, isStorefront
  //   );
  // };
 
-export { getProductQueryAll, getProducts };
+export { getListProductByVariables, getProductQueryAll, getProducts };

package/dist/esm/helpers/shadow.js

@@ -25,7 +25,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{

package/dist/esm/helpers/typography.js

@@ -8,7 +8,9 @@ const composeTypographyCss = (typography)=>{
     const typographyCustom = typography?.custom;
     const { fontFamily, fontSize, fontStyle, fontWeight, lineHeight, letterSpacing } = typographyCustom?.desktop ?? {};
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
+  ${fontFamily ? `fontFamily: ${composeFontFamilyTypographyV2({
+        fontFamily
+    })};` : ''}
   ${fontSize ? `font-size: ${fontSize};` : ''}
   ${fontStyle ? `font-style: ${fontStyle};` : ''}
   ${fontWeight ? `font-weight: ${fontWeight};` : ''}
@@ -23,11 +25,13 @@ const composeTypographyV2Css = (typography, isImportant)=>{
     const { bold, italic, underline, transform } = typographyAttrs ?? {};
     const composeImportant = isImportant ? '!important' : '';
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
+  ${fontFamily ? composeFontFamilyTypographyV2({
+        fontFamily
+    }) : ''}
   ${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};` : ''}
@@ -41,7 +45,9 @@ function getCustomCSSByDevice(typography, device) {
         [`--size${suffix}`]: typography?.[device]?.fontSize,
         [`--lh${suffix}`]: typography?.[device]?.lineHeight,
         [`--fs${suffix}`]: typography?.[device]?.fontStyle,
-        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
+        [`--ff${suffix}`]: composeFontFamilyTypographyV2({
+            fontFamily
+        }),
         [`--weight${suffix}`]: typography?.[device]?.fontWeight,
         [`--ls${suffix}`]: typography?.[device]?.letterSpacing
     };
@@ -59,14 +65,42 @@ const composeTypographyV2 = (value, attrs)=>{
     return removeNullUndefined({
         ...makeStyle({
             fs: !attrs?.italic ? value?.fontStyle : undefined,
-            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
+            ff: composeFontFamilyTypographyV2(value),
             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 composeFontFamilyTypographyV2 = (value)=>{
+    const fontFamily = value?.fontFamily;
+    if (!fontFamily) return;
+    if (typeof fontFamily === 'string') {
+        return getFontUsedByTypographyV2({
+            fontFamily,
+            fallbackFontFamily: value?.fallbackFontFamily
+        });
+    }
+    if (typeof fontFamily === 'object' && typeof fontFamily?.value === 'string') {
+        switch(fontFamily.type){
+            case 'theme':
+                return `var(${fontFamily?.value}), var(--g-font-body)`;
+            default:
+                return getFontUsedByTypographyV2({
+                    fontFamily: fontFamily.value,
+                    fallbackFontFamily: value?.fallbackFontFamily
+                });
+        }
+    }
+    return;
+};
+const getFontUsedByTypographyV2 = ({ fontFamily, fallbackFontFamily })=>{
+    if (fontFamily) {
+        return `var(--g-font-${fontFamily?.replace(/ /g, '-')}, '${fontFamily}'), ${fallbackFontFamily}`;
+    }
+    return;
+};
 const composeTypographyAttr = (attrs)=>{
     if (!attrs) return {};
     return removeNullUndefined({
@@ -113,4 +147,4 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
     };
 };
 
-export { composeFallbackTypographyStyle, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };
+export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };

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

@@ -0,0 +1,29 @@
+import { ArticlesDocument } from '../../graphql/queries/articles.generated.js';
+import { useFetchHandle } from '../useFetchHandle.js';
+import useSWR from 'swr';
+import { BlogsDocument } from '../../graphql/queries/blogs.generated.js';
+
+const useArticlesQuery = (variables, options)=>{
+    const fetcher = useFetchHandle();
+    const fetchArticles = ()=>fetcher([
+            ArticlesDocument,
+            variables ?? {}
+        ]);
+    return useSWR(variables ? [
+        'query/articles',
+        variables
+    ] : null, fetchArticles, options);
+};
+const useBlogsQuery = (variables, options)=>{
+    const fetcher = useFetchHandle();
+    const fetchBlogs = ()=>fetcher([
+            BlogsDocument,
+            variables ?? {}
+        ]);
+    return useSWR(variables ? [
+        'query/blogs',
+        variables
+    ] : null, fetchBlogs, options);
+};
+
+export { useArticlesQuery, useBlogsQuery };

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

@@ -1,5 +1,6 @@
 import useSWR from 'swr';
-import { getProducts, getProductQueryAll } 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,6 +19,33 @@ 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 ? [
@@ -28,4 +56,4 @@ const useProductsQueryAll = (variable, options)=>{
     }, options);
 };
 
-export { useProductsQuery, useProductsQueryAll };
+export { useListProductQuery, useProductsQuery, useProductsQueryAll };

package/dist/esm/hooks/useAnimations.js

@@ -5,10 +5,13 @@ 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 'dayjs';
 import '../helpers/convert.js';
 
 const useAnimations = ()=>{

package/dist/esm/hooks/useFormatMoney.js

@@ -3,69 +3,69 @@ import { useMoneyFormat } from './shop.js';
 const shopifyPriceRounding = (amount, precision)=>{
     return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
 };
+const formatMoney = function(cents, format) {
+    let value = '';
+    const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+    const formatString = format || '${{amount}}';
+    /**
+   * check default
+   * @param opt opt
+   * @param def def
+   * @returns any
+   */ function defaultOption(opt, def) {
+        return typeof opt == 'undefined' ? def : opt;
+    }
+    /**
+   * formatWithDelimiters
+   * @param number number
+   * @param precision precision
+   * @param thousands thousands
+   * @param decimal decimal
+   * @returns any
+   */ // eslint-disable-next-line max-params
+    function formatWithDelimiters(number, precision, thousands, decimal) {
+        precision = defaultOption(precision, 2);
+        thousands = defaultOption(thousands, ',');
+        decimal = defaultOption(decimal, '.');
+        if (isNaN(number) || number == null) {
+            return 0;
+        }
+        // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+        number = shopifyPriceRounding(number, Number(precision));
+        const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+        return dollars + cents;
+    }
+    switch(formatString.match(placeholderRegex)[1]){
+        case 'amount':
+            value = formatWithDelimiters(cents, 2);
+            break;
+        case 'amount_no_decimals':
+            value = formatWithDelimiters(cents, 0);
+            break;
+        case 'amount_with_comma_separator':
+            value = formatWithDelimiters(cents, 2, '.', ',');
+            break;
+        case 'amount_no_decimals_with_comma_separator':
+            value = formatWithDelimiters(cents, 0, '.', ',');
+            break;
+        case 'amount_with_apostrophe_separator':
+            value = formatWithDelimiters(cents, 2, "'", '.');
+            break;
+        case 'amount_no_decimals_with_space_separator':
+            value = formatWithDelimiters(cents, 0, ' ');
+            break;
+        case 'amount_with_space_separator':
+            value = formatWithDelimiters(cents, 2, ' ', ',');
+            break;
+        case 'amount_with_period_and_space_separator':
+            value = formatWithDelimiters(cents, 2, ' ', '.');
+            break;
+    }
+    return formatString.replace(placeholderRegex, value);
+};
 const useFormatMoney = (amount, withCurrency)=>{
     const { moneyFormat, moneyWithCurrencyFormat } = useMoneyFormat();
-    const formatMoney = function(cents, format) {
-        let value = '';
-        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
-        const formatString = format || '${{amount}}';
-        /**
-     * check default
-     * @param opt opt
-     * @param def def
-     * @returns any
-     */ function defaultOption(opt, def) {
-            return typeof opt == 'undefined' ? def : opt;
-        }
-        /**
-     * formatWithDelimiters
-     * @param number number
-     * @param precision precision
-     * @param thousands thousands
-     * @param decimal decimal
-     * @returns any
-     */ // eslint-disable-next-line max-params
-        function formatWithDelimiters(number, precision, thousands, decimal) {
-            precision = defaultOption(precision, 2);
-            thousands = defaultOption(thousands, ',');
-            decimal = defaultOption(decimal, '.');
-            if (isNaN(number) || number == null) {
-                return 0;
-            }
-            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
-            number = shopifyPriceRounding(number, Number(precision));
-            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
-            return dollars + cents;
-        }
-        switch(formatString.match(placeholderRegex)[1]){
-            case 'amount':
-                value = formatWithDelimiters(cents, 2);
-                break;
-            case 'amount_no_decimals':
-                value = formatWithDelimiters(cents, 0);
-                break;
-            case 'amount_with_comma_separator':
-                value = formatWithDelimiters(cents, 2, '.', ',');
-                break;
-            case 'amount_no_decimals_with_comma_separator':
-                value = formatWithDelimiters(cents, 0, '.', ',');
-                break;
-            case 'amount_with_apostrophe_separator':
-                value = formatWithDelimiters(cents, 2, "'", '.');
-                break;
-            case 'amount_no_decimals_with_space_separator':
-                value = formatWithDelimiters(cents, 0, ' ');
-                break;
-            case 'amount_with_space_separator':
-                value = formatWithDelimiters(cents, 2, ' ', ',');
-                break;
-            case 'amount_with_period_and_space_separator':
-                value = formatWithDelimiters(cents, 2, ' ', '.');
-                break;
-        }
-        return formatString.replace(placeholderRegex, value);
-    };
     return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-export { shopifyPriceRounding, useFormatMoney };
+export { formatMoney, shopifyPriceRounding, useFormatMoney };

package/dist/esm/hooks/useInitialSwatchesOptions.js

@@ -9,10 +9,13 @@ 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 'dayjs';
 import isBrowser from '../helpers/is-browser.js';
 import '../helpers/convert.js';
 

package/dist/esm/hooks/useProduct.js

@@ -6,11 +6,14 @@ import 'swr';
 import { usePageStore } from '../contexts/PageContext.js';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import './useCartUI.js';
 import { checkInStock } from '../helpers/variant.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
 import { flattenConnection } from '../helpers/flatten-connection.js';
 import '../helpers/convert.js';
 import { getSelectedVariant } from '../helpers/product.js';

package/dist/esm/index.js

@@ -14,6 +14,8 @@ export { ShopProvider, useShopStore } from './contexts/ShopContext.js';
 export { PageProvider, usePageStore } from './contexts/PageContext.js';
 export { CollectionProvider, useCollectionStore } from './contexts/CollectionContext.js';
 export { ModalProvider, useModalStore } from './contexts/ModalContext.js';
+export { ArticleListProvider, useArticleListStore } from './contexts/ArticleListContext.js';
+export { ArticleProvider, useArticleStore } from './contexts/ArticleContext.js';
 export { PageViewUpDocument } from './graphql/mutations/page-view-up.generated.js';
 export { CollectionDetailFilterDocument } from './graphql/queries/collection-detail-filter.generated.js';
 export { CollectionDocument } from './graphql/queries/collection.generated.js';
@@ -50,7 +52,7 @@ import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
-export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
+export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment } from './helpers/background.js';
 export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
 export { composeAdvanceStyle, composeAdvanceStyleForPostPurchase, filterAttrInStyle, filterCornerInStyle, removeAttrInStyle, removePaddingYInStyle, splitStyle } from './helpers/compose-advance-style.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
@@ -59,13 +61,14 @@ export { composePositionLineHeight, composePostionIconList } from './helpers/ico
 export { isDefined } from './helpers/is-defined.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { convertTextAlignToJustify } from './helpers/align.js';
 export { checkAvailableVariantInStock, getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { RenderIf, composeMemo, dataStringify, props, removeUndefinedValuesFromObject, styles, template } from './helpers/render.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
 export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
-export { composeFallbackTypographyStyle, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
+export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
 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';
@@ -79,7 +82,7 @@ export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery, useProductsQueryAll } from './hooks/shop/use-products-query.js';
 export { useCurrentDevice } from './hooks/use-current-device.js';
-export { shopifyPriceRounding, useFormatMoney } from './hooks/useFormatMoney.js';
+export { formatMoney, shopifyPriceRounding, useFormatMoney } from './hooks/useFormatMoney.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';
@@ -90,6 +93,7 @@ export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayou
 export { default as useLoadScript } from './hooks/useLoadScript.js';
 export { default as useMoney } from './hooks/useMoney.js';
 export { usePrevious } from './hooks/usePrevious.js';
+export { useArticlesQuery, useBlogsQuery } from './hooks/articles/useArticlesQuery.js';
 export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useIsSyncProduct, useProduct, useProductOfferDiscount, 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';