bigcapitalhq · benpsnyder · Apr 21, 2024 · Apr 22, 2024 · Apr 22, 2024 · Apr 29, 2024
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -46,17 +46,22 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14 # Need for npm >=7.7
-          cache: 'npm'
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+            version: 9  # Optional: specify a pnpm version
 
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
 
       - name: Install Playwright with deps
-        run: npx playwright install --with-deps
+        run: pnpx playwright install --with-deps
 
       - name: Run tests
-        run: npm run test:e2e
+        run: pnpm run test:e2e
         env:
           PLAYWRIGHT_TEST_BASE_URL: ${{ needs.test_setup.outputs.preview_url }}
 

diff --git a/package.json b/package.json
@@ -22,8 +22,10 @@
     "lerna": "^8.1.2",
     "pnpm": "^9.0.5"
   },
+  "engineStrict": true,
   "engines": {
-    "node": "16.x || 17.x || 18.x"
+    "node": "18.x || 20.x || 22.x",
+    "pnpm": ">=9"
   },
   "husky": {
     "hooks": {

diff --git a/packages/webapp/.gitignore b/packages/webapp/.gitignore
@@ -21,4 +21,4 @@
 
 npm-debug.log*
 
-dist
+dist
diff --git a/packages/webapp/craco.config.js b/packages/webapp/craco.config.js
diff --git a/packages/webapp/public/index.html → packages/webapp/index.html b/packages/webapp/public/index.html → packages/webapp/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link
       rel="icon"
-      href="%PUBLIC_URL%/favicons/favicon-32.ico"
+      href="/favicons/favicon-32.ico"
       sizes="32x32"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,27 +13,29 @@
       name="description"
       content="Bigcapital Financial Managment Software"
     />
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Bigcapital</title>
+    <style lang="sass" src="./src/style/App.scss"></style>
   </head>
-  <body>
+  <body data-theme="light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
     <div id="nprogress"></div>
     <!--
       This HTML file is a template.
@@ -51,6 +53,5 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
       type="text/css"
     />
-    <script src="https://app.lemonsqueezy.com/js/lemon.js"></script>
   </body>
 </html>
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -2,6 +2,35 @@
   "name": "@bigcapital/webapp",
   "version": "0.10.2",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "storybook": "start-storybook -p 6006",
+    "test": "node scripts/test.js"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "dependencies": {
     "@blueprintjs-formik/core": "^0.3.6",
     "@blueprintjs-formik/datetime": "^0.3.7",
@@ -15,7 +44,6 @@
     "@blueprintjs/timezone": "^4.5.43",
     "@casl/ability": "^5.4.3",
     "@casl/react": "^2.3.0",
-    "@craco/craco": "^5.9.0",
     "@reduxjs/toolkit": "^1.2.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
@@ -45,26 +73,27 @@
     "@typescript-eslint/parser": "^2.10.0",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "accounting": "^0.4.1",
+    "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0",
     "axios": "^1.6.0",
     "basscss": "^8.0.2",
     "camelcase": "^5.3.1",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.2",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
-    "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.33.0",
+    "eslint": "^8.57.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "formik": "^2.2.5",
     "history": "4.10.1",
-    "http-proxy-middleware": "^1.0.0",
-    "jest": "24.9.0",
+    "jest": "29.7.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
     "js-cookie": "2.2.1",
     "js-money": "^0.6.3",
+    "lemonsqueezy.ts": "^0.1.7",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.33",
@@ -104,48 +133,31 @@
     "react-transition-group": "^4.4.1",
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
-    "react-virtualized": "^9.22.3",
     "redux": "^4.2.1",
     "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
     "reselect": "4.1.7",
     "rtl-detect": "^1.0.3",
-    "sass": "^1.68.0",
     "semver": "6.3.0",
     "socket.io-client": "^4.7.4",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
     "stylis-rtlcss": "^2.1.1",
-    "typescript": "^4.8.3",
+    "typescript": "^4.9.5",
     "yup": "^0.28.1"
   },
-  "scripts": {
-    "dev": "PORT=4000 craco start",
-    "build": "craco build",
-    "test": "node scripts/test.js",
-    "storybook": "start-storybook -p 6006"
-  },
-  "proxy": "http://localhost:3000/",
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "devDependencies": {
+    "@types/react-loadable": "^5.5.11",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "browserslist": "^4.23.0",
+    "lightningcss": "^1.24.1",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "sass": "^1.74.1",
+    "vite": "^5.2.8",
+    "vite-tsconfig-paths": "^4.3.2"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "proxy": "http://localhost:3000/"
 }
diff --git a/packages/webapp/postcss.config.js b/packages/webapp/postcss.config.js
@@ -0,0 +1,8 @@
+const postcssConfig = {
+  plugins: {
+    'postcss-import': {},
+    autoprefixer: {},
+  },
+};
+
+export default postcssConfig;