➕Upgrade Dependencies (#378)

* remove concurrently * upgrade types * downgrade @types/react to previous version because of react-modal issue * upgrade tailwindcss * upgrade vite * upgrade @vitejs/plugin-react * upgrade cypress + downgrade vite * fix tailwind not working * upgrade typescript * upgrade zod * upgrade dompurify * Update react-toastify version to 10.0.4 * Update eslint * upgrade @hookform/resolvers * upgrade @mui/material * update react-hook-form * upgrade react-error-boundary * upgrade jest * upgrade react-icons * update react-query, emotion, framer-motion, react-textarea-autosize and react-tooltip * update react-router * update babel * update mui/material * Remove __dirname from vite.config.ts
Rllyyy · Feb 12, 2024 · 7a7dfa1 · 7a7dfa1
1 parent 56a8019
commit 7a7dfa1
Show file tree

Hide file tree

Showing 4 changed files with 1,657 additions and 1,412 deletions.
diff --git a/package.json b/package.json
@@ -7,52 +7,52 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.2.0",
-    "@mui/material": "^5.14.4",
+    "@hookform/resolvers": "^3.3.4",
+    "@mui/material": "^5.15.10",
     "@react-hook/resize-observer": "^1.2.6",
-    "@tanstack/react-query": "^5.14.6",
+    "@tanstack/react-query": "^5.20.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^12.8.3",
-    "@types/dompurify": "^3.0.2",
-    "@types/file-saver": "^2.0.5",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.8",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/dompurify": "^3.0.5",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.17",
+    "@types/react": "18.2.19",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
     "client-zip": "^2.4.4",
-    "concurrently": "^8.2.0",
     "cross-env": "^7.0.3",
-    "cypress": "^12.17.3",
-    "cypress-real-events": "^1.10.0",
-    "dompurify": "^3.0.5",
+    "cypress": "^13.6.4",
+    "cypress-real-events": "^1.11.0",
+    "dompurify": "^3.0.8",
     "file-saver": "^2.0.5",
-    "framer-motion": "10.15.1",
+    "framer-motion": "11.0.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.10",
-    "react-hook-form": "^7.45.4",
-    "react-icons": "^4.10.1",
+    "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.50.1",
+    "react-icons": "^5.0.1",
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.22.0",
     "react-switch": "^7.0.0",
-    "react-textarea-autosize": "^8.5.2",
-    "react-toastify": "^9.1.3",
-    "react-tooltip": "^5.25.2",
+    "react-textarea-autosize": "^8.5.3",
+    "react-toastify": "^10.0.4",
+    "react-tooltip": "^5.26.2",
     "rehype-katex": "^6.0.3",
     "rehype-raw": "^6.1.1",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "typescript": "^5.1.6",
-    "zod": "^3.22.3"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
+    "zod": "^3.22.4"
   },
   "scripts": {
     "start-react": "vite",
@@ -71,31 +71,31 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.19",
-    "@babel/plugin-syntax-flow": "^7.22.5",
-    "@babel/plugin-transform-react-jsx": "^7.22.15",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-syntax-flow": "^7.23.3",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/eslint-plugin-query": "^5.14.6",
-    "@types/d3-ease": "^3.0.0",
-    "@types/lodash": "^4.14.196",
-    "@types/react-modal": "^3.16.0",
-    "@types/wicg-file-system-access": "^2020.9.6",
+    "@tanstack/eslint-plugin-query": "^5.20.1",
+    "@types/d3-ease": "^3.0.2",
+    "@types/lodash": "^4.14.202",
+    "@types/react-modal": "^3.16.3",
+    "@types/wicg-file-system-access": "^2023.10.4",
     "@vitejs/plugin-react": "^4.0.4",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.46.0",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.4.0",
-    "ts-jest": "^29.1.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "ts-jest": "^29.1.2",
     "vite": "^4.5.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.3.1"
   }
 }
diff --git a/src/components/toast/toast.css b/src/components/toast/toast.css
@@ -8,8 +8,7 @@
 /* Disable default cursor and modify box shadow*/
 .Toastify__toast {
   cursor: auto;
-  box-shadow: rgba(60, 64, 67, .5) 0px 1px 2px 0px,
-    rgba(60, 64, 67, .25) 0px 2px 6px 2px;
+  box-shadow: rgba(60, 64, 67, 0.5) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 2px 6px 2px;
 }
 
 /* Set font size */
@@ -35,47 +34,18 @@
   color: var(--custom-prime-color-dark);
 }
 
-/* Adds a the background to the toast progress */
-.Toastify__toast::after {
-  content: "";
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  height: 5px;
-  width: 100%;
-}
-
 /* Modify color of text when using the theme "light" */
 .Toastify__toast-theme--light {
   color: var(--custom-secondary-color);
 }
 
 /* Override right property (was too high like 1em) */
 .Toastify__toast-container--bottom-right {
-  right: .6em;
-}
-
-/* Add background color to the progressbar */
-.Toastify__toast--success::after {
-  background-color: rgba(7, 188, 12, .25);
-}
-
-.Toastify__toast--error::after {
-  background-color: rgba(231, 76, 60, .25);
-}
-
-.Toastify__toast--info::after {
-  background-color: rgba(52, 152, 219, .25);
-}
-
-.Toastify__toast--warning::after {
-  background-color: rgba(241, 196, 15, .25);
+  right: 0.6em;
 }
 
 /* Modify toast for smaller screens */
 @media screen and (max-width: 650px) {
-
   /* Always center toast container for small devices */
   .Toastify__toast-container {
     width: 90vw;
@@ -89,13 +59,13 @@
   /* Increase font size and decrease default margin */
   .Toastify__toast {
     font-size: 18px;
-    margin-bottom: .6rem;
+    margin-bottom: 0.6rem;
     border-radius: 5px;
   }
 
   /* Increase size of svg in button to make it easier to cklick */
-  .Toastify__close-button>svg {
+  .Toastify__close-button > svg {
     height: 24px;
     width: 22px;
   }
-}
+}
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
@@ -33,7 +33,6 @@ export const CustomToastContainer = () => {
       autoClose={8000}
       hideProgressBar={false}
       newestOnTop={false}
-      closeOnClick={false}
       rtl={false}
       pauseOnFocusLoss
       draggable
@@ -73,19 +72,19 @@ function logToConsole({ type, data, content }: TLogToConsole) {
 
   //Dependent on the toast type, log corresponding message
   switch (type) {
-    case toast.TYPE.SUCCESS:
+    case "success":
       console.info(messageWithTime);
       break;
-    case toast.TYPE.ERROR:
+    case "error":
       console.error(messageWithTime);
       break;
-    case toast.TYPE.WARNING:
+    case "warning":
       console.warn(messageWithTime);
       break;
-    case toast.TYPE.INFO:
+    case "info":
       console.info(messageWithTime);
       break;
-    case toast.TYPE.DEFAULT:
+    case "default":
       console.info(messageWithTime);
       break;
     default: