add eslint

kscalelabs · May 30, 2024 · 14cbbae · 14cbbae
1 parent 34b595d
commit 14cbbae
Show file tree

Hide file tree

Showing 14 changed files with 1,894 additions and 1,172 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -0,0 +1,27 @@
+import { fixupConfigRules } from "@eslint/compat";
+import pluginJs from "@eslint/js";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+const reactSettings = {
+  settings: {
+    react: {
+      version: "detect", // Automatically detect the React version
+    },
+  },
+};
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactSettings,
+  ...fixupConfigRules({
+    ...pluginReactConfig,
+    rules: {
+      ...pluginReactConfig.rules,
+      "react/react-in-jsx-scope": "off",
+    },
+  }),
+];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,22 +12,22 @@
     "holderjs": "^2.9.9",
     "nth-check": ">=2.0.1",
     "postcss": ">=8.4.31",
-    "prettier": "^3.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
+  "type": "module",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "watch": "nodemon serve",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
-    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" && eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" && eslint 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "eslintConfig": {
     "extends": [
@@ -48,15 +48,26 @@
     ]
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.24.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.24.6",
+    "@eslint/compat": "^1.0.1",
+    "@eslint/js": "^9.3.0",
     "@types/jest": "^29.5.12",
     "axios": "^1.7.2",
+    "babel-eslint": "^10.1.0",
     "bootstrap": "^5.3.3",
+    "eslint": "^9.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "globals": "^15.3.0",
     "nodemon": "^3.1.0",
+    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react-bootstrap": "^2.10.2",
     "react-router-dom": "^6.23.1",
-    "ts-jest": "^29.1.4"
+    "ts-jest": "^29.1.4",
+    "typescript-eslint": "^7.11.0"
   }
 }
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import App from "./App";
+import App from "App";
 
 test("renders stompy urdf link", () => {
   render(<App />);

diff --git a/frontend/src/components/NotFoundRedirect.tsx b/frontend/src/components/NotFoundRedirect.tsx
@@ -8,4 +8,5 @@ const NotFoundRedirect = () => {
   }, [navigate]);
   return null;
 };
+
 export default NotFoundRedirect;
diff --git a/frontend/src/constants/backend.ts b/frontend/src/constants/backend.ts
@@ -1,14 +1,15 @@
-import axios, { AxiosError } from "axios";
+import { AxiosError, isAxiosError } from "axios";
 
 export const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
 
