@gem-sdk/core 1.42.0 → 1.42.3-dev.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ComponentToolbarPreview.js +120 -6
- package/dist/cjs/components/ComponentWrapperPreview.js +44 -1
- package/dist/cjs/components/Render.liquid.js +2 -0
- package/dist/cjs/components/RenderCustomCode.js +2 -0
- package/dist/cjs/components/ai-generator/AIContentGenerator.js +205 -0
- package/dist/cjs/components/ai-generator/AIGenContentLoading.js +85 -0
- package/dist/cjs/components/ai-generator/components/PickProduct.js +218 -0
- package/dist/cjs/components/ai-generator/components/ToneAndVoice.js +77 -0
- package/dist/cjs/components/ai-generator/hooks/useCheckingProductInside.js +47 -0
- package/dist/cjs/components/ai-generator/hooks/useFlipPopup.js +110 -0
- package/dist/cjs/components/ai-generator/hooks/useGettingGenerateRequest.js +37 -0
- package/dist/cjs/components/ai-generator/hooks/useListenEventGenerate.js +63 -0
- package/dist/cjs/components/ai-generator/icons/AIIcon.js +67 -0
- package/dist/cjs/components/ai-generator/icons/CloseIcon.js +19 -0
- package/dist/cjs/components/ai-generator/icons/DropdownIcon.js +37 -0
- package/dist/cjs/components/ai-generator/icons/SearchIcon.js +21 -0
- package/dist/cjs/components/ai-generator/icons/ShowMoreIcon.js +21 -0
- package/dist/cjs/components/constant.js +19 -2
- package/dist/cjs/components/resize/Spacing.js +2 -0
- package/dist/cjs/components/theme-section/CreateThemeSection.js +2 -0
- package/dist/cjs/contexts/ArticleContext.js +39 -0
- package/dist/cjs/contexts/ArticleListContext.js +32 -0
- package/dist/cjs/contexts/BuilderPreviewContext.js +11 -6
- package/dist/cjs/contexts/SectionContext.js +1 -0
- package/dist/cjs/helpers/align.js +19 -0
- package/dist/cjs/helpers/carousel.js +7 -10
- package/dist/cjs/helpers/colors.js +1 -1
- package/dist/cjs/helpers/queries/get-products.js +23 -0
- package/dist/cjs/helpers/typography.js +4 -4
- package/dist/cjs/hooks/articles/useArticlesQuery.js +152 -0
- package/dist/cjs/hooks/shop/use-products-query.js +29 -0
- package/dist/cjs/hooks/useAnimations.js +2 -0
- package/dist/cjs/hooks/useInitialSwatchesOptions.js +2 -0
- package/dist/cjs/hooks/useProduct.js +2 -0
- package/dist/cjs/index.js +11 -0
- package/dist/esm/components/ComponentToolbarPreview.js +120 -6
- package/dist/esm/components/ComponentWrapperPreview.js +44 -1
- package/dist/esm/components/Render.liquid.js +2 -0
- package/dist/esm/components/RenderCustomCode.js +2 -0
- package/dist/esm/components/ai-generator/AIContentGenerator.js +203 -0
- package/dist/esm/components/ai-generator/AIGenContentLoading.js +83 -0
- package/dist/esm/components/ai-generator/components/PickProduct.js +216 -0
- package/dist/esm/components/ai-generator/components/ToneAndVoice.js +75 -0
- package/dist/esm/components/ai-generator/hooks/useCheckingProductInside.js +45 -0
- package/dist/esm/components/ai-generator/hooks/useFlipPopup.js +108 -0
- package/dist/esm/components/ai-generator/hooks/useGettingGenerateRequest.js +35 -0
- package/dist/esm/components/ai-generator/hooks/useListenEventGenerate.js +61 -0
- package/dist/esm/components/ai-generator/icons/AIIcon.js +65 -0
- package/dist/esm/components/ai-generator/icons/CloseIcon.js +17 -0
- package/dist/esm/components/ai-generator/icons/DropdownIcon.js +34 -0
- package/dist/esm/components/ai-generator/icons/SearchIcon.js +19 -0
- package/dist/esm/components/ai-generator/icons/ShowMoreIcon.js +19 -0
- package/dist/esm/components/constant.js +19 -3
- package/dist/esm/components/resize/Spacing.js +2 -0
- package/dist/esm/components/theme-section/CreateThemeSection.js +2 -0
- package/dist/esm/contexts/ArticleContext.js +36 -0
- package/dist/esm/contexts/ArticleListContext.js +28 -0
- package/dist/esm/contexts/BuilderPreviewContext.js +11 -6
- package/dist/esm/contexts/SectionContext.js +1 -0
- package/dist/esm/helpers/align.js +17 -0
- package/dist/esm/helpers/carousel.js +7 -10
- package/dist/esm/helpers/colors.js +1 -1
- package/dist/esm/helpers/queries/get-products.js +23 -1
- package/dist/esm/helpers/typography.js +4 -4
- package/dist/esm/hooks/articles/useArticlesQuery.js +149 -0
- package/dist/esm/hooks/shop/use-products-query.js +30 -2
- package/dist/esm/hooks/useAnimations.js +2 -0
- package/dist/esm/hooks/useInitialSwatchesOptions.js +2 -0
- package/dist/esm/hooks/useProduct.js +2 -0
- package/dist/esm/index.js +4 -0
- package/dist/types/index.d.ts +161 -20
- package/package.json +5 -3
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const AIIcon = ()=>{
|
|
4
|
+
const getRandomId = ()=>{
|
|
5
|
+
return Math.random().toString(36).substring(7);
|
|
6
|
+
};
|
|
7
|
+
const linearGradientId = getRandomId();
|
|
8
|
+
return /*#__PURE__*/ jsxs("svg", {
|
|
9
|
+
width: "16",
|
|
10
|
+
height: "16",
|
|
11
|
+
viewBox: "0 0 16 16",
|
|
12
|
+
fill: "none",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
children: [
|
|
15
|
+
/*#__PURE__*/ jsx("path", {
|
|
16
|
+
d: "M11.6363 2.67137C11.5886 2.52361 11.3795 2.52361 11.3318 2.67137L11.1133 3.34797C11.0352 3.58971 10.8469 3.78 10.606 3.86067L9.93715 4.08465C9.79156 4.1334 9.79156 4.33933 9.93715 4.38809L10.606 4.61207C10.8469 4.69273 11.0352 4.88302 11.1133 5.12477L11.3318 5.80137C11.3795 5.94913 11.5886 5.94913 11.6363 5.80137L11.8549 5.12477C11.933 4.88302 12.1212 4.69273 12.3621 4.61207L13.031 4.38809C13.1766 4.33933 13.1766 4.1334 13.031 4.08465L12.3621 3.86067C12.1212 3.78 11.933 3.58971 11.8549 3.34797L11.6363 2.67137Z",
|
|
17
|
+
fill: `url(#${linearGradientId}_0)`
|
|
18
|
+
}),
|
|
19
|
+
/*#__PURE__*/ jsx("path", {
|
|
20
|
+
d: "M7.61245 3.30705C7.54086 3.08541 7.22728 3.08541 7.15569 3.30705L6.39541 5.6608C6.16115 6.38604 5.59636 6.9569 4.87367 7.19891L2.56369 7.97242C2.3453 8.04555 2.34531 8.35445 2.5637 8.42758L4.87367 9.2011C5.59636 9.4431 6.16115 10.014 6.39541 10.7392L7.15569 13.093C7.22728 13.3146 7.54086 13.3146 7.61245 13.093L8.37273 10.7392C8.60699 10.014 9.17178 9.4431 9.89447 9.2011L12.2044 8.42758C12.4228 8.35445 12.4228 8.04555 12.2044 7.97242L9.89447 7.1989C9.17178 6.9569 8.60699 6.38604 8.37273 5.6608L7.61245 3.30705Z",
|
|
21
|
+
fill: `url(#${linearGradientId}_1)`
|
|
22
|
+
}),
|
|
23
|
+
/*#__PURE__*/ jsxs("defs", {
|
|
24
|
+
children: [
|
|
25
|
+
/*#__PURE__*/ jsxs("linearGradient", {
|
|
26
|
+
id: `${linearGradientId}_0`,
|
|
27
|
+
x1: "15.3433",
|
|
28
|
+
y1: "2.56054",
|
|
29
|
+
x2: "4.24885",
|
|
30
|
+
y2: "1.00838",
|
|
31
|
+
gradientUnits: "userSpaceOnUse",
|
|
32
|
+
children: [
|
|
33
|
+
/*#__PURE__*/ jsx("stop", {
|
|
34
|
+
stopColor: "#D8E1FF"
|
|
35
|
+
}),
|
|
36
|
+
/*#__PURE__*/ jsx("stop", {
|
|
37
|
+
offset: "1",
|
|
38
|
+
stopColor: "#C8ACFF"
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
}),
|
|
42
|
+
/*#__PURE__*/ jsxs("linearGradient", {
|
|
43
|
+
id: `${linearGradientId}_1`,
|
|
44
|
+
x1: "15.3433",
|
|
45
|
+
y1: "2.56054",
|
|
46
|
+
x2: "4.24885",
|
|
47
|
+
y2: "1.00838",
|
|
48
|
+
gradientUnits: "userSpaceOnUse",
|
|
49
|
+
children: [
|
|
50
|
+
/*#__PURE__*/ jsx("stop", {
|
|
51
|
+
stopColor: "#D8E1FF"
|
|
52
|
+
}),
|
|
53
|
+
/*#__PURE__*/ jsx("stop", {
|
|
54
|
+
offset: "1",
|
|
55
|
+
stopColor: "#C8ACFF"
|
|
56
|
+
})
|
|
57
|
+
]
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
})
|
|
61
|
+
]
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { AIIcon };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const CloseIcon = ()=>{
|
|
4
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
5
|
+
width: "16",
|
|
6
|
+
height: "16",
|
|
7
|
+
viewBox: "0 0 16 16",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
d: "M11.1755 12.0243C11.4099 12.2586 11.7898 12.2586 12.0241 12.0243C12.2584 11.79 12.2584 11.4101 12.0241 11.1757L8.84833 8L12.0241 4.82427C12.2584 4.58995 12.2584 4.21005 12.0241 3.97574C11.7898 3.74142 11.4099 3.74142 11.1755 3.97574L7.9998 7.15148L4.82407 3.97574C4.58975 3.74142 4.20986 3.74142 3.97554 3.97574C3.74123 4.21005 3.74123 4.58995 3.97554 4.82427L7.15128 8L3.97554 11.1757C3.74123 11.4101 3.74123 11.79 3.97554 12.0243C4.20986 12.2586 4.58975 12.2586 4.82407 12.0243L7.9998 8.84853L11.1755 12.0243Z",
|
|
12
|
+
fill: "#F9F9F9"
|
|
13
|
+
})
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { CloseIcon };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const DropdownIcon = ()=>{
|
|
4
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
5
|
+
width: "20",
|
|
6
|
+
height: "20",
|
|
7
|
+
viewBox: "0 0 20 20",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
fillRule: "evenodd",
|
|
12
|
+
clipRule: "evenodd",
|
|
13
|
+
d: "M5.13313 7.62204C5.31064 7.45932 5.59845 7.45932 5.77596 7.62204L10 11.4941L14.224 7.62204C14.4016 7.45932 14.6894 7.45932 14.8669 7.62204C15.0444 7.78476 15.0444 8.04858 14.8669 8.21129L10.3214 12.378C10.1439 12.5407 9.8561 12.5407 9.67859 12.378L5.13313 8.21129C4.95562 8.04858 4.95562 7.78476 5.13313 7.62204Z",
|
|
14
|
+
fill: "#F9F9F9"
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
const TickIcon = ()=>{
|
|
19
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
20
|
+
width: "20",
|
|
21
|
+
height: "20",
|
|
22
|
+
viewBox: "0 0 20 20",
|
|
23
|
+
fill: "none",
|
|
24
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
26
|
+
fillRule: "evenodd",
|
|
27
|
+
clipRule: "evenodd",
|
|
28
|
+
d: "M15.8415 5.1766C16.0528 5.41207 16.0528 5.79383 15.8415 6.0293L7.95016 14.8234C7.84869 14.9365 7.71107 15 7.56757 15C7.42408 15 7.28645 14.9365 7.18499 14.8234L4.15846 11.4505C3.94717 11.215 3.94718 10.8333 4.15848 10.5978C4.36978 10.3623 4.71236 10.3623 4.92365 10.5978L7.56759 13.5443L15.0764 5.1766C15.2877 4.94113 15.6302 4.94113 15.8415 5.1766Z",
|
|
29
|
+
fill: "#00C853"
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { DropdownIcon, TickIcon };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const SearchIcon = ()=>{
|
|
4
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
5
|
+
width: "20",
|
|
6
|
+
height: "20",
|
|
7
|
+
viewBox: "0 0 20 20",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
fillRule: "evenodd",
|
|
12
|
+
clipRule: "evenodd",
|
|
13
|
+
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",
|
|
14
|
+
fill: "#AAAAAA"
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { SearchIcon };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
const ShowMoreIcon = ()=>{
|
|
4
|
+
return /*#__PURE__*/ jsx("svg", {
|
|
5
|
+
width: "17",
|
|
6
|
+
height: "16",
|
|
7
|
+
viewBox: "0 0 17 16",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
fillRule: "evenodd",
|
|
12
|
+
clipRule: "evenodd",
|
|
13
|
+
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",
|
|
14
|
+
fill: "#F9F9F9"
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { ShowMoreIcon };
|
|
@@ -34,7 +34,10 @@ const disableWrap = [
|
|
|
34
34
|
'ProductImagesV2',
|
|
35
35
|
'PostPurchaseProductImages',
|
|
36
36
|
'Sticky',
|
|
37
|
-
'Heading'
|
|
37
|
+
'Heading',
|
|
38
|
+
'ProductBadge',
|
|
39
|
+
'Marquee',
|
|
40
|
+
'MarqueeItem'
|
|
38
41
|
];
|
|
39
42
|
const customRenderChildren = [
|
|
40
43
|
'Accordion',
|
|
@@ -45,7 +48,8 @@ const customRenderChildren = [
|
|
|
45
48
|
];
|
|
46
49
|
const excludeApplyStyle = [
|
|
47
50
|
'IconListV2',
|
|
48
|
-
'IconList'
|
|
51
|
+
'IconList',
|
|
52
|
+
'ProductBadge'
|
|
49
53
|
];
|
|
50
54
|
const postPurchaseRequiredElements = [
|
|
51
55
|
'PostPurchaseProductOffer',
|
|
@@ -64,5 +68,17 @@ const postPurchaseWrapElements = [
|
|
|
64
68
|
'PostPurchaseCalloutBox',
|
|
65
69
|
'PostPurchaseProductOffer'
|
|
66
70
|
];
|
|
71
|
+
const ableGenerateContentElements = [
|
|
72
|
+
'Section',
|
|
73
|
+
'Row',
|
|
74
|
+
'Text',
|
|
75
|
+
'Heading',
|
|
76
|
+
'Accordion',
|
|
77
|
+
'Product',
|
|
78
|
+
'HeroBanner',
|
|
79
|
+
'IconList',
|
|
80
|
+
'IconListV2',
|
|
81
|
+
'AdvancedList'
|
|
82
|
+
];
|
|
67
83
|
|
|
68
|
-
export { customRenderChildren, disableWrap, excludeApplyStyle, postPurchaseRequiredElements, postPurchaseWrapElements };
|
|
84
|
+
export { ableGenerateContentElements, customRenderChildren, disableWrap, excludeApplyStyle, postPurchaseRequiredElements, postPurchaseWrapElements };
|
|
@@ -6,10 +6,12 @@ import 'swr';
|
|
|
6
6
|
import '@gem-sdk/adapter-shopify';
|
|
7
7
|
import 'swr/mutation';
|
|
8
8
|
import { usePageType } from '../../hooks/shop.js';
|
|
9
|
+
import 'swr/infinite';
|
|
9
10
|
import 'vanilla-lazyload';
|
|
10
11
|
import '../../hooks/useCartUI.js';
|
|
11
12
|
import 'react-transition-group';
|
|
12
13
|
import '@gem-sdk/core';
|
|
14
|
+
import 'classnames';
|
|
13
15
|
import '../../helpers/convert.js';
|
|
14
16
|
|
|
15
17
|
function Spacing(props) {
|
|
@@ -6,8 +6,10 @@ import { useShopStore } from '../../contexts/ShopContext.js';
|
|
|
6
6
|
import '@gem-sdk/adapter-shopify';
|
|
7
7
|
import 'swr';
|
|
8
8
|
import 'swr/mutation';
|
|
9
|
+
import 'swr/infinite';
|
|
9
10
|
import 'vanilla-lazyload';
|
|
10
11
|
import '../../hooks/useCartUI.js';
|
|
12
|
+
import 'classnames';
|
|
11
13
|
import '../../helpers/convert.js';
|
|
12
14
|
|
|
13
15
|
const SHOW_TOOLTIP_TIMEOUT = 600;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { useStore, createStore } from 'zustand';
|
|
3
|
+
import { useId, useMemo, useContext, createContext } from 'react';
|
|
4
|
+
|
|
5
|
+
// const { Provider, useStore } = createContext<StoreApi<ProductContextProps>>();
|
|
6
|
+
const ArticleContext = /*#__PURE__*/ createContext(null);
|
|
7
|
+
const createArticleStoreProvider = (data)=>createStore(()=>({
|
|
8
|
+
...data
|
|
9
|
+
}));
|
|
10
|
+
const ArticleProvider = ({ children, article })=>{
|
|
11
|
+
const uniqueId = useId();
|
|
12
|
+
const store = useMemo(()=>{
|
|
13
|
+
return createArticleStoreProvider({
|
|
14
|
+
article,
|
|
15
|
+
uniqueId
|
|
16
|
+
});
|
|
17
|
+
}, [
|
|
18
|
+
article,
|
|
19
|
+
uniqueId
|
|
20
|
+
]);
|
|
21
|
+
return /*#__PURE__*/ jsx(ArticleContext.Provider, {
|
|
22
|
+
value: store,
|
|
23
|
+
children: /*#__PURE__*/ jsx(Fragment, {
|
|
24
|
+
children: children
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
const useArticleStore = (selector, equalityFn)=>{
|
|
29
|
+
const store = useContext(ArticleContext);
|
|
30
|
+
if (!store) {
|
|
31
|
+
throw new Error('Element of article must be used inside a Article');
|
|
32
|
+
}
|
|
33
|
+
return useStore(store, selector, equalityFn);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export { ArticleProvider, useArticleStore };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useContext, createContext } from 'react';
|
|
3
|
+
import { useStore, createStore } from 'zustand';
|
|
4
|
+
|
|
5
|
+
const ArticleListContext = /*#__PURE__*/ createContext(null);
|
|
6
|
+
const createArticleListProvider = (data)=>createStore(()=>({
|
|
7
|
+
...data
|
|
8
|
+
}));
|
|
9
|
+
const ArticleListProvider = ({ articles, blogs, children, styles, settings })=>{
|
|
10
|
+
return /*#__PURE__*/ jsx(ArticleListContext.Provider, {
|
|
11
|
+
value: createArticleListProvider({
|
|
12
|
+
articles,
|
|
13
|
+
styles,
|
|
14
|
+
settings,
|
|
15
|
+
blogs
|
|
16
|
+
}),
|
|
17
|
+
children: children
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
const useArticleListStore = (selector, equalityFn)=>{
|
|
21
|
+
const store = useContext(ArticleListContext);
|
|
22
|
+
if (!store) {
|
|
23
|
+
throw new Error('useArticleListStore must be used within a useArticleListStore');
|
|
24
|
+
}
|
|
25
|
+
return useStore(store, selector, equalityFn);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { ArticleListContext, ArticleListProvider, useArticleListStore };
|
|
@@ -251,7 +251,11 @@ const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>createStore((
|
|
|
251
251
|
}
|
|
252
252
|
},
|
|
253
253
|
getItem: (id)=>{
|
|
254
|
-
|
|
254
|
+
const item = get().state[id];
|
|
255
|
+
return {
|
|
256
|
+
...item,
|
|
257
|
+
rawChildrens: item?.childrens?.map((v)=>get().state[v])
|
|
258
|
+
};
|
|
255
259
|
},
|
|
256
260
|
removeItem: (id)=>{
|
|
257
261
|
if (id === 'ROOT') {
|
|
@@ -426,15 +430,16 @@ const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>createStore((
|
|
|
426
430
|
updateItemAttribute: (id, value, attr)=>{
|
|
427
431
|
if (!attr || ![
|
|
428
432
|
'label',
|
|
429
|
-
'customLabel'
|
|
433
|
+
'customLabel',
|
|
434
|
+
'isShopifyVisibility'
|
|
430
435
|
].includes(attr)) return;
|
|
431
436
|
const state = get().state;
|
|
432
437
|
const item = state[id];
|
|
433
|
-
// Ignore section
|
|
434
|
-
if (item?.type === 'section') return;
|
|
435
438
|
if (item) {
|
|
436
|
-
|
|
437
|
-
|
|
439
|
+
if (item.type !== 'section') {
|
|
440
|
+
const dateModified = Date.now();
|
|
441
|
+
item.dateModified = dateModified;
|
|
442
|
+
}
|
|
438
443
|
const updatedItem = {
|
|
439
444
|
...item,
|
|
440
445
|
[attr]: value
|
|
@@ -8,6 +8,7 @@ const SectionContext = /*#__PURE__*/ createContext(null);
|
|
|
8
8
|
const createSectionProvider = (data)=>createStore((set, get)=>({
|
|
9
9
|
data: data ?? {},
|
|
10
10
|
getSection: (id)=>{
|
|
11
|
+
console.log('get().data', get().data);
|
|
11
12
|
const section = get().data[id];
|
|
12
13
|
return section ?? undefined;
|
|
13
14
|
},
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const convertTextAlignToJustify = (align)=>{
|
|
2
|
+
const devices = [
|
|
3
|
+
'desktop',
|
|
4
|
+
'tablet',
|
|
5
|
+
'mobile'
|
|
6
|
+
];
|
|
7
|
+
const result = {};
|
|
8
|
+
devices.forEach((device)=>{
|
|
9
|
+
const deviceType = device === 'desktop' ? '' : `${device}:`;
|
|
10
|
+
result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
|
|
11
|
+
result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
|
|
12
|
+
result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
|
|
13
|
+
});
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { convertTextAlignToJustify };
|
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
import { getResponsiveValueByScreen } from './get-resonsive-value.js';
|
|
2
2
|
|
|
3
|
-
const getCarouselContainerHeight = (dotStyle
|
|
4
|
-
const getVal = (dotStyle
|
|
5
|
-
|
|
6
|
-
return `calc(100% - ${dotSize ?? '0'}px - ${!dotGapToCarousel || dotGapToCarousel === 'Auto' ? '0' : dotGapToCarousel}px)`;
|
|
7
|
-
}
|
|
8
|
-
return '100%';
|
|
3
|
+
const getCarouselContainerHeight = (dotStyle)=>{
|
|
4
|
+
const getVal = (dotStyle)=>{
|
|
5
|
+
return dotStyle === 'outside' ? 'auto' : '100%';
|
|
9
6
|
};
|
|
10
7
|
return {
|
|
11
|
-
desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop')
|
|
12
|
-
tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet')
|
|
13
|
-
mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile')
|
|
8
|
+
desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop')),
|
|
9
|
+
tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet')),
|
|
10
|
+
mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile'))
|
|
14
11
|
};
|
|
15
12
|
};
|
|
16
13
|
const makeContainerWidthOrHeight = (setting)=>{
|
|
17
14
|
const getStyleName = (vertical)=>{
|
|
18
15
|
return vertical ? 'w' : 'h';
|
|
19
16
|
};
|
|
20
|
-
const result = getCarouselContainerHeight(setting.dotStyle
|
|
17
|
+
const result = getCarouselContainerHeight(setting.dotStyle);
|
|
21
18
|
return {
|
|
22
19
|
[`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'desktop'))}`]: result.desktop,
|
|
23
20
|
[`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'tablet'))}-tablet`]: result.tablet,
|
|
@@ -154,7 +154,7 @@ const getSingleColorVariable = (color)=>{
|
|
|
154
154
|
};
|
|
155
155
|
function isColor(color) {
|
|
156
156
|
if (!color || typeof color !== 'string') return false;
|
|
157
|
-
return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
|
|
157
|
+
return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
|
|
158
158
|
}
|
|
159
159
|
const getGlobalColorStyle = (data)=>{
|
|
160
160
|
if (!data) return {};
|
|
@@ -78,6 +78,28 @@ const getProductQueryAll = async (fetcher, arg)=>{
|
|
|
78
78
|
const pageData = await fetchProducts(fetcher, variables);
|
|
79
79
|
return pageData;
|
|
80
80
|
};
|
|
81
|
+
const getListProductByVariables = async (fetcher, arg)=>{
|
|
82
|
+
const variables = {
|
|
83
|
+
first: arg.first || 8,
|
|
84
|
+
firstMedia: 1,
|
|
85
|
+
firstVariant: 1,
|
|
86
|
+
orderBy: {
|
|
87
|
+
field: 'PLATFORM_CREATED_AT',
|
|
88
|
+
direction: 'DESC'
|
|
89
|
+
},
|
|
90
|
+
orderByMedia: {
|
|
91
|
+
field: 'POSITION',
|
|
92
|
+
direction: 'ASC'
|
|
93
|
+
},
|
|
94
|
+
where: {
|
|
95
|
+
status: 'ACTIVE',
|
|
96
|
+
...arg.where
|
|
97
|
+
},
|
|
98
|
+
after: arg.after
|
|
99
|
+
};
|
|
100
|
+
const pageData = await fetchProducts(fetcher, variables);
|
|
101
|
+
return pageData;
|
|
102
|
+
};
|
|
81
103
|
const fetchProducts = async (fetcher, variables)=>{
|
|
82
104
|
return fetcher([
|
|
83
105
|
ProductsDocument,
|
|
@@ -185,4 +207,4 @@ const mergeMediasToProducts = async ({ fetcher, products, isSample, isStorefront
|
|
|
185
207
|
// );
|
|
186
208
|
// };
|
|
187
209
|
|
|
188
|
-
export { getProductQueryAll, getProducts };
|
|
210
|
+
export { getListProductByVariables, getProductQueryAll, getProducts };
|
|
@@ -27,7 +27,7 @@ const composeTypographyV2Css = (typography, isImportant)=>{
|
|
|
27
27
|
${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
|
|
28
28
|
${bold ? `font-weight: bold ${composeImportant};` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
|
|
29
29
|
${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
|
|
30
|
-
${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
|
|
30
|
+
${lineHeight?.desktop ? `line-height: ${lineHeight?.desktop} ${composeImportant};` : ''}
|
|
31
31
|
${italic ? `font-style: italic ${composeImportant};` : ''}
|
|
32
32
|
${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
|
|
33
33
|
${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
|
|
@@ -61,10 +61,10 @@ const composeTypographyV2 = (value, attrs)=>{
|
|
|
61
61
|
fs: !attrs?.italic ? value?.fontStyle : undefined,
|
|
62
62
|
ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
|
|
63
63
|
weight: !attrs?.bold ? value?.fontWeight : undefined,
|
|
64
|
-
ls: value?.letterSpacing
|
|
65
|
-
lh: value?.lineHeight
|
|
64
|
+
ls: value?.letterSpacing
|
|
66
65
|
}),
|
|
67
|
-
...makeStyleResponsive('size', value?.fontSize)
|
|
66
|
+
...makeStyleResponsive('size', value?.fontSize),
|
|
67
|
+
...makeStyleResponsive('lh', value?.lineHeight)
|
|
68
68
|
});
|
|
69
69
|
};
|
|
70
70
|
const composeTypographyAttr = (attrs)=>{
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
const mock = [
|
|
2
|
+
{
|
|
3
|
+
baseID: 'gid://shopify/OnlineStoreBlog/592066740457',
|
|
4
|
+
id: 592066740457,
|
|
5
|
+
title: 'Blog post might appear in a search engine listing',
|
|
6
|
+
created_at: '2024-05-09T04:06:12-04:00',
|
|
7
|
+
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>',
|
|
8
|
+
blog_id: 91970044137,
|
|
9
|
+
author: 'Dev Team',
|
|
10
|
+
user_id: 90371653865,
|
|
11
|
+
published_at: '2024-05-09T04:06:12-04:00',
|
|
12
|
+
updated_at: '2024-05-09T04:06:13-04:00',
|
|
13
|
+
summary_html: '',
|
|
14
|
+
template_suffix: '',
|
|
15
|
+
handle: 'blog-post-might-appear-in-a-search-engine-listing',
|
|
16
|
+
tags: 'vintage',
|
|
17
|
+
admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066740457',
|
|
18
|
+
image: {
|
|
19
|
+
created_at: '2024-05-09T04:06:12-04:00',
|
|
20
|
+
alt: '',
|
|
21
|
+
width: 1073,
|
|
22
|
+
height: 719,
|
|
23
|
+
src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_2.jpg?v=1715241973'
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
baseID: 'gid://shopify/OnlineStoreBlog/592066707689',
|
|
28
|
+
id: 592066707689,
|
|
29
|
+
title: 'ar on your home page or blog.',
|
|
30
|
+
created_at: '2024-05-09T04:05:26-04:00',
|
|
31
|
+
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>',
|
|
32
|
+
blog_id: 91970044137,
|
|
33
|
+
author: 'Dev Team',
|
|
34
|
+
user_id: 90371653865,
|
|
35
|
+
published_at: '2024-05-09T04:05:25-04:00',
|
|
36
|
+
updated_at: '2024-05-09T05:35:29-04:00',
|
|
37
|
+
summary_html: '',
|
|
38
|
+
template_suffix: '',
|
|
39
|
+
handle: 'ar-on-your-home-page-or-blog',
|
|
40
|
+
tags: 'cotton, vintage',
|
|
41
|
+
admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066707689',
|
|
42
|
+
image: {
|
|
43
|
+
created_at: '2024-05-09T04:05:26-04:00',
|
|
44
|
+
alt: '',
|
|
45
|
+
width: 1080,
|
|
46
|
+
height: 719,
|
|
47
|
+
src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_1.jpg?v=1715241926'
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
baseID: 'gid://shopify/OnlineStoreBlog/592066674921',
|
|
52
|
+
id: 592066674921,
|
|
53
|
+
title: 'Add a summary of the post.',
|
|
54
|
+
created_at: '2024-05-09T04:04:44-04:00',
|
|
55
|
+
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>',
|
|
56
|
+
blog_id: 91970044137,
|
|
57
|
+
author: 'Dev Team',
|
|
58
|
+
user_id: 90371653865,
|
|
59
|
+
published_at: '2024-05-09T04:04:44-04:00',
|
|
60
|
+
updated_at: '2024-05-09T04:04:45-04:00',
|
|
61
|
+
summary_html: '',
|
|
62
|
+
template_suffix: '',
|
|
63
|
+
handle: 'add-a-summary-of-the-post',
|
|
64
|
+
tags: '',
|
|
65
|
+
admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592066674921',
|
|
66
|
+
image: {
|
|
67
|
+
created_at: '2024-05-09T04:04:44-04:00',
|
|
68
|
+
alt: '',
|
|
69
|
+
width: 1086,
|
|
70
|
+
height: 718,
|
|
71
|
+
src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_7.jpg?v=1715241885'
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
baseID: 'gid://shopify/OnlineStoreBlog/592058777833',
|
|
76
|
+
id: 592058777833,
|
|
77
|
+
title: 'Article Page - May 7, 10:47:14',
|
|
78
|
+
created_at: '2024-05-06T23:47:59-04:00',
|
|
79
|
+
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>',
|
|
80
|
+
blog_id: 91970044137,
|
|
81
|
+
author: 'GemPages',
|
|
82
|
+
user_id: null,
|
|
83
|
+
published_at: '2024-05-06T23:47:59-04:00',
|
|
84
|
+
updated_at: '2024-05-09T04:06:48-04:00',
|
|
85
|
+
summary_html: '',
|
|
86
|
+
template_suffix: 'gp-template-512584275137135821',
|
|
87
|
+
handle: 'article-page-may-7-10-47-14',
|
|
88
|
+
tags: 'vintage',
|
|
89
|
+
admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592058777833',
|
|
90
|
+
image: {
|
|
91
|
+
created_at: '2024-05-09T04:06:41-04:00',
|
|
92
|
+
alt: '',
|
|
93
|
+
width: 578,
|
|
94
|
+
height: 585,
|
|
95
|
+
src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_3.png?v=1715242002'
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
baseID: 'gid://shopify/OnlineStoreBlog/592058679529',
|
|
100
|
+
id: 592058679529,
|
|
101
|
+
title: 'Blog about your latest products or deals',
|
|
102
|
+
created_at: '2024-05-06T22:36:55-04:00',
|
|
103
|
+
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>',
|
|
104
|
+
blog_id: 91970044137,
|
|
105
|
+
author: 'Dev Team',
|
|
106
|
+
user_id: 90371653865,
|
|
107
|
+
published_at: '2024-05-06T22:36:54-04:00',
|
|
108
|
+
updated_at: '2024-05-09T03:46:39-04:00',
|
|
109
|
+
summary_html: '<span data-mce-fragment="1">Add a summary of the post to appear on your home page or blog.</span>',
|
|
110
|
+
template_suffix: 'gp-template-512584275137135821',
|
|
111
|
+
handle: 'blog-about-your-latest-products-or-deals',
|
|
112
|
+
tags: '',
|
|
113
|
+
admin_graphql_api_id: 'gid://shopify/OnlineStoreArticle/592058679529',
|
|
114
|
+
image: {
|
|
115
|
+
created_at: '2024-05-06T22:36:55-04:00',
|
|
116
|
+
alt: '',
|
|
117
|
+
width: 497,
|
|
118
|
+
height: 618,
|
|
119
|
+
src: 'https://cdn.shopify.com/s/files/1/0692/6562/1225/articles/Screenshot_3.jpg?v=1715049415'
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
];
|
|
123
|
+
const useArticlesQuery = ()=>{
|
|
124
|
+
return mock;
|
|
125
|
+
};
|
|
126
|
+
const useBlogsQuery = ()=>{
|
|
127
|
+
return {
|
|
128
|
+
blogs: {
|
|
129
|
+
edges: [
|
|
130
|
+
{
|
|
131
|
+
node: {
|
|
132
|
+
id: '511006979737518962',
|
|
133
|
+
title: 'News',
|
|
134
|
+
baseID: 'gid://shopify/OnlineStoreBlog/91970044137',
|
|
135
|
+
tags: [],
|
|
136
|
+
handle: 'news',
|
|
137
|
+
descriptionMeta: '',
|
|
138
|
+
description: '',
|
|
139
|
+
titleMeta: '',
|
|
140
|
+
templateSuffix: '',
|
|
141
|
+
platform: 'SHOPIFY'
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
export { useArticlesQuery, useBlogsQuery };
|