Update dependencies

.babelrc

@@ -1,4 +1,14 @@
 {
-  "presets": ["es2015", "stage-1", "react"],
-  "plugins": ["add-module-exports"]
+  "presets": [
+    ["env", { "loose": true }],
+    "stage-1",
+    "react"
+  ],
+  "plugins": ["add-module-exports"],
+
+  "env": {
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
 }

.eslintrc

@@ -1,39 +1,32 @@
 {
-  "extends": "eslint:recommended",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
   "env": {
     "browser": true,
     "node": true
   },
-  "ecmaFeatures": {
-    "jsx": true
-  },
   "parser": "babel-eslint",
   "plugins": [
     "react"
   ],
   "rules": {
-    "constructor-super": 2,
-    "comma-spacing": 2,
-    "comma-style": [2, "last"],
-    "one-var": [2, { "initialized": "never" }],
-    "key-spacing": 0,
-    "no-this-before-super": 2,
-    "no-underscore-dangle": 0,
-    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
-    "no-var": 2,
-    "quotes": [2, "single", "avoid-escape"],
-    "react/display-name": 0,
-    "react/jsx-boolean-value": [2, "never"],
-    "react/jsx-no-duplicate-props": 2,
-    "react/jsx-no-undef": 2,
-    "react/jsx-uses-react": 2,
-    "react/no-did-mount-set-state": 0,
-    "react/no-did-update-set-state": 0,
-    "react/react-in-jsx-scope": 2,
-    "react/self-closing-comp": 2,
-    "react/wrap-multilines": 2,
-    "react/jsx-uses-vars": 2,
-    "space-infix-ops": 2,
-    "strict": [2, "never"]
+    "comma-spacing": "error",
+    "comma-style": ["error", "last"],
+    "no-unused-vars": ["error", { "vars": "all", "args": "none" }],
+    "no-var": "error",
+    "one-var": ["error", { "initialized": "never" }],
+    "quotes": ["error", "single", "avoid-escape"],
+    "space-infix-ops": "error",
+    "strict": ["error", "never"],
+    "react/no-find-dom-node": "off",
+    "react/jsx-boolean-value": ["error", "never"],
+    "react/jsx-wrap-multilines": "error",
+    "react/no-unescaped-entities": "off",
+    "react/prop-types": ["error", {
+      "ignore": ["children", "className"]
+    }],
+    "react/self-closing-comp": "error"
   }
 }

.travis.yml

@@ -1,11 +1,21 @@
 sudo: false
+
 language: node_js
 node_js:
   - stable
+
+env:
+  - BROWSER=ChromeCi
+
+cache:
+  directories:
+    - node_modules
+
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+
 branches:
   only:
     - master

examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/prop-types": "off"
+  }
+}

examples/App.js

@@ -1,8 +1,8 @@
+import Playground from '@monastic.panic/component-playground/Playground';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM, { findDOMNode } from 'react-dom';
-import PropTypes from 'prop-types';
 import Button from 'react-bootstrap/lib/Button';
-import Playground from '@monastic.panic/component-playground/Playground';
 
 import PropTable from './PropTable';
 

examples/Overlay.js

