feat: added shims for invoice and form components (#115)

Co-authored-by: Aimen Sahnoun <aimensahnoun@outlook.com>

Author: sstefdev

package-lock.json

@@ -20,6 +20,10 @@
       "svelte": "./dist/index.js",
       "require": "./dist/web-component.umd.cjs",
       "default": "./dist/web-component.js"
+    },
+    "./react": {
+      "types": "./dist/react/CreateInvoiceForm.d.ts",
+      "default": "./dist/react/CreateInvoiceForm.jsx"
     }
   },
   "files": [

packages/create-invoice-form/package.json

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React, { useLayoutEffect, useRef } from "react";
+import("../web-component");
+
+export const CreateInvoiceForm = (props) => {
+  const widgetRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (widgetRef.current) {
+      Object.entries(props).forEach(([key, value]) => {
+        widgetRef.current[key] = value;
+      });
+    }
+  }, [props, widgetRef?.current]);
+
+  return React.createElement("create-invoice-form", { ref: widgetRef });
+};
+
+export default CreateInvoiceForm;

packages/create-invoice-form/src/lib/react/CreateInvoiceForm.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { IConfig } from "@requestnetwork/shared-types";
+import type { RequestNetwork, Types } from "@requestnetwork/request-client.js";
+export interface CreateInvoiceFormProps {
+  config: IConfig;
+  signer: string;
+  requestNetwork: RequestNetwork | null | undefined;
+  currencies: {
+    symbol: string;
+    address: string;
+    network: string;
+    decimals: number;
+    type: Types.RequestLogic.CURRENCY;
+  }[];
+}
+
+/**
+ * CreateInvoiceForm is a React component that allows users to create invoices and manage the invoice creation process.
+ *
+ * This component provides functionalities for selecting currencies, entering invoice details, and submitting the form.
+ * It also handles the creation process by interacting with the Request Network.
+ *
+ * @param {CreateInvoiceFormProps} props - The component props
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <CreateInvoiceForm
+ *   config={config}
+ *   signer={signer}
+ *   requestNetwork={requestNetwork}
+ *   currencies={[
+ *     {
+ *       symbol: "USDC",
+ *       address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+ *       network: "sepolia",
+ *       decimals: 6,
+ *       type: Types.RequestLogic.CURRENCY.ERC20,
+ *     },
+ *   ]}
+ * />
+ */
+declare const CreateInvoiceForm: React.FC<CreateInvoiceFormProps>;
+
+export default CreateInvoiceForm;

packages/create-invoice-form/src/lib/react/CreateInvoiceForm.ts

@@ -0,0 +1,8 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "create-invoice-form": React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLElement>,
+      HTMLElement
+    >;
+  }
+}

packages/create-invoice-form/src/lib/react/global.d.ts

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/react",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2017", "DOM"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "include": ["src/lib/react/**/*"]
+}

packages/create-invoice-form/tsconfig.react.json

@@ -24,5 +24,14 @@ export default defineConfig({
     commonjsOptions: {
       transformMixedEsModules: true,
     },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
   },
 });

packages/create-invoice-form/vite.wc.config.ts

@@ -20,25 +20,38 @@
       "svelte": "./dist/index.js",
       "require": "./dist/web-component.umd.cjs",
       "default": "./dist/web-component.js"
+    },
+    "./react": {
+      "types": "./dist/react/InvoiceDashboard.d.ts",
+      "default": "./dist/react/InvoiceDashboard.jsx"
     }
   },
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "dependencies": {
     "@requestnetwork/payment-detection": "0.43.1-next.2043",
     "@requestnetwork/payment-processor": "0.45.1-next.2043",
     "@requestnetwork/request-client.js": "0.47.1-next.2043",
     "ethers": "^5.7.2",
     "svelte-sonner": "^0.3.27",
-    "viem": "^2.9.15"
+    "viem": "^2.9.15",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^2.5.2",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "svelte": "^4.0.5",
     "svelte-check": "^3.6.0",
     "tslib": "^2.4.1",

packages/invoice-dashboard/package.json

@@ -0,0 +1,33 @@
+import React from "react";
+import type { IConfig } from "@requestnetwork/shared-types";
+import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
+import type { RequestNetwork } from "@requestnetwork/request-client.js";
+import { Currency } from "../types";
+
+export interface InvoiceDashboardProps {
+  config: IConfig;
+  wallet: WalletState | null;
+  requestNetwork: RequestNetwork | null | undefined;
+  currencies: Currency[];
+}
+/**
+ * InvoiceDashboard is a React component that integrates with the Request Network to manage and display invoices.
+ *
+ * This component provides functionalities to fetch, display, and manage invoice data, allowing users
+ * to search, sort, and paginate through their requests. It also handles the state of individual requests,
+ * providing real-time updates on payment status.
+ *
+ * @param {InvoiceDashboardProps} props - The component props
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <InvoiceDashboard
+ *   config={config}
+ *   wallet={wallet}
+ *   requestNetwork={requestNetwork}
+ *   currencies={currencies}
+ * />
+ */
+declare const InvoiceDashboard: React.FC<InvoiceDashboardProps>;
+
+export default InvoiceDashboard;

packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React, { useLayoutEffect, useRef } from "react";
+import("../web-component");
+
+export const InvoiceDashboard = (props) => {
+  const widgetRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (widgetRef.current) {
+      Object.entries(props).forEach(([key, value]) => {
+        widgetRef.current[key] = value;
+      });
+    }
+  }, [props, widgetRef?.current]);
+
+  return React.createElement("invoice-dashboard", { ref: widgetRef });
+};
+
+export default InvoiceDashboard;