Added prettier iitegration. (grommet#2394)

* Added prettier iitegration. * Adding the Styled prettier override * Updated prettier config
vaishnavyogesh · Oct 29, 2018 · 169b207 · 169b207
1 parent 1851645
commit 169b207
Show file tree

Hide file tree

Showing 339 changed files with 7,682 additions and 6,086 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
   "env": {
     "node": true,
     "es6": true
@@ -30,13 +31,15 @@
   },
   "rules": {
     "indent": "off",
-    "indent-legacy": ["error", 2],
     "comma-dangle": ["error", "always-multiline"],
-    "jsx-quotes": ["error", "prefer-single"],
     "no-console": 0,
-    "quote-props": ["error", "consistent"],
     "react/jsx-filename-extension": 0,
-    "import/prefer-default-export": 0
+    "import/prefer-default-export": 0,
+    "react/prop-types": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-wrap-multilines": 0,
+    "no-useless-concat": 0,
+    "react/jsx-indent": 0
   },
   "overrides": [
     {

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80
+}
diff --git a/package.json b/package.json
@@ -28,12 +28,14 @@
     "build": "webpack --mode production && babel ./src/js/ --ignore '__tests__' --out-dir ./dist --copy-files && cross-env BABEL_ENV=es6 babel ./src/js/ --ignore '__tests__' --out-dir ./dist/es6 --copy-files",
     "release-stable": "babel-node ./tools/release-stable",
     "lint": "eslint src",
+    "lint-fix": "eslint src --fix",
     "test": "npm run generate-readme-ts && jest --runInBand",
     "test-update": "npm run generate-readme-ts && jest --updateSnapshot",
     "test-watch": "jest --watchAll",
     "pack": "babel-node ./tools/pack",
     "storybook": "cross-env NODE_ENV=development start-storybook -p 9001 -c storybook",
-    "build-storybook": "build-storybook -c storybook -o storybook-static"
+    "build-storybook": "build-storybook -c storybook -o storybook-static",
+    "prettier": "pretty-quick --staged"
   },
   "peerDependencies": {
     "grommet-icons": ">= 3.1.0",
@@ -81,9 +83,11 @@
     "dom-testing-library": "^3.9.0",
     "eslint": "^5.6.1",
     "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.9.1",
     "fs-extra": "^7.0.0",
     "grommet-icons": "^3.1.0",
@@ -96,6 +100,8 @@
     "jest-cli": "^23.1.0",
     "jest-styled-components": "^6.2.0",
     "pre-commit": "^1.2.2",
+    "prettier": "^1.14.3",
+    "pretty-quick": "^1.8.0",
     "react": "^16.4.0",
     "react-dev-utils": "^6.0.4",
     "react-dom": "^16.4.0",
@@ -130,7 +136,8 @@
     ]
   },
   "pre-commit": [
-    "lint",
+    "lint-fix",
+    "prettier",
     "test"
   ]
 }
diff --git a/src/js/components/Accordion/Accordion.js b/src/js/components/Accordion/Accordion.js
@@ -1,25 +1,21 @@
-import React, {
-  Component,
-  Children,
-} from 'react';
+import React, { Component, Children } from 'react';
 import { compose } from 'recompose';
 
 import { Box } from '../Box';
 import { withTheme } from '../hocs';
 
 import { AccordionContext } from './AccordionContext';
 
