Upgrade eslint

eslint.config.mjs

@@ -0,0 +1,130 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { fixupPluginRules } from '@eslint/compat'
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import tsParser from '@typescript-eslint/parser'
+import _import from 'eslint-plugin-import'
+import jsxA11Y from 'eslint-plugin-jsx-a11y'
+import observation from 'eslint-plugin-observation'
+import prettier from 'eslint-plugin-prettier'
+import react from 'eslint-plugin-react'
+import reactNative from 'eslint-plugin-react-native'
+import globals from 'globals'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends('plugin:@typescript-eslint/recommended'),
+  {
+    plugins: {
+      'react-native': fixupPluginRules(reactNative),
+      react,
+      'jsx-a11y': jsxA11Y,
+      import: fixupPluginRules(_import),
+      prettier,
+      observation,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          paths: ['.'],
+          extensions: ['.js', '.jsx', '.android.js', '.ios.js', '.native.js', '.ts', '.tsx'],
+        },
+      },
+    },
+
+    rules: {
+      'observation/no-function-without-logging': 'error',
+
+      'react-native/no-unused-styles': 'error',
+      'react-native/no-inline-styles': 'off',
+
+      'prettier/prettier': 'error',
+
+      'no-shadow': 'off',
+      semi: ['error', 'never'],
+      'no-console': 'warn',
+      curly: ['error', 'multi-line'],
+      'prefer-destructuring': ['error'],
+      'no-duplicate-imports': 'error',
+
+      'sort-imports': [
+        'error',
+        {
+          ignoreDeclarationSort: true,
+        },
+      ],
+
+      '@typescript-eslint/no-shadow': ['error'],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+
+      'import/order': [
+        'error',
+        {
+          groups: ['builtin', 'external', 'internal', ['parent', 'sibling']],
+
+          pathGroups: [
+            {
+              pattern: 'react+(|-native)',
+              group: 'external',
+              position: 'before',
+            },
+          ],
+
+          pathGroupsExcludedImportTypes: ['react+(|-native)'],
+          'newlines-between': 'always',
+
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+
+    rules: {
+      'no-undef': 'off',
+    },
+  },
+  {
+    files: ['**/*test.ts', '**/*test.tsx'],
+
+    rules: {
+      'observation/no-function-without-logging': 'off',
+    },
+  },
+]

package.json

@@ -6,6 +6,9 @@
   "author": "Observation.org",
   "license": "MIT",
   "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.7.0",
     "@react-native/eslint-config": "0.74.85",
     "@react-native/metro-config": "0.74.85",
     "@react-native/typescript-config": "0.74.85",
@@ -15,23 +18,25 @@
     "@types/color": "^3.0.6",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
-    "eslint": "^8.57.0",
+    "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-observation": "https://github.com/observation/eslint-rules.git",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-native": "^4.1.0",
+    "globals": "^15.8.0",
     "jest": "^29.7.0",
     "prettier": "^3.3.2",
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-render-html": "^6.3.4",
     "react-test-renderer": "18.2.0",
     "ts-jest": "^29.2.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "typescript-eslint": "^7.16.1"
   },
   "react-native": "src/index.ts",
   "scripts": {

src/components/Accordion.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { View } from 'react-native'
 
-// @ts-ignore
 import { Collapse, CollapseBody, CollapseHeader } from 'accordion-collapse-react-native'
 
 import Log from '../lib/Log'

src/components/BackButton.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import { NavigationHelpers } from '@react-navigation/native'
+import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
 import theme from '../styles/theme'
 
 type Props = {
-  navigation: NavigationHelpers<{}>
+  navigation: NavigationProp<ParamListBase>
 }
 
 const BackButton = ({ navigation }: Props) => (

src/styles/theme.ts

@@ -75,7 +75,7 @@ const margin = {
 
 const rounded = {
   borderRadius: 4,
-  overflow: 'hidden' as 'hidden',
+  overflow: 'hidden' as const,
 }
 
 const input = {
@@ -128,39 +128,39 @@ export default {
   rounded,
   roundedLarge: {
     borderRadius: 8,
-    overflow: 'hidden' as 'hidden',
+    overflow: 'hidden' as const,
   },
   roundedHuge: {
     borderRadius: 10,
-    overflow: 'hidden' as 'hidden',
+    overflow: 'hidden' as const,
   },
   absolute: {
-    position: 'absolute' as 'absolute',
+    position: 'absolute' as const,
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   absoluteLeft: {
-    position: 'absolute' as 'absolute',
+    position: 'absolute' as const,
     top: 0,
     bottom: 0,
     left: 0,
   },
   absoluteRight: {
-    position: 'absolute' as 'absolute',
+    position: 'absolute' as const,
     top: 0,
     bottom: 0,
     right: 0,
   },
   absoluteBottom: {
-    position: 'absolute' as 'absolute',
+    position: 'absolute' as const,
     bottom: 0,
     left: 0,
     right: 0,
   },
   absoluteTop: {
-    position: 'absolute' as 'absolute',
+    position: 'absolute' as const,
     top: 0,
     left: 0,
     right: 0,