@pack/react 0.0.14-canary.1 → 0.1.0

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import { RenderSections } from "./render-sections";
 import { PreviewProvider } from "./preview/preview-provider";
 import { usePreviewContext } from "./preview/preview-content";
 import { useSiteSettings } from "./use-site-settings";
+import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,GACf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ import { RenderSections } from "./render-sections";
 import { PreviewProvider } from "./preview/preview-provider";
 import { usePreviewContext } from "./preview/preview-content";
 import { useSiteSettings } from "./use-site-settings";
+import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };

package/dist/preview/preview-content.d.ts

@@ -2,6 +2,13 @@
 type PreviewContextValue = {
     isPreview: boolean;
     siteSettings: any;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
     previewStorefrontSettings?: any;
     setPreviewStorefrontSettings: (siteSettings: any) => void;
 };

package/dist/preview/preview-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,8CAIzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}
+{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}

package/dist/preview/preview-content.js

@@ -1,7 +1,8 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 export const PreviewContext = createContext({
     isPreview: false,
     setPreviewStorefrontSettings: () => { },
     siteSettings: undefined,
+    customizerMeta: undefined,
 });
 export const usePreviewContext = () => useContext(PreviewContext);

package/dist/preview/preview-provider.d.ts

@@ -1,9 +1,16 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 interface PreviewContentProps {
     children: ReactNode;
     siteSettings: any;
     isPreviewModeEnabled?: boolean;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
 }
-export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }: PreviewContentProps): React.JSX.Element;
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }: PreviewContentProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=preview-provider.d.ts.map

package/dist/preview/preview-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAW,MAAM,OAAO,CAAC;AAGjD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAAoB,EACpB,YAAY,GACb,EAAE,mBAAmB,qBAgBrB"}
+{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAAoB,EACpB,YAAY,EACZ,cAAc,GACf,EAAE,mBAAmB,qBAmBrB"}

package/dist/preview/preview-provider.js

@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
-import { PreviewContext } from './preview-content';
-export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }) {
+import React, { useState } from "react";
+import { PreviewContext } from "./preview-content";
+import { PreviewToast } from "./preview-toast";
+export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
     const [previewStorefrontSettings, setPreviewStorefrontSettings] = useState();
     return (React.createElement(PreviewContext.Provider, { value: {
             isPreview: !!isPreviewModeEnabled,
             previewStorefrontSettings,
             setPreviewStorefrontSettings,
             siteSettings,
-        } }, children));
+            customizerMeta,
+        } },
+        children,
+        React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
 }

