@gem-sdk/pages 1.53.0-dev.0 → 1.53.0-dev.26

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.
Files changed (9) hide show
  1. package/dist/cjs/components/builder/Body.js +28 -0
  2. package/dist/cjs/components/builder/Header.js +0 -1
  3. package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +4 -10
  4. package/dist/cjs/pages/builder.js +4 -11
  5. package/dist/esm/components/builder/Body.js +24 -0
  6. package/dist/esm/components/builder/Header.js +0 -1
  7. package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +4 -10
  8. package/dist/esm/pages/builder.js +5 -12
  9. package/package.json +5 -5
package/dist/cjs/components/builder/Body.js ADDED
@@ -0,0 +1,28 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var core = require('@gem-sdk/core');
8
+ var CollectionGlobalProvider = require('../../pages/CollectionGlobalProvider.js');
9
+
10
+ const Body = ({ pageType, isThemeSectionEditor })=>{
11
+ const interactionData = core.usePageStore((s)=>s.interactionData);
12
+ const isInteractionSelectModeClass = react.useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
13
+ interactionData?.isSelectOnPage
14
+ ]);
15
+ return /*#__PURE__*/ jsxRuntime.jsx("div", {
16
+ id: "storefront",
17
+ className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
18
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
19
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
20
+ uid: "ROOT"
21
+ })
22
+ }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
23
+ uid: "ROOT"
24
+ })
25
+ });
26
+ };
27
+
28
+ exports.default = Body;
package/dist/cjs/components/builder/Header.js CHANGED
@@ -25,7 +25,6 @@ const Header = (props)=>{
25
25
  const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
26
26
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
27
27
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
28
- console.log('isSelectOnPage', isSelectOnPage);
29
28
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
30
29
  children: [
31
30
  /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -12,31 +12,25 @@ const InteractionSelectOnPageHeader = ()=>{
12
12
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
13
13
  children: [
14
14
  /*#__PURE__*/ jsxRuntime.jsxs("header", {
15
- className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
15
+ className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
16
16
  children: [
17
17
  /*#__PURE__*/ jsxRuntime.jsx("div", {
18
18
  className: "gp-ml-4 gp-text-xs gp-mt-1",
19
19
  children: "Select mode enabled"
20
20
  }),
21
21
  /*#__PURE__*/ jsxRuntime.jsxs("section", {
22
- className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
22
+ className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
23
23
  children: [
24
24
  /*#__PURE__*/ jsxRuntime.jsx("button", {
25
25
  "data-interaction-mode": "element",
26
26
  onClick: ()=>setInteractionSelectType('element'),
27
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
28
- style: {
29
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
30
- },
27
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
31
28
  children: "Choose an element on page"
32
29
  }),
33
30
  /*#__PURE__*/ jsxRuntime.jsx("button", {
34
31
  "data-interaction-mode": "page",
35
32
  onClick: ()=>setInteractionSelectType('page'),
36
33
  className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
37
- style: {
38
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
39
- },
40
34
  children: "Use entire page"
41
35
  })
42
36
  ]
@@ -59,7 +53,7 @@ const InteractionSelectOnPageHeader = ()=>{
59
53
  ]
60
54
  }),
61
55
  /*#__PURE__*/ jsxRuntime.jsx("div", {
62
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
56
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] gp-z-[999] gp-pointer-events-none ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
63
57
  style: {
64
58
  height: 'calc(100% - 40px)'
65
59
  }
package/dist/cjs/pages/builder.js CHANGED
@@ -8,12 +8,12 @@ var react = require('react');
8
8
  var Toolbox = require('../components/builder/Toolbox.js');
9
9
  var Header = require('../components/builder/Header.js');
10
10
  var Footer = require('../components/builder/Footer.js');
11
- var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
12
11
  var PopupManager = require('../components/builder/PopupManager.js');
13
12
  var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
14
13
  var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
15
14
  var Toolbar = require('../components/builder/Toolbar.js');
16
15
  var SwitchView = require('../components/builder/SwitchView.js');
16
+ var Body = require('../components/builder/Body.js');
17
17
 
18
18
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
19
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
@@ -77,16 +77,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
77
77
  pageType: pageType,
78
78
  isOriginTemplate: isOriginTemplate
79
79
  })),
80
- /*#__PURE__*/ jsxRuntime.jsx("div", {
81
- id: "storefront",
82
- className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
83
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
84
- children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
85
- uid: "ROOT"
86
- })
87
- }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
88
- uid: "ROOT"
89
- })
80
+ /*#__PURE__*/ jsxRuntime.jsx(Body.default, {
81
+ pageType: pageType,
82
+ isThemeSectionEditor: isThemeSectionEditor
90
83
  }),
91
84
  /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
92
85
  editorImageToLayout: editorImageToLayout || false
package/dist/esm/components/builder/Body.js ADDED
@@ -0,0 +1,24 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useMemo } from 'react';
3
+ import { usePageStore, RenderPreview } from '@gem-sdk/core';
4
+ import CollectionGlobalProvider from '../../pages/CollectionGlobalProvider.js';
5
+
6
+ const Body = ({ pageType, isThemeSectionEditor })=>{
7
+ const interactionData = usePageStore((s)=>s.interactionData);
8
+ const isInteractionSelectModeClass = useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
9
+ interactionData?.isSelectOnPage
10
+ ]);
11
+ return /*#__PURE__*/ jsx("div", {
12
+ id: "storefront",
13
+ className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
14
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
15
+ children: /*#__PURE__*/ jsx(RenderPreview, {
16
+ uid: "ROOT"
17
+ })
18
+ }) : /*#__PURE__*/ jsx(RenderPreview, {
19
+ uid: "ROOT"
20
+ })
21
+ });
22
+ };
23
+
24
+ export { Body as default };
package/dist/esm/components/builder/Header.js CHANGED
@@ -21,7 +21,6 @@ const Header = (props)=>{
21
21
  const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
22
22
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
23
23
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
24
- console.log('isSelectOnPage', isSelectOnPage);
25
24
  return /*#__PURE__*/ jsxs(Fragment, {
26
25
  children: [
27
26
  /*#__PURE__*/ jsx(Devices, {}),
package/dist/esm/components/builder/InteractionSelectOnPageHeader.js CHANGED
@@ -8,31 +8,25 @@ const InteractionSelectOnPageHeader = ()=>{
8
8
  return /*#__PURE__*/ jsxs(Fragment, {
9
9
  children: [
10
10
  /*#__PURE__*/ jsxs("header", {
11
- className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
11
+ className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
12
12
  children: [
13
13
  /*#__PURE__*/ jsx("div", {
14
14
  className: "gp-ml-4 gp-text-xs gp-mt-1",
15
15
  children: "Select mode enabled"
16
16
  }),
17
17
  /*#__PURE__*/ jsxs("section", {
18
- className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
18
+ className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
19
19
  children: [
20
20
  /*#__PURE__*/ jsx("button", {
21
21
  "data-interaction-mode": "element",
22
22
  onClick: ()=>setInteractionSelectType('element'),
23
- className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
24
- style: {
25
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
26
- },
23
+ className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
27
24
  children: "Choose an element on page"
28
25
  }),
29
26
  /*#__PURE__*/ jsx("button", {
30
27
  "data-interaction-mode": "page",
31
28
  onClick: ()=>setInteractionSelectType('page'),
32
29
  className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
33
- style: {
34
- cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
35
- },
36
30
  children: "Use entire page"
37
31
  })
38
32
  ]
@@ -55,7 +49,7 @@ const InteractionSelectOnPageHeader = ()=>{
55
49
  ]
56
50
  }),
57
51
  /*#__PURE__*/ jsx("div", {
58
- className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
52
+ className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[4px] gp-mt-[40px] gp-z-[999] gp-pointer-events-none ${selectType === 'page' ? 'gp-z-[999] gp-bg-[#3c67ff]/[0.25]' : ''}`,
59
53
  style: {
60
54
  height: 'calc(100% - 40px)'
61
55
  }
package/dist/esm/pages/builder.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import Head from 'next/head';
5
5
  import { useState, useMemo, useEffect } from 'react';
6
6
  import Toolbox from '../components/builder/Toolbox.js';
7
7
  import Header from '../components/builder/Header.js';
8
8
  import Footer from '../components/builder/Footer.js';
9
- import CollectionGlobalProvider from './CollectionGlobalProvider.js';
10
9
  import PopupManager from '../components/builder/PopupManager.js';
11
10
  import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
12
11
  import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
13
12
  import Toolbar from '../components/builder/Toolbar.js';
14
13
  import Devices from '../components/builder/SwitchView.js';
14
+ import Body from '../components/builder/Body.js';
15
15
 
16
16
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
17
17
  const [loadSuccess, setLoadSuccess] = useState(false);
@@ -75,16 +75,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
75
75
  pageType: pageType,
76
76
  isOriginTemplate: isOriginTemplate
77
77
  })),
78
- /*#__PURE__*/ jsx("div", {
79
- id: "storefront",
80
- className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
81
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
82
- children: /*#__PURE__*/ jsx(RenderPreview, {
83
- uid: "ROOT"
84
- })
85
- }) : /*#__PURE__*/ jsx(RenderPreview, {
86
- uid: "ROOT"
87
- })
78
+ /*#__PURE__*/ jsx(Body, {
79
+ pageType: pageType,
80
+ isThemeSectionEditor: isThemeSectionEditor
88
81
  }),
89
82
  /*#__PURE__*/ jsx(ImageToLayout, {
90
83
  editorImageToLayout: editorImageToLayout || false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.53.0-dev.0",
3
+ "version": "1.53.0-dev.26",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.53.0-dev.0",
30
- "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.0",
31
- "@gem-sdk/plugin-quick-view": "1.53.0-dev.0",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.0"
29
+ "@gem-sdk/core": "1.53.0-dev.28",
30
+ "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.4",
31
+ "@gem-sdk/plugin-quick-view": "1.53.0-dev.4",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.4"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"