feat(project): update eslint to 7 and associated plugins (#8944)

* feat(project): update eslint to 7 and associated plugins

* chore(project): fix eslint violations

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

config/eslint-config-carbon/package.json

@@ -29,20 +29,20 @@
     "access": "public"
   },
   "peerDependencies": {
-    "eslint": "^6.0.0"
+    "eslint": "^6.0.0 || ^7.0.0"
   },
   "dependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-jsdoc": "^20.3.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsdoc": "^35.3.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {

package.json

@@ -55,7 +55,7 @@
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "doctoc": "^1.4.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.28.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "husky": "^4.0.10",

packages/cli/src/commands/publish.js

@@ -37,7 +37,8 @@ async function cleanup() {
  * creating git tags, making sure npm dist-tag's for packages are correct, and
  * will generate a changelog to be used in a GitHub release.
  *
- * @param {object}
+ * @param {object} tag
+ * @param {string} tag.tag
  * @returns {void}
  */
 async function publish({ tag, ...flags }) {

packages/components/demo/js/components/boot-nav.js

@@ -25,6 +25,7 @@ const pollForBrowserSync = (callback) => {
 /**
  * Normalize Fractal Component instance data so the data structure can be shared with non-Fractal environment.
  * @param {object} data The Fractal Component instance data
+ * @param {Array} data.items
  * @param {string} [data.notes] The notes of the component.
  * @param {Array<object>} [data.variants] The variants of the component.
  * @returns {object} The normalized version of the Fractal Component instance data.

packages/components/src/.eslintrc.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 'use strict';
 
 const restrictedGlobals = require('eslint-restricted-globals');
@@ -37,6 +39,7 @@ module.exports = {
       },
     ],
     'class-methods-use-this': 0,
+    'func-names': 0,
     'max-len': [2, 130, 4],
     'no-plusplus': 0,
     'no-restricted-globals': ['error', 'isFinite'].concat(restrictedGlobals),

packages/components/src/components/text-input/text-input.js

@@ -49,6 +49,7 @@ export default class TextInput extends mixin(
    * the SVG icon for visibility off
    * @param {boolean} obj.passwordIsVisible - The visibility of the password in the
    * input field
+   * @param {boolean} obj.selectorPasswordVisibilityTooltip
    */
   _setIconVisibility = ({
     iconVisibilityOn,

packages/components/tests/spec/.eslintrc.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 'use strict';
 
 const restrictedGlobals = require('eslint-restricted-globals');

packages/icon-build-helpers/src/builders/vue/builder.js

@@ -129,6 +129,8 @@ async function builder(metadata, { output }) {
  * of the component, from a given moduleName and icon descriptor.
  * @param {string} moduleName
  * @param {object} descriptor
+ * @param {object} descriptor.attrs
+ * @param {object} descriptor.content
  * @returns {object}
  */
 function createIconComponent(moduleName, { attrs, content }) {

packages/icon-build-helpers/src/metadata/index.js

@@ -44,7 +44,6 @@ async function check({
  * @param {object} options
  * @param {Adapter} [options.adapter] The adapter to use to load the extensions
  * @param {string} options.input The directory of source files
- * @param {string} [options.output] The directory for the built metadata
  * @param {Array<Extension>} [options.extensions] The extensions to load
  * @returns {Promise<object>}
  */

packages/react/src/components/DataTable/DataTable.js

@@ -213,6 +213,7 @@ export default class DataTable extends React.Component {
    * @param {object} config
    * @param {string} config.header the header we want the props for
    * @param {Function} config.onClick a custom click handler for the header
+   * @param {boolean} config.isSortable
    * @returns {object}
    */
   getHeaderProps = ({
@@ -329,6 +330,8 @@ export default class DataTable extends React.Component {
    * for a specific row.
    *
    * @param {object} [row] an optional row that we want to access the props for
+   * @param {Function} row.onClick
+   * @param {object} row.row
    * @returns {object}
    */
   getSelectionProps = ({ onClick, row, ...rest } = {}) => {

packages/react/src/components/DataTable/tools/filter.js

@@ -16,6 +16,7 @@
  * @param {Array<object>} config.headers
  * @param {object} config.cellsById object containing a map of cell id to cell
  * @param {string} config.inputValue the current input value in the Table Search
+ * @param {Function} config.getCellId
  * @returns {Array<string>} rowIds
  */
 export const defaultFilterRows = ({

packages/react/src/components/DataTable/tools/sorting.js

@@ -61,11 +61,12 @@ export const compareStrings = (a, b, locale = 'en') => {
  * @param {Array[string]} config.rowIds array of all the row ids in the table
  * @param {object} config.cellsById object containing a mapping of cell id to
  * cell
- * @param {string} config.direction the sort direction used to determine the
- * order the comparison is called in
  * @param {string} config.key the header key that we use to lookup the cell
  * @param {string} [config.locale] optional locale used in the comparison
  * function
+ * @param {string} config.sortDirection the sort direction used to determine the
+ * order the comparison is called in
+ * @param {Function} config.sortRow
  * @returns {Array[string]} array of sorted rowIds
  */
 export const sortRows = ({

packages/react/src/components/FileUploader/test-helpers.js

@@ -31,7 +31,6 @@ export function uploadFiles(input, files = []) {
       if (!newValue) {
         input.files.length = 0;
       }
-      return newValue;
     },
   });
 

packages/react/src/components/Notification/Notification.js

@@ -81,9 +81,9 @@ export function NotificationButton({
   });
 
   return (
-    // eslint-disable-next-line react/button-has-type
     <button
       {...rest}
+      // eslint-disable-next-line react/button-has-type
       type={type}
       aria-label={iconDescription}
       title={iconDescription}

packages/react/src/components/Notification/next/Notification.js

@@ -102,9 +102,9 @@ export function NotificationButton({
   });
 
   return (
-    // eslint-disable-next-line react/button-has-type
     <button
       {...rest}
+      // eslint-disable-next-line react/button-has-type
       type={type}
       aria-label={iconDescription}
       title={iconDescription}

packages/react/src/components/TreeView/TreeNode.js

@@ -195,6 +195,7 @@ export default function TreeNode({
     );
   }
   return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     <li {...treeNodeProps} aria-expanded={!!expanded}>
       <div className={`${prefix}--tree-node__label`} ref={currentNodeLabel}>
         {/* https://github.com/carbon-design-system/carbon/pull/6008#issuecomment-675738670 */}

packages/react/src/components/UIShell/SideNavLink.js

@@ -82,6 +82,7 @@ SideNavLink.defaultProps = {
   large: false,
 };
 
+// eslint-disable-next-line react/display-name
 export const createCustomSideNavLink = (element) => (props) => {
   return <SideNavLink element={element} {...props} />;
 };

packages/react/src/internal/wrapFocus.js

@@ -36,7 +36,7 @@ function elementOrParentIsFloatingMenu(
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
- * @param {Node} options.modalNode The DOM node of the inner modal.
+ * @param {Node} options.bodyNode
  * @param {Node} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
  * @param {Node} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
  * @param {Node} options.currentActiveNode The DOM node that has focus.