chore: run eslint

carbon-design-system · Jul 29, 2019 · d18d021 · d18d021
1 parent c5b8337
commit d18d021
Show file tree

Hide file tree

Showing 14 changed files with 438 additions and 165 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1 +1,7 @@
-{ "extends": ["eslint-config-carbon"] }
+{
+  "extends": ["eslint-config-carbon"],
+  "rules": {
+    "react/prop-types": 0,
+    "react/forbid-prop-types": 0
+  }
+}
diff --git a/package.json b/package.json
@@ -7,19 +7,36 @@
     "dev": "gatsby develop",
     "dev:clean": "gatsby clean && gatsby develop",
     "clean": "gatsby clean",
-    "lint:js": "eslint src",
+    "lint:js": "eslint src --fix",
     "format": "prettier --write 'src/**/*.{js,json,css,scss,md,mdx,yaml}'"
   },
   "dependencies": {
+    "@carbon/icons-react": "^10.4.1",
+    "@reach/router": "^1.2.1",
+    "carbon-components": "^10.4.1",
+    "carbon-components-react": "^7.4.1",
+    "classnames": "^2.2.6",
     "gatsby": "^2.13.41",
     "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-theme-carbon": "^1.6.2",
     "markdown-it": "^9.0.1",
+    "prismjs": "^1.17.1",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-dom": "^16.8.6",
+    "react-ga": "^2.6.0"
   },
   "devDependencies": {
+    "eslint": "4.3.0",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-airbnb-base": "^11.3.1",
     "eslint-config-carbon": "^1.0.2",
+    "eslint-config-prettier": "^2.3.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-react": "^7.1.0",
     "prettier": "^1.18.2"
   }
 }
