@pack/react 0.0.1

package/README.md

@@ -0,0 +1 @@
+# react

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+export { registerSection } from "./register-section";
+export { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
+export { RenderSections } from "./render-sections";
+export { PreviewProvider, PreviewContext, usePreviewContext } from "./preview";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from "./types";
+export { registerSection } from "./register-section";
+export { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
+export { RenderSections } from "./render-sections";
+export { PreviewProvider, PreviewContext, usePreviewContext } from "./preview";

package/dist/preview/PreviewContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PreviewContext: import("react").Context<boolean>;
+export declare const usePreviewContext: () => boolean;
+//# sourceMappingURL=PreviewContent.d.ts.map

package/dist/preview/PreviewContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewContent.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewContent.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc,kCAAgC,CAAC;AAE5D,eAAO,MAAM,iBAAiB,eAAmC,CAAC"}

package/dist/preview/PreviewContent.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const PreviewContext = createContext(false);
+export const usePreviewContext = () => useContext(PreviewContext);

package/dist/preview/PreviewProvider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface PreviewContentProps {
+    children: React.ReactNode;
+    preview?: boolean;
+}
+export declare function PreviewProvider({ preview, children }: PreviewContentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PreviewProvider.d.ts.map

package/dist/preview/PreviewProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewProvider.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAMzE"}

package/dist/preview/PreviewProvider.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { PreviewContext } from "./PreviewContent";
+export function PreviewProvider({ preview, children }) {
+    return (React.createElement(PreviewContext.Provider, { value: !!preview }, children));
+}

package/dist/preview/index.d.ts

@@ -0,0 +1,3 @@
+export { PreviewProvider } from "./PreviewProvider";
+export { PreviewContext, usePreviewContext } from "./PreviewContent";
+//# sourceMappingURL=index.d.ts.map

package/dist/preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/preview/index.js

@@ -0,0 +1,2 @@
+export { PreviewProvider } from "./PreviewProvider";
+export { PreviewContext, usePreviewContext } from "./PreviewContent";

package/dist/register-section.d.ts

@@ -0,0 +1,4 @@
+import { Section, SectionConfig, SectionMap } from "./types";
+export declare const sectionMap: SectionMap;
+export declare function registerSection(section: Section, config: SectionConfig): void;
+//# sourceMappingURL=register-section.d.ts.map

package/dist/register-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-section.d.ts","sourceRoot":"","sources":["../src/register-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,UAAU,EAAE,UAAuC,CAAC;AAEjE,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,QAQtE"}

package/dist/register-section.js

@@ -0,0 +1,7 @@
+export const sectionMap = new Map();
+export function registerSection(section, config) {
+    if (typeof section !== "function") {
+        throw new Error(`The section "${config.name}" is not a valid React component.`);
+    }
+    sectionMap.set(config.name, section);
+}

package/dist/register-storefront-settings-schema.d.ts

@@ -0,0 +1,4 @@
+import { Schema } from "./types";
+export declare const storefrontSettingsSchema: Schema[];
+export declare function registerStorefrontSettingsSchema(settings: Schema[]): void;
+//# sourceMappingURL=register-storefront-settings-schema.d.ts.map

package/dist/register-storefront-settings-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-storefront-settings-schema.d.ts","sourceRoot":"","sources":["../src/register-storefront-settings-schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,eAAO,MAAM,wBAAwB,EAAE,MAAM,EAAO,CAAC;AAErD,wBAAgB,gCAAgC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAElE"}

package/dist/register-storefront-settings-schema.js

@@ -0,0 +1,4 @@
+export const storefrontSettingsSchema = [];
+export function registerStorefrontSettingsSchema(settings) {
+    storefrontSettingsSchema.push(...settings);
+}

package/dist/render-sections.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function RenderSections({ content }: any): React.JSX.Element | null;
+//# sourceMappingURL=render-sections.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqC1B,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAqB9C"}

package/dist/render-sections.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { generateUUID } from "./utils/uuid";
+import { sectionMap } from "./register-section";
+import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+import { useCustomizerShell } from "./useCustomizerShell";
+import { usePreviewContext } from "./preview";
+function Sections({ sections }) {
+    const renderedSections = sections
+        .map((section) => {
+        // Normalize section data
+        const data = section.data || section;
+        const sectionName = data._template;
+        const Section = sectionMap.get(sectionName);
+        if (!Section) {
+            console.warn(`No registered section for name: ${sectionName}`);
+            return null;
+        }
+        return (React.createElement("section", { key: generateUUID(), "data-comp": sectionName, "data-comp-id": section?.id, hidden: data?.sectionVisibility === "hidden" },
+            React.createElement(Section, { "comp-name": sectionName, cms: data })));
+    })
+        .filter(Boolean);
+    return React.createElement(React.Fragment, null, renderedSections);
+}
+export function RenderSections({ content }) {
+    const preview = usePreviewContext();
+    const { content: liveContent } = useCustomizerShell({
+        isPreview: preview,
+        sectionComponents: sectionMap,
+        data: {
+            content,
+            template: content.template?.type,
+            templateType: content.template?.type,
+            handle: content.handle,
+            title: content.title,
+            description: content.description,
+        },
+        storefrontSettingsSchema,
+    });
+    const sections = liveContent?.sections?.nodes || liveContent?.sections;
+    if (!sections)
+        return null;
+    return React.createElement(Sections, { sections: sections });
+}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type Schema = Record<string, any>;
+export type Section = React.ComponentType<any> & {
+    Schema?: Schema;
+};
+export type SectionConfig = {
+    name: string;
+};
+export type SectionMap = Map<string, Section>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACzC,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACrE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useCustomizerShell.d.ts

@@ -0,0 +1,13 @@
+import { SectionMap } from "./types";
+interface useCustomizerShellProps {
+    isPreview?: boolean;
+    sectionComponents?: SectionMap;
+    data?: any;
+    storefrontSettingsSchema?: any;
+}
+export declare const useCustomizerShell: ({ isPreview, sectionComponents, data, storefrontSettingsSchema, }: useCustomizerShellProps) => {
+    content: any;
+    storefrontSettings: any;
+};
+export {};
+//# sourceMappingURL=useCustomizerShell.d.ts.map

package/dist/useCustomizerShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomizerShell.d.ts","sourceRoot":"","sources":["../src/useCustomizerShell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,UAAU,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,wBAAwB,CAAC,EAAE,GAAG,CAAC;CAChC;AAED,eAAO,MAAM,kBAAkB,sEAK5B,uBAAuB;;;CA4GzB,CAAC"}

package/dist/useCustomizerShell.js

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useState } from "react";
+import { connectToParent } from "penpal";
+export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
+    let location;
+    if (typeof window !== "undefined") {
+        location = window.location;
+    }
+    const [content, setContent] = useState(data.content);
+    const [storefrontSettings, setStorefrontSettings] = useState(null);
+    const [parentConnection, setParentConnection] = useState(null);
+    const refreshSections = useCallback(() => {
+        if (!sectionComponents || !parentConnection)
+            return [];
+        const sectionSchemas = [];
+        sectionComponents.forEach((component) => {
+            if (component.Schema) {
+                const evaluatedSchema = typeof component.Schema === "function"
+                    ? component.Schema(data)
+                    : component.Schema;
+                sectionSchemas.push(evaluatedSchema);
+            }
+        });
+        try {
+            parentConnection.setSectionsSchemas(JSON.stringify(sectionSchemas));
+        }
+        catch (error) {
+            parentConnection.displayError("Something went wrong parsing sections");
+        }
+        return;
+    }, [data, parentConnection, sectionComponents]);
+    const refreshStorefrontSettingsSchema = useCallback(() => {
+        if (!storefrontSettingsSchema || !parentConnection || !sectionComponents) {
+            return [];
+        }
+        parentConnection.setStorefrontSettingsSchema(JSON.stringify(storefrontSettingsSchema));
+        return;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, parentConnection, storefrontSettingsSchema]);
+    useEffect(() => {
+        if (!isPreview)
+            return;
+        const connection = connectToParent({
+            methods: {
+                routeToPage(path) {
+                    location?.assign(path);
+                },
+                scrollToSection(sectionId) {
+                    const sectionEl = document.querySelector(`[data-comp-id="${sectionId}"]`);
+                    if (sectionEl)
+                        sectionEl.scrollIntoView({ behavior: "smooth" });
+                },
+                setPageData(content) {
+                    setContent(content);
+                },
+                setStorefrontSettings(settings) {
+                    setStorefrontSettings(settings);
+                },
+            },
+        });
+        connection.promise.then((parent) => {
+            const { template, templateType, content } = data;
+            parent.setCurrentRoute({
+                currentPath: location?.pathname || "",
+                template,
+                templateType,
+                handle: content.handle,
+                title: content.title,
+                description: content.description,
+            });
+            setParentConnection(parent);
+        });
+    }, []);
+    useEffect(() => {
+        if (!isPreview)
+            return;
+        refreshSections();
+        refreshStorefrontSettingsSchema();
+    }, [
+        data,
+        isPreview,
+        refreshSections,
+        refreshStorefrontSettingsSchema,
+        sectionComponents,
+    ]);
+    if (!isPreview) {
+        return {
+            content: data.content,
+            storefrontSettings: data.settings?.settings,
+        };
+    }
+    return { content, storefrontSettings };
+};

package/dist/utils/uuid.d.ts

@@ -0,0 +1,2 @@
+export declare function generateUUID(): string;
+//# sourceMappingURL=uuid.d.ts.map

package/dist/utils/uuid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uuid.d.ts","sourceRoot":"","sources":["../../src/utils/uuid.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,WAM3B"}

package/dist/utils/uuid.js

@@ -0,0 +1,11 @@
+/*
+ * Generate a UUID using crypto and fallback to Math.random if crypto is not available.
+ */
+export function generateUUID() {
+    if (typeof crypto !== "undefined" && !!crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    else {
+        return Math.random().toString(16).substring(2);
+    }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pack/react",
+  "description": "React",
+  "version": "0.0.1",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "npx rimraf dist",
+    "build": "npx tsc",
+    "test": "npx vitest run",
+    "test:watch": "npx vitest"
+  },
+  "author": "Pack",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "penpal": "^6.2.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}