chore: update eslint, enable eslint-plugin-import, perform formatting (…

…#82)
reearth · Sep 13, 2021 · 117babe · 117babe
1 parent c416019
commit 117babe
Show file tree

Hide file tree

Showing 407 changed files with 1,252 additions and 898 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -4,12 +4,29 @@ env:
 extends:
   - eslint:recommended
   - plugin:prettier/recommended
+  - plugin:import/recommended
+  - plugin:import/typescript
+  - plugin:import/warnings
 parserOptions:
   ecmaVersion: 2020
 plugins:
   - prettier
 root: true
 rules:
+  import/first: warn
+  import/newline-after-import: warn
+  import/no-named-as-default: 'off'
+  import/order:
+    - warn
+    - pathGroups:
+      - pattern: '@reearth/**'
+        group: external
+        position: after
+      pathGroupsExcludedImportTypes: ["builtin"]
+      newlines-between: always
+      alphabetize:
+        order: asc
+        caseInsensitive: true
   prettier/prettier: warn
 overrides:
   - files:
@@ -26,13 +43,9 @@ overrides:
       - react
       - react-hooks
       - '@typescript-eslint'
-      - testing-library
     extends:
       - plugin:react/recommended
       - plugin:@typescript-eslint/recommended
-      - prettier/@typescript-eslint
-      - plugin:testing-library/recommended
-      - plugin:testing-library/react
     rules:
       '@typescript-eslint/explicit-function-return-type': 'off'
       '@typescript-eslint/explicit-module-boundary-types': 'off'
@@ -54,13 +67,26 @@ overrides:
           }
         }
       ]
+      import/no-unresolved: 'off'
       no-undef: 'off'
       react/prop-types: 'off'
       react-hooks/rules-of-hooks: error
       react-hooks/exhaustive-deps: warn
     settings:
       react:
         version: detect
+  - files:
+      - '*.test.ts'
+    plugins:
+      - testing-library
+    extends:
+      - plugin:testing-library/dom
+  - files:
+      - '*.test.tsx'
+    plugins:
+      - testing-library
+    extends:
+      - plugin:testing-library/react
   - files:
       - '*.js'
     extends:

diff --git a/.prettierrc b/.prettierrc
@@ -6,7 +6,7 @@
   "singleQuote": false,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "arrowParens": "avoid",
   "parser": "typescript",
   "proseWrap": "preserve"

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,14 +1,14 @@
-import React, { ReactElement } from "react";
 import {
   ApolloProvider,
   ApolloClient,
   InMemoryCache,
   ApolloLink,
   Observable,
 } from "@apollo/client";
+import React, { ReactElement } from "react";
 
-import { Provider as ThemeProvider } from "../src/theme";
 import { Provider as IntlProvider } from "../src/locale";
+import { Provider as ThemeProvider } from "../src/theme";
 import { Provider as DndProvider } from "../src/util/use-dnd";
 
 // apollo client that does nothing

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,6 +1,8 @@
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
 const path = require("path");
