move circleci.yml to .circleci/config.yml

circle.yml → .circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:8.9
+      - image: circleci/node:8.11
 
     working_directory: ~/react-chart-editor
 
@@ -13,7 +13,8 @@ jobs:
           keys:
           - v1-dependencies-{{ checksum "package.json" }}
           - v1-dependencies-
-
+      - run: sudo apt-get update -y
+      - run: sudo apt-get install xserver-xorg-dev libxi-dev libxext-dev -y
       - run: npm install
 
       - save_cache:
@@ -22,4 +23,4 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       - run: npm test
-      - run: npm run test:percy
+#      - run: npm run test:percy

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 .*
 !.gitignore
 !.gitattributes
+!.circleci
 !.npmignore
 !.eslintrc
 !.eslintignore

package.json

@@ -51,7 +51,7 @@
     "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",
+    "eslint-plugin-react-percy": "^0.2.4",
     "fs": "^0.0.1-security",
     "gl": "^4.0.4",
     "glob": "^7.1.2",
@@ -63,13 +63,12 @@
     "postcss-combine-duplicated-selectors": "^6.0.2",
     "postcss-custom-properties": "^6.3.1",
     "postcss-remove-root": "^0.0.2",
-    "prettier": "^1.14.2",
+    "prettier": "^1.15.2",
     "react": "^16.6.3",
     "react-ace": "^6.1.4",
     "react-dom": "^16.6.3",
     "react-hot-loader": "^4.3.12",
     "react-inspector": "^2.2.2",
-    "react-percy": "^0.3.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "2.6.2",
     "sass-loader": "^7.1.0",
@@ -117,12 +116,13 @@
     "make:lib": "rimraf lib && mkdir lib && npm run make:lib:js && npm run make:lib:css && npm run make:combined-translation-keys",
     "make:translation-keys": "node scripts/findTranslationKeys.js",
     "prepublishOnly": "npm run make:lib",
+    "percy": "react-percy",
     "start": "webpack-dev-server --hot",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
     "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": "npm run percy",
     "test:percy-local": "react-percy --debug",
     "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"

src/components/PanelMenuWrapper.js

