diff --git a/.eslintrc b/.eslintrc index 442d8bc2..342c2b92 100644 --- a/.eslintrc +++ b/.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" } } diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..8990f952 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +src/targets/chrome/fixtures +storybook-static diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..c1a6f667 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/book.json b/book.json index 147e09a1..cd3b5f0e 100644 --- a/book.json +++ b/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", diff --git a/examples/react-native/App.js b/examples/react-native/App.js index d4ae45c1..4a8d8c63 100644 --- a/examples/react-native/App.js +++ b/examples/react-native/App.js @@ -5,17 +5,12 @@ */ 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', }); @@ -23,15 +18,9 @@ export default class App extends Component<{}> { render() { return ( - - Welcome to React Native! - - - To get started, edit App.js - - - {instructions} - + Welcome to React Native! + To get started, edit App.js + {instructions} ); } diff --git a/examples/react-native/__tests__/App.js b/examples/react-native/__tests__/App.js index d0b9ee31..5ead013c 100644 --- a/examples/react-native/__tests__/App.js +++ b/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( - - ); + const tree = renderer.create(); }); diff --git a/examples/react-native/app.json b/examples/react-native/app.json index 8df2fdca..1f2b3469 100644 --- a/examples/react-native/app.json +++ b/examples/react-native/app.json @@ -1,4 +1,4 @@ { "name": "Loki", "displayName": "Loki" -} \ No newline at end of file +} diff --git a/examples/react-native/ios/Loki/Images.xcassets/AppIcon.appiconset/Contents.json b/examples/react-native/ios/Loki/Images.xcassets/AppIcon.appiconset/Contents.json index 118c98f7..48e64ae8 100644 --- a/examples/react-native/ios/Loki/Images.xcassets/AppIcon.appiconset/Contents.json +++ b/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" } -} \ No newline at end of file +} diff --git a/examples/react-native/storybook/stories/CenterView/index.js b/examples/react-native/storybook/stories/CenterView/index.js index dcf34c73..0fce4a5a 100644 --- a/examples/react-native/storybook/stories/CenterView/index.js +++ b/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 ( - - {props.children} - - ); + return {props.children}; } CenterView.defaultProps = { diff --git a/examples/react-native/storybook/stories/DelayedComponent/index.js b/examples/react-native/storybook/stories/DelayedComponent/index.js index f92a5ba5..3c9218a5 100644 --- a/examples/react-native/storybook/stories/DelayedComponent/index.js +++ b/examples/react-native/storybook/stories/DelayedComponent/index.js @@ -31,10 +31,6 @@ export default class DelayedComponent extends Component { } render() { - return ( - - {this.state.done ? 'Done!' : 'Loading…'} - - ); + return {this.state.done ? 'Done!' : 'Loading…'}; } } diff --git a/examples/react-native/storybook/stories/Welcome/index.js b/examples/react-native/storybook/stories/Welcome/index.js index f01c9373..edd827a4 100644 --- a/examples/react-native/storybook/stories/Welcome/index.js +++ b/examples/react-native/storybook/stories/Welcome/index.js @@ -30,16 +30,20 @@ export default class Welcome extends React.Component { render() { return ( - Welcome to React Native Storybook + + Welcome to React Native Storybook + - 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. - 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. ); diff --git a/examples/react-native/storybook/stories/index.js b/examples/react-native/storybook/stories/index.js index 2da060e4..7b642b99 100644 --- a/examples/react-native/storybook/stories/index.js +++ b/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', () => ); +storiesOf('Welcome', module).add('to Storybook', () => ( + +)); storiesOf('Button', module) .addDecorator(getStory => {getStory()}) - .add('with text', () => + .add('with text', () => ( - ) - .add('with some emoji', () => + )) + .add('with some emoji', () => ( - ) - .lokiSkip('lokiSkip story', () => + )) + .lokiSkip('lokiSkip story', () => ( - ) - .add.skip('add.skip story', () => + )) + .add.skip('add.skip story', () => ( - ); + )); storiesOf('Asynchronous Render', module) .add('Logo without delay', () => ) .add('Logo with 1s delay', () => ) - .add.async('add.async() with 1s delay', ({ done }) => + .add.async('add.async() with 1s delay', ({ done }) => ( - ); + )); storiesOf('Error Handling', module) .add('with ErrorThrowingComponent', () => ) diff --git a/examples/react/src/AnimatedComponent.js b/examples/react/src/AnimatedComponent.js index 22ad5398..53c28552 100644 --- a/examples/react/src/AnimatedComponent.js +++ b/examples/react/src/AnimatedComponent.js @@ -26,7 +26,11 @@ const withAlternatingState = (WrappedComponent, interval = 1000) => }; export const CSSTransition = withAlternatingState(({ on }) => ( -
+
)); export const CSSAnimation = () => ( diff --git a/examples/react/src/DelayedComponent.js b/examples/react/src/DelayedComponent.js index 6e0feea2..d5061c38 100644 --- a/examples/react/src/DelayedComponent.js +++ b/examples/react/src/DelayedComponent.js @@ -30,10 +30,6 @@ export default class DelayedComponent extends Component { } render() { - return ( -
- {this.state.done ? 'Done!' : 'Loading…'} -
- ); + return
{this.state.done ? 'Done!' : 'Loading…'}
; } } diff --git a/examples/react/src/StackedElements.js b/examples/react/src/StackedElements.js index 51698fdd..879d7940 100644 --- a/examples/react/src/StackedElements.js +++ b/examples/react/src/StackedElements.js @@ -3,8 +3,6 @@ import React from 'react'; const StackedElements = props => [
There should be another element below
,
Hi, I'm the other element
, -
- {props.footer} -
, +
{props.footer}
, ]; export default StackedElements; diff --git a/examples/react/stories/index.js b/examples/react/stories/index.js index 365605ff..c7430b82 100644 --- a/examples/react/stories/index.js +++ b/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', () => ); +storiesOf('Welcome', module).add('to Storybook', () => ( + +)); storiesOf('Text', module).add('with external font', () => ( Hello CursiveText )); storiesOf('Button', module) - .add('with text', () => ) - .add('with some emoji', () => ) - .lokiSkip('lokiSkip story', () => ) - .add.skip('add.skip story', () => ); + .add('with text', () => ( + + )) + .add('with some emoji', () => ( + + )) + .lokiSkip('lokiSkip story', () => ( + + )) + .add.skip('add.skip story', () => ( + + )); storiesOf('Asynchronous render', module) .add('Logo without delay', () => ) @@ -40,8 +50,8 @@ storiesOf('Animation', module) storiesOf('Multiple elements', module) .add('Stacked elements', () => ) - .add('Stacked elements with a wrapper', () => + .add('Stacked elements with a wrapper', () => (
-); + )); diff --git a/package.json b/package.json index 5c6e46d0..3e3a9803 100644 --- a/package.json +++ b/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": [ diff --git a/src/build-command.js b/src/build-command.js index 2cf04d43..dccfc74f 100644 --- a/src/build-command.js +++ b/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); diff --git a/src/commands/test/run-tests.js b/src/commands/test/run-tests.js index 08727789..d7c4d0b2 100644 --- a/src/commands/test/run-tests.js +++ b/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 diff --git a/src/errors.js b/src/errors.js index 5967fd66..36d6f30c 100644 --- a/src/errors.js +++ b/src/errors.js @@ -33,9 +33,9 @@ function FetchingURLsError(failedURLs) { Error.captureStackTrace(this, this.constructor); this.name = this.constructor.name; const noun = failedURLs.length === 1 ? 'request' : 'requests'; - const message = `${failedURLs.length} ${noun} failed to load; ${failedURLs.join( - ', ' - )}`; + const message = `${ + failedURLs.length + } ${noun} failed to load; ${failedURLs.join(', ')}`; this.message = message; this.failedURLs = failedURLs; } diff --git a/src/targets/chrome/create-chrome-target.js b/src/targets/chrome/create-chrome-target.js index 1ae5c8fc..d16870b8 100644 --- a/src/targets/chrome/create-chrome-target.js +++ b/src/targets/chrome/create-chrome-target.js @@ -162,23 +162,22 @@ function createChromeTarget( }; client.captureScreenshot = withRetries(options.chromeRetries)( - withTimeout( - CAPTURING_SCREENSHOT_TIMEOUT, - 'captureScreenshot' - )(async (selector = 'body') => { - debug(`Getting viewport position of "${selector}"`); - const position = await getPositionInViewport(selector); + withTimeout(CAPTURING_SCREENSHOT_TIMEOUT, 'captureScreenshot')( + async (selector = 'body') => { + debug(`Getting viewport position of "${selector}"`); + const position = await getPositionInViewport(selector); - debug('Capturing screenshot'); - const clip = Object.assign({ scale: 1 }, position); - const screenshot = await Page.captureScreenshot({ - format: 'png', - clip, - }); - const buffer = new Buffer(screenshot.data, 'base64'); + debug('Capturing screenshot'); + const clip = Object.assign({ scale: 1 }, position); + const screenshot = await Page.captureScreenshot({ + format: 'png', + clip, + }); + const buffer = new Buffer(screenshot.data, 'base64'); - return buffer; - }) + return buffer; + } + ) ); return client; diff --git a/src/targets/chrome/presets.json b/src/targets/chrome/presets.json index 6b0d10b9..2dfd5a49 100644 --- a/src/targets/chrome/presets.json +++ b/src/targets/chrome/presets.json @@ -1,6 +1,7 @@ { "Retina Macbook Pro 15": { - "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36", + "userAgent": + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36", "width": 1440, "height": 900, "deviceScaleFactor": 2, @@ -8,7 +9,8 @@ "fitWindow": false }, "iPhone 7": { - "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Version/10.0 Mobile/14D27 Safari/602.1", + "userAgent": + "Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Version/10.0 Mobile/14D27 Safari/602.1", "width": 375, "height": 667, "deviceScaleFactor": 2, @@ -16,7 +18,8 @@ "fitWindow": false }, "iPhone 5": { - "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3", + "userAgent": + "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3", "width": 320, "height": 568, "deviceScaleFactor": 2, @@ -24,7 +27,8 @@ "fitWindow": false }, "Google Pixel": { - "userAgent": "Mozilla/5.0 (Linux; Android 7.1.1; Pixel Build/NMF26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36", + "userAgent": + "Mozilla/5.0 (Linux; Android 7.1.1; Pixel Build/NMF26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36", "width": 360, "height": 640, "deviceScaleFactor": 2, diff --git a/src/targets/decorate-storybook.js b/src/targets/decorate-storybook.js index 8809ce8b..8180feaa 100644 --- a/src/targets/decorate-storybook.js +++ b/src/targets/decorate-storybook.js @@ -1,4 +1,4 @@ -/* eslint object-shorthand: 0, prefer-arrow-callback: 0, no-var: 0 */ +/* eslint object-shorthand: 0, prefer-arrow-callback: 0, no-var: 0, no-console: 0 */ // Diverge from regular rules here to not mess with UglifyJS const readyStateManager = require('./ready-state-manager'); diff --git a/yarn.lock b/yarn.lock index a47efd27..f93a2988 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1334,9 +1334,9 @@ eslint-plugin-jsx-a11y@^5.1.1: emoji-regex "^6.1.0" jsx-ast-utils "^1.4.0" -eslint-plugin-prettier@^2.1.2: - version "2.6.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.0.tgz#33e4e228bdb06142d03c560ce04ec23f6c767dd7" +eslint-plugin-prettier@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.2.tgz#71998c60aedfa2141f7bfcbf9d1c459bf98b4fad" dependencies: fast-diff "^1.1.1" jest-docblock "^21.0.0" @@ -4013,9 +4013,9 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -prettier@^1.5.3: - version "1.5.3" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.3.tgz#59dadc683345ec6b88f88b94ed4ae7e1da394bfe" +prettier@^1.13.7: + version "1.13.7" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.7.tgz#850f3b8af784a49a6ea2d2eaa7ed1428a34b7281" pretty-format@^20.0.3: version "20.0.3"