chore(package): bump dependencies

.eslintrc

@@ -1,41 +1,46 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "env": {
     "browser": true
   },
   "rules": {
-    "newline-per-chained-call": 0,
-    "class-methods-use-this": 0,
-    "consistent-return": 0,
-    "complexity": [1, 10],
-    "global-require": 0,
-    "jsx-quotes": [2, "prefer-single"],
-    "max-len": [2, 120, 4],
-    "no-console": 2,
-    "no-mixed-operators": 0,
-    "no-multi-spaces": [2, { "ignoreEOLComments": true }],
-    "no-return-assign": [2, "except-parens"],
-    "no-underscore-dangle": 0,
-    "padded-blocks": [2, {
+    "newline-per-chained-call": "off",
+    "class-methods-use-this": "off",
+    "consistent-return": "off",
+    "complexity": ["warn", 10],
+    "global-require": "off",
+    "lines-between-class-members": "off",
+    "no-console": "error",
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
+    "no-return-assign": ["error", "except-parens"],
+    "no-underscore-dangle": "off",
+    "padded-blocks": ["error", {
       "blocks": "never",
       "switches": "never",
       "classes": "never"
     }],
-    "semi": [2, "never"],
-    "jsx-a11y/alt-text": 1,
-    "jsx-a11y/label-has-for": 1,
-    "jsx-a11y/no-static-element-interactions": 1,
-    "jsx-a11y/role-has-required-aria-props": 1,
-    "import/no-dynamic-require": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/no-unresolved": 0,
-    "import/no-webpack-loader-syntax": 0,
-    "import/extensions": 0,
-    "react/forbid-prop-types": 0,
+    "prefer-destructuring": "off",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/label-has-for": "warn",
+    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "import/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "import/no-webpack-loader-syntax": "off",
+    "import/extensions": "off",
+    "react/button-has-type": "off",
+    "react/destructuring-assignment": "off",
+    "react/forbid-prop-types": "off",
+    "react/jsx-one-expression-per-line":  "off",
     "react/jsx-filename-extension": [2, { "extensions": [".js"] }],
-    "react/no-unused-prop-types": 0,
-    "react/sort-comp": 0,
-    "react/require-default-props": 0
+    "react/jsx-wrap-multilines": "off",
+    "react/no-unused-prop-types": "off",
+    "react/sort-comp": "off",
+    "react/require-default-props":"off"
   }
 }

docs/src/components/CarbonAd/CarbonAdNative.js

@@ -169,7 +169,8 @@ class CarbonAdNative extends PureComponent {
           #${id}:hover > img {
             opacity: 1;
           }
-        `}</style>
+        `}
+        </style>
       </a>
     )
   }

docs/src/components/CodeEditor/CodeEditorUniveral.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { withSiteData } from 'react-static'
 import universal from 'react-universal-component'
 import { Loader } from 'semantic-ui-react'
 
