chore: upgrade to React 18 and switch to React Router (#234)

* Green deps * Storybook * babel, refresh, codegen, webpackenv types, graphql stuff * cypress, eslint, remove apollo-upload-client * rcslider * remove use-debounce * revert rc-slider * Upgrade caniuse-lite, remove hot:true from webpack bc don't need * react-use * react 18, react router * disable storybook telemetry * downgrade babel, upgrade TS, add ts-node * update typescript-eslint * updates for react-router, upgrade copy-webpack-plugin * update table and text atoms * fix routing * missed spelling mistake * update project routes * fix some ci errors * add type * upgrade react-align * revert to createUploadLink, some new upgrades * type: fix some gql recursive types * solve type puzzles * test * remove unused React imports * remove unused react import continued * Wrap up unused React imports * Additional upgrades * downgrade apollo/client Co-authored-by: keiya01 <keiya.s.0210@gmail.com> Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: KaWaite <kyle@eukarya.io>
reearth · Jun 17, 2022 · b0e8e67 · b0e8e67
1 parent 22aa9da
commit b0e8e67
Show file tree

Hide file tree

Showing 248 changed files with 4,432 additions and 5,163 deletions.
diff --git a/.babelrc b/.babelrc
@@ -9,7 +9,10 @@
       }
     ],
     "@babel/typescript",
-    "@babel/react"
+    ["@babel/react",
+    {
+      "runtime": "automatic"
+    }]
   ],
   "plugins": [
     "@emotion",

diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -45,6 +45,7 @@ overrides:
       - '@typescript-eslint'
     extends:
       - plugin:react/recommended
+      - plugin:react/jsx-runtime
       - plugin:@typescript-eslint/recommended
     rules:
       '@typescript-eslint/explicit-function-return-type': 'off'

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+yarn run lint-staged
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,5 +7,6 @@ module.exports = {
   ],
   core: {
     builder: "webpack5",
+    disableTelemetry: true,
   },
 };
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,7 +5,7 @@ import {
   ApolloLink,
   Observable,
 } from "@apollo/client";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { Provider as I18nProvider } from "../src/i18n";
 import { Provider as ThemeProvider } from "../src/theme";

diff --git a/package.json b/package.json
@@ -17,11 +17,11 @@
         "clean": "del build coverage storybook-static node_modules/.cache",
         "check": "run-p type lint test",
         "type": "tsc",
-        "lint": "eslint --ext '.js,.jsx,.ts,.tsx,.graphql' .",
-        "format": "eslint --fix --ext '.js,.jsx,.ts,.tsx,.graphql' .",
+        "lint": "eslint .",
+        "format": "eslint --fix .",
         "storybook": "yarn && start-storybook -p 9001",
         "storybook:build": "build-storybook --quiet -o build/storybook",
-        "storybook:screenshot": "storycap --serverCmd 'npx http-server ./storybook-static -p 6006' --serverTimeout 100000 http://localhost:6006 --max-old-space-size=2048",
+        "storybook:screenshot": "storycap --serverCmd 'npx http-server build/storybook -p 6006' --serverTimeout 100000 http://localhost:6006 --max-old-space-size=2048",
         "cypress:open": "cypress open",
         "cypress:run": "cypress run",
         "gql": "graphql-codegen --config codegen.yml",
@@ -31,6 +31,9 @@
     "engines": {
         "node": ">=12"
     },
