chore(*): upgrade prettier (#570)

* chore(*): upgrade prettier

* chore(*): upgrade prettier

babel.config.js

@@ -4,11 +4,11 @@ module.exports = {
     [
       '@babel/plugin-transform-runtime',
       {
-        regenerator: true
+        regenerator: true,
-      }
+      },
     ],
     ['@babel/plugin-proposal-decorators', { legacy: true }],
     '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-export-default-from'
+    '@babel/plugin-proposal-export-default-from',
-  ]
+  ],
 };

docs/Integrations/Remote.md

@@ -19,7 +19,7 @@ The client driver provides a way to connect to the server via websockets (see th
 ```js
 var socket = socketCluster.connect({
   hostname: 'localhost',
-  port: 8000
+  port: 8000,
 });
 ```
 
@@ -39,13 +39,13 @@ SocketCluster client handles reconnecting for you, but you still might want to k
 ##### JavaScript
 
 ```js
-socket.on('connect', status => {
+socket.on('connect', (status) => {
   // Here will come the next step
 });
-socket.on('disconnect', code => {
+socket.on('disconnect', (code) => {
   console.warn('Socket disconnected with code', code);
 });
-socket.on('error', error => {
+socket.on('error', (error) => {
   console.warn('Socket error', error);
 });
 ```
@@ -125,7 +125,7 @@ const message = {
   payload: state,
   id: socket.id,
   instanceId: window.btoa(location.href),
-  name: document.title
+  name: document.title,
 };
 socket.emit(socket.id ? 'log' : 'log-noid', message);
 ```

jest.config.js

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

package.json

@@ -11,7 +11,7 @@
     "jest": "^26.2.2",
     "lerna": "^3.22.1",
     "lint-staged": "^10.2.11",
-    "prettier": "^1.19.1"
+    "prettier": "^2.0.5"
   },
   "scripts": {
     "lerna": "lerna",

packages/d3-state-visualizer/README.md

@@ -1,5 +1,5 @@
-d3-state-visualizer
+# d3-state-visualizer
-===================
+
 Enables real-time visualization of your application state.
 
 Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer).
@@ -18,13 +18,13 @@ import { tree } from 'd3-state-visualizer';
 const appState = {
   todoStore: {
     todos: [
-      { title: 'd3'},
+      { title: 'd3' },
       { title: 'state' },
       { title: 'visualizer' },
-      { title: 'tree' }
+      { title: 'tree' },
     ],
-    completedCount: 1
+    completedCount: 1,
-  }
+  },
 };
 
 const render = tree(document.getElementById('root'), {
@@ -35,40 +35,42 @@ const render = tree(document.getElementById('root'), {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: {border: '1px solid black'},
+  style: { border: '1px solid black' },
-  tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2}
+  tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 
 render();
 ```
+
 ## Charts API
 
 The APIs are minimal and consists of a single function you provide with:
+
 - a DOM element
 - a plain old JS object for options.
 
 #### Tree
 
- This chart is a bit special as it accepts either one of the two following options, but **not both**:
+This chart is a bit special as it accepts either one of the two following options, but **not both**:
- 
+
 - `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree)
 - `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree).
 
 Other options are listed below and have reasonable default values if you want to omit them:
 
-Option                    | Type     | Default     | Description
+| Option                    | Type    | Default                                                                          | Description                                                                                                                                                                                                                                                                                  |
---------------------------|----------|-------------|-------------------------------------------------------------------------
+| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-`id`                      | String   | `'d3svg'`   | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument
+| `id`                      | String  | `'d3svg'`                                                                        | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument                                                                                                                                                                   |
-`style`                   | Object   | `{}`        | Sets the CSS style of the chart
+| `style`                   | Object  | `{}`                                                                             | Sets the CSS style of the chart                                                                                                                                                                                                                                                              |
-`size`                    | Number   | `500`       | Sets size of the chart in pixels
+| `size`                    | Number  | `500`                                                                            | Sets size of the chart in pixels                                                                                                                                                                                                                                                             |
-`aspectRatio`             | Float    | `1.0`       | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works
+| `aspectRatio`             | Float   | `1.0`                                                                            | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
-`widthBetweenNodesCoeff`  | Float    | `1.0`       | Alters the horizontal space between each node
+| `widthBetweenNodesCoeff`  | Float   | `1.0`                                                                            | Alters the horizontal space between each node                                                                                                                                                                                                                                                |
-`heightBetweenNodesCoeff` | Float    | `1.0`       | Alters the vertical space between each node
+| `heightBetweenNodesCoeff` | Float   | `1.0`                                                                            | Alters the vertical space between each node                                                                                                                                                                                                                                                  |
-`isSorted`                | Boolean  | `false`     | Sorts the chart in alphabetical order
+| `isSorted`                | Boolean | `false`                                                                          | Sorts the chart in alphabetical order                                                                                                                                                                                                                                                        |
-`transitionDuration`      | Number   | `750`       | Sets the duration of all the transitions used by the chart
+| `transitionDuration`      | Number  | `750`                                                                            | Sets the duration of all the transitions used by the chart                                                                                                                                                                                                                                   |
-`tooltipOptions`          | Object   | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes
+| `tooltipOptions`          | Object  | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes                                                                                                                               |
-`rootKeyName`             | String   | `'state'`   | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option
+| `rootKeyName`             | String  | `'state'`                                                                        | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option                                                                                                                                                                          |
-`pushMethod`              | String   | `'push'`    | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option
+| `pushMethod`              | String  | `'push'`                                                                         | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option                                                                                                                                                                |
 
 More to come...
 
@@ -80,4 +82,4 @@ More to come...
 
 ## Roadmap
 
-* Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.
+- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.

packages/d3-state-visualizer/examples/tree/index.html

@@ -1,42 +1,39 @@
 <html>
-<head>
+  <head>
-	<title>State tree with d3-state-visualizer</title>
+    <title>State tree with d3-state-visualizer</title>
-	<style type="text/css">
+    <style type="text/css">
+      .node {
+        cursor: pointer;
+      }
 
-		.node {
+      .nodeCircle {
-			cursor: pointer;
+        stroke: black;
-		}
+        stroke-width: 1.5px;
+      }
 
-		.nodeCircle {
+      .nodeText {
-			stroke: black;
+        font-family: sans-serif;
-			stroke-width: 1.5px;
+        font-size: 10px;
-		}
+      }
 
-		.nodeText {
+      .link {
-			font-family: sans-serif;
+        fill: none;
-			font-size: 10px;
+        stroke: #ccc;
-		}
+        stroke-width: 1.5px;
+      }
 
-		.link {
+      .tooltip {
-			fill: none;
+        font-family: Consolas, Menlo, Monaco, monospace;
-			stroke: #ccc;
+        font-size: 0.8em;
-			stroke-width: 1.5px;
+        background: rgba(0, 0, 0, 0.5);
-		}
+        color: white;
-
+        padding: 10px;
-		.tooltip {
+        border-radius: 5px;
-			font-family: Consolas, Menlo, Monaco, monospace;
+      }
-			font-size: 0.8em;
+    </style>
-			background: rgba(0, 0, 0, 0.5);
+  </head>
-			color: white;
+  <body>
-			padding: 10px;
+    <div id="root"></div>
-			border-radius: 5px;
+    <script src="/static/bundle.js"></script>
-		}
+  </body>
-
-	</style>
-</head>
-<body>
-<div id="root">
-</div>
-<script src="/static/bundle.js"></script>
-</body>
 </html>

packages/d3-state-visualizer/examples/tree/index.js

@@ -6,18 +6,18 @@ const appState = {
       { title: 'd3' },
       { title: 'state' },
       { title: 'visualizer' },
-      { title: 'tree' }
+      { title: 'tree' },
     ],
     completedCount: 1,
-    alphabeticalOrder: true
+    alphabeticalOrder: true,
   },
   someStore: {
     someProperty: 0,
     someObject: {
       anotherProperty: 'value',
-      someArray: [0, 1, 2]
+      someArray: [0, 1, 2],
-    }
+    },
-  }
+  },
 };
 
 const render = tree(document.getElementById('root'), {
@@ -29,7 +29,7 @@ const render = tree(document.getElementById('root'), {
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
   style: { border: '1px solid black' },
-  tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }
+  tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
 });
 
 render();

packages/d3-state-visualizer/examples/tree/server.js

@@ -7,9 +7,9 @@ new WebpackDevServer(webpack(config), {
   hot: true,
   historyApiFallback: true,
   stats: {
-    colors: true
+    colors: true,
-  }
+  },
-}).listen(3000, 'localhost', function(err) {
+}).listen(3000, 'localhost', function (err) {
   if (err) {
     // eslint-disable-next-line no-console
     console.log(err);

packages/d3-state-visualizer/examples/tree/webpack.config.js

@@ -7,16 +7,16 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
-    './index'
+    './index',
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/static/'
+    publicPath: '/static/',
   },
   plugins: [new webpack.HotModuleReplacementPlugin()],
   resolve: {
-    extensions: ['.js']
+    extensions: ['.js'],
   },
   module: {
     rules: [
@@ -24,8 +24,8 @@ module.exports = {
         test: /\.js$/,
         loaders: ['babel-loader'],
         exclude: /node_modules/,
-        include: __dirname
+        include: __dirname,
-      }
+      },
-    ]
+    ],
-  }
+  },
 };

packages/d3-state-visualizer/src/charts/tree/sortAndSerialize.js

@@ -13,7 +13,7 @@ function sortObject(obj, strict) {
     const tObj = {};
     Object.keys(obj)
       .sort()
-      .forEach(key => (tObj[key] = sortObject(obj[key])));
+      .forEach((key) => (tObj[key] = sortObject(obj[key])));
     return tObj;
   }
 

packages/d3-state-visualizer/src/charts/tree/tree.js

@@ -6,7 +6,7 @@ import {
   getTooltipString,
   toggleChildren,
   visit,
-  getNodeGroupByDepthCount
+  getNodeGroupByDepthCount,
 } from './utils';
 import d3tooltip from 'd3tooltip';
 
@@ -21,20 +21,20 @@ const defaultOptions = {
       colors: {
         default: '#ccc',
         collapsed: 'lightsteelblue',
-        parent: 'white'
+        parent: 'white',
       },
-      radius: 7
+      radius: 7,
     },
     text: {
       colors: {
         default: 'black',
-        hover: 'skyblue'
+        hover: 'skyblue',
-      }
+      },
     },
     link: {
       stroke: '#000',
-      fill: 'none'
+      fill: 'none',
-    }
+    },
   },
   size: 500,
   aspectRatio: 1.0,
