Add eslint and prettier (carbon-design-system#1)

Add eslint and prettier

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["eslint-config-carbon"],
+  "rules": {
+    "react/prop-types": 0,
+    "react/forbid-prop-types": 0
+  }
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "jsxBracketSameLine": true,
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "proseWrap": "preserve"
+}

package.json

@@ -6,14 +6,54 @@
   "scripts": {
     "dev": "gatsby develop",
     "dev:clean": "gatsby clean && gatsby develop",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "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",
+    "husky": ">=1",
+    "lint-staged": ">=8",
+    "prettier": "^1.18.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{js,json,css,scss,md,mdx,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

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 = {

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>
+    ));
 }
 
 /**

src/components/SimpleColumns/index.js

@@ -1,2 +1,3 @@
 import SimpleColumns from './SimpleColumns';
+
 export default SimpleColumns;

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 = {
   /**

src/components/WebsiteAlert/index.js

@@ -1,2 +1,3 @@
 import WebsiteAlert from './WebsiteAlert';
+
 export default WebsiteAlert;

src/components/WebsiteHeader/index.js

@@ -1,2 +1,3 @@
 import WebsiteHeader from './WebsiteHeader';
+
 export default WebsiteHeader;

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

src/components/WebsiteTabs/index.js

@@ -1,2 +1,3 @@
 import WebsiteTabs from './WebsiteTabs';
+
 export default WebsiteTabs;

src/gatsby-theme-carbon/templates/Homepage.js

@@ -5,25 +5,27 @@ import { calloutLink } from './Homepage.module.scss';
 
 import Carbon from '../../images/carbon.jpg';
 
-const FirstLeftText = () => <p>Carbon Design
-System</p>;
+const FirstLeftText = () => <p>Carbon Design System</p>;
 
 const FirstRightText = () => (
   <p>
-    Carbon is IBM’s <strong>open-source</strong> design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
+    Carbon is IBM’s <strong>open-source</strong> design system for products and
+    experiences. With the IBM Design Language as its foundation, the system
+    consists of working code, design tools and resources, human interface
+    guidelines, and a vibrant community of contributors.
   </p>
 );
 
-const SecondLeftText = () => <p>Wondering how
-to contribute?</p>;
+const SecondLeftText = () => <p>Wondering how to contribute?</p>;
 
 const SecondRightText = () => (
   <p>
-    We welcome all feedback, designs, or ideas in order to produce the best possible experience for our users. If you’re interested in contributing, check out our contributing guidelines to get started.
+    We welcome all feedback, designs, or ideas in order to produce the best
+    possible experience for our users. If you’re interested in contributing,
+    check out our contributing guidelines to get started.
     <a
       className={calloutLink}
-      href="https://www.carbondesignsystem.com/contributions/overview/"
-    >
+      href="https://www.carbondesignsystem.com/contributions/overview/">
       Start contributing →
     </a>
   </p>