diff --git a/package-lock.json b/package-lock.json index 82aa745b..5589f23a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7739,7 +7739,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.3", + "version": "18.3.4", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz", + "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==", "devOptional": true, "license": "MIT", "dependencies": { @@ -7749,6 +7751,8 @@ }, "node_modules/@types/react-dom": { "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dev": true, "license": "MIT", "dependencies": { @@ -12425,6 +12429,8 @@ }, "node_modules/react": { "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" @@ -12435,6 +12441,8 @@ }, "node_modules/react-dom": { "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "devOptional": true, "license": "MIT", "dependencies": { @@ -13989,6 +13997,8 @@ }, "node_modules/vite-plugin-node-polyfills": { "version": "0.22.0", + "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.22.0.tgz", + "integrity": "sha512-F+G3LjiGbG8QpbH9bZ//GSBr9i1InSTkaulfUHFa9jkLqVGORFBoqc2A/Yu5Mmh1kNAbiAeKeK+6aaQUf3x0JA==", "license": "MIT", "dependencies": { "@rollup/plugin-inject": "^5.0.5", @@ -14287,17 +14297,26 @@ "@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", "typescript": "^5.0.0", "vite": "^4.4.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "packages/payment-widget": { diff --git a/packages/create-invoice-form/package.json b/packages/create-invoice-form/package.json index ae746ff3..dde7e4dc 100644 --- a/packages/create-invoice-form/package.json +++ b/packages/create-invoice-form/package.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": [ diff --git a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.jsx b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.jsx new file mode 100644 index 00000000..6df76672 --- /dev/null +++ b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.jsx @@ -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; diff --git a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.ts b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.ts new file mode 100644 index 00000000..5a88e37b --- /dev/null +++ b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.ts @@ -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 + * + */ +declare const CreateInvoiceForm: React.FC; + +export default CreateInvoiceForm; diff --git a/packages/create-invoice-form/src/lib/react/global.d.ts b/packages/create-invoice-form/src/lib/react/global.d.ts new file mode 100644 index 00000000..2ac3334a --- /dev/null +++ b/packages/create-invoice-form/src/lib/react/global.d.ts @@ -0,0 +1,8 @@ +declare namespace JSX { + interface IntrinsicElements { + "create-invoice-form": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + } +} diff --git a/packages/create-invoice-form/tsconfig.react.json b/packages/create-invoice-form/tsconfig.react.json new file mode 100644 index 00000000..f4c55ad0 --- /dev/null +++ b/packages/create-invoice-form/tsconfig.react.json @@ -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/**/*"] +} diff --git a/packages/create-invoice-form/vite.wc.config.ts b/packages/create-invoice-form/vite.wc.config.ts index 4335c26d..41f3e837 100644 --- a/packages/create-invoice-form/vite.wc.config.ts +++ b/packages/create-invoice-form/vite.wc.config.ts @@ -24,5 +24,14 @@ export default defineConfig({ commonjsOptions: { transformMixedEsModules: true, }, + rollupOptions: { + external: ["react", "react-dom"], + output: { + globals: { + react: "React", + "react-dom": "ReactDOM", + }, + }, + }, }, }); diff --git a/packages/invoice-dashboard/package.json b/packages/invoice-dashboard/package.json index 065663f5..bcd4770b 100644 --- a/packages/invoice-dashboard/package.json +++ b/packages/invoice-dashboard/package.json @@ -20,6 +20,10 @@ "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": [ @@ -27,18 +31,27 @@ "!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", diff --git a/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts new file mode 100644 index 00000000..475e0bc7 --- /dev/null +++ b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts @@ -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 + * + */ +declare const InvoiceDashboard: React.FC; + +export default InvoiceDashboard; diff --git a/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.jsx b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.jsx new file mode 100644 index 00000000..3f471a99 --- /dev/null +++ b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.jsx @@ -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; diff --git a/packages/invoice-dashboard/src/lib/react/global.d.ts b/packages/invoice-dashboard/src/lib/react/global.d.ts new file mode 100644 index 00000000..42aaa1e7 --- /dev/null +++ b/packages/invoice-dashboard/src/lib/react/global.d.ts @@ -0,0 +1,8 @@ +declare namespace JSX { + interface IntrinsicElements { + "invoice-dashboard": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + } +} diff --git a/packages/invoice-dashboard/src/lib/types/index.ts b/packages/invoice-dashboard/src/lib/types/index.ts new file mode 100644 index 00000000..a02635e0 --- /dev/null +++ b/packages/invoice-dashboard/src/lib/types/index.ts @@ -0,0 +1,9 @@ +import { Types } from "@requestnetwork/request-client.js"; + +export interface Currency { + symbol: string; + address: string; + network: string; + decimals: number; + type: Types.RequestLogic.CURRENCY; +} diff --git a/packages/invoice-dashboard/tsconfig.json b/packages/invoice-dashboard/tsconfig.json index 97ea546f..7766439c 100644 --- a/packages/invoice-dashboard/tsconfig.json +++ b/packages/invoice-dashboard/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { + "jsx": "react", "allowJs": true, "checkJs": true, "esModuleInterop": true, @@ -10,8 +11,13 @@ "sourceMap": true, "strict": true, "module": "ESNext", - "moduleResolution": "Node", - "typeRoots": ["./src/types", "./node_modules/@types"] + "moduleResolution": "Bundler", + "typeRoots": ["./src/types", "./node_modules/@types"], + "baseUrl": ".", + "paths": { + "$src/*": ["src/*"], + "$utils/*": ["src/lib/utils/*"] + } }, "include": ["src/**/*", "src/*.d.ts"] } diff --git a/packages/invoice-dashboard/tsconfig.react.json b/packages/invoice-dashboard/tsconfig.react.json new file mode 100644 index 00000000..f4c55ad0 --- /dev/null +++ b/packages/invoice-dashboard/tsconfig.react.json @@ -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/**/*"] +} diff --git a/packages/invoice-dashboard/vite.wc.config.ts b/packages/invoice-dashboard/vite.wc.config.ts index 4335c26d..41f3e837 100644 --- a/packages/invoice-dashboard/vite.wc.config.ts +++ b/packages/invoice-dashboard/vite.wc.config.ts @@ -24,5 +24,14 @@ export default defineConfig({ commonjsOptions: { transformMixedEsModules: true, }, + rollupOptions: { + external: ["react", "react-dom"], + output: { + globals: { + react: "React", + "react-dom": "ReactDOM", + }, + }, + }, }, });