Merge pull request #1083 from plotly/pjs156

Packages + plotly.js + version bump

Author: dmt0

.babelrc

@@ -1,5 +1,13 @@
 {
-  "presets": ["@babel/react", "@babel/env"],
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/env"
+  ],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",
     [

.eslintrc

@@ -110,14 +110,15 @@
     "radix": ["error"],
     "react/jsx-no-duplicate-props": ["error"],
     "react/jsx-no-undef": ["error"],
-    "react/jsx-uses-react": ["error"],
+    "react/jsx-uses-react": ["off"],
     "react/jsx-uses-vars": ["error"],
     "react/no-did-update-set-state": ["error"],
     "react/no-direct-mutation-state": ["error"],
     "react/no-is-mounted": ["error"],
     "react/no-unknown-property": ["error"],
     "react/prefer-es6-class": ["error", "always"],
-    "react/prop-types": "error",
+    "react/prop-types": ["error"],
+    "react/react-in-jsx-scope": ["off"],
     "valid-jsdoc": ["error"],
     "yoda": ["error"],
     "spaced-comment": ["error", "always", {

.storybook/webpack.config.js

@@ -6,5 +6,23 @@ module.exports = async ({config, mode}) => {
     use: ['style-loader', 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../'),
   });
+  config.module.rules.push({
+    test: /\.js?$/,
+    use: {
+      loader: 'babel-loader',
+      options: {
+        presets: [
+          [
+            '@babel/preset-react',
+            {
+              runtime: 'automatic',
+            },
+          ],
+          '@babel/env',
+        ],
+      },
+    },
+    exclude: [/node_modules/],
+  });
   return config;
 };

dev/App.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
 import {hot} from 'react-hot-loader/root';
 import plotly from 'plotly.js/dist/plotly-with-meta';
 import '../src/styles/main.scss';
@@ -16,15 +16,16 @@ import ACCESS_TOKENS from '../accessTokens';
 
 // import {customConfigTest} from '../src/__stories__';
 
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));
 
 const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 
