Linting refactor and enable GitHub actions

.github/workflows/eslint.yml

@@ -0,0 +1,19 @@
+name: ESLint
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+    - run: yarn install
+    - run: yarn run lint

eslint.config.mjs

@@ -0,0 +1,53 @@
+// @ts-check
+import eslint from "@eslint/js"
+import tseslint from "typescript-eslint"
+import reactCompiler from "eslint-plugin-react-compiler"
+
+export default tseslint.config({
+  ignores: [
+    "**/build/**",
+    "**/dist/**",
+    "**/node_modules/**",
+    ".yarn/*",
+    ".pnp.cjs",
+    ".pnp.loader.mjs",
+    "**/coverage/**",
+    "packages/openneuro-app/pluralize-esm.js",
+    "packages/openneuro-app/src/scripts/utils/schema-validator.js",
+  ],
+}, {
+  files: [
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.jsx",
+    "packages/**/*.js",
+  ],
+  extends: [
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+  ],
+  rules: {
+    "@typescript-eslint/array-type": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-console": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+      },
+    ],
+  },
+}, {
+  files: ["packages/**/*.tsx", "packages/**/*.jsx"],
+  plugins: {
+    "react-compiler": reactCompiler,
+  },
+  rules: {
+    "react-compiler/react-compiler": "error",
+  },
+}, {
+  files: ["packages/**/*.js"],
+  ...tseslint.configs.disableTypeChecked,
+})

package.json

@@ -7,7 +7,7 @@
     "test": "vitest",
     "coverage": "vitest --coverage",
     "ci-coverage": "vitest --coverage && codecov",
-    "lint": "eslint --ext .jsx --ext .js --ext .ts --ext .tsx packages/*/src",
+    "lint": "eslint",
     "openneuro": "node packages/openneuro-cli/src",
     "_postinstall": "husky install",
     "prepublish": "rm -fr packages/*/dist .build-cache/ && yarn build",
