@notabene/javascript-sdk 1.32.0 → 2.0.0-next.10

package/dist/notabene.js

@@ -0,0 +1,173 @@
+var d = Object.defineProperty;
+var c = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var n = (r, e, t) => c(r, typeof e != "symbol" ? e + "" : e, t);
+var a = /* @__PURE__ */ ((r) => (r.COMPLETE = "complete", r.RESIZE = "resize", r.RESULT = "result", r.READY = "ready", r.INVALID = "invalid", r.MODAL = "openModal", r.ERROR = "error", r.CLOSE = "closeModal", r.CANCEL = "cancel", r))(a || {}), l = /* @__PURE__ */ ((r) => (r.UPDATE = "update", r.REQUEST_RESPONSE = "requestResponse", r))(l || {});
+class m {
+  constructor() {
+    n(this, "listeners", /* @__PURE__ */ new Map());
+    n(this, "port");
+    this.handleMessage = this.handleMessage.bind(this);
+  }
+  setPort(e) {
+    this.port = e, this.port.onmessage = this.handleMessage, this.port.start();
+  }
+  on(e, t) {
+    this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(t);
+  }
+  off(e, t) {
+    const s = this.listeners.get(e);
+    s && (s.delete(t), s.size === 0 && this.listeners.delete(e));
+  }
+  handleMessage(e) {
+    console.log("received message", e.data);
+    const t = e.data;
+    if (typeof t == "object" && t !== null && "type" in t) {
+      const s = t.type, o = this.listeners.get(s);
+      o && o.forEach((i) => i(t));
+    }
+  }
+  // Method to send messages through the port
+  send(e) {
+    this.port && this.port.postMessage(e);
+  }
+}
+class u {
+  // private popup?: HTMLElement;
+  constructor(e, t) {
+    n(this, "_url");
+    n(this, "_value");
+    n(this, "_errors", []);
+    n(this, "iframe");
+    n(this, "eventManager");
+    n(this, "ready", !1);
+    n(this, "modal");
+    this._url = e, this._value = t, this.eventManager = new m(), this.on(a.INVALID, (s) => {
+      s.type === a.INVALID && (this._errors = s.errors, this._value = s.value);
+    }), this.on(a.RESIZE, (s) => {
+      s.type === a.RESIZE && this.iframe && (this.iframe.style.height = `${s.height}px`);
+    });
+  }
+  get url() {
+    return this._url;
+  }
+  get value() {
+    return this._value;
+  }
+  get errors() {
+    return this._errors;
+  }
+  open() {
+    document.location.href = this.url;
+  }
+  mount(e) {
+    const t = document.querySelector(e);
+    if (!t) throw new Error(`parentID ${e} not found`);
+    this.embed(t);
+  }
+  embed(e) {
+    var t, s;
+    this.iframe = document.createElement("iframe"), this.iframe.src = this.url, this.iframe.style.width = "100%", this.iframe.style.height = "100px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", this.iframe.setAttribute("allowtransparency", "true"), this.iframe.style.backgroundColor = "transparent", e.appendChild(this.iframe), window.addEventListener("message", (o) => {
+      var i, h;
+      o.source === ((i = this.iframe) == null ? void 0 : i.contentWindow) && (console.log("received message from iframe", o.data), (h = this.eventManager) == null || h.setPort(o.ports[0]), this.ready = !0);
+    }), (s = (t = this.iframe) == null ? void 0 : t.contentWindow) == null || s.focus();
+  }
+  send(e) {
+    this.eventManager.send(e);
+  }
+  on(e, t) {
+    this.eventManager.on(e, t);
+  }
+  off(e, t) {
+    this.eventManager.off(e, t);
+  }
+  update(e) {
+    this._value = e, this.send({ type: l.UPDATE, value: e });
+  }
+  completion() {
+    return new Promise((e, t) => {
+      this.closeModal(), this.on(a.COMPLETE, (s) => {
+        e(s.response);
+      }), this.on("error", (s) => {
+        t(new Error(s.message));
+      });
+    });
+  }
+  // popup(): void {
+  //   this.popup = document.createElement('div');
+  //   this.popup.style;
+  // }
+  openModal() {
+    this.modal && this.closeModal(), this.modal = document.createElement("dialog"), document.body.appendChild(this.modal), this.embed(this.modal), this.on(a.CANCEL, () => {
+      this.closeModal();
+    }), this.on(a.CLOSE, () => {
+      this.closeModal();
+    }), this.on(a.COMPLETE, () => {
+      this.closeModal();
+    }), this.modal.showModal(), this.modal.addEventListener("click", () => {
+      this.closeModal();
+    });
+  }
+  closeModal() {
+    var e;
+    this.modal && (console.log("closeModal"), (e = this.modal) == null || e.close(), this.modal.remove(), this.modal = void 0);
+  }
+}
+function f(r) {
+  return Object.entries(r).map(([e, t]) => {
+    if (!(e && t)) return;
+    const s = encodeURIComponent(e), o = encodeURIComponent(
+      typeof t == "object" ? JSON.stringify(t) : t
+    );
+    return `${s}=${o}`;
+  }).filter((e) => !!e).join("&");
+}
+class E {
+  constructor(e) {
+    n(this, "nodeUrl");
+    n(this, "authToken");
+    n(this, "uxUrl");
+    n(this, "theme");
+    n(this, "locale");
+    this.uxUrl = e.uxUrl || "https://connect.notabene.id", this.nodeUrl = e.nodeUrl, this.authToken = e.authToken, this.theme = e.theme, this.locale = e.locale;
+  }
+  componentUrl(e, t, s, o) {
+    const i = new URL(this.uxUrl);
+    i.pathname = e;
+    const h = f({
+      authToken: this.authToken,
+      value: t,
+      configuration: s
+    });
+    return i.hash = h, this.nodeUrl && i.searchParams.set("nodeUrl", this.nodeUrl), this.theme && i.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && i.searchParams.set("locale", this.locale), o && (o.callback && i.searchParams.set("callback_url", o.callback), o.redirectUri && i.searchParams.set("redirect_uri", o.redirectUri)), i.toString();
+  }
+  createComponent(e, t, s, o) {
+    return new u(
+      this.componentUrl(e, t, s, o),
+      t
+    );
+  }
+  createWithdrawalAssist(e, t, s) {
+    return this.createComponent("withdrawal-assist", e, t, s);
+  }
+  createDepositAssist(e, t, s) {
+    return this.createComponent("deposit-assist", e, t, s);
+  }
+  createConnect(e, t, s) {
+    return this.createComponent("connect", e, t, s);
+  }
+  createDepositRequest(e, t, s) {
+    return this.createComponent("deposit-request", e, t, s);
+  }
+  decodeFragmentToObject(e) {
+    return e.slice(1).split("&").reduce(
+      (s, o) => {
+        const [i, h] = o.split("=");
+        return s[decodeURIComponent(i)] = decodeURIComponent(h), s;
+      },
+      {}
+    );
+  }
+}
+export {
+  E as default
+};

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.47.7"
+    }
+  ]
+}