+// eslint-disable-next-line no-unused-vars
 const traceTypesConfig = {
-  traces: _ => [
+  traces: (_) => [
     {
       value: 'scatter',
       icon: 'scatter',
@@ -66,16 +67,19 @@ const traceTypesConfig = {
   complex: true,
 };
 
+// eslint-disable-next-line no-unused-vars
 const chartHelp = {
   area: {
     helpDoc: 'https://help.plot.ly/make-an-area-graph/',
     examplePlot: () => {
+      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
   bar: {
     helpDoc: 'https://help.plot.ly/stacked-bar-chart/',
     examplePlot: () => {
+      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
@@ -118,12 +122,12 @@ class App extends Component {
     this.updateState = this.updateState.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     // curl https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks \
     // | jq '[.[] | .name ]' > mocks.json
     fetch('/mocks.json')
-      .then(response => response.json())
-      .then(mocks => this.setState({mocks}));
+      .then((response) => response.json())
+      .then((mocks) => this.setState({mocks}));
   }
 
   loadMock(mockIndex) {
@@ -135,8 +139,8 @@ class App extends Component {
     fetch(prefix + mockName, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
-      .then(response => response.json())
-      .then(figure => {
+      .then((response) => response.json())
+      .then((figure) => {
         const {data, layout, frames} = figure;
         this.updateState(data, layout, frames, mockIndex);
       });
@@ -219,7 +223,7 @@ class App extends Component {
                   }))}
                   searchable={true}
                   searchPromptText="Search for a mock"
-                  onChange={option => this.loadMock(option.value)}
+                  onChange={(option) => this.loadMock(option.value)}
                   noResultsText={'No Results'}
                   placeholder={'Search for a mock'}
                 />
@@ -234,7 +238,7 @@ class App extends Component {
               <AceEditor
                 mode="json"
                 theme="textmate"
-                onChange={json_string => this.setState({json_string})}
+                onChange={(json_string) => this.setState({json_string})}
                 value={this.state.json_string}
                 name="UNIQUE_ID_OF_DIV"
                 style={{height: '80vh'}}

dev/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles.css';
 import App from './App';

examples/custom/src/App.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import CustomEditor from './CustomEditor';
@@ -9,7 +9,7 @@ const dataSources = {
   col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));

examples/custom/src/CustomEditor.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
 import {
   Flaglist,
   ColorPicker,
@@ -47,19 +47,28 @@ export default class CustomEditor extends Component {
                 label="Dropdown"
                 attr="xaxis.title"
                 show
-                options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
+                options={[
+                  {label: 'Yes', value: 'yes'},
+                  {label: 'No', value: 'no'},
+                ]}
               />
               <Radio
                 label="Radio"
                 attr="yaxis.title"
                 show
-                options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
+                options={[
+                  {label: 'Yes', value: 'yes'},
+                  {label: 'No', value: 'no'},
+                ]}
               />
               <Flaglist
                 label="Flaglist"
                 attr="title.font.family"
                 show
-                options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
+                options={[
+                  {label: 'Yes', value: 'y'},
+                  {label: 'No', value: 'n'},
+                ]}
               />
               <ColorPicker label="ColorPicker" attr="plot_bgcolor" show />
               <TextEditor attr="title" label="TextEditor default" />

examples/custom/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

examples/demo/src/App.js

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import 'react-chart-editor/lib/react-chart-editor.css';
 import Nav from './Nav';
 import dataSources from './dataSources';
 
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));
@@ -27,19 +27,19 @@ class App extends Component {
     this.loadMock = this.loadMock.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     fetch('https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks')
-      .then(response => response.json())
-      .then(mocks => this.setState({mocks}));
+      .then((response) => response.json())
+      .then((mocks) => this.setState({mocks}));
   }
 
   loadMock(mockIndex) {
     const mock = this.state.mocks[mockIndex];
     fetch(mock.url, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
-      .then(response => response.json())
-      .then(figure => {
+      .then((response) => response.json())
+      .then((figure) => {
         this.setState({
           currentMockIndex: mockIndex,
           data: figure.data,

examples/demo/src/Nav.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown';
 
 const Nav = ({mocks, currentMockIndex, loadMock}) => (
@@ -20,7 +19,7 @@ const Nav = ({mocks, currentMockIndex, loadMock}) => (
           value: i,
         }))}
         value={currentMockIndex}
-        onChange={option => loadMock(option)}
+        onChange={(option) => loadMock(option)}
       />
     </div>
   </div>

examples/demo/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

examples/redux/src/App.js

@@ -1,7 +1,7 @@
 import 'react-chart-editor/lib/react-chart-editor.css';
 import PlotlyEditor from 'react-chart-editor';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
+import {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
@@ -12,7 +12,7 @@ const dataSources = {
   col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));
@@ -29,14 +29,7 @@ class App extends Component {
   }
 
   render() {
-    const {
-      actions,
-      dataSources,
-      dataSourceOptions,
-      data,
-      layout,
-      frames,
-    } = this.props;
+    const {actions, dataSources, dataSourceOptions, data, layout, frames} = this.props;
 
     return (
       <div className="app">
@@ -67,15 +60,15 @@ App.propTypes = {
   frames: PropTypes.array,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   dataSourceOptions: state.dataSourceOptions,
   dataSources: state.dataSources,
   data: state.data,
   layout: state.layout,
   frames: state.frames,
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(actions, dispatch),
 });
 

examples/redux/src/index.js

@@ -1,6 +1,5 @@
 import './index.css';
 import App from './App';
-import React from 'react';
 import ReactDOM from 'react-dom';
 import reducer from './reducer';
 import {Provider} from 'react-redux';

examples/simple/src/App.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import 'react-chart-editor/lib/react-chart-editor.css';
@@ -9,7 +9,7 @@ const dataSources = {
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
 
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));
@@ -33,9 +33,7 @@ class App extends Component {
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout, frames) =>
-            this.setState({data, layout, frames})
-          }
+          onUpdate={(data, layout, frames) => this.setState({data, layout, frames})}
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/simple/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';