@gem-sdk/core 1.22.31-new-feature.8 → 1.22.31-new-feature.9

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 (5) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +30 -5
  2. package/dist/cjs/components/toolbar/Tooltip.js +22 -0
  3. package/dist/esm/components/ComponentToolbarPreview.js +30 -5
  4. package/dist/esm/components/toolbar/Tooltip.js +18 -0
  5. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -10,8 +10,10 @@ require('swr/mutation');
10
10
  require('vanilla-lazyload');
11
11
  require('../hooks/useCartUI.js');
12
12
  var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
13
+ var Tooltip = require('./toolbar/Tooltip.js');
13
14
  require('../helpers/convert.js');
14
15
 
16
+ const SECTION_LIMIT = 25;
15
17
  const ComponentToolbarPreview = ({ ...props })=>{
16
18
  const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
17
19
  const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -57,6 +59,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
57
59
  if (props.editorConfigs?.toolbar?.hide) {
58
60
  return null;
59
61
  }
62
+ const getSectionNumber = ()=>{
63
+ return root?.childrens?.length || 0;
64
+ };
60
65
  const getIndexSection = ()=>{
61
66
  if (props.tag !== 'Section') {
62
67
  return -1;
@@ -107,6 +112,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
107
112
  const onDuplicate = (e)=>{
108
113
  e.preventDefault();
109
114
  e.stopPropagation();
115
+ if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
116
+ return false;
117
+ }
110
118
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
111
119
  bubbles: true,
112
120
  detail: {
@@ -124,6 +132,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
124
132
  const onAddSection = (e, position)=>{
125
133
  e.preventDefault();
126
134
  e.stopPropagation();
135
+ if (getSectionNumber() >= SECTION_LIMIT) {
136
+ return false;
137
+ }
127
138
  const $target = e.target;
128
139
  if ($target) {
129
140
  setActiveAddSection(position);
@@ -147,6 +158,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
147
158
  "data-toolbar": true,
148
159
  "data-toolbar-section": props.tag == 'Section',
149
160
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
161
+ "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
150
162
  children: [
151
163
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
152
164
  "data-toolbar-show-parent": true,
@@ -263,8 +275,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
263
275
  /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
264
276
  ...props
265
277
  }),
266
- /*#__PURE__*/ jsxRuntime.jsx("div", {
278
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
279
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
280
+ text: "Page has reached Shopify’s 25 section-limit",
281
+ position: "bottom",
267
282
  "data-toolbar-duplicate": true,
283
+ "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
268
284
  onClick: (e)=>onDuplicate(e),
269
285
  "aria-hidden": "true",
270
286
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
@@ -302,7 +318,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
302
318
  /*#__PURE__*/ jsxRuntime.jsx("div", {
303
319
  "data-outline": true,
304
320
  "data-outline-section": props.tag == 'Section',
305
- "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
321
+ "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
322
+ "data-outline-limit": getIndexSection() >= SECTION_LIMIT
306
323
  }),
307
324
  props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxRuntime.jsxs("div", {
308
325
  "data-theme-section-status": true,
@@ -331,8 +348,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
331
348
  }),
332
349
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
333
350
  children: [
334
- /*#__PURE__*/ jsxRuntime.jsx("div", {
351
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
352
+ enable: getSectionNumber() >= SECTION_LIMIT,
353
+ text: "Page has reached Shopify’s 25 section-limit",
354
+ position: "top",
335
355
  "data-toolbar-add-top": true,
356
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
336
357
  "data-toolbar-add-open": activeAddSection == 'above',
337
358
  onClick: (e)=>onAddSection(e, 'above'),
338
359
  "aria-hidden": "true",
@@ -347,8 +368,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
347
368
  })
348
369
  })
349
370
  }),
350
- /*#__PURE__*/ jsxRuntime.jsx("div", {
371
+ /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
372
+ enable: getSectionNumber() >= SECTION_LIMIT,
373
+ text: "Page has reached Shopify’s 25 section-limit",
374
+ position: "top",
351
375
  "data-toolbar-add-bottom": true,
376
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
352
377
  "data-toolbar-add-open": activeAddSection == 'below',
353
378
  onClick: (e)=>onAddSection(e, 'below'),
354
379
  "aria-hidden": "true",
@@ -365,7 +390,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
365
390
  })
366
391
  ]
367
392
  }),
368
- !(props.tag == 'Section' && isThemeSection) && /*#__PURE__*/ jsxRuntime.jsx("div", {
393
+ props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
369
394
  "data-spacing": true,
370
395
  "data-spacing-theme-section": isThemeSectionEditor,
371
396
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
package/dist/cjs/components/toolbar/Tooltip.js ADDED
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+
7
+ function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
8
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
9
+ ...props,
10
+ "data-toolbar-tooltip-trigger": true,
11
+ children: [
12
+ children,
13
+ enable && /*#__PURE__*/ jsxRuntime.jsx("div", {
14
+ "data-toolbar-tooltip": true,
15
+ "data-toolbar-tooltip-position": position,
16
+ children: text
17
+ })
18
+ ]
19
+ });
20
+ }
21
+
22
+ exports.default = Tooltip;
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -8,8 +8,10 @@ import 'swr/mutation';
8
8
  import 'vanilla-lazyload';
9
9
  import '../hooks/useCartUI.js';
10
10
  import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
11
+ import Tooltip from './toolbar/Tooltip.js';
11
12
  import '../helpers/convert.js';
