feat(eslint-config-carbon): update config and externalize package (#6169)

* refactor(eslint): update structure to use plugin folders

* feat(eslint): add support for overrides

* fix(project): address eslint violations

* feat(eslint): enable no-useless-fragment

* chore: remove jsx-a11y overrides

* chore(lint): begin fixing linting errors

* chore(tests): update snapshots, merge with master

* chore(lint): fix linting errors through listbox

* chore(lint): fix linting errors through overflow menu

* chore(lint): fix linting errors through UI Shell

* chore(snapshot): update snapshots

* chore(lint): fix vanilla linting errors

Co-authored-by: TJ Egan <tw15egan@gmail.com>

Author: joshblack

.yarn/offline-mirror/eslint-plugin-react-hooks-2.3.0.tgz

@@ -57,7 +57,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^6.8.0",
-    "eslint-config-carbon": "10.7.0",
+    "eslint-config-carbon": "2.0.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "husky": "^4.0.10",

.yarn/offline-mirror/eslint-plugin-react-hooks-4.0.4.tgz

@@ -66,6 +66,7 @@ class ComponentExample extends Component {
     this._instantiateComponents();
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillUpdate({ component, htmlFile }) {
     const { component: prevComponent, htmlFile: prevHtmlFile } = this.props;
     if (prevComponent !== component || prevHtmlFile !== htmlFile) {

package.json

@@ -195,6 +195,7 @@ class RootPage extends Component {
     currentTheme: themeSwitcherItems[0].id,
   };
 
+  // eslint-disable-next-line react/prop-types
   static getDerivedStateFromProps({ componentItems, isComponentsX }, state) {
     const {
       prevComponentItems,
@@ -517,6 +518,7 @@ class RootPage extends Component {
             value={currentTheme}
             onChange={this._handleChangeThemeSwitcherDropdown}>
             {themeSwitcherItems.map(({ id, text }) => (
+              // eslint-disable-next-line react/jsx-key
               <DropdownItem itemText={text} value={id} />
             ))}
           </Dropdown>

packages/components/demo/js/components/ComponentExample/ComponentExample.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['eslint:recommended', require.resolve('./plugins/jsdoc')],
+  rules: {
+    // Handle cases where we are destructuring but may not be using the initial
+    // variables
+    'no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+  },
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+    jest: true,
+    jasmine: true,
+  },
+  globals: {
+    __DEV__: true,
+  },
+};

packages/components/demo/js/components/RootPage.js

@@ -8,68 +8,5 @@
 'use strict';
 
 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['eslint:recommended', 'plugin:jsx-a11y/recommended'],
-  plugins: ['react', 'jsdoc', 'jsx-a11y', 'react-hooks'],
-  rules: {
-    // Handle cases where we are destructuring but may not be using the initial
-    // variables
-    'no-unused-vars': [
-      'error',
-      {
-        args: 'after-used',
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      },
-    ],
-    'react/jsx-uses-vars': 1,
-    'react/jsx-uses-react': 1,
-    'react/no-find-dom-node': 1,
-    'react/no-typos': 2,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'jsdoc/check-param-names': 2,
-    'jsdoc/check-tag-names': [
-      'error',
-      {
-        definedTags: ['jest-environment'],
-      },
-    ],
-    'jsdoc/check-types': 2,
-    'jsx-a11y/no-static-element-interactions': 1,
-    'jsx-a11y/no-noninteractive-element-interactions': 1,
-    'jsx-a11y/click-events-have-key-events': 1,
-    'jsx-a11y/anchor-is-valid': 1,
-    'jsx-a11y/interactive-supports-focus': 1,
-    'jsx-a11y/label-has-for': [
-      1,
-      {
-        components: ['Label'],
-        required: {
-          some: ['nesting', 'id'],
-        },
-        allowChildren: true,
-      },
-    ],
-  },
-  env: {
-    node: true,
-    browser: true,
-    es6: true,
-    jest: true,
-    jasmine: true,
-  },
-  globals: {
-    __DEV__: true,
-  },
-  settings: {
-    jsdoc: {
-      tagNamePreference: {
-        augments: 'extends',
-      },
-    },
-    react: {
-      version: 'detect',
-    },
-  },
+  extends: [require.resolve('./base'), require.resolve('./plugins/react')],
 };

packages/eslint-config-carbon/base.js

@@ -1,11 +1,17 @@
 {
   "name": "eslint-config-carbon",
   "private": true,
-  "version": "10.7.0",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/eslint-config-carbon",
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
+  "files": [
+    "plugins",
+    "index.js",
+    "react.js",
+    "vanilla.js"
+  ],
   "keywords": [
     "ibm",
     "carbon",
@@ -29,7 +35,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-restricted-globals": "^0.2.0"
   }
 }

packages/eslint-config-carbon/index.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['jsdoc'],
+  settings: {
+    jsdoc: {
+      tagNamePreference: {
+        augments: 'extends',
+      },
+    },
+  },
+  rules: {
+    'jsdoc/check-param-names': 2,
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        definedTags: ['jest-environment'],
+      },
+    ],
+    'jsdoc/check-types': 2,
+  },
+};

packages/eslint-config-carbon/package.json

@@ -0,0 +1,81 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: ['react', 'react-hooks'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    // react
+    'react/jsx-uses-vars': 1,
+    'react/jsx-uses-react': 1,
+    'react/no-find-dom-node': 1,
+    'react/jsx-no-useless-fragment': 2,
+    'react/no-typos': 2,
+
+    // react-hooks
+    'react-hooks/rules-of-hooks': 2,
+    'react-hooks/exhaustive-deps': 2,
+  },
+  overrides: [
+    // Sometimes we'll want to define a quick component in a story to use as a
+    // wrapper for a component we're documenting. For example:
+    //
+    // function DemoComponent({ children }) {
+    //   return <p>{children}</p>;
+    // }
+    //
+    // In these cases, we don't need to handle prop type validation like we
+    // would for code we ship to users.
+    {
+      files: ['*-story.js'],
+      rules: {
+        'react/prop-types': 0,
+      },
+    },
+
+    // When writing fixtures, we tend to focus on the specific component and
+    // don't require React in scope as we never end up executing the code. The
+    // fixtures are often used for asserting transformations on the file
+    {
+      files: ['**/fixtures/**/*.js'],
+      rules: {
+        'react/react-in-jsx-scope': 0,
+      },
+    },
+
+    {
+      files: ['*-test.js'],
+      rules: {
+        // We often write inline functions for certain types of props, typically
+        // `render*` props. For example, `renderIcon={() => <div>test</div>}`
+        'react/display-name': 0,
+
+        // While writing tests, we often write helper components that are meant
+        // to emulate a specific situation or behavior. These do not require prop
+        // types as they are not shipped to end-users and are not valuable for
+        // test authors.
+        'react/prop-types': 0,
+      },
+    },
+  ],
+};