@@ -93,14 +93,12 @@ class PanelsWithSidebar extends Component {
       <PanelMenuWrapperContext.Provider value={this.provideValue()}>
         <div className={bem('editor_controls', 'wrapper')}>
           <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
-          {React.Children.map(
-            this.props.children,
-            (child, i) =>
-              child === null ||
-              this.state.group !== child.props.group ||
-              this.state.panel !== child.props.name
-                ? null
-                : cloneElement(child, {key: i})
+          {React.Children.map(this.props.children, (child, i) =>
+            child === null ||
+            this.state.group !== child.props.group ||
+            this.state.panel !== child.props.name
+              ? null
+              : cloneElement(child, {key: i})
           )}
         </div>
       </PanelMenuWrapperContext.Provider>

src/components/fields/AxesSelector.js

@@ -28,14 +28,13 @@ class AxesSelector extends Component {
       Object.values(fullLayout._subplots).some(s => s.length > 1);
 
     const options = multipleSublots
-      ? axesOptions.map(
-          option =>
-            option.value === 'allaxes'
-              ? option
-              : {
-                  label: option.title,
-                  value: option.value,
-                }
+      ? axesOptions.map(option =>
+          option.value === 'allaxes'
+            ? option
+            : {
+                label: option.title,
+                value: option.value,
+              }
         )
       : axesOptions;
 

src/components/fields/MarkerColor.js

@@ -179,8 +179,8 @@ class UnconnectedMarkerColor extends Component {
             {!type
               ? null
               : type === 'constant'
-                ? this.renderConstantControls()
-                : this.renderVariableControls()}
+              ? this.renderConstantControls()
+              : this.renderVariableControls()}
           </Field>
           {type === 'constant' ? null : (
             <Fragment>

src/components/fields/derived.js

@@ -125,8 +125,8 @@ export const BinningDropdown = connectToContainer(UnconnectedDropdown, {
       plotProps.fullContainer.type === 'histogram2d'
         ? 'Z'
         : plotProps.fullContainer.orientation === 'v'
-          ? 'Y'
-          : 'X';
+        ? 'Y'
+        : 'X';
     plotProps.options = [
       {label: _('Count ') + axis, value: 'count'},
       {label: _('Sum ') + axis, value: 'sum'},

src/components/widgets/TraceTypeSelector.js

@@ -8,21 +8,20 @@ import {EditorControlsContext, ModalProviderContext} from '../../context';
 
 const renderActionItems = (actionItems, item) =>
   actionItems
-    ? actionItems(item).map(
-        (action, i) =>
-          !action.onClick ? null : (
-            <a
-              className="trace-item__actions__item"
-              key={i}
-              aria-label={action.label}
-              data-microtip-position={`top-left`}
-              role="tooltip"
-              onClick={action.onClick}
-              target="_blank"
-            >
-              {action.icon}
-            </a>
-          )
+    ? actionItems(item).map((action, i) =>
+        !action.onClick ? null : (
+          <a
+            className="trace-item__actions__item"
+            key={i}
+            aria-label={action.label}
+            data-microtip-position={`top-left`}
+            role="tooltip"
+            onClick={action.onClick}
+            target="_blank"
+          >
+            {action.icon}
+          </a>
+        )
       )
     : null;
 

src/components/widgets/text_editors/RichText/DraftCommands.js

@@ -145,9 +145,9 @@ export function insertSoftNewline(editorState) {
  */
 export function toggleInlineStyle(editorState, inlineStyle) {
   /*
-     * TODO tech-debt. Link toggles should not go via toggleInlineStyle.
-     * https://github.com/plotly/streambed/issues/6354
-     */
+   * TODO tech-debt. Link toggles should not go via toggleInlineStyle.
+   * https://github.com/plotly/streambed/issues/6354
+   */
 
   if (inlineStyle === LINK) {
     return toggleLink(editorState);

src/components/widgets/text_editors/RichText/LinkEditor.js

@@ -60,9 +60,9 @@ class LinkEditor extends Component {
 
   onInputKeyDown(ev) {
     /*
-         * `KeyboardEvent.key` enjoys excellent cross-browser support.
-         * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
-         */
+     * `KeyboardEvent.key` enjoys excellent cross-browser support.
+     * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+     */
     const {key} = ev;
 
     if (key === RETURN_KEY) {

src/components/widgets/text_editors/RichText/configuration.js

@@ -26,21 +26,21 @@ export const STYLE_MAP = {
   },
   [SUBSCRIPT]: {
     /*
-         * Can't use text-align; IE renders `text-bottom` properly, but
-         * FF doesn't (same height as `bottom`). Chrome doesn't understand
-         * `text-align: bottom`. Use relative positioning instead.
-         */
+     * Can't use text-align; IE renders `text-bottom` properly, but
+     * FF doesn't (same height as `bottom`). Chrome doesn't understand
+     * `text-align: bottom`. Use relative positioning instead.
+     */
     lineHeight: 0,
     fontSize: '65%',
     position: 'relative',
     bottom: '-3px',
   },
   [SUPERSCRIPT]: {
     /*
-         * Can't use text-align; IE renders `text-top` properly, but
-         * FF doesn't (same height as `top`). Chrome doesn't understand
-         * `text-align: top`. Use relative positioning instead.
-         */
+     * Can't use text-align; IE renders `text-top` properly, but
+     * FF doesn't (same height as `top`). Chrome doesn't understand
+     * `text-align: top`. Use relative positioning instead.
+     */
     lineHeight: 0,
     fontSize: '65%',
     position: 'relative',

src/components/widgets/text_editors/RichText/index.js

@@ -37,12 +37,12 @@ class RichText extends Component {
     super(props, context);
 
     /*
-         * Initially set state based on the plotly.js annotation content.
-         * After this, as long as this component is mounted, it owns the source
-         * of truth for the annotation value via `this.state.editorState`.
-         * This state may be updated externally via a prop update.
-         * See `componentWillReceiveProps`.
-         */
+     * Initially set state based on the plotly.js annotation content.
+     * After this, as long as this component is mounted, it owns the source
+     * of truth for the annotation value via `this.state.editorState`.
+     * This state may be updated externally via a prop update.
+     * See `componentWillReceiveProps`.
+     */
     this.state = {
       editorState: props.value.toString().trim().length
         ? this.createEditorStateFromHTML(props.value)
@@ -71,13 +71,13 @@ class RichText extends Component {
     const {linkEditorFocus, editorFocus} = this.state;
 
     /*
-         * Don't worry about what plotly.js thinks the annotation value
-         * should be while we're using our editor, for these reasons:
-         *
-         * 1. The editor should be considered the source of truth, unless the
-         *    user is actually editing the annotation inline, in the chart.
-         * 2. Sometimes we get updates with stale values.
-         */
+     * Don't worry about what plotly.js thinks the annotation value
+     * should be while we're using our editor, for these reasons:
+     *
+     * 1. The editor should be considered the source of truth, unless the
+     *    user is actually editing the annotation inline, in the chart.
+     * 2. Sometimes we get updates with stale values.
+     */
     if (linkEditorFocus || editorFocus) {
       return;
     }
@@ -241,11 +241,11 @@ class RichText extends Component {
    */
   onLinkEditorClose() {
     /*
-         * Focus on editor immediately to avoid error that occurs when
-         * `selection.extend` is called and another element has focus.
-         * https://bugzilla.mozilla.org/show_bug.cgi?id=921444
-         * https://github.com/facebook/draft-js/blob/342576bf7186d07c82a41d9ca8169130669747d6/src/component/selection/setDraftEditorSelection.js#L128-L134
-         */
+     * Focus on editor immediately to avoid error that occurs when
+     * `selection.extend` is called and another element has focus.
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=921444
+     * https://github.com/facebook/draft-js/blob/342576bf7186d07c82a41d9ca8169130669747d6/src/component/selection/setDraftEditorSelection.js#L128-L134
+     */
     this.focus();
 
     // Hide the editor.