chore: migrate to Carbon eslint configuration

.eslintrc

@@ -1,8 +1,9 @@
 {
-  "extends": ["wesbos"],
+  "extends": ["carbon"],
   "globals": {
     "fathom": "readonly"
   },
+  "root": true,
   "rules": {
     "react/prop-types": 0,
     "react/destructuring-assignment": 0,

.vscode/settings.json

@@ -1,12 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
-  "[javascriptreact]": {
-    "editor.formatOnSave": false
-  },
-  "prettier.disableLanguages": ["javascript", "javascriptreact"],
+  "eslint.lintTask.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

gatsby-browser.js

@@ -1,2 +1 @@
-/* eslint-disable import/prefer-default-export */
 import './src/styles/index.scss';

gatsby-ssr.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import React from 'react';
 import ogimage from './src/images/ogimage.png';
 

package.json

@@ -45,15 +45,15 @@
   },
   "dependencies": {
     "@carbon/charts-react": "0.42.1",
+    "@carbon/elements": "^10.41.0",
+    "@carbon/icons": "^10.38.0",
+    "@carbon/icons-react": "^10.38.0",
     "@carbon/pictograms": "^11.16.0",
     "@carbon/pictograms-react": "^11.16.0",
     "@loadable/component": "^5.15.0",
     "@slack/web-api": "^5.11.0",
     "carbon-components": "^10.42.0",
     "carbon-components-react": "^7.42.0",
-    "@carbon/elements": "^10.41.0",
-    "@carbon/icons": "^10.38.0",
-    "@carbon/icons-react": "^10.38.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
@@ -84,16 +84,8 @@
     "babel-preset-gatsby": "^1.7.1",
     "d3": "7.0.0",
     "dotenv": "^8.2.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-config-wesbos": "0.0.19",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint": "^7.32.0",
+    "eslint-config-carbon": "^2.8.0",
     "fs-extra": "^9.0.1",
     "gatsby-plugin-lodash": "^4.7.1",
     "gatsby-plugin-manifest": "^3.7.1",

src/components/ChartIndexPage/ChartIndexListItem.js

@@ -29,8 +29,7 @@ const ChartIndexListItem = React.memo(
     }
 
     return (
-      <>
-        <article className="component-index-item">
+      <article className="component-index-item">
           <div className="component-index-item__image">{img}</div>
           <div className="component-index-item__content">
             <header className="component-index-item__name">{name}</header>
@@ -67,7 +66,6 @@ const ChartIndexListItem = React.memo(
             </footer>
           </div>
         </article>
-      </>
     );
   }
 );

src/components/ChartIndexPage/ChartIndexNotFound.js

@@ -23,7 +23,7 @@ function ChartIndexNotFound() {
       <Row>
         <Column sm={4} md={6} lg={6}>
           <p className="component-index-not-found__text">
-            If you have designs or code for a chart that isn't listed here,
+            If you have designs or code for a chart that isn’t listed here,
             please
             <Link
               className="component-index-not-found__link"

src/components/ChartIndexPage/ChartIndexSearch.js

@@ -22,16 +22,16 @@ function ChartIndexSearch({ value, onChange }) {
 }
 
 ChartIndexSearch.propTypes = {
-  /**
-   * Control the value of the search using the `value` prop
-   */
-  value: PropTypes.string.isRequired,
-
   /**
    * Receive an update for the latest value and use it to update the passed in
    * `value`
    */
   onChange: PropTypes.func.isRequired,
+
+  /**
+   * Control the value of the search using the `value` prop
+   */
+  value: PropTypes.string.isRequired,
 };
 
 export default ChartIndexSearch;

src/components/ChartIndexPage/ChartIndexSort.js

@@ -30,16 +30,16 @@ function ChartIndexSort({ initialSortOption, options, onChange }) {
 }
 
 ChartIndexSort.propTypes = {
-  /**
-   * Provide the available sort options to be selected
-   */
-  options: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Receive an update for the latest value and use it to update the passed in
    * `value`
    */
   onChange: PropTypes.func.isRequired,
+
+  /**
+   * Provide the available sort options to be selected
+   */
+  options: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default ChartIndexSort;

src/components/ChartIndexPage/index.js

@@ -161,8 +161,9 @@ function ChartIndexPage() {
           {filterLabels.map(({ title, options, key }) => (
             <div key={key} className="component-index-filter__option">
               <legend className="component-index-filter__label">{title}</legend>
-              {options.map((selectedFilter) => (
+              {options.map((selectedFilter, i) => (
                 <Checkbox
+                  key={`${selectedFilter}-${i}`}
                   labelText={selectedFilter}
                   id={selectedFilter}
                   checked={selected.includes(selectedFilter)}

src/components/ComponentDemo/Code/CodeBar.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import copy from 'copy-to-clipboard';
 
 import React from 'react';

src/components/ComponentDemo/Code/Sidebar.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import copy from 'copy-to-clipboard';
 
 import React from 'react';

src/components/ComponentDemo/ComponentDemo.js

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useContext } from 'react';
 import getTheme from 'gatsby-theme-carbon/src/components/Code/getTheme';
 import * as CarbonComponents from 'carbon-components-react';

src/components/ComponentDemo/DemoContext.js

@@ -1,6 +1,5 @@
 import React, { useState, useLayoutEffect } from 'react';
 
-/* eslint-disable import/no-extraneous-dependencies */
 import useMedia from 'use-media';
 import { breakpoints } from '@carbon/elements';
 

src/components/ComponentDemo/KnobContainer.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 import React, { useContext, useRef } from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Close20 } from '@carbon/icons-react';
 import nanoid from 'nanoid';
 
@@ -163,7 +162,7 @@ const Knob = ({
     const propString = parsedKnobProps.concat(
       Object.entries(newKnobs[component]).reduce(
         (accumulator, [prop, value]) => {
-          if (!value || value === `'default'`) return accumulator;
+          if (!value || value === `'default'`) {return accumulator;}
           if (typeof value === 'boolean') {
             return `${accumulator} ${prop}`;
           }

src/components/ComponentIndexPage/ComponentIndexListItem.js

@@ -80,8 +80,7 @@ const ComponentIndexListItem = React.memo(
     };
 
     return (
-      <>
-        <article className="component-index-item">
+      <article className="component-index-item">
           <div className="component-index-item__image">{img}</div>
           <div className="component-index-item__content">
             <header className="component-index-item__name">{name}</header>
@@ -139,7 +138,6 @@ const ComponentIndexListItem = React.memo(
             </footer>
           </div>
         </article>
-      </>
     );
   }
 );

src/components/ComponentIndexPage/ComponentIndexNotFound.js

@@ -26,7 +26,7 @@ function ComponentIndexNotFound() {
         <Column sm={4} md={6} lg={6}>
           <p className="component-index-not-found__text">
             This community component index does not include the Carbon core
-            components and you may find what you're looking for in the
+            components and you may find what you’re looking for in the
             <Link
               className="component-index-not-found__link"
               href={coreComponentsLink}

src/components/ComponentIndexPage/ComponentIndexSearch.js

@@ -21,16 +21,15 @@ function ComponentIndexSearch({ value, onChange }) {
 }
 
 ComponentIndexSearch.propTypes = {
-  /**
-   * Control the value of the search using the `value` prop
-   */
-  value: PropTypes.string.isRequired,
-
   /**
    * Receive an update for the latest value and use it to update the passed in
    * `value`
    */
   onChange: PropTypes.func.isRequired,
+  /**
+   * Control the value of the search using the `value` prop
+   */
+  value: PropTypes.string.isRequired,
 };
 
 export default ComponentIndexSearch;

src/components/ComponentIndexPage/ComponentIndexSort.js

@@ -30,16 +30,16 @@ function ComponentIndexSort({ initialSortOption, options, onChange }) {
 }
 
 ComponentIndexSort.propTypes = {
-  /**
-   * Provide the available sort options to be selected
-   */
-  options: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Receive an update for the latest value and use it to update the passed in
    * `value`
    */
   onChange: PropTypes.func.isRequired,
+
+  /**
+   * Provide the available sort options to be selected
+   */
+  options: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default ComponentIndexSort;

src/components/ComponentIndexPage/index.js

@@ -105,9 +105,10 @@ function ComponentIndexPage() {
   const [selected, setSelected] = useState([]);
   const [searchValue, setSearchValue] = useState('');
   const [debouncedSearchValue] = useDebounce(searchValue, 300);
-  const searchClient = useMemo(() => new Fuse(components, searchOptions), [
-    components,
-  ]);
+  const searchClient = useMemo(
+    () => new Fuse(components, searchOptions),
+    [components]
+  );
 
   const handleOnChange = (_checkedOption, selectedFilter) => {
     // Remove unchecked filter option(s) from setSelected state.
@@ -158,11 +159,12 @@ function ComponentIndexPage() {
       <Column sm={0} md={2} lg={3} className="component-index-filter-container">
         <header className="component-index-filter__header">Filters</header>
         {filterLabels.map(({ title, options, key }) => (
-          <fieldset className="component-index-filter__fieldset">
+          <fieldset key={key} className="component-index-filter__fieldset">
             <legend className="component-index-filter__label">{title}</legend>
-            <div key={key} className="component-index-filter__option">
-              {options.map((selectedFilter) => (
+            <div className="component-index-filter__option">
+              {options.map((selectedFilter, i) => (
                 <Checkbox
+                  key={`${selectedFilter}-${i}`}
                   labelText={selectedFilter}
                   id={selectedFilter}
                   checked={selected.includes(selectedFilter)}

src/components/ComponentOverview/ComponentOverview.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-dynamic-require */
 /* eslint-disable global-require */
 import React from 'react';
 import { Link } from 'gatsby';

src/components/OverviewCard/OverviewCard.js

@@ -66,31 +66,26 @@ export default class OverviewCard extends React.Component {
 
 OverviewCard.propTypes = {
   children: PropTypes.node,
-
   /**
-   * Add tag
+   * Specify a custom class
    */
-  tag: PropTypes.string,
-
+  className: PropTypes.string,
   /**
-   * Set url for card
+   * Use for disabled card
    */
-  href: PropTypes.string,
-
+  disabled: PropTypes.bool,
   /**
-   * LTitle
+   * Set url for card
    */
-  title: PropTypes.string,
-
+  href: PropTypes.string,
   /**
-   * Use for disabled card
+   * Add tag
    */
-  disabled: PropTypes.bool,
-
+  tag: PropTypes.string,
   /**
-   * Specify a custom class
+   * LTitle
    */
-  className: PropTypes.string,
+  title: PropTypes.string,
 };
 
 OverviewCard.defaultProps = {

src/components/Profile/Profile.js

@@ -12,7 +12,7 @@ import {
 
 const { prefix } = settings;
 
-const Profile = ({ name, title, children, ...rest }) => (
+const Profile = ({ name, title, children }) => (
   <div
     className={`${profileContainer} bx--col-md-4 bx--col-lg-4 bx--no-gutter-sm`}>
     <div className={`${prefix}--aspect-ratio ${prefix}--aspect-ratio--2x1`}>
@@ -30,9 +30,9 @@ const Profile = ({ name, title, children, ...rest }) => (
 );
 
 Profile.propTypes = {
+  children: PropTypes.node,
   name: PropTypes.string,
   title: PropTypes.string,
-  children: PropTypes.node,
 };
 
 export default Profile;

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -27,7 +27,7 @@ const IconLibrary = () => {
 
   useEffect(() => {
     const iconArray = iconMetaData.reduce((accumulator, icon) => {
-      if (icon.deprecated) return accumulator;
+      if (icon.deprecated) {return accumulator;}
 
       const path = [...icon.namespace, icon.name].join('/');
 

src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js

@@ -31,7 +31,7 @@ const IconLibrary = () => {
   useEffect(() => {
     const pictogramArray = pictogramMetaData.reduce(
       (accumulator, pictogram) => {
-        if (pictogram.deprecated) return accumulator;
+        if (pictogram.deprecated) {return accumulator;}
 
         const path = [...pictogram.namespace, pictogram.name].join('/');
 

src/components/SVGLibraries/shared/ActionBar.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React, { useRef, useContext, useState } from 'react';
 import { pascalCase } from 'change-case';
 import { Code16, Download16 } from '@carbon/icons-react';

src/components/SVGLibraries/shared/LibraryProvider.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
 export const LibraryContext = React.createContext();