@@ -43,7 +43,7 @@ const defaultOptions = {
     top: 10,
     right: 10,
     bottom: 10,
-    left: 50
+    left: 50,
   },
   isSorted: false,
   heightBetweenNodesCoeff: 2,
@@ -57,13 +57,13 @@ const defaultOptions = {
     right: undefined,
     offset: {
       left: 0,
-      top: 0
+      top: 0,
     },
-    style: undefined
+    style: undefined,
-  }
+  },
 };
 
-export default function(DOMNode, options = {}) {
+export default function (DOMNode, options = {}) {
   const {
     id,
     style,
@@ -81,7 +81,7 @@ export default function(DOMNode, options = {}) {
     pushMethod,
     tree,
     tooltipOptions,
-    onClickText
+    onClickText,
   } = deepmerge(defaultOptions, options);
 
   const width = size - margin.left - margin.right;
@@ -91,7 +91,7 @@ export default function(DOMNode, options = {}) {
 
   const attr = {
     id,
-    preserveAspectRatio: 'xMinYMin slice'
+    preserveAspectRatio: 'xMinYMin slice',
   };
 
   if (!style.width) {
@@ -103,10 +103,7 @@ export default function(DOMNode, options = {}) {
   }
 
   const root = d3.select(DOMNode);
-  const zoom = d3.behavior
+  const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
-    .zoom()
-    .scaleExtent([0.1, 3])
-    .scale(initialZoom);
   const vis = root
     .append('svg')
     .attr(attr)
@@ -121,7 +118,7 @@ export default function(DOMNode, options = {}) {
     .attr({
       transform: `translate(${margin.left + style.node.radius}, ${
         margin.top
-      }) scale(${initialZoom})`
+      }) scale(${initialZoom})`,
     });
 
   let layout = d3.layout.tree().size([width, height]);
@@ -141,8 +138,8 @@ export default function(DOMNode, options = {}) {
       id: 'root',
       parentId: null,
       x: height / 2,
-      y: 0
+      y: 0,
-    }
+    },
   };
 
   // traverses a map with node positions by going through the chain
@@ -169,7 +166,7 @@ export default function(DOMNode, options = {}) {
     if (isEmpty(data) || !data.name) {
       data = {
         name: 'error',
-        message: 'Please provide a state map or a tree structure'
+        message: 'Please provide a state map or a tree structure',
       };
     }
 
@@ -181,13 +178,13 @@ export default function(DOMNode, options = {}) {
     // top-level elemnt always has id "root"
     visit(
       data,
-      node => {
+      (node) => {
         maxLabelLength = Math.max(node.name.length, maxLabelLength);
         node.id = node.id || 'root';
       },
-      node =>
+      (node) =>
         node.children && node.children.length > 0
-          ? node.children.map(c => {
+          ? node.children.map((c) => {
               c.id = `${node.id || ''}|${c.name}`;
               return c;
             })
@@ -200,69 +197,69 @@ export default function(DOMNode, options = {}) {
 
     function update() {
       // path generator for links
-      const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
+      const diagonal = d3.svg.diagonal().projection((d) => [d.y, d.x]);
       // set tree dimensions and spacing between branches and nodes
       const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
 
       layout = layout.size([
         maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
-        width
+        width,
       ]);
 
       let nodes = layout.nodes(data);
       let links = layout.links(nodes);
 
       nodes.forEach(
-        node =>
+        (node) =>
           (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
       );
 
-      const nodePositions = nodes.map(n => ({
+      const nodePositions = nodes.map((n) => ({
         parentId: n.parent && n.parent.id,
         id: n.id,
         x: n.x,
-        y: n.y
+        y: n.y,
       }));
       const nodePositionsById = {};
-      nodePositions.forEach(node => (nodePositionsById[node.id] = node));
+      nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
 
       // process the node selection
       let node = vis
         .selectAll('g.node')
-        .property('__oldData__', d => d)
+        .property('__oldData__', (d) => d)
-        .data(nodes, d => d.id || (d.id = ++nodeIndex));
+        .data(nodes, (d) => d.id || (d.id = ++nodeIndex));
       let nodeEnter = node
         .enter()
         .append('g')
         .attr({
           class: 'node',
-          transform: d => {
+          transform: (d) => {
             const position = findParentNodePosition(
               nodePositionsById,
               d.id,
-              n => previousNodePositionsById[n.id]
+              (n) => previousNodePositionsById[n.id]
             );
             const previousPosition =
               (position && previousNodePositionsById[position.id]) ||
               previousNodePositionsById.root;
             return `translate(${previousPosition.y},${previousPosition.x})`;
-          }
+          },
         })
         .style({
           fill: style.text.colors.default,
-          cursor: 'pointer'
+          cursor: 'pointer',
         })
         .on({
           mouseover: function mouseover() {
             d3.select(this).style({
-              fill: style.text.colors.hover
+              fill: style.text.colors.hover,
             });
           },
           mouseout: function mouseout() {
             d3.select(this).style({
-              fill: style.text.colors.default
+              fill: style.text.colors.default,
             });
-          }
+          },
         });
 
       if (!tooltipOptions.disabled) {
@@ -280,14 +277,14 @@ export default function(DOMNode, options = {}) {
         .append('circle')
         .attr({
           class: 'nodeCircle',
-          r: 0
+          r: 0,
         })
         .on({
-          click: clickedNode => {
+          click: (clickedNode) => {
             if (d3.event.defaultPrevented) return;
             toggleChildren(clickedNode);
             update();
-          }
+          },
         });
 
       nodeEnterInnerGroup
@@ -296,29 +293,29 @@ export default function(DOMNode, options = {}) {
           class: 'nodeText',
           'text-anchor': 'middle',
           transform: 'translate(0,0)',
-          dy: '.35em'
+          dy: '.35em',
         })
         .style({
-          'fill-opacity': 0
+          'fill-opacity': 0,
         })
-        .text(d => d.name)
+        .text((d) => d.name)
         .on({
-          click: onClickText
+          click: onClickText,
         });
 
       // update the text to reflect whether node has children or not
-      node.select('text').text(d => d.name);
+      node.select('text').text((d) => d.name);
 
       // change the circle fill depending on whether it has children and is collapsed
       node.select('circle').style({
         stroke: 'black',
         'stroke-width': '1.5px',
-        fill: d =>
+        fill: (d) =>
           d._children
             ? style.node.colors.collapsed
             : d.children
             ? style.node.colors.parent
-            : style.node.colors.default
+            : style.node.colors.default,
       });
 
       // transition nodes to their new position
@@ -326,7 +323,7 @@ export default function(DOMNode, options = {}) {
         .transition()
         .duration(transitionDuration)
         .attr({
-          transform: d => `translate(${d.y},${d.x})`
+          transform: (d) => `translate(${d.y},${d.x})`,
         });
 
       // ensure circle radius is correct
@@ -342,7 +339,7 @@ export default function(DOMNode, options = {}) {
               (d.children || d._children ? -1 : 1) *
               (this.getBBox().width / 2 + style.node.radius + 5);
             return `translate(${x},0)`;
-          }
+          },
         });
 
       // blink updated nodes
@@ -366,17 +363,17 @@ export default function(DOMNode, options = {}) {
         .transition()
         .duration(transitionDuration)
         .attr({
-          transform: d => {
+          transform: (d) => {
             const position = findParentNodePosition(
               previousNodePositionsById,
               d.id,
-              n => nodePositionsById[n.id]
+              (n) => nodePositionsById[n.id]
             );
             const futurePosition =
               (position && nodePositionsById[position.id]) ||
               nodePositionsById.root;
             return `translate(${futurePosition.y},${futurePosition.x})`;
-          }
+          },
         })
         .remove();
 
@@ -385,7 +382,7 @@ export default function(DOMNode, options = {}) {
       nodeExit.select('text').style('fill-opacity', 0);
 
       // update the links
-      let link = vis.selectAll('path.link').data(links, d => d.target.id);
+      let link = vis.selectAll('path.link').data(links, (d) => d.target.id);
 
       // enter any new links at the parent's previous position
       link
@@ -393,30 +390,27 @@ export default function(DOMNode, options = {}) {
         .insert('path', 'g')
         .attr({
           class: 'link',
-          d: d => {
+          d: (d) => {
             const position = findParentNodePosition(
               nodePositionsById,
               d.target.id,
-              n => previousNodePositionsById[n.id]
+              (n) => previousNodePositionsById[n.id]
             );
             const previousPosition =
               (position && previousNodePositionsById[position.id]) ||
               previousNodePositionsById.root;
             return diagonal({
               source: previousPosition,
-              target: previousPosition
+              target: previousPosition,
             });
-          }
+          },
         })
         .style(style.link);
 
       // transition links to their new position
-      link
+      link.transition().duration(transitionDuration).attr({
-        .transition()
+        d: diagonal,
-        .duration(transitionDuration)
+      });
-        .attr({
-          d: diagonal
-        });
 
       // transition exiting nodes to the parent's new position
       link
@@ -424,20 +418,20 @@ export default function(DOMNode, options = {}) {
         .transition()
         .duration(transitionDuration)
         .attr({
-          d: d => {
+          d: (d) => {
             const position = findParentNodePosition(
               previousNodePositionsById,
               d.target.id,
-              n => nodePositionsById[n.id]
+              (n) => nodePositionsById[n.id]
             );
             const futurePosition =
               (position && nodePositionsById[position.id]) ||
               nodePositionsById.root;
             return diagonal({
               source: futurePosition,
-              target: futurePosition
+              target: futurePosition,
             });
-          }
+          },
         })
         .remove();
 

packages/d3-state-visualizer/src/charts/tree/utils.js

@@ -59,7 +59,7 @@ export function getNodeGroupByDepthCount(rootNode) {
 
     nodeGroupByDepthCount[depth + 1] += node.children.length;
 
-    node.children.forEach(childNode => {
+    node.children.forEach((childNode) => {
       traverseFrom(childNode, depth + 1);
     });
   };

packages/d3-state-visualizer/webpack.config.base.js

@@ -3,14 +3,14 @@
 module.exports = {
   module: {
     rules: [
-      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
+      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
-    ]
+    ],
   },
   output: {
     library: 'd3-state-visualizer',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
   },
   resolve: {
-    extensions: ['.js']
+    extensions: ['.js'],
-  }
+  },
 };

packages/d3-state-visualizer/webpack.config.development.js

@@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig);
 config.mode = 'development';
 config.plugins = [
   new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('development')
+    'process.env.NODE_ENV': JSON.stringify('development'),
-  })
+  }),
 ];
 
 module.exports = config;

packages/d3-state-visualizer/webpack.config.production.js

@@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig);
 config.mode = 'production';
 config.plugins = [
   new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('production')
+    'process.env.NODE_ENV': JSON.stringify('production'),
-  })
+  }),
 ];
 
 module.exports = config;

packages/d3tooltip/src/index.js

@@ -6,7 +6,7 @@ const defaultOptions = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
-  root: undefined
+  root: undefined,
 };
 
 export default function tooltip(d3, className = 'tooltip', options = {}) {
@@ -22,7 +22,7 @@ export default function tooltip(d3, className = 'tooltip', options = {}) {
 
   function tip(selection) {
     selection.on({
-      'mouseover.tip': node => {
+      'mouseover.tip': (node) => {
         let [mouseX, mouseY] = d3.mouse(rootNode);
         let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
 
@@ -36,22 +36,22 @@ export default function tooltip(d3, className = 'tooltip', options = {}) {
             'z-index': 1001,
             left: x + 'px',
             top: y + 'px',
-            ...styles
+            ...styles,
           })
           .html(() => text(node));
       },
 
-      'mousemove.tip': node => {
+      'mousemove.tip': (node) => {
         let [mouseX, mouseY] = d3.mouse(rootNode);
         let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
 
         el.style({
           left: x + 'px',
-          top: y + 'px'
+          top: y + 'px',
         }).html(() => text(node));
       },
 
-      'mouseout.tip': () => el.remove()
+      'mouseout.tip': () => el.remove(),
     });
   }
 

packages/d3tooltip/src/utils/index.js

@@ -3,5 +3,5 @@ import functor from './functor';
 
 export default {
   prependClass,
-  functor
+  functor,
 };

packages/d3tooltip/webpack.config.umd.js

@@ -3,27 +3,27 @@ const path = require('path');
 module.exports = (env = {}) => ({
   mode: 'production',
   entry: {
-    app: ['./src/index.js']
+    app: ['./src/index.js'],
   },
   output: {
     library: 'd3tooltip',
     libraryTarget: 'umd',
     path: path.resolve(__dirname, 'dist'),
-    filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js'
+    filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js',
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        exclude: /node_modules/
+        exclude: /node_modules/,
-      }
+      },
-    ]
+    ],
   },
   optimization: {
-    minimize: !!env.minimize
+    minimize: !!env.minimize,
   },
   performance: {
-    hints: false
+    hints: false,
-  }
+  },
 });

packages/devui/.storybook/config.js

@@ -13,7 +13,7 @@ addDecorator(
     showStoriesPanel: true,
     showAddonPanel: true,
     showSearchBox: false,
-    addonPanelInRight: true
+    addonPanelInRight: true,
   })
 );
 
@@ -24,7 +24,7 @@ addDecorator(withInfo);
 const req = require.context('../src/', true, /stories\/index\.js$/);
 
 function loadStories() {
-  req.keys().forEach(filename => req(filename));
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

packages/devui/.storybook/themeAddon/Panel.js

@@ -19,7 +19,7 @@ const themes = listThemes();
 export default class Panel extends React.Component {
   state = DEFAULT_THEME_STATE;
 
-  onChange = o => {
+  onChange = (o) => {
     const state = { [o.name.split(' ').slice(-1)[0]]: o.value };
     this.props.channel.emit(EVENT_ID_DATA, state);
     this.setState(state);
@@ -37,19 +37,19 @@ export default class Panel extends React.Component {
               type: 'select',
               name: 'theme',
               value: theme,
-              options: themes
+              options: themes,
             },
             {
               type: 'select',
               name: 'color scheme',
               value: scheme,
-              options: schemes
+              options: schemes,
             },
             {
               type: 'boolean',
               name: 'light',
-              value: light
+              value: light,
-            }
+            },
           ]}
           onFieldChange={this.onChange}
           onFieldClick={this.onClick}

packages/devui/.storybook/themeAddon/constant.js

@@ -5,5 +5,5 @@ export const CSS_CLASS = 'redux-devtools-storybook';
 export const DEFAULT_THEME_STATE = {
   theme: 'default',
   scheme: 'default',
-  light: true
+  light: true,
 };

packages/devui/.storybook/themeAddon/register.js

@@ -3,11 +3,11 @@ import addons from '@storybook/addons';
 import Panel from './Panel';
 import { ADDON_ID, PANEL_ID } from './constant';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, (api) => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Theme',
     render: ({ active }) =>
-      active ? <Panel channel={channel} api={api} /> : null
+      active ? <Panel channel={channel} api={api} /> : null,
   });
 });

packages/devui/.storybook/themeAddon/theme.js

@@ -16,7 +16,7 @@ class Theme extends React.Component {
     channel.removeListener(EVENT_ID_DATA, this.onChannel);
   }
 
-  onChannel = state => {
+  onChannel = (state) => {
     this.setState(state);
   };
 
@@ -25,4 +25,4 @@ class Theme extends React.Component {
   }
 }
 
-export const withTheme = story => <Theme>{story()}</Theme>;
+export const withTheme = (story) => <Theme>{story()}</Theme>;

packages/devui/src/Button/Button.js

@@ -21,7 +21,7 @@ export default class Button extends Component {
     );
   }
 
-  onMouseUp = e => {
+  onMouseUp = (e) => {
     e.target.blur();
   };
 
@@ -66,7 +66,7 @@ Button.propTypes = {
     'bottom-left',
     'bottom-right',
     'top-left',
-    'top-right'
+    'top-right',
   ]),
   onClick: PropTypes.func,
   type: PropTypes.string,
@@ -82,11 +82,11 @@ Button.propTypes = {
     'base0C',
     'base0D',
     'base0E',
-    'base0F'
+    'base0F',
   ]),
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };
 
 Button.defaultProps = {
-  tooltipPosition: 'top'
+  tooltipPosition: 'top',
 };

packages/devui/src/Button/stories/index.js

@@ -28,7 +28,7 @@ storiesOf('Button', module)
           'bottom-left',
           'bottom-right',
           'top-left',
-          'top-right'
+          'top-right',
         ])}
         primary={boolean('primary', true)}
         size={select('size', ['big', 'normal', 'small'], 'normal')}
@@ -52,7 +52,7 @@ storiesOf('Button', module)
             'base0C',
             'base0D',
             'base0E',
-            'base0F'
+            'base0F',
           ],
           'base08'
         )}
@@ -65,7 +65,7 @@ storiesOf('Button', module)
           'bottom-left',
           'bottom-right',
           'top-left',
-          'top-right'
+          'top-right',
         ])}
         size={select('size', ['big', 'normal', 'small'], 'normal')}
         disabled={boolean('Disabled', false)}

packages/devui/src/Button/styles/common.js

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 import { fadeIn } from '../../utils/animations';
 import colorEffect from '../../utils/color';
 
-const both = tooltipPosition => {
+const both = (tooltipPosition) => {
   switch (tooltipPosition) {
     case 'bottom':
       return `
@@ -46,7 +46,7 @@ const both = tooltipPosition => {
   }
 };
 
-const before = tooltipPosition => {
+const before = (tooltipPosition) => {
   switch (tooltipPosition) {
     case 'bottom-left':
       return `
@@ -110,13 +110,13 @@ const after = (tooltipPosition, color) => {
   }
 };
 
-const getDirection = tooltipPosition => {
+const getDirection = (tooltipPosition) => {
   return tooltipPosition.indexOf('-') > 0
     ? tooltipPosition.substring(0, tooltipPosition.indexOf('-'))
     : tooltipPosition;
 };
 
-const getSize = size => {
+const getSize = (size) => {
   switch (size) {
     case 'big':
       return 'min-height: 34px; padding: 2px 12px;';
@@ -146,7 +146,7 @@ export const commonStyle = ({ theme, mark, size }) => css`
     }
 
     ${mark &&
-      `
+    `
     background-color: ${colorEffect(
       theme[mark],
       'fade',
@@ -169,7 +169,7 @@ export const tooltipStyle = ({
   tooltipTitle,
   tooltipPosition,
   mark,
-  size
+  size,
 }) => css`
   ${commonStyle({ theme, mark, size })}
 
@@ -208,7 +208,8 @@ export const tooltipStyle = ({
     ${theme.type === 'material' ? `animation: ${fadeIn} 500ms;` : ''}
   }
 
-  ${theme.type !== 'material' &&
+  ${
+    theme.type !== 'material' &&
     `
   &:after {
     content: "";
@@ -218,7 +219,8 @@ export const tooltipStyle = ({
     ${after(tooltipPosition, theme.base02)}
     ${getDirection(tooltipPosition)}: 7px;
   }
-  `}
+  `
+  }
 
   &:hover:after,
   &:hover:before {

packages/devui/src/Button/styles/default.js

@@ -33,14 +33,16 @@ export const style = ({ theme, primary, disabled }) => css`
   `
   }
 
-  ${!disabled &&
+  ${
+    !disabled &&
     `
   &:hover,
   &:focus {
     background-color: ${primary ? theme.base07 : theme.base02};
     box-shadow: 1px 1px 2px ${theme.base03};
   }
- `}
+ `
+  }
   &:focus {
     border: 1px solid ${theme.base0D};
   }

packages/devui/src/Container/index.js

@@ -26,7 +26,7 @@ Container.propTypes = {
   children: PropTypes.node,
   themeData: PropTypes.object,
   theme: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 export default Container;

packages/devui/src/Container/styles/index.js

@@ -6,8 +6,8 @@ export const MainContainerWrapper = styled.div`
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
-  background-color: ${props => color(props.theme.base00, 'lighten', 0.03)};
+  background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
-  color: ${props => props.theme.base07};
+  color: ${(props) => props.theme.base07};
   font-size: 12px;
 
   div,
@@ -16,13 +16,13 @@ export const MainContainerWrapper = styled.div`
   keygen,
   select,
   button {
-    font-family: ${props => props.theme.fontFamily || 'monaco, monospace'};
+    font-family: ${(props) => props.theme.fontFamily || 'monaco, monospace'};
   }
 
   .CodeMirror div,
   pre,
   .monitor-LogMonitor * {
-    font-family: ${props =>
+    font-family: ${(props) =>
       props.theme.codeFontFamily || props.theme.fontFamily || 'monospace'};
   }
 

packages/devui/src/ContextMenu/ContextMenu.js

@@ -30,11 +30,11 @@ export default class ContextMenu extends Component {
     }
   }
 
-  onMouseUp = e => {
+  onMouseUp = (e) => {
     e.target.blur();
   };
 
-  onClick = e => {
+  onClick = (e) => {
     this.props.onClick(e.target.value);
   };
 
@@ -64,7 +64,7 @@ export default class ContextMenu extends Component {
   }
 
   updateItems(items) {
-    this.items = items.map(item => {
+    this.items = items.map((item) => {
       const value = item.value || item.name;
       if (item.type === 'button') return item;
       return (
@@ -80,7 +80,7 @@ export default class ContextMenu extends Component {
     });
   }
 
-  menuRef = c => {
+  menuRef = (c) => {
     this.menu = c;
   };
 
@@ -103,5 +103,5 @@ ContextMenu.propTypes = {
   onClick: PropTypes.func.isRequired,
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
-  visible: PropTypes.bool
+  visible: PropTypes.bool,
 };

packages/devui/src/ContextMenu/stories/data.js

@@ -1,11 +1,11 @@
 export const items = [
   {
-    name: 'Menu Item 1'
+    name: 'Menu Item 1',
   },
   {
-    name: 'Menu Item 2'
+    name: 'Menu Item 2',
   },
   {
-    name: 'Menu Item 3'
+    name: 'Menu Item 3',
-  }
+  },
 ];

packages/devui/src/Dialog/Dialog.js

@@ -13,11 +13,11 @@ export default class Dialog extends (PureComponent || Component) {
     else this.props.onSubmit();
   };
 
-  getFormButtonRef = node => {
+  getFormButtonRef = (node) => {
     this.submitButton = node;
   };
 
-  onKeyDown = e => {
+  onKeyDown = (e) => {
     if (e.keyCode === 27 /* esc */) {
       e.preventDefault();
       this.props.onDismiss(false);
@@ -81,7 +81,7 @@ export default class Dialog extends (PureComponent || Component) {
                         onClick={this.onSubmit}
                       >
                         {submitText}
-                      </Button>
+                      </Button>,
                     ]
                   : actions}
               </div>
@@ -111,5 +111,5 @@ Dialog.propTypes = {
   modal: PropTypes.bool,
   onDismiss: PropTypes.func,
   onSubmit: PropTypes.func,
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };

packages/devui/src/Editor/Editor.js

@@ -18,7 +18,7 @@ export default class Editor extends Component {
       readOnly: this.props.readOnly,
       autofocus: this.props.autofocus,
       foldGutter: this.props.foldGutter,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     });
 
     if (this.props.onChange) {
@@ -56,7 +56,7 @@ export default class Editor extends Component {
     this.cm = null;
   }
 
-  getRef = node => {
+  getRef = (node) => {
     this.node = node;
   };
 
@@ -74,7 +74,7 @@ Editor.propTypes = {
   theme: PropTypes.object,
   foldGutter: PropTypes.bool,
   autofocus: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 Editor.defaultProps = {
@@ -84,5 +84,5 @@ Editor.defaultProps = {
   lineWrapping: false,
   readOnly: false,
   foldGutter: true,
-  autofocus: false
+  autofocus: false,
 };

packages/devui/src/Editor/stories/WithTabs.js

@@ -14,7 +14,7 @@ const value2 = `
 /* eslint-disable react/prop-types */
 export default class WithTabs extends Component {
   state = {
-    selected: 'Function 1'
+    selected: 'Function 1',
   };
 
   render() {
@@ -25,16 +25,16 @@ export default class WithTabs extends Component {
           {
             name: 'Function 1',
             component: Editor,
-            selector: () => ({ value: value1, lineNumbers })
+            selector: () => ({ value: value1, lineNumbers }),
           },
           {
             name: 'Function 2',
             component: Editor,
-            selector: () => ({ value: value2, lineNumbers })
+            selector: () => ({ value: value2, lineNumbers }),
-          }
+          },
         ]}
         selected={this.state.selected}
-        onClick={selected => {
+        onClick={(selected) => {
           this.setState({ selected });
         }}
         align={select('align', ['left', 'right', 'center'], 'left')}

packages/devui/src/Editor/styles/index.js

@@ -10,7 +10,7 @@ export const defaultStyle = `
   }
 `;
 
-export const themedStyle = theme => css`
+export const themedStyle = (theme) => css`
   height: 100%;
 
   > div {

packages/devui/src/Form/Form.js

@@ -49,5 +49,5 @@ Form.propTypes = {
   formData: PropTypes.any,
   widgets: PropTypes.objectOf(
     PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  )
+  ),
 };

packages/devui/src/Form/stories/index.js

@@ -22,6 +22,6 @@ storiesOf('Form', module)
     {
       info:
         'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' +
-        ' with custom widgets.'
+        ' with custom widgets.',
     }
   );

packages/devui/src/Form/stories/schema.js

@@ -7,83 +7,83 @@ module.exports = {
     properties: {
       name: {
         type: 'string',
-        title: 'Full name'
+        title: 'Full name',
       },
       age: {
         type: 'integer',
-        title: 'Age'
+        title: 'Age',
       },
       bio: {
         type: 'string',
-        title: 'Bio'
+        title: 'Bio',
       },
       password: {
         type: 'string',
         title: 'Password',
-        minLength: 3
+        minLength: 3,
       },
       multipleChoicesList: {
         type: 'array',
         title: 'A multiple choices list',
         items: {
           type: 'string',
-          enum: ['foo', 'bar', 'fuzz']
+          enum: ['foo', 'bar', 'fuzz'],
         },
-        uniqueItems: true
+        uniqueItems: true,
       },
       numberEnum: {
         type: 'number',
         title: 'Number enum',
-        enum: [1, 2, 3]
+        enum: [1, 2, 3],
       },
       numberEnumRadio: {
         type: 'number',
         title: 'Number enum',
-        enum: [1, 2, 3]
+        enum: [1, 2, 3],
       },
       integerRange: {
         title: 'Integer range',
         type: 'integer',
         minimum: 42,
-        maximum: 100
+        maximum: 100,
-      }
+      },
-    }
+    },
   },
   uiSchema: {
     name: {
-      'ui:autofocus': true
+      'ui:autofocus': true,
     },
     age: {
-      'ui:widget': 'updown'
+      'ui:widget': 'updown',
     },
     bio: {
-      'ui:widget': 'textarea'
+      'ui:widget': 'textarea',
     },
     password: {
       'ui:widget': 'password',
-      'ui:help': 'Hint: Make it strong!'
+      'ui:help': 'Hint: Make it strong!',
     },
     date: {
-      'ui:widget': 'alt-datetime'
+      'ui:widget': 'alt-datetime',
     },
     multipleChoicesList: {
-      'ui:widget': 'checkboxes'
+      'ui:widget': 'checkboxes',
     },
     numberEnumRadio: {
       'ui:widget': 'radio',
       'ui:options': {
-        inline: true
+        inline: true,
-      }
+      },
     },
     integerRange: {
-      'ui:widget': 'range'
+      'ui:widget': 'range',
-    }
+    },
   },
   formData: {
     name: 'Chuck Norris',
     age: 75,
     bio: 'Roundhouse kicking asses since 1940',
     password: 'noneed',
-    integerRange: 52
+    integerRange: 52,
-  }
+  },
 };

packages/devui/src/Notification/Notification.js

@@ -49,9 +49,9 @@ Notification.propTypes = {
   children: PropTypes.any.isRequired,
   type: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
   onClose: PropTypes.func,
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };
 
 Notification.defaultProps = {
-  type: 'info'
+  type: 'info',
 };

packages/devui/src/SegmentedControl/SegmentedControl.js

@@ -13,11 +13,11 @@ export default class SegmentedControl extends Component {
     );
   }
 
-  onClick = e => {
+  onClick = (e) => {
     this.props.onClick(e.target.value);
   };
 
-  onMouseUp = e => {
+  onMouseUp = (e) => {
     e.target.blur();
   };
 
@@ -25,7 +25,7 @@ export default class SegmentedControl extends Component {
     const { values, selected } = this.props;
     return (
       <SegmentedWrapper disabled={this.props.disabled} theme={this.props.theme}>
-        {values.map(button => (
+        {values.map((button) => (
           <button
             key={button}
             value={button}
@@ -46,5 +46,5 @@ SegmentedControl.propTypes = {
   selected: PropTypes.string,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };

packages/devui/src/Select/Select.js

@@ -23,12 +23,12 @@ Select.propTypes = {
   simpleValue: PropTypes.bool, // pass the value with label to onChange
   value: PropTypes.any, // initial field value
   valueKey: PropTypes.string, // path of the label value in option objects
-  openOuterUp: PropTypes.bool // value to control the opening direction
+  openOuterUp: PropTypes.bool, // value to control the opening direction
 };
 
 Select.defaultProps = {
   autosize: true,
   clearable: false,
   simpleValue: true,
-  menuMaxHeight: 200
+  menuMaxHeight: 200,
 };

packages/devui/src/Select/stories/index.js

@@ -42,6 +42,6 @@ storiesOf('Select', module)
     {
       info:
         'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' +
-        'and new props like `openOuterUp` and `menuMaxHeight`.'
+        'and new props like `openOuterUp` and `menuMaxHeight`.',
     }
   );

packages/devui/src/Select/stories/options.js

@@ -1,5 +1,5 @@
 export const options = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two' },
-  { value: 'hundred', label: 'One hundred' }
+  { value: 'hundred', label: 'One hundred' },
 ];

packages/devui/src/Slider/Slider.js

@@ -19,7 +19,7 @@ export default class Slider extends Component {
     );
   }
 
-  onChange = e => {
+  onChange = (e) => {
     this.props.onChange(parseFloat(e.target.value));
   };
 
@@ -64,7 +64,7 @@ Slider.propTypes = {
   withValue: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };
 
 Slider.defaultProps = { value: 0, min: 0, max: 100 };

packages/devui/src/Tabs/Tabs.js

@@ -15,11 +15,11 @@ export default class Tabs extends Component {
     }
   }
 
-  onMouseUp = e => {
+  onMouseUp = (e) => {
     e.target.blur();
   };
 
-  onClick = e => {
+  onClick = (e) => {
     this.props.onClick(e.target.value);
   };
 
@@ -89,7 +89,7 @@ Tabs.propTypes = {
   main: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   collapsible: PropTypes.bool,
-  position: PropTypes.oneOf(['left', 'right', 'center'])
+  position: PropTypes.oneOf(['left', 'right', 'center']),
 };
 
 Tabs.defaultProps = { position: 'left' };

packages/devui/src/Tabs/TabsHeader.js

@@ -15,7 +15,7 @@ export default class TabsHeader extends Component {
       visibleTabs: props.tabs.slice(),
       hiddenTabs: [],
       subMenuOpened: false,
-      contextMenu: undefined
+      contextMenu: undefined,
     };
     this.iconWidth = 0;
     this.hiddenTabsWidth = [];
@@ -154,22 +154,22 @@ export default class TabsHeader extends Component {
     this.setState({ subMenuOpened: false, contextMenu: undefined });
   };
 
-  getTabsWrapperRef = node => {
+  getTabsWrapperRef = (node) => {
     this.tabsWrapperRef = node;
   };
 
-  getTabsRef = node => {
+  getTabsRef = (node) => {
     this.tabsRef = node;
   };
 
-  expandMenu = e => {
+  expandMenu = (e) => {
     const rect = e.currentTarget.children[0].getBoundingClientRect();
     this.setState({
       contextMenu: {
         top: rect.top + 10,
-        left: rect.left
+        left: rect.left,
       },
-      subMenuOpened: true
+      subMenuOpened: true,
     });
   };
 
@@ -211,5 +211,5 @@ TabsHeader.propTypes = {
   onClick: PropTypes.func,
   position: PropTypes.string,
   collapsible: PropTypes.bool,
-  selected: PropTypes.string
+  selected: PropTypes.string,
 };

packages/devui/src/Tabs/stories/data.js

@@ -9,7 +9,7 @@ const Component = ({ selected }) => (
       justifyContent: 'center',
       width: '100%',
       height: '100%',
-      fontSize: '22px'
+      fontSize: '22px',
     }}
   >
     Selected {selected}
@@ -17,24 +17,24 @@ const Component = ({ selected }) => (
 );
 /* eslint-enable react/prop-types */
 
-const selector = tab => ({ selected: tab.name });
+const selector = (tab) => ({ selected: tab.name });
 
 export const tabs = [
   {
     name: 'Tab1',
     component: Component,
-    selector
+    selector,
   },
   {
     name: 'Tab2',
     component: Component,
-    selector
+    selector,
   },
   {
     name: 'Tab3',
     component: Component,
-    selector
+    selector,
-  }
+  },
 ];
 
 export const simple10Tabs = [];

packages/devui/src/Tabs/styles/common.js

@@ -11,12 +11,12 @@ export const TabsContainer = styled.div`
   height: 100%;
 
   > div > div:first-child {
-    ${props =>
+    ${(props) =>
       props.position !== 'left' &&
       `
       margin-left: auto !important;
     `}
-    ${props =>
+    ${(props) =>
       props.position === 'center' &&
       `
       margin-right: auto !important;

packages/devui/src/Tabs/styles/default.js

@@ -7,11 +7,13 @@ export const style = ({ theme, main }) => css`
   background-color: ${theme.base01};
   width: 100%;
   overflow: hidden;
-  ${!main &&
+  ${
+    !main &&
     `
   border-top: 1px solid ${theme.base01};
   border-bottom: 1px solid ${theme.base02};
-  `}
+  `
+  }
 
   > div {
     display: flex;

packages/devui/src/Tabs/styles/material.js

@@ -9,7 +9,7 @@ export const style = ({ theme, main }) => css`
   width: 100%;
   overflow: hidden;
   ${!main &&
-    `
+  `
   border-top: 1px solid ${theme.base01};
   border-bottom: 1px solid ${theme.base02};
   `}

packages/devui/src/Toolbar/stories/index.js

@@ -7,7 +7,7 @@ import {
   text,
   number,
   boolean,
-  select
+  select,
 } from '@storybook/addon-knobs';
 import PlayIcon from 'react-icons/lib/md/play-arrow';
 import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
@@ -21,7 +21,7 @@ import {
   Select,
   Slider,
   SegmentedControl,
-  Tabs
+  Tabs,
 } from '../../';
 import { options } from '../../Select/stories/options';
 import { simple10Tabs } from '../../Tabs/stories/data';
@@ -54,7 +54,7 @@ storiesOf('Toolbar', module)
             'bottom-left',
             'bottom-right',
             'top-left',
-            'top-right'
+            'top-right',
           ])}
           disabled={boolean('Disabled', false)}
           onClick={action('button clicked')}
@@ -72,7 +72,7 @@ storiesOf('Toolbar', module)
             'bottom-left',
             'bottom-right',
             'top-left',
-            'top-right'
+            'top-right',
           ])}
           disabled={boolean('Disabled', false)}
           onClick={action('button clicked')}
@@ -98,7 +98,7 @@ storiesOf('Toolbar', module)
             'bottom-left',
             'bottom-right',
             'top-left',
-            'top-right'
+            'top-right',
           ])}
           disabled={boolean('Disabled', false)}
           onClick={action('button clicked')}
@@ -123,7 +123,7 @@ storiesOf('Toolbar', module)
             'bottom-left',
             'bottom-right',
             'top-left',
-            'top-right'
+            'top-right',
           ])}
           disabled={boolean('Disabled', false)}
           onClick={action('button clicked')}
@@ -147,7 +147,7 @@ storiesOf('Toolbar', module)
               'bottom-left',
               'bottom-right',
               'top-left',
-              'top-right'
+              'top-right',
             ])}
             onClick={action('button clicked')}
           >
