[Breaking] refactor(eslint-mc-app): simplify and improve usage of esl…

…int config (#1961)

* refactor(eslint-mc-app): simplify and improve usage of eslint config

* fix(eslint): turn off some rules

* docs: update

* fix: dep version

* docs: improve changelog

.changeset/slow-kiwis-give.md

@@ -0,0 +1,28 @@
+---
+'@commercetools-frontend/eslint-config-mc-app': major
+---
+
+Restructure and simplify ESLint config for MC applications, in particular the rules and list of plugins.
+We now base our config to ESLint React App instead of Airbnb.
+
+Also, there is now only `eslint` as a required peer dependency.
+
+> Note that this is primarily to avoid consumers having to install all of the potentially required peer dependencies, as per recommendation from ESLint when publishing sharable configs.
+> However, all the dependencies are defined with a caret `^` version range, which gives a bit of flexibility to the consumers in case of version conflicts.
+
+```diff
+{
+-  "babel-eslint": "10.1.0",
+  "eslint": "7.18.0"
+-  "eslint-config-airbnb-base": "14.2.1",
+-  "eslint-config-prettier": "7.2.0",
+-  "eslint-plugin-babel": "5.3.1",
+-  "eslint-plugin-import": "2.22.1",
+-  "eslint-plugin-jest": "24.1.3",
+-  "eslint-plugin-jest-dom": "3.6.5",
+-  "eslint-plugin-jsx-a11y": "6.4.1",
+-  "eslint-plugin-prefer-object-spread": "1.2.1",
+-  "eslint-plugin-prettier": "3.3.1",
+-  "eslint-plugin-react": "7.22.0"
+}
+```

.eslintrc.js

@@ -1,97 +1,7 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 8,
-    sourceType: 'module',
-  },
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-    'plugin:jest/recommended',
-    'plugin:react/recommended',
-    'plugin:testing-library/react',
-    'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
-  ],
-  plugins: [
-    'import',
-    'jest',
-    'jsx-a11y',
-    'prettier',
-    'react',
-    'react-hooks',
-    'graphql',
-    '@typescript-eslint/eslint-plugin',
-  ],
-  rules: {
-    '@typescript-eslint/ban-types': 0,
-    '@typescript-eslint/naming-convention': 0,
-    '@typescript-eslint/consistent-type-definitions': 0,
-    '@typescript-eslint/no-explicit-any': 2,
-    '@typescript-eslint/no-use-before-define': [
-      'error',
-      {
-        functions: false,
-      },
-    ],
-    '@typescript-eslint/no-var-requires': 0,
-    '@typescript-eslint/unbound-method': 0,
-    'react/jsx-tag-spacing': 0,
-    'import/no-extraneous-dependencies': 0,
-    'import/no-named-as-default': 0,
-    'import/no-named-as-default-member': 0,
-    'import/default': 0,
-    'import/no-unresolved': 2,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'jest/expect-expect': 'off',
-    'testing-library/prefer-presence-queries': 'error',
-    'testing-library/await-async-query': 'error',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.js', '.jsx', '.ts', '.tsx'],
-    },
-    'import/resolver': {
-      'eslint-import-resolver-typescript': true,
-      typescript: {},
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
-  },
+  extends: ['@commercetools-frontend/eslint-config-mc-app'],
+  plugins: ['graphql'],
   overrides: [
-    {
-      files: ['*.spec.js'],
-      rules: {
-        'react/display-name': 0,
-      },
-    },
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/ban-ts-comment': 0,
-        '@typescript-eslint/explicit-function-return-type': 0,
-        '@typescript-eslint/explicit-member-accessibility': [
-          2,
-          {
-            accessibility: 'no-public',
-          },
-        ],
-        '@typescript-eslint/no-require-imports': 0,
-        '@typescript-eslint/promise-function-async': 0,
-        'react/prop-types': 0,
-      },
-    },
     {
       files: ['**/*.mc.graphql'],
       rules: {

jest.eslint.config.js

@@ -2,7 +2,14 @@ module.exports = {
   runner: 'jest-runner-eslint',
   displayName: 'eslint',
   moduleFileExtensions: ['js', 'ts', 'tsx'],
-  modulePathIgnorePatterns: ['build', 'dist', 'public/'],
+  modulePathIgnorePatterns: [
+    '.yarn',
+    '.cache',
+    'build',
+    'dist',
+    'public/',
+    'generated',
+  ],
   testMatch: ['<rootDir>/**/*.js', '<rootDir>/**/*.ts', '<rootDir>/**/*.tsx'],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-master'],
 };

package.json

@@ -95,6 +95,7 @@
     "@changesets/changelog-github": "0.2.8",
     "@changesets/cli": "2.13.0",
     "@commercetools-docs/writing-style": "3.0.3",
+    "@commercetools-frontend/eslint-config-mc-app": "17.10.1",
     "@commercetools-test-data/core": "2.1.1",
     "@commercetools-uikit/design-system": "^10.43.3",
     "@commercetools/github-labels": "1.1.0",
@@ -135,10 +136,7 @@
     "@types/uuid": "8.3.0",
     "@types/webpack": "4.41.26",
     "@types/webpack-env": "1.16.0",
-    "@typescript-eslint/eslint-plugin": "4.14.0",
-    "@typescript-eslint/parser": "4.14.0",
     "apollo-server-errors": "2.4.2",
-    "babel-eslint": "10.1.0",
     "babel-plugin-import-graphql": "2.8.1",
     "babel-plugin-transform-rename-import": "2.3.0",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
@@ -148,22 +146,8 @@
     "dotenv": "8.2.0",
     "enzyme": "3.11.0",
     "eslint": "7.18.0",
-    "eslint-config-airbnb-base": "14.2.1",
-    "eslint-config-prettier": "7.2.0",
     "eslint-formatter-pretty": "4.0.0",
-    "eslint-import-resolver-typescript": "2.3.0",
-    "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-cypress": "2.11.2",
     "eslint-plugin-graphql": "4.0.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.1.3",
-    "eslint-plugin-jest-dom": "3.6.5",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prefer-object-spread": "1.2.1",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.22.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "3.10.1",
     "faker": "5.1.0",
     "gatsby-plugin-mdx": "1.8.0",
     "graphql-cli": "4.1.0",
@@ -217,7 +201,9 @@
     "pretty-format": "26.6.2",
     "intl-messageformat-parser": "6.1.3",
     "**/intl-messageformat-parser": "6.1.3",
-    "**/@commercetools-docs/gatsby-theme-docs/react-intl": "5.10.16"
+    "**/@commercetools-docs/gatsby-theme-docs/react-intl": "5.10.16",
+    "@typescript-eslint/eslint-plugin": "4.14.0",
+    "@typescript-eslint/parser": "4.14.0"
   },
   "engines": {
     "node": ">=12",

packages/actions-global/src/index.ts

@@ -1,8 +1,9 @@
-export { default as version } from './version';
 import type { DispatchActionError } from './actions/handle-action-error';
 
 export type TDispatchActionError = DispatchActionError;
 
 export * from './actions';
 export * from './hooks';
 export * from './types';
+
+export { default as version } from './version';

packages/application-shell-connectors/src/index.ts

@@ -1,4 +1,3 @@
-export { default as version } from './version';
 import type {
   TProviderProps as ProviderProps,
   TApplicationContext as ApplicationContext,
@@ -37,3 +36,5 @@ export {
   ProjectExtensionProviderForImageRegex,
   withProjectExtensionImageRegex,
 } from './components/project-extension-image-regex';
+
+export { default as version } from './version';

packages/application-shell/src/components/quick-access/quick-access.tsx

@@ -500,6 +500,7 @@ const QuickAccess = (props: Props) => {
       // open in new window
       // and always open other pages in a new window
       if (meta.openInNewTab || !command.action.to.startsWith('/')) {
+        // eslint-disable-next-line no-restricted-globals
         open(command.action.to, '_blank');
       } else if (applicationContext.environment.useFullRedirectsForLinks) {
         location.replace(command.action.to);

packages/eslint-config-mc-app/README.md

@@ -4,7 +4,7 @@
   <a href="https://www.npmjs.com/package/@commercetools-frontend/eslint-config-mc-app"><img src="https://badgen.net/npm/v/@commercetools-frontend/eslint-config-mc-app" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/eslint-config-mc-app"><img src="https://badgen.net/npm/v/@commercetools-frontend/eslint-config-mc-app/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/eslint-config-mc-app"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/eslint-config-mc-app" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/master/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
 </p>
 
-ESLint config used by a MC application.
+ESLint config used by a Custom Application.
 
 ## Install
 
@@ -13,3 +13,13 @@ $ npm install --save @commercetools-frontend/eslint-config-mc-app
 
 $ npx install-peerdeps --dev @commercetools-frontend/eslint-config-mc-app
 ```
+
+## Usage
+
+```js
+// .eslintrc.js
+
+module.exports = {
+  extends: ['@commercetools-frontend/eslint-config-mc-app'],
+};
+```

packages/eslint-config-mc-app/helpers/eslint.js

@@ -0,0 +1,7 @@
+const statusCode = {
+  error: 'error',
+  warn: 'warn',
+  off: 'off',
+};
+
+module.exports = { statusCode };