[CA-4639] True React SDK

jest.config.ts

@@ -2,7 +2,7 @@ import type { JestConfigWithTsJest } from 'ts-jest'
 
 const config: JestConfigWithTsJest = {
     preset: 'ts-jest',
-    testEnvironment: 'jsdom',
+    testEnvironment: 'jest-fixed-jsdom',
     maxWorkers: 2,
     transform: {
         "^.+\\.jsx?$": "babel-jest"
@@ -15,6 +15,7 @@ const config: JestConfigWithTsJest = {
         '@/lib/utils': '<rootDir>/src/lib/utils.ts',
         'lucide-react': '<rootDir>/node_modules/lucide-react/dist/cjs/lucide-react.js'
     },
+    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 };
 
 export default config

package.json

@@ -32,6 +32,7 @@
     },
     "dependencies": {
         "@reachfive/identity-core": "^1.35.1",
+        "@tanstack/react-query": "^5.66.9",
         "buffer": "^6.0.3",
         "char-info": "0.3.2",
         "class-variance-authority": "^0.7.1",
@@ -41,16 +42,19 @@
         "libphonenumber-js": "^1.12.5",
         "lucide-react": "^0.475.0",
         "marked": "^15.0.6",
+        "polished": "^4.2.2",
         "radix-ui": "^1.1.2",
-        "react": "^18.3.0",
-        "react-dom": "^18.3.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-error-boundary": "^5.0.0",
         "react-phone-number-input": "^3.4.12",
         "react-transition-group": "4.4.5",
+        "tailwind-merge": "^3.0.1",
         "validator": "^13.11.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0",
-        "react-dom": "^18.3.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "styled-components": "^5.3.11"
     },
     "devDependencies": {
@@ -60,6 +64,7 @@
         "@babel/preset-typescript": "^7.23.2",
         "@eslint/js": "^9.16.0",
         "@jest/globals": "^29.7.0",
+        "@rollup/plugin-alias": "^5.1.1",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-dynamic-import-vars": "^2.1.2",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -72,9 +77,9 @@
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/babel__generator": "^7.6.6",
-        "@types/react": "^18.3.0",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-test-renderer": "^18.3.0",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.1",
+        "@types/react-test-renderer": "^18.3.1",
         "@types/react-transition-group": "^4.4.10",
         "@types/styled-components": "^5.1.34",
         "@types/validator": "^13.11.2",
@@ -92,16 +97,17 @@
         "globals": "^15.13.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-fixed-jsdom": "^0.0.9",
         "jest-styled-components": "^7.2.0",
-        "polished": "^4.2.2",
+        "nock": "^14.0.1",
         "postcss": "^8.5.1",
-        "react-test-renderer": "^18.3.0",
+        "react-test-renderer": "^18.3.1",
         "rollup": "^4.1.4",
+        "rollup-plugin-add-directive": "^1.0.0",
         "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-esbuild": "^6.1.0",
         "rollup-plugin-import-css": "^3.5.0",
         "rollup-plugin-postcss": "^4.0.2",
-        "tailwind-merge": "^3.0.1",
         "tailwindcss": "^3.4.17",
         "tailwindcss-animate": "^1.0.7",
         "ts-jest": "^29.1.1",

rollup.config.js

@@ -1,3 +1,4 @@
+import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
 import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
 import replace from '@rollup/plugin-replace';
@@ -8,13 +9,18 @@ import svg from '@svgr/rollup'
 import dts from 'rollup-plugin-dts'
 import esbuild from 'rollup-plugin-esbuild'
 import postcss from "rollup-plugin-postcss";
+import { addDirective } from 'rollup-plugin-add-directive';
 
-import pkg from './package.json' with { type: 'json' }
-const dependencies = Object.keys(pkg.dependencies)
+import path, { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+import packageJson from './package.json' with { type: 'json' }
 
 const banner = [
     `/**`,
-    ` * ${pkg.name} - v${pkg.version}`,
+    ` * ${packageJson.name} - v${packageJson.version}`,
     ` * Compiled ${(new Date()).toUTCString().replace(/GMT/g, 'UTC')}`,
     ` *`,
     ` * Copyright (c) ReachFive.`,
@@ -30,12 +36,21 @@ function onWarn(message) {
     console.warn( message);
 }
 
+/** 
+ * @param {Partial<import('rollup').RollupOptions>} config
+ * @returns {import('rollup').RollupOptions}
+ */
 const bundle = config => ({
     ...config,
     input: 'src/index.ts',
 })
 
 const plugins = [
+    alias({
+        entries: [
+            { find: /^@\/(.*)/, replacement: path.resolve(__dirname, './src/$1') }
+        ]
+    }),
     replace({
         preventAssignment: true,
         values: {
@@ -44,7 +59,7 @@ const plugins = [
     }),
     nodeResolve({
         browser: true,
-        extensions: ['.jsx', '.js', '.json'],
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
         preferBuiltins: true
     }),
     commonjs({ include: /node_modules/ }),
@@ -55,73 +70,105 @@ const plugins = [
     }),
     // Add an inlined version of SVG files: https://www.smooth-code.com/open-source/svgr/docs/rollup/#using-with-url-plugin
     url({ limit: Infinity, include: ['**/*.svg'] }),
+    addDirective({ pattern: '**/components/*', directive: "'use client';" }),
+    addDirective({ pattern: '**/contexts/*', directive: "'use client';" }),
+    addDirective({ pattern: '**/widgets/*', directive: "'use client';" }),
     esbuild(),
     dynamicImportVars({
         errorWhenNoFilesFound: true
     }),
 ]
 
+/** @type {import('rollup').RollupOptions[]} */
 export default [
     bundle({
         plugins,
-        external: dependencies.concat(['@/lib/utils']),
+        external: [
+            ...Object.keys(packageJson.devDependencies),
+            'react',
+            'react-dom',
+        ],
         output: [
             {
                 banner,
-                file: 'cjs/identity-ui.js',
+                file: packageJson.main,
                 format: 'cjs',
                 sourcemap: true,
                 inlineDynamicImports: true,
             },
             {
                 banner,
-                file: 'es/identity-ui.js',
+                file: packageJson.module,
                 format: 'es',
                 sourcemap: true,
                 inlineDynamicImports: true,
             },
             {
-                file: 'es/identity-ui.min.js',
+                file: packageJson.module.replace('.js', '.min.js'),
                 format: 'es',
                 plugins: [terser({ output: { preamble: banner } })],
                 sourcemap: true,
                 inlineDynamicImports: true,
             },
         ],
-        onwarn: onWarn
+        onwarn: onWarn,
+        onLog(level, log, handler) {
+            if (log.cause && log.cause.message === `Can't resolve original location of error.`) {
+              return
+            }
+            handler(level, log)
+        },
     }),
     bundle({
         plugins,
-        external: ['@/lib/utils'],
+        external: [
+            ...Object.keys(packageJson.devDependencies),
+            'react',
+            'react-dom',
+        ],
         output: [
             {
                 banner,
-                file: 'umd/identity-ui.js',
+                file: packageJson.main.replace('cjs/', 'umd/'),
                 format: 'umd',
                 name: 'reach5Widgets',
                 sourcemap: true,
                 inlineDynamicImports: true,
-                globals: { '@reachfive/identity-core': 'reach5', "@/lib/utils": "tw-cl-merge" },
+                globals: {
+                    '@reachfive/identity-core': 'reach5',
+                    'react': 'React',
+                    'react-dom': 'ReactDOM',
+                },
             },
             {
-                file: 'umd/identity-ui.min.js',
+                file: packageJson.main.replace('cjs/', 'umd/').replace('.js', '.min.js'),
                 format: 'umd',
                 name: 'reach5Widgets',
                 plugins: [terser({ output: { preamble: banner } })],
                 sourcemap: true,
                 inlineDynamicImports: true,
-                globals: { '@reachfive/identity-core': 'reach5', "@/lib/utils": "tw-cl-merge" },
+                globals: {
+                    '@reachfive/identity-core': 'reach5',
+                    'react': 'React',
+                    'react-dom': 'ReactDOM',
+                },
             },
         ],
-        onwarn: onWarn
+        onwarn: onWarn,
+        onLog(level, log, handler) {
+            if (log.cause && log.cause.message === `Can't resolve original location of error.`) {
+              return
+            }
+            handler(level, log)
+        },
     }),
     bundle({
         plugins: [
             dts()
         ],
         output: {
             banner,
-            file: 'types/identity-ui.d.ts',
+            file: packageJson.types,
             format: 'es',
         },
         onwarn: onWarn

setup-jest.ts

@@ -0,0 +1,14 @@
+import { afterAll, afterEach, beforeAll } from "@jest/globals";
+import nock from "nock";
+
+beforeAll(() => {
+    nock.disableNetConnect()
+})
+
+afterEach(() => {
+   nock.cleanAll()
+})
+
+afterAll(() => {
+    nock.enableNetConnect()
+})