package/dist/preview/preview-toast.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PreviewToastProps {
+    isPreviewModeEnabled: boolean;
+}
+export declare const PreviewToast: ({ isPreviewModeEnabled }: PreviewToastProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=preview-toast.d.ts.map

package/dist/preview/preview-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/preview/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,iBAAiB;IACzB,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAsBD,eAAO,MAAM,YAAY,6BAA8B,iBAAiB,6BA+GvE,CAAC"}

package/dist/preview/preview-toast.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+const Eye = (props) => {
+    return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 12c0-.338.136-.905.493-1.591a7.858 7.858 0 0 1 1.64-2.108C6.374 6.926 8.694 5.75 12 5.75c3.308 0 5.627 1.176 7.116 2.551a7.86 7.86 0 0 1 1.64 2.108c.358.686.494 1.253.494 1.591 0 .338-.136.905-.493 1.591a7.86 7.86 0 0 1-1.64 2.108c-1.49 1.375-3.81 2.551-7.117 2.551-3.308 0-5.627-1.176-7.116-2.551a7.858 7.858 0 0 1-1.64-2.108c-.358-.686-.494-1.253-.494-1.591ZM12 4.25c-3.692 0-6.373 1.324-8.134 2.949a9.356 9.356 0 0 0-1.953 2.517c-.424.814-.663 1.622-.663 2.284 0 .662.24 1.47.663 2.284a9.356 9.356 0 0 0 1.953 2.517C5.627 18.426 8.308 19.75 12 19.75s6.373-1.324 8.134-2.949a9.356 9.356 0 0 0 1.953-2.517c.424-.814.663-1.622.663-2.284 0-.662-.24-1.47-.663-2.284a9.355 9.355 0 0 0-1.953-2.517C18.373 5.574 15.692 4.25 12 4.25ZM9.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z", fill: "currentColor" })));
+};
+export const PreviewToast = ({ isPreviewModeEnabled }) => {
+    const [showToast, setShowToast] = useState(false);
+    const exitPreviewMode = async () => {
+        try {
+            const response = await fetch("/api/edit", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            window.location.reload();
+        }
+        catch (error) {
+            console.error("Error exiting preview:", error.message);
+        }
+    };
+    useEffect(() => {
+        const isIframe = window.self !== window.top;
+        if (isPreviewModeEnabled && !isIframe) {
+            setShowToast(true);
+        }
+    }, [isPreviewModeEnabled]);
+    if (showToast) {
+        return (React.createElement("div", { style: {
+                position: "fixed",
+                zIndex: "2147483647",
+                left: "50%",
+                transform: "translateX(-50%)",
+                padding: "0 16px",
+                bottom: "16px",
+                width: "100%",
+                pointerEvents: "none",
+            } },
+            React.createElement("div", { style: {
+                    margin: "0 auto",
+                    pointerEvents: "auto",
+                    maxWidth: "640px",
+                    boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
+                    width: "100%",
+                    padding: "8px 16px",
+                    backgroundColor: "#1f2937",
+                    color: "#f9fafb",
+                    borderRadius: "8px",
+                    display: "flex",
+                    alignItems: "center",
+                    fontFamily: '"Inter", sans-serif',
+                    justifyContent: "space-between",
+                    gap: "8px",
+                } },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        overflow: "hidden",
+                    } },
+                    React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
+                    React.createElement("p", { style: {
+                            flex: 1,
+                            fontSize: "14px",
+                            lineHeight: "20px",
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                            overflow: "hidden",
+                        } }, "You are currently previewing your storefront with draft content")),
+                React.createElement("span", { role: "button", tabIndex: 0, onClick: exitPreviewMode, onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            exitPreviewMode();
+                        }
+                    }, style: {
+                        cursor: "pointer",
+                        fontSize: 13,
+                        fontWeight: "500",
+                        flexShrink: "0",
+                    } }, "Exit preview mode"))));
+    }
+    return null;
+};

package/dist/render-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA0ClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BA+B9C"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAyClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAiC9C"}

package/dist/render-sections.js

