Bump prettier and add .prettierrc (oblador#89)

.eslintrc

@@ -18,20 +18,9 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "import/no-extraneous-dependencies": [0],
     "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
-    "arrow-parens": ["error", "as-needed"],
     "no-plusplus": [0],
     "no-await-in-loop": [0],
     "func-names": [0],
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "ignore",
-    }],
-    "prettier/prettier": ["error", {
-      "trailingComma": "es5",
-      "singleQuote": true
-    }]
+    "prettier/prettier": "error"
   }
 }

.prettierignore

@@ -0,0 +1,2 @@
+src/targets/chrome/fixtures
+storybook-static

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

book.json

@@ -2,7 +2,16 @@
   "gitbook": "3.2.2",
   "title": "Loki",
   "root": "docs",
-  "plugins": ["edit-link", "theme-gestalt", "-theme-default", "prism", "-highlight", "anchorjs", "github", "styles-sass-fix"],
+  "plugins": [
+    "edit-link",
+    "theme-gestalt",
+    "-theme-default",
+    "prism",
+    "-highlight",
+    "anchorjs",
+    "github",
+    "styles-sass-fix"
+  ],
   "pluginsConfig": {
     "edit-link": {
       "base": "https://github.com/oblador/loki/tree/master",

examples/react-native/App.js

@@ -5,33 +5,22 @@
  */
 
 import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 
 const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' +
-    'Cmd+D or shake for dev menu',
-  android: 'Double tap R on your keyboard to reload,\n' +
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
     'Shake or press menu button for dev menu',
 });
 
 export default class App extends Component<{}> {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit App.js
-        </Text>
-        <Text style={styles.instructions}>
-          {instructions}
-        </Text>
+        <Text style={styles.welcome}>Welcome to React Native!</Text>
+        <Text style={styles.instructions}>To get started, edit App.js</Text>
+        <Text style={styles.instructions}>{instructions}</Text>
       </View>
     );
   }

examples/react-native/__tests__/App.js

@@ -6,7 +6,5 @@ import App from '../App';
 import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  const tree = renderer.create(
-    <App />
-  );
+  const tree = renderer.create(<App />);
 });

examples/react-native/app.json

@@ -1,4 +1,4 @@
 {
   "name": "Loki",
   "displayName": "Loki"
-}
+}

examples/react-native/ios/Loki/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,38 +1,38 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "29x29",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "29x29",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "40x40",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "40x40",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "idiom": "iphone",
+      "size": "60x60",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "idiom": "iphone",
+      "size": "60x60",
+      "scale": "3x"
     }
   ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
-}
+}

examples/react-native/storybook/stories/CenterView/index.js

@@ -6,11 +6,7 @@ import { View } from 'react-native';
 import style from './style';
 
 export default function CenterView(props) {
-  return (
-    <View style={style.main}>
-      {props.children}
-    </View>
-  );
+  return <View style={style.main}>{props.children}</View>;
 }
 
 CenterView.defaultProps = {

examples/react-native/storybook/stories/DelayedComponent/index.js

@@ -31,10 +31,6 @@ export default class DelayedComponent extends Component {
   }
 
   render() {
-    return (
-      <Text>
-        {this.state.done ? 'Done!' : 'Loading…'}
-      </Text>
-    );
+    return <Text>{this.state.done ? 'Done!' : 'Loading…'}</Text>;
   }
 }

examples/react-native/storybook/stories/Welcome/index.js

@@ -30,16 +30,20 @@ export default class Welcome extends React.Component {
   render() {
     return (
       <View style={this.styles.wrapper}>
-        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.header}>
+          Welcome to React Native Storybook
+        </Text>
         <Text style={this.styles.content}>
-          This is a UI Component development environment for your React Native app. Here you can
-          display and interact with your UI components as stories. A story is a single state of one
-          or more UI components. You can have as many stories as you want. In other words a story is
-          like a visual test case.
+          This is a UI Component development environment for your React Native
+          app. Here you can display and interact with your UI components as
+          stories. A story is a single state of one or more UI components. You
+          can have as many stories as you want. In other words a story is like a
+          visual test case.
         </Text>
         <Text style={this.styles.content}>
-          We have added some stories inside the "storybook/stories" directory for examples. Try
-          editing the "storybook/stories/Welcome.js" file to edit this message.
+          We have added some stories inside the "storybook/stories" directory
+          for examples. Try editing the "storybook/stories/Welcome.js" file to
+          edit this message.
         </Text>
       </View>
     );

examples/react-native/storybook/stories/index.js

@@ -14,37 +14,39 @@ import Logo from './Logo';
 import ErrorThrowingComponent from './ErrorThrowingComponent';
 import DelayedComponent from './DelayedComponent';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module).add('to Storybook', () => (
+  <Welcome showApp={linkTo('Button')} />
+));
 
 storiesOf('Button', module)
   .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
-  .add('with text', () =>
+  .add('with text', () => (
     <Button onPress={action('clicked-text')}>
       <Text>Hello Button</Text>
     </Button>
-  )
-  .add('with some emoji', () =>
+  ))
+  .add('with some emoji', () => (
     <Button onPress={action('clicked-emoji')}>
       <Text>😀 😎 👍 💯</Text>
     </Button>
-  )
-  .lokiSkip('lokiSkip story', () =>
+  ))
+  .lokiSkip('lokiSkip story', () => (
     <Button onPress={action('clicked-emoji')}>
       <Text>I am skipped</Text>
     </Button>
-  )
-  .add.skip('add.skip story', () =>
+  ))
+  .add.skip('add.skip story', () => (
     <Button onPress={action('clicked-emoji')}>
       <Text>I am skipped</Text>
     </Button>
-  );
+  ));
 
 storiesOf('Asynchronous Render', module)
   .add('Logo without delay', () => <Logo />)
   .add('Logo with 1s delay', () => <Logo delay={1000} />)
