Upgrade @edx/eslint-config from v3.x to 4.2

.eslintrc.js

@@ -3,9 +3,9 @@ const path = require('path');
 module.exports = {
   extends: [
     '@edx/eslint-config',
-    'plugin:import/typescript',
   ],
-  parser: '@babel/eslint-parser',
+  plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     requireConfigFile: true,
     babelOptions: {
@@ -30,7 +30,9 @@ module.exports = {
           '**/*.stories.jsx',
           'src/setupTest.ts',
           '**/*.test.jsx',
+          '**/*.test.tsx',
           '**/*.test.js',
+          '**/*.test.ts',
           'config/*.js',
           '*.config.ts',
           '*.config.*.js',
@@ -62,13 +64,4 @@ module.exports = {
   globals: {
     newrelic: false,
   },
-  overrides: [
-    {
-      files: ['**/*.ts', '**/*.tsx'],
-      extends: 'airbnb-typescript',
-      parserOptions: {
-        project: './tsconfig.json',
-      },
-    },
-  ],
 };

package.json

@@ -95,7 +95,7 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/eslint-config": "^3.2.0",
+    "@edx/eslint-config": "^4.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.0.1",
     "@formatjs/cli": "^5.0.2",

src/DataTable/selection/tests/ControlledSelectHeader.test.jsx

@@ -8,6 +8,13 @@ import DataTableContext from '../../DataTableContext';
 import * as selectActions from '../data/actions';
 import { getRowIds } from '../data/helpers';
 
+function DataTableContextChild() {
+  const contextValue = useContext(DataTableContext);
+  return (
+    <div className="context-value" data-contextvalue={contextValue} />
+  );
+}
+
 // eslint-disable-next-line react/prop-types
 function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   return (
@@ -18,13 +25,6 @@ function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   );
 }
 
-function DataTableContextChild() {
-  const contextValue = useContext(DataTableContext);
-  return (
-    <div className="context-value" data-contextvalue={contextValue} />
-  );
-}
-
 const mockToggleAllPageRowsSelectedProps = jest.fn();
 const rows = [{ id: 1 }, { id: 2 }];
 const tableProps = {

src/hooks/useArrowKeyNavigation.jsx

@@ -32,8 +32,7 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
     [nextElement] = availableElements;
   }
 
-  // eslint-disable-next-line no-unused-expressions
-  nextElement && nextElement.focus();
+  nextElement?.focus();
   event.preventDefault();
 }
 

tsconfig.build.json

@@ -3,8 +3,10 @@
   "compilerOptions": {
     // For build purposes, we use TypeScript/tsc to generate the .d.ts files and Babel to convert .tsx/.ts/.jsx to .js
     // In the future we could probably just use tsc for both though.
-    "emitDeclarationOnly": true
+    "emitDeclarationOnly": true,
+    "rootDir": "src"
   },
+  "include": ["src"],
   // Don't include the .test.tsx files when we build the .d.ts files in dist/
   "exclude": ["src/**/*.test.tsx"],
 }

tsconfig.json

@@ -3,8 +3,16 @@
   "compilerOptions": {
     "noImplicitAny": true,
     "allowJs": false,
-    "rootDir": "src",
     "outDir": "dist"
   },
-  "include": ["src"]
+  "include": [
+    "lib/**/*",
+    "src/**/*",
+    "*.js",
+    ".eslintrc.js",
+    "__mocks__/*",
+    "algolia-docsearch/*", 
+    "bin/*",
+    "dependent-usage-analyzer/**/*"
+  ]
 }

www/src/components/LeaveFeedback.tsx

@@ -1,6 +1,6 @@
 import React, { AnchorHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { useLocation } from '@reach/router';
+import { useLocation } from '@gatsbyjs/reach-router';
 import { Nav, Button, Hyperlink } from '~paragon-react';
 import { LEAVE_FEEDBACK_CLICKED_EVENT, sendUserAnalyticsEvent } from '../../segment-events';
 

www/src/components/Menu.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useLocation } from '@reach/router';
+import { useLocation } from '@gatsbyjs/reach-router';
 import PropTypes from 'prop-types';
 import { Link, graphql, useStaticQuery } from 'gatsby';
 import classNames from 'classnames';

www/tsconfig.json

@@ -10,5 +10,5 @@
       "~paragon-icons": ["../icons"],
     }
   },
-  "include": ["src"]
+  "include": ["src", "playroom", "utils", "netlify", ".eslintrc.js", "*.js", "*.ts", "*.jsx", "*.tsx"]
 }