@@ -14,8 +13,8 @@ export const EDITOR_GUTTER_COLOR = '#25282d'
 // component also allows us to load Editor lazy.
 const CodeEditor = isBrowser()
   ? universal(import('./CodeEditor'), {
-    loading: () => <Loader active inline='centered' />,
-  })
+      loading: () => <Loader active inline='centered' />,
+    })
   : () => null
 
 function CodeEditorUniveral(props) {
@@ -46,7 +45,7 @@ function CodeEditorUniveral(props) {
 
 CodeEditorUniveral.propTypes = {
   id: PropTypes.string.isRequired,
-  mode: PropTypes.oneOf(['html', 'jsx']),
+  mode: PropTypes.oneOf(['html', 'jsx', 'sh']),
   value: PropTypes.string.isRequired,
   readOnly: PropTypes.bool,
 }
@@ -55,4 +54,4 @@ CodeEditorUniveral.defaultProps = {
   mode: 'jsx',
 }
 
-export default withSiteData(CodeEditorUniveral)
+export default CodeEditorUniveral

docs/src/components/CodeSnippet/CodeSnippet.js

@@ -36,7 +36,7 @@ const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
       showCursor={false}
       value={(mode === 'sh'
         ? value.replace(/^/g, '$  ')
-        : formatCode(value, mode === 'html' ? 'html' : 'babylon')
+        : formatCode(value, mode === 'html' ? 'html' : 'babel')
       ).trim()}
       {...rest}
     />
@@ -46,7 +46,7 @@ const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
 CodeSnippet.propTypes = {
   fitted: PropTypes.bool,
   label: PropTypes.string,
-  mode: PropTypes.oneOf(['html', 'jsx', 'sh']).isRequired,
+  mode: PropTypes.oneOf(['html', 'jsx', 'sh']),
   value: PropTypes.string.isRequired,
 }
 

docs/src/components/ComponentDoc/ComponentDoc.js

@@ -66,7 +66,7 @@ class ComponentDoc extends Component {
     const { history } = this.props
     const activePath = examplePathToHash(examplePath)
 
-    history.replace(`${location.pathname}#${activePath}`)
+    history.replace(`${window.location.pathname}#${activePath}`)
     // set active hash path
     this.setState({ activePath }, scrollToAnchor)
   }

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderHtml.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react'
 import { Divider } from 'semantic-ui-react'
 
 import Editor, { EDITOR_BACKGROUND_COLOR } from 'docs/src/components/CodeEditor'
+import formatCode from 'docs/src/utils/formatCode'
 
 const rootStyle = {
   padding: '1rem',
@@ -22,7 +23,7 @@ export default class ComponentExampleRenderHtml extends PureComponent {
     const { value } = this.props
 
     // remove new line at eof after formatting for a tighter fit
-    const formattedCode = value.trim()
+    const formattedCode = formatCode(value, 'html').replace(/\s+$/, '')
 
     return (
       <div style={rootStyle}>

docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.js

@@ -21,7 +21,7 @@ export default class ComponentTableRow extends Component {
 
   state = {}
 
-  toggleEnums = () => this.setState({ showEnums: !this.state.showEnums })
+  toggleEnums = () => this.setState(prevState => ({ showEnums: !prevState.showEnums }))
 
   render() {
     const { defaultValue, description, name, required, tags, type, value } = this.props

docs/src/components/DocsLayout.js

@@ -6,6 +6,7 @@ import { Head, withRouter, withSiteData } from 'react-static'
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import style from 'docs/src/Style'
 import { docTypes, scrollToAnchor } from 'docs/src/utils'
+import { isBrowser } from 'src/lib'
 
 const anchors = new AnchorJS({
   icon: '#',
@@ -41,10 +42,10 @@ class DocsLayout extends Component {
 
     clearTimeout(this.scrollStartTimeout)
 
-    scrollTo(0, 0)
+    if (isBrowser()) window.scrollTo(0, 0)
 
     anchors.add('h2, h3, h4, h5, h6')
-    anchors.remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', '))
+    anchors.remove([1, 2, 3, 4, 5, 6].map((n) => `.rendered-example h${n}`).join(', '))
     anchors.remove('.no-anchor')
 
     this.scrollStartTimeout = setTimeout(scrollToAnchor, 500)

docs/src/components/LayoutsLayout.js

@@ -4,6 +4,7 @@ import { Link, withRouteData } from 'react-static'
 import { Button } from 'semantic-ui-react'
 
 import { repoURL } from 'docs/src/utils'
+import { isBrowser } from 'src/lib'
 
 const docsButtonStyle = {
   position: 'fixed',
@@ -21,7 +22,8 @@ const style = (
         50% { transform: translateY(0.35em); }
         100% { transform: translateY(0); }
     }
-  `}</style>
+  `}
+  </style>
 )
 
 class LayoutsLayout extends PureComponent {
@@ -36,11 +38,11 @@ class LayoutsLayout extends PureComponent {
   }
 
   componentDidMount() {
-    scrollTo(0, 0)
+    if (isBrowser()) window.scrollTo(0, 0)
   }
 
   componentDidUpdate() {
-    scrollTo(0, 0)
+    if (isBrowser()) window.scrollTo(0, 0)
   }
 
   render() {

docs/src/examples/addons/Portal/Types/PortalExamplePortal.js

@@ -21,10 +21,10 @@ export default class PortalExamplePortal extends Component {
   clearLog = () => this.setState({ log: [], logCount: 0 })
 
   writeLog = eventName =>
-    this.setState({
-      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...this.state.log].slice(0, 20),
-      logCount: this.state.logCount + 1,
-    })
+    this.setState(prevState => ({
+      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...prevState.log].slice(0, 20),
+      logCount: prevState.logCount + 1,
+    }))
 
   render() {
     const { log, logCount, open } = this.state

docs/src/examples/addons/Radio/States/RadioExampleRemoteControl.js

@@ -3,7 +3,7 @@ import { Button, Radio } from 'semantic-ui-react'
 
 export default class RadioExampleRemoteControl extends Component {
   state = { checked: false }
-  toggle = () => this.setState({ checked: !this.state.checked })
+  toggle = () => this.setState(prevState => ({ checked: !prevState.checked }))
 
   render() {
     return (

docs/src/examples/addons/Ref/Types/RefForwardingExample.js

@@ -7,6 +7,7 @@ const ExampleButton = React.forwardRef((props, ref) => (
   </div>
 ))
 
+// eslint-disable-next-line react/no-multi-comp
 export default class RefForwardingExample extends Component {
   forwardedRef = React.createRef()
   state = { isMounted: false }

docs/src/examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js

@@ -8,10 +8,10 @@ export default class ResponsiveExampleOnUpdate extends Component {
   }
 
   handleOnUpdate = () =>
-    this.setState({
-      log: [`${new Date().toLocaleTimeString()}: onUpdate()`, ...this.state.log].slice(0, 20),
-      logCount: this.state.logCount + 1,
-    })
+    this.setState(prevState => ({
+      log: [`${new Date().toLocaleTimeString()}: onUpdate()`, ...prevState.log].slice(0, 20),
+      logCount: prevState.logCount + 1,
+    }))
 
   clearLog = () => this.setState({ log: [], logCount: 0 })
 

docs/src/examples/addons/TransitionablePortal/Types/TransitionablePortalExampleControlled.js

@@ -4,8 +4,7 @@ import { Button, Header, Segment, TransitionablePortal } from 'semantic-ui-react
 export default class TransitionablePortalExampleControlled extends Component {
   state = { open: false }
 
-  handleClick = () => this.setState({ open: !this.state.open })
-
+  handleClick = () => this.setState(prevState => ({ open: !prevState.open }))
   handleClose = () => this.setState({ open: false })
 
   render() {

docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js

@@ -33,8 +33,7 @@ export default class TransitionablePortalExampleTransition extends Component {
   state = { animation: transitions[0], duration: 500, open: false }
 
   handleChange = (e, { name, value }) => this.setState({ [name]: value })
-
-  handleClick = () => this.setState({ open: !this.state.open })
+  handleClick = () => this.setState(prevState => ({ open: !prevState.open }))
 
   render() {
     const { animation, duration, open } = this.state

docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js

@@ -23,19 +23,19 @@ export default class VisibilityExampleCallbackFrequency extends Component {
   contextRef = createRef()
 
   updateLog = eventName => () =>
-    this.setState({
+    this.setState(prevState => ({
       log: [
         `${new Date().toLocaleTimeString()}: ${eventName}`,
-        ...this.state.log,
+        ...prevState.log,
       ].slice(0, 20),
-      logCount: this.state.logCount + 1,
-    })
+      logCount: prevState.logCount + 1,
+    }))
 
   clearLog = () => this.setState({ log: [], logCount: 0 })
 
-  toggleOnce = () => this.setState({ once: !this.state.once })
+  toggleOnce = () => this.setState(prevState => ({ once: !prevState.once }))
 
-  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+  toggleContinuous = () => this.setState(prevState => ({ continuous: !prevState.continuous }))
 
   render() {
     const { continuous, log, logCount, once } = this.state

docs/src/examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js

@@ -23,19 +23,19 @@ export default class VisibilityExampleGroupedCallbacks extends Component {
   contextRef = createRef()
 
   updateLog = eventName => () =>
-    this.setState({
+    this.setState(prevState => ({
       log: [
         `${new Date().toLocaleTimeString()}: ${eventName}`,
-        ...this.state.log,
+        ...prevState.log,
       ].slice(0, 20),
-      logCount: this.state.logCount + 1,
-    })
+      logCount: prevState.logCount + 1,
+    }))
 
   clearLog = () => this.setState({ log: [], logCount: 0 })
 
-  toggleOnce = () => this.setState({ once: !this.state.once })
+  toggleOnce = () => this.setState(prevState => ({ once: !prevState.once }))
 
-  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+  toggleContinuous = () => this.setState(prevState => ({ continuous: !prevState.continuous }))
 
   render() {
     const { continuous, log, logCount, once } = this.state

docs/src/examples/collections/Grid/Variations/index.js

@@ -81,9 +81,7 @@ const GridVariationsExamples = () => (
 
     <ComponentExample
       title='Vertical Alignment'
-      description={
-        'A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.'
-      }
+      description='A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.'
       examplePath='collections/Grid/Variations/GridExampleVerticalAlignment'
     />
     <ComponentExample examplePath='collections/Grid/Variations/GridExampleVerticalAlignmentRow' />

docs/src/examples/collections/Menu/Content/MenuExampleHeaderVertical.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react'
 import { Menu } from 'semantic-ui-react'
 
 export default class MenuExampleHeaderVertical extends Component {
+  state = {}
   handleItemClick = name => this.setState({ activeItem: name })
 
   render() {
-    const { activeItem } = this.state || {}
+    const { activeItem } = this.state
 
     return (
       <Menu vertical>

docs/src/examples/collections/Menu/Content/MenuExampleLinkItem.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react'
 import { Menu, Message } from 'semantic-ui-react'
 
 export default class MenuExampleLinkItem extends Component {
+  state = {}
   handleClick = () => this.setState({ message: 'onClick handled' })
 
   render() {
-    const { message } = this.state || {}
+    const { message } = this.state
 
     return (
       <div>

docs/src/examples/collections/Table/Variations/index.js

@@ -134,9 +134,7 @@ const Variations = () => (
 
     <ComponentExample
       title='Full-Width Header / Footer'
-      description={
-        'A definition table can have a full width header or footer, filling in the gap left by the first column.'
-      }
+      description='A definition table can have a full width header or footer, filling in the gap left by the first column.'
       examplePath='collections/Table/Variations/TableExampleFullWidth'
     />
 

docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js

@@ -14,7 +14,7 @@ export default class ButtonExampleAttachedEvents extends Component {
     }
   }
 
-  updateLog = message => this.setState({ log: [message, ...this.state.log] })
+  updateLog = message => this.setState(prevState => ({ log: [message, ...prevState.log] }))
 
   render() {
     const { log } = this.state