+
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack = require("webpack");
+
 const pkg = require("../package.json");
 
 module.exports = ({ config }) => {

diff --git a/bin/pluginDoc.ts b/bin/pluginDoc.ts
@@ -1,5 +1,6 @@
 // import { writeFileSync } from "fs";
 import * as ts from "typescript";
+
 import tsconfig from "../tsconfig.json";
 
 const files = ["./src/plugin/api.ts"];

diff --git a/bin/postStorybook.js b/bin/postStorybook.js
@@ -1,5 +1,6 @@
-const { promisify } = require("util");
 const { exec } = require("child_process");
+const { promisify } = require("util");
+
 const axios = require("axios");
 
 const { GITHUB_TOKEN, GITHUB_PR_COMMENTS_URL, GITHUB_PR_NUMBER, GITHUB_BRANCH_NAME } = process.env;

diff --git a/cypress/integration/common.ts b/cypress/integration/common.ts
@@ -1,2 +1,3 @@
 import "../support/types";
+
 export * from "../support/config";
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
         "check": "run-p type lint test",
         "type": "tsc --noEmit",
         "lint": "eslint --ext '.js,.jsx,.ts,.tsx,.graphql' .",
-        "format": "eslint --quiet --fix --ext '.js,.jsx,.ts,.tsx,.graphql' .",
+        "format": "eslint --fix --ext '.js,.jsx,.ts,.tsx,.graphql' .",
         "storybook": "yarn && start-storybook -p 9001",
         "storybook:build": "build-storybook --quiet",
         "storybook:notify": "node ./bin/postStorybook",
@@ -94,8 +94,8 @@
         "@types/styled-components": "^5.1.7",
         "@types/webpack": "^4.41.26",
         "@types/webpack-env": "^1.16.0",
-        "@typescript-eslint/eslint-plugin": "^4.15.0",
-        "@typescript-eslint/parser": "^4.15.0",
+        "@typescript-eslint/eslint-plugin": "^4.31.0",
+        "@typescript-eslint/parser": "^4.31.0",
         "@welldone-software/why-did-you-render": "^6.2.0",
         "babel-loader": "^8.2.2",
         "babel-plugin-react-intl-auto": "^3.1.0",
@@ -107,15 +107,16 @@
         "cypress-dotenv": "^1.2.2",
         "del-cli": "^3.0.1",
         "dotenv": "^8.2.0",
-        "eslint": "^7.19.0",
-        "eslint-config-prettier": "^7.2.0",
-        "eslint-plugin-cypress": "^2.11.2",
+        "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-cypress": "^2.11.3",
         "eslint-plugin-graphql": "^4.0.0",
-        "eslint-plugin-node": "^11.0.0",
-        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-react": "^7.22.0",
-        "eslint-plugin-react-hooks": "^4.1.2",
-        "eslint-plugin-testing-library": "^3.10.2",
+        "eslint-plugin-import": "^2.24.2",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.25.1",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-testing-library": "^4.12.2",
         "extract-react-intl-messages": "^4.1.1",
         "file-loader": "^6.1.0",
         "hard-source-webpack-plugin": "^0.13.1",
@@ -126,7 +127,7 @@
         "json-loader": "^0.5.7",
         "lint-staged": "^10.5.4",
         "npm-run-all": "^4.1.5",
-        "prettier": "^2.2.1",
+        "prettier": "^2.4.0",
         "react-refresh": "^0.9.0",
         "read-env": "^2.0.0",
         "serve": "^11.3.2",

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,25 +1,25 @@
-import React, { Suspense } from "react";
 import { Router, Redirect } from "@reach/router";
+import React, { Suspense } from "react";
 
-import { Provider as IntlProvider } from "@reearth/locale";
-import { Provider as ThemeProvider, styled } from "./theme";
-import { Provider as GqlProvider } from "./gql";
-import { Provider as DndProvider } from "./util/use-dnd";
-import { Provider as Auth0Provider } from "./auth";
-
-import NotFound from "@reearth/components/pages/NotFound";
 import Loading from "@reearth/components/atoms/Loading";
-import TopPage from "@reearth/components/pages/TopPage";
+import NotFound from "@reearth/components/pages/NotFound";
 import AccountSettings from "@reearth/components/pages/Settings/Account";
-import WorkspaceSettings from "@reearth/components/pages/Settings/Workspace";
-import AssetSettings from "@reearth/components/pages/Settings/Workspace/Asset";
 import ProjectSettings from "@reearth/components/pages/Settings/Project";
-import SettingsProjectList from "@reearth/components/pages/Settings/ProjectList";
-import WorkspaceList from "@reearth/components/pages/Settings/WorkspaceList";
-import PublicSettings from "@reearth/components/pages/Settings/Project/Public";
 import DatasetSettings from "@reearth/components/pages/Settings/Project/Dataset";
 import PluginSettings from "@reearth/components/pages/Settings/Project/Plugin";
+import PublicSettings from "@reearth/components/pages/Settings/Project/Public";
+import SettingsProjectList from "@reearth/components/pages/Settings/ProjectList";
+import WorkspaceSettings from "@reearth/components/pages/Settings/Workspace";
+import AssetSettings from "@reearth/components/pages/Settings/Workspace/Asset";
+import WorkspaceList from "@reearth/components/pages/Settings/WorkspaceList";
+import TopPage from "@reearth/components/pages/TopPage";
+import { Provider as IntlProvider } from "@reearth/locale";
+
+import { Provider as Auth0Provider } from "./auth";
 import Preview from "./components/pages/Preview";
+import { Provider as GqlProvider } from "./gql";
+import { Provider as ThemeProvider, styled } from "./theme";
+import { Provider as DndProvider } from "./util/use-dnd";
 
 const EarthEditor = React.lazy(() => import("@reearth/components/pages/EarthEditor"));
 const Dashboard = React.lazy(() => import("@reearth/components/pages/Dashboard"));

diff --git a/src/auth/index.tsx b/src/auth/index.tsx
@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+
 import { useAuthenticationRequired } from "./hooks";
 
 export { default as Provider } from "./provider";

diff --git a/src/auth/provider.tsx b/src/auth/provider.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Auth0Provider } from "@auth0/auth0-react";
+import React from "react";
 
 const Provider: React.FC = ({ children }) => {
   const domain = window.REEARTH_CONFIG?.auth0Domain;

diff --git a/src/components/atoms/Accordion/AccordionItem.tsx b/src/components/atoms/Accordion/AccordionItem.tsx
@@ -6,10 +6,12 @@ import {
   AccordionItemPanel,
   AccordionItemState,
 } from "react-accessible-accordion";
+
+import { styled, useTheme } from "@reearth/theme";
+
 import Box from "../Box";
 import Flex from "../Flex";
 import Icon from "../Icon";
-import { styled, useTheme } from "@reearth/theme";
 
 export type Props = {
   className?: string;

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

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

diff --git a/src/components/atoms/Accordion/index.tsx b/src/components/atoms/Accordion/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Accordion as AccordionComponent } from "react-accessible-accordion";
+
 import AccordionItem from "./AccordionItem";
 
 export type Props = {

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

diff --git a/src/components/atoms/AdditionButton/index.tsx b/src/components/atoms/AdditionButton/index.tsx
@@ -1,8 +1,9 @@
 import React, { useRef, useCallback, useEffect } from "react";
 import { usePopper } from "react-popper";
 
-import { styled } from "@reearth/theme";
 import Icon from "@reearth/components/atoms/Icon";
+import { styled } from "@reearth/theme";
+
 import Portal from "../Portal";
 
 export interface Props {
@@ -15,24 +16,24 @@ export interface Props {
 const AdditionButton: React.FC<Props> = ({ className, children, disabled, onClick }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const { styles, attributes, update: updatePopper } = usePopper(
-    referenceElement.current,
-    popperElement.current,
-    {
-      placement: "bottom",
-      strategy: "fixed",
-      modifiers: [
-        {
-          name: "eventListeners",
-          enabled: false,
-          options: {
-            scroll: false,
-            resize: false,
-          },
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(referenceElement.current, popperElement.current, {
+    placement: "bottom",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: false,
+        options: {
+          scroll: false,
+          resize: false,
         },
-      ],
-    },
-  );
+      },
+    ],
+  });
 
   const handleClick = useCallback(() => {
     if (disabled) return;

diff --git a/src/components/atoms/Balloon/index.stories.tsx b/src/components/atoms/Balloon/index.stories.tsx
@@ -1,5 +1,6 @@
-import React from "react";
 import { storiesOf } from "@storybook/react";
+import React from "react";
+
 import Balloon from ".";
 
 const descriptionTitle = "Title";

diff --git a/src/components/atoms/Balloon/index.tsx b/src/components/atoms/Balloon/index.tsx
@@ -1,8 +1,9 @@
-import React from "react";
-import { styled } from "@reearth/theme";
 import { Placement as PopperPlacement } from "@popperjs/core";
+import React from "react";
+
 import Icon from "@reearth/components/atoms/Icon";
 import Text from "@reearth/components/atoms/Text";
+import { styled } from "@reearth/theme";
 
 export type Placement = PopperPlacement;
 

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

diff --git a/src/components/atoms/Box/index.tsx b/src/components/atoms/Box/index.tsx
@@ -1,6 +1,7 @@
+import React, { CSSProperties } from "react";
+
 import { styled } from "@reearth/theme";
 import { MetricsSizes, metricsSizes } from "@reearth/theme/metrics";
-import React, { CSSProperties } from "react";
 
 export type Props = {
   className?: string;

diff --git a/src/components/atoms/Button/index.stories.tsx b/src/components/atoms/Button/index.stories.tsx
@@ -1,5 +1,6 @@
-import React from "react";
 import { Meta } from "@storybook/react";
+import React from "react";
+
 import Button from ".";
 
 export default {

diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import Icon from "@reearth/components/atoms/Icon";
 import Text from "@reearth/components/atoms/Text";
 import { styled } from "@reearth/theme";

diff --git a/src/components/atoms/Card/index.tsx b/src/components/atoms/Card/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
+
 import Icon from "@reearth/components/atoms/Icon";
-import { styled, useTheme } from "@reearth/theme";
 import Text from "@reearth/components/atoms/Text";
+import { styled, useTheme } from "@reearth/theme";
 
 interface Props {
   id: string;

diff --git a/src/components/atoms/Check/index.stories.tsx b/src/components/atoms/Check/index.stories.tsx
@@ -1,5 +1,6 @@
-import React from "react";
 import { Meta } from "@storybook/react";
+import React from "react";
+
 import Check from ".";
 
 export default {