-  .add.async('add.async() with 1s delay', ({ done }) =>
+  .add.async('add.async() with 1s delay', ({ done }) => (
     <DelayedComponent delay={1000} onDone={done} />
-  );
+  ));
 
 storiesOf('Error Handling', module)
   .add('with ErrorThrowingComponent', () => <ErrorThrowingComponent />)

examples/react/src/AnimatedComponent.js

@@ -26,7 +26,11 @@ const withAlternatingState = (WrappedComponent, interval = 1000) =>
   };
 
 export const CSSTransition = withAlternatingState(({ on }) => (
-  <div className={`AnimatedComponent CSSTransition ${on ? 'CSSTransition-on' : ''}`} />
+  <div
+    className={`AnimatedComponent CSSTransition ${
+      on ? 'CSSTransition-on' : ''
+    }`}
+  />
 ));
 
 export const CSSAnimation = () => (

examples/react/src/DelayedComponent.js

@@ -30,10 +30,6 @@ export default class DelayedComponent extends Component {
   }
 
   render() {
-    return (
-      <div>
-        {this.state.done ? 'Done!' : 'Loading…'}
-      </div>
-    );
+    return <div>{this.state.done ? 'Done!' : 'Loading…'}</div>;
   }
 }

examples/react/src/StackedElements.js

@@ -3,8 +3,6 @@ import React from 'react';
 const StackedElements = props => [
   <div>There should be another element below</div>,
   <div>Hi, I'm the other element</div>,
-  <div>
-    {props.footer}
-  </div>,
+  <div>{props.footer}</div>,
 ];
 export default StackedElements;

examples/react/stories/index.js

@@ -11,17 +11,27 @@ import DelayedComponent from '../src/DelayedComponent';
 import CursiveText from '../src/CursiveText';
 import StackedElements from '../src/StackedElements';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module).add('to Storybook', () => (
+  <Welcome showApp={linkTo('Button')} />
+));
 
 storiesOf('Text', module).add('with external font', () => (
   <CursiveText>Hello CursiveText</CursiveText>
 ));
 
 storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
-  .lokiSkip('lokiSkip story', () => <Button onClick={action('clicked')}>I am skipped</Button>)
-  .add.skip('add.skip story', () => <Button onClick={action('clicked')}>I am skipped</Button>);
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ))
+  .lokiSkip('lokiSkip story', () => (
+    <Button onClick={action('clicked')}>I am skipped</Button>
+  ))
+  .add.skip('add.skip story', () => (
+    <Button onClick={action('clicked')}>I am skipped</Button>
+  ));
 
 storiesOf('Asynchronous render', module)
   .add('Logo without delay', () => <Logo />)
@@ -40,8 +50,8 @@ storiesOf('Animation', module)
 
 storiesOf('Multiple elements', module)
   .add('Stacked elements', () => <StackedElements />)
-  .add('Stacked elements with a wrapper', () =>
+  .add('Stacked elements with a wrapper', () => (
     <div className="wrapper" style={{ border: '10px solid red' }}>
       <StackedElements footer="This works if not red border appears" />
     </div>
-);
+  ));

package.json

@@ -19,7 +19,7 @@
     "serve-docs": "gitbook serve",
     "build-docs": "(gitbook install || (npm rebuild node-sass && gitbook install)) && gitbook build",
     "publish-docs": "./bin/publish-docs",
-    "format": "npm run lint -- --fix",
+    "format": "prettier '{,src/**/,examples/**/}*.{js,json}' --write",
     "lint": "eslint *.js src",
     "test": "jest"
   },
@@ -81,7 +81,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jest": "^20.0.3",
     "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.1.0",
     "gitbook-cli": "^2.3.2",
     "gitbook-plugin-anchorjs": "^1.1.1",
@@ -90,7 +90,7 @@
     "gitbook-plugin-prism": "^2.3.0",
     "gitbook-plugin-theme-gestalt": "^1.0.2",
     "jest": "^20.0.4",
-    "prettier": "^1.5.3"
+    "prettier": "^1.13.7"
   },
   "jest": {
     "testPathIgnorePatterns": [

src/build-command.js

@@ -14,7 +14,10 @@ const stringifyArg = args => arg => {
 };
 
 const argObjectToString = args =>
-  Object.keys(args).filter(isTruthy(args)).map(stringifyArg(args)).join(' ');
+  Object.keys(args)
+    .filter(isTruthy(args))
+    .map(stringifyArg(args))
+    .join(' ');
 
 function buildCommand(command, argObject) {
   const args = argObjectToString(argObject);

src/commands/test/run-tests.js

@@ -18,7 +18,7 @@ const testStory = require('./test-story');
 async function placeGitignore(pathsToIgnore) {
   const parentDir = path.dirname(pathsToIgnore[0]);
   const gitignorePath = `${parentDir}/.gitignore`;
-  if (!await fs.pathExists(gitignorePath)) {
+  if (!(await fs.pathExists(gitignorePath))) {
     const relativeToParent = p => path.relative(parentDir, p);
     const isDecendant = p => p.indexOf('..') !== 0;
     const gitignore = pathsToIgnore