@@ -171,7 +171,7 @@ storiesOf('Toolbar', module)
               'bottom-left',
               'bottom-right',
               'top-left',
-              'top-right'
+              'top-right',
             ])}
             disabled
             onClick={action('previous state clicked')}
@@ -188,7 +188,7 @@ storiesOf('Toolbar', module)
               'bottom-left',
               'bottom-right',
               'top-left',
-              'top-right'
+              'top-right',
             ])}
             onClick={action('next state clicked')}
           >

packages/devui/src/Toolbar/styles/Divider.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 const Divider = styled.div`
-  background-color: ${props => props.theme.base02};
+  background-color: ${(props) => props.theme.base02};
-  box-shadow: 1px 1px 2px ${props => props.theme.base00};
+  box-shadow: 1px 1px 2px ${(props) => props.theme.base00};
-  height: ${props => props.theme.inputHeight || '30'}px;
+  height: ${(props) => props.theme.inputHeight || '30'}px;
   width: 1px;
   margin: auto 3px !important;
   flex-shrink: 0;

packages/devui/src/Toolbar/styles/Toolbar.js

@@ -5,24 +5,24 @@ const Toolbar = styled.div`
   flex-shrink: 0;
   box-sizing: border-box;
   width: 100%;
-  font-family: ${props => props.theme.fontFamily || 'monospace'};
+  font-family: ${(props) => props.theme.fontFamily || 'monospace'};
   font-size: 12px;
   line-height: 16px;
