make it work in vite

yyx990803 · Jan 23, 2021 · e06faa9 · e06faa9
1 parent 78f4ae3
commit e06faa9
Show file tree

Hide file tree

Showing 13 changed files with 860 additions and 15,728 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ yarn-error.log*
 cypress/videos
 cypress/screenshots
 .nyc_output
+
+dist
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,16 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="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.
@@ -26,6 +26,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/package.json b/package.json
@@ -23,8 +23,10 @@
     "clsx": "1.1.1",
     "date-fns": "2.16.1",
     "dinero.js": "1.8.1",
+    "faker": "^5.1.0",
     "formik": "2.2.6",
     "history": "4.10.1",
+    "lodash": "^4.17.20",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-infinite-calendar": "2.3.1",
@@ -37,114 +39,9 @@
     "xstate": "4.15.1",
     "yup": "0.32.8"
   },
-  "devDependencies": {
-    "@babel/cli": "7.12.10",
-    "@babel/core": "7.12.10",
-    "@babel/preset-env": "7.12.11",
-    "@cypress/code-coverage": "3.9.2",
-    "@cypress/instrument-cra": "1.4.0",
-    "@percy/cypress": "2.3.3",
-    "@types/bcryptjs": "2.4.2",
-    "@types/bluebird": "3.5.33",
-    "@types/connect-flash": "0.0.36",
-    "@types/cors": "2.8.9",
-    "@types/dinero.js": "1.6.5",
-    "@types/express": "4.17.2",
-    "@types/express-paginate": "1.0.0",
-    "@types/express-serve-static-core": "4.17.2",
-    "@types/express-session": "1.17.3",
-    "@types/faker": "5.1.5",
-    "@types/jest": "26.0.20",
-    "@types/json-server": "0.14.3",
-    "@types/lodash": "4.14.168",
-    "@types/lowdb": "1.0.9",
-    "@types/morgan": "1.9.2",
-    "@types/node": "14.14.21",
-    "@types/passport": "1.0.5",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-infinite-calendar": "2.3.5",
-    "@types/react-router": "5.1.11",
-    "@types/react-router-dom": "5.1.6",
-    "@types/react-virtualized": "9.21.10",
-    "@types/shortid": "0.0.29",
-    "@types/uuid": "8.3.0",
-    "@types/validator": "13.1.1",
-    "@types/webpack-env": "1.16.0",
-    "@types/yup": "0.29.11",
-    "@types/connect-history-api-fallback": "1.3.3",
-    "@types/http-proxy-middleware": "0.19.3",
-    "babel-loader": "8.0.6",
-    "bcryptjs": "2.4.3",
-    "concurrently": "5.3.0",
-    "cors": "2.8.5",
-    "cross-env": "7.0.3",
-    "cypress": "6.3.0",
-    "dotenv": "8.2.0",
-    "eslint-config-prettier": "7.1.0",
-    "eslint-plugin-cypress": "2.11.2",
-    "eslint-plugin-prettier": "3.3.1",
-    "express-paginate": "1.0.2",
-    "express-session": "1.17.1",
-    "express-validator": "6.8.0",
-    "faker": "5.1.0",
-    "fuse.js": "6.4.3",
-    "husky": "4.3.8",
-    "istanbul-lib-coverage": "3.0.0",
-    "json": "10.0.0",
-    "lowdb": "1.0.0",
-    "morgan": "1.10.0",
-    "ncp": "2.0.0",
-    "nodemon": "2.0.6",
-    "nyc": "15.1.0",
-    "passport": "0.4.1",
-    "passport-local": "1.0.0",
-    "prettier": "2.2.1",
-    "react-scripts": "3.4.0",
-    "start-server-and-test": "1.11.7",
-    "ts-node": "9.1.1",
-    "typescript": "4.1.3"
-  },
-  "resolutions": {
-    "@babel/compat-data": "7.9.0",
-    "@types/express": "4.17.2",
-    "@types/express-serve-static-core": "4.17.2"
-  },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development concurrently yarn:start:react yarn:start:api:watch",
-    "start": "cross-env NODE_ENV=development concurrently yarn:start:react yarn:start:api",
-    "start:ci": "cross-env NODE_ENV=test concurrently yarn:start:react:proxy-server yarn:start:api",
-    "start:react": "react-scripts -r @cypress/instrument-cra start",
-    "start:empty": "cross-env NODE_ENV=development EMPTY_SEED=true concurrently yarn:start:react yarn:start:api:watch",
-    "list:dev:users": "cat data/database.json | json -a users | json -a id username",
-    "types": "tsc --noEmit",
-    "cypress:open": "cypress open",
-    "cypress:open:mobile": "cypress open --config viewportWidth=375,viewportHeight=667",
-    "cypress:run": "cypress run",
-    "cypress:run:mobile": "cypress run --config viewportWidth=375,viewportHeight=667",
-    "test": "yarn cypress:open",
-    "test:headless": "yarn cypress:run",
-    "test:api": "yarn cypress:run --spec 'integration/api/*'",
-    "test:unit": "react-scripts test --runInBand",
-    "test:unit:ci": "react-scripts test --watchAll false --ci --runInBand",
-    "start:api": "yarn tsnode --files backend/app.ts",
-    "start:api:watch": "nodemon --exec yarn tsnode --watch 'backend' backend/app.ts",
-    "start:react:proxy-server": "yarn tsnode scripts/testServer.ts",
-    "prettier": "prettier --write '**/**.{ts,js,tsx}' '*.{json,md,yml}'",
-    "tsnode": "nyc --silent ts-node -P tsconfig.tsnode.json",
-    "tsnode:not-instrumented": "ts-node -P tsconfig.tsnode.json",
-    "db:seed": "yarn tsnode scripts/generateSeedData",
-    "db:seed:dev": "ncp ./data/database-seed.json ./data/database.json",
-    "db:seed:empty": "ncp ./data/empty-seed.json ./data/database.json",
-    "postdb:seed": "yarn db:seed:dev",
-    "prestart": "yarn db:seed:dev",
-    "predev": "yarn db:seed:dev",
-    "prestart:empty": "yarn db:seed:empty",
-    "prebuild": "yarn types",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "codesandbox:start:api": "yarn tsnode:not-instrumented --files backend/app.ts",
-    "codesandbox:start": "NODE_ENV=development TSC_COMPILE_ON_ERROR=true concurrently \"react-scripts start\" yarn:start:api:codesandbox"
+    "dev": "vite",
+    "build": "vite build"
   },
   "eslintConfig": {
     "env": {
@@ -202,5 +99,9 @@
       "html",
       "json"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.1.2",
+    "vite": "^2.0.0-beta.38"
   }
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Container, Typography } from "@material-ui/core";
 
