Use prettier

.eslintrc

@@ -6,6 +6,7 @@
     "node": true
   },
   "rules": {
+    "arrow-parens": "off",
     "no-plusplus": "off",
     "react/require-default-props": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],

package.json

@@ -10,7 +10,9 @@
     "build:umd:min": "cross-env MINIFY=1 webpack --config webpack.build.js",
     "build": "npm run clean && npm run build:commonjs",
     "bundle": "mkdir -p dist && npm run build:umd && npm run build:umd:min",
+    "format": "prettier --write --single-quote --print-width 100 --trailing-comma all \"src/**/*.js\"",
     "lint": "eslint src",
+    "precommit": "lint-staged",
     "preversion": "npm run lint && npm test && npm run build && npm run bundle && git add dist/ && git commit -m 'publish: Distribution'",
     "prepublish": "npm run build",
     "test": "jest",
@@ -59,7 +61,10 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.2.1",
+    "husky": "^0.13.3",
     "jest-cli": "^19.0.2",
+    "lint-staged": "^3.4.0",
+    "prettier": "^1.2.2",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
@@ -79,5 +84,11 @@
     "roots": [
       "src"
     ]
+  },
+  "lint-staged": {
+    "src/**/*.js": [
+      "prettier --single-quote --print-width 100 --trailing-comma all --write",
+      "git add"
+    ]
   }
 }

src/components/Tab.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import cx from 'classnames';
 
 export default class Tab extends Component {
-
   static defaultProps = {
     className: 'ReactTabs__Tab',
     disabledClassName: 'ReactTabs__Tab--disabled',
@@ -15,11 +14,7 @@ export default class Tab extends Component {
   };
 
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.object,
-      PropTypes.string,
-    ]),
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     disabled: PropTypes.bool,
     disabledClassName: PropTypes.string, // private
@@ -57,19 +52,20 @@ export default class Tab extends Component {
       selected,
       selectedClassName,
       tabRef,
-      ...attributes } = this.props;
+      ...attributes
+    } = this.props;
 
     return (
       <li
         {...attributes}
-        className={cx(
-          className,
-          {
-            [selectedClassName]: selected,
-            [disabledClassName]: disabled,
-          },
-        )}
-        ref={(node) => { this.node = node; if (tabRef) tabRef(node); }}
+        className={cx(className, {
+          [selectedClassName]: selected,
+          [disabledClassName]: disabled,
+        })}
+        ref={node => {
+          this.node = node;
+          if (tabRef) tabRef(node);
+        }}
         role="tab"
         id={id}
         aria-selected={selected ? 'true' : 'false'}

src/components/TabList.js

@@ -3,31 +3,20 @@ import React, { Component } from 'react';
 import cx from 'classnames';
 
 export default class TabList extends Component {
-
   static defaultProps = {
     className: 'ReactTabs__TabList',
   };
 
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.array,
-    ]),
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   };
 
   render() {
-    const {
-      children,
-      className,
-      ...attributes } = this.props;
+    const { children, className, ...attributes } = this.props;
 
     return (
-      <ul
-        {...attributes}
-        className={cx(className)}
-        role="tablist"
-      >
+      <ul {...attributes} className={cx(className)} role="tablist">
         {children}
       </ul>
     );

src/components/TabPanel.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import cx from 'classnames';
 
 export default class TabPanel extends Component {
-
   static defaultProps = {
     className: 'ReactTabs__TabPanel',
     forceRender: false,
@@ -32,22 +31,20 @@ export default class TabPanel extends Component {
       selectedClassName,
       style,
       tabId,
-      ...attributes } = this.props;
+      ...attributes
+    } = this.props;
 
     return (
       <div
         {...attributes}
-        className={cx(
-          className,
-          {
-            [selectedClassName]: selected,
-          },
-        )}
+        className={cx(className, {
+          [selectedClassName]: selected,
+        })}
         role="tabpanel"
         id={id}
         aria-labelledby={tabId}
       >
-        {(forceRender || selected) ? children : null}
+        {forceRender || selected ? children : null}
       </div>
     );
   }

src/components/Tabs.js

@@ -5,7 +5,6 @@ import UncontrolledTabs from './UncontrolledTabs';
 import { getTabsCount } from '../helpers/count';
 
 export default class Tabs extends Component {
-
   static defaultProps = {
     defaultFocus: false,
     forceRenderTabPanel: false,
@@ -38,9 +37,9 @@ export default class Tabs extends Component {
       Tabs.inUncontrolledMode(newProps) !== Tabs.inUncontrolledMode(this.props)
     ) {
       throw new Error(
-`Switching between controlled mode (by using \`selectedIndex\`) and uncontrolled mode is not supported in \`Tabs\`.
+        `Switching between controlled mode (by using \`selectedIndex\`) and uncontrolled mode is not supported in \`Tabs\`.
 For more information about controlled and uncontrolled mode of react-tabs see the README.`,
-        );
+      );
     }
     // Use a transactional update to prevent race conditions
     // when reading the state in copyPropsToState
@@ -70,7 +69,7 @@ For more information about controlled and uncontrolled mode of react-tabs see th
     }
 
     this.setState(state);
-  }
+  };
 
   // preserve the existing selectedIndex from state.
   // If the state has not selectedIndex, default to the defaultIndex or 0

src/components/UncontrolledTabs.js