-  ${props => props.fullHeight && 'height: 100%;'}
+  ${(props) => props.fullHeight && 'height: 100%;'}
-  padding: ${props => (props.compact ? '0' : '5px')} 5px;
+  padding: ${(props) => (props.compact ? '0' : '5px')} 5px;
-  background-color: ${props => props.theme.base01};
+  background-color: ${(props) => props.theme.base01};
   text-align: center;
   position: relative;
   ${({ borderPosition, theme }) =>
     borderPosition && `border-${borderPosition}: 1px solid ${theme.base02};`}
   
   & > div {
-    margin: auto ${props => (props.noBorder ? '0' : '1px;')};
+    margin: auto ${(props) => (props.noBorder ? '0' : '1px;')};
   }
   
   & button {
     border-radius: 0;
-    ${props => props.noBorder && 'border-color: transparent;'}
+    ${(props) => props.noBorder && 'border-color: transparent;'}
     white-space: nowrap;
     box-shadow: none !important;
   }
@@ -37,7 +37,7 @@ const Toolbar = styled.div`
       cursor: pointer;
       border-radius: 0 !important;
       text-align: center;
-      background-color: ${props => props.theme.base01};
+      background-color: ${(props) => props.theme.base01};
     }
 
     .Select-menu-outer {

packages/devui/src/colorSchemes/atom-one-dark.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#56b6c2',
   base0D: '#61afef',
   base0E: '#c678dd',
-  base0F: '#be5046'
+  base0F: '#be5046',
 };

packages/devui/src/colorSchemes/default.js

@@ -18,5 +18,5 @@ export default {
   base0C: '#86c1b9',
   base0D: '#1155cc',
   base0E: '#aa17e6',
-  base0F: '#a16946'
+  base0F: '#a16946',
 };

packages/devui/src/colorSchemes/dracula.js

@@ -17,5 +17,5 @@ export default {
   base0C: '#a1efe4',
   base0D: '#62d6e8',
   base0E: '#b45bcf',
-  base0F: '#00f769'
+  base0F: '#00f769',
 };

packages/devui/src/colorSchemes/github.js

@@ -17,5 +17,5 @@ export default {
   base0C: '#0086b3',
   base0D: '#183691',
   base0E: '#795da3',
-  base0F: '#ed6a43'
+  base0F: '#ed6a43',
 };

packages/devui/src/colorSchemes/ir-black.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#c6c5fe',
   base0D: '#96cbfe',
   base0E: '#ff73fd',
-  base0F: '#b18a3d'
+  base0F: '#b18a3d',
 };

packages/devui/src/colorSchemes/macintosh.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#02abea',
   base0D: '#0000d3',
   base0E: '#4700a5',
-  base0F: '#90713a'
+  base0F: '#90713a',
 };

packages/devui/src/colorSchemes/materia.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#80CBC4',
   base0D: '#89DDFF',
   base0E: '#82AAFF',
-  base0F: '#EC5F67'
+  base0F: '#EC5F67',
 };

packages/devui/src/colorSchemes/oceanic-next.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#5FB3B3',
   base0D: '#6699CC',
   base0E: '#C594C5',
-  base0F: '#AB7967'
+  base0F: '#AB7967',
 };

packages/devui/src/colorSchemes/phd.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#72b9bf',
   base0D: '#5299bf',
   base0E: '#9989cc',
-  base0F: '#b08060'
+  base0F: '#b08060',
 };

packages/devui/src/colorSchemes/pico.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#29adff',
   base0D: '#83769c',
   base0E: '#ff77a8',
-  base0F: '#ffccaa'
+  base0F: '#ffccaa',
 };

packages/devui/src/colorSchemes/solar-flare.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#52CBB0',
   base0D: '#33B5E1',
   base0E: '#A363D5',
-  base0F: '#D73C9A'
+  base0F: '#D73C9A',
 };

packages/devui/src/colorSchemes/spacemacs.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#2d9574',
   base0D: '#4f97d7',
   base0E: '#a31db1',
-  base0F: '#b03060'
+  base0F: '#b03060',
 };

packages/devui/src/colorSchemes/unikitty.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#149bda',
   base0D: '#7864fa',
   base0E: '#b33ce8',
-  base0F: '#d41acd'
+  base0F: '#d41acd',
 };

packages/devui/src/colorSchemes/woodland.js

@@ -16,5 +16,5 @@ export default {
   base0C: '#6eb958',
   base0D: '#88a4d3',
   base0E: '#bb90e2',
-  base0F: '#b49368'
+  base0F: '#b49368',
 };

packages/devui/src/themes/default.js

@@ -1,4 +1,4 @@
-export default colors => ({
+export default (colors) => ({
   ...colors,
   fontFamily: "'Source Sans Pro', sans-serif",
   codeFontFamily: "'Source Code Pro', monospace",
@@ -10,5 +10,5 @@ export default colors => ({
   selectArrowWidth: 4, // Math.floor(theme.inputHeight / 7)
   inputInternalHeight: 28, // theme.inputHeight - theme.inputBorderWidth * 2
   inputBorderColor: colors.base02,
-  inputFocusedStyle: `border-color: ${colors.base0D}`
+  inputFocusedStyle: `border-color: ${colors.base0D}`,
 });

packages/devui/src/themes/material.js

@@ -1,8 +1,8 @@
-export default colors => ({
+export default (colors) => ({
   fontFamily: "'Roboto', sans-serif",
   codeFontFamily: "'Roboto Mono', monospace",
   inputPadding: 5,
   inputBorderRadius: 0,
   inputBorderColor: `transparent transparent ${colors.base02}`,
-  inputFocusedStyle: `box-shadow: inset 0 -2px 0 ${colors.base0D};`
+  inputFocusedStyle: `box-shadow: inset 0 -2px 0 ${colors.base0D};`,
 });

packages/devui/src/utils/animations.js

@@ -3,7 +3,7 @@ import { keyframes } from 'styled-components';
 export const spin = keyframes`
   to { transform: rotate(1turn); }
 `;
-export const spinner = theme => `
+export const spinner = (theme) => `
   animation: ${spin} 400ms infinite linear;
   width: ${theme.spinnerSize}px;
   height: ${theme.spinnerSize}px;
@@ -21,7 +21,7 @@ export const fadeIn = keyframes`
 `;
 
 // Based on https://github.com/mladenplavsic/css-ripple-effect
-export const ripple = theme => `
+export const ripple = (theme) => `
   & {
     position: relative;
     overflow: hidden;

packages/devui/src/utils/autoPrefix.js

@@ -1,2 +1,2 @@
 export const prefixSelectors = (tag, selectors, style) =>
-  selectors.map(selector => `${tag}::-${selector} ${style}`);
+  selectors.map((selector) => `${tag}::-${selector} ${style}`);

packages/devui/src/utils/color.js

@@ -8,9 +8,6 @@ import Color from 'color';
 */
 
 export default (color, effect, val) =>
-  new Color(color)
+  new Color(color)[effect](val).hsl().string();
-    [effect](val)
-    .hsl()
-    .string();
 
 // TODO: memoize it

packages/devui/src/utils/createStyledComponent.js

@@ -6,7 +6,7 @@ const getStyle = (styles, type) =>
 
 export default (styles, component) =>
   styled(component || 'div')`
