Package updates

.babelrc

@@ -1,7 +1,7 @@
 {
-  "presets": ["react", "es2015"],
+  "presets": ["@babel/react", "@babel/env"],
   "plugins": [
-    "transform-object-rest-spread",
+    "@babel/plugin-proposal-object-rest-spread",
     [
       "module-resolver",
       {

.eslintrc

@@ -17,6 +17,12 @@
       "jsx": true
     }
   },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
   "env": {
     "browser": true,
     "es6": true,
@@ -54,7 +60,7 @@
     "guard-for-in": ["off"],
     "import/named": ["off"],
     "import/no-duplicates": ["error"],
-    "import/no-named-as-default": ["error"],
+    "import/no-named-as-default": ["off"],
     "new-cap": ["error"],
     "no-alert": [1],
     "no-caller": ["error"],
@@ -115,7 +121,7 @@
     "yoda": ["error"],
     "spaced-comment": ["error", "always", {
       "block": {
-        exceptions: ["*"]
+        "exceptions": ["*"]
       }
     }],
     "no-unused-vars": ["error", {

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log*
 *.sublime*
 
 .*
+!.storybook
 !.gitignore
 !.gitattributes
 !.npmignore
@@ -19,3 +20,5 @@ accessTokens.js
 yarn.lock
 yarn-error.log
 package-lock.json
+
+storybook-static

.storybook/config.js

@@ -0,0 +1,14 @@
+import {configure, getStorybook, setAddon} from '@storybook/react';
+
+function loadStories() {
+  require('../src/__stories__/index.js');
+  // You can require as many stories as you need.
+}
+import createPercyAddon from '@percy-io/percy-storybook';
+const {percyAddon, serializeStories} = createPercyAddon();
+setAddon(percyAddon);
+
+configure(loadStories, module);
+
+// NOTE: if you're using the Storybook options addon, call serializeStories *BEFORE* the setOptions call
+serializeStories(getStorybook);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)?$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        include: path.resolve(__dirname, '../'),
+      },
+    ],
+  },
+};

README.md