@@ -19,7 +19,6 @@ function isTabDisabled(node) {
 }
 
 export default class UncontrolledTabs extends Component {
-
   static defaultProps = {
     className: 'ReactTabs',
     focus: false,
@@ -129,7 +128,7 @@ export default class UncontrolledTabs extends Component {
     }
 
     // Map children to dynamically setup refs
-    return React.Children.map(children, (child) => {
+    return React.Children.map(children, child => {
       // null happens when conditionally rendering TabPanel/Tab
       // see https://github.com/reactjs/react-tabs/issues/37
       if (child === null) {
@@ -144,12 +143,13 @@ export default class UncontrolledTabs extends Component {
 
         // Figure out if the current focus in the DOM is set on a Tab
         // If it is we should keep the focus on the next selected tab
-        const wasTabFocused = React.Children.toArray(child.props.children)
+        const wasTabFocused = React.Children
+          .toArray(child.props.children)
           .filter(tab => tab.type === Tab)
           .some((tab, i) => document.activeElement === this.getTab(i));
 
         result = cloneElement(child, {
-          children: React.Children.map(child.props.children, (tab) => {
+          children: React.Children.map(child.props.children, tab => {
             // null happens when conditionally rendering TabPanel/Tab
             // see https://github.com/reactjs/react-tabs/issues/37
             if (tab === null) {
@@ -164,7 +164,9 @@ export default class UncontrolledTabs extends Component {
             const selected = selectedIndex === listIndex;
 
             const props = {
-              tabRef: (node) => { this.tabNodes[key] = node; },
+              tabRef: node => {
+                this.tabNodes[key] = node;
+              },
               id: this.tabIds[listIndex],
               panelId: this.panelIds[listIndex],
               selected,
@@ -198,7 +200,7 @@ export default class UncontrolledTabs extends Component {
     });
   }
 
-  handleKeyDown = (e) => {
+  handleKeyDown = e => {
     if (this.isTabFromContainer(e.target)) {
       let index = this.props.selectedIndex;
       let preventDefault = false;
@@ -222,9 +224,10 @@ export default class UncontrolledTabs extends Component {
     }
   };
 
-  handleClick = (e) => {
+  handleClick = e => {
     let node = e.target;
-    do { // eslint-disable-line no-cond-assign
+    // eslint-disable-next-line no-cond-assign
+    do {
       if (this.isTabFromContainer(node)) {
         if (isTabDisabled(node)) {
           return;
@@ -263,16 +266,16 @@ export default class UncontrolledTabs extends Component {
   render() {
     // Delete all known props, so they don't get added to DOM
     const {
-        children,
-        className,
-        disabledTabClassName,
-        focus,
-        forceRenderTabPanel,
-        onSelect,
-        selectedIndex,
-        selectedTabClassName,
-        selectedTabPanelClassName,
-        ...attributes
+      children,
+      className,
+      disabledTabClassName,
+      focus,
+      forceRenderTabPanel,
+      onSelect,
+      selectedIndex,
+      selectedTabClassName,
+      selectedTabPanelClassName,
+      ...attributes
     } = this.props;
 
     return (
@@ -281,7 +284,9 @@ export default class UncontrolledTabs extends Component {
         className={cx(className)}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
-        ref={(node) => { this.node = node; }}
+        ref={node => {
+          this.node = node;
+        }}
         data-tabs
       >
         {this.getChildren()}

src/components/__tests__/Tab-test.js

@@ -6,7 +6,7 @@ import Tab from '../Tab';
 describe('<Tab />', () => {
   beforeAll(() => {
     // eslint-disable-next-line no-console
-    console.error = (error) => {
+    console.error = error => {
       throw new Error(error);
     };
   });

src/components/__tests__/TabList-test.js

@@ -13,7 +13,7 @@ function hasClassAt(wrapper, index, className) {
 describe('<TabList />', () => {
   beforeAll(() => {
     // eslint-disable-next-line no-console
-    console.error = (error) => {
+    console.error = error => {
       throw new Error(error);
     };
   });
@@ -87,7 +87,9 @@ describe('<TabList />', () => {
       <Tabs defaultIndex={0}>
         <TabList>
           <Tab selectedClassName="active" disabledClassName="disabled">Foo</Tab>
-          <Tab disabled selectedClassName="active" disabledClassName="disabled">Bar</Tab>
+          <Tab disabled selectedClassName="active" disabledClassName="disabled">
+            Bar
+          </Tab>
         </TabList>
         <TabPanel>Foo</TabPanel>
         <TabPanel>Bar</TabPanel>

src/components/__tests__/TabPanel-test.js

@@ -6,7 +6,7 @@ import TabPanel from '../TabPanel';
 describe('<TabPanel />', () => {
   beforeAll(() => {
     // eslint-disable-next-line no-console
-    console.error = (error) => {
+    console.error = error => {
       throw new Error(error);
     };
   });
@@ -49,7 +49,11 @@ describe('<TabPanel />', () => {
   });
 
   it('should support being selected with custom class name', () => {
-    const wrapper = shallow(<TabPanel selected id="abcd" tabId="1234" selectedClassName="selected">Hola</TabPanel>);
+    const wrapper = shallow(
+      <TabPanel selected id="abcd" tabId="1234" selectedClassName="selected">
+        Hola
+      </TabPanel>,
+    );
 
     expect(wrapper.hasClass('ReactTabs__TabPanel')).toBe(true);
     expect(wrapper.hasClass('ReactTabs__TabPanel--selected')).toBe(false);
@@ -72,4 +76,3 @@ describe('<TabPanel />', () => {
     expect(wrapper.prop('role')).toBe('tabpanel');
   });
 });
-