-    ${props =>
+    ${(props) =>
       props.theme.type
         ? getStyle(styles, props.theme.type)
         : // used outside of container (theme provider)
@@ -15,7 +15,7 @@ export default (styles, component) =>
             'default'
           )({
             ...props,
-            theme: getDefaultTheme(props.theme)
+            theme: getDefaultTheme(props.theme),
           })}
   `;
 

packages/devui/src/utils/invertColors.js

@@ -8,7 +8,7 @@ function invertColors(theme) {
     base04: theme.base03,
     base05: theme.base02,
     base06: theme.base01,
-    base07: theme.base00
+    base07: theme.base00,
   };
 }
 

packages/devui/src/utils/theme.js

@@ -5,10 +5,7 @@ import * as additionalSchemes from '../colorSchemes';
 import invertColors from '../utils/invertColors';
 
 export const schemes = { ...baseSchemes, ...additionalSchemes };
-export const listSchemes = () =>
+export const listSchemes = () => Object.keys(schemes).slice(1).sort(); // remove `__esModule`
-  Object.keys(schemes)
-    .slice(1)
-    .sort(); // remove `__esModule`
 export const listThemes = () => Object.keys(themes);
 
 export const getTheme = ({ theme: type, scheme, light }) => {
@@ -23,7 +20,7 @@ export const getTheme = ({ theme: type, scheme, light }) => {
   let theme = {
     type,
     light,
-    ...themes.default(colors)
+    ...themes.default(colors),
   };
   if (type !== 'default') {
     theme = { ...theme, ...themes[type](colors) };

packages/devui/tests/Button.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Button } from '../src';
 
-describe('Button', function() {
+describe('Button', function () {
   it('renders correctly', () => {
     const wrapper = render(<Button>Text</Button>);
     expect(renderToJson(wrapper)).toMatchSnapshot();

packages/devui/tests/Container.test.js

@@ -3,7 +3,7 @@ import { render } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Container } from '../src';
 
-describe('Container', function() {
+describe('Container', function () {
   it('renders correctly', () => {
     const wrapper = render(
       <Container

packages/devui/tests/ContextMenu.test.js

@@ -4,7 +4,7 @@ import { renderToJson } from 'enzyme-to-json';
 import { ContextMenu } from '../src';
 import { items } from '../src/ContextMenu/stories/data';
 
-describe('ContextMenu', function() {
+describe('ContextMenu', function () {
   it('renders correctly', () => {
     const wrapper = render(
       <ContextMenu items={items} onClick={() => {}} x={100} y={100} />
@@ -17,10 +17,7 @@ describe('ContextMenu', function() {
       <ContextMenu items={items} onClick={onClick} x={100} y={100} />
     );
 
-    wrapper
+    wrapper.find('button').first().simulate('click');
-      .find('button')
-      .first()
-      .simulate('click');
     expect(onClick).toBeCalled();
   });
 });

packages/devui/tests/Dialog.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Dialog } from '../src';
 
-describe('Dialog', function() {
+describe('Dialog', function () {
   it('renders correctly', () => {
     const wrapper = render(<Dialog />);
     expect(renderToJson(wrapper)).toMatchSnapshot();
@@ -27,10 +27,7 @@ describe('Dialog', function() {
     const onDismiss = jest.fn();
     const wrapper = mount(<Dialog open onDismiss={onDismiss} />);
 
-    wrapper
+    wrapper.find('button').first().simulate('click');
-      .find('button')
-      .first()
-      .simulate('click');
     expect(onDismiss).toBeCalled();
   });
 
@@ -38,10 +35,7 @@ describe('Dialog', function() {
     const onSubmit = jest.fn();
     const wrapper = mount(<Dialog open onSubmit={onSubmit} />);
 
-    wrapper
+    wrapper.find('button').last().simulate('click');
-      .find('button')
-      .last()
-      .simulate('click');
     expect(onSubmit).toBeCalled();
   });
 });

packages/devui/tests/Editor.test.js

@@ -4,7 +4,7 @@ import { mountToJson } from 'enzyme-to-json';
 import { Editor } from '../src';
 import 'codemirror/mode/javascript/javascript';
 
-describe('Editor', function() {
+describe('Editor', function () {
   const getBoundingClientRect = jest.fn();
   const getClientRects = jest.fn();
 
@@ -19,7 +19,7 @@ describe('Editor', function() {
       return {
         item: () => null,
         length: 0,
-        [Symbol.iterator]: jest.fn()
+        [Symbol.iterator]: jest.fn(),
       };
     };
 

packages/devui/tests/Form.test.js

@@ -4,7 +4,7 @@ import { shallowToJson } from 'enzyme-to-json';
 import { Form } from '../src';
 import { schema, uiSchema, formData } from '../src/Form/stories/schema';
 
-describe('Form', function() {
+describe('Form', function () {
   it('renders correctly', () => {
     const wrapper = shallow(
       <Form formData={formData} schema={schema} uiSchema={uiSchema} />

packages/devui/tests/Notification.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Notification } from '../src';
 
-describe('Notification', function() {
+describe('Notification', function () {
   it('renders correctly', () => {
     const wrapper = render(<Notification>Message</Notification>);
     expect(renderToJson(wrapper)).toMatchSnapshot();

packages/devui/tests/SegmentedControl.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { SegmentedControl } from '../src';
 
-describe('SegmentedControl', function() {
+describe('SegmentedControl', function () {
   it('renders correctly', () => {
     const wrapper = render(
       <SegmentedControl
@@ -26,10 +26,7 @@ describe('SegmentedControl', function() {
       />
     );
 
-    wrapper
+    wrapper.find('button').first().simulate('click');
-      .find('button')
-      .first()
-      .simulate('click');
     expect(onClick).toBeCalled();
   });
 });

packages/devui/tests/Select.test.js

@@ -4,7 +4,7 @@ import { renderToJson, mountToJson } from 'enzyme-to-json';
 import { Select } from '../src';
 import { options } from '../src/Select/stories/options';
 
-describe('Select', function() {
+describe('Select', function () {
   it('renders correctly', () => {
     const wrapper = render(<Select options={options} onChange={() => {}} />);
     expect(renderToJson(wrapper)).toMatchSnapshot();

packages/devui/tests/Slider.test.js

@@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Slider } from '../src';
 
-describe('Slider', function() {
+describe('Slider', function () {
   it('renders correctly', () => {
     const wrapper = render(<Slider />);
     expect(renderToJson(wrapper)).toMatchSnapshot();

packages/devui/tests/Tabs.test.js

@@ -4,7 +4,7 @@ import { renderToJson } from 'enzyme-to-json';
 import { Tabs } from '../src';
 import { tabs, simple10Tabs } from '../src/Tabs/stories/data';
 
-describe('Tabs', function() {
+describe('Tabs', function () {
   it('renders correctly', () => {
     const wrapper = render(<Tabs tabs={tabs} onClick={() => {}} />);
     expect(renderToJson(wrapper)).toMatchSnapshot();
@@ -28,10 +28,7 @@ describe('Tabs', function() {
     const onClick = jest.fn();
     const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
 
-    wrapper
+    wrapper.find('button').first().simulate('click');
-      .find('button')
-      .first()
-      .simulate('click');
     expect(onClick).toBeCalled();
   });
 });

packages/devui/tests/Toolbar.test.js

@@ -3,7 +3,7 @@ import { render } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import { Toolbar, Divider, Spacer, Button } from '../src';
 
-describe('Toolbar', function() {
+describe('Toolbar', function () {
   it('renders correctly', () => {
     const wrapper = render(
       <Toolbar>

packages/map2tree/README.md

@@ -12,7 +12,7 @@ map2tree(
   someMap,
   (options = {
     key: 'state', // the name you want for as the root node of the output tree
-    pushMethod: 'push' // use 'unshift' to change the order children nodes are added
+    pushMethod: 'push', // use 'unshift' to change the order children nodes are added
   })
 );
 ```