diff --git a/src/components/IconLibrary/ClickableTile/ClickableTile.js b/src/components/IconLibrary/ClickableTile/ClickableTile.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickableTile } from 'carbon-components-react';
-import { Launch20 } from '@carbon/icons-react';
-import { ArrowRight24 } from '@carbon/icons-react';
+import { Launch20, ArrowRight24 } from '@carbon/icons-react';
 
 export default class ClickTile extends React.Component {
   static propTypes = {

diff --git a/src/components/IconLibrary/IconLibrary.js b/src/components/IconLibrary/IconLibrary.js
@@ -40,11 +40,10 @@ export default class IconLibrary extends React.Component {
   filterIcons = () => {
     this.setState(state => {
       const { icons, searchValue } = state;
-      const filteredIcons = Object.keys(icons).filter(icon => {
-        return (
+      const filteredIcons = Object.keys(icons).filter(
+        icon =>
           searchValue === '' || icon.toLowerCase().indexOf(searchValue) !== -1
-        );
-      });
+      );
       return {
         filteredIcons,
         sections: createIconSections(icons, filteredIcons),
@@ -267,20 +266,18 @@ function createIconSections(icons, filteredIcons) {
       }
       return groups[size].length !== 0;
     })
-    .map(size => {
-      return (
-        <section key={size} className="icon-size" aria-labelledby={`icon-h2`}>
-          <header>
-            <h2 className={`icon-h2`}>
-              {isNaN(size) ? size : `${size}x${size}`}
-            </h2>
-          </header>
-          <ul className="icons-list">
-            {renderIconList(groups[size], filteredIcons)}
-          </ul>
-        </section>
-      );
-    });
+    .map(size => (
+      <section key={size} className="icon-size" aria-labelledby={`icon-h2`}>
+        <header>
+          <h2 className={`icon-h2`}>
+            {isNaN(size) ? size : `${size}x${size}`}
+          </h2>
+        </header>
+        <ul className="icons-list">
+          {renderIconList(groups[size], filteredIcons)}
+        </ul>
+      </section>
+    ));
 }
 
 /**

diff --git a/src/components/SimpleColumns/index.js b/src/components/SimpleColumns/index.js
@@ -1,2 +1,3 @@
 import SimpleColumns from './SimpleColumns';
+
 export default SimpleColumns;
diff --git a/src/components/TypeSpec/TypeSpec.js b/src/components/TypeSpec/TypeSpec.js
@@ -2,20 +2,18 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { CodeSnippet } from 'carbon-components-react';
 
-const TypeSpec = ({ children, token, description }) => {
-  return (
-    <div className="bx--row type-spec">
-      <div className="type-spec__example bx--offset-lg-4 bx--col-lg-8 bx--col-md-5">
-        <div className={`bx--type-${token}`}>{description}</div>
-      </div>
-      <div className="type-spec__details bx--col-lg-4 bx--col-md-3">
-        <h4>{token}</h4>
-        <div>{children}</div>
-        <CodeSnippet type="inline">${token}</CodeSnippet>
-      </div>
+const TypeSpec = ({ children, token, description }) => (
+  <div className="bx--row type-spec">
+    <div className="type-spec__example bx--offset-lg-4 bx--col-lg-8 bx--col-md-5">
+      <div className={`bx--type-${token}`}>{description}</div>
     </div>
-  );
-};
+    <div className="type-spec__details bx--col-lg-4 bx--col-md-3">
+      <h4>{token}</h4>
+      <div>{children}</div>
+      <CodeSnippet type="inline">${token}</CodeSnippet>
+    </div>
+  </div>
+);
 
 TypeSpec.propTypes = {
   /**

diff --git a/src/components/WebsiteAlert/index.js b/src/components/WebsiteAlert/index.js
@@ -1,2 +1,3 @@
 import WebsiteAlert from './WebsiteAlert';
+
 export default WebsiteAlert;
diff --git a/src/components/WebsiteHeader/index.js b/src/components/WebsiteHeader/index.js
@@ -1,2 +1,3 @@
 import WebsiteHeader from './WebsiteHeader';
+
 export default WebsiteHeader;
diff --git a/src/components/WebsiteTabs/WebsiteTabs.js b/src/components/WebsiteTabs/WebsiteTabs.js
@@ -105,61 +105,52 @@ class Tabs extends React.Component {
     return React.Children.map(this.props.children, tab => tab);
   }
 
-  getTabAt = (index, useFresh) => {
-    return (
-      (!useFresh && this[`tab${index}`]) ||
-      React.Children.toArray(this.props.children)[index]
-    );
-  };
+  getTabAt = (index, useFresh) =>
+    (!useFresh && this[`tab${index}`]) ||
+    React.Children.toArray(this.props.children)[index];
 
   setTabAt = (index, tabRef) => {
     this[`tab${index}`] = tabRef;
   };
 
   // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
-  handleTabClick = onSelectionChange => {
-    return (index, evt) => {
-      evt.preventDefault();
+  handleTabClick = onSelectionChange => (index, evt) => {
+    evt.preventDefault();
+    this.selectTabAt(index, onSelectionChange);
+    this.setState({
+      dropdownHidden: true,
+    });
+  };
+
+  handleTabKeyDown = onSelectionChange => (index, evt) => {
+    const key = evt.key || evt.which;
+
+    if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
       this.selectTabAt(index, onSelectionChange);
       this.setState({
         dropdownHidden: true,
       });
-    };
-  };
-
-  handleTabKeyDown = onSelectionChange => {
-    return (index, evt) => {
-      const key = evt.key || evt.which;
-
-      if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
-        this.selectTabAt(index, onSelectionChange);
-        this.setState({
-          dropdownHidden: true,
-        });
-      }
-    };
+    }
   };
 
-  handleTabAnchorFocus = onSelectionChange => {
-    return index => {
-      const tabCount = React.Children.count(this.props.children) - 1;
-      let tabIndex = index;
+  handleTabAnchorFocus = onSelectionChange => index => {
+    const tabCount = React.Children.count(this.props.children) - 1;
+    let tabIndex = index;
 
-      if (index < 0) {
-        tabIndex = tabCount;
-      } else if (index > tabCount) {
-        tabIndex = 0;
-      }
+    if (index < 0) {
+      tabIndex = tabCount;
+    } else if (index > tabCount) {
+      tabIndex = 0;
+    }
 
-      const tab = this.getTabAt(tabIndex);
+    const tab = this.getTabAt(tabIndex);
 
-      if (tab) {
-        this.selectTabAt(tabIndex, onSelectionChange);
-        if (tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
+    if (tab) {
+      this.selectTabAt(tabIndex, onSelectionChange);
+      if (tab.tabAnchor) {
+        tab.tabAnchor.focus();
       }
-    };
+    }
   };
 
   handleDropdownClick = () => {
@@ -309,9 +300,9 @@ export default class WebsiteTabs extends React.Component {
   };
 
   updateTabChildren = () => {
-    this.tabChildren = this.props.children.filter(child => {
-      return child.$$typeof !== undefined;
-    });
+    this.tabChildren = this.props.children.filter(
+      child => child.$$typeof !== undefined
+    );
   };
 
   componentDidMount() {

diff --git a/src/components/WebsiteTabs/index.js b/src/components/WebsiteTabs/index.js
@@ -1,2 +1,3 @@
 import WebsiteTabs from './WebsiteTabs';
+
 export default WebsiteTabs;
diff --git a/src/pages/components/component-status/ComponentStatus/ComponentStatus.js b/src/pages/components/component-status/ComponentStatus/ComponentStatus.js
@@ -13,41 +13,39 @@ const tags = {
 };
 
 class ComponentStatus extends React.Component {
-  renderItems = currentItem => {
-    return (
-      <tr key={currentItem.component}>
-        <td>{currentItem.component}</td>
-        <td>
-          {Object.keys(currentItem.vanilla)
-            .filter(key => currentItem.vanilla[key])
-            .map(key => {
-              return <React.Fragment key={key}>{tags[key]}</React.Fragment>;
-            })}
-        </td>
-        <td>
-          {Object.keys(currentItem.react)
-            .filter(key => currentItem.react[key])
-            .map(key => {
-              return <React.Fragment key={key}>{tags[key]}</React.Fragment>;
-            })}
-        </td>
-        <td>
-          {Object.keys(currentItem.angular)
-            .filter(key => currentItem.angular[key])
-            .map(key => {
-              return <React.Fragment key={key}>{tags[key]}</React.Fragment>;
-            })}
-        </td>
-        <td>
-          {Object.keys(currentItem.vue)
-            .filter(key => currentItem.vue[key])
-            .map(key => {
-              return <React.Fragment key={key}>{tags[key]}</React.Fragment>;
-            })}
-        </td>
-      </tr>
-    );
-  };
+  renderItems = currentItem => (
+    <tr key={currentItem.component}>
+      <td>{currentItem.component}</td>
+      <td>
+        {Object.keys(currentItem.vanilla)
+          .filter(key => currentItem.vanilla[key])
+          .map(key => (
+            <React.Fragment key={key}>{tags[key]}</React.Fragment>
+          ))}
+      </td>
+      <td>
+        {Object.keys(currentItem.react)
+          .filter(key => currentItem.react[key])
+          .map(key => (
+            <React.Fragment key={key}>{tags[key]}</React.Fragment>
+          ))}
+      </td>
+      <td>
+        {Object.keys(currentItem.angular)
+          .filter(key => currentItem.angular[key])
+          .map(key => (
+            <React.Fragment key={key}>{tags[key]}</React.Fragment>
+          ))}
+      </td>
+      <td>
+        {Object.keys(currentItem.vue)
+          .filter(key => currentItem.vue[key])
+          .map(key => (
+            <React.Fragment key={key}>{tags[key]}</React.Fragment>
+          ))}
+      </td>
+    </tr>
+  );
 
   render() {
     const vanillaVersion = Packages.dependencies['carbon-components'];
@@ -70,9 +68,9 @@ class ComponentStatus extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {Object.keys(componentStatus.components).map(component => {
-                return this.renderItems(componentStatus.components[component]);
-              })}
+              {Object.keys(componentStatus.components).map(component =>
+                this.renderItems(componentStatus.components[component])
+              )}
             </tbody>
           </table>
         </div>

diff --git a/src/pages/components/overview/ComponentOverview/ComponentOverview.js b/src/pages/components/overview/ComponentOverview/ComponentOverview.js
@@ -44,9 +44,9 @@ class ComponentOverview extends React.Component {
       <div className="bx--row">
         <div className="bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
           <ul className="component-overview">
-            {Object.keys(componentList.components).map(component => {
-              return this.renderItems(componentList.components[component]);
-            })}
+            {Object.keys(componentList.components).map(component =>
+              this.renderItems(componentList.components[component])
+            )}
           </ul>
         </div>
       </div>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		import SimpleColumns from './SimpleColumns';

		export default SimpleColumns;
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		import WebsiteAlert from './WebsiteAlert';

		export default WebsiteAlert;
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		import WebsiteHeader from './WebsiteHeader';

		export default WebsiteHeader;
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		import WebsiteTabs from './WebsiteTabs';

		export default WebsiteTabs;