Merge branch 'master' into react-json-tree-ts

.eslintrc

@@ -1,11 +1,7 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": [
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier"
-  ],
   "globals": {
     "chrome": true
   },
@@ -17,17 +13,13 @@
   },
   "rules": {
     "eol-last": ["warn"],
-    "max-len": ["warn", { "code": 120 , "ignoreComments": true }],
+    "max-len": ["warn", { "code": 120, "ignoreComments": true }],
     "quotes": ["warn", "single", "avoid-escape"],
     "jsx-quotes": ["warn", "prefer-double"],
     "react/prop-types": 0,
     "prettier/prettier": "error"
   },
-  "plugins": [
+  "plugins": ["prettier", "react", "babel"],
-    "prettier",
-    "react",
-    "babel"
-  ],
   "settings": {
     "react": {
       "version": "detect"

.travis.yml

@@ -1,12 +1,13 @@
 sudo: false
 language: node_js
 node_js:
-  - "stable"
+  - 'stable'
 cache:
   yarn: true
   directories:
-    - "node_modules"
+    - 'node_modules'
 script:
   - yarn build:all
   - yarn lint:all
+  - yarn prettier:check
   - yarn test:all

package.json

@@ -38,7 +38,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" --cache",
     "lint:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix --cache",
     "lint:all": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "prettify": "prettier \"**/*.{js,jsx,ts,tsx,json,css,html,md}\" --write",
+    "prettify": "prettier --write .",
+    "prettier:check": "prettier --check .",
     "test": "jest --onlyChanged",
     "test:all": "jest"
   },
@@ -52,5 +53,16 @@
   ],
   "engines": {
     "node": ">=10.13.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   }
 }

packages/d3-state-visualizer/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

packages/devui/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

packages/react-base16-styling/package.json

@@ -19,6 +19,7 @@
     "src"
   ],
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/reduxjs/redux-devtools.git"

packages/react-dock/.babelrc

@@ -1,4 +1,8 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from", "react-hot-loader/babel"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "react-hot-loader/babel"
+  ]
 }

packages/react-dock/README.md