-const activeAsArray = active => ((typeof active === 'number') ? (
-  [active]
-) : active);
+const activeAsArray = active =>
+  typeof active === 'number' ? [active] : active;
 
 class Accordion extends Component {
   static defaultProps = {
     animate: true,
     messages: {
       tabContents: 'Tab Contents',
     },
-  }
+  };
 
   static getDerivedStateFromProps(nextProps, prevState) {
     const { activeIndex } = nextProps;
@@ -30,8 +26,11 @@ class Accordion extends Component {
 
     const activeIndexes = activeAsArray(activeIndex) || [];
 
-    if ((typeof activeIndex !== 'undefined' || activeIndex !== stateActiveIndex)
-      && activeIndexes.join() !== stateActiveIndexes.join()) {
+    if (
+      (typeof activeIndex !== 'undefined' ||
+        activeIndex !== stateActiveIndex) &&
+      activeIndexes.join() !== stateActiveIndexes.join()
+    ) {
       return { activeIndexes, activeIndex };
     }
 
@@ -40,9 +39,9 @@ class Accordion extends Component {
 
   state = {
     activeIndexes: [],
-  }
+  };
 
-  onPanelChange = (index) => {
+  onPanelChange = index => {
     const { activeIndexes } = this.state;
     let nextActiveIndexes = [...(activeIndexes || [])];
     const { onActive, multiple } = this.props;
@@ -61,21 +60,16 @@ class Accordion extends Component {
         onActive(nextActiveIndexes);
       }
     });
-  }
+  };
 
   render() {
-    const {
-      animate,
-      children,
-      messages,
-      ...rest
-    } = this.props;
+    const { animate, children, messages, ...rest } = this.props;
     const { activeIndexes } = this.state;
 
     delete rest.onActive;
 
     return (
-      <Box role='tablist' {...rest} overflow='auto'>
+      <Box role="tablist" {...rest} overflow="auto">
         {Children.toArray(children).map((panel, index) => (
           <AccordionContext.Provider
             key={`accordion-panel_${index + 0}`}
@@ -98,8 +92,6 @@ let AccordionDoc;
 if (process.env.NODE_ENV !== 'production') {
   AccordionDoc = require('./doc').doc(Accordion); // eslint-disable-line global-require
 }
-const AccordionWrapper = compose(
-  withTheme,
-)(AccordionDoc || Accordion);
+const AccordionWrapper = compose(withTheme)(AccordionDoc || Accordion);
 
 export { AccordionWrapper as Accordion };
diff --git a/src/js/components/Accordion/__tests__/Accordion-test.js b/src/js/components/Accordion/__tests__/Accordion-test.js
@@ -3,9 +3,7 @@ import 'jest-styled-components';
 import renderer from 'react-test-renderer';
 import { cleanup, render, fireEvent } from 'react-testing-library';
 
-import {
-  Accordion, AccordionPanel, Box, Grommet,
-} from '../..';
+import { Accordion, AccordionPanel, Box, Grommet } from '../..';
 
 describe('Accordion', () => {
   afterEach(cleanup);
@@ -14,7 +12,7 @@ describe('Accordion', () => {
     const component = renderer.create(
       <Grommet>
         <Accordion />
-      </Grommet>
+      </Grommet>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -23,27 +21,21 @@ describe('Accordion', () => {
     const component = renderer.create(
       <Grommet>
         <Accordion>
-          <AccordionPanel label='Panel 1'>
-            Panel body 1
-          </AccordionPanel>
-          <AccordionPanel label='Panel 2'>
-            Panel body 2
-          </AccordionPanel>
+          <AccordionPanel label="Panel 1">Panel body 1</AccordionPanel>
+          <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
           {false && (
-            <AccordionPanel label='Panel 2'>
-              Panel body 2
-            </AccordionPanel>
+            <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
           )}
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
 
   test('complex title', () => {
     const component = renderer.create(
       <Grommet>
-        <Box background='dark-1'>
+        <Box background="dark-1">
           <Accordion>
             <AccordionPanel label={<div>Panel 1 complex</div>}>
               Panel body 1
@@ -54,7 +46,7 @@ describe('Accordion', () => {
             </AccordionPanel>
           </Accordion>
         </Box>
-      </Grommet>
+      </Grommet>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -71,24 +63,20 @@ describe('Accordion', () => {
             Panel body 2
           </AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
 
-  test('change to second Panel', (done) => {
+  test('change to second Panel', done => {
     const onActive = jest.fn();
     const { getByText, container } = render(
       <Grommet>
         <Accordion onActive={onActive}>
-          <AccordionPanel label='Panel 1'>
-            Panel body 1
-          </AccordionPanel>
-          <AccordionPanel label='Panel 2'>
-            Panel body 2
-          </AccordionPanel>
+          <AccordionPanel label="Panel 1">Panel body 1</AccordionPanel>
+          <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(container.firstChild).toMatchSnapshot();
 
@@ -108,14 +96,10 @@ describe('Accordion', () => {
     const { getByText, container } = render(
       <Grommet>
         <Accordion animate={false}>
-          <AccordionPanel label='Panel 1'>
-            Panel body 1
-          </AccordionPanel>
-          <AccordionPanel label='Panel 2'>
-            Panel body 2
-          </AccordionPanel>
+          <AccordionPanel label="Panel 1">Panel body 1</AccordionPanel>
+          <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(container.firstChild).toMatchSnapshot();
 
@@ -128,19 +112,11 @@ describe('Accordion', () => {
     const onActive = jest.fn();
     const { getByText, container } = render(
       <Grommet>
-        <Accordion
-          animate={false}
-          multiple
-          onActive={onActive}
-        >
-          <AccordionPanel label='Panel 1'>
-            Panel body 1
-          </AccordionPanel>
-          <AccordionPanel label='Panel 2'>
-            Panel body 2
-          </AccordionPanel>
+        <Accordion animate={false} multiple onActive={onActive}>
+          <AccordionPanel label="Panel 1">Panel body 1</AccordionPanel>
+          <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(container.firstChild).toMatchSnapshot();
 
@@ -170,14 +146,10 @@ describe('Accordion', () => {
     const { getByText, container } = render(
       <Grommet>
         <Accordion animate={false} activeIndex={1} onActive={onActive}>
-          <AccordionPanel label='Panel 1'>
-            Panel body 1
-          </AccordionPanel>
-          <AccordionPanel label='Panel 2'>
-            Panel body 2
-          </AccordionPanel>
+          <AccordionPanel label="Panel 1">Panel body 1</AccordionPanel>
+          <AccordionPanel label="Panel 2">Panel body 2</AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(container.firstChild).toMatchSnapshot();
 
@@ -191,7 +163,7 @@ describe('Accordion', () => {
       <Grommet>
         <Accordion>
           <AccordionPanel
-            label='Panel 1'
+            label="Panel 1"
             onMouseOver={() => {}}
             onMouseOut={() => {}}
             onFocus={() => {}}
@@ -200,7 +172,7 @@ describe('Accordion', () => {
             Panel body 1
           </AccordionPanel>
           <AccordionPanel
-            label='Panel 2'
+            label="Panel 2"
             onMouseOver={() => {}}
             onMouseOut={() => {}}
             onFocus={() => {}}
@@ -209,7 +181,7 @@ describe('Accordion', () => {
             Panel body 2
           </AccordionPanel>
         </Accordion>
-      </Grommet>
+      </Grommet>,
     );
     expect(container.firstChild).toMatchSnapshot();