@yuno-payments/dashboard-embed-sdk 0.1.0

package/README.md

@@ -0,0 +1,72 @@
+# @yuno-payments/dashboard-embed-sdk
+
+Lightweight SDK for embedding the Yuno Dashboard via iframe. Zero dependencies — uses only DOM APIs.
+
+## Installation
+
+```bash
+npm install @yuno-payments/dashboard-embed-sdk
+```
+
+## Usage
+
+```ts
+import { YunoDashboard } from "@yuno-payments/dashboard-embed-sdk";
+
+const sdk = new YunoDashboard({
+  baseUrl: "https://dashboard.y.uno",
+  container: document.getElementById("dashboard")!,
+  token: "your-jwt-token",
+  theme: {
+    tokens: { primary: "#134AC3" },
+    typography: { fontFamily: "'Inter', sans-serif", fontUrl: "https://fonts.googleapis.com/css2?family=Inter" },
+    mode: "light",
+    styles: ".yuno-card { border-radius: 8px; }",
+  },
+  lang: "en",
+});
+
+// Navigate
+sdk.navigate("/connections");
+
+// Update theme
+sdk.setTheme({ tokens: { primary: "#FF0000" } });
+
+// Change language
+sdk.setLang("es");
+
+// Set auth token (reloads iframe)
+sdk.setToken("new-jwt-token");
+
+// Cleanup
+sdk.destroy();
+```
+
+## API
+
+### `new YunoDashboard(config)`
+
+| Option | Type | Required | Description |
+|---|---|---|---|
+| `baseUrl` | `string` | Yes | Dashboard base URL |
+| `container` | `HTMLElement` | Yes | Element to mount the iframe |
+| `token` | `string` | No | JWT auth token |
+| `theme` | `DashboardTheme` | No | Initial theme configuration |
+| `lang` | `string` | No | Language code (default: `"en"`) |
+
+### Methods
+
+- **`setTheme(theme)`** — Update colors, typography, mode, or component styles
+- **`setLang(lang)`** — Change display language
+- **`setToken(token)`** — Set auth token (reloads iframe)
+- **`navigate(path)`** — Navigate to a dashboard route
+- **`destroy()`** — Remove iframe and clean up event listeners
+
+## Development
+
+```bash
+npm install
+npm run build      # Build with tsup
+npm run dev        # Watch mode
+npm run type-check # TypeScript check
+```

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+interface ThemeColors {
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    surface: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    success: string;
+    warning: string;
+    info: string;
+}
+interface ThemeTypography {
+    fontFamily: string;
+    fontUrl: string;
+}
+interface DashboardTheme {
+    tokens?: Partial<ThemeColors>;
+    typography?: Partial<ThemeTypography>;
+    mode?: "light" | "dark";
+    styles?: string;
+}
+interface YunoDashboardConfig {
+    baseUrl: string;
+    container: HTMLElement;
+    token?: string;
+    theme?: DashboardTheme;
+    lang?: string;
+}
+
+declare class YunoDashboard {
+    private iframe;
+    private baseUrl;
+    private ready;
+    private queue;
+    private messageHandler;
+    private initialTheme?;
+    private initialLang?;
+    constructor(config: YunoDashboardConfig);
+    setTheme(theme: DashboardTheme): void;
+    setLang(lang: string): void;
+    setToken(token: string): void;
+    navigate(path: string): void;
+    destroy(): void;
+    private post;
+    private flush;
+    private onReady;
+    private buildSrc;
+}
+
+export { type DashboardTheme, type ThemeColors, type ThemeTypography, YunoDashboard, type YunoDashboardConfig };

package/dist/index.js

