@gem-sdk/core 1.9.0 → 1.9.1

package/dist/cjs/helpers/layout.js

@@ -3,6 +3,8 @@
 var constant = require('./constant.js');
 var getResonsiveValue = require('./get-resonsive-value.js');
 
+const gridToArrayRegex = // eslint-disable-next-line regexp/no-super-linear-backtracking
+/[^\s()]+(?:\([^\s()]+(?:\([^()]+\))?(?:, *[^\s()]+(?:\([^()]+\))?)*\))?/g; // Regex convert css grid to array
 const optionLayoutStyle = (column)=>{
     if (!column) return {};
     const style = {};
@@ -24,6 +26,34 @@ const composeGridLayout = (layout)=>{
         [`--gtc-mobile`]: mobile
     };
 };
+const gridToArray = (layout)=>{
+    return layout ? layout.match(gridToArrayRegex) ?? [] : [];
+};
+const convertOldLayout = (layout)=>{
+    const desktopCol = gridToArray(layout?.desktop).length;
+    const tabletCol = gridToArray(layout?.tablet).length;
+    const mobileCol = gridToArray(layout?.mobile).length;
+    return {
+        desktop: {
+            cols: desktopCol ? Array.from({
+                length: desktopCol
+            }, ()=>12 / desktopCol) : undefined,
+            display: 'fill'
+        },
+        tablet: {
+            cols: tabletCol ? Array.from({
+                length: tabletCol
+            }, ()=>12 / tabletCol) : undefined
+        },
+        mobile: {
+            cols: mobileCol ? Array.from({
+                length: mobileCol
+            }, ()=>12 / mobileCol) : undefined
+        }
+    };
+};
 
 exports.composeGridLayout = composeGridLayout;
+exports.convertOldLayout = convertOldLayout;
+exports.gridToArrayRegex = gridToArrayRegex;
 exports.optionLayoutStyle = optionLayoutStyle;

package/dist/cjs/index.js

@@ -159,6 +159,8 @@ exports.validateEmail = email.validateEmail;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.genVariable = cssVariable.genVariable;
 exports.composeGridLayout = layout.composeGridLayout;
+exports.convertOldLayout = layout.convertOldLayout;
+exports.gridToArrayRegex = layout.gridToArrayRegex;
 exports.optionLayoutStyle = layout.optionLayoutStyle;
 exports.isDefined = isDefined.isDefined;
 exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;

package/dist/esm/helpers/layout.js

@@ -1,6 +1,8 @@
 import { devicesMapping } from './constant.js';
 import { getResponsiveValueByScreen, getResponsiveValue } from './get-resonsive-value.js';
 
+const gridToArrayRegex = // eslint-disable-next-line regexp/no-super-linear-backtracking
+/[^\s()]+(?:\([^\s()]+(?:\([^()]+\))?(?:, *[^\s()]+(?:\([^()]+\))?)*\))?/g; // Regex convert css grid to array
 const optionLayoutStyle = (column)=>{
     if (!column) return {};
     const style = {};
@@ -22,5 +24,31 @@ const composeGridLayout = (layout)=>{
         [`--gtc-mobile`]: mobile
     };
 };
+const gridToArray = (layout)=>{
+    return layout ? layout.match(gridToArrayRegex) ?? [] : [];
+};
+const convertOldLayout = (layout)=>{
+    const desktopCol = gridToArray(layout?.desktop).length;
+    const tabletCol = gridToArray(layout?.tablet).length;
+    const mobileCol = gridToArray(layout?.mobile).length;
+    return {
+        desktop: {
+            cols: desktopCol ? Array.from({
+                length: desktopCol
+            }, ()=>12 / desktopCol) : undefined,
+            display: 'fill'
+        },
+        tablet: {
+            cols: tabletCol ? Array.from({
+                length: tabletCol
+            }, ()=>12 / tabletCol) : undefined
+        },
+        mobile: {
+            cols: mobileCol ? Array.from({
+                length: mobileCol
+            }, ()=>12 / mobileCol) : undefined
+        }
+    };
+};
 
-export { composeGridLayout, optionLayoutStyle };
+export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle };

package/dist/esm/index.js

@@ -40,7 +40,7 @@ export { loadScript } from './helpers/load-script.js';
 export { validateEmail } from './helpers/email.js';
 export { getStyleBackgroundByDevice } from './helpers/background.js';
 export { genVariable } from './helpers/css-variable.js';
-export { composeGridLayout, optionLayoutStyle } from './helpers/layout.js';
+export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.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';

package/dist/types/index.d.ts

@@ -7365,8 +7365,10 @@ declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background
 
 declare const genVariable: (variableName: string) => string;
 
+declare const gridToArrayRegex: RegExp;
 declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
 declare const composeGridLayout: (layout?: ObjectDevices<ObjectLayoutValue>) => React.CSSProperties;
+declare const convertOldLayout: (layout?: ObjectDevices<string>) => ObjectDevices<ObjectLayoutValue>;
 
 declare function isDefined<T>(argument: T | undefined): argument is T;
 
@@ -7695,4 +7697,4 @@ declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }:
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeGridLayout, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeGridLayout, composeRadius, composeSize, composeSpacing, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",