feat: refactor webpack config, add scss compilation

.babelrc

@@ -1,3 +1,7 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
-  }
+  "presets": [
+    ["@babel/preset-env", { "targets": "defaults and supports es6-module" }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+webpack.config.prod.js
+node_modules

.npmignore

@@ -0,0 +1,5 @@
+# remove unnnecessary files from npm release
+
+.*
+**/webpack.config.js
+node_modules

.storybook/main.js

@@ -1,34 +1,48 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
-    name: 'storybook-addon-sass-postcss',
-    options: {
-      loadSassAfterPostCSS: true,
-      postcssLoaderOptions: {
-        implementation: require('postcss')
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: 'storybook-addon-sass-postcss',
+      options: {
+        loadSassAfterPostCSS: true,
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+        rule: {
+          test: /\.(scss|sass)$/i,
+        },
       },
-      rule: {
-        test: /\.(scss|sass)$/i
-      }
-    }
-  }, {
-    name: '@storybook/addon-postcss',
-    options: {
-      postcssLoaderOptions: {
-        implementation: require('postcss')
-      }
-    }
-  }, '@storybook/addon-mdx-gfm'],
+    },
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+    '@storybook/addon-mdx-gfm',
+  ],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
-    check: true // type-check stories during Storybook build
+    check: true, // type-check stories during Storybook build
   },
 
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: true
-  }
-};
+    autodocs: true,
+  },
+  // webpackFinal: async (config, { configType }) => {
+  //   if (configType === 'DEVELOPMENT') {
+  //     return {
+  //       ...config,
+  //       ...devConfig,
+  //     };
+  //   }
+  // },
+};

package.json

@@ -11,21 +11,22 @@
     "node": ">=16"
   },
   "scripts": {
-    "start": "yarn build:watch",
-    "build": "yarn build:tsc && yarn build:dist",
-    "build:tsc": "tsc && mkdir -p ./dist && cp -R ./src/fonts ./dist/src/fonts && mkdir -p ./dist/src/components/modal && mkdir -p ./dist/src/components/new-modal && cp ./src/provider/styles.scss ./dist/src/provider/styles.scss && cp ./src/components/modal/styles.scss ./dist/src/components/modal/styles.scss",
-    "build:dist": "cross-env NODE_ENV=production webpack",
-    "build:watch": "tsc -w",
-    "lint": "eslint \"./src/**/*.{ts,tsx}\" ./stories/**/*.tsx --fix",
-    "doc": "typedoc",
-    "test": "jest --passWithNoTests",
     "prepare": "husky install && yarn build",
-    "size": "size-limit",
+    "clean": "rimraf ./dist",
+    "build": "mkdir -p dist && yarn clean && yarn transpile && cross-env NODE_ENV=production yarn build:webpack",
+    "transpile": "tsc",
+    "build:webpack": "webpack --mode production --config webpack.config.prod.js",
+    "build:watch": "tsc -w",
+    "start": "yarn build:watch",
+    "build:dist": "cross-env NODE_ENV=production webpack --config oldpack.config.js",
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build",
     "analyze": "size-limit --why",
-    "clean": "rm -rf ./dist",
+    "size": "size-limit",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\" ./stories/**/*.tsx --fix",
     "prettier": "prettier ./src ./test ./stories --write",
-    "storybook": "storybook dev -p 3000",
-    "build-storybook": "storybook build"
+    "test": "jest --passWithNoTests",
+    "doc": "typedoc"
   },
   "resolutions": {
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
@@ -59,6 +60,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
     "@size-limit/preset-big-lib": "^8.2.4",
     "@size-limit/webpack-why": "^8.2.4",
     "@storybook/addon-essentials": "^7.0.2",
@@ -71,7 +74,9 @@
     "@storybook/react-webpack5": "^7.0.12",
     "@types/jest": "^29.5.0",
     "@types/mocha": "^10.0.1",
+    "@types/node": "^20.1.5",
     "@types/react": "^18.0.33",
+    "@types/webpack": "^5.28.1",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "assert": "^2.0.0",
@@ -80,23 +85,28 @@
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-prettier": "^4.2.1",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.2",
     "jest": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.5",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "node-sass": "^8.0.0",
     "os-browserify": "^0.3.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.3.0",
     "prettier": "^2.8.7",
     "process": "^0.11.10",
     "react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "size-limit": "^8.1.0",
     "storybook": "^7.0.5",
@@ -107,13 +117,14 @@
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typedoc": "^0.24.4",
     "typedoc-plugin-markdown": "^3.15.3",
     "typescript": "^5.0.4",
     "url": "^0.11.0",
     "webpack": "^5.82.1",
     "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.1.0"
+    "webpack-cli": "^5.1.0",
+    "webpack-node-externals": "^3.0.0"
   }
 }

src/components/masa-interface/pages/masa-green/phone-input.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import PhoneInput, { isValidPhoneNumber } from 'react-phone-number-input';
 import Reaptcha from 'reaptcha';
 import { useMasa } from '../../../../provider';
-import 'react-phone-number-input/style.css';
+// import 'react-phone-number-input/style.css';
 
 export const PhoneInputInterface: React.FunctionComponent<SubflowPage> = ({
   next,

src/components/modal/modal.tsx

@@ -1,7 +1,7 @@
 import Rodal from 'rodal';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import './styles.scss';
+// import './styles.scss';
 import { useMasa } from '../../provider';
 
 function getWindowDimensions() {

src/provider/masa-provider.tsx

@@ -1,4 +1,4 @@
-import './styles.scss';
+// import './styles.scss';
 
 import {
   MasaContextProvider,
@@ -12,7 +12,7 @@ import { MasaInterface } from '../components';
 import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider/configured-rainbowkit-provider';
 
 // needs to be imported using require. Otherwise, it will not load!
-require('@rainbow-me/rainbowkit/styles.css');
+// require('@rainbow-me/rainbowkit/styles.css');
 
 export const MasaProvider = ({
   children,