-import { ReactComponent as CypressLogo } from "../svgs/cypress-logo.svg";
+import logo from "../svgs/cypress-logo.svg";
 
 export default function Footer() {
   return (
@@ -14,14 +14,15 @@ export default function Footer() {
           rel="noopener noreferrer"
           href="https://cypress.io"
         >
-          <CypressLogo
+          <img
             style={{
               marginTop: -2,
               marginLeft: 5,
               height: "20px",
               width: "55px",
               verticalAlign: "middle",
             }}
+            src={logo}
           />
         </a>
       </Typography>

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -23,8 +23,8 @@ import { Link as RouterLink, useLocation } from "react-router-dom";
 
 import { DataContext, DataEvents } from "../machines/dataMachine";
 import TransactionNavTabs from "./TransactionNavTabs";
-import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
-import { ReactComponent as RWALogoIcon } from "../svgs/rwa-icon-logo.svg";
+// import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
+// import { ReactComponent as RWALogoIcon } from "../svgs/rwa-icon-logo.svg";
 
 const drawerWidth = 240;
 
@@ -113,11 +113,11 @@ const NavBar: React.FC<NavBarProps> = ({ drawerOpen, toggleDrawer, notifications
           data-test="app-name-logo"
         >
           <Link to="/" style={{ color: "#fff", textDecoration: "none" }} component={RouterLink}>
-            {xsBreakpoint ? (
+            {/* {xsBreakpoint ? (
               <RWALogoIcon className={classes.logo} />
             ) : (
               <RWALogo className={classes.logo} />
-            )}
+            )} */}
           </Link>
         </Typography>
         <Button

diff --git a/src/components/NotificationList.tsx b/src/components/NotificationList.tsx
@@ -4,7 +4,7 @@ import { List } from "@material-ui/core";
 import NotificationListItem from "./NotificationListItem";
 import { NotificationResponseItem } from "../models";
 import EmptyList from "./EmptyList";
-import { ReactComponent as RemindersIllustration } from "../svgs/undraw_reminders_697p.svg";
+// import { ReactComponent as RemindersIllustration } from "../svgs/undraw_reminders_697p.svg";
 
 export interface NotificationsListProps {
   notifications: NotificationResponseItem[];
@@ -29,7 +29,7 @@ const NotificationsList: React.FC<NotificationsListProps> = ({
         </List>
       ) : (
         <EmptyList entity="Notifications">
-          <RemindersIllustration style={{ height: 200, width: 250, marginBottom: 30 }} />
+          {/* <RemindersIllustration style={{ height: 200, width: 250, marginBottom: 30 }} /> */}
         </EmptyList>
       )}
     </>

diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx
@@ -17,7 +17,7 @@ import {
 import { Formik, Form, Field, FieldProps } from "formik";
 import { string, object } from "yup";
 
-import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
+// import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
 import Footer from "./Footer";
 import { SignInPayload } from "../models";
 import { AuthMachineContext, AuthMachineEvents } from "../machines/authMachine";
@@ -77,7 +77,7 @@ const SignInForm: React.FC<Props> = ({ authService }) => {
           </Alert>
         )}
         <div>
-          <RWALogo className={classes.logo} />
+          {/* <RWALogo className={classes.logo} /> */}
         </div>
         <Typography component="h1" variant="h5">
           Sign in

diff --git a/src/components/SignUpForm.tsx b/src/components/SignUpForm.tsx
@@ -15,7 +15,7 @@ import {
 import { Formik, Form, Field, FieldProps } from "formik";
 import { string, object, ref } from "yup";
 
-import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
+// import { ReactComponent as RWALogo } from "../svgs/rwa-logo.svg";
 import Footer from "./Footer";
 import { SignUpPayload } from "../models";
 import { AuthMachineContext, AuthMachineEvents } from "../machines/authMachine";
@@ -73,7 +73,7 @@ const SignUpForm: React.FC<Props> = ({ authService }) => {
       <CssBaseline />
       <div className={classes.paper}>
         <div>
-          <RWALogo className={classes.logo} />
+          {/* <RWALogo className={classes.logo} /> */}
         </div>
         <Typography component="h1" variant="h5" data-test="signup-title">
           Sign Up

diff --git a/src/components/TransactionList.tsx b/src/components/TransactionList.tsx
@@ -7,7 +7,7 @@ import SkeletonList from "./SkeletonList";
 import { TransactionResponseItem, TransactionPagination } from "../models";
 import EmptyList from "./EmptyList";
 import TransactionInfiniteList from "./TransactionInfiniteList";
-import { ReactComponent as TransferMoneyIllustration } from "../svgs/undraw_transfer_money_rywa.svg";
+// import { ReactComponent as TransferMoneyIllustration } from "../svgs/undraw_transfer_money_rywa.svg";
 
 export interface TransactionListProps {
   header: string;
@@ -62,7 +62,7 @@ const TransactionList: React.FC<TransactionListProps> = ({
             spacing={2}
           >
             <Grid item>
-              <TransferMoneyIllustration style={{ height: 200, width: 300, marginBottom: 30 }} />
+              {/* <TransferMoneyIllustration style={{ height: 200, width: 300, marginBottom: 30 }} /> */}
             </Grid>
             <Grid item>
               {showCreateButton && (

diff --git a/src/containers/UserOnboardingContainer.tsx b/src/containers/UserOnboardingContainer.tsx
@@ -19,8 +19,8 @@ import { userOnboardingMachine } from "../machines/userOnboardingMachine";
 import BankAccountForm from "../components/BankAccountForm";
 import { DataContext, DataEvents } from "../machines/dataMachine";
 import { AuthMachineContext, AuthMachineEvents } from "../machines/authMachine";
-import { ReactComponent as NavigatorIllustration } from "../svgs/undraw_navigator_a479.svg";
-import { ReactComponent as PersonalFinance } from "../svgs/undraw_personal_finance_tqcd.svg";
+// import { ReactComponent as NavigatorIllustration } from "../svgs/undraw_navigator_a479.svg";
+// import { ReactComponent as PersonalFinance } from "../svgs/undraw_personal_finance_tqcd.svg";
 
 export interface Props {
   authService: Interpreter<AuthMachineContext, any, AuthMachineEvents, any>;
@@ -68,7 +68,7 @@ const UserOnboardingContainer: React.FC<Props> = ({ authService, bankAccountsSer
         <Box display="flex" alignItems="center" justifyContent="center">
           {userOnboardingState.matches("stepOne") && (
             <>
-              <NavigatorIllustration />
+              {/* <NavigatorIllustration /> */}
               <br />
               <DialogContentText style={{ paddingLeft: 20 }}>
                 Real World App requires a Bank Account to perform transactions.
@@ -87,7 +87,7 @@ const UserOnboardingContainer: React.FC<Props> = ({ authService, bankAccountsSer
           )}
           {userOnboardingState.matches("stepThree") && (
             <>
-              <PersonalFinance />
+              {/* <PersonalFinance /> */}
               <br />
               <DialogContentText style={{ paddingLeft: 20 }}>
                 You're all set!

diff --git a/src/containers/UserSettingsContainer.tsx b/src/containers/UserSettingsContainer.tsx
@@ -4,7 +4,7 @@ import UserSettingsForm from "../components/UserSettingsForm";
 import { Interpreter } from "xstate";
 import { AuthMachineContext, AuthMachineEvents } from "../machines/authMachine";
 import { useService } from "@xstate/react";
-import { ReactComponent as PersonalSettingsIllustration } from "../svgs/undraw_personal_settings_kihd.svg";
+// import { ReactComponent as PersonalSettingsIllustration } from "../svgs/undraw_personal_settings_kihd.svg";
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -33,7 +33,7 @@ const UserSettingsContainer: React.FC<Props> = ({ authService }) => {
       </Typography>
       <Grid container spacing={2} direction="row" justify="flex-start" alignItems="flex-start">
         <Grid item>
-          <PersonalSettingsIllustration style={{ height: 200, width: 300 }} />
+          {/* <PersonalSettingsIllustration style={{ height: 200, width: 300 }} /> */}
         </Grid>
         <Grid item style={{ width: "50%" }}>
           {currentUser && <UserSettingsForm userProfile={currentUser} updateUser={updateUser} />}

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,6 @@
+export default {
+  optimizeDeps: {
+    include: ["lodash/fp"],
+  },
+  plugins: [require("@vitejs/plugin-react-refresh")()],
+};