@@ -0,0 +1,91 @@
+// src/yuno-dashboard.ts
+var YunoDashboard = class {
+  constructor(config) {
+    this.ready = false;
+    this.queue = [];
+    this.baseUrl = config.baseUrl;
+    this.initialTheme = config.theme;
+    this.initialLang = config.lang;
+    this.iframe = document.createElement("iframe");
+    this.iframe.style.width = "100%";
+    this.iframe.style.height = "100%";
+    this.iframe.style.border = "none";
+    this.iframe.title = "Yuno Dashboard";
+    this.iframe.src = this.buildSrc(config.token);
+    this.messageHandler = (e) => {
+      if (e.data?.action === "ready" && e.origin === this.baseUrl) {
+        this.onReady();
+      }
+    };
+    window.addEventListener("message", this.messageHandler);
+    config.container.appendChild(this.iframe);
+  }
+  setTheme(theme) {
+    if (theme.tokens || theme.typography) {
+      const themePayload = {};
+      if (theme.tokens) themePayload.colors = theme.tokens;
+      if (theme.typography) themePayload.typography = theme.typography;
+      this.post({ action: "setTheme", theme: themePayload });
+    }
+    if (theme.mode) {
+      this.post({ action: "setMode", mode: theme.mode });
+    }
+    if (theme.styles !== void 0) {
+      this.post({ action: "setComponentStyles", css: theme.styles });
+    }
+  }
+  setLang(lang) {
+    this.post({ action: "setLang", lang });
+  }
+  setToken(token) {
+    this.ready = false;
+    this.iframe.src = this.buildSrc(token);
+  }
+  navigate(path) {
+    this.post({ action: "navigate", path });
+  }
+  destroy() {
+    window.removeEventListener("message", this.messageHandler);
+    this.iframe.remove();
+    this.queue = [];
+    this.ready = false;
+  }
+  post(message) {
+    if (this.ready && this.iframe.contentWindow) {
+      this.iframe.contentWindow.postMessage(message, this.baseUrl);
+    } else {
+      this.queue.push(message);
+    }
+  }
+  flush() {
+    const pending = this.queue.splice(0);
+    for (const message of pending) {
+      if (this.iframe.contentWindow) {
+        this.iframe.contentWindow.postMessage(message, this.baseUrl);
+      }
+    }
+  }
+  onReady() {
+    this.ready = true;
+    if (this.initialTheme) {
+      this.setTheme(this.initialTheme);
+    }
+    if (this.initialLang) {
+      this.setLang(this.initialLang);
+    }
+    this.flush();
+  }
+  buildSrc(token) {
+    const params = new URLSearchParams({
+      embed: "true",
+      theme: "light",
+      lang: this.initialLang ?? "en"
+    });
+    if (token) params.set("token", token);
+    return `${this.baseUrl}/connections?${params.toString()}`;
+  }
+};
+export {
+  YunoDashboard
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/yuno-dashboard.ts"],"sourcesContent":["import type { DashboardTheme, YunoDashboardConfig } from \"./types\";\n\nexport class YunoDashboard {\n  private iframe: HTMLIFrameElement;\n  private baseUrl: string;\n  private ready = false;\n  private queue: Record<string, unknown>[] = [];\n  private messageHandler: (e: MessageEvent) => void;\n  private initialTheme?: DashboardTheme;\n  private initialLang?: string;\n\n  constructor(config: YunoDashboardConfig) {\n    this.baseUrl = config.baseUrl;\n    this.initialTheme = config.theme;\n    this.initialLang = config.lang;\n\n    this.iframe = document.createElement(\"iframe\");\n    this.iframe.style.width = \"100%\";\n    this.iframe.style.height = \"100%\";\n    this.iframe.style.border = \"none\";\n    this.iframe.title = \"Yuno Dashboard\";\n    this.iframe.src = this.buildSrc(config.token);\n\n    this.messageHandler = (e: MessageEvent) => {\n      if (e.data?.action === \"ready\" && e.origin === this.baseUrl) {\n        this.onReady();\n      }\n    };\n    window.addEventListener(\"message\", this.messageHandler);\n\n    config.container.appendChild(this.iframe);\n  }\n\n  setTheme(theme: DashboardTheme): void {\n    if (theme.tokens || theme.typography) {\n      const themePayload: Record<string, unknown> = {};\n      if (theme.tokens) themePayload.colors = theme.tokens;\n      if (theme.typography) themePayload.typography = theme.typography;\n      this.post({ action: \"setTheme\", theme: themePayload });\n    }\n    if (theme.mode) {\n      this.post({ action: \"setMode\", mode: theme.mode });\n    }\n    if (theme.styles !== undefined) {\n      this.post({ action: \"setComponentStyles\", css: theme.styles });\n    }\n  }\n\n  setLang(lang: string): void {\n    this.post({ action: \"setLang\", lang });\n  }\n\n  setToken(token: string): void {\n    this.ready = false;\n    this.iframe.src = this.buildSrc(token);\n  }\n\n  navigate(path: string): void {\n    this.post({ action: \"navigate\", path });\n  }\n\n  destroy(): void {\n    window.removeEventListener(\"message\", this.messageHandler);\n    this.iframe.remove();\n    this.queue = [];\n    this.ready = false;\n  }\n\n  private post(message: Record<string, unknown>): void {\n    if (this.ready && this.iframe.contentWindow) {\n      this.iframe.contentWindow.postMessage(message, this.baseUrl);\n    } else {\n      this.queue.push(message);\n    }\n  }\n\n  private flush(): void {\n    const pending = this.queue.splice(0);\n    for (const message of pending) {\n      if (this.iframe.contentWindow) {\n        this.iframe.contentWindow.postMessage(message, this.baseUrl);\n      }\n    }\n  }\n\n  private onReady(): void {\n    this.ready = true;\n    if (this.initialTheme) {\n      this.setTheme(this.initialTheme);\n    }\n    if (this.initialLang) {\n      this.setLang(this.initialLang);\n    }\n    this.flush();\n  }\n\n  private buildSrc(token?: string): string {\n    const params = new URLSearchParams({\n      embed: \"true\",\n      theme: \"light\",\n      lang: this.initialLang ?? \"en\",\n    });\n    if (token) params.set(\"token\", token);\n    return `${this.baseUrl}/connections?${params.toString()}`;\n  }\n}\n"],"mappings":";AAEO,IAAM,gBAAN,MAAoB;AAAA,EASzB,YAAY,QAA6B;AANzC,SAAQ,QAAQ;AAChB,SAAQ,QAAmC,CAAC;AAM1C,SAAK,UAAU,OAAO;AACtB,SAAK,eAAe,OAAO;AAC3B,SAAK,cAAc,OAAO;AAE1B,SAAK,SAAS,SAAS,cAAc,QAAQ;AAC7C,SAAK,OAAO,MAAM,QAAQ;AAC1B,SAAK,OAAO,MAAM,SAAS;AAC3B,SAAK,OAAO,MAAM,SAAS;AAC3B,SAAK,OAAO,QAAQ;AACpB,SAAK,OAAO,MAAM,KAAK,SAAS,OAAO,KAAK;AAE5C,SAAK,iBAAiB,CAAC,MAAoB;AACzC,UAAI,EAAE,MAAM,WAAW,WAAW,EAAE,WAAW,KAAK,SAAS;AAC3D,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,KAAK,cAAc;AAEtD,WAAO,UAAU,YAAY,KAAK,MAAM;AAAA,EAC1C;AAAA,EAEA,SAAS,OAA6B;AACpC,QAAI,MAAM,UAAU,MAAM,YAAY;AACpC,YAAM,eAAwC,CAAC;AAC/C,UAAI,MAAM,OAAQ,cAAa,SAAS,MAAM;AAC9C,UAAI,MAAM,WAAY,cAAa,aAAa,MAAM;AACtD,WAAK,KAAK,EAAE,QAAQ,YAAY,OAAO,aAAa,CAAC;AAAA,IACvD;AACA,QAAI,MAAM,MAAM;AACd,WAAK,KAAK,EAAE,QAAQ,WAAW,MAAM,MAAM,KAAK,CAAC;AAAA,IACnD;AACA,QAAI,MAAM,WAAW,QAAW;AAC9B,WAAK,KAAK,EAAE,QAAQ,sBAAsB,KAAK,MAAM,OAAO,CAAC;AAAA,IAC/D;AAAA,EACF;AAAA,EAEA,QAAQ,MAAoB;AAC1B,SAAK,KAAK,EAAE,QAAQ,WAAW,KAAK,CAAC;AAAA,EACvC;AAAA,EAEA,SAAS,OAAqB;AAC5B,SAAK,QAAQ;AACb,SAAK,OAAO,MAAM,KAAK,SAAS,KAAK;AAAA,EACvC;AAAA,EAEA,SAAS,MAAoB;AAC3B,SAAK,KAAK,EAAE,QAAQ,YAAY,KAAK,CAAC;AAAA,EACxC;AAAA,EAEA,UAAgB;AACd,WAAO,oBAAoB,WAAW,KAAK,cAAc;AACzD,SAAK,OAAO,OAAO;AACnB,SAAK,QAAQ,CAAC;AACd,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,KAAK,SAAwC;AACnD,QAAI,KAAK,SAAS,KAAK,OAAO,eAAe;AAC3C,WAAK,OAAO,cAAc,YAAY,SAAS,KAAK,OAAO;AAAA,IAC7D,OAAO;AACL,WAAK,MAAM,KAAK,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EAEQ,QAAc;AACpB,UAAM,UAAU,KAAK,MAAM,OAAO,CAAC;AACnC,eAAW,WAAW,SAAS;AAC7B,UAAI,KAAK,OAAO,eAAe;AAC7B,aAAK,OAAO,cAAc,YAAY,SAAS,KAAK,OAAO;AAAA,MAC7D;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,UAAgB;AACtB,SAAK,QAAQ;AACb,QAAI,KAAK,cAAc;AACrB,WAAK,SAAS,KAAK,YAAY;AAAA,IACjC;AACA,QAAI,KAAK,aAAa;AACpB,WAAK,QAAQ,KAAK,WAAW;AAAA,IAC/B;AACA,SAAK,MAAM;AAAA,EACb;AAAA,EAEQ,SAAS,OAAwB;AACvC,UAAM,SAAS,IAAI,gBAAgB;AAAA,MACjC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM,KAAK,eAAe;AAAA,IAC5B,CAAC;AACD,QAAI,MAAO,QAAO,IAAI,SAAS,KAAK;AACpC,WAAO,GAAG,KAAK,OAAO,gBAAgB,OAAO,SAAS,CAAC;AAAA,EACzD;AACF;","names":[]}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@yuno-payments/dashboard-embed-sdk",
+  "version": "0.1.0",
+  "description": "Lightweight SDK for embedding the Yuno Dashboard via iframe",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" }
+  },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.1",
+    "typescript": "~5.8.3"
+  },
+  "repository": { "type": "git", "url": "https://github.com/yuno-payments/dashboard-embed-sdk.git" },
+  "license": "UNLICENSED",
+  "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org" }
+}