@@ -17,22 +17,18 @@
   },
   "devDependencies": {
     "@elastic/apm-rum-react": "2.0.2",
+    "@eslint/js": "^9.13.0",
     "@sentry/cli": "1.37.4",
     "@testing-library/jest-dom": "6.1.3",
     "@types/ioredis-mock": "^8.2.2",
     "@types/jsdom": "^16",
     "@types/testing-library__jest-dom": "5.14.5",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
     "@vitest/coverage-v8": "^1.5.0",
     "@yarnpkg/pnpify": "^3.1.1-rc.8",
+    "babel-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
     "codecov": "3.8.3",
-    "eslint": "7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
     "graphql": "16.8.1",
     "history": "5.2.0",
     "husky": "5.1.1",
@@ -48,6 +44,7 @@
     "sass": "^1.56.1",
     "tsc-watch": "6.0.4",
     "typescript": "5.1.6",
+    "typescript-eslint": "^8.11.0",
     "vite": "5.4.8",
     "vitest": "1.5.0",
     "vitest-fetch-mock": "0.2.2"

packages/openneuro-app/src/@types/react.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from "react"
 
 /**

packages/openneuro-app/src/scripts/app.tsx

@@ -1,7 +1,9 @@
-import React, { FC, ReactNode } from "react"
+import React from "react"
+import type { FC, ReactNode } from "react"
 import Helmet from "react-helmet"
 import { frontPage } from "./pages/front-page/front-page-content"
-import { Cookies, CookiesProvider } from "react-cookie"
+import type { Cookies } from "react-cookie"
+import { CookiesProvider } from "react-cookie"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import { MediaContextProvider } from "./styles/media"

packages/openneuro-app/src/scripts/authentication/profile.ts

@@ -1,6 +1,6 @@
 import jwtDecode from "jwt-decode"
 
-interface OpenNeuroTokenProfile {
+export interface OpenNeuroTokenProfile {
   sub: string
   email: string
   provider: string

packages/openneuro-app/src/scripts/authentication/withProfile.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import React from "react"
 import { useCookies } from "react-cookie"
 import { getProfile, guardExpired } from "./profile"

packages/openneuro-app/src/scripts/common/containers/__tests__/header.spec.tsx

@@ -10,7 +10,6 @@ vi.mock("../../../uploader/uploader-view.jsx", () => ({
   default: () => "mocked UploaderView",
 }))
 vi.mock("react-router-dom", async () => ({
-  // @ts-ignore-check
   ...(await vi.importActual("react-router-dom")),
   useNavigate: () => navigate,
 }))

packages/openneuro-app/src/scripts/common/containers/footer.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from "react"
+import React from "react"
+import type { FC } from "react"
 import { Footer } from "@openneuro/components/footer"
 import { version as openneuroVersion } from "../../../lerna.json"
 

packages/openneuro-app/src/scripts/common/containers/header.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useContext } from "react"
+import React, { useContext } from "react"
+import type { FC } from "react"
 import useState from "react-usestateref"
 import UploaderContext from "../../uploader/uploader-context.js"
 import UploadProgress from "../../uploader/upload-progress.jsx"
@@ -26,6 +27,7 @@ export const HeaderContainer: FC = () => {
   const [cookies] = useCookies()
   const profile = getUnexpiredProfile(cookies)
 
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   const { userModalOpen, setUserModalOpen } = useContext(UserModalOpenCtx)
 
   const [newKeyword, setNewKeyword, newKeywordRef] = useState("")

packages/openneuro-app/src/scripts/common/content/terms.tsx

@@ -1,7 +1,7 @@
-import React, { ReactElement } from "react"
+import React from "react"
 
 /** Terms and conditions content. */
-export function Terms(): ReactElement {
+export function Terms(): React.ReactElement {
   return (
     <>
       <p>

packages/openneuro-app/src/scripts/components/data-table.tsx

@@ -4,13 +4,14 @@ import {
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
-  SortingState,
   useReactTable,
 } from "@tanstack/react-table"
+import type { SortingState } from "@tanstack/react-table"
 import styled from "@emotion/styled"
-import { format, isValid, parse, parseISO } from "date-fns"
+import { format, isValid, parse } from "date-fns"
 
 interface DataTableProps {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   data: any[]
   downloadFilename?: string
   hideColumns?: string[]
@@ -55,6 +56,7 @@ export function extractDateString(dateString) {
   return false
 }
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function CellFormat(props): any {
   const value = props.getValue()
   let extractedDate
@@ -86,6 +88,7 @@ export function DataTable<T>({
       Object.keys(data[0])
         .filter((name) => !hideColumns.includes(name))
         .map((name) =>
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           columnHelper.accessor(name as any, {
             header: name,
             cell: CellFormat,

packages/openneuro-app/src/scripts/datalad/mutations/snapshot.tsx

@@ -33,7 +33,7 @@
 interface SnapshotDatasetProps {
   datasetId: string
   tag: string
-  changes: Array<string>
+  changes: string[]
 }
 
 const SnapshotDataset = ({ datasetId, tag, changes }: SnapshotDatasetProps) => (

packages/openneuro-app/src/scripts/datalad/mutations/update-permissions.jsx

@@ -58,7 +58,7 @@
                 variables: { datasetId, userEmail, level: metadata },
               })
               done()
-            } catch (err) {
+            } catch (_err) {
               toast.error(
                 <ToastContent body="A user with that email address does not exist" />,
               )

packages/openneuro-app/src/scripts/datalad/routes/dataset-redirect.tsx

@@ -62,7 +62,7 @@
   const { datasetId } = useParams() as { datasetId: string }
   const { pathname } = useLocation()
 
-  if (redirectLib.hasOwnProperty(datasetId)) {
+  if (Object.hasOwn(redirectLib, datasetId)) {
     const newPath = replaceDatasetId(pathname, redirectLib[datasetId])
     return <Navigate to={newPath} replace />
   } else {

packages/openneuro-app/src/scripts/dataset/comments/comment-editor.jsx

@@ -20,7 +20,7 @@
   )
   const doAfterSubmit = () => {
     setEditorState(EditorState.createEmpty())
-    done && done()
+    if (done) done()
   }
   const disabled = editorState.getUndoStack().size === 0
   return (

packages/openneuro-app/src/scripts/dataset/comments/comments.jsx

@@ -14,7 +14,7 @@
     {comments.map((comment) => {
       if (!comment) return null
       // Join any replies
-      const nextLevel = comment.hasOwnProperty("replies")
+      const nextLevel = Object.hasOwn(comment, "replies")
         ? comment.replies.map((reply) => commentMap[reply.id])
         : []
       return (