@gem-sdk/pages 1.7.13 → 1.8.0

package/dist/cjs/components/Footer.js

@@ -9,11 +9,11 @@ const Footer = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
     if (!layoutSetting?.showFooter) return null;
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "bg-[#D6D6D6] h-40 flex items-center justify-center",
+        className: "flex h-40 items-center justify-center bg-[#D6D6D6]",
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "bg-[#E2E2E2] h-6 rounded p-1 flex items-center justify-center",
+            className: "flex h-6 items-center justify-center rounded bg-[#E2E2E2] p-1",
             children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                className: "text-[#252525] font-xs",
+                className: "font-xs text-[#252525]",
                 children: "Shopify theme’s footer"
             })
         })

package/dist/cjs/components/Header.js

@@ -7,18 +7,19 @@ var core = require('@gem-sdk/core');
 
 const Header = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
-    if (!layoutSetting?.showHeader) return null;
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "bg-[#D6D6D6] h-12 flex items-center justify-center",
+        className: core.cls('flex h-12 items-center justify-center bg-[#D6D6D6]', {
+            hidden: !layoutSetting?.showHeader
+        }),
         children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            className: "gp-header group bg-[#E2E2E2] children:hover:block cursor-pointer h-6 rounded p-1 flex items-center justify-center",
+            className: "gp-header children:hover:block group flex h-6 cursor-pointer items-center justify-center rounded bg-[#E2E2E2] p-1",
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx("span", {
-                    className: "text-[#252525] font-xs ",
+                    className: "font-xs text-[#252525] ",
                     children: "Shopify theme’s header"
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                    className: "w-0 group-hover:w-auto ml-[5px]",
+                    className: "ml-[5px] w-0 group-hover:w-auto",
                     width: "16",
                     height: "16",
                     viewBox: "0 0 16 16",

package/dist/cjs/pages/CollectionGlobalProvider.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var dynamic = require('next/dynamic');
+
+const CollectionProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.CollectionProvider));
+const CollectionGlobalProvider = ({ children  })=>{
+    const { data: collections , isValidating , error  } = core.useCollectionsQuery({
+        first: 1,
+        orderBy: {
+            direction: 'DESC',
+            field: 'UPDATED_AT'
+        },
+        where: {
+            isSample: false
+        }
+    });
+    const collection = collections?.collections?.edges?.[0]?.node;
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: isValidating ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: "Loading..."
+        }) : error ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            children: [
+                "Error: ",
+                error?.message
+            ]
+        }) : !collection ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: "Collection not found"
+        }) : /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
+            collection: collection,
+            children: children
+        })
+    });
+};
+
+exports.default = CollectionGlobalProvider;

package/dist/cjs/pages/builder.js

@@ -8,8 +8,9 @@ var react = require('react');
 var Toolbox = require('../components/builder/Toolbox.js');
 var Header = require('../components/Header.js');
 var Footer = require('../components/Footer.js');
+var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
 
-const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData  })=>{
+const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType  })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
     const initState = {
         ROOT: {
@@ -22,6 +23,29 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData
     react.useEffect(()=>{
         setLoadSuccess(true);
     }, []);
+    const sectionProvider = /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+        data: sectionData,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
+            state: initState,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
+                loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "builder",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            id: "storefront",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+                                uid: "ROOT"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            id: "visual-content"
+                        })
+                    ]
+                })
+            ]
+        }, "preview")
+    });
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
@@ -48,29 +72,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData
             /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
             /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
                 components: components,
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
-                        state: initState,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
-                            loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "builder",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        id: "storefront",
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                            uid: "ROOT"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        id: "visual-content"
-                                    })
-                                ]
-                            })
-                        ]
-                    }, "preview")
-                })
+                children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
+                    children: sectionProvider
+                }) : sectionProvider
             }),
             /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
         ]

package/dist/esm/components/Footer.js