+// eslint-disable-next-line
 export const humanReadableError = (error: any | undefined) => {
-  if (axios.isAxiosError(error)) {
+  if (isAxiosError(error)) {
     const axiosError = error as AxiosError;
     const request = axiosError.request,
       response = axiosError.response;
     if (response) {
-      const detail = (response.data as any).detail;
+      const detail = (response.data as any).detail; // eslint-disable-line
       if (typeof detail === "string") {
         return detail;
       }

diff --git a/frontend/src/hooks/alerts.tsx b/frontend/src/hooks/alerts.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useCallback, useContext, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
 import { Toast, ToastContainer } from "react-bootstrap";
 
 const DELAY = 5000;
@@ -20,9 +26,9 @@ const alertTypeToBg = (kind: AlertType) => {
 };
 
 interface AlertQueueContextProps {
-  alerts: Map<string, [string | React.ReactNode, AlertType]>;
+  alerts: Map<string, [string | ReactNode, AlertType]>;
   removeAlert: (alertId: string) => void;
-  addAlert: (alert: string | React.ReactNode, kind: AlertType) => void;
+  addAlert: (alert: string | ReactNode, kind: AlertType) => void;
 }
 
 const AlertQueueContext = createContext<AlertQueueContextProps | undefined>(
@@ -37,15 +43,15 @@ export const AlertQueueProvider = (props: AlertQueueProviderProps) => {
   const { children } = props;
 
   const [alerts, setAlerts] = useState<
-    Map<string, [string | React.ReactNode, AlertType]>
+    Map<string, [string | ReactNode, AlertType]>
   >(new Map());
 
   const generateAlertId = useCallback(() => {
     return Math.random().toString(36).substring(2);
   }, []);
 
   const addAlert = useCallback(
-    (alert: string | React.ReactNode, kind: AlertType) => {
+    (alert: string | ReactNode, kind: AlertType) => {
       setAlerts((prev) => {
         const newAlerts = new Map(prev);
         const alertId = generateAlertId();
@@ -93,7 +99,7 @@ export const useAlertQueue = () => {
 };
 
 interface AlertQueueProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const AlertQueue = (props: AlertQueueProps) => {

diff --git a/frontend/src/hooks/auth.tsx b/frontend/src/hooks/auth.tsx
@@ -1,6 +1,13 @@
-import axios, { AxiosError, AxiosInstance } from "axios";
+import axios, { AxiosError, AxiosInstance, isAxiosError } from "axios";
 import { BACKEND_URL } from "constants/backend";
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 const REFRESH_TOKEN_KEY = "__REFRESH_TOKEN";
@@ -51,7 +58,7 @@ const AuthenticationContext = createContext<
 >(undefined);
 
 interface AuthenticationProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const AuthenticationProvider = (props: AuthenticationProviderProps) => {
@@ -137,7 +144,7 @@ export const AuthenticationProvider = (props: AuthenticationProviderProps) => {
           );
           localSessionToken = response.data.token;
         } catch (refreshError) {
-          if (axios.isAxiosError(refreshError)) {
+          if (isAxiosError(refreshError)) {
             const axiosError = refreshError as AxiosError;
             if (axiosError?.response?.status === 401) {
               logout();
@@ -180,7 +187,7 @@ export const AuthenticationProvider = (props: AuthenticationProviderProps) => {
 };
 
 export const useAuthentication = (): AuthenticationContextProps => {
-  const context = React.useContext(AuthenticationContext);
+  const context = useContext(AuthenticationContext);
   if (!context) {
     throw new Error(
       "useAuthentication must be used within a AuthenticationProvider",
@@ -190,7 +197,7 @@ export const useAuthentication = (): AuthenticationContextProps => {
 };
 
 interface OneTimePasswordWrapperProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 interface UserLoginResponse {
@@ -216,6 +223,7 @@ export const OneTimePasswordWrapper = ({
           setRefreshToken(response.data.token);
           navigate("/");
         } catch (error) {
+          // Do nothing
         } finally {
           searchParams.delete("otp");
         }

diff --git a/frontend/src/hooks/theme.tsx b/frontend/src/hooks/theme.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
 type Theme = "light" | "dark";
 
@@ -41,7 +47,7 @@ interface ThemeContextProps {
 const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
 
 interface ThemeProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,13 +1,14 @@
-import React from "react";
+import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+
 import App from "./App";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
 
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>,
+  </StrictMode>,
 );
diff --git a/frontend/src/pages/ComponentDetails.tsx b/frontend/src/pages/ComponentDetails.tsx
@@ -93,26 +93,14 @@ const ComponentDetails = () => {
             <Col>
               <Markdown
                 components={{
-                  p: ({ node, ...props }) => <p {...props} className="mb-3" />,
-                  li: ({ node, ...props }) => (
-                    <li {...props} className="mb-1" />
-                  ),
-                  h1: ({ node, ...props }) => (
-                    <h3 {...props} className="mt-1" />
-                  ),
-                  h2: ({ node, ...props }) => (
-                    <h4 {...props} className="mt-1" />
-                  ),
-                  h3: ({ node, ...props }) => (
-                    <h5 {...props} className="mt-1" />
-                  ),
-                  h4: ({ node, ...props }) => (
-                    <h6 {...props} className="mt-1" />
-                  ),
-                  h5: ({ node, ...props }) => (
-                    <h6 {...props} className="mt-1" />
-                  ),
-                  h6: ({ node, ...props }) => <h6 {...props} />,
+                  p: ({ ...props }) => <p {...props} className="mb-3" />,
+                  li: ({ ...props }) => <li {...props} className="mb-1" />,
+                  h1: ({ ...props }) => <h3 {...props} className="mt-1" />,
+                  h2: ({ ...props }) => <h4 {...props} className="mt-1" />,
+                  h3: ({ ...props }) => <h5 {...props} className="mt-1" />,
+                  h4: ({ ...props }) => <h6 {...props} className="mt-1" />,
+                  h5: ({ ...props }) => <h6 {...props} className="mt-1" />,
+                  h6: ({ ...props }) => <h6 {...props} />,
                 }}
               >
                 {description}

diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx
@@ -32,7 +32,7 @@ const RobotDetails = () => {
   const response: RobotDetailsResponse = {
     name: "Stompy",
     owner: "K-Scale Labs",
-    description: `Stompy is a 4-legged robot that can walk and jump.
+    description: `Stompy is an open-source humanoid robot that anyone can 3D print.
 
 ## Purpose
 
@@ -104,26 +104,14 @@ Stompy is designed to be a versatile platform for research and development in le
             <Col>
               <Markdown
                 components={{
-                  p: ({ node, ...props }) => <p {...props} className="mb-3" />,
-                  li: ({ node, ...props }) => (
-                    <li {...props} className="mb-1" />
-                  ),
-                  h1: ({ node, ...props }) => (
-                    <h3 {...props} className="mt-1" />
-                  ),
-                  h2: ({ node, ...props }) => (
-                    <h4 {...props} className="mt-1" />
-                  ),
-                  h3: ({ node, ...props }) => (
-                    <h5 {...props} className="mt-1" />
-                  ),
-                  h4: ({ node, ...props }) => (
-                    <h6 {...props} className="mt-1" />
-                  ),
-                  h5: ({ node, ...props }) => (
-                    <h6 {...props} className="mt-1" />
-                  ),
-                  h6: ({ node, ...props }) => <h6 {...props} />,
+                  p: ({ ...props }) => <p {...props} className="mb-3" />,
+                  li: ({ ...props }) => <li {...props} className="mb-1" />,
+                  h1: ({ ...props }) => <h3 {...props} className="mt-1" />,
+                  h2: ({ ...props }) => <h4 {...props} className="mt-1" />,
+                  h3: ({ ...props }) => <h5 {...props} className="mt-1" />,
+                  h4: ({ ...props }) => <h6 {...props} className="mt-1" />,
+                  h5: ({ ...props }) => <h6 {...props} className="mt-1" />,
+                  h6: ({ ...props }) => <h6 {...props} />,
                 }}
               >
                 {description}