diff --git a/.yarn/offline-mirror/eslint-plugin-react-hooks-2.3.0.tgz b/.yarn/offline-mirror/eslint-plugin-react-hooks-2.3.0.tgz
deleted file mode 100644
index be1c1517de58..000000000000
Binary files a/.yarn/offline-mirror/eslint-plugin-react-hooks-2.3.0.tgz and /dev/null differ
diff --git a/.yarn/offline-mirror/eslint-plugin-react-hooks-4.0.4.tgz b/.yarn/offline-mirror/eslint-plugin-react-hooks-4.0.4.tgz
new file mode 100644
index 000000000000..ec6dfa2b2872
Binary files /dev/null and b/.yarn/offline-mirror/eslint-plugin-react-hooks-4.0.4.tgz differ
diff --git a/package.json b/package.json
index f401bb7fe07c..908d347b8b67 100644
--- a/package.json
+++ b/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",
diff --git a/packages/components/demo/js/components/ComponentExample/ComponentExample.js b/packages/components/demo/js/components/ComponentExample/ComponentExample.js
index 10d016a5aef7..7ee06db6ae2b 100644
--- a/packages/components/demo/js/components/ComponentExample/ComponentExample.js
+++ b/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) {
diff --git a/packages/components/demo/js/components/RootPage.js b/packages/components/demo/js/components/RootPage.js
index 56d1270d2fa3..38210c689ae5 100644
--- a/packages/components/demo/js/components/RootPage.js
+++ b/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
))}
diff --git a/packages/eslint-config-carbon/base.js b/packages/eslint-config-carbon/base.js
new file mode 100644
index 000000000000..a8ea9199579b
--- /dev/null
+++ b/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,
+ },
+};
diff --git a/packages/eslint-config-carbon/index.js b/packages/eslint-config-carbon/index.js
index f4b3d808275e..7693ab4c0e0f 100644
--- a/packages/eslint-config-carbon/index.js
+++ b/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')],
};
diff --git a/packages/eslint-config-carbon/package.json b/packages/eslint-config-carbon/package.json
index 77b688bd323c..85ac16c36060 100644
--- a/packages/eslint-config-carbon/package.json
+++ b/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"
}
}
diff --git a/packages/eslint-config-carbon/plugins/jsdoc.js b/packages/eslint-config-carbon/plugins/jsdoc.js
new file mode 100644
index 000000000000..08a70be27054
--- /dev/null
+++ b/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,
+ },
+};
diff --git a/packages/eslint-config-carbon/plugins/react.js b/packages/eslint-config-carbon/plugins/react.js
new file mode 100644
index 000000000000..7b4bbc9b2615
--- /dev/null
+++ b/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
{children}
;
+ // }
+ //
+ // 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={() =>