Fix all of the linting errors and more tidy up (#99)

.editorconfig

@@ -0,0 +1,13 @@
+; editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[Makefile]
+indent_style = tab

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -1,13 +1,6 @@
-lerna-debug.log
+*.log
 node_modules
-npm-debug.log
-npm-debug.log.*
-yarn-error.log
 .DS_Store
-.vscode
-lib
-.eslintcache
+/packages/*/lib
 storybook-static
-.next
-.cache
 /docs/public

docs/gatsby-node.js

@@ -3,7 +3,7 @@ const components = require('./src/components')
 
 // Implement the Gatsby API “createPages”. This is called once the
 // data layer is bootstrapped to let plugins create pages from data.
-exports.createPages = ({ boundActionCreators, graphql }) => {
+exports.createPages = ({ boundActionCreators }) => {
  const { createPage } = boundActionCreators
 
  const componentTemplate = Path.resolve(`src/templates/component.js`)

docs/src/components/ComponentReadme.js

@@ -15,8 +15,8 @@ export default class ComponentReadme extends PureComponent {
  }
 
  render() {
- const { children, packageJSON, designGuidelines, ...props } = this.props
- console.log(packageJSON)
+ const { packageJSON, designGuidelines, ...props } = this.props
+
  return (
  <article className="ComponentReadme" {...props}>
  <div className="ComponentReadme-inner">

docs/src/layouts/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import './../css/index.css'
+import './../css/index.css' // eslint-disable-line import/no-unassigned-import
 
 const TemplateWrapper = ({ children }) => (
  <div>

docs/src/templates/component.js

@@ -39,7 +39,7 @@ const data = {
  }
 }
 
-export default stuff => {
+export default () => {
  const docs = getComponent('buttons')
  console.log('stuff', docs)
  return (

docs/src/utils/getComponent.js

@@ -1,6 +1,4 @@
-/* eslint-disable import/no-unresolved, no-unused-vars */
-
-// import colorsDocs from '../../packages/evergreen-colors/docs/'
+// Import colorsDocs from '../../packages/evergreen-colors/docs/'
 // import colorUtilsDocs from '../../packages/evergreen-color-utils/docs/'
 // import sharedStylesDocs from '../../packages/evergreen-shared-styles/docs/'
 // import typographyDocs from '../../packages/evergreen-typography/docs/'

package.json

@@ -33,6 +33,8 @@
  ],
  "react/require-default-props": ["off"],
  "react/default-props-match-prop-types": ["off"],
+ "react/forbid-component-props": ["off"],
+ "react/jsx-no-bind": ["off"],
  "unicorn/filename-case": ["off"]
  }
  },