@@ -3,9 +3,9 @@ import { useCustomizerShell } from "./use-customizer-shell";
 import { usePreviewContext } from "./preview/preview-content";
 import { sectionMap } from "./register-section";
 import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+import { useOverlayScript } from "./use-overlay-script";
 function Sections({ sections }) {
     const renderedSections = useMemo(() => {
-        console.log('DEBUG: sections', sections);
         return sections
             .map((section) => {
             // TODO: Return a consistent data structure from the API and the customizer
@@ -16,7 +16,6 @@ function Sections({ sections }) {
             data.dataSource = section.dataSource;
             const schemaKey = data._template;
             const Component = sectionMap.get(schemaKey);
-            console.log('DEBUG: Component', Component);
             if (!Component)
                 return null;
             return (React.createElement("section", { key: key, "data-comp": schemaKey, "data-comp-id": key, hidden: data?.sectionVisibility === "hidden" },
@@ -27,7 +26,7 @@ function Sections({ sections }) {
     return React.createElement(React.Fragment, null, renderedSections);
 }
 export function RenderSections({ content }) {
-    const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
+    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
         environment: "production",
         isPreview,
@@ -42,12 +41,12 @@ export function RenderSections({ content }) {
         },
         storefrontSettingsSchema,
     });
+    useOverlayScript({ isPreview, overlay: customizerMeta?.overlay || {} });
     useEffect(() => {
         storefrontSettings &&
             setPreviewStorefrontSettings({ settings: storefrontSettings });
     }, [setPreviewStorefrontSettings, storefrontSettings]);
     const sections = useMemo(() => {
-        console.log('DEBUG: liveContent', liveContent?.sections?.nodes || liveContent?.sections);
         return liveContent?.sections?.nodes || liveContent?.sections;
     }, [liveContent?.sections]);
     if (!sections)

package/dist/use-customizer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAkIL,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAsIL,CAAC"}

package/dist/use-customizer-shell.js

@@ -11,7 +11,11 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
     };
     useEffect(() => {
         const isIframe = window.self !== window.top;
-        if (!isIframe)
+        /*
+         * Should not try to connect to customizer
+         * if not in an iframe or not in preview mode
+         */
+        if (!isIframe || !isPreview)
             return;
         setShouldConnectToParent(true);
     }, []);
@@ -93,7 +97,6 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
     useEffect(() => {
         if (!isPreview)
             return;
-        console.log('DEBUG: refreshing sections');
         refreshSections();
         refreshStorefrontSettingsSchema();
     }, [

package/dist/use-overlay-script.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface Window {
+        pack?: {
+            isOverlayScriptInjected: boolean;
+        };
+    }
+}
+export declare const useOverlayScript: ({ isPreview, overlay, }: {
+    isPreview: boolean;
+    overlay: {
+        src?: string;
+        version?: string;
+    };
+}) => void;
+//# sourceMappingURL=use-overlay-script.d.ts.map

package/dist/use-overlay-script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-overlay-script.d.ts","sourceRoot":"","sources":["../src/use-overlay-script.ts"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,CAAC,EAAE;YACL,uBAAuB,EAAE,OAAO,CAAC;SAClC,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB;eAIhB,OAAO;aACT;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE;UAmB5C,CAAC"}

package/dist/use-overlay-script.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+export const useOverlayScript = ({ isPreview, overlay, }) => {
+    useEffect(() => {
+        if (isPreview &&
+            (overlay?.src || overlay?.version) &&
+            !window.pack?.isOverlayScriptInjected) {
+            const script = document.createElement("script");
+            script.src =
+                overlay?.src ||
+                    `https://d3dizc9fcooe02.cloudfront.net/overlay@${overlay?.version}/dist/overlay.js`;
+            script.async = true;
+            document.body.appendChild(script);
+            window.pack = { ...window.pack, isOverlayScriptInjected: true };
+        }
+    }, [isPreview, overlay]);
+};

package/dist/use-site-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-site-settings.d.ts","sourceRoot":"","sources":["../src/use-site-settings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAAO,OAAO,MAAM,EAAE,GAAG,CAOpD,CAAC"}
+{"version":3,"file":"use-site-settings.d.ts","sourceRoot":"","sources":["../src/use-site-settings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAAO,OAAO,MAAM,EAAE,GAAG,CAkBpD,CAAC"}

package/dist/use-site-settings.js

@@ -1,7 +1,16 @@
-import { usePreviewContext } from './preview/preview-content';
+import { usePreviewContext } from "./preview/preview-content";
 export const useSiteSettings = () => {
     const { isPreview, previewStorefrontSettings, siteSettings } = usePreviewContext();
-    return isPreview
+    let isIframe = false;
+    if (!(typeof document === "undefined")) {
+        isIframe = window.self !== window.top;
+    }
+    /*
+     * If the storefront both in preview mode and
+     * in an iFrame we want to show the live customizer
+     * preview data. Else, we show the normal site settings data
+     * */
+    return isPreview && isIframe
         ? previewStorefrontSettings
         : siteSettings?.data?.siteSettings;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.0.14-canary.1",
+  "version": "0.1.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {