Merge pull request #76 from oceanprotocol/fix/issue-63-fix-deps-issues

update some packages to avoid --legacy-peer-deps

.storybook/main.ts

@@ -57,7 +57,10 @@ module.exports = {
       crypto: false,
       os: false,
       stream: false,
-      assert: false
+      assert: false,
+      zlib: false,
+      net: false,
+      tls: false
     });
     config.resolve.fallback = fallback;
     config.plugins = (config.plugins || []).concat([new webpack.ProvidePlugin({

package.json

@@ -12,8 +12,9 @@
     "url": "https://github.com/oceanprotocol/dbs-ui-lib/issues"
   },
   "homepage": "https://github.com/oceanprotocol/dbs-ui-lib#readme",
+  "type": "module",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -22,57 +23,55 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@ethersproject/units": "^5.7.0",
-    "@oceanprotocol/typographies": "^0.1.0",
-    "@oceanprotocol/uploader": "^0.0.2-alpha.31",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.4",
     "@storybook/addon-essentials": "^7.4.5",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.4.5",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/jest-dom": "^6.1.3",
-    "@tippyjs/react": "^4.2.6",
-    "@types/react": "^17.0.59",
-    "ajv": "^8.12.0",
-    "cpx": "^1.5.0",
-    "css-loader": "^6.7.3",
-    "dotenv": "^16.3.1",
-    "https-browserify": "^1.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "postcss-import": "^15.1.0",
-    "react-dom": "^18.2.0",
-    "react-spring": "^9.7.3",
-    "rimraf": "^2.7.1",
-    "rollup": "2.77.1",
-    "rollup-plugin-dts": "^6.0.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup": "^3.29.4",
+    "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
-    "slugify": "^1.6.6",
     "storybook": "^7.4.5",
     "storybook-css-modules-preset": "^1.1.1",
-    "stream-http": "^3.2.0",
-    "style-loader": "^3.3.2",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.1.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",
     "webpack": "^5.88.2"
   },
   "dependencies": {
+    "@ethersproject/units": "^5.7.0",
+    "@oceanprotocol/typographies": "^0.1.0",
+    "@oceanprotocol/uploader": "^0.0.2-alpha.31",
+    "@tippyjs/react": "^4.2.6",
+    "@types/react": "^17.0.59",
+    "ajv": "^8.12.0",
     "classnames": "^2.3.2",
     "connectkit": "^1.5.3",
+    "cpx": "^1.5.0",
+    "css-loader": "^6.7.3",
+    "dotenv": "^16.3.1",
     "ethers": "^6.7.1",
-    "react": ">=16.8.0",
+    "https-browserify": "^1.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "react-spring": "^9.7.3",
     "react-tabs": "^6.0.1",
     "remark": "^14.0.2",
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.2",
+    "rimraf": "^2.7.1",
+    "rollup-plugin-import-css": "^3.3.4",
+    "slugify": "^1.6.6",
+    "stream-http": "^3.2.0",
+    "style-loader": "^3.3.2",
     "viem": "^1.13.1",
     "wagmi": "^1.4.2"
   },

rollup.config.js

@@ -1,14 +1,12 @@
-import typescript from 'rollup-plugin-typescript2';
+import typescript from 'rollup-plugin-typescript2'
 import svgr from '@svgr/rollup'
-import packageJson from './package.json';
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import packageJson from './package.json' assert { type: "json" };
 import postcss from 'rollup-plugin-postcss';
 import terser from '@rollup/plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
 import json from "@rollup/plugin-json";
-import dts from "rollup-plugin-dts";
+import {dts} from "rollup-plugin-dts";
 import postcssImport from 'postcss-import';
-import nodePolyfills from 'rollup-plugin-node-polyfills';
 
 export default [
   {
@@ -18,10 +16,8 @@ export default [
       {file: packageJson.module, format: 'es', sourcemap: true, inlineDynamicImports: true}
     ],
     plugins: [
-      peerDepsExternal(),
       commonjs(),
-      nodePolyfills(),
-      typescript({ useTsconfigDeclarationDir: true }),
+      typescript({ tsconfig: "./tsconfig.json" }),
       json(),
       postcss({
         sourceMap: true,

src/@utils/statusCode.ts

@@ -20,7 +20,8 @@ export function getStatusMessage(statusCode: number, storage: string) {
           100: "Processing payment...",
           101: "Processing payment...",
           102: "Processing payment...",
-          200: "Processing payment failure modes",
+          200: "Processing payment failure",
+          299: "Processing payment failure",
           300: "Uploading file to storage",
           400: "Upload done!",
           401: "Upload failure modes",

src/components/DBSUploader/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { WagmiConfig, createConfig } from 'wagmi'
-import { polygon } from 'wagmi/chains'
+import { polygon, polygonMumbai } from 'wagmi/chains'
 import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
 import DBSComponent from '../DBSComponent'
 
@@ -34,7 +34,7 @@ const DBSUploader = ({ infuraId, walletConnectProjectId, dbs_url, dbs_account }:
     getDefaultConfig({
       appName: 'Ocean Uploader UI',
       infuraId: infuraId,
-      chains: [polygon],
+      chains: [polygon, polygonMumbai],
       walletConnectProjectId: walletConnectProjectId || ''
     })
   )

src/components/Input/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
-import { InputField } from '@components/FileUploadSingle'
+import { InputField } from '../FileUploadSingle'
 
 const cx = classNames.bind(styles)
 

src/components/Radio/index.tsx

@@ -22,13 +22,13 @@ export default function InputRadio({
           <div className={styles.radioWrap} key={index}>
             <input
               {...props}
-              className={styles[props.type]}
+              className={styles[props.type || '']}
               id={slugify(option)}
             />
             <label
               className={cx({
                 [styles.radioLabel]: true,
-                [inputSize]: inputSize
+                [inputSize || 'small']: inputSize
               })}
               htmlFor={slugify(option)}
             >

src/components/Tabs/index.tsx

@@ -33,7 +33,7 @@ export default function Tabs({
               className={styles.tab}
               key={index}
               onClick={
-                handleTabChange ? () => handleTabChange(item.title) : null
+                handleTabChange ? () => handleTabChange(item.title) : undefined
               }
               disabled={item.disabled}
             >

tsconfig.json

@@ -14,7 +14,7 @@
     // set to false if your library is only TypeScript
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "strict": true,
@@ -31,5 +31,5 @@
     }
   },
   "include": ["custom.d.ts", "**/*"],
-  "exclude": ["node_modules", "*.js"]
+  "exclude": ["node_modules", "*.js", "storybook-static"]
 }