package/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@notabene/javascript-sdk",
+  "type": "module",
   "description": "JavaScript SDK for Notabene",
   "homepage": "https://gitlab.com/notabene/open-source/javascript-sdk",
   "repository": {
@@ -8,74 +9,56 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "1.32.0",
-  "main": "dist/index.js",
-  "packageManager": "yarn@3.2.2",
+  "version": "2.0.0-next.10",
+  "source": "src/notabene.ts",
+  "main": "dist/notabene.js",
+  "types": "dist/notabene.d.ts",
   "browserslist": "> 0.5%, last 2 versions, not dead",
-  "targets": {
-    "es": {
-      "source": "src/module/index.ts",
-      "isLibrary": false,
-      "context": "browser",
-      "outputFormat": "esmodule"
-    },
-    "lib": {
-      "source": "src/lib/index.ts",
-      "isLibrary": true,
-      "context": "node",
-      "outputFormat": "commonjs"
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "alias": {
-    "process": false,
-    "buffer": false
-  },
+  "files": [
+    "dist",
+    "src",
+    "package.json",
+    "README.md"
+  ],
   "scripts": {
     "prepare": "husky install",
+    "dev": "vite",
+    "preview": "vite preview",
     "watch": "parcel watch",
-    "dev": "sirv --dev --port 3002 public",
     "build:dev": "yarn build && yarn dev",
-    "build": "yarn build:clean && yarn build:compile",
-    "build:clean": "rimraf dist/ .parcel-cache/",
-    "build:compile": "parcel build --no-source-maps && cp dist/es/index.js public/js/notabene.js",
+    "build:clean": "rimraf dist/ ts-out",
+    "build": "vite build && tsc && api-extractor run",
     "lint": "eslint .",
-    "test": "jest --passWithNoTests --runInBand",
-    "release": "semantic-release"
+    "test": "vitest",
+    "release": "semantic-release",
+    "publish": "yarn build && npm publish --tag next"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@parcel/packager-ts": "^2.5.0",
-    "@parcel/transformer-typescript-types": "^2.5.0",
+    "@commitlint/cli": "^19.4.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/js": "^9.7.0",
+    "@fast-check/vitest": "^0.1.2",
+    "@microsoft/api-extractor": "^7.47.7",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^9.3.0",
     "@semantic-release/npm": "^9.0.1",
-    "@types/jest": "^27.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "buffer": "^6.0.3",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.4.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "fast-check": "^3.20.0",
+    "globals": "^15.8.0",
     "husky": "^7.0.4",
-    "jest": "^28.1.0",
     "lint-staged": "^12.3.4",
     "organize-imports-cli": "^0.9.0",
-    "parcel": "^2.5.0",
-    "prettier": "^2.6.2",
-    "process": "^0.11.10",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.2",
-    "sirv-cli": "^2.0.2",
-    "ts-jest": "^28.0.3",
-    "typescript": "^4.7.2"
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "semantic-release": "^24.1.0",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.2.0",
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5"
   },
   "lint-staged": {
     "*.ts": [
@@ -87,9 +70,5 @@
     "extends": [
       "@commitlint/config-conventional"
     ]
-  },
-  "dependencies": {
-    "jsx-pragmatic": "^2.0.22",
-    "zoid": "^9.0.86"
   }
-}
+}

package/src/__tests__/notabene.test.ts

@@ -0,0 +1,159 @@
+import { fc, test } from '@fast-check/vitest';
+import { describe } from 'vitest';
+import { abitraryCallbackOptions, arbitraryComponent } from '../arbitraries';
+import Notabene from '../notabene';
+import { arbitraryLocale } from '../utils/arbitraries';
+
+describe('Notabene', () => {
+  describe('defaults', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('locale', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      arbitraryLocale(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, locale) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+          locale,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.searchParams.get('locale') === locale &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('minimal', () => {
+    test.prop([arbitraryComponent(), fc.object()])(
+      'Should set the correct values',
+      (component, value) => {
+        const notabene = new Notabene({});
+        const url = new URL(notabene.componentUrl(component, value));
+        return (
+          url.hash === `#value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.hostname === 'connect.notabene.id' &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with uxUrl', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.webAuthority(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, uxAuthority, value) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+          uxUrl: `https://${uxAuthority}`,
+        });
+        const url = new URL(notabene.componentUrl(component, value));
+        const [domain, port] = uxAuthority.split(':');
+        return (
+          url.hostname === domain &&
+          url.port === (port || '') &&
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with value and configuration', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      fc.object(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, configuration) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(
+          notabene.componentUrl(component, value, configuration),
+        );
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(configuration))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}`
+        );
+      },
+    );
+  });
+
+  describe('with value and configuration', () => {
+    test.prop([
+      fc.string({ minLength: 3 }),
+      fc.webUrl(),
+      arbitraryComponent(),
+      fc.object(),
+      fc.object(),
+      abitraryCallbackOptions(),
+    ])(
+      'Should set the correct values',
+      (authToken, nodeUrl, component, value, configuration, callbacks) => {
+        const notabene = new Notabene({
+          nodeUrl,
+          authToken,
+        });
+        const url = new URL(
+          notabene.componentUrl(component, value, configuration, callbacks),
+        );
+        return (
+          url.hash ===
+            `#authToken=${encodeURIComponent(authToken)}&value=${encodeURIComponent(JSON.stringify(value))}&configuration=${encodeURIComponent(JSON.stringify(configuration))}` &&
+          url.searchParams.get('nodeUrl') === nodeUrl &&
+          url.pathname === `/${component}` &&
+          url.searchParams.get('callback_url') === callbacks.callback &&
+          url.searchParams.get('redirect_uri') === callbacks.redirectUri
+        );
+      },
+    );
+  });
+});

