Upgrade packages and linting rules

.eslintrc.js

@@ -1,21 +1,16 @@
 module.exports = {
-    extends: ['airbnb', 'plugin:react/recommended'],
-    parser: 'babel-eslint',
+    extends: ['airbnb', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended'],
+    parser: '@babel/eslint-parser',
     env: {
         browser: true,
-        node: true,
         jest: true,
+        node: true,
     },
     rules: {
-        indent: [2, 4], // 4 spaces for indentation
-        'react/jsx-indent': [2, 4], // 4 spaces for indentation
-        'react/jsx-indent-props': [2, 4], // 4 spaces for indentation
-        'max-len': [2, 120], // 120 max line length
-        'class-methods-use-this': 0, // Needed to return JSX from React component methods
         'compat/compat': 2,
-        'function-paren-newline': ['error', 'consistent'],
-        'no-underscore-dangle': ['error', { allow: ['__typename'] }],
-        'no-process-env': 'error', // Use getEnv instead
+        'default-param-last': 0,
+        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+        'jsx-a11y/anchor-ambiguous-text': ['error'],
         'jsx-a11y/anchor-is-valid': [
             'error',
             {
@@ -24,12 +19,51 @@ module.exports = {
                 aspects: ['noHref'],
             },
         ],
-        'operator-linebreak': ['error', 'after'],
+        'jsx-a11y/label-has-associated-control': [
+            2,
+            {
+                depth: 5,
+            },
+        ],
         'no-only-tests/no-only-tests': 'error',
-        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+        'no-process-env': 'error', // Use getEnv instead
+        'no-restricted-properties': [
+            2,
+            {
+                object: 'window',
+                property: 'config',
+                message:
+                    'Please pass configuration variables to the MFE via props or React context instead of using global variables',
+            },
+        ],
+        'no-underscore-dangle': ['error', { allow: ['__typename'] }],
+        'react/function-component-definition': [
+            'error',
+            {
+                namedComponents: ['function-declaration', 'arrow-function'],
+                unnamedComponents: ['arrow-function'],
+            },
+        ],
+        'react/jsx-indent-props': [2, 4],
+        'react/jsx-indent': [2, 4],
+        'react/jsx-props-no-spreading': 0,
+        'react/jsx-no-bind': 0,
+        'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
     },
-    plugins: [
-        'compat',
-        'no-only-tests',
+    overrides: [
+        {
+            files: ['**/*.test.jsx', '**/*.test.js'],
+            rules: {
+                'compat/compat': 0,
+                'react/display-name': 0,
+            },
+        },
     ],
+    plugins: ['compat', 'no-only-tests'],
+    settings: {
+        polyfills: ['promises'],
+        'jsx-a11y': {
+            polymorphicPropName: 'as',
+        },
+    },
 };

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 120,
+    "arrowParens": "avoid"
+}

README.md

@@ -3,10 +3,9 @@
 ## Installation
 
 1. If you don't already have a package.json file, create one with `npm init` or `yarn init`.
-2. Then we need to install everything needed by the config:
+2. Then install everything needed by the config:
 `npx install-peerdeps --dev eslint-config-twig`
-3. You can see in your package.json there are now a big list of devDependencies.
-4. Create a .eslintrc file in the root of your project's directory (it should live where package.json does). Your .eslintrc file should look like this:
+3. Create a .eslintrc config file in the root of your project if you don't have one already and add the `twig` config to it.
 
 ```
 {
@@ -16,15 +15,25 @@
 }
 ```
 
-5. Add a script to your package.json to lint your code:
+4. Add a script to your package.json to lint your code:
 
 ```
 "scripts": {
-    "lint": "eslint ./src",
+    "lint": "eslint ./",
 },
 ```
 
-6. Now you can manually lint your code by running yarn run lint
+5. The `twig` eslint config uses [eslint-config-compat](https://www.npmjs.com/package/eslint-plugin-compat). This will lint your code for browser compatibility. There are default settings but we recommend adding these settings to your package.json file for Twig Science projects:
+
+```
+"browserslist": [
+    "defaults",
+    "ios_saf >= 14",
+    "not op_mini all"
+]
+```
+
+6. Now you can manually lint your code by running `yarn lint`
 
 ## Settings
 

babel.config.js

@@ -0,0 +1 @@
+module.exports = {};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-twig",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Twig Education ESLint Config",
   "keywords": [
     "javascript",
@@ -10,28 +10,34 @@
   "repository": "[email protected]:TwigWorld/eslint-config-twig.git",
   "author": "Adam Oliver <[email protected]>",
   "license": "MIT",
-  "dependencies": {
-    "babel-eslint": "7",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-plugin-compat": "^3.8.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-no-only-tests": "^2.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "4.2.0"
-  },
   "devDependencies": {
-    "eslint": "7.2.0"
+    "@babel/core": "^7.22.20",
+    "@babel/eslint-parser": "^7.22.15",
+    "eslint": "^8.49.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.2.1"
   },
   "peerDependencies": {
-    "eslint": ">= 4",
-    "eslint-config-airbnb": ">= 17",
-    "eslint-plugin-compat": ">= 2",
-    "eslint-plugin-graphql": ">= 2",
-    "eslint-plugin-import": ">= 2",
-    "eslint-plugin-jsx-a11y": ">= 6",
-    "eslint-plugin-no-only-tests": ">= 2",
-    "eslint-plugin-react": ">= 7"
+    "@babel/core": "^7.22.20",
+    "@babel/eslint-parser": "^7.16.0",
+    "eslint": ">= 7",
+    "eslint-config-airbnb": "^18",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-compat": "^4.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-only-tests": "^2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0"
   },
   "scripts": {
     "lint": "eslint .",