Upgrade prettier and switch to xo (segmentio#98)

* Upgrade prettier and switch to xo

* Tweak

.github/CONTRIBUTING.md

@@ -50,7 +50,6 @@ $ yarn create-package:component ComponentName
 
 Make sure to write stories to document your component.
 
-
 ## Submit a PR when you are ready
 
 Finally submit a PR with your new feature or component.

.github/ISSUE_TEMPLATE.md

@@ -7,7 +7,7 @@ Sadly, if we don't receive enough information, or the issue/feature request does
 align well with our [ROADMAP.md](./ROADMAP.md), we might respectfully
 thank you for your time, and close the issue.
 
-*Bug fixes and documentation fixes are welcome.*
+_Bug fixes and documentation fixes are welcome._
 
 ## In the case of a bug report 🐞
 

.storybook/config.js

@@ -64,7 +64,7 @@ setOptions({
  * id to select an addon panel
  * @type {String}
  */
- selectedAddonPanel: undefined, // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
+ selectedAddonPanel: undefined // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
 })
 
 function loadStories() {

.storybook/requireStories.js

@@ -20,8 +20,8 @@ module.exports.pitch = function pitch() {
  JSON.stringify(
  storybookFiles.map(x => x.substr(x.indexOf('evergreen/packages'))),
  null,
- 2,
- ),
+ 2
+ )
  )
 
  console.log(`Loading ${storybookFiles.length} storybook files`)

.storybook/webpack.config.es6.js

@@ -6,16 +6,16 @@ module.exports = storybookBaseConfig => {
  ...storybookBaseConfig.module.rules,
  {
  test: /\.(png\?.*|jpg\?.*|jpg|png)$/,
- loader: 'url-loader',
+ loader: 'url-loader'
  },
  {
  test: /\.(blob)/,
- loader: 'file-loader',
+ loader: 'file-loader'
  },
  {
  test: /\.(json)/,
- loader: 'json-loader',
- },
+ loader: 'json-loader'
+ }
  ]
 
  // Return the altered config
@@ -24,22 +24,22 @@ module.exports = storybookBaseConfig => {
  plugins: [
  ...storybookBaseConfig.plugins,
  new webpack.LoaderOptionsPlugin({
- debug: true,
- }),
+ debug: true
+ })
  ],
  resolve: {
  ...storybookBaseConfig.resolve,
  alias: {
  react: path.join(__dirname, '../node_modules/react/index.js'),
- 'react-dom': path.join(__dirname, '../node_modules/react-dom/index.js'),
+ 'react-dom': path.join(__dirname, '../node_modules/react-dom/index.js')
  },
  // Unsure if this is the rigth way of doing it, but to make stories work
  // with unpublished/local packages this checks in packages before node_modules
- modules: [path.join(__dirname, '../packages'), 'node_modules'],
+ modules: [path.join(__dirname, '../packages'), 'node_modules']
  },
  module: {
  ...storybookBaseConfig.module,
- rules,
- },
+ rules
+ }
  }
 }

.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 // Storybook config does not work with ES6 just yet.
 // This is a workaround.
 // https://github.com/storybooks/storybook/issues/155
-require('babel-register');
-module.exports = require('./webpack.config.es6.js');
+require('babel-register')
+module.exports = require('./webpack.config.es6.js')

CHANGELOG.md

@@ -25,7 +25,7 @@ The packages that have been implemented since September 4 are:
 I haven't pushed it live yet with Lerna onto npm.
 Hoping to do this after I publish some Buttons first.
 