package/src/arbitraries.ts

@@ -0,0 +1,13 @@
+import fc from 'fast-check';
+import { CallbackOptions } from './types';
+
+const COMPONENT_MATCHER = /^[a-z0-9-_]+$/;
+// Arbitraries
+export const arbitraryComponent = (): fc.Arbitrary<string> =>
+  fc.stringMatching(COMPONENT_MATCHER);
+
+export const abitraryCallbackOptions = (): fc.Arbitrary<CallbackOptions> =>
+  fc.record({
+    callback: fc.webUrl(),
+    redirectUri: fc.webUrl(),
+  });

package/src/components/EmbeddedComponent.ts

@@ -0,0 +1,185 @@
+import {
+  CMType,
+  HMType,
+  HostMessage,
+  Transaction,
+  TransactionResponse,
+  ValidationError,
+} from '../types';
+import {
+  MessageCallback,
+  MessageEventManager,
+} from '../utils/MessageEventManager';
+
+/**
+ * An embedded Notabene component
+ * @public
+ */
+export default class EmbeddedComponent {
+  private _url: string;
+  private _value: Partial<Transaction>;
+  private _errors: ValidationError[] = [];
+
+  private iframe?: HTMLIFrameElement;
+  private eventManager: MessageEventManager;
+  private ready = false;
+  private modal?: HTMLDialogElement;
+  // private popup?: HTMLElement;
+
+  constructor(url: string, value: Partial<Transaction>) {
+    this._url = url;
+    this._value = value;
+    this.eventManager = new MessageEventManager();
+    this.on(CMType.INVALID, (message) => {
+      if (message.type === CMType.INVALID) {
+        this._errors = message.errors;
+        this._value = message.value as Transaction;
+      }
+    });
+    this.on(CMType.RESIZE, (message) => {
+      if (message.type === CMType.RESIZE) {
+        if (this.iframe) this.iframe.style.height = `${message.height}px`;
+      }
+    });
+  }
+
+  public get url(): string {
+    return this._url;
+  }
+
+  public get value(): Partial<Transaction> {
+    return this._value;
+  }
+
+  public get errors(): ValidationError[] {
+    return this._errors;
+  }
+
+  public open() {
+    document.location.href = this.url;
+  }
+
+  mount(parentId: string) {
+    const parent = document.querySelector(parentId);
+    if (!parent) throw new Error(`parentID ${parentId} not found`);
+    this.embed(parent);
+  }
+
+  embed(parent: Element) {
+    this.iframe = document.createElement('iframe');
+    this.iframe.src = this.url;
+    this.iframe.style.width = '100%';
+    this.iframe.style.height = '100px';
+    this.iframe.style.border = 'none';
+    this.iframe.style.overflow = 'hidden';
+    this.iframe.setAttribute('allowtransparency', 'true');
+    this.iframe.style.backgroundColor = 'transparent';
+    parent.appendChild(this.iframe);
+
+    window.addEventListener('message', (event: MessageEvent) => {
+      if (event.source !== this.iframe?.contentWindow) {
+        return;
+      }
+      console.log('received message from iframe', event.data);
+      this.eventManager?.setPort(event.ports[0]);
+      this.ready = true;
+    });
+
+    this.iframe?.contentWindow?.focus();
+  }
+
+  send(message: HostMessage): void {
+    this.eventManager.send(message);
+  }
+
+  on(messageType: string, callback: MessageCallback): void {
+    this.eventManager.on(messageType, callback);
+  }
+
+  off(messageType: string, callback: MessageCallback): void {
+    this.eventManager.off(messageType, callback);
+  }
+
+  update(value: Partial<Transaction>) {
+    this._value = value;
+    this.send({ type: HMType.UPDATE, value });
+  }
+
+  completion(): Promise<TransactionResponse> {
+    return new Promise((resolve, reject) => {
+      this.closeModal();
+      this.on(CMType.COMPLETE, (message) => {
+        resolve((message as any).response);
+      });
+      this.on('error', (message) => {
+        reject(new Error((message as any).message));
+      });
+    });
+  }
+
+  // popup(): void {
+  //   this.popup = document.createElement('div');
+  //   this.popup.style;
+  // }
+
+  openModal(): void {
+    if (this.modal) {
+      this.closeModal();
+    }
+    this.modal = document.createElement('dialog');
+    // this.modal.style.maxWidth = '600px';
+    // this.modal.style.border = 'none !important';
+    // this.modal.style.background = 'transparent';
+    // this.modal.style.flexDirection = 'column';
+    // this.modal.style.alignItems = 'end';
+    // const close = document.createElement('button');
+    // close.innerText = 'X';
+    // close.style.fontSize = '1rem';
+    // close.style.padding = '0.25rem 0.5rem';
+    // close.style.display = 'block';
+    // close.style.background = 'white';
+    // close.style.color = '#aaa';
+    // close.style.border = '#aaa';
+    // close.addEventListener('click', () => this.closeModal());
+    // this.modal.appendChild(close);
+    // this.modal.css;
+    // this.modal.style.position = 'fixed';
+    // this.modal.style.bottom = '0';
+    // this.modal.style.left = '0';
+    // this.modal.style.right = '0';
+    // this.modal.style.top = '0';
+    // this.modal.style.left = '0';
+    // this.modal.style.width = '100%';
+    // this.modal.style.height = '100%';
+    // this.modal.style.backgroundColor = 'transparent';
+    // this.modal.style.display = 'flex';
+    // this.modal.style.justifyContent = 'center';
+    // this.modal.style.alignItems = 'center';
+    document.body.appendChild(this.modal);
+    this.embed(this.modal);
+    this.on(CMType.CANCEL, () => {
+      this.closeModal();
+    });
+    this.on(CMType.CLOSE, () => {
+      this.closeModal();
+    });
+    this.on(CMType.COMPLETE, () => {
+      this.closeModal();
+    });
+
+    this.modal.showModal();
+    this.modal.addEventListener('click', () => {
+      // console.log('click');
+      this.closeModal();
+    });
+  }
+
+  private closeModal(): void {
+    if (this.modal) {
+      console.log('closeModal');
+      this.modal?.close();
+      this.modal.remove();
+      this.modal = undefined;
+    }
+  }
+}