@drippr/embed-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,591 @@
+// src/DripprFlow.tsx
+import * as React3 from "react";
+
+// src/InlineContainer.tsx
+import { jsx } from "react/jsx-runtime";
+function InlineContainer({
+  src,
+  height,
+  iframeRef,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: iframeRef,
+          src,
+          style: {
+            width: "100%",
+            height: `${height}px`,
+            border: "none",
+            display: "block"
+          },
+          loading: "lazy",
+          title: "Drippr Feedback"
+        }
+      )
+    }
+  );
+}
+
+// src/ModalContainer.tsx
+import * as React from "react";
+import { Fragment, jsx as jsx2, jsxs } from "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__ */ jsx2(Fragment, { children: trigger });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: overlayStyles,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            onOpenChange(false);
+          }
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className,
+            style: {
+              ...dialogStyles,
+              ...style
+            },
+            children: [
+              isMobile && /* @__PURE__ */ jsx2("div", { style: handleStyles }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  style: closeButtonStyles,
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close",
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "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
+import * as React2 from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsx3(Fragment2, { children: trigger });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    trigger,
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: overlayStyles,
+        onClick: () => onOpenChange(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className,
+        style: {
+          ...drawerStyles,
+          ...style
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          isMobile && /* @__PURE__ */ jsx3("div", { style: handleStyles }),
+          /* @__PURE__ */ jsx3("div", { style: headerStyles, children: /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              style: closeButtonStyles,
+              onClick: () => onOpenChange(false),
+              "aria-label": "Close",
+              children: "\xD7"
+            }
+          ) }),
+          /* @__PURE__ */ jsx3("div", { style: contentStyles, children: /* @__PURE__ */ jsx3(
+            "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
+import { jsx as jsx4 } from "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__ */ jsx4(
+    "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__ */ jsx4(
+      InlineContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style
+      }
+    );
+  }
+  if (mode === "modal") {
+    return /* @__PURE__ */ jsx4(
+      ModalContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style,
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        trigger
+      }
+    );
+  }
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsx4(
+      DrawerContainer,
+      {
+        src,
+        height,
+        onMessage: handleMessage,
+        iframeRef,
+        className,
+        style,
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        trigger
+      }
+    );
+  }
+  return null;
+}
+export {
+  DripprFlow
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@drippr/embed-react",
+  "version": "0.1.0",
+  "description": "React component for embedding Drippr feedback flows",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "publish": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "drippr",
+    "feedback",
+    "embed",
+    "react",
+    "iframe"
+  ],
+  "license": "MIT",
+  "author": "Drippr",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/drippr/embed-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}