+    "lint-staged": {
+        "**/*.{js,mjs,jsx,ts,mts,tsx}": "eslint --fix"
+    },
     "jest": {
         "preset": "ts-jest",
         "testEnvironment": "jsdom",
@@ -53,71 +56,69 @@
         ]
     },
     "devDependencies": {
-        "@babel/core": "^7.15.8",
+        "@babel/core": "^7.18.5",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
-        "@babel/plugin-proposal-optional-chaining": "^7.12.13",
+        "@babel/plugin-proposal-optional-chaining": "7.17.12",
         "@babel/plugin-transform-typescript": "^7.15.8",
         "@babel/preset-env": "^7.16.4",
         "@babel/preset-react": "^7.12.13",
         "@babel/preset-typescript": "^7.16.7",
-        "@cypress/webpack-preprocessor": "^5.11.0",
+        "@cypress/webpack-preprocessor": "^5.12.0",
         "@graphql-codegen/cli": "^2.6.2",
         "@graphql-codegen/fragment-matcher": "^3.2.1",
         "@graphql-codegen/introspection": "^2.1.1",
-        "@graphql-codegen/typescript": "2.4.8",
-        "@graphql-codegen/typescript-operations": "2.3.5",
-        "@graphql-codegen/typescript-react-apollo": "3.2.11",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
-        "@storybook/addon-essentials": "^6.4.22",
-        "@storybook/addons": "^6.4.22",
-        "@storybook/builder-webpack5": "^6.4.22",
-        "@storybook/manager-webpack5": "^6.4.22",
-        "@storybook/react": "^6.4.22",
-        "@storybook/theming": "^6.4.22",
-        "@testing-library/cypress": "^8.0.2",
+        "@graphql-codegen/typescript": "2.5.1",
+        "@graphql-codegen/typescript-operations": "2.4.2",
+        "@graphql-codegen/typescript-react-apollo": "3.2.16",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+        "@storybook/addon-essentials": "^6.5.9",
+        "@storybook/addons": "^6.5.9",
+        "@storybook/builder-webpack5": "^6.5.9",
+        "@storybook/manager-webpack5": "^6.5.9",
+        "@storybook/react": "^6.5.9",
+        "@storybook/theming": "^6.5.9",
+        "@testing-library/cypress": "^8.0.3",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^13.5.0",
-        "@types/apollo-upload-client": "^17.0.0",
         "@types/copy-webpack-plugin": "^10.1.0",
         "@types/jest": "^27.5.1",
         "@types/lodash": "^4.14.182",
         "@types/lodash-es": "^4.17.6",
-        "@types/node": "^17.0.33",
-        "@types/rc-slider": "^9.3.1",
+        "@types/node": "^17.0.42",
         "@types/reach__router": "^1.3.10",
-        "@types/react": "^17.0.39",
-        "@types/react-dom": "^17.0.11",
+        "@types/react": "^18.0.12",
+        "@types/react-dom": "^18.0.5",
         "@types/react-ga": "^2.3.0",
         "@types/react-leaflet": "^2.5.2",
         "@types/storybook__addon-info": "^5.2.2",
         "@types/styled-components": "^5.1.25",
         "@types/webpack": "^5.28.0",
-        "@types/webpack-env": "^1.16.4",
-        "@typescript-eslint/eslint-plugin": "^5.23.0",
-        "@typescript-eslint/parser": "^5.23.0",
-        "@welldone-software/why-did-you-render": "^6.2.3",
+        "@types/webpack-env": "^1.17.0",
+        "@typescript-eslint/eslint-plugin": "^5.27.1",
+        "@typescript-eslint/parser": "^5.27.1",
+        "@welldone-software/why-did-you-render": "^7.0.1",
         "babel-jest": "^27.5.1",
-        "babel-loader": "^8.2.3",
+        "babel-loader": "^8.2.5",
         "clean-webpack-plugin": "^4.0.0",
-        "copy-webpack-plugin": "10.2.4",
+        "copy-webpack-plugin": "11.0.0",
         "cross-fetch": "^3.1.5",
         "css-loader": "^6.7.1",
-        "cypress": "^9.6.1",
+        "cypress": "^9.7.0",
         "cypress-dotenv": "^2.0.0",
         "del-cli": "^4.0.1",
         "dotenv": "^16.0.1",
-        "eslint": "^8.13.0",
+        "eslint": "^8.16.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-graphql": "^4.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react": "^7.30.0",
         "eslint-plugin-react-hooks": "^4.5.0",
-        "eslint-plugin-testing-library": "^5.5.0",
+        "eslint-plugin-testing-library": "^5.5.1",
         "file-loader": "^6.1.0",
         "hard-source-webpack-plugin": "^0.13.1",
         "html-webpack-plugin": "^5.4.0",
@@ -126,56 +127,58 @@
         "i18next-parser": "^6.4.0",
         "jest": "^27.5.0",
         "jest-transform-yaml": "^1.0.0",
-        "lint-staged": "^12.4.1",
+        "json-loader": "^0.5.7",
+        "lint-staged": "^12.4.2",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.6.2",
-        "react-refresh": "^0.11.0",
+        "react-refresh": "^0.13.0",
         "read-env": "^2.0.0",
         "serve": "^13.0.2",
-        "storycap": "^3.1.7",
+        "storycap": "^3.1.8",
         "style-loader": "^3.3.1",
         "ts-jest": "^27.1.4",
+        "ts-node": "^10.8.1",
         "type-fest": "^2.12.2",
-        "typescript": "^4.4.4",
+        "typescript": "^4.7.3",
         "typescript-styled-plugin": "^0.18.2",
         "use-custom-compare": "^1.2.0",
         "webpack": "^5.72.1",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "^4.9.0",
+        "webpack-dev-server": "^4.9.2",
         "yaml-loader": "^0.8.0"
     },
     "dependencies": {
-        "@apollo/client": "^3.5.8",
+        "@apollo/client": "3.6.6",
         "@auth0/auth0-react": "^1.10.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
         "@monaco-editor/react": "^4.4.5",
         "@popperjs/core": "^2.11.5",
-        "@reach/router": "^1.3.4",
         "@rot1024/use-transition": "^1.0.0",
         "@sentry/browser": "^6.19.7",
+        "@types/apollo-upload-client": "^17.0.0",
         "@types/gapi.auth2": "^0.0.56",
         "@types/gapi.client": "^1.0.4",
         "@types/gapi.client.sheets": "^4.0.20201029",
         "@types/google.picker": "^0.0.39",
         "@types/tinycolor2": "^1.4.2",
-        "apollo-link-sentry": "^3.1.1",
+        "apollo-link-sentry": "^3.1.2",
         "apollo-upload-client": "^17.0.0",
         "array-move": "^4.0.0",
         "axios": "^0.27.2",
-        "cesium": "^1.93.0",
+        "cesium": "^1.94.3",
         "cesium-dnd": "1.1.0",
-        "core-js": "^3.22.5",
+        "core-js": "^3.23.0",
         "date-fns": "^2.28.0",
         "detect-browser": "^5.3.0",
         "formik": "^2.2.6",
         "github-markdown-css": "^5.1.0",
-        "graphiql": "^1.8.10",
-        "graphql": "^16.3.0",
-        "i18next": "^21.8.2",
+        "graphiql": "^1.9.7",
+        "graphql": "^16.5.0",
+        "i18next": "^21.8.9",
         "i18next-browser-languagedetector": "^6.1.4",
-        "jotai": "^1.6.6",
+        "jotai": "^1.7.2",
         "js-file-download": "^0.4.12",
         "leaflet": "^1.8.0",
         "lodash-es": "^4.17.20",
@@ -184,31 +187,31 @@
         "quickjs-emscripten": "^0.15.0",
         "quickjs-emscripten-sync": "^1.2.0",
         "rc-slider": "9.7.5",
-        "react": "^17.0.2",
-        "react-accessible-accordion": "^4.0.0",
-        "react-align": "^2.0.4",
+        "react": "^18.1.0",
+        "react-accessible-accordion": "^5.0.0",
+        "react-align": "^2.0.5",
         "react-colorful": "^5.5.1",
-        "react-dnd": "^15.1.1",
-        "react-dnd-html5-backend": "^15.1.2",
-        "react-dom": "^17.0.2",
-        "react-dropzone": "^12.0.5",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dom": "^18.1.0",
+        "react-dropzone": "^14.2.1",
         "react-ga": "^3.3.0",
-        "react-i18next": "^11.16.9",
-        "react-leaflet": "^3.2.5",
+        "react-i18next": "^11.17.1",
+        "react-leaflet": "^4.0.0",
         "react-markdown": "^8.0.3",
         "react-nl2br": "^1.0.4",
         "react-player": "^2.10.1",
         "react-popper": "^2.3.0",
-        "react-spinners": "^0.11.0",
-        "react-svg": "^14.1.18",
-        "react-use": "^17.3.2",
+        "react-router-dom": "^6.3.0",
+        "react-spinners": "^0.12.0",
+        "react-svg": "^15.0.3",
+        "react-use": "^17.4.0",
         "regenerator-runtime": "^0.13.7",
         "remark-gfm": "^3.0.1",
         "resium": "^1.14.3",
         "tinycolor2": "^1.4.2",
         "ts-easing": "^0.2.0",
         "use-callback-ref": "^1.3.0",
-        "use-debounce": "^7.0.1",
         "use-file-input": "^1.0.0"
     }
 }
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,5 +1,5 @@
-import { Router, Redirect } from "@reach/router";
 import React, { Suspense } from "react";
