add prettier (#49)

Author: cweiss-stripe

.eslintrc.yml

@@ -2,6 +2,10 @@
 extends:
   - stripe
   - plugin:flowtype/recommended
+  # overwrite any rules that may conflict with prettier
+  - "prettier"
+  - "prettier/flowtype"
+  - "prettier/react"
 parser: 'babel-eslint'
 plugins:
   - flowtype
@@ -13,7 +17,9 @@ rules:
   no-duplicate-imports: 0 # doesn't support flow imports.
   no-console: 1 # disable this while undergoing lots of development.
   func-style: 2
-  arrow-parens: 2
+  arrow-parens:
+    - 2
+    - 'as-needed'
   consistent-return: 2
   prefer-arrow-callback:
     - 2

.travis.yml

@@ -5,4 +5,5 @@ script:
   - npm run lint
   - npm run flow
   - npm run test
+  - npm run prettier-list-different
 cache: yarn

README.md

@@ -271,6 +271,10 @@ Build:
 
     yarn run build
 
+We use We use [prettier](https://github.com/prettier/prettier) for code formatting:
+
+    yarn run prettier
+
 Checks:
 
     yarn run lint

demo/index.js

@@ -16,7 +16,7 @@ import {
   injectStripe,
 } from '../src/index';
 
-const handleChange = (change) => {
+const handleChange = change => {
   console.log('[change]', change);
 };
 const handleFocus = () => {
@@ -52,11 +52,11 @@ class _CardForm extends React.Component {
   props: {
     fontSize: string,
     stripe: StripeProps,
-  }
-  handleSubmit = (ev) => {
+  };
+  handleSubmit = ev => {
     ev.preventDefault();
-    this.props.stripe.createToken().then((payload) => console.log(payload));
-  }
+    this.props.stripe.createToken().then(payload => console.log(payload));
+  };
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
@@ -81,11 +81,11 @@ class _SplitForm extends React.Component {
   props: {
     fontSize: string,
     stripe: StripeProps,
-  }
-  handleSubmit = (ev) => {
+  };
+  handleSubmit = ev => {
     ev.preventDefault();
-    this.props.stripe.createToken().then((payload) => console.log(payload));
-  }
+    this.props.stripe.createToken().then(payload => console.log(payload));
+  };
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
@@ -145,14 +145,17 @@ class Checkout extends React.Component {
     window.addEventListener('resize', () => {
       if (window.innerWidth < 450 && this.state.elementFontSize !== '14px') {
         this.setState({elementFontSize: '14px'});
-      } else if (window.innerWidth >= 450 && this.state.elementFontSize !== '18px') {
+      } else if (
+        window.innerWidth >= 450 &&
+        this.state.elementFontSize !== '18px'
+      ) {
         this.setState({elementFontSize: '18px'});
       }
     });
   }
   state: {
     elementFontSize: string,
-  }
+  };
 
   render() {
     const {elementFontSize} = this.state;

package.json

@@ -15,6 +15,8 @@
     "flow": "flow",
     "build": "yarn run lint && yarn run flow && yarn run build:commonjs && yarn run build:es && yarn run build:umd && yarn run build:umd:min",
     "clean": "rimraf lib dist es",
+    "prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --parser flow src/**/*.js demo/**/*.js --write",
+    "prettier-list-different": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --parser flow src/**/*.js demo/**/*.js --list-different",
     "prepublish": "yarn run clean && yarn run build",
     "demo": "webpack-dev-server --content-base dist"
   },
@@ -47,12 +49,14 @@
     "cross-env": "^4.0.0",
     "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
+    "eslint-config-prettier": "^2.3.0",
     "eslint-config-stripe": "^1.0.10",
     "eslint-plugin-flowtype": "^2.32.1",
     "eslint-plugin-jest": "^19.0.1",
     "flow-bin": "^0.44.0",
     "html-webpack-plugin": "^2.28.0",
     "jest": "^19.0.2",
+    "prettier": "^1.5.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",

src/components/Element.js

@@ -14,94 +14,96 @@ type Props = {
 
 const noop = () => {};
 
-const Element = (type: string, hocOptions: {sourceType?: string} = {}) => class extends React.Component {
-  static propTypes = {
-    elementRef: PropTypes.func,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    onFocus: PropTypes.func,
-    onReady: PropTypes.func,
-  }
-  static defaultProps = {
-    elementRef: noop,
-    onChange: noop,
-    onBlur: noop,
-    onFocus: noop,
-    onReady: noop,
-  }
+const Element = (type: string, hocOptions: {sourceType?: string} = {}) =>
+  class extends React.Component {
+    static propTypes = {
+      elementRef: PropTypes.func,
+      onChange: PropTypes.func,
+      onBlur: PropTypes.func,
+      onFocus: PropTypes.func,
+      onReady: PropTypes.func,
+    };
+    static defaultProps = {
+      elementRef: noop,
+      onChange: noop,
+      onBlur: noop,
+      onFocus: noop,
+      onReady: noop,
+    };
 
-  static contextTypes = {
-    elements: PropTypes.object.isRequired,
-    registerElement: PropTypes.func.isRequired,
-    unregisterElement: PropTypes.func.isRequired,
-  }
+    static contextTypes = {
+      elements: PropTypes.object.isRequired,
+      registerElement: PropTypes.func.isRequired,
+      unregisterElement: PropTypes.func.isRequired,
+    };
 
-  constructor(props: Props, context: ElementContext) {
-    super(props, context);
+    constructor(props: Props, context: ElementContext) {
+      super(props, context);
 
-    const options = this._extractOptions(this.props);
-    this._element = this.context.elements.create(type, options);
-    this._setupEventListeners();
-    this._options = options;
-  }
+      const options = this._extractOptions(this.props);
+      this._element = this.context.elements.create(type, options);
+      this._setupEventListeners();
+      this._options = options;
+    }
 
-  componentDidMount() {
-    this._element.mount(this._ref);
-    if (hocOptions.sourceType) {
-      this.context.registerElement(hocOptions.sourceType, this._element);
+    componentDidMount() {
+      this._element.mount(this._ref);
+      if (hocOptions.sourceType) {
+        this.context.registerElement(hocOptions.sourceType, this._element);
+      }
     }
-  }
-  componentWillReceiveProps(nextProps: Props) {
-    const options = this._extractOptions(nextProps);
-    if (Object.keys(options).length !== 0 && !shallowEqual(options, this._options)) {
-      this._options = options;
-      this._element.update(options);
+    componentWillReceiveProps(nextProps: Props) {
+      const options = this._extractOptions(nextProps);
+      if (
+        Object.keys(options).length !== 0 &&
+        !shallowEqual(options, this._options)
+      ) {
+        this._options = options;
+        this._element.update(options);
+      }
+    }
+    componentWillUnmount() {
+      this._element.destroy();
+      this.context.unregisterElement(this._element);
     }
-  }
-  componentWillUnmount() {
-    this._element.destroy();
-    this.context.unregisterElement(this._element);
-  }
-  props: Props
-  context: ElementContext
-  _element: ElementShape
-  _ref: ?HTMLElement
-  _options: Object
+    props: Props;
+    context: ElementContext;
+    _element: ElementShape;
+    _ref: ?HTMLElement;
+    _options: Object;
 
-  _setupEventListeners() {
-    this._element.on('ready', () => {
-      this.props.elementRef(this._element);
-      this.props.onReady();
-    });
+    _setupEventListeners() {
+      this._element.on('ready', () => {
+        this.props.elementRef(this._element);
+        this.props.onReady();
+      });
 
-    this._element.on('change', (change) => {
-      this.props.onChange(change);
-    });
+      this._element.on('change', change => {
+        this.props.onChange(change);
+      });
 
-    this._element.on('blur', (...args) => this.props.onBlur(...args));
-    this._element.on('focus', (...args) => this.props.onFocus(...args));
-  }
+      this._element.on('blur', (...args) => this.props.onBlur(...args));
+      this._element.on('focus', (...args) => this.props.onFocus(...args));
+    }
 
-  _extractOptions(props: Props): Object {
-    const {
-      elementRef,
-      onChange,
-      onFocus,
-      onBlur,
-      onReady,
-      ...options
-    } = props;
-    return options;
-  }
+    _extractOptions(props: Props): Object {
+      const {
+        elementRef,
+        onChange,
+        onFocus,
+        onBlur,
+        onReady,
+        ...options
+      } = props;
+      return options;
+    }
 
-  handleRef = (ref: HTMLElement) => {
-    this._ref = ref;
-  }
-  render() {
-    return (
-      <span ref={this.handleRef} />
-    );
-  }
-};
+    handleRef = (ref: HTMLElement) => {
+      this._ref = ref;
+    };
+    render() {
+      return <span ref={this.handleRef} />;
+    }
+  };
 
 export default Element;

src/components/Element.test.js

@@ -27,10 +27,7 @@ describe('Element', () => {
 
   it('should call the right hooks for a source Element', () => {
     const SourceElement = Element('source', {sourceType: 'foobar'});
-    const element = mount(
-      <SourceElement onChange={jest.fn()} />,
-      {context}
-    );
+    const element = mount(<SourceElement onChange={jest.fn()} />, {context});
 
     expect(context.registerElement).toHaveBeenCalledTimes(1);
     expect(context.registerElement).toHaveBeenCalledWith('foobar', elementMock);
@@ -43,10 +40,7 @@ describe('Element', () => {
 
   it('should call the right hooks for a non-source Element', () => {
     const SourceElement = Element('source');
-    const element = mount(
-      <SourceElement onChange={jest.fn()} />,
-      {context}
-    );
+    const element = mount(<SourceElement onChange={jest.fn()} />, {context});
 
     expect(context.registerElement).toHaveBeenCalledTimes(0);
 
@@ -74,6 +68,8 @@ describe('Element', () => {
 
     element.setProps({style: {base: {fontSize: '20px'}}, onChange: jest.fn()});
     expect(elementMock.update).toHaveBeenCalledTimes(1);
-    expect(elementMock.update).toHaveBeenCalledWith({style: {base: {fontSize: '20px'}}});
+    expect(elementMock.update).toHaveBeenCalledWith({
+      style: {base: {fontSize: '20px'}},
+    });
   });
 });

src/components/Elements.js

@@ -22,14 +22,16 @@ export default class Elements extends React.Component {
     elements: PropTypes.object.isRequired,
     registerElement: PropTypes.func.isRequired,
     unregisterElement: PropTypes.func.isRequired,
-    registeredElements: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.string.isRequired,
-      element: PropTypes.object.isRequired,
-    })).isRequired,
-  }
+    registeredElements: PropTypes.arrayOf(
+      PropTypes.shape({
+        type: PropTypes.string.isRequired,
+        element: PropTypes.object.isRequired,
+      })
+    ).isRequired,
+  };
   static contextTypes = {
     stripe: PropTypes.object.isRequired,
-  }
+  };
 
   constructor(props: Props, context: StripeContext) {
     super(props, context);
@@ -41,7 +43,7 @@ export default class Elements extends React.Component {
       registeredElements: [],
     };
   }
-  state: FormContext
+  state: FormContext;
 
   getChildContext(): ElementsContext {
     return {
@@ -51,21 +53,23 @@ export default class Elements extends React.Component {
       registeredElements: this.state.registeredElements,
     };
   }
-  props: Props
-  context: StripeContext
-  _elements: ElementsShape
+  props: Props;
+  context: StripeContext;
+  _elements: ElementsShape;
 
   handleRegisterElement = (type: string, element: Object) => {
-    this.setState((prevState) => ({
+    this.setState(prevState => ({
       registeredElements: [...prevState.registeredElements, {type, element}],
     }));
-  }
+  };
 
   handleUnregisterElement = (el: Object) => {
-    this.setState((prevState) => ({
-      registeredElements: prevState.registeredElements.filter(({element}) => element !== el),
+    this.setState(prevState => ({
+      registeredElements: prevState.registeredElements.filter(
+        ({element}) => element !== el
+      ),
     }));
-  }
+  };
 
   render() {
     return React.Children.only(this.props.children);