@@ -26,14 +26,14 @@ const someMap = {
       { title: 'map', someNestedObject: { foo: 'bar' } },
       { title: 'to', someNestedArray: ['foo', 'bar'] },
       { title: 'tree' },
-      { title: 'map2tree' }
+      { title: 'map2tree' },
     ],
-    completedCount: 1
+    completedCount: 1,
   },
   otherReducer: {
     foo: 0,
-    bar: { key: 'value' }
+    bar: { key: 'value' },
-  }
+  },
 };
 ```
 

packages/map2tree/src/index.js

@@ -21,12 +21,12 @@ function getNode(tree, key) {
 
   visit(
     tree,
-    d => {
+    (d) => {
       if (d.name === key) {
         node = d;
       }
     },
-    d => d.children
+    (d) => d.children
   );
 
   return node;
@@ -61,7 +61,7 @@ export default function map2tree(
       for (let i = 0; i < value.length; i++) {
         newNode.children[pushMethod]({
           name: `${key}[${i}]`,
-          [isPlainObject(value[i]) ? 'object' : 'value']: value[i]
+          [isPlainObject(value[i]) ? 'object' : 'value']: value[i],
         });
       }
     } else if (isPlainObject(value)) {

packages/map2tree/test/map2tree.spec.js

@@ -11,12 +11,12 @@ test('# rootNodeKey', () => {
 describe('# shallow map', () => {
   test('## null', () => {
     const map = {
-      a: null
+      a: null,
     };
 
     const expected = {
       name: 'state',
-      children: [{ name: 'a', value: null }]
+      children: [{ name: 'a', value: null }],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -26,15 +26,15 @@ describe('# shallow map', () => {
   test('## value', () => {
     const map = {
       a: 'foo',
-      b: 'bar'
+      b: 'bar',
     };
 
     const expected = {
       name: 'state',
       children: [
         { name: 'a', value: 'foo' },
-        { name: 'b', value: 'bar' }
+        { name: 'b', value: 'bar' },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -43,12 +43,12 @@ describe('# shallow map', () => {
 
   test('## object', () => {
     const map = {
-      a: { aa: 'foo' }
+      a: { aa: 'foo' },
     };
 
     const expected = {
       name: 'state',
-      children: [{ name: 'a', children: [{ name: 'aa', value: 'foo' }] }]
+      children: [{ name: 'a', children: [{ name: 'aa', value: 'foo' }] }],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -57,7 +57,7 @@ describe('# shallow map', () => {
 
   test('## immutable Map', () => {
     const map = {
-      a: immutable.fromJS({ aa: 'foo', ab: 'bar' })
+      a: immutable.fromJS({ aa: 'foo', ab: 'bar' }),
     };
 
     const expected = {
@@ -67,10 +67,10 @@ describe('# shallow map', () => {
           name: 'a',
           children: [
             { name: 'aa', value: 'foo' },
-            { name: 'ab', value: 'bar' }
+            { name: 'ab', value: 'bar' },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -80,7 +80,7 @@ describe('# shallow map', () => {
 describe('# deep map', () => {
   test('## null', () => {
     const map = {
-      a: { aa: null }
+      a: { aa: null },
     };
 
     const expected = {
@@ -91,11 +91,11 @@ describe('# deep map', () => {
           children: [
             {
               name: 'aa',
-              value: null
+              value: null,
-            }
+            },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -104,7 +104,7 @@ describe('# deep map', () => {
 
   test('## object', () => {
     const map = {
-      a: { aa: { aaa: 'foo' } }
+      a: { aa: { aaa: 'foo' } },
     };
 
     const expected = {
@@ -115,11 +115,11 @@ describe('# deep map', () => {
           children: [
             {
               name: 'aa',
-              children: [{ name: 'aaa', value: 'foo' }]
+              children: [{ name: 'aaa', value: 'foo' }],
-            }
+            },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -129,7 +129,7 @@ describe('# deep map', () => {
 
 describe('# array map', () => {
   const map = {
-    a: [1, 2]
+    a: [1, 2],
   };
 
   test('## push', () => {
@@ -140,10 +140,10 @@ describe('# array map', () => {
           name: 'a',
           children: [
             { name: 'a[0]', value: 1 },
-            { name: 'a[1]', value: 2 }
+            { name: 'a[1]', value: 2 },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -159,10 +159,10 @@ describe('# array map', () => {
           name: 'a',
           children: [
             { name: 'a[1]', value: 2 },
-            { name: 'a[0]', value: 1 }
+            { name: 'a[0]', value: 1 },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map, options)).toEqual(expected);
@@ -171,7 +171,7 @@ describe('# array map', () => {
 
   test('## null', () => {
     const map = {
-      a: [null]
+      a: [null],
     };
 
     const expected = {
@@ -179,9 +179,9 @@ describe('# array map', () => {
       children: [
         {
           name: 'a',
-          children: [{ name: 'a[0]', value: null }]
+          children: [{ name: 'a[0]', value: null }],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -192,7 +192,7 @@ describe('# array map', () => {
 describe('# collection map', () => {
   test('## value', () => {
     const map = {
-      a: [{ aa: 1 }, { aa: 2 }]
+      a: [{ aa: 1 }, { aa: 2 }],
     };
 
     const expected = {
@@ -202,10 +202,10 @@ describe('# collection map', () => {
           name: 'a',
           children: [
             { name: 'a[0]', object: { aa: 1 } },
-            { name: 'a[1]', object: { aa: 2 } }
+            { name: 'a[1]', object: { aa: 2 } },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -214,7 +214,7 @@ describe('# collection map', () => {
 
   test('## object', () => {
     const map = {
-      a: [{ aa: { aaa: 'foo' } }]
+      a: [{ aa: { aaa: 'foo' } }],
     };
 
     const expected = {
@@ -222,9 +222,9 @@ describe('# collection map', () => {
       children: [
         {
           name: 'a',
-          children: [{ name: 'a[0]', object: { aa: { aaa: 'foo' } } }]
+          children: [{ name: 'a[0]', object: { aa: { aaa: 'foo' } } }],
-        }
+        },
-      ]
+      ],
     };
 
     expect(map2tree(map)).toEqual(expected);

packages/map2tree/webpack.config.umd.js

@@ -3,27 +3,27 @@ const path = require('path');
 module.exports = (env = {}) => ({
   mode: 'production',
   entry: {
-    app: ['./src/index.js']
+    app: ['./src/index.js'],
   },
   output: {
     library: 'd3tooltip',
     libraryTarget: 'umd',
     path: path.resolve(__dirname, 'dist'),
-    filename: env.minimize ? 'map2tree.min.js' : 'map2tree.js'
+    filename: env.minimize ? 'map2tree.min.js' : 'map2tree.js',
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        exclude: /node_modules/
+        exclude: /node_modules/,
-      }
+      },
-    ]
+    ],
   },
   optimization: {
-    minimize: !!env.minimize
+    minimize: !!env.minimize,
   },
   performance: {
-    hints: false
+    hints: false,
-  }
+  },
 });

packages/react-base16-styling/README.md

@@ -19,23 +19,23 @@ import base16Themes from './base16Themes';
 function getStylingFromBase16(base16Theme) {
   return {
     myComponent: {
-      backgroundColor: base16Theme.base00
+      backgroundColor: base16Theme.base00,
     },
 
     myComponentToggleColor({ style, className }, clickCount) {
       return {
         style: {
           ...style,
-          backgroundColor: clickCount % 2 ? 'red' : 'blue'
+          backgroundColor: clickCount % 2 ? 'red' : 'blue',
-        }
+        },
       };
-    }
+    },
   };
 }
 
 const createStylingFromTheme = createStyling(getStylingFromBase16, {
   defaultBase16: base16Themes.solarized,
-  base16Themes
+  base16Themes,
 });
 
 class MyComponent extends Component {

packages/react-base16-styling/src/index.js

@@ -11,7 +11,7 @@ const BASE16_KEYS = Object.keys(DEFAULT_BASE16);
 
 // we need a correcting factor, so that a dark, but not black background color
 // converts to bright enough inversed color
-const flip = x => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x);
+const flip = (x) => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x);
 
 const invertColor = flow(
   parse,
@@ -22,11 +22,11 @@ const invertColor = flow(
 );
 
 const merger = function merger(styling) {
-  return prevStyling => ({
+  return (prevStyling) => ({
     className: [prevStyling.className, styling.className]
       .filter(Boolean)
       .join(' '),
-    style: { ...(prevStyling.style || {}), ...(styling.style || {}) }
+    style: { ...(prevStyling.style || {}), ...(styling.style || {}) },
   });
 };
 
@@ -51,7 +51,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
         case 'function':
           return (styling, ...args) =>
             merger({
-              className: customStyling
+              className: customStyling,
             })(defaultStyling(styling, ...args));
       }
       break;
@@ -64,7 +64,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
         case 'function':
           return (styling, ...args) =>
             merger({
-              style: customStyling
+              style: customStyling,
             })(defaultStyling(styling, ...args));
       }
       break;
@@ -74,7 +74,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
           return (styling, ...args) =>
             customStyling(
               merger(styling)({
-                className: defaultStyling
+                className: defaultStyling,
               }),
               ...args
             );
@@ -82,7 +82,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
           return (styling, ...args) =>
             customStyling(
               merger(styling)({
-                style: defaultStyling
+                style: defaultStyling,
               }),
               ...args
             );
@@ -120,7 +120,7 @@ const getStylingByKeys = (mergedStyling, keys, ...args) => {
     keys = [keys];
   }
 
-  const styles = keys.map(key => mergedStyling[key]).filter(Boolean);
+  const styles = keys.map((key) => mergedStyling[key]).filter(Boolean);
 
   const props = styles.reduce(
     (obj, s) => {
@@ -148,7 +148,7 @@ const getStylingByKeys = (mergedStyling, keys, ...args) => {
   return props;
 };
 
-export const invertBase16Theme = base16Theme =>
+export const invertBase16Theme = (base16Theme) =>
   Object.keys(base16Theme).reduce(
     (t, key) => (
       (t[key] = /^base/.test(key)
@@ -169,7 +169,7 @@ export const createStyling = curry(
     if (base16Theme) {
       themeOrStyling = {
         ...base16Theme,
-        ...themeOrStyling
+        ...themeOrStyling,
       };
     }
 
@@ -213,7 +213,7 @@ export const getBase16Theme = (theme, base16Themes) => {
     : undefined;
 };
 
-export const invertTheme = theme => {
+export const invertTheme = (theme) => {
   if (typeof theme === 'string') {
     return `${theme}:inverted`;
   }

packages/react-base16-styling/test/index.test.js

@@ -19,7 +19,7 @@ const base16Theme = {
   base0C: '#009999',
   base0D: '#009900',
   base0E: '#9999ff',
-  base0F: '#ff0099'
+  base0F: '#ff0099',
 };
 
 const invertedBase16Theme = {
@@ -40,7 +40,7 @@ const invertedBase16Theme = {
   base0C: '#0fa8a8',
   base0D: '#32cb32',
   base0E: '#6868ce',
-  base0F: '#ff2ac3'
+  base0F: '#ff2ac3',
 };
 
 const apathyInverted = {
@@ -61,28 +61,28 @@ const apathyInverted = {
   base0D: '#a7994f',
   base0E: '#469038',
   base0F: '#3a9257',
-  scheme: 'apathy:inverted'
+  scheme: 'apathy:inverted',
 };
 
-const getStylingFromBase16 = base16 => ({
+const getStylingFromBase16 = (base16) => ({
   testClass: 'testClass',
   testStyle: {
-    color: base16.base00
+    color: base16.base00,
   },
   testFunc: ({ style }, arg) => ({
     className: 'testClass--' + arg,
     style: {
       ...style,
       width: 0,
-      color: base16.base00
+      color: base16.base00,
-    }
+    },
   }),
   baseStyle: {
-    color: 'red'
+    color: 'red',
   },
   additionalStyle: {
-    border: 0
+    border: 0,
-  }
+  },
 });
 
 test('invertTheme', () => {
@@ -98,26 +98,26 @@ test('getBase16Theme', () => {
 
 test('createStyling (default)', () => {
   const styling = createStyling(getStylingFromBase16, {
-    defaultBase16: apathy
+    defaultBase16: apathy,
   });
   const defaultStyling = styling(undefined);
 
   expect(defaultStyling('testClass')).toEqual({ className: 'testClass' });
   expect(defaultStyling('testStyle')).toEqual({
-    style: { color: apathy.base00 }
+    style: { color: apathy.base00 },
   });
   expect(defaultStyling('testFunc', 'mod')).toEqual({
     className: 'testClass--mod',
     style: {
       width: 0,
-      color: apathy.base00
+      color: apathy.base00,
-    }
+    },
   });
 });
 
 test('createStyling (custom)', () => {
   const styling = createStyling(getStylingFromBase16, {
-    defaultBase16: apathy
+    defaultBase16: apathy,
   });
   let customStyling = styling({
     testClass: 'customClass',
@@ -126,35 +126,35 @@ test('createStyling (custom)', () => {
       className: styling.className + ' customClass--' + arg,
       style: {
         ...styling.style,
-        border: 0
+        border: 0,
-      }
+      },
-    })
+    }),
   });
 
   expect(customStyling('testClass')).toEqual({
-    className: 'testClass customClass'
+    className: 'testClass customClass',
   });
   expect(customStyling('testStyle')).toEqual({
-    style: { color: apathy.base00, height: 0 }
+    style: { color: apathy.base00, height: 0 },
   });
   expect(customStyling('testFunc', 'mod')).toEqual({
     className: 'testClass--mod customClass--mod',
     style: {
       width: 0,
       color: apathy.base00,
-      border: 0
+      border: 0,
-    }
+    },
   });
 
   customStyling = styling({
     testClass: () => ({
-      className: 'customClass'
+      className: 'customClass',
     }),
     testStyle: () => ({
       style: {
-        border: 0
+        border: 0,
-      }
+      },
-    })
+    }),
   });
 
   expect(customStyling('testClass')).toEqual({ className: 'customClass' });
@@ -163,27 +163,27 @@ test('createStyling (custom)', () => {
 
 test('createStyling (multiple)', () => {
   const styling = createStyling(getStylingFromBase16, {
-    defaultBase16: apathy
+    defaultBase16: apathy,
   });
   let customStyling = styling({
-    baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } })
+    baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } }),
   });
 
   expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
     style: {
       color: 'blue',
-      border: 0
+      border: 0,
-    }
+    },
   });
 
   customStyling = styling({
-    additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } })
+    additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } }),
   });
 
   expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
     style: {
       color: 'red',
-      border: 1
+      border: 1,
-    }
+    },
   });
 });

packages/react-json-tree/README.md

@@ -58,7 +58,7 @@ const theme = {
   base0C: '#a1efe4',
   base0D: '#66d9ef',
   base0E: '#ae81ff',
-  base0F: '#cc6633'
+  base0F: '#cc6633',
 };
 
 <div>
@@ -80,16 +80,16 @@ const theme = {
       extend: theme,
       // underline keys for literal values
       valueLabel: {
-        textDecoration: 'underline'
+        textDecoration: 'underline',
       },
       // switch key for objects to uppercase when object is expanded.
       // `nestedNodeLabel` receives additional argument `expandable`
       nestedNodeLabel: ({ style }, keyPath, nodeType, expanded) => ({
         style: {
           ...style,
-          textTransform: expanded ? 'uppercase' : style.textTransform
+          textTransform: expanded ? 'uppercase' : style.textTransform,
-        }
+        },
-      })
+      }),
     }}
   />
 </div>
@@ -124,7 +124,7 @@ You can pass the following properties to customize rendered labels and values:
 ```jsx
 <JSONTree
   labelRenderer={([key]) => <strong>{key}</strong>}