-* [x] Create a issue outline ([#8](https://github.com/segmentio/evergreen/issues/8))  , and implement `evergreen-buttons`
+* [x] Create a issue outline ([#8](https://github.com/segmentio/evergreen/issues/8)) , and implement `evergreen-buttons`
 
 ### August 30, 2017, Building out Layers
 

LICENSE.md

@@ -13,7 +13,7 @@ WWWWWW||WWWWWW
  (__|__|(__|__|
 ```
 
-Copyright (c) 2017 Segment.io, Inc. <[email protected]>
+Copyright (c) 2017 Segment.io, Inc. <mailto:[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -18,7 +18,7 @@ only prepare for it.** Instead of creating fixed configurations that work today,
 
 **Evergreen is built on the belief that things should work out of the box with smart defaults, but also offer full control when needed.** For example, Evergreen uses CSS-in-JS and builds on top of the Box component in [ui-box](https://github.com/segmentio/ui-box).
 
-**Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience.** We prioritize documentation and all the tools for a  solid developer experience. We advocate respect and inclusivity in our writings and interactions.
+**Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience.** We prioritize documentation and all the tools for a solid developer experience. We advocate respect and inclusivity in our writings and interactions.
 
 ## Install and use components 🔓
 
@@ -42,7 +42,8 @@ import { Button } from 'evergreen-buttons'
 
 ReactDOM.render(
  <Button>I am using 🌲Evergreen!</Button>,
- document.getElementById('root'))
+ document.getElementById('root')
+)
 ```
 
 ## A list of all packages 📦
@@ -53,39 +54,38 @@ Some packages export just a Javascript object.
 
 Please see the [ROADMAP.md](./ROADMAP.md) to better understand priorities.
 
-| Package | Status | Exports |
-|------------------------------------|--------------------|----------------------------|
-| `evergreen-colors` | ✅ Good | Color system object |
-| `evergreen-color-utils` | ✅ Good | Color utils |
-| `evergreen-shared-styles` | ✅ Lacking | Shared styles utils |
-| `evergreen-typography` | ✅ OK | typography components |
-| `evergreen-layers` | ✅ Good | Pane, Card and styling |
-| `evergreen-buttons` | ✅ Good | Button components |
-| `evergreen-icons` | ✅ Lacking | Icon components |
-| `evergreen-autocomplete` | ✅ Good | Autocomplete components |
-| `evergreen-combobox` | ✅ Good | Combobox components |
-| `evergreen-badges` | ✅ Good | Badge components |
-| `evergreen-select` | ✅ Good | Select component |
-| `evergreen-popover` | ✅ Good | Popover component |
-| `evergreen-portal` | ✅ Good | Portal component |
-| `evergreen-text-input` | ✅ Good | TextInput component |
-| `evergreen-textarea` | ✅ Good | Textarea component |
-| `evergreen-checkbox` | ✅ Good | Checkbox component |
-| `evergreen-tabs` | ✅ Good | Tabs component |
-| `evergreen-avatar` | ✅ Good | Avatar component |
-| `evergreen-tooltip` | ✅ Good | Tooltip component |
-| `evergreen-image` | ✅ Good | Image component |
-| `evergreen-segmented-control` | ✅ Good | SegmentedControl component |
-| `evergreen-spinner` | ✅ Good | Loading Spinner component |
-| `evergreen-search-input` | ✅ Good | SearchInput component |
-| `evergreen-table` | ✅ Good | table component |
-| `evergreen-side-sheet` | ✅ Good | SideSheet component |
-| `evergreen-radio` | ✅ Good | Radio component |
-| `evergreen-dialog` | ✅ Good | Dialog component |
-| `evergreen-corner-dialog` | ✅ Good | CornerDialog component |
-| `evergreen-alert` | ✅ Good | Alert component |
-| `evergreen-code-block` | Needs Planning | CodeBlock component |
-
+| Package | Status | Exports |
+| ----------------------------- | -------------- | -------------------------- |
+| `evergreen-colors` | ✅ Good | Color system object |
+| `evergreen-color-utils` | ✅ Good | Color utils |
+| `evergreen-shared-styles` | ✅ Lacking | Shared styles utils |
+| `evergreen-typography` | ✅ OK | typography components |
+| `evergreen-layers` | ✅ Good | Pane, Card and styling |
+| `evergreen-buttons` | ✅ Good | Button components |
+| `evergreen-icons` | ✅ Lacking | Icon components |
+| `evergreen-autocomplete` | ✅ Good | Autocomplete components |
+| `evergreen-combobox` | ✅ Good | Combobox components |
+| `evergreen-badges` | ✅ Good | Badge components |
+| `evergreen-select` | ✅ Good | Select component |
+| `evergreen-popover` | ✅ Good | Popover component |
+| `evergreen-portal` | ✅ Good | Portal component |
+| `evergreen-text-input` | ✅ Good | TextInput component |
+| `evergreen-textarea` | ✅ Good | Textarea component |
+| `evergreen-checkbox` | ✅ Good | Checkbox component |
+| `evergreen-tabs` | ✅ Good | Tabs component |
+| `evergreen-avatar` | ✅ Good | Avatar component |
+| `evergreen-tooltip` | ✅ Good | Tooltip component |
+| `evergreen-image` | ✅ Good | Image component |
+| `evergreen-segmented-control` | ✅ Good | SegmentedControl component |
+| `evergreen-spinner` | ✅ Good | Loading Spinner component |
+| `evergreen-search-input` | ✅ Good | SearchInput component |
+| `evergreen-table` | ✅ Good | table component |
+| `evergreen-side-sheet` | ✅ Good | SideSheet component |
+| `evergreen-radio` | ✅ Good | Radio component |
+| `evergreen-dialog` | ✅ Good | Dialog component |
+| `evergreen-corner-dialog` | ✅ Good | CornerDialog component |
+| `evergreen-alert` | ✅ Good | Alert component |
+| `evergreen-code-block` | Needs Planning | CodeBlock component |
 
 ## Running the project 🏃🏻🏃🏾‍
 
@@ -147,7 +147,7 @@ all files in your packages directory that match `*.stories.js`.
 ### `yarn deploy-storybook`
 
 This will build a static version of the storybook and deploys it onto the `gh-pages`
- (GitHub pages) branch. This will make it available on [https://segmentio.github.io/evergreen](https://segmentio.github.io/evergreen).
+(GitHub pages) branch. This will make it available on [https://segmentio.github.io/evergreen](https://segmentio.github.io/evergreen).
 
 There still needs to be some work done to make this happen with Circle CI (continuous integration).
 
@@ -171,7 +171,6 @@ The following file tree will be generated:
 └── package.json
 ```
 
-
 ### `yarn create-package:components`
 
 This command scaffolds a package with React component(s) boilerplate.
@@ -210,9 +209,9 @@ Remove all untracked files and removes all node_modules (using `rm -rf`).
 
 This repo uses a central babel configuration in `.babelrc` with:
 
-- `babel-preset-es2015`
-- `babel-preset-react`
-- `babel-preset-stage-0`
+* `babel-preset-es2015`
+* `babel-preset-react`
+* `babel-preset-stage-0`
 
 ## Creating new scripts/tools
 
@@ -254,7 +253,7 @@ WWWWWW||WWWWWW
  (__|__|(__|__|
 ```
 
-Copyright (c) 2017 Segment.io, Inc. <[email protected]>
+Copyright (c) 2017 Segment.io, Inc. <mailto:[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

docs/gatsby-node.js

@@ -19,8 +19,8 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
  // In your blog post template's graphql query, you can use path
  // as a GraphQL variable to query for data from the markdown file.
  context: {
- path,
- },
+ path
+ }
  })
  })
 }

docs/gatsby.config.js

@@ -1,6 +1,6 @@
 module.exports = {
  siteMetadata: {
- title: `Gatsby Default Starter`,
+ title: `Gatsby Default Starter`
  },
- plugins: [],
+ plugins: []
 }

docs/package.json

@@ -13,6 +13,9 @@
  "dependencies": {
  "gatsby": "^1.9.127",
  "gatsby-link": "^1.6.30",
- "gatsby-plugin-react-helmet": "^2.0.2"
- }
+ "gatsby-plugin-react-helmet": "^2.0.2",
+ "prop-types": "^15.6.0",
+ "react": "^16.2.0"
+ },
+ "xo": false
 }

docs/src/components.js

@@ -27,8 +27,8 @@ module.exports = [
  'evergreen-radio',
  'evergreen-dialog',
  'evergreen-corner-dialog',
- 'evergreen-alert',
+ 'evergreen-alert'
 ].map(x => ({
  name: x.substring('evergreen-'.length),
- packageName: x,
+ packageName: x
 }))

docs/src/components/ComponentReadme.js

@@ -5,7 +5,7 @@ export default class ComponentReadme extends PureComponent {
  static propTypes = {
  packageJSON: PropTypes.object,
  name: PropTypes.string,
- designGuidelines: PropTypes.node,
+ designGuidelines: PropTypes.node
  }
 
  constructor(props, context) {