@@ -155,14 +155,14 @@ Once you have your tokens, you can provide it as a config prop to the `<PlotlyEd
 ## See also
 
 * [plotly.js](https://github.com/plotly/plotly.js)
-* [react-plotlyjs](https://github.com/plotly/react-plotly.js)
+* [react-plotly.js](https://github.com/plotly/react-plotly.js)
 
 ## License
 
-&copy; 2018 Plotly, Inc. MIT License.
+&copy; 2019 Plotly, Inc. MIT License.
 
 ## Sponsors
 
 This work was made possible by [Alteryx](https://www.alteryx.com/), a leader in self-serve data analytics and data blending.
 
-![alteryx](https://www.alteryx.com/sites/all/themes/alteryx2014/_media/alteryx-logo.png)
+![alteryx](https://www.alteryx.com/inspire-europe-2018/photos_files/alteryx-logo.png)

circle.yml

@@ -3,16 +3,16 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:8.9
+      - image: circleci/node:8.11.2-browsers
 
     working_directory: ~/react-chart-editor
 
     steps:
       - checkout
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
 
       - run: npm install
 

dev/App.js

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
-import {hot} from 'react-hot-loader';
+import {hot} from 'react-hot-loader/root';
 import plotly from 'plotly.js/dist/plotly-with-meta';
 import '../src/styles/main.scss';
-import 'react-select/dist/react-select.css';
 import brace from 'brace'; // eslint-disable-line no-unused-vars
 import AceEditor from 'react-ace';
 import Select from 'react-select';
@@ -276,4 +275,4 @@ class App extends Component {
   }
 }
 
-export default hot(module)(App);
+export default hot(App);

package.json

@@ -8,74 +8,78 @@
   },
   "dependencies": {
     "@plotly/draft-js-export-html": "1.2.0",
-    "classnames": "^2.2.5",
-    "draft-js": "^0.10.4",
-    "draft-js-import-html": "^1.2.1",
-    "draft-js-utils": "^1.2.0",
-    "fast-isnumeric": "^1.1.1",
-    "immutability-helper": "^2.7.1",
-    "plotly-icons": "1.2.3",
+    "classnames": "^2.2.6",
+    "draft-js": "^0.10.5",
+    "draft-js-import-html": "^1.3.2",
+    "draft-js-utils": "^1.3.2",
+    "fast-isnumeric": "^1.1.2",
+    "immutability-helper": "^3.0.0",
+    "plotly-icons": "1.3.4",
     "plotly.js": "1.44.4",
-    "prop-types": "^15.5.10",
-    "raf": "^3.4.0",
-    "react-color": "^2.13.8",
+    "prop-types": "^15.7.2",
+    "raf": "^3.4.1",
+    "react-color": "^2.17.0",
     "react-colorscales": "0.7.3",
-    "react-day-picker": "^7.2.4",
-    "react-dropzone": "^5.0.1",
-    "react-plotly.js": "^2.2.0",
+    "react-day-picker": "^7.3.0",
+    "react-dropzone": "^9.0.0",
+    "react-plotly.js": "^2.3.0",
     "react-rangeslider": "^2.2.0",
-    "react-resizable-rotatable-draggable": "^0.1.8",
-    "react-select": "^1.3.0",
-    "react-tabs": "^2.2.1",
-    "styled-components": "^3.3.3",
+    "react-resizable-rotatable-draggable": "^0.2.0",
+    "react-select": "^2.4.1",
+    "react-tabs": "^3.0.0",
+    "styled-components": "^4.1.3",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "@percy/react": "^0.4.3",
-    "autoprefixer": "^9.1.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-module-resolver": "^3.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-traverse": "^6.26.0",
-    "css-loader": "^0.28.11",
-    "cssnano": "^3.10.0",
-    "enzyme": "3.8.0",
-    "enzyme-adapter-react-16": "1.7.1",
-    "eslint": "^5.4.0",
-    "eslint-config-prettier": "^3.0.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-react": "^7.4.0",
-    "eslint-plugin-react-percy": "^0.2.1",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/node": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/traverse": "^7.3.4",
+    "@hot-loader/react-dom": "^16.8.3",
+    "@percy-io/percy-storybook": "^2.1.0",
+    "@storybook/react": "^4.1.13",
+    "autoprefixer": "^9.4.9",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.1.0",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "css-loader": "^2.1.0",
+    "cssnano": "^4.1.10",
+    "enzyme": "3.9.0",
+    "enzyme-adapter-react-16": "1.10.0",
+    "eslint": "^5.14.1",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-percy": "^0.2.4",
     "fs": "^0.0.1-security",
-    "gl": "^4.0.4",
-    "glob": "^7.1.2",
-    "jest": "^23.5.0",
-    "jest-cli": "^23.5.0",
+    "glob": "^7.1.3",
+    "jest": "^24.1.0",
+    "jest-cli": "^24.1.0",
     "mkdirp": "^0.5.1",
-    "node-sass": "^4.7.2",
-    "postcss": "^6.0.23",
-    "postcss-combine-duplicated-selectors": "^6.0.2",
-    "postcss-custom-properties": "^6.3.1",
+    "node-sass": "^4.11.0",
+    "postcss": "^7.0.14",
+    "postcss-combine-duplicated-selectors": "^7.0.0",
+    "postcss-custom-properties": "^8.0.9",
     "postcss-remove-root": "^0.0.2",
-    "prettier": "1.14.2",
-    "react": "^16.0.0",
-    "react-ace": "^6.1.4",
-    "react-dom": "^16.0.0",
-    "react-hot-loader": "^4.0.0-beta.21",
-    "react-inspector": "^2.2.2",
-    "react-test-renderer": "^16.2.0",
-    "rimraf": "2.6.2",
+    "prettier": "1.16.4",
+    "react": "^16.8.3",
+    "react-ace": "^6.4.0",
+    "react-dom": "^16.8.3",
+    "react-hot-loader": "^4.7.1",
+    "react-inspector": "^2.3.1",
+    "react-test-renderer": "^16.8.3",
+    "request": "^2.88.0",
+    "rimraf": "2.6.3",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.0",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.5",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
   },
   "peerDependencies": {
     "react": ">15",
@@ -117,12 +121,13 @@
     "make:translation-keys": "node scripts/findTranslationKeys.js",
     "prepublishOnly": "npm run make:lib",
     "start": "webpack-dev-server --hot",
+    "storybook": "start-storybook -p 9001 -c .storybook",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
-    "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
+    "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill --maxWorkers=2",
     "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:percy": "react-percy",
-    "test:percy-local": "react-percy --debug",
+    "test:percy": "build-storybook && percy-storybook --widths=500",
+    "test:percy-local": "build-storybook",
     "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",
     "watch-test": "jest --watch"
   }

scripts/findTranslationKeys.js

@@ -1,5 +1,5 @@
-const transform = require('babel-core').transform;
-const traverse = require('babel-traverse').default;
+const transformSync = require('@babel/core').transformSync;
+const traverse = require('@babel/traverse').default;
 const fs = require('fs');
 const glob = require('glob');
 const path = require('path');
@@ -10,10 +10,8 @@ const path = require('path');
 const pathToSrc = process.argv[2] || path.join(__dirname, '../src');
 const srcGlob = path.join(pathToSrc, '**/*.js');
 
-const pathToTranslationKeys = process.argv[3] || path.join(
-  __dirname,
-  './translationKeys/translation-keys.txt'
-);
+const pathToTranslationKeys =
+  process.argv[3] || path.join(__dirname, './translationKeys/translation-keys.txt');
 
 findLocaleStrings();
 
@@ -30,26 +28,36 @@ function findLocaleStrings() {
     files.forEach(file => {
       const code = fs.readFileSync(file, 'utf-8');
       const filePartialPath = file.substr(pathToSrc.length);
-      const ast = transform(code, {
-        presets: ['react', 'es2015', 'stage-2'],
+      const ast = transformSync(code, {
+        presets: ['@babel/preset-react', '@babel/preset-env'],
+        plugins: [
+          '@babel/plugin-proposal-object-rest-spread',
+          [
+            'module-resolver',
+            {
+              root: ['./'],
+              alias: {
+                components: './src/components',
+                lib: './src/lib',
+                styles: './src/styles',
+              },
+            },
+          ],
+        ],
+        ast: true,
       }).ast;
 
       traverse(ast, {
         enter(path) {
-          if (
-            path.node.type === 'CallExpression' &&
-            path.node.callee.name === '_'
-          ) {
+          if (path.node.type === 'CallExpression' && path.node.callee.name === '_') {
             const strNode = path.node.arguments[0];
             let strNodeValue = strNode.value;
 
             if (path.node.arguments.length !== 1) {
               logError(file, path.node, 'Localize takes 1 args');
             }
 
-            if (
-              ['StringLiteral', 'BinaryExpression'].indexOf(strNode.type) < 0
-            ) {
+            if (['StringLiteral', 'BinaryExpression'].indexOf(strNode.type) < 0) {
               logError(
                 file,
                 path.node,
@@ -71,8 +79,7 @@ function findLocaleStrings() {
             }
 
             if (!dict[strNodeValue]) {
-              dict[strNodeValue] =
-                filePartialPath + ':' + strNode.loc.start.line;
+              dict[strNodeValue] = filePartialPath + ':' + strNode.loc.start.line;
               maxLen = Math.max(maxLen, strNodeValue.length);
               hasTranslation = true;
             }
@@ -96,9 +103,7 @@ function findLocaleStrings() {
 }
 
 function logError(file, node, msg) {
-  throw new Error(
-    file + ' [line ' + node.loc.start.line + '] ' + msg + '\n   '
-  );
+  throw new Error(file + ' [line ' + node.loc.start.line + '] ' + msg + '\n   ');
 }
 
 function spaces(len) {

scripts/postcss.js

@@ -25,7 +25,7 @@ const internetExplorerPostCSS = () => {
    */
   const ie11_plugins = [
     combineSelectors,
-    customProperties,
+    customProperties({preserve: false}),
     removeRoot,
     autoprefixer({browsers: ['ie 11'], grid: true}),
     cssnano,