Refresh

circle.yml → .circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:12.13.1-browsers
+      - image: cimg/node:20.6.0-browsers
 
     working_directory: ~/react-chart-editor
 
@@ -14,12 +14,12 @@ jobs:
             - v2-dependencies-{{ checksum "package.json" }}
             - v2-dependencies-
 
-      - run: npm install
+      - run: yarn install
 
       - save_cache:
           paths:
             - node_modules
           key: v2-dependencies-{{ checksum "package.json" }}
 
-      - run: npm test
-      - run: npm run test:percy
+      - run: yarn test
+      - run: yarn test:percy

.eslintrc

@@ -1,8 +1,8 @@
 {
   "extends": ["eslint:recommended", "prettier"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 13,
     "sourceType": "module",
     "ecmaFeatures": {
       "arrowFunctions": true,
@@ -15,6 +15,9 @@
       "modules": true,
       "templateStrings": true,
       "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
     }
   },
   "settings": {
@@ -25,24 +28,18 @@
   },
   "env": {
     "browser": true,
-    "es6": true,
+    "es2021": true,
     "jasmine": true,
     "jest": true,
     "node": true
   },
   "globals": {
     "jest": true
   },
-  "plugins": [
-    "react",
-    "import",
-    "react-percy"
-  ],
+  "plugins": ["react", "import", "react-percy", "jsx"],
   "overrides": [
     {
-      "files": [
-        "**/*.percy.{js,jsx}"
-      ],
+      "files": ["**/*.percy.{js,jsx}"],
       "env": {
         "react-percy/globals": true
       }
@@ -120,20 +117,30 @@
     "react/prop-types": "error",
     "valid-jsdoc": ["error"],
     "yoda": ["error"],
-    "spaced-comment": ["error", "always", {
-      "block": {
-        "exceptions": ["*"]
+    "spaced-comment": [
+      "error",
+      "always",
+      {
+        "block": {
+          "exceptions": ["*"]
+        }
       }
-    }],
-    "no-unused-vars": ["error", {
+    ],
+    "no-unused-vars": [
+      "error",
+      {
         "args": "after-used",
         "argsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^e$"
-    }],
-    "no-magic-numbers": ["error", {
-      "ignoreArrayIndexes": true,
+      }
+    ],
+    "no-magic-numbers": [
+      "error",
+      {
+        "ignoreArrayIndexes": true,
         "ignore": [-1, 0, 1, 2, 3, 100, 10, 0.5]
-    }],
+      }
+    ],
     "no-underscore-dangle": ["off"]
   }
 }

.gitignore

@@ -10,6 +10,8 @@ npm-debug.log*
 !.npmignore
 !.eslintrc
 !.eslintignore
+!.percy.yml
+!.circleci
 
 example/dist
 

.npmignore

@@ -1,16 +1,34 @@
+# Almost all .gitignore content
+
+npm-debug.log*
+*.sublime*
+accessTokens.js
+yarn.lock
+yarn-error.log
+package-lock.json
+storybook-static
+
+
+# Additionally:
+
 test
 src
 build
 examples
 
-circle.yml
-
 .ackrc
 .agignore
+.circleci
+.github
+.storybook
 .babelrc
 .eslintrc
 .gitattributes
+.percy.yml
 .prettierrc
 .git
+babel.config.json
+postcss.config.js
+renovate.json
 
 npm-debug.log

.percy.yml

@@ -0,0 +1,14 @@
+version: 2
+snapshot:
+  widths:
+    - 500
+  minHeight: 600
+  percyCSS: ""
+discovery:
+  allowedHostnames: []
+  disallowedHostnames: []
+  networkIdleTimeout: 100
+upload:
+  files: "**/*.{png,jpg,jpeg}"
+  ignore: ""
+  stripExtensions: false

.storybook/main.js

@@ -1,3 +1,13 @@
 module.exports = {
-  stories: ['../src/__stories__/index.js'],
+  stories: ['../src/__stories__/*.stories.js'],
+  core: {
+    disableTelemetry: true, // Disables telemetry
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
 };

.storybook/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-module.exports = async ({config, mode}) => {
+module.exports = async ({config}) => {
   config.module.rules.push({
     test: /\.scss$/,
     use: ['style-loader', 'css-loader', 'sass-loader'],

README.md

@@ -18,8 +18,8 @@ Check out the demo of the latest release of the `DefaultEditor` at https://plotl
 git clone [this repo]
 cd react-chart-editor
 cd examples/demo
-npm install
-npm start
+yarn install
+yarn watch
 ```
 
 See more examples
@@ -41,10 +41,10 @@ This repo contains a [dev app](https://github.com/plotly/react-chart-editor/tree
 
 ```
 cp accessTokens.tpl.js accessTokens.js # and edit to taste
-npm install
-npm start
+yarn install
+yarn watch
 # hacking happens here
-npm test
+yarn test
 ```
 
 ## Built-in Components

THEMING.md

@@ -77,16 +77,3 @@ Here is a sample theme to change the UI from light to dark. We attach all of our
 You can inspect the editor and see a full listing of all variables that you can override:
 
 ![see-css-variables-inspector](https://user-images.githubusercontent.com/11803153/34531018-7e24bbba-f076-11e7-90cd-a35fe5eae84d.png)
-
-## Caveats
-
-CSS custom properties are not supported in IE11. However, you can use a [PostCSS](https://github.com/postcss/postcss) plugin to convert the css properties to their true value when they are used. We are using [PostCSS Custom Properties](https://github.com/postcss/postcss-custom-properties).
-
-The PostCSS plugin we are using only applies to variables that are in the `:root{}` scope. If you'd like to both theme and use your styles to support IE11, you would need to import the unminified IE styles we ship with the editor:
- `import react-chart-editor/lib/react-chart-editor.ie.css` (this stylesheet has the variables attached to the `:root{}` scope).
-
- Then, rather than applying your custom properties to `.theme--dark .plotly-editor--theme-provider`, you would apply your overrides to `:root{}`.
-
- Finally, you would pipe in the PostCSS plugin(s) to your project and produce a css file with the properties applied as their true value. It's recommended to use the [PostCSS Remove Root](https://github.com/cbracco/postcss-remove-root) plugin after you have converted all of the properties.
-
- You can see our PostCSS scripts [here](https://github.com/plotly/react-chart-editor/tree/master/scripts/postcss.js).

babel.config.json

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "development": {"comments": false, "minified": true},
+    "production": {"comments": true, "minified": false}
+  },
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/env"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-proposal-object-rest-spread",
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "components": "./src/components",
+          "lib": "./src/lib",
+          "styles": "./src/styles"
+        }
+      }
+    ]
+  ]
+}

dev/App.js

@@ -2,29 +2,27 @@ import React, {Component} from 'react';
 import {hot} from 'react-hot-loader/root';
 import plotly from 'plotly.js/dist/plotly-with-meta';
 import '../src/styles/main.scss';
-import brace from 'brace'; // eslint-disable-line no-unused-vars
 import AceEditor from 'react-ace';
 import Select from 'react-select';
 import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 import Inspector from 'react-inspector';
 import dataSources from './dataSources';
-import 'brace/mode/json';
-import 'brace/theme/textmate';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
 
-// import {customConfigTest} from '../src/__stories__';
+// import {customConfigTest} from './customConfigTest';
 
-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 +64,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!');
     },
   },
@@ -122,8 +123,8 @@ class App extends Component {
     // 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 +136,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 +220,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 +235,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'}}