Update dependency prettier to v2

.prettierrc

@@ -1,6 +1,5 @@
 {
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "trailingComma": "es5",
-    "printWidth": 100
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "printWidth": 100
 }

package.json

@@ -86,7 +86,7 @@
     "postcss-combine-duplicated-selectors": "8.1.0",
     "postcss-custom-properties": "8.0.11",
     "postcss-remove-root": "0.0.2",
-    "prettier": "1.19.1",
+    "prettier": "2.0.2",
     "react": "16.13.1",
     "react-ace": "7.0.5",
     "react-dom": "16.13.1",

src/DefaultEditor.js

@@ -33,13 +33,13 @@ class DefaultEditor extends Component {
   }
 
   hasTransforms() {
-    return this.context.fullData.some(d => TRANSFORMABLE_TRACES.includes(d.type));
+    return this.context.fullData.some((d) => TRANSFORMABLE_TRACES.includes(d.type));
   }
 
   hasAxes() {
     return (
       Object.keys(this.context.fullLayout._subplots).filter(
-        type =>
+        (type) =>
           !['cartesian', 'mapbox'].includes(type) &&
           this.context.fullLayout._subplots[type].length > 0
       ).length > 0
@@ -63,15 +63,15 @@ class DefaultEditor extends Component {
   }
 
   hasColorbars() {
-    return this.context.fullData.some(d => traceHasColorbar({}, d));
+    return this.context.fullData.some((d) => traceHasColorbar({}, d));
   }
 
   hasLegend() {
-    return this.context.fullData.some(t => t.showlegend !== undefined); // eslint-disable-line no-undefined
+    return this.context.fullData.some((t) => t.showlegend !== undefined); // eslint-disable-line no-undefined
   }
 
   hasMaps() {
-    return this.context.fullData.some(d =>
+    return this.context.fullData.some((d) =>
       [...TRACE_TO_AXIS.geo, ...TRACE_TO_AXIS.mapbox].includes(d.type)
     );
   }

src/EditorControls.js

@@ -31,7 +31,7 @@ class EditorControls extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.localize = key => localizeString(this.props.dictionaries || {}, this.props.locale, key);
+    this.localize = (key) => localizeString(this.props.dictionaries || {}, this.props.locale, key);
 
     // we only need to compute this once.
     if (this.props.plotly) {
@@ -107,7 +107,7 @@ class EditorControls extends Component {
               props = shamefullyCreateSplitStyleProps(graphDiv, attr, traceIndex, splitTraceGroup);
             }
 
-            props.forEach(p => {
+            props.forEach((p) => {
               if (value !== void 0) {
                 p.set(value);
               }
@@ -429,8 +429,8 @@ EditorControls.defaultProps = {
   showFieldTooltips: false,
   locale: 'en',
   traceTypesConfig: {
-    categories: _ => categoryLayout(_),
-    traces: _ => traceTypes(_),
+    categories: (_) => categoryLayout(_),
+    traces: (_) => traceTypes(_),
     complex: true,
   },
   fontOptions: DEFAULT_FONTS,

src/__stories__/index.js

@@ -98,7 +98,7 @@ const panelsToTest = {
   funnelarea: ['GraphCreatePanel', 'StyleTracesPanel'],
 };
 
-window.URL.createObjectURL = function() {
+window.URL.createObjectURL = function () {
   return null;
 };
 
@@ -128,10 +128,10 @@ const panelFixture = (Panel, group, name, figure, customConfig) => {
 
 let stories = storiesOf('Panels', module);
 
-Object.keys(mocks).forEach(m => {
+Object.keys(mocks).forEach((m) => {
   const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels);
 
-  selectedPanels.forEach(p => {
+  selectedPanels.forEach((p) => {
     const words = p.split(/(?=[A-Z])/);
     const panelGroup = words[0];
     const panelName = words.slice(1, -1).join(' ');

src/__tests__/syntax-test.js

@@ -3,16 +3,16 @@ import fs from 'fs';
 import glob from 'glob';
 
 const BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit', 'it\\.only', 'describe\\.only'];
-const REGEXS = BLACK_LIST.map(token => new RegExp(`^\\s*${token}\\(.*`));
+const REGEXS = BLACK_LIST.map((token) => new RegExp(`^\\s*${token}\\(.*`));
 
 describe('Syntax and test validation', () => {
   describe(`ensures ${BLACK_LIST} is not present in tests`, () => {
     const files = glob.sync('!(node_modules|examples)/**/__tests__/*.js');
-    files.forEach(file =>
+    files.forEach((file) =>
       it(`checks ${file} for test checks`, () => {
         const code = fs.readFileSync(file, {encoding: 'utf-8'});
-        code.split('\n').forEach(line => {
-          expect(REGEXS.some(re => re.test(line))).toBe(false);
+        code.split('\n').forEach((line) => {
+          expect(REGEXS.some((re) => re.test(line))).toBe(false);
         });
       })
     );

src/components/PanelMenuWrapper.js

@@ -9,7 +9,7 @@ class PanelsWithSidebar extends Component {
     super(props);
 
     const opts = this.computeMenuOptions(props);
-    const firstSidebarGroup = opts.filter(o => o.panels)[0];
+    const firstSidebarGroup = opts.filter((o) => o.panels)[0];
 
     this.state = {
       group: firstSidebarGroup.name,
@@ -53,7 +53,7 @@ class PanelsWithSidebar extends Component {
     let groupIndex;
     const childrenArray = sortMenu(React.Children.toArray(children), menuPanelOrder);
 
-    childrenArray.forEach(child => {
+    childrenArray.forEach((child) => {
       if (!child) {
         return;
       }

src/components/containers/MapboxLayersAccordion.js

@@ -30,7 +30,7 @@ class MapboxLayersAccordion extends Component {
 
     const addAction = {
       label: _('Layer'),
-      handler: context => {
+      handler: (context) => {
         const {fullContainer, updateContainer} = context;
         if (updateContainer) {
           const mapboxLayerIndex = Array.isArray(fullContainer.layers)

src/components/containers/PlotlyFold.js

@@ -63,7 +63,7 @@ export class Fold extends Component {
       canDelete && typeof deleteContainer === 'function' ? (
         <div
           className="fold__top__delete js-fold__delete"
-          onClick={e => {
+          onClick={(e) => {
             e.stopPropagation();
             deleteContainer(foldInfo);
           }}
@@ -76,7 +76,7 @@ export class Fold extends Component {
       <div className="fold__top__moving-controls">
         <span
           className={`fold__top__moving-controls--up${canMoveUp ? '' : '--disabled'}`}
-          onClick={e => {
+          onClick={(e) => {
             // prevents fold toggle to happen when clicking on moving arrow controls
             e.stopPropagation();
 
@@ -92,7 +92,7 @@ export class Fold extends Component {
         </span>
         <span
           className={`fold__top__moving-controls--down${canMoveDown ? '' : '--disabled'}`}
-          onClick={e => {
+          onClick={(e) => {
             // prevents fold toggle to happen when clicking on moving arrow controls
             e.stopPropagation();
             if (canMoveDown) {
@@ -184,7 +184,7 @@ class PlotlyFold extends Fold {
   determineVisibility(nextProps, nextContext) {
     this.foldVisible = false;
 
-    React.Children.forEach(nextProps.children, child => {
+    React.Children.forEach(nextProps.children, (child) => {
       if (!child || this.foldVisible) {
         return;
       }

src/components/containers/PlotlyPanel.js

@@ -47,7 +47,7 @@ export class Panel extends Component {
 
   toggleFolds() {
     const {individualFoldStates} = this.state;
-    const hasOpen = individualFoldStates.length > 0 && individualFoldStates.some(s => s !== true);
+    const hasOpen = individualFoldStates.length > 0 && individualFoldStates.some((s) => s !== true);
     this.setState({
       individualFoldStates: individualFoldStates.map(() => hasOpen),
     });
@@ -61,7 +61,7 @@ export class Panel extends Component {
     // to get proper number of child folds and initialize component state
     let numFolds = 0;
 
-    React.Children.forEach(this.props.children, child => {
+    React.Children.forEach(this.props.children, (child) => {
       if (((child && child.type && child.type.plotly_editor_traits) || {}).foldable) {
         numFolds++;
       }
@@ -114,7 +114,7 @@ export class Panel extends Component {
           addAction={this.props.addAction}
           allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
           toggleFolds={this.toggleFolds}
-          hasOpen={individualFoldStates.some(s => s === false)}
+          hasOpen={individualFoldStates.some((s) => s === false)}
         />
         <div className={bem('panel', 'content')}>{newChildren}</div>
       </div>

src/components/containers/PlotlySection.js

@@ -51,7 +51,7 @@ export default class PlotlySection extends Section {
     const {isVisible} = unpackPlotProps(nextProps, nextContext);
     this.sectionVisible = isVisibleGivenCustomConfig(isVisible, nextProps, nextContext);
 
-    React.Children.forEach(nextProps.children, child => {
+    React.Children.forEach(nextProps.children, (child) => {
       if (!child || this.sectionVisible) {
         return;
       }

src/components/containers/RangeSelectorAccordion.js

@@ -42,7 +42,7 @@ class RangeSelectorAccordion extends Component {
 
     const addAction = {
       label: _('Button'),
-      handler: context => {
+      handler: (context) => {
         const {fullContainer, updateContainer} = context;
         if (updateContainer) {
           const rangeselectorIndex = Array.isArray(fullContainer.rangeselector.buttons)

src/components/containers/SubplotAccordion.js

@@ -22,11 +22,11 @@ class SubplotAccordion extends Component {
     const subplotFolds = [];
 
     const allCartesianAxisCombinations = data.reduce((acc, curVal, inx) => {
-      if (TRACE_TO_AXIS.cartesian.some(c => c === curVal.type)) {
+      if (TRACE_TO_AXIS.cartesian.some((c) => c === curVal.type)) {
         const xaxis = 'xaxis' + (curVal.xaxis ? curVal.xaxis.substring(1) : '');
         const yaxis = 'yaxis' + (curVal.yaxis ? curVal.yaxis.substring(1) : '');
 
-        const existingComboIndex = acc.findIndex(t => t.xaxis === xaxis && t.yaxis === yaxis);
+        const existingComboIndex = acc.findIndex((t) => t.xaxis === xaxis && t.yaxis === yaxis);
         if (existingComboIndex === -1) {
           acc.push({
             xaxis: xaxis,
@@ -43,7 +43,7 @@ class SubplotAccordion extends Component {
     }, []);
 
     allCartesianAxisCombinations.forEach(
-      d =>
+      (d) =>
         (subplotFolds[d.index[0]] = (
           <CartesianSubplotFold
             key={d.index[0]}
@@ -84,16 +84,18 @@ class SubplotAccordion extends Component {
     }
      */
 
-    Object.keys(layout).forEach(layoutKey => {
+    Object.keys(layout).forEach((layoutKey) => {
       const traceIndexes = [];
       let subplotName;
       if (
-        ['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(subplotType => {
+        ['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some((subplotType) => {
           subplotName = getSubplotTitle(layoutKey, subplotType, _);
           const trIndex =
             SUBPLOT_TO_ATTR[subplotType].layout === layoutKey
-              ? data.findIndex(trace => TRACE_TO_AXIS[subplotType].some(tt => tt === trace.type))
-              : data.findIndex(trace => trace[SUBPLOT_TO_ATTR[subplotType].data] === layoutKey);
+              ? data.findIndex((trace) =>
+                  TRACE_TO_AXIS[subplotType].some((tt) => tt === trace.type)
+                )
+              : data.findIndex((trace) => trace[SUBPLOT_TO_ATTR[subplotType].data] === layoutKey);
           if (trIndex !== -1) {
             traceIndexes.push(trIndex);
           }

src/components/containers/TraceAccordion.js

@@ -30,7 +30,7 @@ class TraceAccordion extends Component {
 
     if (base && base.length && context.fullData.length) {
       this.filteredTraces = base.filter((t, i) => {
-        const fullTrace = props.canGroup ? t : context.fullData.filter(tr => tr.index === i)[0];
+        const fullTrace = props.canGroup ? t : context.fullData.filter((tr) => tr.index === i)[0];
 
         if (fullTrace) {
           const trace = context.data[fullTrace.index];
@@ -54,7 +54,7 @@ class TraceAccordion extends Component {
     const dataArrayPositionsByTraceType = {};
     const fullDataArrayPositionsByTraceType = {};
 
-    this.filteredTraces.forEach(trace => {
+    this.filteredTraces.forEach((trace) => {
       const traceType = plotlyTraceToCustomTrace(trace);
       if (!dataArrayPositionsByTraceType[traceType]) {
         dataArrayPositionsByTraceType[traceType] = [];
@@ -73,7 +73,7 @@ class TraceAccordion extends Component {
       <TraceFold
         key={index}
         traceIndexes={dataArrayPositionsByTraceType[type]}
-        name={traceTypes(_).find(t => t.value === type).label}
+        name={traceTypes(_).find((t) => t.value === type).label}
         fullDataArrayPosition={fullDataArrayPositionsByTraceType[type]}
       >
         {this.props.children}

src/components/containers/TraceRequiredPanel.js

@@ -5,7 +5,7 @@ import {LayoutPanel} from './derived';
 
 class TraceRequiredPanel extends Component {
   hasTrace() {
-    return this.context.fullData.filter(trace => trace.visible).length > 0;
+    return this.context.fullData.filter((trace) => trace.visible).length > 0;
   }
 
   render() {

src/components/containers/TransformAccordion.js

@@ -26,15 +26,15 @@ class TransformAccordion extends Component {
 
     const transformBy =
       container.transforms &&
-      container.transforms.map(tr => {
+      container.transforms.map((tr) => {
         let foldNameSuffix = '';
         if (tr.groupssrc) {
           const groupssrc =
-            dataSourceOptions && dataSourceOptions.find(d => d.value === tr.groupssrc);
+            dataSourceOptions && dataSourceOptions.find((d) => d.value === tr.groupssrc);
           foldNameSuffix = `: ${groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc}`;
         } else if (tr.targetsrc) {
           const targetsrc =
-            dataSourceOptions && dataSourceOptions.find(d => d.value === tr.targetsrc);
+            dataSourceOptions && dataSourceOptions.find((d) => d.value === tr.targetsrc);
           foldNameSuffix = `: ${targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc}`;
         }
         return foldNameSuffix;
@@ -47,8 +47,9 @@ class TransformAccordion extends Component {
         <TransformFold
           key={i}
           transformIndex={i}
-          name={`${transformTypes.filter(({type}) => type === tr.type)[0].label}${transformBy &&
-            transformBy[i]}`}
+          name={`${transformTypes.filter(({type}) => type === tr.type)[0].label}${
+            transformBy && transformBy[i]
+          }`}
           canDelete={true}
         >
           {children}
@@ -58,16 +59,16 @@ class TransformAccordion extends Component {
     // cannot have 2 Split transforms on one trace:
     // https://github.com/plotly/plotly.js/issues/1742
     const addActionOptions =
-      container.transforms && container.transforms.some(t => t.type === 'groupby')
-        ? transformTypes.filter(t => t.type !== 'groupby')
+      container.transforms && container.transforms.some((t) => t.type === 'groupby')
+        ? transformTypes.filter((t) => t.type !== 'groupby')
         : transformTypes;
 
     const addAction = {
       label: _('Transform'),
       handler: addActionOptions.map(({label, type}) => {
         return {
           label,
-          handler: context => {
+          handler: (context) => {
             const {fullContainer, updateContainer} = context;
             if (updateContainer) {
               const transformIndex = Array.isArray(fullContainer.transforms)

src/components/containers/UpdateMenuAccordion.js

@@ -22,7 +22,7 @@ class UpdateMenuAccordion extends Component {
           buttons: _('Buttons'),
         };
         const menuType = localizedType[upd.type] || localizedType.dropdown;
-        const activeBtn = upd.buttons.filter(b => b._index === upd.active)[0];
+        const activeBtn = upd.buttons.filter((b) => b._index === upd.active)[0];
         const foldName = menuType + (activeBtn ? ': ' + activeBtn.label : '');
 
         return (

src/components/containers/__tests__/AnnotationAccordion-test.js

@@ -60,10 +60,7 @@ describe('<AnnotationAccordion>', () => {
         </LayoutPanel>
       </TestEditor>
     );
-    editor
-      .find('.js-fold__delete')
-      .at(0)
-      .simulate('click');
+    editor.find('.js-fold__delete').at(0).simulate('click');
 
     const update = beforeDeleteAnnotation.mock.calls[0][0];
     expect(update.annotationIndex).toBe(0);

src/components/containers/__tests__/Layout-test.js

@@ -7,9 +7,9 @@ import {connectLayoutToPlot} from 'lib';
 import {mount} from 'enzyme';
 
 const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectLayoutToPlot);
-const Editor = props => <TestEditor {...{onUpdate: jest.fn(), ...props}} />;
+const Editor = (props) => <TestEditor {...{onUpdate: jest.fn(), ...props}} />;
 
-Layouts.forEach(Layout => {
+Layouts.forEach((Layout) => {
   describe(`<${Layout.displayName}>`, () => {
     it(`wraps container with fullValue pointing to gd._fullLayout`, () => {
       const wrapper = mount(