Configure eslint to tailor to our initial needs (#35)

* Configure eslint to tailor to our initial needs

* disable no-cycle becuase it's so slow

* rename project

* Redirect npm usage to yarn

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "basic-frontend",
+  "name": "akatsuki-web",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -78,13 +78,142 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
-    "lint-fix": "yarn eslint --fix src/"
+    "lint-fix": "yarn eslint --fix src/",
+    "preinstall": "npx only-allow yarn"
   },
   "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
     "extends": [
       "react-app",
-      "react-app/jest"
-    ]
+      "react-app/jest",
+      "prettier",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:import/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:prettier/recommended",
+      "plugin:import/typescript",
+      "plugin:react/jsx-runtime"
+    ],
+    "plugins": [
+      "check-file",
+      "simple-import-sort"
+    ],
+    "rules": {
+      "@typescript-eslint/no-explicit-any": "off",
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "check-file/no-index": [
+        "warn"
+      ],
+      "react/jsx-sort-props": [
+        "error",
+        {
+          "callbacksLast": false,
+          "shorthandFirst": true,
+          "multiline": "ignore",
+          "ignoreCase": true,
+          "noSortAlphabetically": true,
+          "reservedFirst": true
+        }
+      ],
+      "import/no-default-export": "off",
+      "react/forbid-elements": [
+        "error",
+        {
+          "forbid": [
+            {
+              "element": "h1",
+              "message": "Use @materialui <Typography /> instead of <h1 />"
+            },
+            {
+              "element": "h2",
+              "message": "Use @materialui <Typography /> instead of <h2 />"
+            },
+            {
+              "element": "h3",
+              "message": "Use @materialui <Typography /> instead of <h3 />"
+            },
+            {
+              "element": "h4",
+              "message": "Use @materialui <Typography /> instead of <h4 />"
+            },
+            {
+              "element": "h5",
+              "message": "Use @materialui <Typography /> instead of <h5 />"
+            },
+            {
+              "element": "h6",
+              "message": "Use @materialui <Typography /> instead of <h5 />"
+            },
+            {
+              "element": "p",
+              "message": "Use @materialui <Typography /> instead of <p />"
+            },
+            {
+              "element": "div",
+              "message": "Use @materialui <Box /> instead of <div />"
+            },
+            {
+              "element": "grid",
+              "message": "Use @materialui <Grid /> instead of <grid />"
+            },
+            {
+              "element": "button",
+              "message": "Use @materialui <Button /> instead of <button />"
+            }
+          ]
+        }
+      ],
+      "react/jsx-pascal-case": [
+        "error",
+        {
+          "allowAllCaps": false,
+          "allowLeadingUnderscore": false,
+          "allowNamespace": false
+        }
+      ],
+      "react/jsx-boolean-value": [
+        "warn",
+        "never"
+      ],
+      "react/forbid-component-props": [
+        "error",
+        {
+          "forbid": [
+            "className",
+            "style"
+          ]
+        }
+      ],
+      "react/forbid-dom-props": [
+        "error",
+        {
+          "forbid": [
+            "className",
+            "style"
+          ]
+        }
+      ],
+      "import/no-duplicates": [
+        "error",
+        {
+          "prefer-inline": true
+        }
+      ]
+    }
   },
   "browserslist": {
     "production": [
@@ -102,6 +231,10 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-check-file": "^2.8.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "prettier": "^3.3.2"
   },
   "jest": {

src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from "react"
 import { render, screen } from "@testing-library/react"
+
 import App from "./App"
 
 test("renders learn react link", () => {

src/App.tsx

@@ -1,40 +1,41 @@
+import * as amplitude from "@amplitude/analytics-browser"
+import Box from "@mui/material/Box"
+import CssBaseline from "@mui/material/CssBaseline"
+import Stack from "@mui/material/Stack"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js"
 import React from "react"
-import Navbar from "./components/Navbar"
 import {
   createBrowserRouter,
   createRoutesFromElements,
+  Outlet,
   Route,
   RouterProvider,
-  Outlet,
 } from "react-router-dom"
-import * as amplitude from '@amplitude/analytics-browser';
-import { HomePage } from "./pages/HomePage"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+
+import Footer from "./components/Footer"
+import Navbar from "./components/Navbar"
 import { IdentityContextProvider } from "./context/identity"
-import { RegisterPage } from "./pages/RegisterPage"
-import { LoginPage } from "./pages/LoginPage"
+import { AboutPage } from "./pages/AboutPage"
+import { ContactPage } from "./pages/ContactPage"
+import { HomePage } from "./pages/HomePage"
 import { LeaderboardsPage } from "./pages/LeaderboardsPage"
+import { LoginPage } from "./pages/LoginPage"
+import { PrivacyPolicyPage } from "./pages/PrivacyPolicyPage"
 import { ProfilePage } from "./pages/ProfilePage"
+import { RegisterPage } from "./pages/RegisterPage"
 import { SupportPage } from "./pages/SupportPage"
-import CssBaseline from "@mui/material/CssBaseline"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js"
-import { AboutPage } from "./pages/AboutPage"
-import Footer from "./components/Footer"
-import Box from "@mui/material/Box"
-import Stack from "@mui/material/Stack"
 import { TeamPage } from "./pages/TeamPage"
-import { ContactPage } from "./pages/ContactPage"
 import { TermsOfServicePage } from "./pages/TermsOfServicePage"
-import { PrivacyPolicyPage } from "./pages/PrivacyPolicyPage"
 
 ChartJS.register(
   CategoryScale,
@@ -81,7 +82,7 @@ export default function App() {
   amplitude.init(process.env.REACT_APP_AMPLITUDE_API_KEY, {
     defaultTracking: true,
     minIdLength: 4,
-  });
+  })
 
   const theme = React.useMemo(
     () =>

src/adapters/akatsuki-api/authentication.ts

@@ -1,4 +1,5 @@
 import axios from "axios"
+
 import type { Identity } from "../../context/identity"
 
 interface AuthenticateRequest {

src/adapters/akatsuki-api/profileHistory.ts

@@ -1,4 +1,5 @@
 import axios from "axios"
+
 import { GameMode } from "../../gameModes"
 
 export enum ProfileHistoryType {

src/components/DestinationIcons.tsx

@@ -1,7 +1,7 @@
+import PublicIcon from "@mui/icons-material/Public"
 import { Box, Tooltip } from "@mui/material"
-import { getCountryName, getFlagUrl } from "../utils/countries"
 
-import PublicIcon from "@mui/icons-material/Public"
+import { getCountryName, getFlagUrl } from "../utils/countries"
 
 export const GlobalIcon = ({
   width,

src/components/Footer.tsx

@@ -1,9 +1,10 @@
-import { Link } from "react-router-dom"
-import { FooterLogo } from "./images/logos/FooterLogo"
+import { Copyright, GitHub, Twitter } from "@mui/icons-material"
 import { Box, Container, Divider, Stack, Typography } from "@mui/material"
+import { Link } from "react-router-dom"
+
 import FooterBanner from "./images/banners/footer_banner.png"
-import { Copyright, GitHub, Twitter } from "@mui/icons-material"
 import { DiscordLogo } from "./images/logos/DiscordLogo"
+import { FooterLogo } from "./images/logos/FooterLogo"
 
 export default function Footer() {
   return (
@@ -55,6 +56,7 @@ export default function Footer() {
                 <Stack direction="column" spacing={2}>
                   <Link
                     to="/team"
+                    // eslint-disable-next-line react/forbid-component-props
                     style={{
                       color: "#FFFFFF",
                       textDecoration: "none",
@@ -66,6 +68,7 @@ export default function Footer() {
                   </Link>
                   <Link
                     to="/contact"
+                    // eslint-disable-next-line react/forbid-component-props
                     style={{
                       color: "#FFFFFF",
                       textDecoration: "none",
@@ -79,6 +82,7 @@ export default function Footer() {
                 <Stack direction="column" spacing={2}>
                   <Link
                     to="/privacy-policy"
+                    // eslint-disable-next-line react/forbid-component-props
                     style={{
                       color: "#FFFFFF",
                       textDecoration: "none",
@@ -90,6 +94,7 @@ export default function Footer() {
                   </Link>
                   <Link
                     to="/terms-of-service"
+                    // eslint-disable-next-line react/forbid-component-props
                     style={{
                       color: "#FFFFFF",
                       textDecoration: "none",
@@ -125,6 +130,7 @@ export default function Footer() {
                 </Link>
                 <Link
                   to={process.env.REACT_APP_GITHUB_ORG_URL}
+                  // eslint-disable-next-line react/forbid-component-props
                   style={{
                     color: "#FFFFFF",
                     textDecoration: "none",
@@ -134,6 +140,7 @@ export default function Footer() {
                 </Link>
                 <Link
                   to={process.env.REACT_APP_TWITTER_URL}
+                  // eslint-disable-next-line react/forbid-component-props
                   style={{
                     color: "#FFFFFF",
                     textDecoration: "none",

src/components/GamemodeSelectionBar.tsx

@@ -1,10 +1,11 @@
+import { Stack } from "@mui/material"
 import Box from "@mui/material/Box"
-import { GameMode, isRealGameMode, RelaxMode } from "../gameModes"
 import Typography from "@mui/material/Typography"
-import { Stack } from "@mui/material"
-import { StandardGameModeIcon } from "./images/gamemode-icons/StandardGameModeIcon"
-import { ManiaGameModeIcon } from "./images/gamemode-icons/ManiaGameModeIcon"
+
+import { GameMode, isRealGameMode, RelaxMode } from "../gameModes"
 import { CatchGameModeIcon } from "./images/gamemode-icons/CatchGameModeIcon"
+import { ManiaGameModeIcon } from "./images/gamemode-icons/ManiaGameModeIcon"
+import { StandardGameModeIcon } from "./images/gamemode-icons/StandardGameModeIcon"
 import { TaikoGameModeIcon } from "./images/gamemode-icons/TaikoGameModeIcon"
 
 const GameModeSelector = ({