@archbee/app-widget 1.1.0 → 1.1.1

package/index.js

@@ -0,0 +1,480 @@
+var $hXgUO$reactjsxruntime = require("react/jsx-runtime");
+var $hXgUO$react = require("react");
+var $hXgUO$reactdom = require("react-dom");
+var $hXgUO$reactmodal = require("react-modal");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "ArchbeeAppWidget", function () { return $3454c312fc43187e$export$d1cc455138316794; });
+
+
+
+
+
+
+
+
+
+
+
+
+const $7d0ac34aa5949d25$export$15a92cf792322942 = {
+    animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+};
+
+
+const $24a1ab1d9e5e268a$export$7428da3cfb78ae6 = ({ onClose: onClose })=>{
+    const eventStopPropagation = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+        onClick: onClose,
+        className: "ab-doc-container",
+        children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsxs)("div", {
+            onClick: eventStopPropagation,
+            className: "ab-doc-loader",
+            children: [
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray w-1/2 mb-4",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "3rem"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "100%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "75%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "75%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "2.5rem",
+                        width: "25%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "60%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "40%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "100%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray ab-mb-20",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "80%"
+                    }
+                }),
+                /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                    className: "ab-rounded ab-gray",
+                    style: {
+                        ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                        height: "1.75rem",
+                        width: "25%"
+                    }
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+const $671c57dd09bd5436$export$e9f7c27668489a52 = ({ onClose: onClose })=>{
+    const eventStopPropagation = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+        onClick: onClose,
+        className: "ab-doc-search-container",
+        children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+            onClick: eventStopPropagation,
+            className: "ab-doc-search-placeholder",
+            children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                className: "ab-rounded ab-gray",
+                style: {
+                    ...(0, $7d0ac34aa5949d25$export$15a92cf792322942),
+                    height: "3rem",
+                    width: "96%"
+                }
+            })
+        })
+    });
+};
+
+
+const $d0b8a7ae25f50023$export$a65e3ebe24ca6cb5 = ({ spaceId: spaceId, docId: docId, screen: screen = "docs", jwt: jwt, shareableToken: shareableToken, onClose: onClose })=>{
+    var _iframeRef_current;
+    const iframeRef = (0, $hXgUO$react.useRef)(null);
+    const onIframeLoaded = ()=>{
+        const elementId = screen === "docs" ? "ab-doc-placeholder-container" : "ab-search-placeholder-container";
+        const element = document.getElementById(elementId);
+        element === null || element === void 0 ? void 0 : element.remove();
+    };
+    (0, $hXgUO$react.useEffect)(()=>{
+        if (!iframeRef.current) return;
+        const url = $d0b8a7ae25f50023$var$getIframeUrl(spaceId, docId, jwt, shareableToken, screen);
+        iframeRef.current.src = url;
+    }, [
+        screen,
+        spaceId,
+        docId,
+        jwt,
+        shareableToken
+    ]);
+    return /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsxs)("div", {
+        onClick: onClose,
+        className: "ab-modal-container",
+        children: [
+            screen === "docs" && /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                id: "ab-doc-placeholder-container",
+                className: "ab-placeholder-wrapper",
+                children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)((0, $24a1ab1d9e5e268a$export$7428da3cfb78ae6), {
+                    onClose: onClose
+                })
+            }),
+            screen === "search" && /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+                id: "ab-search-placeholder-container",
+                className: "ab-placeholder-wrapper",
+                children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)((0, $671c57dd09bd5436$export$e9f7c27668489a52), {
+                    onClose: onClose
+                })
+            }),
+            /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("iframe", {
+                onLoad: onIframeLoaded,
+                ref: iframeRef,
+                title: "Archbee widget",
+                src: (_iframeRef_current = iframeRef.current) === null || _iframeRef_current === void 0 ? void 0 : _iframeRef_current.src,
+                className: "ab-modal-iframe"
+            })
+        ]
+    });
+};
+const $d0b8a7ae25f50023$var$getIframeUrl = (spaceId, docId, jwt, shareableToken, screen)=>{
+    let iframeUrl = `${undefined}/${spaceId}`;
+    if (docId) iframeUrl = iframeUrl + `/${docId}`;
+    const template = "?template=widget";
+    iframeUrl += template;
+    if (jwt) iframeUrl += `&jwt=${jwt}`;
+    if (shareableToken) iframeUrl += `&shareableToken=${shareableToken}`;
+    if (screen) iframeUrl += `&initialScreen=${screen}`;
+    return iframeUrl;
+};
+
+
+var $5ea18ff364e1e223$export$e923c830cbf8e49c;
+(function(EVENT_TYPE_ENUM) {
+    EVENT_TYPE_ENUM["init"] = "init";
+    EVENT_TYPE_ENUM["showWidget"] = "show-widget";
+    EVENT_TYPE_ENUM["hideWidget"] = "hide-widget";
+})($5ea18ff364e1e223$export$e923c830cbf8e49c || ($5ea18ff364e1e223$export$e923c830cbf8e49c = {}));
+const $5ea18ff364e1e223$export$fddb3f5bc79c4a16 = [
+    "init",
+    "show-widget",
+    "hide-widget"
+];
+const $5ea18ff364e1e223$export$4eadcc42fc7554ad = ()=>{
+    if (typeof window === "undefined") return;
+    return new CustomEvent("show-widget");
+};
+const $5ea18ff364e1e223$export$c6414d05a79532c3 = ()=>{
+    if (typeof window === "undefined") return;
+    return new CustomEvent("hide-widget");
+};
+
+
+const $91b786905c14e19d$export$86fbec116b87613f = ()=>{
+    const [isModalOpen, setIsModalOpen] = (0, $hXgUO$react.useState)(false);
+    const [docId, setDocId] = (0, $hXgUO$react.useState)();
+    const [jwt, setJwt] = (0, $hXgUO$react.useState)();
+    const [shareableToken, setShareableToken] = (0, $hXgUO$react.useState)();
+    const [initialScreen, setInitialScreen] = (0, $hXgUO$react.useState)();
+    const widgetActionListener = (0, $hXgUO$react.useCallback)(()=>{
+        setIsModalOpen(window._archbee.widget.isOpen);
+        setDocId(window._archbee.widget.docId);
+        setJwt(window._archbee.widget.jwt);
+        setShareableToken(window._archbee.widget.shareableToken);
+        setInitialScreen(window._archbee.widget.widgetType);
+        const widget = document.getElementsByClassName("ab-widget");
+        if (!widget.length) return;
+        if (window._archbee.widget.isOpen) widget[0].removeAttribute("style");
+        else widget[0].setAttribute("style", "visibility: hidden");
+    }, []);
+    const onPostMessageReceived = (0, $hXgUO$react.useCallback)(({ data: data })=>{
+        if (data.source !== "archbee-widget") return;
+        switch(data.type){
+            case "ab-doc-close":
+                closeModal();
+                break;
+            default:
+                break;
+        }
+    }, []);
+    (0, $hXgUO$react.useEffect)(()=>{
+        window.addEventListener((0, $5ea18ff364e1e223$export$e923c830cbf8e49c).showWidget, widgetActionListener);
+        window.addEventListener((0, $5ea18ff364e1e223$export$e923c830cbf8e49c).hideWidget, widgetActionListener);
+        window.addEventListener("message", onPostMessageReceived);
+        return ()=>{
+            window.removeEventListener((0, $5ea18ff364e1e223$export$e923c830cbf8e49c).showWidget, widgetActionListener);
+            window.removeEventListener((0, $5ea18ff364e1e223$export$e923c830cbf8e49c).hideWidget, widgetActionListener);
+            window.removeEventListener("message", onPostMessageReceived);
+        };
+    }, [
+        widgetActionListener,
+        onPostMessageReceived
+    ]);
+    const closeModal = ()=>{
+        window._archbee.widget.isOpen = false;
+        window._archbee.widget.docId = undefined;
+        window.dispatchEvent((0, $5ea18ff364e1e223$export$c6414d05a79532c3)());
+    };
+    (0, $hXgUO$react.useEffect)(()=>{
+        (0, ($parcel$interopDefault($hXgUO$reactmodal))).setAppElement("#archbee-docs-widget-modal");
+    }, []);
+    return /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+        id: "archbee-docs-widget-modal",
+        children: isModalOpen && /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)((0, $d0b8a7ae25f50023$export$a65e3ebe24ca6cb5), {
+            docId: docId || "",
+            spaceId: window._archbee.widget.spaceId || window._archbee.widget.collectionId || "",
+            jwt: jwt,
+            shareableToken: shareableToken,
+            screen: initialScreen,
+            onClose: closeModal
+        })
+    });
+};
+var $91b786905c14e19d$export$2e2bcd8739ae039 = $91b786905c14e19d$export$86fbec116b87613f;
+
+
+const $a328aa60f920ce82$export$b3890eb0ae9dca99 = (cb)=>{
+    const element = document.getElementsByClassName("ab-widget")[0];
+    (0, ($parcel$interopDefault($hXgUO$reactdom))).render(/*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)((0, ($parcel$interopDefault($hXgUO$react))).StrictMode, {
+        children: /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)((0, $91b786905c14e19d$export$2e2bcd8739ae039), {})
+    }), element, ()=>cb && cb(element));
+};
+
+
+
+const $9913b3312051bc1e$export$e41ef1391ce9e919 = (widget)=>{
+    window._archbee.widget = {
+        ...widget
+    };
+    window._archbee.widget.isOpen = false;
+};
+const $9913b3312051bc1e$export$18d0fd55b1b3892d = (widg, render)=>{
+    if (typeof document.addEventListener !== "function") return;
+    window._archbee.widget = {
+        ...window._archbee.widget,
+        ...widg
+    };
+    try {
+        render(widg.onRenderFinish);
+    } catch (err) {
+        console.log(err);
+    }
+};
+const $9913b3312051bc1e$export$26ae5ca175b4ec5a = ()=>{
+    if (document.getElementsByClassName("ab-widget").length) return;
+    const abDiv = document.createElement("div");
+    abDiv.style.cssText = "visibility:hidden";
+    abDiv.className = `ab-widget ab-id-${Date.now()}`;
+    document.body.appendChild(abDiv);
+};
+
+
+const $12e413341357248b$export$5cfe1e4796fafad8 = ()=>{
+    if (!("Proxy" in window)) {
+        console.warn("Your browser doesn't support Proxies.");
+        return;
+    }
+    const proxy = new Proxy(window._archbee.queue, {
+        get (target, property, receiver) {
+            return Reflect.get(target, property, receiver);
+        },
+        apply (target, thisArg, argumentsList) {
+            return thisArg[target].apply(this, argumentsList);
+        },
+        set (target, property, value) {
+            $12e413341357248b$export$403ad7fb28be9f07(target);
+            return Reflect.set(target, property, value);
+        },
+        deleteProperty (target, property) {
+            return Reflect.deleteProperty(target, property);
+        }
+    });
+    return proxy;
+};
+const $12e413341357248b$export$403ad7fb28be9f07 = (proxy)=>{
+    if (!proxy.length) return;
+    proxy.forEach((event, index)=>{
+        // keep this here for now
+        console.log("widget event received:", event.eventType, window._archbee.widget);
+        if (event.hasExecuted || !(0, $5ea18ff364e1e223$export$fddb3f5bc79c4a16).includes(event.eventType)) {
+            proxy.splice(index, 1);
+            return;
+        }
+        if (event.eventType === (0, $5ea18ff364e1e223$export$e923c830cbf8e49c).init) {
+            (0, $9913b3312051bc1e$export$e41ef1391ce9e919)(event);
+            (0, $9913b3312051bc1e$export$18d0fd55b1b3892d)(event, (0, $a328aa60f920ce82$export$b3890eb0ae9dca99));
+        }
+        if (event.eventType === (0, $5ea18ff364e1e223$export$e923c830cbf8e49c).showWidget) {
+            window._archbee.widget.isOpen = true;
+            if (event.docId) window._archbee.widget.docId = event.docId;
+            if (event.widgetType) {
+                const widgetType = event.docId && event.widgetType === "search" ? "docs" : event.widgetType;
+                window._archbee.widget.widgetType = widgetType;
+            } else window._archbee.widget.widgetType = "docs";
+            window.dispatchEvent((0, $5ea18ff364e1e223$export$4eadcc42fc7554ad)());
+        }
+        if (event.eventType === (0, $5ea18ff364e1e223$export$e923c830cbf8e49c).hideWidget) {
+            window._archbee.widget.isOpen = false;
+            window._archbee.widget.docId = undefined;
+            window._archbee.widget.widgetType = undefined;
+            window.dispatchEvent((0, $5ea18ff364e1e223$export$c6414d05a79532c3)());
+        }
+        event.hasExecuted = true;
+    });
+};
+
+
+
+const $ef43c9dfc50ce6f2$export$b66f8e2563088683 = ()=>{
+    var _link_parentNode;
+    const widgetcsslink = document.createElement("link");
+    const link = document.getElementsByTagName("link")[0];
+    widgetcsslink["rel"] = "stylesheet";
+    widgetcsslink["href"] = `${"https://widget.archbee.com/v1"}/index.css`;
+    if (!link) document.getElementsByTagName("head")[0].append(widgetcsslink);
+    link === null || link === void 0 ? void 0 : (_link_parentNode = link.parentNode) === null || _link_parentNode === void 0 ? void 0 : _link_parentNode.appendChild(widgetcsslink);
+};
+const $ef43c9dfc50ce6f2$export$daaeb3f1095d12b8 = (loadingStrategy)=>{
+    var _script_parentNode;
+    const mainUrl = "https://widget.archbee.com/v1";
+    let scripttag = document.createElement("script");
+    scripttag["async"] = loadingStrategy === "lazy";
+    scripttag["src"] = `${mainUrl}/index.js`;
+    const script = document.getElementsByTagName("script")[0];
+    script === null || script === void 0 ? void 0 : (_script_parentNode = script.parentNode) === null || _script_parentNode === void 0 ? void 0 : _script_parentNode.insertBefore(scripttag, script);
+};
+const $ef43c9dfc50ce6f2$export$2d47b06a7861ac47 = (spaceId, jwt, shareableToken, loadingStrategy = "lazy")=>{
+    if (!window._archbee) {
+        // @ts-expect-error
+        window._archbee = window._archbee || {
+            queue: [],
+            push: function(event) {
+                window._archbee.queue.push(event);
+            }
+        };
+        window._archbee.push({
+            eventType: "init",
+            spaceId: spaceId,
+            jwt: jwt,
+            shareableToken: shareableToken
+        });
+        $ef43c9dfc50ce6f2$export$daaeb3f1095d12b8(loadingStrategy);
+    }
+    return window._archbee;
+};
+
+
+
+
+const $3454c312fc43187e$export$d1cc455138316794 = /*#__PURE__*/ (0, $hXgUO$react.forwardRef)(({ className: className, spaceId: spaceId, jwt: jwt, shareableToken: shareableToken, docId: docId, widgetType: widgetType = "docs", loadingStrategy: loadingStrategy = "lazy", onWidgetOpen: onWidgetOpen, onWidgetClose: onWidgetClose, children: children }, ref)=>{
+    const elementRef = (0, $hXgUO$react.useRef)(null);
+    const widgetInstance = (0, $hXgUO$react.useMemo)(()=>{
+        if (typeof window === "undefined") return;
+        return (0, $ef43c9dfc50ce6f2$export$2d47b06a7861ac47)(spaceId, jwt, shareableToken, loadingStrategy);
+    }, [
+        spaceId,
+        jwt,
+        shareableToken,
+        loadingStrategy
+    ]);
+    (0, $hXgUO$react.useImperativeHandle)(ref, ()=>{
+        return {
+            open: onOpenWidget,
+            close: onCloseWidget,
+            instance: ()=>widgetInstance
+        };
+    });
+    const onOpenWidget = ()=>{
+        widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.push({
+            eventType: "show-widget",
+            widgetType: widgetType,
+            docId: docId
+        });
+        onWidgetOpen === null || onWidgetOpen === void 0 ? void 0 : onWidgetOpen();
+    };
+    const onCloseWidget = ()=>{
+        widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.push({
+            eventType: "hide-widget"
+        });
+        onWidgetClose === null || onWidgetClose === void 0 ? void 0 : onWidgetClose();
+    };
+    const onElementClicked = (event)=>{
+        var _elementRef_current;
+        if (typeof window !== "undefined" && ((_elementRef_current = elementRef.current) === null || _elementRef_current === void 0 ? void 0 : _elementRef_current.contains(event.target)) && !ref) {
+            event.preventDefault();
+            onOpenWidget();
+        }
+    };
+    return /*#__PURE__*/ (0, $hXgUO$reactjsxruntime.jsx)("div", {
+        className: className !== null && className !== void 0 ? className : "",
+        ref: elementRef,
+        onClick: onElementClicked,
+        children: children
+    });
+});
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbee/app-widget",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": false,
   "license": "UNLICENSED",
   "author": {
@@ -14,6 +14,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
@@ -67,5 +70,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "types": "types.d.ts"
 }

package/types.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+declare global {
+    interface Window {
+        _archbee: ArchbeeWidgetInstance;
+    }
+}
+interface ArchbeeWidgetInstance {
+    version: string;
+    widget: AbWidgetData;
+    queue: any;
+    push: Function;
+}
+enum EVENT_TYPE_ENUM {
+    init = "init",
+    showWidget = "show-widget",
+    hideWidget = "hide-widget"
+}
+type WidgetEventType = EVENT_TYPE_ENUM.init | EVENT_TYPE_ENUM.showWidget | EVENT_TYPE_ENUM.hideWidget;
+interface AbWidgetData {
+    eventType: WidgetEventType;
+    collectionId?: string;
+    spaceId?: string;
+    docId?: string;
+    isOpen: boolean;
+    selector: string;
+    origin?: string;
+    onRenderFinish?: Function;
+    hasExecuted: boolean;
+    jwt?: string;
+    shareableToken?: string;
+    widgetType?: ScreenType;
+}
+type ScreenType = 'docs' | 'search';
+export interface ArchbeeWidget {
+    open: () => void;
+    close: () => void;
+    instance: () => ArchbeeWidgetInstance;
+}
+type Props = {
+    spaceId: string;
+    docId?: string;
+    jwt?: string;
+    className?: string;
+    shareableToken?: string;
+    widgetType: ScreenType;
+    user?: {
+        id: string;
+        email?: string;
+        first_name?: string;
+        last_name?: string;
+        profile_image_url?: string;
+        [key: string]: any;
+    };
+    loadingStrategy?: 'eager' | 'lazy';
+    onWidgetOpen?: Function;
+    onWidgetClose?: Function;
+};
+export const ArchbeeAppWidget: React.ForwardRefExoticComponent<Props & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ArchbeeWidget>>;