Bump eslint from 8.56.0 to 9.14.0 (#368)

.storybook/main.ts

@@ -1,4 +1,5 @@
 import { type StorybookConfig } from "@storybook/react-webpack5";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-essentials"],

.vscode/settings.json

@@ -8,9 +8,6 @@
   "editor.formatOnSave": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
-  "eslint.options": {
-    "reportUnusedDisableDirectives": "error"
-  },
   "files.eol": "\n",
   "files.insertFinalNewline": true,
   "files.trimFinalNewlines": true,

eslint.config.cjs

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+const foxglove = require("@foxglove/eslint-plugin");
+const storybook = require("eslint-plugin-storybook");
+const globals = require("globals");
+const tseslint = require("typescript-eslint");
+
+module.exports = tseslint.config(
+  {
+    ignores: ["**/dist", "!.storybook"],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: "tsconfig.eslint.json",
+      },
+    },
+  },
+  ...foxglove.configs.base,
+  ...foxglove.configs.jest,
+  ...foxglove.configs.typescript,
+  ...foxglove.configs.react,
+  ...storybook.configs["flat/recommended"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+
+    rules: {
+      "react-hooks/exhaustive-deps": "error",
+    },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@foxglove/prefer-hash-private": "off",
+    },
+  },
+  {
+    files: ["**/*.stories.tsx", ".storybook/**/*"],
+    rules: {
+      "filenames/match-exported": "off",
+    },
+  },
+);

package.json

@@ -22,8 +22,8 @@
     "clean": "rimraf dist *.tsbuildinfo",
     "prepack": "tsc -b tsconfig.json tsconfig.cjs.json",
     "build": "tsc -b tsconfig.json tsconfig.cjs.json",
-    "lint": "eslint --report-unused-disable-directives --fix .",
-    "lint:ci": "eslint --report-unused-disable-directives .",
+    "lint": "eslint --fix .",
+    "lint:ci": "eslint .",
     "test": "echo 'nothing to test'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -35,7 +35,7 @@
     "three": ">=0.140.2"
   },
   "devDependencies": {
-    "@foxglove/eslint-plugin": "1.0.1",
+    "@foxglove/eslint-plugin": "2.0.0",
     "@foxglove/tsconfig": "2.0.0",
     "@storybook/addon-essentials": "7.6.16",
     "@storybook/react": "7.6.16",
@@ -44,19 +44,10 @@
     "@types/node": "22.7.5",
     "@types/react": "18.3.3",
     "@types/three": "0.165.0",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
     "chromatic": "11.3.2",
-    "eslint": "8.56.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-es": "4.1.0",
-    "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "27.6.3",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.34.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-storybook": "0.9.0",
+    "eslint": "9.14.0",
+    "eslint-plugin-storybook": "0.11.0",
+    "globals": "15.12.0",
     "jest": "29.7.0",
     "prettier": "3.2.5",
     "react": "18.3.1",
@@ -65,7 +56,8 @@
     "storybook": "7.6.16",
     "three": "0.165.0",
     "ts-jest": "29.1.2",
-    "typescript": "5.4.5"
+    "typescript": "5.6.3",
+    "typescript-eslint": "8.13.0"
   },
   "packageManager": "yarn@4.0.2"
 }

src/FontManager.stories.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactElement } from "react";
 
 import { AtlasData, FontManager } from "./FontManager";
 
@@ -21,7 +21,7 @@ function atlasToImageData(atlas: AtlasData) {
   return img;
 }
 
-export function Atlas(): JSX.Element {
+export function Atlas(): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   useEffect(() => {
     if (!canvasRef.current) {
@@ -39,7 +39,7 @@ export function Atlas(): JSX.Element {
   return <canvas ref={canvasRef} style={{ backgroundColor: "black" }} />;
 }
 
-export function Layout(): JSX.Element {
+export function Layout(): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   useEffect(() => {
     if (!canvasRef.current) {

src/LabelPool.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactElement } from "react";
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
@@ -140,7 +140,7 @@ function BasicTemplate({
   positionY: number;
   positionZ: number;
   logDepthBuffer: boolean;
-}): JSX.Element {
+}): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const [storyScene] = useState(() => new StoryScene({ logDepthBuffer }));

tsconfig.eslint.json

@@ -0,0 +1,12 @@
+// -*- jsonc -*-
+{
+  "extends": "@foxglove/tsconfig/base",
+  "include": ["**/*", ".storybook/**/*"],
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "lib": ["DOM", "es2020"],
+    "jsx": "react-jsx"
+  }
+}