change prettier line width to 100 chars

.prettierrc

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

src/DefaultEditor.js

@@ -31,9 +31,7 @@ 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() {
@@ -75,27 +73,17 @@ class DefaultEditor extends Component {
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
         <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        {this.hasTransforms() && (
-          <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
-        )}
+        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />}
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
-        {this.hasAxes() && (
-          <StyleAxesPanel group={_('Style')} name={_('Axes')} />
-        )}
+        {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
         <StyleLegendPanel group={_('Style')} name={_('Legend')} />
-        {this.hasColorbars() && (
-          <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
-        )}
+        {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
         <StyleNotesPanel group={_('Style')} name={_('Annotations')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
-        {this.hasSliders() && (
-          <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
-        )}
-        {this.hasMenus() && (
-          <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
-        )}
+        {this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}
+        {this.hasMenus() && <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />}
         {this.props.children ? this.props.children : null}
       </PanelMenuWrapper>
     );

src/EditorControls.js

@@ -21,8 +21,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) {
@@ -85,12 +84,7 @@ class EditorControls extends Component {
             const value = payload.update[attr];
 
             if (splitTraceGroup) {
-              props = shamefullyCreateSplitStyleProps(
-                graphDiv,
-                attr,
-                traceIndex,
-                splitTraceGroup
-              );
+              props = shamefullyCreateSplitStyleProps(graphDiv, attr, traceIndex, splitTraceGroup);
             }
 
             props.forEach(p => {
@@ -262,17 +256,11 @@ class EditorControls extends Component {
         break;
 
       case EDITOR_ACTIONS.DELETE_TRANSFORM:
-        if (
-          isNumeric(payload.transformIndex) &&
-          payload.traceIndex < graphDiv.data.length
-        ) {
+        if (isNumeric(payload.transformIndex) && payload.traceIndex < graphDiv.data.length) {
           if (graphDiv.data[payload.traceIndex].transforms.length === 1) {
             delete graphDiv.data[payload.traceIndex].transforms;
           } else {
-            graphDiv.data[payload.traceIndex].transforms.splice(
-              payload.transformIndex,
-              1
-            );
+            graphDiv.data[payload.traceIndex].transforms.splice(payload.transformIndex, 1);
           }
           if (this.props.onUpdate) {
             this.props.onUpdate(
@@ -285,9 +273,7 @@ class EditorControls extends Component {
         break;
 
       default:
-        throw new Error(
-          this.localize('must specify an action type to handleEditorUpdate')
-        );
+        throw new Error(this.localize('must specify an action type to handleEditorUpdate'));
     }
   }
 

src/PlotlyEditor.js

@@ -29,18 +29,13 @@ class PlotlyEditor extends Component {
             srcConverters={this.props.srcConverters}
             makeDefaultTrace={this.props.makeDefaultTrace}
             glByDefault={this.props.glByDefault}
-            mapBoxAccess={Boolean(
-              this.props.config && this.props.config.mapboxAccessToken
-            )}
+            mapBoxAccess={Boolean(this.props.config && this.props.config.mapboxAccessToken)}
             fontOptions={this.props.fontOptions}
           >
             {this.props.children}
           </EditorControls>
         )}
-        <div
-          className="plotly_editor_plot"
-          style={{width: '100%', height: '100%'}}
-        >
+        <div className="plotly_editor_plot" style={{width: '100%', height: '100%'}}>
           <this.PlotComponent
             data={this.props.data}
             layout={this.props.layout}

src/__percy__/panels.percy.js

@@ -52,9 +52,7 @@ const panelFixture = (Panel, group, name, figure) => {
 const snapshotWidth = 500;
 
 Object.keys(mocks).forEach(m => {
-  const selectedPanels = panelsToTest[m]
-    ? panelsToTest[m]
-    : Object.keys(panels);
+  const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels);
 
   selectedPanels.forEach(p => {
     const words = p.split(/(?=[A-Z])/);

src/__tests__/syntax-test.js

@@ -2,14 +2,7 @@
 import fs from 'fs';
 import glob from 'glob';
 
-const BLACK_LIST = [
-  'fdescribe',
-  'fit',
-  'xdescribe',
-  'xit',
-  'it\\.only',
-  'describe\\.only',
-];
+const BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit', 'it\\.only', 'describe\\.only'];
 const REGEXS = BLACK_LIST.map(token => new RegExp(`^\\s*${token}\\(.*`));
 
 describe('Syntax and test validation', () => {

src/components/PanelMenuWrapper.js

@@ -30,10 +30,7 @@ class PanelsWithSidebar extends Component {
   }
 
   renderSection(section, i) {
-    if (
-      section.type &&
-      (section.type.plotly_editor_traits || {}).sidebar_element
-    ) {
+    if (section.type && (section.type.plotly_editor_traits || {}).sidebar_element) {
       return cloneElement(section, {key: i});
     }
     return (

src/components/containers/AnnotationAccordion.js

@@ -17,12 +17,7 @@ class AnnotationAccordion extends Component {
     const content =
       annotations.length &&
       annotations.map((ann, i) => (
-        <AnnotationFold
-          key={i}
-          annotationIndex={i}
-          name={ann.text}
-          canDelete={canAdd}
-        >
+        <AnnotationFold key={i} annotationIndex={i} name={ann.text} canDelete={canAdd}>
           {children}
         </AnnotationFold>
       ));

src/components/containers/FoldEmpty.js

@@ -13,14 +13,10 @@ export default class FoldEmpty extends Component {
           </div>
         ) : null}
         {messagePrimary ? (
-          <div className="fold__content__empty__message__primary">
-            {messagePrimary}
-          </div>
+          <div className="fold__content__empty__message__primary">{messagePrimary}</div>
         ) : null}
         {messageSecondary ? (
-          <div className="fold__content__empty__message__secondary">
-            {messageSecondary}
-          </div>
+          <div className="fold__content__empty__message__secondary">{messageSecondary}</div>
         ) : null}
         {children ? children : null}
       </div>

src/components/containers/Modal.js

@@ -6,19 +6,14 @@ const ModalHeader = ({title, handleClose}) => (
   <div className="modal__header">
     {title ? <div className="modal__header__title">{title}</div> : null}
     {handleClose ? (
-      <div
-        className="modal__header__close"
-        onClick={handleClose ? () => handleClose() : null}
-      >
+      <div className="modal__header__close" onClick={handleClose ? () => handleClose() : null}>
         <CloseIcon />
       </div>
     ) : null}
   </div>
 );
 
-const ModalContent = ({children}) => (
-  <div className="modal__content">{children}</div>
-);
+const ModalContent = ({children}) => <div className="modal__content">{children}</div>;
 
 class Modal extends Component {
   constructor(props) {
@@ -50,16 +45,10 @@ class Modal extends Component {
     return (
       <div className={classes}>
         <div className="modal__card">
-          <ModalHeader
-            title={title}
-            handleClose={() => this.context.handleClose()}
-          />
+          <ModalHeader title={title} handleClose={() => this.context.handleClose()} />
           <ModalContent>{children}</ModalContent>
         </div>
-        <div
-          className="modal__backdrop"
-          onClick={() => this.context.handleClose()}
-        />
+        <div className="modal__backdrop" onClick={() => this.context.handleClose()} />
       </div>
     );
   }

src/components/containers/ModalProvider.js

@@ -75,9 +75,7 @@ class ModalProvider extends React.Component {
     return (
       <Fragment>
         {this.props.children}
-        {this.state.open ? (
-          <Component isAnimatingOut={isAnimatingOut} {...componentProps} />
-        ) : null}
+        {this.state.open ? <Component isAnimatingOut={isAnimatingOut} {...componentProps} /> : null}
       </Fragment>
     );
   }

src/components/containers/PanelEmpty.js

@@ -11,9 +11,7 @@ class PanelEmpty extends Component {
     return (
       <div className={bem('panel', 'empty')}>
         <div className="panel__empty__message">
-          <div className="panel__empty__message__icon">
-            {Icon ? <Icon /> : <ChartLineIcon />}
-          </div>
+          <div className="panel__empty__message__icon">{Icon ? <Icon /> : <ChartLineIcon />}</div>
           <div className="panel__empty__message__heading">{heading}</div>
           <div className="panel__empty__message__content">{children}</div>
         </div>

src/components/containers/PanelHeader.js

@@ -17,13 +17,7 @@ class PanelHeader extends Component {
 
   render() {
     const {localize: _} = this.context;
-    const {
-      children,
-      addAction,
-      allowCollapse,
-      toggleFolds,
-      hasOpen,
-    } = this.props;
+    const {children, addAction, allowCollapse, toggleFolds, hasOpen} = this.props;
 
     // dropdown is styled with same styles as react-select component - see _dropdown.scss
     const icon = <PlusIcon />;

src/components/containers/PlotlyPanel.js

@@ -11,10 +11,7 @@ class PanelErrorImpl extends Component {
     const {localize: _} = this.context;
 
     return (
-      <PanelEmpty
-        icon={EmbedIconIcon}
-        heading={_('Well this is embarrassing.')}
-      >
+      <PanelEmpty icon={EmbedIconIcon} heading={_('Well this is embarrassing.')}>
         <p>{_('This panel could not be displayed due to an error.')}</p>
       </PanelEmpty>
     );
@@ -50,29 +47,22 @@ 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),
     });
   }
 
   toggleFold(index) {
-    this.setState(
-      update(this.state, {individualFoldStates: {$toggle: [index]}})
-    );
+    this.setState(update(this.state, {individualFoldStates: {$toggle: [index]}}));
   }
 
   calculateFolds() {
     // to get proper number of child folds and initialize component state
     let numFolds = 0;
 
     React.Children.forEach(this.props.children, child => {
-      if (
-        ((child && child.type && child.type.plotly_editor_traits) || {})
-          .foldable
-      ) {
+      if (((child && child.type && child.type.plotly_editor_traits) || {}).foldable) {
         numFolds++;
       }
     });
@@ -101,32 +91,22 @@ export class Panel extends Component {
       return <PanelError />;
     }
 
-    const newChildren = React.Children.map(
-      this.props.children,
-      (child, index) => {
-        if (
-          ((child && child.type && child.type.plotly_editor_traits) || {})
-            .foldable
-        ) {
-          return cloneElement(child, {
-            key: index,
-            folded: individualFoldStates[index] || false,
-            toggleFold: () => this.toggleFold(index),
-          });
-        }
-        return child;
+    const newChildren = React.Children.map(this.props.children, (child, index) => {
+      if (((child && child.type && child.type.plotly_editor_traits) || {}).foldable) {
+        return cloneElement(child, {
+          key: index,
+          folded: individualFoldStates[index] || false,
+          toggleFold: () => this.toggleFold(index),
+        });
       }
-    );
+      return child;
+    });
 
     return (
-      <div
-        className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}
-      >
+      <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
         <PanelHeader
           addAction={this.props.addAction}
-          allowCollapse={
-            this.props.showExpandCollapse && individualFoldStates.length > 1
-          }
+          allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
           toggleFolds={this.toggleFolds}
           hasOpen={individualFoldStates.some(s => s === false)}
         />