feat(webapp): replace craco and webpack with vite

bigcapitalhq · Apr 7, 2024 · 8a14a58 · 8a14a58
1 parent c098f36
commit 8a14a58
Show file tree

Hide file tree

Showing 2,448 changed files with 2,385 additions and 3,066 deletions.
diff --git a/biome.json b/biome.json
@@ -29,7 +29,7 @@
     "enabled": true,
     "rules": {
       "correctness": {
-        "noUnusedImports": "error",
+        "noUnusedImports": "off",
         "noUnusedVariables": "warn",
         "useExhaustiveDependencies": "warn"
       },

diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
     "@types/node": "^20.12.5",
     "bun": "^1.1.2",
     "bun-types": "^1.1.2",
+    "dotenv": "^16.4.5",
+    "dotenv-cli": "^7.4.1",
     "husky": "^9.0.11",
     "lerna": "^8.1.2",
     "nx": "^18.2.3"

diff --git a/packages/server/biome.json b/packages/server/biome.json
@@ -6,6 +6,9 @@
     "rules": {
       "style": {
         "useImportType": "error"
+      },
+      "correctness": {
+        "noUnusedImports": "error"
       }
     }
   }

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -122,8 +122,6 @@
     "@types/ramda": "^0.29.12",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "bun": "^1.1.2",
-    "bun-types": "^1.1.2",
     "chai": "^4.4.1",
     "chai-http": "^4.4.0",
     "chai-things": "^0.2.0",

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.

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -2,9 +2,11 @@
   "name": "@bigcapital/webapp",
   "version": "0.10.2",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "craco build",
-    "dev": "PORT=4000 craco start",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "format": "biome format --write ./",
     "lint": "biome check --apply ./",
     "storybook": "start-storybook -p 6006",
@@ -27,72 +29,68 @@
     "@blueprintjs/colors": "4.1.19",
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/datetime": "^4.4.37",
-    "@blueprintjs/popover2": "^0.11.1",
+    "@blueprintjs/popover2": "^0.11.4",
     "@blueprintjs/select": "^4.9.24",
     "@blueprintjs/table": "^4.10.12",
     "@blueprintjs/timezone": "^4.5.43",
-    "@casl/ability": "^5.4.3",
+    "@casl/ability": "^5.4.4",
     "@casl/react": "^2.3.0",
-    "@craco/craco": "^5.9.0",
-    "@reduxjs/toolkit": "^1.2.5",
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
+    "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "@tiptap/core": "2.1.13",
+    "@tiptap/core": "2.2.6",
     "@tiptap/extension-color": "latest",
-    "@tiptap/extension-list-item": "2.1.13",
-    "@tiptap/extension-text-style": "2.1.13",
-    "@tiptap/pm": "2.1.13",
-    "@tiptap/react": "2.1.13",
-    "@tiptap/starter-kit": "2.1.13",
-    "@types/jest": "^26.0.15",
-    "@types/js-money": "^0.6.1",
-    "@types/lodash": "^4.14.172",
-    "@types/node": "^14.14.9",
-    "@types/ramda": "^0.28.14",
+    "@tiptap/extension-list-item": "2.2.6",
+    "@tiptap/extension-text-style": "2.2.6",
+    "@tiptap/pm": "2.2.6",
+    "@tiptap/react": "2.2.6",
+    "@tiptap/starter-kit": "2.2.6",
+    "@types/jest": "^26.0.24",
+    "@types/js-money": "^0.6.5",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.12.5",
+    "@types/ramda": "^0.29.12",
     "@types/react": "^16.14.28",
     "@types/react-body-classname": "^1.1.7",
     "@types/react-dom": "^16.9.16",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^4.4.5",
     "@types/socket.io-client": "^3.0.0",
-    "@types/styled-components": "^5.1.25",
-    "@types/yup": "^0.29.13",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
-    "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "@types/styled-components": "^5.1.34",
+    "@types/yup": "^0.29.14",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
+    "@welldone-software/why-did-you-render": "^6.2.3",
     "accounting": "^0.4.1",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
-    "axios": "^1.6.0",
-    "basscss": "^8.0.2",
+    "axios": "^1.6.8",
+    "basscss": "^8.1.0",
     "camelcase": "^5.3.1",
-    "classnames": "^2.3.2",
-    "cross-env": "^7.0.2",
+    "classnames": "^2.5.1",
+    "cross-env": "^7.0.3",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
-    "dotenv-webpack": "^8.1.0",
-    "eslint": "^8.33.0",
+    "eslint": "^8.57.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "formik": "^2.4.5",
     "history": "4.10.1",
-    "http-proxy-middleware": "^1.3.1",
-    "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",
+    "jest-resolve": "29.7.0",
+    "jest-watch-typeahead": "2.2.2",
+    "js-cookie": "3.0.5",
     "js-money": "^0.6.3",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.33",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
     "path-browserify": "^1.0.1",
-    "plaid": "^9.3.0",
-    "plaid-threads": "^11.4.3",
+    "plaid": "^9.12.0",
+    "plaid-threads": "^11.5.0",
     "prop-types": "15.8.1",