@@ -96,7 +96,11 @@ class OverlayExample extends React.Component {
 
     return (
       <div className='overlay-example'>
-        <Button bsStyle='primary' ref='target' onClick={this.toggle}>
+        <Button
+          bsStyle='primary'
+          ref={(c) => { this.target = c; }}
+          onClick={this.toggle}
+        >
           I am an Overlay target
         </Button>
         <p>
@@ -108,7 +112,7 @@ class OverlayExample extends React.Component {
           onHide={() => this.setState({ show: false })}
           placement={this.state.placement}
           container={this}
-          target={ props => findDOMNode(this.refs.target)}
+          target={() => findDOMNode(this.target)}
         >
           <ToolTip>
             I&rsquo;m placed to the: <strong>{this.state.placement}</strong>

examples/Portal.js

@@ -26,14 +26,14 @@ class PortalExample extends React.Component {
           <div className='panel-body'>
             <span>It looks like I will render here.</span>
 
-            <Portal container={()=> this.refs.container}>
+            <Portal container={() => this.container}>
               { this.state.show && child }
             </Portal>
           </div>
         </div>
 
         <div className='panel panel-default'>
-          <div ref='container' className='panel-body'/>
+          <div ref={(c) => { this.container = c; }} className='panel-body'/>
         </div>
       </div>
     );

examples/Position.js

@@ -70,7 +70,11 @@ class PositionExample extends React.Component {
 
     return (
       <div className='overlay-example'>
-        <Button bsStyle='primary' ref='target' onClick={this.toggle}>
+        <Button
+          bsStyle='primary'
+          ref={(c) => { this.target = c; }}
+          onClick={this.toggle}
+        >
           I am a Position target
         </Button>
         <p>
@@ -80,7 +84,7 @@ class PositionExample extends React.Component {
         <Position
           container={this}
           placement={this.state.placement}
-          target={props => findDOMNode(this.refs.target)}
+          target={() => findDOMNode(this.target)}
         >
           <ToolTip>
             I'm placed to the: <strong>{this.state.placement}</strong>

examples/PropTable.js

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import Label from 'react-bootstrap/lib/Label';
 import Table from 'react-bootstrap/lib/Table';
 

karma.conf.js

@@ -1,79 +1,59 @@
-/* eslint no-var: 0, babel/object-shorthand: 0 */
-require('babel-core/register');
+const webpack = require('webpack');
 
-var webpackConfig = require('./webpack/test.config.js');
-var isCI = process.env.CONTINUOUS_INTEGRATION === 'true';
-var runCoverage = process.env.COVERAGE === 'true' || isCI;
-
-var reporters = ['mocha'];
-
-if (runCoverage) {
-  webpackConfig = require('./webpack/test-coverage.config');
-  reporters.push('coverage');
-
-  if (isCI) {
-    reporters.push('coveralls');
-  }
+const coverageReporters = ['coverage'];
+if (process.env.CONTINUOUS_INTEGRATION === 'true') {
+  coverageReporters.push('coveralls');
 }
 
-module.exports = function (config) {
-  config.set({
+module.exports = (config) => {
+  const { env } = process;
 
-    basePath: '',
-
-    frameworks: [
-      'mocha',
-      'sinon-chai'
-    ],
+  config.set({
+    frameworks: ['mocha', 'sinon-chai'],
 
-    files: [
-      'test/index.js'
-    ],
+    files: ['test/index.js'],
 
     preprocessors: {
-      'test/index.js': ['webpack', 'sourcemap']
+      'test/index.js': ['webpack', 'sourcemap'],
     },
 
-    webpack: webpackConfig,
+    webpack: {
+      module: {
+        rules: [
+          { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+        ],
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': JSON.stringify('test'),
+          __DEV__: true,
+        }),
+      ],
+      devtool: 'cheap-module-inline-source-map',
+    },
 
     webpackMiddleware: {
-      noInfo: true
+      noInfo: true,
     },
 
-    reporters: reporters,
+    reporters: ['mocha', ...coverageReporters],
 
     mochaReporter: {
-      output: 'autowatch'
+      output: 'autowatch',
     },
 
     coverageReporter: {
-      dir: '.coverage',
-      reporters: [
-        { type: 'html' },
-        { type: 'lcovonly' }
-      ]
+      type: 'lcov',
+      dir: 'coverage',
     },
 
-    port: 9876,
-
-    colors: true,
-
-    logLevel: config.LOG_INFO,
-
-    autoWatch: true,
-
-    browsers: [ isCI ? 'ChromeTravisCI' : 'Chrome' ],
-
     customLaunchers: {
-      ChromeTravisCI: {
+      ChromeCi: {
         base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
+        flags: ['--no-sandbox'],
+      },
     },
 
-    captureTimeout: 60000,
-    browserNoActivityTimeout: 45000,
-
-    singleRun: isCI
+    browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome'],
   });
 };