@@ -27,18 +27,18 @@ render() {
 
 #### Dock Props
 
-| Prop Name | Description |
+| Prop Name       | Description                                                                                                                                                                                                                                                                       |
-|-----------|-------------|
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| position | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`. |
+| position        | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`.                                                                                                                                                                                                             |
-| fluid | If `true`, resize dock proportionally on window resize. |
+| fluid           | If `true`, resize dock proportionally on window resize.                                                                                                                                                                                                                           |
-| size | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |
+| size            | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |
-| defaultSize | Default size of dock panel (used for uncontrolled `Dock` component) |
+| defaultSize     | Default size of dock panel (used for uncontrolled `Dock` component)                                                                                                                                                                                                               |
-| isVisible | If `true`, dock is visible |
+| isVisible       | If `true`, dock is visible                                                                                                                                                                                                                                                        |
-| dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |
+| dimMode         | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque`                                                                                             |
-| duration | Animation duration. Should be synced with transition animation in style properties |
+| duration        | Animation duration. Should be synced with transition animation in style properties                                                                                                                                                                                                |
-| dimStyle | Style for dim area |
+| dimStyle        | Style for dim area                                                                                                                                                                                                                                                                |
-| dockStyle | Style for dock |
+| dockStyle       | Style for dock                                                                                                                                                                                                                                                                    |
-| zIndex | Z-index for wrapper |
+| zIndex          | Z-index for wrapper                                                                                                                                                                                                                                                               |
-| onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |
+| onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular)                                                                                                                                                                                         |
-| onSizeChange | Fires when `Dock` wants to change `size` |
+| onSizeChange    | Fires when `Dock` wants to change `size`                                                                                                                                                                                                                                          |
-| children | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }`  |
+| children        | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }`                                                                                                               |

packages/react-dock/demo/index.html

@@ -2,11 +2,24 @@
 <html>
   <head>
     <title>React Dock</title>
-    <link href="http://fonts.googleapis.com/css?family=Noto+Sans|Roboto:400,300,500" rel="stylesheet" type="text/css">
+    <link
-    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
+      href="http://fonts.googleapis.com/css?family=Noto+Sans|Roboto:400,300,500"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css"
+      rel="stylesheet"
+    />
   </head>
   <body>
-<a href="https://github.com/alexkuz/react-dock"><img style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>
+    <a href="https://github.com/alexkuz/react-dock"
+      ><img
+        style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;"
+        src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67"
+        alt="Fork me on GitHub"
+        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"
+    /></a>
     <div id="root"></div>
     <script src="static/bundle.js"></script>
   </body>

packages/react-dock/src/Dock.js

@@ -244,7 +244,9 @@ export default class Dock extends Component {
   };
 
   componentDidMount() {
+    window.addEventListener('touchend', this.handleMouseUp);
     window.addEventListener('mouseup', this.handleMouseUp);
+    window.addEventListener('touchmove', this.handleMouseMove);
     window.addEventListener('mousemove', this.handleMouseMove);
     window.addEventListener('resize', this.handleResize);
 
@@ -254,7 +256,9 @@ export default class Dock extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('touchend', this.handleMouseUp);
     window.removeEventListener('mouseup', this.handleMouseUp);
+    window.removeEventListener('touchmove', this.handleMouseMove);
     window.removeEventListener('mousemove', this.handleMouseMove);
     window.removeEventListener('resize', this.handleResize);
   }
@@ -329,7 +333,11 @@ export default class Dock extends Component {
           <div style={dimStyles} onClick={this.handleDimClick} />
         )}
         <div style={dockStyles}>
-          <div style={resizerStyles} onMouseDown={this.handleMouseDown} />
+          <div
+            style={resizerStyles}
+            onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleMouseDown}
+          />
           <div style={styles.dockContent}>
             {typeof children === 'function'
               ? children({
@@ -401,11 +409,18 @@ export default class Dock extends Component {
 
   handleMouseMove = (e) => {
     if (!this.state.isResizing || this.state.isWindowResizing) return;
-    e.preventDefault();
+
+    if (!e.touches) e.preventDefault();
 
     const { position, fluid } = this.props;
     const { fullWidth, fullHeight, isControlled } = this.state;
-    const { clientX: x, clientY: y } = e;
+    let { clientX: x, clientY: y } = e;
+
+    if (e.touches) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    }
+
     let size;
 
     switch (position) {

packages/redux-devtools-chart-monitor/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

packages/redux-devtools-cli/src/api/schema_def.graphql

@@ -1,42 +1,42 @@
 # A list of options for the type of the report
 enum ReportType {
-    STATE
+  STATE
-    ACTION
+  ACTION
-    STATES
+  STATES
-    ACTIONS
+  ACTIONS
 }
 
 type Report {
   # Report ID
   id: ID!
   # Type of the report, can be: STATE, ACTION, STATES, ACTIONS
-  type: ReportType,
+  type: ReportType
   # Briefly what happened
-  title: String,
+  title: String
   # Details supplied by the user
-  description: String,
+  description: String
   # The last dispatched action before the report was sent
-  action: String,
+  action: String
   # Stringified actions or the state or both, which should be loaded the application to reproduce the exact behavior
-  payload: String,
+  payload: String
   # Stringified preloaded state object. Could be the initial state of the app or committed state (after dispatching COMMIT action or reaching maxAge)
-  preloadedState: String,
+  preloadedState: String
   # Screenshot url or blob as a string
-  screenshot: String,
+  screenshot: String
   # User Agent String
-  userAgent: String,
+  userAgent: String
   # Application version to group the reports and versioning
-  version: String,
+  version: String
   # Used to identify the user who sent the report
-  userId: String,
+  userId: String
   # More detailed data about the user, usually it's a stringified object
-  user: String,
+  user: String
   # Everything else you want to send
-  meta: String,
+  meta: String
   # Error message which invoked sending the report
-  exception: String,
+  exception: String
   # Id to identify the store in case there are multiple stores
-  instanceId: String,
+  instanceId: String
   # Timestamp when the report was added
   added: String
   # Id to identify the application (from apps table)

packages/redux-devtools-dock-monitor/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

packages/redux-devtools-log-monitor/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

packages/redux-devtools-slider-monitor/examples/todomvc/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "react-hot-loader/babel"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "react-hot-loader/babel"
+  ]
 }

packages/redux-devtools-test-generator/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-do-expressions"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-do-expressions"
+  ]
 }

packages/redux-devtools-trace-monitor/.babelrc

@@ -1,15 +1,13 @@
 {
-  "presets": [
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"],
-    "@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"
-  ],
   "plugins": [
-    ["@babel/plugin-transform-runtime", {
-      "regenerator": true
-    }],
     [
-      "@babel/plugin-proposal-decorators",
+      "@babel/plugin-transform-runtime",
-      { "legacy": true }
+      {
+        "regenerator": true
+      }
     ],
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-proposal-class-properties"
   ]
 }

packages/redux-devtools/examples/counter/.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "react-hot-loader/babel"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "react-hot-loader/babel"
+  ]
 }

packages/redux-devtools/examples/todomvc/.babelrc

@@ -1,4 +1,8 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-function-bind", "react-hot-loader/babel"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-function-bind",
+    "react-hot-loader/babel"
+  ]
 }

packages/redux-devtools/index.d.ts

@@ -2,8 +2,8 @@
 // Type definitions for redux-devtools 3.4.1
 // TypeScript Version: 2.8.1
 
-import * as React from "react";
+import * as React from 'react';
-import { StoreEnhancer } from "redux";
+import { StoreEnhancer } from 'redux';
 
 export interface DevTools {
   new (): JSX.ElementClass;