feat: eslint and related upgrades

.circleci/config.yml

@@ -3,9 +3,10 @@ version: 2
 jobs:
   test:
     docker:
-      - image: cimg/node:16.14.2
+      - image: cimg/node:18.18.0
     steps:
       - checkout
+      - run: yarn --prod # install only prod dependencies first to trigger postinstall patch-package script
       - run: yarn
       - run: yarn test
 

package.json

@@ -21,38 +21,44 @@
     "release:patch": "yarn version --patch",
     "release:minor": "yarn version --minor",
     "release:major": "yarn version --major",
-    "test": "eslint src --max-warnings 0 && jest src"
+    "test": "eslint src --max-warnings 0 && jest src",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "5.54.0",
-    "@typescript-eslint/parser": "5.54.0",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
     "babel-plugin-module-resolver": "4.1.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.0.0",
     "eslint-import-resolver-babel-module": "5.2.0",
     "eslint-import-resolver-typescript": "3.6.0",
-    "eslint-plugin-flowtype": "5.3.1",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "humps": "2.0.1"
+    "humps": "2.0.1",
+    "patch-package": "8.0.0",
+    "postinstall-postinstall": "2.1.0"
   },
   "peerDependencies": {
-    "@babel/eslint-parser": "7.13.4",
-    "eslint": "7.20.0",
+    "@babel/eslint-parser": "7.24.5",
+    "eslint": "8.12.0",
     "react": "17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.13.1",
-    "@babel/eslint-parser": "7.13.4",
-    "@babel/preset-env": "7.13.5",
-    "@babel/runtime": "7.13.6",
+    "@babel/core": "7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-syntax-flow": "^7.24.1",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-env": "7.24.5",
+    "@babel/preset-flow": "^7.24.1",
+    "@babel/runtime": "7.24.5",
     "babel-eslint": "10.1.0",
-    "eslint": "7.20.0",
+    "eslint": "8.12.0",
     "eslint-plugin-instawork": "file:.",
-    "jest": "26.6.3",
+    "jest": "27.0.0",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
     "react": "17.0.1"

patches/eslint-plugin-flowtype+8.0.3.patch

@@ -0,0 +1,11 @@
+diff --git a/node_modules/eslint-plugin-flowtype/dist/configs/recommended.json b/node_modules/eslint-plugin-flowtype/dist/configs/recommended.json
+index 90a0d69..2ad7d68 100644
+--- a/node_modules/eslint-plugin-flowtype/dist/configs/recommended.json
++++ b/node_modules/eslint-plugin-flowtype/dist/configs/recommended.json
+@@ -1,5 +1,5 @@
+ {
+-  "parser": "@babel/eslint",
++  "parser": "@babel/eslint-parser",
+   "parserOptions": {
+     "babelOptions": {
+       "plugins": [

src/rules/error-object.js

@@ -24,7 +24,9 @@ const create = (context) => ({
         context.report(node, `'${className}' should be named '${expectedName}'`);
       } else {
         const namePropertyNode = node.body.body.find(
-          (n) => n.type === 'ClassProperty' && n.key.name === 'name',
+          (n) =>
+            (n.type === 'ClassProperty' || n.type === 'PropertyDefinition') &&
+            n.key.name === 'name',
         );
         if (!namePropertyNode || namePropertyNode.value.value !== className) {
           context.report(

src/rules/error-object.test.js

@@ -4,8 +4,8 @@ const { RuleTester } = require('eslint');
 const rule = require('./error-object');
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('babel-eslint'),
-  parserOptions: { ecmaVersion: 2015 },
+  parser: require.resolve('@babel/eslint-parser'),
+  parserOptions: { ecmaVersion: 2022 },
 });
 
 ruleTester.run('error-object', rule, {

src/rules/screen-actions-props-function.test.js

@@ -3,30 +3,33 @@
 const { RuleTester } = require('eslint');
 const rule = require('./screen-actions-props-function');
 
-const ruleTester = new RuleTester();
+const ruleTester = new RuleTester({
+  parser: require.resolve('@babel/eslint-parser'),
+  parserOptions: {
+    babelOptions: {
+      presets: ['@babel/preset-flow'],
+    },
+  },
+});
 
 ruleTester.run('screen-actions-props-function', rule, {
   invalid: [
     {
       code: 'type Actions = { foo: * }',
       errors: [{ column: 18, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type ActionsMap = { foo: * }',
       errors: [{ column: 21, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type ActionMap = { foo: * }',
       errors: [{ column: 20, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
   ],
   valid: [
     {
       code: 'type Actions = { foo: () => Action }',
-      parser: require.resolve('babel-eslint'),
     },
   ],
 });

src/rules/screen-actions-props-return-action.test.js

@@ -3,30 +3,33 @@
 const { RuleTester } = require('eslint');
 const rule = require('./screen-actions-props-return-action');
 
-const ruleTester = new RuleTester();
+const ruleTester = new RuleTester({
+  parser: require.resolve('@babel/eslint-parser'),
+  parserOptions: {
+    babelOptions: {
+      presets: ['@babel/preset-flow'],
+    },
+  },
+});
 
 ruleTester.run('screen-actions-props-return-action', rule, {
   invalid: [
     {
       code: 'type Actions = { foo: () => void }',
       errors: [{ column: 29, line: 1, message: 'must return Action' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type ActionsMap = { foo: () => void }',
       errors: [{ column: 32, line: 1, message: 'must return Action' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type ActionMap = { foo: () => void }',
       errors: [{ column: 31, line: 1, message: 'must return Action' }],
-      parser: require.resolve('babel-eslint'),
     },
   ],
   valid: [
     {
       code: 'type Actions = { foo: () => Action }',
-      parser: require.resolve('babel-eslint'),
     },
   ],
 });

src/rules/screen-selectors-props-function.test.js

@@ -3,30 +3,33 @@
 const { RuleTester } = require('eslint');
 const rule = require('./screen-selectors-props-function');
 
-const ruleTester = new RuleTester();
+const ruleTester = new RuleTester({
+  parser: require.resolve('@babel/eslint-parser'),
+  parserOptions: {
+    babelOptions: {
+      presets: ['@babel/preset-flow'],
+    },
+  },
+});
 
 ruleTester.run('screen-selectors-props-function', rule, {
   invalid: [
     {
       code: 'type Selectors = { foo: * }',
       errors: [{ column: 20, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type SelectorsMap = { foo: * }',
       errors: [{ column: 23, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
     {
       code: 'type SelectorMap = { foo: * }',
       errors: [{ column: 22, line: 1, message: 'must be a function' }],
-      parser: require.resolve('babel-eslint'),
     },
   ],
   valid: [
     {
       code: 'type Selectors = { foo: (*) => number }',
-      parser: require.resolve('babel-eslint'),
     },
   ],
 });