12
13
 
14
+ const SECTION_LIMIT = 25;
13
15
  const ComponentToolbarPreview = ({ ...props })=>{
14
16
  const getParents = useBuilderPreviewStore((s)=>s.getParents);
15
17
  const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -55,6 +57,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
55
57
  if (props.editorConfigs?.toolbar?.hide) {
56
58
  return null;
57
59
  }
60
+ const getSectionNumber = ()=>{
61
+ return root?.childrens?.length || 0;
62
+ };
58
63
  const getIndexSection = ()=>{
59
64
  if (props.tag !== 'Section') {
60
65
  return -1;
@@ -105,6 +110,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
105
110
  const onDuplicate = (e)=>{
106
111
  e.preventDefault();
107
112
  e.stopPropagation();
113
+ if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
114
+ return false;
115
+ }
108
116
  const event = new CustomEvent('editor:toolbar:duplicate-component', {
109
117
  bubbles: true,
110
118
  detail: {
@@ -122,6 +130,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
122
130
  const onAddSection = (e, position)=>{
123
131
  e.preventDefault();
124
132
  e.stopPropagation();
133
+ if (getSectionNumber() >= SECTION_LIMIT) {
134
+ return false;
135
+ }
125
136
  const $target = e.target;
126
137
  if ($target) {
127
138
  setActiveAddSection(position);
@@ -145,6 +156,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
145
156
  "data-toolbar": true,
146
157
  "data-toolbar-section": props.tag == 'Section',
147
158
  "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
159
+ "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
148
160
  children: [
149
161
  /*#__PURE__*/ jsxs("div", {
150
162
  "data-toolbar-show-parent": true,
@@ -261,8 +273,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
261
273
  /*#__PURE__*/ jsx(CreateThemeSection, {
262
274
  ...props
263
275
  }),
264
- /*#__PURE__*/ jsx("div", {
276
+ /*#__PURE__*/ jsx(Tooltip, {
277
+ enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
278
+ text: "Page has reached Shopify’s 25 section-limit",
279
+ position: "bottom",
265
280
  "data-toolbar-duplicate": true,
281
+ "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
266
282
  onClick: (e)=>onDuplicate(e),
267
283
  "aria-hidden": "true",
268
284
  children: /*#__PURE__*/ jsx("svg", {
@@ -300,7 +316,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
300
316
  /*#__PURE__*/ jsx("div", {
301
317
  "data-outline": true,
302
318
  "data-outline-section": props.tag == 'Section',
303
- "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor
319
+ "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
320
+ "data-outline-limit": getIndexSection() >= SECTION_LIMIT
304
321
  }),
305
322
  props.tag === 'Section' && isThemeSection && /*#__PURE__*/ jsxs("div", {
306
323
  "data-theme-section-status": true,
@@ -329,8 +346,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
329
346
  }),
330
347
  props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
331
348
  children: [
332
- /*#__PURE__*/ jsx("div", {
349
+ /*#__PURE__*/ jsx(Tooltip, {
350
+ enable: getSectionNumber() >= SECTION_LIMIT,
351
+ text: "Page has reached Shopify’s 25 section-limit",
352
+ position: "top",
333
353
  "data-toolbar-add-top": true,
354
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
334
355
  "data-toolbar-add-open": activeAddSection == 'above',
335
356
  onClick: (e)=>onAddSection(e, 'above'),
336
357
  "aria-hidden": "true",
@@ -345,8 +366,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
345
366
  })
346
367
  })
347
368
  }),
348
- /*#__PURE__*/ jsx("div", {
369
+ /*#__PURE__*/ jsx(Tooltip, {
370
+ enable: getSectionNumber() >= SECTION_LIMIT,
371
+ text: "Page has reached Shopify’s 25 section-limit",
372
+ position: "top",
349
373
  "data-toolbar-add-bottom": true,
374
+ "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
350
375
  "data-toolbar-add-open": activeAddSection == 'below',
351
376
  onClick: (e)=>onAddSection(e, 'below'),
352
377
  "aria-hidden": "true",
@@ -363,7 +388,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
363
388
  })
364
389
  ]
365
390
  }),
366
- !(props.tag == 'Section' && isThemeSection) && /*#__PURE__*/ jsx("div", {
391
+ props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
367
392
  "data-spacing": true,
368
393
  "data-spacing-theme-section": isThemeSectionEditor,
369
394
  children: /*#__PURE__*/ jsxs("div", {
package/dist/esm/components/toolbar/Tooltip.js ADDED
@@ -0,0 +1,18 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+
3
+ function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
4
+ return /*#__PURE__*/ jsxs("div", {
5
+ ...props,
6
+ "data-toolbar-tooltip-trigger": true,
7
+ children: [
8
+ children,
9
+ enable && /*#__PURE__*/ jsx("div", {
10
+ "data-toolbar-tooltip": true,
11
+ "data-toolbar-tooltip-position": position,
12
+ children: text
13
+ })
14
+ ]
15
+ });
16
+ }
17
+
18
+ export { Tooltip as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.22.31-new-feature.8",
3
+ "version": "1.22.31-new-feature.9",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@gem-sdk/adapter-shopify": "1.22.31-staging.0",
28
- "@gem-sdk/styles": "1.22.31-new-feature.7"
28
+ "@gem-sdk/styles": "1.22.31-new-feature.9"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",