-  valueRenderer={raw => <em>{raw}</em>}
+  valueRenderer={(raw) => <em>{raw}</em>}
 />
 ```
 

packages/react-json-tree/examples/server.js

@@ -6,8 +6,8 @@ var config = require('./webpack.config');
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   hot: true,
-  historyApiFallback: true
+  historyApiFallback: true,
-}).listen(3000, 'localhost', function(err) {
+}).listen(3000, 'localhost', function (err) {
   if (err) {
     console.log(err);
   }

packages/react-json-tree/examples/src/App.js

@@ -5,19 +5,19 @@ import JSONTree from 'react-json-tree';
 const getLabelStyle = ({ style }, nodeType, expanded) => ({
   style: {
     ...style,
-    textTransform: expanded ? 'uppercase' : style.textTransform
+    textTransform: expanded ? 'uppercase' : style.textTransform,
-  }
+  },
 });
 
 const getBoolStyle = ({ style }, nodeType) => ({
   style: {
     ...style,
     border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border,
-    borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius
+    borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius,
-  }
+  },
 });
 
-const getItemString = type => (
+const getItemString = (type) => (
   <span>
     {' // '}
     {type}
@@ -30,14 +30,14 @@ const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({
     color:
       !Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
         ? '#33F'
-        : style.color
+        : style.color,
-  }
+  },
 });
 
 const longString =
   'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len
 
-const Custom = function(value) {
+const Custom = function (value) {
   this.value = value;
 };
 Custom.prototype[Symbol.toStringTag] = 'Custom';
@@ -56,42 +56,42 @@ const data = {
           evenMoreNested: {
             veryNested: {
               insanelyNested: {
-                ridiculouslyDeepValue: 'Hello'
+                ridiculouslyDeepValue: 'Hello',
-              }
+              },
-            }
+            },
-          }
+          },
-        }
+        },
-      }
+      },
     },
     baz: undefined,
-    func: function User() {}
+    func: function User() {},
   },
   emptyObject: {},
   symbol: Symbol('value'),
   // eslint-disable-next-line new-cap
   immutable: Map([
     ['key', 'value'],
-    [{ objectKey: 'value' }, { objectKey: 'value' }]
+    [{ objectKey: 'value' }, { objectKey: 'value' }],
   ]),
   map: new window.Map([
     ['key', 'value'],
     [0, 'value'],
-    [{ objectKey: 'value' }, { objectKey: 'value' }]
+    [{ objectKey: 'value' }, { objectKey: 'value' }],
   ]),
   weakMap: new window.WeakMap([
-    [{ objectKey: 'value' }, { objectKey: 'value' }]
+    [{ objectKey: 'value' }, { objectKey: 'value' }],
   ]),
   set: new window.Set(['value', 0, { objectKey: 'value' }]),
   weakSet: new window.WeakSet([
     { objectKey: 'value1' },
-    { objectKey: 'value2' }
+    { objectKey: 'value2' },
   ]),
   hugeArray: Array.from({ length: 10000 }).map((_, i) => `item #${i}`),
   customProfile: {
     avatar: new Custom('placehold.it/50x50'),
-    name: new Custom('Name')
+    name: new Custom('Name'),
   },