packages/evergreen-alert/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import { Heading } from 'evergreen-typography'
@@ -11,7 +11,7 @@ storiesOf('alert', module).add('Alert', () => (
  document.body.style.height = '100vh'
  })()}
  {['default', 'card'].map(appearance => (
- <Box float="left" marginRight={40}>
+ <Box key={appearance} float="left" marginRight={40}>
  <Heading marginBottom={16}>{appearance}</Heading>
  <Alert
  appearance={appearance}

packages/evergreen-autocomplete/README.md

@@ -82,7 +82,6 @@ const items = [
 })
 
 const handleChange = selectedItem => {
- // eslint-disable-next-line no-console
  console.log(selectedItem)
 }
 

packages/evergreen-autocomplete/package.json

@@ -8,6 +8,7 @@
  "license": "MIT",
  "dependencies": {
  "downshift": "^1.16.0",
+ "evergreen-colors": "^2.19.0",
  "evergreen-layers": "^2.19.0",
  "evergreen-popover": "^2.19.0",
  "evergreen-typography": "^2.19.0",

packages/evergreen-autocomplete/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import starWarsNames from 'starwars-names'
@@ -24,7 +24,6 @@ const items = [
 })
 
 const handleChange = selectedItem => {
- // eslint-disable-next-line no-console
  console.log(selectedItem)
 }
 

packages/evergreen-avatar/src/components/Avatar.js

@@ -4,7 +4,7 @@ import Box from 'ui-box'
 import Image from 'evergreen-image'
 import { Text } from 'evergreen-typography'
 import { FillAppearances } from 'evergreen-color-utils'
-import colors from 'evergreen-colors' // eslint-disable-line
+import colors from 'evergreen-colors'
 import globalGetInitials from '../utils/getInitials'
 import globalHash from '../utils/hash'
 
@@ -81,7 +81,7 @@ export default class Avatar extends PureComponent {
  ...props
  } = this.props
  const { imageHasFailedLoading } = this.state
- const imageUnavailable = src == null || imageHasFailedLoading
+ const imageUnavailable = !src || imageHasFailedLoading
  const initialsFontSize = `${getInitialsFontSize(
  size,
  heightLimitOneCharacter

packages/evergreen-avatar/src/utils/hash.js

@@ -4,12 +4,11 @@ export default function hashCode(s) {
  let hash = 0
  let char
  if (str.trim().length === 0) return hash
- // eslint-disable-next-line no-plusplus
  for (let i = 0; i < str.length; i++) {
  char = str.charCodeAt(i)
- hash = (hash << 5) - hash + char // eslint-disable-line no-bitwise
+ hash = (hash << 5) - hash + char
  // Convert to 32bit integer
- hash &= hash // eslint-disable-line no-bitwise
+ hash &= hash
  }
  return Math.abs(hash)
 }

packages/evergreen-avatar/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import { FillAppearances } from 'evergreen-color-utils'

packages/evergreen-badges/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import { Badge, Pill, BadgeAppearances } from '../src/'

packages/evergreen-buttons/docs/index.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import PropTypes form 'prop-types'
+import PropTypes from 'prop-types'
 import { Pane } from 'evergreen-layers'
-import { Text, Paragraph, Heading } from 'evergreen-typography'
+import { Paragraph } from 'evergreen-typography'
 import { Button } from '../src'
 
 class Example extends React.PureComponent {
  static propTypes = {
- component: PropTyps.node,
- children: PropTypes.node,
-  }
+ component: PropTypes.node,
+ children: PropTypes.node
+ }
 
  render() {
  return (

packages/evergreen-buttons/src/components/Button.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Text } from 'evergreen-typography'
-import Box from 'ui-box'
 import { IconMap, IconAim } from 'evergreen-icons'
 import {
  getBorderRadiusForControlHeight,
@@ -69,9 +68,8 @@ export default class Button extends PureComponent {
  const iconHeight = height - 4
  const iconSize = getIconSizeForControlHeight({ height: iconHeight })
 
- const pr =
- paddingRight !== undefined ? paddingRight : Math.round(height / 2)
- const pl = paddingLeft !== undefined ? paddingLeft : Math.round(height / 2)
+ const pr = paddingRight ? paddingRight : Math.round(height / 2)
+ const pl = paddingLeft ? paddingLeft : Math.round(height / 2)
 
  let iconBefore
  if (iconBeforeKey) {

packages/evergreen-buttons/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'

packages/evergreen-checkbox/package.json

@@ -7,7 +7,6 @@
  "author": "Segment",
  "license": "MIT",
  "dependencies": {
- "evergreen-colors": "^2.19.0",
  "evergreen-shared-styles": "^2.19.0",
  "ui-box": "^0.5.4"
  },

packages/evergreen-checkbox/src/components/Checkbox.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
-import colors from 'evergreen-colors'
 import { Text } from 'evergreen-typography'
 import { CheckboxAppearances } from 'evergreen-shared-styles'
 

packages/evergreen-checkbox/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import { Checkbox } from '../src/'

packages/evergreen-color-utils/src/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
 export { default as FillAppearances } from './utils/FillAppearances'

packages/evergreen-colors/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'

packages/evergreen-combobox/README.md

@@ -70,7 +70,6 @@ const items = [
 })
 
 const handleChange = selectedItem => {
- // eslint-disable-next-line no-console
  console.log(selectedItem)
 }
 

packages/evergreen-combobox/src/components/Combobox.js

@@ -82,9 +82,9 @@ export default class Combobox extends PureComponent {
  clearSelection
  }) => (
  <Box
+ key={key}
  innerRef={ref => getRef(ref)}
  display="inline-flex"
- key={key}
  width={width}
  {...props}
  >

packages/evergreen-combobox/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React from 'react'
 import Box from 'ui-box'
 import starWarsNames from 'starwars-names'
@@ -22,7 +22,6 @@ const items = starWarsNames.all.sort((a, b) => {
 const customItems = items.map(i => ({ label: i }))
 
 const handleChange = selectedItem => {
- // eslint-disable-next-line no-console
  console.log(selectedItem)
 }
 

packages/evergreen-corner-dialog/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'

packages/evergreen-dialog/package.json

@@ -9,6 +9,7 @@
  "dependencies": {
  "evergreen-buttons": "^2.19.0",
  "evergreen-dialog": "^2.19.0",
+ "evergreen-layers": "^2.19.0",
  "evergreen-overlay": "^2.19.0",
  "evergreen-typography": "^2.19.0",
  "prop-types": "^15.0.0",

packages/evergreen-dialog/src/components/Dialog.js

@@ -64,14 +64,6 @@ class Dialog extends React.Component {
  hasCloseIcon: true
  }
 
- constructor() {
- super()
-
- this.state = {
- exiting: false
- }
- }
-
  render() {
  const {
  children,

packages/evergreen-dialog/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/react'
+import { storiesOf } from '@storybook/react' // eslint-disable-line import/no-extraneous-dependencies
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'

packages/evergreen-icons/src/components/AddIcon.js

@@ -1,17 +1,29 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import Icon from './Icon'
 
 export default class AddIcon extends PureComponent {
+ static propTypes = {
+ iconWidth: PropTypes.number,
+ iconHeight: PropTypes.number
+ }
+ static defaultProps = {
+ iconWidth: 16,
+ iconHeight: 16
+ }
+
  render() {
+ const { iconWidth, iconHeight, ...props } = this.props
+
  return (
- <Icon {...this.props}>
+ <Icon {...props}>
  <svg
  x="0px"
  y="0px"
  viewBox="0 0 16 16"
  xmlSpace="preserve"
- width={16}
- height={16}
+ width={iconWidth}
+ height={iconHeight}
  fill="currentColor"
  >
  <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />

packages/evergreen-icons/src/components/ArrowIcon.js

@@ -1,7 +1,17 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import Icon from './Icon'
 
 export default class ArrowIcon extends PureComponent {
+ static propTypes = {
+ iconWidth: PropTypes.number,
+ iconHeight: PropTypes.number
+ }
+ static defaultProps = {
+ iconWidth: 16,
+ iconHeight: 16
+ }
+
  render() {
  const { iconWidth, iconHeight, ...props } = this.props
  return (
@@ -11,8 +21,8 @@ export default class ArrowIcon extends PureComponent {
  y="0px"
  viewBox="0 0 16 16"
  xmlSpace="preserve"
- width={iconWidth || 16}
- height={iconHeight || 16}
+ width={iconWidth}
+ height={iconHeight}
  fill="currentColor"
  >
  <polygon points="1.3,6.7 2.7,8.1 7,3.8 7,16 9,16 9,3.8 13.3,8.1 14.7,6.7 8,0 " />