big ugly commit w/ major changes

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+.DS_store

.npmignore

@@ -0,0 +1,3 @@
+/src
+tsconfig.json
+.vscode

dist/WPReactBlockRenderer.d.ts

@@ -0,0 +1,10 @@
+import { RestApiBlockData, BlockRendererConfig, WPBlockRenderer } from "cloakwp";
+import React = require("react");
+/**
+ * A tiny wrapper around the BlockRenderer class from `render-blocks`, simply
+ * for the purposes of tailoring the type parameter defaults for React + CloakWP,
+ * saving users from having to manually specify these type params.
+ */
+export declare class WPReactBlockRenderer<TBlockData = RestApiBlockData> extends WPBlockRenderer<React.ComponentType<any>, React.ReactNode, TBlockData> {
+    constructor(config: BlockRendererConfig<React.ComponentType<any>, React.ReactNode, Partial<TBlockData>>);
+}

dist/WPReactBlockRenderer.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WPReactBlockRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cloakwp_1 = require("cloakwp");
+/**
+ * A tiny wrapper around the BlockRenderer class from `render-blocks`, simply
+ * for the purposes of tailoring the type parameter defaults for React + CloakWP,
+ * saving users from having to manually specify these type params.
+ */
+class WPReactBlockRenderer extends cloakwp_1.WPBlockRenderer {
+    constructor(config) {
+        // We specify a default React-based `render` function, which users can override:
+        let configWithDefaults = {
+            render: (components) => components.map(({ Component, props }, idx) => {
+                const componentProps = {
+                    key: idx,
+                    ...(props ?? {}),
+                };
+                return (0, jsx_runtime_1.jsx)(Component, { ...componentProps });
+            }),
+            ...config,
+        };
+        super(configWithDefaults);
+    }
+}
+exports.WPReactBlockRenderer = WPReactBlockRenderer;

dist/components/AdminBar.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+export type AdminBarProps = {
+    /** Add custom classes to the AdminBar's outermost div. */
+    className?: string;
+    /** When true, a link to the current page's WP REST API endpoint will render. */
+    enableRestApiLink?: boolean;
+    /** When true, AdminBar will be visible to non-logged-in users; you likely only want to use this during testing/development, if at all. */
+    alwaysVisible?: boolean;
+};
+export declare const AdminBar: FC<AdminBarProps>;

dist/components/BlockPreview.d.ts

@@ -0,0 +1,7 @@
+import { RestApiBlockData } from "cloakwp";
+import { WPBlocksConfigReact } from "../types";
+export declare function BlockPreview({ data, config, cmsName, }: {
+    data: RestApiBlockData;
+    config: WPBlocksConfigReact;
+    cmsName?: string;
+}): any;

dist/components/BlockPreview.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockPreview = void 0;
+const cloakwp_1 = require("cloakwp");
+const react_1 = require("react");
+function BlockPreview({ data, config = {}, cmsName, }) {
+    const [blockData, setBlockData] = (0, react_1.useState)(data);
+    const rendered = (0, react_1.useMemo)(() => (0, cloakwp_1.getCMSInstance)(cmsName)
+        .blockRenderer.mergeConfigWith(config)
+        .render([blockData], { customProps: { isIframePreview: true } }), [blockData, config, cmsName]);
+    const handleMessages = (event) => {
+        (0, cloakwp_1.handleWPBlockIframeMessage)(event, {
+            onBlockDataReceipt: (blockData) => {
+                setBlockData(blockData);
+            },
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        // prevent running the following client code on server:
+        if (typeof window !== "undefined") {
+            // don't wait for parent to ask for iframe height, or for ResizeObserver to kick in, just send the height immediately on initial render
+            (0, cloakwp_1.sendBlockHeightToWP)();
+            // Add a message event listener to receive messages from the parent website (i.e. WP Block Editor)
+            window.addEventListener("message", handleMessages);
+            // Tell WP we're ready to receive messages:
+            window.parent?.postMessage("ready", "*");
+            // continuously watch for document height resizes, and send new height to WP when necessary:
+            const heightObserver = (0, cloakwp_1.watchForDocumentHeightChanges)();
+            // Cleanup function to remove event listeners
+            return () => {
+                window.removeEventListener("message", handleMessages);
+                heightObserver?.disconnect();
+            };
+        }
+    }, []);
+    return rendered;
+}
+exports.BlockPreview = BlockPreview;

dist/components/ErrorPage.d.ts

@@ -0,0 +1,3 @@
+export declare function ErrorPage({ errorData }: {
+    errorData: any;
+}): import("react/jsx-runtime").JSX.Element;

dist/components/ErrorPage.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ErrorPage({ errorData }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "px-4 sm:px-6 lg:px-9 mx-auto max-w-7xl lg:max-w-8xl", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex h-[70vh] max-w-none flex-col items-center justify-center gap-y-3 sm:max-w-xl lg:max-w-3xl", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg text-gray-900 sm:text-xl", children: errorData?.data?.status
+                        ? `${errorData.data.status} error`
+                        : `Unknown error` }), (0, jsx_runtime_1.jsx)("h1", { className: "text-4xl mb-5 text-gray-700 sm:text-5xl", children: "Sorry, an error occured." }), (0, jsx_runtime_1.jsx)("p", { children: errorData?.code && `Code: ${errorData.code}` }), (0, jsx_runtime_1.jsx)("p", { children: errorData?.code && `Message: ${errorData.message}` })] }) }));
+}
+exports.ErrorPage = ErrorPage;

