Upgrade dev deps and fix linting errors (segmentio#719)

.storybook/config.js

@@ -1,6 +1,5 @@
 import { configure } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
-import 'react-chromatic/storybook-addon'
 
 // Option defaults:
 setOptions({

.storybook/webpack.config.js

@@ -1,4 +1,3 @@
-const path = require('path')
 const webpack = require('webpack')
 
 module.exports = storybookBaseConfig => {

docs/gatsby-node.js

@@ -17,6 +17,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     },
     plugins: [
       // See https://github.com/FormidableLabs/react-live/issues/5
+      // eslint-disable-next-line prefer-named-capture-group
       new webpack.IgnorePlugin(/^(xor|props)$/)
     ],
     resolve: {

docs/src/components/ColorExamples.js

@@ -1,5 +1,4 @@
 import React from 'react'
-// eslint-disable-next-line import/no-unresolved
 import { Pane, Heading, ThemeConsumer } from 'evergreen-ui'
 import ColorGroup from './ColorGroup'
 

docs/src/components/ColorGroup.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-// eslint-disable-next-line import/no-unresolved
 import { Pane, Heading } from 'evergreen-ui'
 import Swatch from './Swatch'
 

docs/src/components/ConsentManager.js

@@ -19,17 +19,21 @@ export default () => {
     functional: false
   }
 
-  const closeBehavior = inCA()
-    ? () => caDefaultPreferences
-    : inEU()
-    ? 'deny'
-    : 'accept'
+  let closeBehavior
+  if (inCA()) {
+    closeBehavior = () => caDefaultPreferences
+  } else if (inEU()) {
+    closeBehavior = 'deny'
+  } else {
+    closeBehavior = 'accept'
+  }
 
-  const initialPreferences = inCA()
-    ? caDefaultPreferences
-    : inEU()
-    ? euDefaultPreferences
-    : undefined
+  let initialPreferences
+  if (inCA()) {
+    initialPreferences = caDefaultPreferences
+  } else if (inEU()) {
+    initialPreferences = euDefaultPreferences
+  }
 
   const bannerContent = (
     <span>

docs/src/components/IconSearch.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { filter } from 'fuzzaldrin-plus'
-// eslint-disable-next-line import/no-unresolved
 import { Pane, SearchInput, IconNames, Text, Icon } from 'evergreen-ui'
 
 const iconKeys = Object.keys(IconNames)

docs/src/components/Page.js

@@ -3,7 +3,6 @@ import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import { Location, navigate } from '@reach/router'
-// eslint-disable-next-line import/no-unresolved
 import { Button, IconButton, Tooltip } from 'evergreen-ui'
 import IA from '../IA'
 import DocsMDXProvider from './DocsMDXProvider'

docs/src/components/Playground.js

@@ -2,11 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import uniqueId from 'lodash/uniqueId'
-// eslint-disable-next-line import/no-unresolved
 import * as components from 'evergreen-ui'
 import Component from '@reactions/component'
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
-import profiles from './examples/profiles.json' // eslint-disable-line import/extensions
+import profiles from './examples/profiles.json'
 
 export default class Playground extends React.Component {
   static propTypes = {

docs/src/components/Swatch.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-// eslint-disable-next-line import/no-unresolved
 import { Pane, Heading, Text, Code, Popover } from 'evergreen-ui'
 
 function uppercaseColor(color) {

docs/src/components/TextStylePreview.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-// eslint-disable-next-line import/no-unresolved
 import { Pane } from 'evergreen-ui'
 
 export default class TextStylePreview extends React.Component {

docs/src/components/examples/AdvancedTable.js

@@ -9,9 +9,8 @@ import {
   Text,
   IconButton,
   TextDropdownButton
-  // eslint-disable-next-line import/no-unresolved
 } from 'evergreen-ui'
-import profiles from './profiles.json' // eslint-disable-line import/extensions
+import profiles from './profiles.json'
 
 function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()

docs/src/components/examples/VirtualTable.js

@@ -7,7 +7,6 @@ import {
   TextInputField,
   SelectField,
   minorScale
-  // eslint-disable-next-line import/no-unresolved
 } from 'evergreen-ui'
 
 const range = N => Array.from({ length: N }, (v, k) => k + 1)

examples/ssr-next/pages/_document.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/no-danger, import/no-unresolved */
+/* eslint-disable react/no-danger */
 import React from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
 import { extractStyles } from 'evergreen-ui'

examples/ssr-next/pages/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react'
 import { Button } from 'evergreen-ui'
 

package.json

@@ -37,11 +37,10 @@
     "clean": "git clean -Xdf",
     "release": "np",
     "deploy-docs": "cd docs && yarn install && yarn deploy",
-    "postpublish": "yarn deploy-docs",
-    "chromatic": "chromatic test --storybook-addon --script-name dev --app-code=alj8xoz1ujt"
+    "postpublish": "yarn deploy-docs"
   },
   "engines": {
-    "node": ">=8"
+    "node": ">=10"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
@@ -75,6 +74,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@reactions/component": "^2.0.2",
+    "@size-limit/preset-small-lib": "^3.0.0",
     "@storybook/addon-actions": "^3.4.11",
     "@storybook/addon-links": "^3.4.11",
     "@storybook/addon-options": "^3.4.11",
@@ -90,23 +90,20 @@
     "eslint-config-prettier": "^3.1.0",
     "eslint-config-xo-react": "^0.17.0",
     "eslint-plugin-react": "^7.11.1",
-    "execa": "^1.0.0",
     "faker": "^4.1.0",
     "file-loader": "^2.0.0",
     "fs-extra": "^7.0.0",
-    "husky": "^1.1.2",
-    "lint-staged": "^7.3.0",
-    "np": "^4.0.2",
+    "husky": "^4.0.10",
+    "lint-staged": "^10.0.1",
+    "np": "^5.2.1",
     "prettier": "^1.14.3",
     "react": "^16.5.2",
-    "react-chromatic": "^0.8.4",
     "react-dom": "^16.5.2",
     "react-test-renderer": "^16.5.2",
-    "sinon": "^7.0.0",
-    "size-limit": "^0.21.1",
+    "sinon": "^8.1.0",
     "starwars-names": "^1.6.0",
     "url-loader": "^1.1.2",
-    "xo": "^0.24.0"
+    "xo": "^0.25.3"
   },
   "xo": {
     "parser": "babel-eslint",
@@ -150,6 +147,18 @@
       ],
       "unicorn/prefer-node-append": [
         "off"
+      ],
+      "unicorn/prefer-string-slice": [
+        "warn"
+      ],
+      "unicorn/prefer-node-remove": [
+        "off"
+      ],
+      "unicorn/prefer-dataset": [
+        "off"
+      ],
+      "unicorn/catch-error-name": [
+        "off"
       ]
     },
     "settings": {
@@ -165,12 +174,10 @@
   "lint-staged": {
     "*.js": [
       "xo --fix",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.{json,md}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
   "ava": {

src/alert/stories/index.stories.js

@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
-import { InlineAlert, Alert } from '..'
 import { Heading } from '../../typography'
+import { InlineAlert, Alert } from '..'
 
 storiesOf('alert', module)
   .add('Alert', () => (

src/autocomplete/stories/index.stories.js

@@ -2,9 +2,9 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
 import starWarsNames from 'starwars-names'
-import { Autocomplete } from '..'
 import { TextInput } from '../../text-input'
 import { Button } from '../../buttons'
+import { Autocomplete } from '..'
 
 // Generate a big list of items
 const items = [

src/avatar/stories/index.stories.js

@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
-import { Avatar } from '..'
 import { Heading, Paragraph } from '../../typography'
+import { Avatar } from '..'
 
 const names = [
   'Cheryl Carter',

src/badges/stories/index.stories.js

@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
-import { Badge, Pill } from '..'
 import { ThemeConsumer } from '../../theme'
+import { Badge, Pill } from '..'
 
 const wrapperStyles = {
   display: 'flex'

src/buttons/stories/index.stories.js

@@ -2,10 +2,10 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
 import Component from '@reactions/component'
-import { IconButton, Button, BackButton, TextDropdownButton } from '..'
 import { Heading } from '../../typography'
 import { Pane } from '../../layers'
 import { SegmentedControl } from '../../segmented-control'
+import { IconButton, Button, BackButton, TextDropdownButton } from '..'
 
 const buttonsStory = storiesOf('buttons', module)
 

src/combobox/stories/index.stories.js

@@ -2,9 +2,9 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
 import starWarsNames from 'starwars-names'
-import { Combobox } from '..'
 import { Heading } from '../../typography'
 import { Pane } from '../../layers'
+import { Combobox } from '..'
 
 // Generate a big list of items
 const items = starWarsNames.all.sort((a, b) => {

src/dialog/stories/index.stories.js

@@ -4,13 +4,13 @@ import Box from 'ui-box'
 import Component from '@reactions/component'
 import starWarsNames from 'starwars-names'
 import { Strong, Paragraph } from '../../typography'
-import { Dialog } from '..'
 import { Button } from '../../buttons'
 import { Combobox } from '../../combobox'
 import { SideSheet } from '../../side-sheet'
 import { Pane } from '../../layers'
 import { Popover } from '../../popover'
 import DialogManager from './DialogManager'
+import { Dialog } from '..'
 
 // Generate a big list of items
 const comboboxItems = starWarsNames.all.sort((a, b) => {

src/icon/stories/index.stories.js

@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
-import { Icon, IconNames } from '..'
 import { Heading, Paragraph, Text, Link } from '../../typography'
+import { Icon, IconNames } from '..'
 
 storiesOf('icon', module).add('Icon', () => (
   <div>

src/layers/stories/index.stories.js

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import { Pane, Card } from '..'
 import { ThemeConsumer } from '../../theme'
+import { Pane, Card } from '..'
 
 const cardStyle = {
   float: 'left',

src/menu/src/Menu.js

@@ -7,13 +7,6 @@ import MenuGroup from './MenuGroup'
 import MenuOption from './MenuOption'
 import MenuOptionsGroup from './MenuOptionsGroup'
 
-const KeyCodes = {
-  ArrowUp: 38,
-  ArrowDown: 40,
-  Home: 36,
-  End: 35
-}
-
 export default class Menu extends React.PureComponent {
   static Item = MenuItem
 
@@ -87,22 +80,22 @@ export default class Menu extends React.PureComponent {
         // Go to next/previous item if it exists
         // or loop around
 
-        if (e.keyCode === KeyCodes.ArrowDown) {
+        if (e.key === 'ArrowDown') {
           e.preventDefault()
           focusNext(menuItem, this.firstItem)
         }
 
-        if (e.keyCode === KeyCodes.ArrowUp) {
+        if (e.key === 'ArrowUp') {
           e.preventDefault()
           focusNext(menuItem, this.lastItem)
         }
 
-        if (e.keyCode === KeyCodes.Home) {
+        if (e.key === 'Home') {
           e.preventDefault()
           this.firstItem.focus()
         }
 
-        if (e.keyCode === KeyCodes.End) {
+        if (e.key === 'End') {
           e.preventDefault()
           this.lastItem.focus()
         }

src/overlay/stories/index.stories.js

@@ -2,8 +2,8 @@ import { storiesOf } from '@storybook/react'
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
-import { Overlay } from '..'
 import { Button } from '../../buttons'
+import { Overlay } from '..'
 
 class OverlayManager extends PureComponent {
   static propTypes = {

src/popover/stories/index.stories.js

@@ -2,14 +2,14 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
-import { Popover } from '..'
 import { Tooltip } from '../../tooltip'
 import { TextInputField } from '../../text-input'
 import { Pane } from '../../layers'
 import { Heading, Paragraph, Text } from '../../typography'
 import { Button } from '../../buttons'
 import { Position } from '../../constants'
 import { Icon, IconNames } from '../../icon'
+import { Popover } from '..'
 
 // eslint-disable-next-line react/prop-types
 const PopoverContent = ({ height = 240 }) => (

src/radio/stories/index.stories.js

@@ -2,8 +2,8 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 import Box from 'ui-box'
 import Component from '@reactions/component'
-import { Radio, RadioGroup } from '..'
 import { Heading } from '../../typography'
+import { Radio, RadioGroup } from '..'
 
 storiesOf('radio', module)
   .add('RadioGroup', () => (