add <DubDashboard />

zmeyer44 · Nov 22, 2024 · 56e25da · 56e25da
1 parent 730e523
commit 56e25da
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 157 deletions.
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/referrals/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/referrals/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import useWorkspace from "@/lib/swr/use-workspace";
-import { RewardDashboard } from "@/ui/embed/referrals-embed";
+import { DubDashboard } from "@dub/embed-react";
 import { LoadingSpinner } from "@dub/ui";
 import { redirect } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -37,8 +37,8 @@ export default function ReferralsPageClient() {
   }
 
   return publicToken ? (
-    <RewardDashboard
-      publicToken={publicToken}
+    <DubDashboard
+      linkToken={publicToken}
       onTokenExpired={() => createPublicToken()}
     />
   ) : (

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -19,6 +19,7 @@
     "@dub/tailwind-config": "workspace:*",
     "@dub/ui": "workspace:*",
     "@dub/utils": "workspace:*",
+    "@dub/embed-react": "workspace:*",
     "@hookform/resolvers": "^3.9.0",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@planetscale/database": "^1.18.0",

diff --git a/apps/web/public/embed.js b/apps/web/public/embed.js
@@ -1,9 +1,13 @@
+
+
 (function () {
   window.Dub = window.Dub || {};
 
   // Default configurations
   Dub.options = {
     linkToken: null,
+    widgetUrl: "http://localhost:8888/embed/widget",
+    dashboardUrl: "http://localhost:8888/embed/dashboard",
   };
 
   const buttonStyles = {
@@ -25,10 +29,37 @@
     zIndex: "9998",
   };
 
-  // Add a floating button to the page
-  function createFloatingButton() {
+  const createIframe = (iframeUrl, linkToken) => {
+    const iframe = document.createElement("iframe");
+
+    iframe.src = `${iframeUrl}?token=${linkToken}`;
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    iframe.style.border = "none";
+    iframe.setAttribute("credentialssupport", "");
+    iframe.setAttribute("allow", "same-origin");
+    iframe.crossOrigin = "use-credentials";
+
+    return iframe;
+  };
+
+  // Find the button that should trigger the widget open
+  const initializeDubButton = () => {
+    const button = document.querySelector("[data-dub-token]");
+
+    if (!button) {
+      console.log("No button found with data-dub-token");
+      return;
+    }
+
+    button.addEventListener("click", () => {
+      console.log("Button clicked");
+    });
+  };
+
+  // Add a floating button
+  const createFloatingButton = () => {
     const button = document.createElement("div");
-    button.id = "floating-widget-button";
     Object.assign(button.style, buttonStyles);
 
     button.innerHTML = `
@@ -51,32 +82,25 @@
         return;
       }
 
-      // Create iframe container
       const container = document.createElement("div");
       container.id = "dub-widget-container";
       Object.assign(container.style, containerStyles);
 
-      // Create iframe
-      const iframe = document.createElement("iframe");
-      iframe.src = `http://localhost:8888/embed/widget?token=${Dub.options.linkToken}`;
-      iframe.style.width = "100%";
-      iframe.style.height = "100%";
-      iframe.style.border = "none";
-      iframe.setAttribute("credentialssupport", "");
-      iframe.setAttribute("allow", "same-origin");
-      iframe.crossOrigin = "use-credentials";
+      const { iframeUrl, linkToken } = Dub.options;
+
+      const iframe = createIframe(iframeUrl, linkToken);
 
       container.appendChild(iframe);
       document.body.appendChild(container);
     });
 
     document.body.appendChild(button);
-  }
+  };
 
   // Initialize when DOM is ready
   function init() {
     setTimeout(createFloatingButton, 100);
-    console.log("Initialized");
+    // setTimeout(initializeDubButton, 100);
   }
 
   if (document.readyState === "loading") {

diff --git a/dub.html b/dub.html
@@ -7,12 +7,16 @@
     <script async src="http://localhost:8888/embed.js"></script>
   </head>
   <body>
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
       window.addEventListener("load", function () {
         window.Dub.options = {
-          linkToken: "dub_embed_7cnHQVYxXxr7tzIAuuPwjDVWT5oC0rD2WyUu", // replace with token
+          linkToken: "dub_embed_cUWcbfn76uAwaHbgoq8yuH6QvOgIaAQb0yoc", // replace with token
         };
       });
-    </script>
+    </script> -->
+
+    <button data-dub-token="dub_embed_cUWcbfn76uAwaHbgoq8yuH6QvOgIaAQb0yoc">
+      Click Me
+    </button>
   </body>
 </html>
diff --git a/packages/embeds/react/README.md b/packages/embeds/react/README.md
@@ -0,0 +1,11 @@
+# `@dub/embed-react`
+
+`@dub/embed-react` is a library of React components that are used embed Dub's widget on third-party websites.
+
+## Installation
+
+To install the package, run:
+
+```bash
+pnpm i @dub/embed-react
+```
diff --git a/packages/widgets/package.json → packages/embeds/react/package.json b/packages/widgets/package.json → packages/embeds/react/package.json
@@ -1,18 +1,21 @@
 {
-  "name": "@dub/widgets",
-  "description": "UI widgets for Dub Partners.",
-  "version": "0.1.66",
+  "name": "@dub/embed-react",
+  "description": "Embed React components for Dub.",
+  "version": "0.0.1",
   "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist/**"
   ],
   "scripts": {
     "build": "tsup",
     "lint": "eslint src/",
+    "dev": "tsup --watch",
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "next": "14.2.0-canary.47",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/packages/widgets/postcss.config.js → packages/embeds/react/postcss.config.js b/packages/widgets/postcss.config.js → packages/embeds/react/postcss.config.js
diff --git a/packages/embeds/react/src/dashboard.tsx b/packages/embeds/react/src/dashboard.tsx
@@ -0,0 +1,48 @@
+import { APP_DOMAIN } from "@dub/utils";
+import { useEffect } from "react";
+
+interface DubDashboardProps {
+  linkToken: string;
+  onTokenExpired?: () => void;
+  url?: string;
+}
+
+const iframeStyles = {
+  width: "100%",
+  height: "100vh",
+  border: "none",
+};
+
+export const DubDashboard = ({
+  linkToken,
+  onTokenExpired,
+  url = `${APP_DOMAIN}/embed/dashboard`,
+}: DubDashboardProps) => {
+  // Listen for messages from the iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== APP_DOMAIN) {
+        return;
+      }
+
+      if (event.data === "TOKEN_EXPIRED") {
+        console.error("[Dub] Link token is expired.");
+        onTokenExpired?.();
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onTokenExpired]);
+
+  // If no link token is provided
+  if (!linkToken) {
+    console.error("[Dub] A link token is required to embed the dashboard.");
+    return null;
+  }
+
+  const dashboardUrl = `${url}?token=${linkToken}`;
+
+  return <iframe src={dashboardUrl} style={iframeStyles} />;
+};
diff --git a/packages/widgets/src/embed.js → packages/embeds/react/src/embed.js b/packages/widgets/src/embed.js → packages/embeds/react/src/embed.js
diff --git a/packages/embeds/react/src/embed.ts b/packages/embeds/react/src/embed.ts
@@ -0,0 +1,16 @@
+// TODO:
+// - Convert to TS
+// - Add a loading state
+// - Add a close button
+// - Inline embed (dashboard)
+// - Floating button + widget
+// - Open on a button click
+
+interface DubOptions {
+  linkToken: string;
+  widgetUrl: string;
+  dashboardUrl: string;
+}
+
+// <DubDashboard />
+// <DubWidget />
diff --git a/packages/embeds/react/src/index.ts b/packages/embeds/react/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./dashboard";
+export * from "./widget";
diff --git a/packages/embeds/react/src/widget.tsx b/packages/embeds/react/src/widget.tsx
@@ -0,0 +1,3 @@
+export const DubWidget = () => {
+  return <div>Dub Widget</div>;
+};
diff --git a/packages/widgets/tailwind.config.ts → packages/embeds/react/tailwind.config.ts b/packages/widgets/tailwind.config.ts → packages/embeds/react/tailwind.config.ts
diff --git a/packages/widgets/tsconfig.json → packages/embeds/react/tsconfig.json b/packages/widgets/tsconfig.json → packages/embeds/react/tsconfig.json
diff --git a/packages/widgets/tsup.config.ts → packages/embeds/react/tsup.config.ts b/packages/widgets/tsup.config.ts → packages/embeds/react/tsup.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
-  entry: ["src/**/*.tsx"],
+  entry: ["src/**/*.ts"],
   format: ["esm"],
   esbuildOptions(options) {
     options.banner = {

diff --git a/packages/widgets/README.md b/packages/widgets/README.md
diff --git a/packages/widgets/src/index.ts b/packages/widgets/src/index.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./dashboard";
		export * from "./widget";