+import { BrowserRouter as Router, useRoutes, Navigate } from "react-router-dom";
 
 import Loading from "@reearth/components/atoms/Loading";
 import NotificationBanner from "@reearth/components/organisms/Notification";
@@ -39,6 +39,32 @@ if (enableWhyDidYouRender && process.env.NODE_ENV === "development") {
   });
 }
 
+function AppRoutes() {
+  const routes = useRoutes([
+    { path: "/", element: <RootPage /> },
+    { path: "/login", element: <LoginPage /> },
+    { path: "/signup", element: <SignupPage /> },
+    { path: "/password-reset", element: <PasswordResetPage /> },
+    { path: "/dashboard/:teamId", element: <Dashboard /> },
+    { path: "/edit/:sceneId", element: <EarthEditor /> },
+    { path: "/edit/:sceneId/preview", element: <Preview /> },
+    { path: "/settings", element: <Navigate to="/settings/account" /> },
+    { path: "/settings/account", element: <AccountSettings /> },
+    { path: "/settings/workspaces", element: <WorkspaceList /> },
+    { path: "/settings/workspaces/:teamId", element: <WorkspaceSettings /> },
+    { path: "/settings/workspaces/:teamId/projects", element: <SettingsProjectList /> },
+    { path: "/settings/workspaces/:teamId/asset", element: <AssetSettings /> },
+    { path: "/settings/projects/:projectId", element: <ProjectSettings /> },
+    { path: "/settings/projects/:projectId/public", element: <PublicSettings /> },
+    { path: "/settings/projects/:projectId/dataset", element: <DatasetSettings /> },
+    { path: "/settings/projects/:projectId/plugins", element: <PluginSettings /> },
+    { path: "/plugin-editor", element: <PluginEditor /> },
+    { path: "/graphql", element: process.env.NODE_ENV !== "production" && <GraphQLPlayground /> },
+    { path: "*", element: <NotFound /> },
+  ]);
+  return routes;
+}
+
 const App: React.FC = () => {
   return (
     <Auth0Provider>
@@ -48,26 +74,7 @@ const App: React.FC = () => {
             <Suspense fallback={<Loading />}>
               <NotificationBanner />
               <StyledRouter>
-                <RootPage path="/" />
-                <LoginPage path="/login" />
-                <SignupPage path="/signup" />
-                <PasswordResetPage path="/password-reset" />
-                <Dashboard path="/dashboard/:teamId" />
-                <EarthEditor path="/edit/:sceneId" />
-                <Preview path="/edit/:sceneId/preview" />
-                <Redirect from="/settings" to="/settings/account" />
-                <AccountSettings path="/settings/account" />
-                <WorkspaceList path="/settings/workspaces" />
-                <WorkspaceSettings path="/settings/workspace/:teamId" />
-                <SettingsProjectList path="/settings/workspace/:teamId/projects" />
-                <AssetSettings path="/settings/workspace/:teamId/asset" />
-                <ProjectSettings path="/settings/project/:projectId" />
-                <PublicSettings path="/settings/project/:projectId/public" />
-                <DatasetSettings path="/settings/project/:projectId/dataset" />
-                <PluginSettings path="/settings/project/:projectId/plugins" />
-                <PluginEditor path="/plugin-editor" />
-                {process.env.NODE_ENV !== "production" && <GraphQLPlayground path="/graphql" />}
-                <NotFound default />
+                <AppRoutes />
               </StyledRouter>
             </Suspense>
           </I18nProvider>

diff --git a/src/auth/index.tsx b/src/auth/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { ReactNode } from "react";
 
 import { useAuthenticationRequired } from "./hooks";
 
@@ -7,9 +7,7 @@ export { default as useAuth, useCleanUrl, useAuthenticationRequired } from "./ho
 
 export { withAuthenticationRequired } from "@auth0/auth0-react";
 
-export function AuthenticationRequiredPage({
-  children,
-}: PropsWithChildren<unknown>): JSX.Element | null {
+export const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
   const [isAuthenticated] = useAuthenticationRequired(); // TODO: show error
   return isAuthenticated && children ? <>{children}</> : null;
-}
+};
diff --git a/src/auth/provider.tsx b/src/auth/provider.tsx
@@ -1,7 +1,7 @@
 import { Auth0Provider } from "@auth0/auth0-react";
-import React from "react";
+import { ReactNode } from "react";
 
-const Provider: React.FC = ({ children }) => {
+const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
   const domain = window.REEARTH_CONFIG?.auth0Domain;
   const clientId = window.REEARTH_CONFIG?.auth0ClientId;
   const audience = window.REEARTH_CONFIG?.auth0Audience;

diff --git a/src/components/atoms/Accordion/index.stories.tsx b/src/components/atoms/Accordion/index.stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 
 import Component, { Props } from ".";
 

diff --git a/src/components/atoms/Accordion/index.test.tsx b/src/components/atoms/Accordion/index.test.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import { fireEvent, render, screen } from "@reearth/test/utils";
 
 import Accordion, { AccordionItemType } from "./index";