dist/components/icons/EditIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function EditIcon({ className }: {
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;

dist/components/icons/EditIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@cloakui/styles");
+function EditIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: (0, styles_1.cx)("w-4 h-4", className), viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" }) }));
+}
+exports.EditIcon = EditIcon;

dist/components/icons/EyeIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function EyeIcon({ className }: {
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;

dist/components/icons/EyeIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EyeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@cloakui/styles");
+function EyeIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: (0, styles_1.cx)("w-4 h-4", className), viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
+}
+exports.EyeIcon = EyeIcon;

dist/components/icons/HomeIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function HomeIcon({ className }: {
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;

dist/components/icons/HomeIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@cloakui/styles");
+function HomeIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: (0, styles_1.cx)("w-4 h-4", className), viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }) }));
+}
+exports.HomeIcon = HomeIcon;

dist/components/icons/index.d.ts

@@ -0,0 +1,3 @@
+export { HomeIcon } from "./HomeIcon";
+export { EditIcon } from "./EditIcon";
+export { EyeIcon } from "./EyeIcon";

dist/components/icons/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EyeIcon = exports.EditIcon = exports.HomeIcon = void 0;
+var HomeIcon_1 = require("./HomeIcon");
+Object.defineProperty(exports, "HomeIcon", { enumerable: true, get: function () { return HomeIcon_1.HomeIcon; } });
+var EditIcon_1 = require("./EditIcon");
+Object.defineProperty(exports, "EditIcon", { enumerable: true, get: function () { return EditIcon_1.EditIcon; } });
+var EyeIcon_1 = require("./EyeIcon");
+Object.defineProperty(exports, "EyeIcon", { enumerable: true, get: function () { return EyeIcon_1.EyeIcon; } });

dist/context/GlobalsContext.d.ts

@@ -0,0 +1,5 @@
+export declare const GlobalsProvider: ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useGlobals: () => any;

dist/context/GlobalsContext.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGlobals = exports.GlobalsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/*
+  A fairly generic Global Context utility that allows CloakWP users to wrap their app with <GlobalsProvider>,
+  and pass in whatever props they want, which become accessible anywhere in their app via the useGlobals() hook.
+  Common use-cases include passing in menu data and ACF Options data.
+*/
+const GlobalsContext = (0, react_1.createContext)({});
+const GlobalsProvider = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(GlobalsContext.Provider, { value: {
+            // the values we provide here will be available from the useGlobals hook from anywhere in the app -- gets rid of prop drilling
+            ...props, // any data you want, such as ACF Options page data, header/footer data, pageData, etc.
+        }, children: children }));
+};
+exports.GlobalsProvider = GlobalsProvider;
+const useGlobals = () => (0, react_1.useContext)(GlobalsContext);
+exports.useGlobals = useGlobals;

dist/hooks/useUser.d.ts

@@ -0,0 +1,3 @@
+export declare function useUser(): {
+    isLoggedIn: boolean;
+};

dist/hooks/useUser.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUser = void 0;
+const react_1 = require("react");
+const cloakwp_1 = require("cloakwp");
+function useUser() {
+    const [isLoggedIn, setIsLoggedIn] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        (0, cloakwp_1.isUserLoggedIn)().then((loginStatus) => setIsLoggedIn(loginStatus));
+    }, []);
+    return {
+        isLoggedIn,
+        // in future add other WP user data here if a WordPress admin user is logged in
+    };
+}
+exports.useUser = useUser;

dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export { WPReactBlockRenderer } from "./WPReactBlockRenderer";
+export { GlobalsProvider, useGlobals } from "./context/GlobalsContext";
+export { ErrorPage } from "./components/ErrorPage";
+export { AdminBar } from "./components/AdminBar";
+export { BlockPreview } from "./components/BlockPreview";
+export { useUser } from "./hooks/useUser";

dist/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUser = exports.BlockPreview = exports.AdminBar = exports.ErrorPage = exports.useGlobals = exports.GlobalsProvider = exports.WPReactBlockRenderer = void 0;
+// Types
+__exportStar(require("./types"), exports);
+var WPReactBlockRenderer_1 = require("./WPReactBlockRenderer");
+Object.defineProperty(exports, "WPReactBlockRenderer", { enumerable: true, get: function () { return WPReactBlockRenderer_1.WPReactBlockRenderer; } });
+// Context
+var GlobalsContext_1 = require("./context/GlobalsContext");
+Object.defineProperty(exports, "GlobalsProvider", { enumerable: true, get: function () { return GlobalsContext_1.GlobalsProvider; } });
+Object.defineProperty(exports, "useGlobals", { enumerable: true, get: function () { return GlobalsContext_1.useGlobals; } });
+// Components
+var ErrorPage_1 = require("./components/ErrorPage");
+Object.defineProperty(exports, "ErrorPage", { enumerable: true, get: function () { return ErrorPage_1.ErrorPage; } });
+var AdminBar_1 = require("./components/AdminBar");
+Object.defineProperty(exports, "AdminBar", { enumerable: true, get: function () { return AdminBar_1.AdminBar; } });
+var BlockPreview_1 = require("./components/BlockPreview");
+Object.defineProperty(exports, "BlockPreview", { enumerable: true, get: function () { return BlockPreview_1.BlockPreview; } });
+// Hooks
+var useUser_1 = require("./hooks/useUser");
+Object.defineProperty(exports, "useUser", { enumerable: true, get: function () { return useUser_1.useUser; } });

dist/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Wrap all generic WP `render-blocks` types to make them React-specific.
+ * Doing so prevents users from having to mess with type parameters all over the place.
+ */
+/// <reference types="react" />
+import { EmptyObjectOrRecord, RestApiBlockData, WPBlockContext, WPBlockDataWithExtraContext, WPBlockRendererConfig, WPBlocksConfig, WPDataRouter, WPGlobalDataRouter, WPSingleBlockConfig, WPSingleBlockConfigWithVariants, WPSingleBlockConfigWithoutVariants, WPVariantsRouter } from "cloakwp";
+type ReactComponent = React.ComponentType;
+export type WPBlockRendererConfigReact<TBlockData = RestApiBlockData> = WPBlockRendererConfig<ReactComponent, TBlockData>;
+export type WPDataRouterReact<TProps = EmptyObjectOrRecord, TBlockData = RestApiBlockData> = WPDataRouter<TProps, Partial<TBlockData>, ReactComponent>;
+export type WPGlobalDataRouterReact<TProps = EmptyObjectOrRecord, TBlockData = RestApiBlockData> = WPGlobalDataRouter<TProps, TBlockData, ReactComponent>;
+export type WPSingleBlockConfigWithoutVariantsReact<TProps = EmptyObjectOrRecord, TBlockData = RestApiBlockData> = WPSingleBlockConfigWithoutVariants<ReactComponent, TProps, TBlockData>;
+export type WPVariantsRouterReact<TBlockData = RestApiBlockData> = WPVariantsRouter<ReactComponent, TBlockData>;
+export type WPSingleBlockConfigWithVariantsReact<TBlockData = RestApiBlockData> = WPSingleBlockConfigWithVariants<ReactComponent, TBlockData>;
+export type WPSingleBlockConfigReact<TBlockData = RestApiBlockData> = WPSingleBlockConfig<ReactComponent, TBlockData>;
+export type WPBlocksConfigReact<TBlockData = RestApiBlockData> = WPBlocksConfig<ReactComponent, TBlockData>;
+export type WPBlockDataWithExtraContextReact<TBlockData = RestApiBlockData> = WPBlockDataWithExtraContext<ReactComponent, TBlockData>;
+export type WPBlockContextReact<TBlockData = RestApiBlockData> = WPBlockContext<ReactComponent, TBlockData>;
+export {};

dist/types.js

@@ -0,0 +1,7 @@
+"use strict";
+/**
+ * Wrap all generic WP `render-blocks` types to make them React-specific.
+ * Doing so prevents users from having to mess with type parameters all over the place.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// == End WP `render-blocks` wrappers ==