@@ -5,11 +5,11 @@ const Footer = ()=>{
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
     if (!layoutSetting?.showFooter) return null;
     return /*#__PURE__*/ jsx("div", {
-        className: "bg-[#D6D6D6] h-40 flex items-center justify-center",
+        className: "flex h-40 items-center justify-center bg-[#D6D6D6]",
         children: /*#__PURE__*/ jsx("div", {
-            className: "bg-[#E2E2E2] h-6 rounded p-1 flex items-center justify-center",
+            className: "flex h-6 items-center justify-center rounded bg-[#E2E2E2] p-1",
             children: /*#__PURE__*/ jsx("span", {
-                className: "text-[#252525] font-xs",
+                className: "font-xs text-[#252525]",
                 children: "Shopify theme’s footer"
             })
         })

package/dist/esm/components/Header.js

@@ -1,20 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useShopStore } from '@gem-sdk/core';
+import { useShopStore, cls } from '@gem-sdk/core';
 
 const Header = ()=>{
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
-    if (!layoutSetting?.showHeader) return null;
     return /*#__PURE__*/ jsx("div", {
-        className: "bg-[#D6D6D6] h-12 flex items-center justify-center",
+        className: cls('flex h-12 items-center justify-center bg-[#D6D6D6]', {
+            hidden: !layoutSetting?.showHeader
+        }),
         children: /*#__PURE__*/ jsxs("div", {
-            className: "gp-header group bg-[#E2E2E2] children:hover:block cursor-pointer h-6 rounded p-1 flex items-center justify-center",
+            className: "gp-header children:hover:block group flex h-6 cursor-pointer items-center justify-center rounded bg-[#E2E2E2] p-1",
             children: [
                 /*#__PURE__*/ jsx("span", {
-                    className: "text-[#252525] font-xs ",
+                    className: "font-xs text-[#252525] ",
                     children: "Shopify theme’s header"
                 }),
                 /*#__PURE__*/ jsxs("svg", {
-                    className: "w-0 group-hover:w-auto ml-[5px]",
+                    className: "ml-[5px] w-0 group-hover:w-auto",
                     width: "16",
                     height: "16",
                     viewBox: "0 0 16 16",

package/dist/esm/pages/CollectionGlobalProvider.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useCollectionsQuery } from '@gem-sdk/core';
+import dynamic from 'next/dynamic';
+
+const CollectionProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.CollectionProvider));
+const CollectionGlobalProvider = ({ children  })=>{
+    const { data: collections , isValidating , error  } = useCollectionsQuery({
+        first: 1,
+        orderBy: {
+            direction: 'DESC',
+            field: 'UPDATED_AT'
+        },
+        where: {
+            isSample: false
+        }
+    });
+    const collection = collections?.collections?.edges?.[0]?.node;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: isValidating ? /*#__PURE__*/ jsx("div", {
+            children: "Loading..."
+        }) : error ? /*#__PURE__*/ jsxs("div", {
+            children: [
+                "Error: ",
+                error?.message
+            ]
+        }) : !collection ? /*#__PURE__*/ jsx("div", {
+            children: "Collection not found"
+        }) : /*#__PURE__*/ jsx(CollectionProvider, {
+            collection: collection,
+            children: children
+        })
+    });
+};
+
+export { CollectionGlobalProvider as default };

package/dist/esm/pages/builder.js

@@ -6,8 +6,9 @@ import { useState, useEffect } from 'react';
 import Toolbox from '../components/builder/Toolbox.js';
 import Header from '../components/Header.js';
 import Footer from '../components/Footer.js';
+import CollectionGlobalProvider from './CollectionGlobalProvider.js';
 
-const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData  })=>{
+const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType  })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
     const initState = {
         ROOT: {
@@ -20,6 +21,29 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData
     useEffect(()=>{
         setLoadSuccess(true);
     }, []);
+    const sectionProvider = /*#__PURE__*/ jsx(SectionProvider, {
+        data: sectionData,
+        children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
+            state: initState,
+            children: [
+                /*#__PURE__*/ jsx(Toolbox, {}),
+                loadSuccess && /*#__PURE__*/ jsxs("div", {
+                    className: "builder",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            id: "storefront",
+                            children: /*#__PURE__*/ jsx(RenderPreview, {
+                                uid: "ROOT"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            id: "visual-content"
+                        })
+                    ]
+                })
+            ]
+        }, "preview")
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(NextSeo, {
@@ -46,29 +70,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData
             /*#__PURE__*/ jsx(Header, {}),
             /*#__PURE__*/ jsx(BuilderComponentProvider, {
                 components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
-                        state: initState,
-                        children: [
-                            /*#__PURE__*/ jsx(Toolbox, {}),
-                            loadSuccess && /*#__PURE__*/ jsxs("div", {
-                                className: "builder",
-                                children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        id: "storefront",
-                                        children: /*#__PURE__*/ jsx(RenderPreview, {
-                                            uid: "ROOT"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        id: "visual-content"
-                                    })
-                                ]
-                            })
-                        ]
-                    }, "preview")
-                })
+                children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
+                    children: sectionProvider
+                }) : sectionProvider
             }),
             /*#__PURE__*/ jsx(Footer, {})
         ]

package/dist/types/index.d.ts

@@ -113,6 +113,7 @@ type BuilderPageProps = {
     storefrontHandle?: string | null;
     shopToken?: string | null;
     mode?: RenderMode;
+    pageType: ShopType.PublishedThemePageType;
 };
 declare const BuilderPage: React.FC<BuilderPageProps>;
 

package/package.json

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