Merge pull request #449 from nndio/deps

Fix and update packages

.eslintignore

@@ -0,0 +1,9 @@
+*.log
+.idea
+lib
+dist
+umd
+build
+coverage
+node_modules
+__snapshots__

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "chrome": true
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "eol-last": ["warn"],
+    "max-len": ["warn", { "code": 120 , "ignoreComments": true }],
+    "quotes": ["warn", "single", "avoid-escape"],
+    "jsx-quotes": ["warn", "prefer-double"],
+    "react/prop-types": 0
+  },
+  "plugins": [
+    "prettier",
+    "react",
+    "babel"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -7,3 +7,4 @@ umd
 build
 coverage
 .idea
+.eslintcache

.travis.yml

@@ -8,5 +8,5 @@ cache:
     - "node_modules"
 script:
   - yarn build:all
-  - yarn lint
+  - yarn lint:all
   - yarn test

CODE_OF_CONDUCT.md

@@ -11,4 +11,3 @@ Project maintainers have the right and responsibility to remove, edit, or reject
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
 
 This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
-

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+  plugins: [
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        regenerator: true
+      }
+    ],
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-export-default-from'
+  ]
+};

docs/Integrations/Remote.md

@@ -6,7 +6,7 @@ By installing [`redux-devtools-cli`](https://github.com/reduxjs/redux-devtools/t
 
 We're using [SocketCluster](http://socketcluster.io/) for realtime communication, which provides a fast and scalable webSocket layer and a minimal pub/sub system. You need to include one of [its clients](https://github.com/SocketCluster/client-drivers) in your app to communicate with RemotedevServer. Currently there are clients for [JavaScript (NodeJS)](https://github.com/SocketCluster/socketcluster-client), [Java](https://github.com/sacOO7/socketcluster-client-java), [Python](https://github.com/sacOO7/socketcluster-client-python), [C](https://github.com/sacOO7/socketcluster-client-C), [Objective-C](https://github.com/abpopov/SocketCluster-ios-client) and [.NET/C#](https://github.com/sacOO7/SocketclusterClientDotNet).
 
-By default, the websocket server is running on `ws://localhost:8000/socketcluster/`.  
+By default, the websocket server is running on `ws://localhost:8000/socketcluster/`.
 
 ### Messaging lifecycle
 
@@ -15,6 +15,7 @@ By default, the websocket server is running on `ws://localhost:8000/socketcluste
 The client driver provides a way to connect to the server via websockets (see the docs for the selected client).
 
 ##### JavaScript
+
 ```js
 var socket = socketCluster.connect({
   hostname: 'localhost',
@@ -23,18 +24,20 @@ var socket = socketCluster.connect({
 ```
 
 ##### Python
+
 ```py
-socket = Socketcluster.socket("ws://localhost:8000/socketcluster/") 
+socket = Socketcluster.socket("ws://localhost:8000/socketcluster/")
 socket.connect()
 ```
 
 > Note that JavaScript client composes the url from `hostname` and `port`, adding `/socketcluster/` path automatically. For other clients, you should specify that path. For example, for `ObjectiveC` it would be `self.client.initWithHost("localhost/socketcluster/", onPort: 8000, securely: false)`.
 
 #### 2. Disconnecting and reconnecting
- 
+
 SocketCluster client handles reconnecting for you, but you still might want to know when the connection is established, or when it failed to connect.
 
 ##### JavaScript
+
 ```js
 socket.on('connect', status => {
   // Here will come the next step
@@ -48,6 +51,7 @@ socket.on('error', error => {
 ```
 
 ##### Python
+
 ```py
 def onconnect(socket):
   // Here will call the next step
@@ -66,9 +70,13 @@ socket.setBasicListener(onconnect, ondisconnect, onConnectError)
 We're not providing an authorizing mechanism yet. All you have to do is to emit a `login` event, and you'll get a `channelName` you should subscribe for, and watch for messages and events. Make sure to pass the `master` event, otherwise it should be a monitor, not a client app.
 
 ##### JavaScript
+
 ```js
 socket.emit('login', 'master', (error, channelName) => {
-  if (error) { console.log(error); return; }
+  if (error) {
+    console.log(error);
+    return;
+  }
   channel = socket.subscribe(channelName);
   channel.watch(handleMessages);
   socket.on(channelName, handleMessages);
@@ -80,6 +88,7 @@ function handleMessages(message) {
 ```
 
 ##### Python
+
 ```py
 socket.emitack("login", "master", login)
 
@@ -99,6 +108,7 @@ You could just emit the `login` event, and omit subscribing (and point `5` bello
 To send your data to the monitor use `log` or `log-noid` channel. The latter will add the socket id to the message from the server side (useful when the message was sent before the connection was established).
 
 The message object includes the following:
+
 - `type` - usually should be `ACTION`. If you want to indicate that we're starting a new log (clear all actions emitted before and add `@@INIT`), use `INIT`. In case you have a lifted state similar to one provided by [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument), use `STATE`.
 - `action` - the action object. It is recommended to lift it in another object, and add `timestamp` to show when the action was fired off: `{ timestamp: Date.now(), action: { type: 'SOME_ACTION' } }`.
 - `payload` - usually the state or lifted state object.
@@ -107,6 +117,7 @@ The message object includes the following:
 - `id` - socket connection id, which should be either `socket.id` or should not provided and use `log-noid` channel.
 
 ##### JavaScript
+
 ```js
 const message = {
   type: 'ACTION',
@@ -120,6 +131,7 @@ socket.emit(socket.id ? 'log' : 'log-noid', message);
 ```
 
 ##### Python
+
 ```py
 class Message:
   def __init__(self, action, state):
@@ -133,14 +145,16 @@ socket.emit(socket.id if "log" else "log-noid", Message(action, state));
 #### 5. Listening for monitor events
 
 When a monitor action is emitted, you'll get an event on the subscribed function. The argument object includes a `type` key, which can be:
+
 - `DISPATCH` - a monitor action dispatched on Redux DevTools monitor, like `{ type: 'DISPATCH', payload: { type: 'JUMP_TO_STATE', 'index': 2 }`. See [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js) for details. Additionally to that API, you'll get also a stringified `state` object when needed. So, for example, for time travelling (`JUMP_TO_STATE`) you can just parse and set the state (see the example). Usually implementing this type of actions would be enough.
 - `ACTION` - the user requested to dispatch an action remotely like `{ type: 'ACTION', action: '{ type: \'INCREMENT_COUNTER\' }' }`. The `action` can be either a stringified javascript object which should be evalled or a function which arguments should be evalled like [here](https://github.com/zalmoxisus/remotedev-utils/blob/master/src/index.js#L62-L70).
 - `START` - a monitor was opened. You could handle this event in order not to do extra tasks when the app is not monitored.
-- `STOP` - a monitor was closed. You can take this as no need to send data to the monitor. I there are several monitors and one was closed, all others will send `START` event to acknowledge that we still have to send data.  
+- `STOP` - a monitor was closed. You can take this as no need to send data to the monitor. I there are several monitors and one was closed, all others will send `START` event to acknowledge that we still have to send data.
 
 See [`mobx-remotedev`](https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/monitorActions.js) for an example of implementation without [`redux-devtools-instrument`](https://github.com/zalmoxisus/redux-devtools-instrument/blob/master/src/instrument.js).
 
 ##### JavaScript
+
 ```js
 function handleMessages(message) {
   if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_STATE') {
@@ -150,6 +164,7 @@ function handleMessages(message) {
 ```
 
 ##### Python
+
 ```py
 def handleMessages(key, message):
   if message.type === "DISPATCH" and message.payload.type === "JUMP_TO_STATE":

docs/Walkthrough.md

@@ -46,10 +46,12 @@ const DevTools = createDevTools(
   // Consult their repositories to learn about those props.
   // Here, we put LogMonitor inside a DockMonitor.
   // Note: DockMonitor is visible by default.
-  <DockMonitor toggleVisibilityKey='ctrl-h'
-               changePositionKey='ctrl-q'
-               defaultIsVisible={true}>
-    <LogMonitor theme='tomorrow' />
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={true}
+  >
+    <LogMonitor theme="tomorrow" />
   </DockMonitor>
 );
 
@@ -60,9 +62,7 @@ Note that you can use `LogMonitor` directly without wrapping it in `DockMonitor`
 
 ```js
 // If you'd rather not use docking UI, use <LogMonitor> directly
-const DevTools = createDevTools(
-  <LogMonitor theme='solarized' />
-);
+const DevTools = createDevTools(<LogMonitor theme="solarized" />);
 ```
 
 #### Use `DevTools.instrument()` Store Enhancer
@@ -75,7 +75,7 @@ The easiest way to apply several store enhancers in a row is to use the [`compos
 
 You can add additional options to it: `DevTools.instrument({ maxAge: 50, shouldCatchErrors: true })`. See [`redux-devtools-instrument`'s API](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-instrument#api) for more details.
 
-It’s important that you should add `DevTools.instrument()` *after* `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it.
+It’s important that you should add `DevTools.instrument()` _after_ `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it.
 
 ##### `store/configureStore.js`
 
@@ -99,7 +99,9 @@ export default function configureStore(initialState) {
   // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)
   if (module.hot) {
     module.hot.accept('../reducers', () =>
-      store.replaceReducer(require('../reducers')/*.default if you use Babel 6+ */)
+      store.replaceReducer(
+        require('../reducers') /*.default if you use Babel 6+ */
+      )
     );
   }
 
@@ -126,7 +128,7 @@ function getDebugSessionKey() {
   // You can write custom logic here!
   // By default we try to read the key from ?debug_session=<key> in the address bar
   const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
-  return (matches && matches.length > 0)? matches[1] : null;
+  return matches && matches.length > 0 ? matches[1] : null;
 }
 
 export default function configureStore(initialState) {
@@ -181,7 +183,7 @@ export default function configureStore(initialState) {
   // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.
   // See https://github.com/rackt/redux/releases/tag/v3.1.0
   return createStore(rootReducer, initialState, enhancer);
-};
+}
 ```
 
 ##### `store/configureStore.dev.js`
@@ -205,7 +207,7 @@ function getDebugSessionKey() {
   // You can write custom logic here!
   // By default we try to read the key from ?debug_session=<key> in the address bar
   const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/);
-  return (matches && matches.length > 0)? matches[1] : null;
+  return matches && matches.length > 0 ? matches[1] : null;
 }
 
 export default function configureStore(initialState) {
@@ -216,7 +218,9 @@ export default function configureStore(initialState) {
   // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)
   if (module.hot) {
     module.hot.accept('../reducers', () =>
-      store.replaceReducer(require('../reducers')/*.default if you use Babel 6+ */)
+      store.replaceReducer(
+        require('../reducers') /*.default if you use Babel 6+ */
+      )
     );
   }
 
@@ -346,7 +350,11 @@ import { render } from 'react-dom';
 import DevTools from './containers/DevTools';
 
 export default function showDevTools(store) {
-  const popup = window.open(null, 'Redux DevTools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');
+  const popup = window.open(
+    null,
+    'Redux DevTools',
+    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+  );
   // Reload in case it already exists
   popup.location.reload();
 
@@ -366,11 +374,11 @@ Note that there are no useful props you can pass to the `DevTools` component oth
 
 ### Gotchas
 
-* **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators.
+- **Your reducers have to be pure and free of side effects to work correctly with DevTools.** For example, even generating a random ID in reducer makes it impure and non-deterministic. Instead, do this in action creators.
 
-* **Make sure to only apply `DevTools.instrument()` and render `<DevTools>` in development!** In production, this will be terribly slow because actions just accumulate forever. As described above, you need to use conditional `require`s and use `DefinePlugin` (Webpack) or `loose-envify` (Browserify) together with Uglify to remove the dead code. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly.
+- **Make sure to only apply `DevTools.instrument()` and render `<DevTools>` in development!** In production, this will be terribly slow because actions just accumulate forever. As described above, you need to use conditional `require`s and use `DefinePlugin` (Webpack) or `loose-envify` (Browserify) together with Uglify to remove the dead code. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/) that adds Redux DevTools handling the production case correctly.
 
-* **It is important that `DevTools.instrument()` store enhancer should be added to your middleware stack *after* `applyMiddleware` in the `compose`d functions, as `applyMiddleware` is potentially asynchronous.** Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk).
+- **It is important that `DevTools.instrument()` store enhancer should be added to your middleware stack _after_ `applyMiddleware` in the `compose`d functions, as `applyMiddleware` is potentially asynchronous.** Otherwise, DevTools won’t see the raw actions emitted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk).
 
 ### What Next?
 

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['devui/tests/setup.js']
+};

lerna.json

@@ -8,9 +8,5 @@
       "allowBranch": "master"
     }
   },
-  "ignoreChanges": [
-    "**/test/**",
-    "**/examples/**",
-    "**/*.md"
-  ]
+  "ignoreChanges": ["**/test/**", "**/examples/**", "**/*.md"]
 }

package.json

@@ -2,10 +2,15 @@
   "private": true,
   "devDependencies": {
     "babel-eslint": "^10.0.0",
-    "eslint-plugin-react": "7.4.0",
-    "eslint-plugin-flowtype": "3.2.0",
-    "lerna": "3.4.2",
-    "pre-commit": "^1.1.3"
+    "eslint": "^5.12.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "7.12.3",
+    "jest": "^24.1.0",
+    "lerna": "3.9.0",
+    "lint-staged": "^8.1.0",
+    "prettier": "^1.15.3"
   },
   "scripts": {
     "lerna": "lerna",
@@ -14,15 +19,29 @@
     "publish": "lerna publish",
     "canary": "lerna publish --canary preminor --npm-tag alpha",
     "next": "lerna publish --bump prerelease --npm-tag next",
-    "lint": "lerna run lint --since master -- --color",
-    "lint:all": "lerna run lint -- --color",
-    "test": "lerna run test --since master -- --colors",
-    "test:all": "lerna run test -- --colors"
+    "lint": "eslint '**/*.{js,jsx}' --cache",
+    "lint:fix": "eslint '**/*.{js,jsx}' --fix --cache",
+    "lint:all": "eslint '**/*.{js,jsx}'",
+    "prettify": "prettier '**/*.{js,jsx,json,css,html,md}' --ignore-path .eslintignore --single-quote --write",
+    "precommit": "lint-staged",
+    "test": "jest --onlyChanged",
+    "test:all": "jest"
   },
   "workspaces": [
     "packages/*"
   ],
-  "pre-commit": [
-    "lint"
-  ]
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "prettier --single-quote --write",
+      "yarn lint:fix",
+      "git add"
+    ],
+    "*.{json,css,html,md}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  }
 }

packages/d3tooltip/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015-loose", "stage-0"]
+  "presets": ["@babel/preset-env"]
 }