-  longString
+  longString,
 };
 
 const theme = {
@@ -112,7 +112,7 @@ const theme = {
   base0C: '#a1efe4',
   base0D: '#66d9ef',
   base0E: '#ae81ff',
-  base0F: '#cc6633'
+  base0F: '#cc6633',
 };
 
 const App = () => (
@@ -149,7 +149,7 @@ const App = () => (
           extend: theme,
           nestedNodeLabel: getLabelStyle,
           value: getBoolStyle,
-          valueLabel: getValueLabelStyle
+          valueLabel: getValueLabelStyle,
         }}
         getItemString={getItemString}
       />
@@ -163,7 +163,7 @@ const App = () => (
         data={data}
         theme={theme}
         labelRenderer={([raw]) => <span>(({raw})):</span>}
-        valueRenderer={raw => (
+        valueRenderer={(raw) => (
           <em>
             <span role="img" aria-label="mellow">
               😐

packages/react-json-tree/examples/webpack.config.js

@@ -9,12 +9,12 @@ module.exports = {
   entry: [
     !isProduction && 'webpack-dev-server/client?http://localhost:3000',
     !isProduction && 'webpack/hot/only-dev-server',
-    './src/index'
+    './src/index',
   ].filter(Boolean),
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/static/'
+    publicPath: '/static/',
   },
   plugins: [new webpack.HotModuleReplacementPlugin()],
   module: {
@@ -22,8 +22,8 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: path.join(__dirname, 'src')
+        include: path.join(__dirname, 'src'),
-      }
+      },
-    ]
+    ],
-  }
+  },
 };

packages/react-json-tree/src/ItemRange.js

@@ -8,7 +8,7 @@ export default class ItemRange extends React.Component {
     from: PropTypes.number.isRequired,
     to: PropTypes.number.isRequired,
     renderChildNodes: PropTypes.func.isRequired,
-    nodeType: PropTypes.string.isRequired
+    nodeType: PropTypes.string.isRequired,
   };
 
   constructor(props) {

packages/react-json-tree/src/JSONArrayNode.js

@@ -21,7 +21,7 @@ const JSONArrayNode = ({ data, ...props }) => (
 );
 
 JSONArrayNode.propTypes = {
-  data: PropTypes.array
+  data: PropTypes.array,
 };
 
 export default JSONArrayNode;