migrate to webpack, jest and eslint

.eslintrc

@@ -1,25 +1,24 @@
 {
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
   "extends": [
-    "eslint:recommended",
     "react-app",
-    "plugin:@typescript-eslint/recommended"
+    "react-app/jest",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
   "rules": {
-    "@typescript-eslint/ban-ts-ignore": "warn",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
     "@typescript-eslint/prefer-as-const": "warn",
     "@typescript-eslint/no-empty-function": "warn",
-    "@typescript-eslint/no-empty-interface": "warn"
-  },
-  "overrides": [
-    {
-      "files": [
-        "**/*.stories.*"
-      ],
-      "rules": {
-        "import/no-anonymous-default-export": "off"
-      }
-    }
-  ]
+    "@typescript-eslint/no-empty-interface": "warn",
+    "prettier/prettier": [
+      "warn"
+    ]
+  }
 }

docs/modules.md

@@ -26,13 +26,13 @@
 
 ### MasaProvider
 
-▸ **MasaProvider**(`__namedParameters`): `Element`
+▸ **MasaProvider**(`«destructured»`): `Element`
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | `MasaContextProviderProps` |
+| `«destructured»` | `MasaContextProviderProps` |
 
 #### Returns
 
@@ -42,13 +42,13 @@ ___
 
 ### loadIdentityContracts
 
-▸ **loadIdentityContracts**(`__namedParameters`): `IIdentityContracts`
+▸ **loadIdentityContracts**(`«destructured»`): `IIdentityContracts`
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | `LoadContractArgs` |
+| `«destructured»` | `LoadContractArgs` |
 
 #### Returns
 

jest.config.js

@@ -1,6 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
   moduleNameMapper: {
     '^axios$': require.resolve('axios'),
     '\\.(css|less|sass|scss)$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
-};
+};

package.json

@@ -2,98 +2,78 @@
   "name": "@masa-finance/masa-react",
   "version": "0.23.0",
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/tools.esm.js",
-  "typings": "dist/index.d.ts",
+  "main": "./dist/src/index.js",
+  "typings": "./dist/src/index.d.ts",
+  "unpkg": "./dist/browser/masa-react.cjs2.min.js",
+  "module": "./dist/browser/masa-react.amd.min.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
+    "start": "yarn build:watch",
+    "build": "yarn build:tsc && yarn build:dist",
+    "build:tsc": "tsc && cp -R ./fonts/ ./dist/fonts/ && cp ./src/styles.scss ./dist/src/styles.scss && cp ./src/common/components/modal/styles.scss ./dist/src/common/components/modal/styles.scss ",
+    "build:dist": "cross-env NODE_ENV=production webpack",
+    "build:watch": "tsc -w",
+    "lint": "eslint src/**/*.{ts,tsx} --quiet --fix",
     "doc": "typedoc",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint src test stories",
-    "prepare": "husky install && tsdx build",
+    "test": "jest --passWithNoTests",
+    "prepare": "husky install && yarn build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "clean": "rm -rf ./dist",
-    "prettier": "prettier ./src ./stories ./test --write",
-    "storybook": "start-storybook -p 3000",
-    "build-storybook": "build-storybook"
+    "prettier": "prettier ./src ./test --write"
   },
   "author": "hide-on-bush",
   "dependencies": {
-    "@auth0/auth0-react": "^1.12.0",
     "@masa-finance/masa-sdk": "^1.2.0",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^9.0.2",
-    "ajv": "7.2.3",
-    "ajv-errors": "2.0.1",
-    "ajv-formats": "2.1.1",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-import": "^1.13.5",
-    "babel-preset-react-app": "^10.0.1",
-    "cssnano": "^5.1.14",
-    "ethers": "^5.7.0",
-    "node-sass": "^8.0.0",
     "react": "^18.2.0",
     "react-query": "^3.39.3",
-    "rodal": "^2.0.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-font": "^1.1.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-url": "^3.0.1",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "sass-loader": "^13.2.0",
-    "storybook-addon-sass-postcss": "^0.1.3",
-    "use-axios-client": "^2.0.0"
-  },
-  "peerDependencies": {
-    "@types/react": "^18.0.25",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "rodal": "^2.0.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^4.7.0",
     "@babel/core": "^7.20.2",
-    "@rollup/plugin-replace": "^5.0.1",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@size-limit/preset-big-lib": "^8.1.0",
     "@size-limit/webpack-why": "^8.1.0",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.20",
-    "@storybook/react": "^6.4.20",
-    "@types/auth0": "^2.34.17",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^16.18.11",
     "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "autoprefixer": "^10.4.13",
-    "axios": "^1.1.0",
-    "babel-jest": "~26.6.3",
-    "eslint-plugin-prettier": "3.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
     "husky": "^8.0.2",
+    "jest": "^29.4.1",
+    "mini-css-extract-plugin": "^2.7.2",
+    "node-sass": "^8.0.0",
     "postcss": "^8.4.19",
+    "postcss-loader": "^7.0.2",
     "prettier": "^2.7.1",
     "react-dom": "^18.2.0",
-    "react-highlight-words": "^0.18.0",
-    "react-is": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "shards-react": "^1.0.3",
+    "sass-loader": "^13.2.0",
     "size-limit": "^8.1.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
+    "style-loader": "^3.3.1",
+    "ts-jest": "^29.0.5",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typedoc": "^0.23.21",
     "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.6.3"
+    "types-webpack-bundler": "^1.0.2",
+    "typescript": "^4.6.3",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   }
 }

src/common/components/modal/index.tsx

@@ -7,7 +7,7 @@ export interface ModalProps {
   children: React.ReactNode;
   open: boolean;
   setOpen: (val: boolean) => void;
-  close: Function;
+  close: () => void;
 }
 
 export const ModalComponent = ({ children, open, close }: ModalProps) => {

src/common/helpers/provider/masa-context.tsx

@@ -50,8 +50,8 @@ export interface MasaShape {
   handleLogin?: () => void;
   handleLogout?: (callback?: () => void) => void;
   handlePurchaseIdentity?: () => void;
-  connect?: (options?: { scope?: string[]; callback?: Function }) => void;
-  closeModal?: Function;
+  connect?: (options?: { scope?: string[]; callback?: () => void }) => void;
+  closeModal?: () => void;
   scope?: string[];
   company?: string;
   handleCreateCreditScore?: () => void;
@@ -141,7 +141,7 @@ export const MasaContextProvider = ({
   }, [externalSigner]);
 
   const connect = useCallback(
-    (options?: { scope?: string[]; callback?: Function }) => {
+    (options?: { scope?: string[]; callback?: () => void }) => {
       setModalOpen(true);
       if (options?.scope) setScope(options.scope);
       if (typeof options?.callback === 'function') {

src/common/helpers/provider/masa-provider.tsx

@@ -1,12 +1,11 @@
 import { MasaContextProvider, MasaContextProviderProps } from './masa-context';
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClientProvider } from 'react-query';
 
 import { MasaInterface } from '../../components/masa-interface';
 import { useMetamask } from './use-metamask';
-import '../../../../styles.scss';
-
-export const queryClient = new QueryClient();
+import '../../../styles.scss';
+import { queryClient } from './masa-query-client';
 
 export const MasaProvider = ({
   children,

src/common/helpers/provider/masa-query-client.tsx

@@ -0,0 +1,3 @@
+import { QueryClient } from 'react-query';
+
+export const queryClient = new QueryClient();

src/common/helpers/provider/modules/creditScores/creditScores.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { queryClient } from '../../masa-provider';
+import { queryClient } from '../../masa-query-client';
 
 export const useCreditScores = function (masa, walletAddress, identity) {
   const { data, status, isLoading, error } = useQuery(

src/common/helpers/provider/modules/green/green.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { queryClient } from '../../masa-provider';
+import { queryClient } from '../../masa-query-client';
 
 export const useGreen = (masa, walletAddress, identity) => {
   const { data, status, isLoading, error } = useQuery(

src/common/helpers/provider/modules/identity/identity.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { queryClient } from '../../masa-provider';
+import { queryClient } from '../../masa-query-client';
 
 export const useIdentity = function (masa, walletAddress) {
   const { data, status, isLoading, error } = useQuery(

src/common/helpers/provider/modules/session/session.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { useQuery } from 'react-query';
-import { queryClient } from '../../masa-provider';
+import { queryClient } from '../../masa-query-client';
 
 export const useSession = function (masa, walletAddress) {
   const { data, status, isLoading, error } = useQuery(

src/common/helpers/provider/use-metamask.ts

@@ -1,6 +1,6 @@
 import { ethers } from 'ethers';
 import { useCallback, useEffect, useMemo } from 'react';
-import { queryClient } from './masa-provider';
+import { queryClient } from './masa-query-client';
 import { useMasa } from './use-masa';
 
 export const useMetamask = ({ disable }: { disable?: boolean }) => {

styles.scss → src/styles.scss

@@ -1,60 +1,60 @@
 @font-face {
   font-family: 'Proxima Nova';
   font-weight: 500;
-  src: url('./fonts/proximanova-bold-webfont.woff') format('woff');
-  src: url('./fonts/proximanova-bold-webfont.woff2') format('woff2');
+  src: url('../fonts/proximanova-bold-webfont.woff') format('woff');
+  src: url('../fonts/proximanova-bold-webfont.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Ezra';
-  src: url('./fonts/Ezra-Light.otf');
+  src: url('../fonts/Ezra-Light.otf');
 
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Ezra';
-  src: url('./fonts/Ezra-Bold.otf');
+  src: url('../fonts/Ezra-Bold.otf');
 
   font-weight: 700;
   font-style: bold;
 }
 
 @font-face {
   font-family: 'Ezra';
-  src: url('./fonts/Ezra-Medium.otf');
+  src: url('../fonts/Ezra-Medium.otf');
 
   font-weight: 500;
   font-style: Medium;
 }
 
 @font-face {
   font-family: 'Ezra';
-  src: url('./fonts/Ezra-Italic.otf');
+  src: url('../fonts/Ezra-Italic.otf');
 
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('./fonts/Inter-Light.ttf');
+  src: url('../fonts/Inter-Light.ttf');
 
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('./fonts/Inter-Bold.ttf');
+  src: url('../fonts/Inter-Bold.ttf');
 
   font-weight: 700;
   font-style: bold;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('./fonts/Inter-Medium.ttf');
+  src: url('../fonts/Inter-Medium.ttf');
 
   font-weight: 500;
 }