Update all frontend libraries

Author: jc21

docker/dev/Dockerfile

@@ -23,7 +23,7 @@ ENV GOPROXY=$GOPROXY \
 RUN echo "fs.file-max = 65535" > /etc/sysctl.conf
 
 # usql, node, fail2ban
-RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
 	&& apt-get update \
 	&& apt-get install -y --no-install-recommends nodejs vim dnsutils fail2ban \
 	&& npm install --___location=global yarn \

frontend/package.json

@@ -3,67 +3,67 @@
 	"version": "3.0.0",
 	"private": true,
 	"dependencies": {
-		"@chakra-ui/react": "^2.5.1",
+		"@chakra-ui/react": "^2.5.5",
 		"@emotion/react": "^11.10.6",
 		"@emotion/styled": "^11.10.6",
-		"@testing-library/jest-dom": "5.16.4",
-		"@testing-library/react": "13.3.0",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "14.0.0",
 		"@types/humps": "^2.0.2",
-		"@types/jest": "28.1.5",
-		"@types/lodash": "4.14.182",
-		"@types/node": "18.0.4",
-		"@types/react": "18.0.15",
-		"@types/react-dom": "18.0.6",
+		"@types/jest": "29.5.0",
+		"@types/lodash": "4.14.192",
+		"@types/node": "18.15.11",
+		"@types/react": "18.0.34",
+		"@types/react-dom": "18.0.11",
 		"@types/react-router-dom": "5.3.3",
 		"@types/react-syntax-highlighter": "^15.5.6",
-		"@types/react-table": "^7.7.12",
-		"@types/styled-components": "5.1.25",
-		"@typescript-eslint/eslint-plugin": "^5.30.6",
-		"@typescript-eslint/parser": "^5.30.6",
+		"@types/react-table": "^7.7.14",
+		"@types/styled-components": "5.1.26",
+		"@typescript-eslint/eslint-plugin": "^5.58.0",
+		"@typescript-eslint/parser": "^5.58.0",
 		"ajv": "^8.12.0",
 		"babel-eslint": "^10.1.0",
-		"chakra-react-select": "^4.5.0",
-		"classnames": "^2.3.1",
-		"country-flag-icons": "^1.5.5",
-		"date-fns": "2.28.0",
-		"eslint": "^8.19.0",
-		"eslint-config-prettier": "^8.5.0",
+		"chakra-react-select": "^4.6.0",
+		"classnames": "^2.3.2",
+		"country-flag-icons": "^1.5.7",
+		"date-fns": "2.29.3",
+		"eslint": "^8.38.0",
+		"eslint-config-prettier": "^8.8.0",
 		"eslint-config-react-app": "^7.0.1",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-flowtype": "^8.0.3",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.6.0",
+		"eslint-plugin-import": "^2.27.5",
+		"eslint-plugin-jsx-a11y": "^6.7.1",
 		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"formik": "^2.2.9",
-		"framer-motion": "^8.4.2",
+		"framer-motion": "^10.11.2",
 		"humps": "^2.0.1",
 		"jest-date-mock": "1.0.8",
 		"jest-fetch-mock": "3.0.3",
-		"jest-junit": "^14.0.0",
-		"jest-localstorage-mock": "2.4.21",
-		"jest-runner-eslint": "1.0.1",
+		"jest-junit": "^15.0.0",
+		"jest-localstorage-mock": "2.4.26",
+		"jest-runner-eslint": "2.0.0",
 		"lodash": "4.17.21",
 		"moment": "2.29.4",
-		"node-sass": "^7.0.1",
-		"prettier": "2.7.1",
-		"query-string": "7.1.1",
+		"node-sass": "^8.0.0",
+		"prettier": "2.8.7",
+		"query-string": "8.1.0",
 		"react": "^18.2.0",
 		"react-async": "10.0.1",
 		"react-dom": "18.2.0",
-		"react-focus-lock": "^2.9.1",
-		"react-icons": "^4.4.0",
-		"react-intl": "^6.0.5",
-		"react-markdown": "^8.0.3",
-		"react-query": "^3.39.1",
-		"react-router-dom": "^6.3.0",
+		"react-focus-lock": "^2.9.4",
+		"react-icons": "^4.8.0",
+		"react-intl": "^6.3.2",
+		"react-markdown": "^8.0.6",
+		"react-query": "^3.39.3",
+		"react-router-dom": "^6.10.0",
 		"react-scripts": "5.0.1",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-table": "7.8.0",
-		"rooks": "5.11.8",
+		"rooks": "7.11.0",
 		"tmp": "^0.2.1",
-		"typescript": "^4.9.4"
+		"typescript": "^5.0.4"
 	},
 	"scripts": {
 		"start": "react-scripts start",
@@ -109,7 +109,7 @@
 		}
 	},
 	"devDependencies": {
-		"@formatjs/cli": "^5.0.2",
+		"@formatjs/cli": "^6.0.4",
 		"@types/country-flag-icons": "^1.2.0"
 	}
 }

frontend/src/api/npm/base.ts

@@ -1,6 +1,6 @@
 import { camelizeKeys, decamelizeKeys } from "humps";
 import AuthStore from "modules/AuthStore";
-import * as queryString from "query-string";
+import queryString from "query-string";
 
 const contentTypeHeader = "Content-Type";
 

frontend/src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { ColorModeScript } from "@chakra-ui/react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 
 import App from "./App";
 import "./index.scss";
@@ -19,10 +19,12 @@ declare global {
 	}
 }
 
-ReactDOM.render(
-	<>
+const root = ReactDOM.createRoot(
+	document.getElementById("root") as HTMLElement,
+);
+root.render(
+	<React.StrictMode>
 		<ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
 		<App />
-	</>,
-	document.getElementById("root"),
+	</React.StrictMode>,
 );