-    "query-string": "^7.1.1",
+    "query-string": "^7.1.3",
     "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^1.0.6",
@@ -121,7 +119,7 @@
     "react-split-pane": "^0.1.91",
     "react-table": "^7.6.3",
     "react-table-sticky": "^1.1.3",
-    "react-transition-group": "^4.4.1",
+    "react-transition-group": "^4.4.5",
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
     "react-virtualized": "^9.22.3",
@@ -131,7 +129,6 @@
     "redux-thunk": "^2.4.2",
     "reselect": "4.1.7",
     "rtl-detect": "^1.1.2",
-    "sass": "^1.74.1",
     "semver": "7.6.0",
     "socket.io-client": "^4.7.5",
     "style-loader": "0.23.1",
@@ -140,5 +137,24 @@
     "typescript": "^4.9.5",
     "yup": "^0.28.5"
   },
-  "proxy": "http://localhost:3000/"
+  "proxy": "http://localhost:3000/",
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.11",
+    "@types/react-loadable": "^5.5.11",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "browserslist": "^4.23.0",
+    "daisyui": "^4.10.1",
+    "dotenv-webpack": "^8.1.0",
+    "lightningcss": "^1.24.1",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "sass": "^1.74.1",
+    "tailwindcss": "^3.4.3",
+    "vite": "^5.2.8",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
 }
diff --git a/packages/webapp/postcss.config.js b/packages/webapp/postcss.config.js
@@ -0,0 +1,10 @@
+const postcssConfig = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default postcssConfig;
diff --git a/packages/webapp/setupProxy.tsx b/packages/webapp/setupProxy.tsx
diff --git a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx b/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { FMultiSelect } from '../Forms';

diff --git a/packages/webapp/src/components/Accounts/AccountsSelect.tsx b/packages/webapp/src/components/Accounts/AccountsSelect.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';

diff --git a/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx b/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';

diff --git a/packages/webapp/src/components/Accounts/AccountsTypesSelect.tsx b/packages/webapp/src/components/Accounts/AccountsTypesSelect.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import { FSelect } from '@/components/Forms';
 
 export function AccountsTypesSelect({ ...props }) {

diff --git a/packages/webapp/src/components/Accounts/_components.tsx b/packages/webapp/src/components/Accounts/_components.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilter.schema.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilter.schema.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import * as Yup from 'yup';
 
 export const getFilterDropdownSchema = () =>

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterCompatatorField.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { Classes } from '@blueprintjs/core';
 import { ListSelect } from '../Select';

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { Formik, FastField, FieldArray } from 'formik';
 import { Button, FormGroup, Classes, InputGroup, MenuItem } from '@blueprintjs/core';

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdownContext.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdownContext.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { createContext, useContext } from 'react';
 import { get, keyBy } from 'lodash';
 import { useFormikContext } from 'formik';

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterPopover.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterPopover.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
 import { AdvancedFilterDropdown } from './AdvancedFilterDropdown';

diff --git a/packages/webapp/src/components/AdvancedFilter/AdvancedFilterValueField.tsx b/packages/webapp/src/components/AdvancedFilter/AdvancedFilterValueField.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { Position, Checkbox, InputGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';

diff --git a/packages/webapp/src/components/AdvancedFilter/components.tsx b/packages/webapp/src/components/AdvancedFilter/components.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { debounce } from 'lodash';

diff --git a/packages/webapp/src/components/AdvancedFilter/interfaces.ts b/packages/webapp/src/components/AdvancedFilter/interfaces.ts
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import { ArrayHelpers } from 'formik';
 import { IPopoverProps } from '@blueprintjs/core';
 

diff --git a/packages/webapp/src/components/AdvancedFilter/utils.tsx b/packages/webapp/src/components/AdvancedFilter/utils.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import intl from 'react-intl-universal';
 import { defaultFastFieldShouldUpdate, uniqueMultiProps, checkRequiredProperties } from '@/utils';
 

diff --git a/packages/webapp/src/components/Alert/index.tsx b/packages/webapp/src/components/Alert/index.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import clsx from 'classnames';
 import styled from 'styled-components';

diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';

diff --git a/packages/webapp/src/components/AppIntlLoader.tsx b/packages/webapp/src/components/AppIntlLoader.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import moment from 'moment';
 import { setLocale } from 'yup';

diff --git a/packages/webapp/src/components/AppIntlProvider.tsx b/packages/webapp/src/components/AppIntlProvider.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { createContext } from 'react';
 
 const AppIntlContext = createContext();

diff --git a/packages/webapp/src/components/AppToaster/index.tsx b/packages/webapp/src/components/AppToaster/index.tsx
@@ -1,4 +1,4 @@
-// @ts-nocheck
+
 import { Position, Toaster, Intent } from '@blueprintjs/core';
 
 export const AppToaster = Toaster.create({

diff --git a/packages/webapp/src/components/AvatarCell.tsx b/packages/webapp/src/components/AvatarCell.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import { firstLettersArgs } from '@/utils';
 

diff --git a/packages/webapp/src/components/BankAccounts/index.tsx b/packages/webapp/src/components/BankAccounts/index.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';