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>

package.json

@@ -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",

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

@@ -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) {

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

@@ -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/eslint-config-carbon/base.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/eslint-config-carbon/index.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/package.json

@@ -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/plugins/jsdoc.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/plugins/react.js

@@ -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,
+ },
+ },
+ ],
+};

packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js

@@ -92,7 +92,6 @@ describe('Icon', () => {
  width={16}
  height={16}
  viewBox="0 0 16 16"
- tabIndex="0"
  aria-label="Mock icon"
  tabIndex="0">
  <circle cx={8} cy={8} r={8} />