Merge pull request #1172 from plotly/refresh

Refresh

Author: dmt0

circle.yml renamed to .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"
+        }
+      }
+    ]
+  ]
+}