@drippr/embed-react 0.1.0

package/dist/index.js

@@ -0,0 +1,628 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DripprFlow: () => DripprFlow
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DripprFlow.tsx
+var React3 = __toESM(require("react"));
+
+// src/InlineContainer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function InlineContainer({
+  src,
+  height,
+  iframeRef,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "iframe",
+        {
+          ref: iframeRef,
+          src,
+          style: {
+            width: "100%",
+            height: `${height}px`,
+            border: "none",
+            display: "block"
+          },
+          loading: "lazy",
+          title: "Drippr Feedback"
+        }
+      )
+    }
+  );
+}
+
+// src/ModalContainer.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ANIMATION_DURATION = 200;
+var MOBILE_BREAKPOINT = 640;
+function ModalContainer({
+  src,
+  height,
+  iframeRef,
+  className,
+  style,
+  open,
+  onOpenChange,
+  trigger
+}) {
+  const [mounted, setMounted] = React.useState(false);
+  const [visible, setVisible] = React.useState(false);
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  React.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      setVisible(false);
+      const timer = setTimeout(() => {
+        setMounted(false);
+      }, ANIMATION_DURATION);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onOpenChange]);
+  React.useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]);
+  const overlayStyles = {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: isMobile ? "flex-end" : "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: isMobile ? 0 : "16px",
+    // Animation
+    opacity: visible ? 1 : 0,
+    transition: `opacity ${ANIMATION_DURATION}ms ease-out`
+  };
+  const dialogStyles = isMobile ? {
+    // Mobile: bottom sheet
+    backgroundColor: "#fff",
+    borderRadius: "16px 16px 0 0",
+    width: "100%",
+    // Use dvh for dynamic viewport on iOS, fallback to vh
+    maxHeight: "calc(100dvh - 32px)",
+    overflow: "hidden",
+    position: "relative",
+    boxShadow: "0 -4px 25px -5px rgba(0, 0, 0, 0.1)",
+    // Animation - slide from bottom
+    transform: visible ? "translateY(0)" : "translateY(100%)",
+    transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`
+  } : {
+    // Desktop: centered modal
+    backgroundColor: "#fff",
+    borderRadius: "12px",
+    width: "100%",
+    maxWidth: "600px",
+    maxHeight: "90vh",
+    overflow: "hidden",
+    position: "relative",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    // Animation - scale + fade
+    opacity: visible ? 1 : 0,
+    transform: visible ? "scale(1)" : "scale(0.95)",
+    transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`
+  };
+  const closeButtonStyles = {
+    position: "absolute",
+    top: "8px",
+    right: "8px",
+    width: "32px",
+    height: "32px",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    color: "#666",
+    fontSize: "28px",
+    lineHeight: 1,
+    zIndex: 1
+  };
+  const handleStyles = {
+    width: "36px",
+    height: "4px",
+    backgroundColor: "#d1d5db",
+    borderRadius: "2px",
+    margin: "6px auto 2px"
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: trigger });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    trigger,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: overlayStyles,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            onOpenChange(false);
+          }
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className,
+            style: {
+              ...dialogStyles,
+              ...style
+            },
+            children: [
+              isMobile && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: handleStyles }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: closeButtonStyles,
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close",
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "iframe",
+                {
+                  ref: iframeRef,
+                  src,
+                  style: {
+                    width: "100%",
+                    height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${Math.min(height, window.innerHeight * 0.85)}px`,
+                    border: "none",
+                    display: "block"
+                  },
+                  loading: "lazy",
+                  title: "Drippr Feedback"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/DrawerContainer.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ANIMATION_DURATION2 = 250;
+var MOBILE_BREAKPOINT2 = 640;
+function DrawerContainer({
+  src,
+  height,
+  iframeRef,
+  className,
+  style,
+  open,
+  onOpenChange,
+  trigger
+}) {
+  const [mounted, setMounted] = React2.useState(false);
+  const [visible, setVisible] = React2.useState(false);
+  const [isMobile, setIsMobile] = React2.useState(false);
+  React2.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT2);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  React2.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      setVisible(false);
+      const timer = setTimeout(() => {
+        setMounted(false);
+      }, ANIMATION_DURATION2);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  React2.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onOpenChange]);
+  React2.useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]);
+  const overlayStyles = {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 9999,
+    // Animation
+    opacity: visible ? 1 : 0,
+    transition: `opacity ${ANIMATION_DURATION2}ms ease-out`
+  };
+  const drawerStyles = isMobile ? {
+    // Mobile: bottom sheet
+    position: "fixed",
+    left: 0,
+    right: 0,
+    top: 32,
+    bottom: 0,
+    width: "100%",
+    backgroundColor: "#fff",
+    borderRadius: "16px 16px 0 0",
+    boxShadow: "0 -4px 25px -5px rgba(0, 0, 0, 0.1)",
+    zIndex: 1e4,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    // Animation - slide from bottom
+    transform: visible ? "translateY(0)" : "translateY(100%)",
+    transition: `transform ${ANIMATION_DURATION2}ms cubic-bezier(0.32, 0.72, 0, 1)`
+  } : {
+    // Desktop: right drawer
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: "480px",
+    backgroundColor: "#fff",
+    boxShadow: "-4px 0 25px -5px rgba(0, 0, 0, 0.1)",
+    zIndex: 1e4,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    // Animation - slide from right
+    transform: visible ? "translateX(0)" : "translateX(100%)",
+    transition: `transform ${ANIMATION_DURATION2}ms cubic-bezier(0.32, 0.72, 0, 1)`
+  };
+  const headerStyles = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: isMobile ? "4px 8px" : "8px",
+    borderBottom: isMobile ? "none" : "1px solid #e5e5e5",
+    flexShrink: 0
+  };
+  const closeButtonStyles = {
+    width: "32px",
+    height: "32px",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    color: "#666",
+    fontSize: "28px",
+    lineHeight: 1
+  };
+  const contentStyles = {
+    flex: 1,
+    overflow: "auto"
+  };
+  const handleStyles = {
+    width: "36px",
+    height: "4px",
+    backgroundColor: "#d1d5db",
+    borderRadius: "2px",
+    margin: "6px auto 2px"
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: trigger });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    trigger,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: overlayStyles,
+        onClick: () => onOpenChange(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          ...drawerStyles,
+          ...style
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: handleStyles }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: headerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              style: closeButtonStyles,
+              onClick: () => onOpenChange(false),
+              "aria-label": "Close",
+              children: "\xD7"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: contentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "iframe",
+            {
+              ref: iframeRef,
+              src,
+              style: {
+                width: "100%",
+                height: isMobile ? `${Math.min(height, window.innerHeight - 80)}px` : `${height}px`,
+                minHeight: isMobile ? void 0 : "100%",
+                border: "none",
+                display: "block"
+              },
+              loading: "lazy",
+              title: "Drippr Feedback"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/DripprFlow.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_BASE_URL = "https://app.drippr.io";
+var DEFAULT_HEIGHT = 700;
+function generateInstanceId() {
+  return `drippr_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function DripprFlow({
+  flowId,
+  mode = "inline",
+  open: controlledOpen,
+  onOpenChange,
+  prefill,
+  children,
+  triggerLabel = "Give Feedback",
+  onSubmitted,
+  className,
+  style,
+  height: fallbackHeight = DEFAULT_HEIGHT,
+  baseUrl = DEFAULT_BASE_URL
+}) {
+  const [instanceId] = React3.useState(generateInstanceId);
+  const [height, setHeight] = React3.useState(fallbackHeight);
+  const [internalOpen, setInternalOpen] = React3.useState(false);
+  const iframeRef = React3.useRef(null);
+  const readyRef = React3.useRef(false);
+  const [expectedOrigin, setExpectedOrigin] = React3.useState("");
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleOpenChange = React3.useCallback(
+    (newOpen) => {
+      if (isControlled) {
+        onOpenChange?.(newOpen);
+      } else {
+        setInternalOpen(newOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  const src = React3.useMemo(() => {
+    const url = new URL(`/submit/${flowId}`, baseUrl);
+    url.searchParams.set("embed", "1");
+    url.searchParams.set("instanceId", instanceId);
+    setExpectedOrigin(url.origin);
+    return url.toString();
+  }, [flowId, baseUrl, instanceId]);
+  const api = React3.useMemo(
+    () => ({
+      open: () => handleOpenChange(true),
+      close: () => handleOpenChange(false)
+    }),
+    [handleOpenChange]
+  );
+  const sendPrefill = React3.useCallback(() => {
+    if (!prefill || !iframeRef.current?.contentWindow) return;
+    const message = {
+      type: "drippr:prefill",
+      instanceId,
+      payload: prefill
+    };
+    iframeRef.current.contentWindow.postMessage(message, expectedOrigin);
+  }, [prefill, instanceId, expectedOrigin]);
+  const handleMessage = React3.useCallback(
+    (event) => {
+      if (event.origin !== expectedOrigin) return;
+      const data = event.data;
+      if (!data || typeof data !== "object" || !data.type) return;
+      if (!data.type.startsWith("drippr:")) return;
+      if (data.instanceId !== instanceId) return;
+      switch (data.type) {
+        case "drippr:ready":
+          readyRef.current = true;
+          sendPrefill();
+          break;
+        case "drippr:resize":
+          if (typeof data.height === "number" && data.height > 0) {
+            setHeight(data.height);
+          }
+          break;
+        case "drippr:submitted":
+          onSubmitted?.();
+          if (mode !== "inline" && !isControlled) {
+            handleOpenChange(false);
+          }
+          break;
+      }
+    },
+    [expectedOrigin, instanceId, sendPrefill, onSubmitted, mode, isControlled, handleOpenChange]
+  );
+  React3.useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [handleMessage]);
+  React3.useEffect(() => {
+    if (readyRef.current && prefill) {
+      sendPrefill();
+    }
+  }, [prefill, sendPrefill]);
+  const trigger = mode !== "inline" && children ? children(api) : mode !== "inline" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => handleOpenChange(true),
+      style: {
+        padding: "8px 16px",
+        borderRadius: "6px",
+        border: "1px solid #e5e5e5",
+        background: "#fff",
+        cursor: "pointer",
+        fontSize: "14px"
+      },
+      children: triggerLabel
+    }
+  ) : null;
+  if (mode === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      InlineContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style
+      }
+    );
+  }
+  if (mode === "modal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ModalContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style,
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        trigger
+      }
+    );
+  }
+  if (mode === "drawer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      DrawerContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style,
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        trigger
+      }
+    );
+  }
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DripprFlow
+});