diff --git a/circle.yml b/.circleci/config.yml similarity index 76% rename from circle.yml rename to .circleci/config.yml index 888a1699d..ec6f17e97 100644 --- a/circle.yml +++ b/.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 diff --git a/.eslintrc b/.eslintrc index f14e415b4..542bfaaa8 100644 --- a/.eslintrc +++ b/.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,7 +28,7 @@ }, "env": { "browser": true, - "es6": true, + "es2021": true, "jasmine": true, "jest": true, "node": true @@ -33,16 +36,10 @@ "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"] } } diff --git a/.gitignore b/.gitignore index 7dbb9268e..5e825d06d 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,8 @@ npm-debug.log* !.npmignore !.eslintrc !.eslintignore +!.percy.yml +!.circleci example/dist diff --git a/.npmignore b/.npmignore index 520eefd8c..da624398d 100644 --- a/.npmignore +++ b/.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 diff --git a/.percy.yml b/.percy.yml new file mode 100644 index 000000000..20bcacc9b --- /dev/null +++ b/.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 diff --git a/.storybook/main.js b/.storybook/main.js index d94c5421c..753d8041d 100644 --- a/.storybook/main.js +++ b/.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, + }, }; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index e7461b8a0..456f33331 100644 --- a/.storybook/webpack.config.js +++ b/.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'], diff --git a/README.md b/README.md index bd8ab42ac..5f8217bb1 100644 --- a/README.md +++ b/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 diff --git a/THEMING.md b/THEMING.md index fafec1193..2e7ca6c49 100644 --- a/THEMING.md +++ b/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). diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 000000000..776e7b91b --- /dev/null +++ b/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" + } + } + ] + ] +} diff --git a/dev/App.js b/dev/App.js index 0ab145f45..eabc438ad 100644 --- a/dev/App.js +++ b/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 { this.setState({json_string})} + onChange={(json_string) => this.setState({json_string})} value={this.state.json_string} name="UNIQUE_ID_OF_DIV" style={{height: '80vh'}} diff --git a/src/__stories__/index.js b/dev/customConfigTest.js similarity index 52% rename from src/__stories__/index.js rename to dev/customConfigTest.js index 0790d682c..7d1ab10b1 100644 --- a/src/__stories__/index.js +++ b/dev/customConfigTest.js @@ -1,17 +1,3 @@ -import {TestEditor, setupGraphDiv, fixtures} from 'lib/test-utils'; -import plotly from 'plotly.js/dist/plotly'; - -import {PanelMenuWrapper} from '../components'; - -import * as mocks from '../../dev/percy'; -import * as panels from '../default_panels/'; - -import '../../dev/styles.css'; -import '../styles/main.scss'; -import './stories.css'; - -import React from 'react'; -import {storiesOf} from '@storybook/react'; export const customConfigTest = { visibility_rules: { blacklist: [ @@ -78,68 +64,3 @@ export const customConfigTest = { ], }, }; - -/** - * To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js - * To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested - */ -const panelsToTest = { - bar: ['GraphCreatePanel', 'StyleTracesPanel'], - box: ['GraphCreatePanel', 'StyleTracesPanel'], - pie: ['GraphCreatePanel', 'StyleTracesPanel'], - histogram: ['GraphCreatePanel', 'StyleTracesPanel'], - histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'], - violin: ['GraphCreatePanel', 'StyleTracesPanel'], - waterfall: ['GraphCreatePanel', 'StyleTracesPanel'], - sunburst: ['GraphCreatePanel', 'StyleTracesPanel'], - sankey: ['GraphCreatePanel', 'StyleTracesPanel'], - geoTest: ['GraphCreatePanel', 'StyleMapsPanel', 'StyleTracesPanel'], - funnel: ['GraphCreatePanel', 'StyleTracesPanel'], - funnelarea: ['GraphCreatePanel', 'StyleTracesPanel'], -}; - -window.URL.createObjectURL = function () { - return null; -}; - -const panelFixture = (Panel, group, name, figure, customConfig) => { - const gd = setupGraphDiv(figure, plotly); - gd._context = plotly.setPlotConfig(); - gd._context.setBackground = () => { - return null; - }; - - return ( -
- - - - - -
- ); -}; - -let stories = storiesOf('Panels', module); - -Object.keys(mocks).forEach((m) => { - const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels); - - selectedPanels.forEach((p) => { - const words = p.split(/(?=[A-Z])/); - const panelGroup = words[0]; - const panelName = words.slice(1, -1).join(' '); - - stories = stories - .add(`${m}_${p}`, () => panelFixture(panels[p], panelGroup, panelName, mocks[m])) - .add(`${m}_${p}_withCustomConfig`, () => - panelFixture(panels[p], panelGroup, panelName, mocks[m], customConfigTest) - ); - }); -}); diff --git a/dev/dataSources.js b/dev/dataSources.js index cb08bc40f..65b04a79f 100644 --- a/dev/dataSources.js +++ b/dev/dataSources.js @@ -2,496 +2,41 @@ export default { 'tips.total_bill': [ - 16.99, - 10.34, - 21.01, - 23.68, - 24.59, - 25.29, - 8.77, - 26.88, - 15.04, - 14.78, - 10.27, - 35.26, - 15.42, - 18.43, - 14.83, - 21.58, - 10.33, - 16.29, - 16.97, - 20.65, - 17.92, - 20.29, - 15.77, - 39.42, - 19.82, - 17.81, - 13.37, - 12.69, - 21.7, - 19.65, - 9.55, - 18.35, - 15.06, - 20.69, - 17.78, - 24.06, - 16.31, - 16.93, - 18.69, - 31.27, - 16.04, - 17.46, - 13.94, - 9.68, - 30.4, - 18.29, - 22.23, - 32.4, - 28.55, - 18.04, - 12.54, - 10.29, - 34.81, - 9.94, - 25.56, - 19.49, - 38.01, - 26.41, - 11.24, - 48.27, - 20.29, - 13.81, - 11.02, - 18.29, - 17.59, - 20.08, - 16.45, - 3.07, - 20.23, - 15.01, - 12.02, - 17.07, - 26.86, - 25.28, - 14.73, - 10.51, - 17.92, - 27.2, - 22.76, - 17.29, - 19.44, - 16.66, - 10.07, - 32.68, - 15.98, - 34.83, - 13.03, - 18.28, - 24.71, - 21.16, - 28.97, - 22.49, - 5.75, - 16.32, - 22.75, - 40.17, - 27.28, - 12.03, - 21.01, - 12.46, - 11.35, - 15.38, - 44.3, - 22.42, - 20.92, - 15.36, - 20.49, - 25.21, - 18.24, - 14.31, - 14.0, - 7.25, - 38.07, - 23.95, - 25.71, - 17.31, - 29.93, - 10.65, - 12.43, - 24.08, - 11.69, - 13.42, - 14.26, - 15.95, - 12.48, - 29.8, - 8.52, - 14.52, - 11.38, - 22.82, - 19.08, - 20.27, - 11.17, - 12.26, - 18.26, - 8.51, - 10.33, - 14.15, - 16.0, - 13.16, - 17.47, - 34.3, - 41.19, - 27.05, - 16.43, - 8.35, - 18.64, - 11.87, - 9.78, - 7.51, - 14.07, - 13.13, - 17.26, - 24.55, - 19.77, - 29.85, - 48.17, - 25.0, - 13.39, - 16.49, - 21.5, - 12.66, - 16.21, - 13.81, - 17.51, - 24.52, - 20.76, - 31.71, - 10.59, - 10.63, - 50.81, - 15.81, - 7.25, - 31.85, - 16.82, - 32.9, - 17.89, - 14.48, - 9.6, - 34.63, - 34.65, - 23.33, - 45.35, - 23.17, - 40.55, - 20.69, - 20.9, - 30.46, - 18.15, - 23.1, - 15.69, - 19.81, - 28.44, - 15.48, - 16.58, - 7.56, - 10.34, - 43.11, - 13.0, - 13.51, - 18.71, - 12.74, - 13.0, - 16.4, - 20.53, - 16.47, - 26.59, - 38.73, - 24.27, - 12.76, - 30.06, - 25.89, - 48.33, - 13.27, - 28.17, - 12.9, - 28.15, - 11.59, - 7.74, - 30.14, - 12.16, - 13.42, - 8.58, - 15.98, - 13.42, - 16.27, - 10.09, - 20.45, - 13.28, - 22.12, - 24.01, - 15.69, - 11.61, - 10.77, - 15.53, - 10.07, - 12.6, - 32.83, - 35.83, - 29.03, - 27.18, - 22.67, - 17.82, - 18.78, + 16.99, 10.34, 21.01, 23.68, 24.59, 25.29, 8.77, 26.88, 15.04, 14.78, 10.27, 35.26, 15.42, 18.43, + 14.83, 21.58, 10.33, 16.29, 16.97, 20.65, 17.92, 20.29, 15.77, 39.42, 19.82, 17.81, 13.37, + 12.69, 21.7, 19.65, 9.55, 18.35, 15.06, 20.69, 17.78, 24.06, 16.31, 16.93, 18.69, 31.27, 16.04, + 17.46, 13.94, 9.68, 30.4, 18.29, 22.23, 32.4, 28.55, 18.04, 12.54, 10.29, 34.81, 9.94, 25.56, + 19.49, 38.01, 26.41, 11.24, 48.27, 20.29, 13.81, 11.02, 18.29, 17.59, 20.08, 16.45, 3.07, 20.23, + 15.01, 12.02, 17.07, 26.86, 25.28, 14.73, 10.51, 17.92, 27.2, 22.76, 17.29, 19.44, 16.66, 10.07, + 32.68, 15.98, 34.83, 13.03, 18.28, 24.71, 21.16, 28.97, 22.49, 5.75, 16.32, 22.75, 40.17, 27.28, + 12.03, 21.01, 12.46, 11.35, 15.38, 44.3, 22.42, 20.92, 15.36, 20.49, 25.21, 18.24, 14.31, 14.0, + 7.25, 38.07, 23.95, 25.71, 17.31, 29.93, 10.65, 12.43, 24.08, 11.69, 13.42, 14.26, 15.95, 12.48, + 29.8, 8.52, 14.52, 11.38, 22.82, 19.08, 20.27, 11.17, 12.26, 18.26, 8.51, 10.33, 14.15, 16.0, + 13.16, 17.47, 34.3, 41.19, 27.05, 16.43, 8.35, 18.64, 11.87, 9.78, 7.51, 14.07, 13.13, 17.26, + 24.55, 19.77, 29.85, 48.17, 25.0, 13.39, 16.49, 21.5, 12.66, 16.21, 13.81, 17.51, 24.52, 20.76, + 31.71, 10.59, 10.63, 50.81, 15.81, 7.25, 31.85, 16.82, 32.9, 17.89, 14.48, 9.6, 34.63, 34.65, + 23.33, 45.35, 23.17, 40.55, 20.69, 20.9, 30.46, 18.15, 23.1, 15.69, 19.81, 28.44, 15.48, 16.58, + 7.56, 10.34, 43.11, 13.0, 13.51, 18.71, 12.74, 13.0, 16.4, 20.53, 16.47, 26.59, 38.73, 24.27, + 12.76, 30.06, 25.89, 48.33, 13.27, 28.17, 12.9, 28.15, 11.59, 7.74, 30.14, 12.16, 13.42, 8.58, + 15.98, 13.42, 16.27, 10.09, 20.45, 13.28, 22.12, 24.01, 15.69, 11.61, 10.77, 15.53, 10.07, 12.6, + 32.83, 35.83, 29.03, 27.18, 22.67, 17.82, 18.78, ], 'tips.tip': [ - 1.01, - 1.66, - 3.5, - 3.31, - 3.61, - 4.71, - 2.0, - 3.12, - 1.96, - 3.23, - 1.71, - 5.0, - 1.57, - 3.0, - 3.02, - 3.92, - 1.67, - 3.71, - 3.5, - 3.35, - 4.08, - 2.75, - 2.23, - 7.58, - 3.18, - 2.34, - 2.0, - 2.0, - 4.3, - 3.0, - 1.45, - 2.5, - 3.0, - 2.45, - 3.27, - 3.6, - 2.0, - 3.07, - 2.31, - 5.0, - 2.24, - 2.54, - 3.06, - 1.32, - 5.6, - 3.0, - 5.0, - 6.0, - 2.05, - 3.0, - 2.5, - 2.6, - 5.2, - 1.56, - 4.34, - 3.51, - 3.0, - 1.5, - 1.76, - 6.73, - 3.21, - 2.0, - 1.98, - 3.76, - 2.64, - 3.15, - 2.47, - 1.0, - 2.01, - 2.09, - 1.97, - 3.0, - 3.14, - 5.0, - 2.2, - 1.25, - 3.08, - 4.0, - 3.0, - 2.71, - 3.0, - 3.4, - 1.83, - 5.0, - 2.03, - 5.17, - 2.0, - 4.0, - 5.85, - 3.0, - 3.0, - 3.5, - 1.0, - 4.3, - 3.25, - 4.73, - 4.0, - 1.5, - 3.0, - 1.5, - 2.5, - 3.0, - 2.5, - 3.48, - 4.08, - 1.64, - 4.06, - 4.29, - 3.76, - 4.0, - 3.0, - 1.0, - 4.0, - 2.55, - 4.0, - 3.5, - 5.07, - 1.5, - 1.8, - 2.92, - 2.31, - 1.68, - 2.5, - 2.0, - 2.52, - 4.2, - 1.48, - 2.0, - 2.0, - 2.18, - 1.5, - 2.83, - 1.5, - 2.0, - 3.25, - 1.25, - 2.0, - 2.0, - 2.0, - 2.75, - 3.5, - 6.7, - 5.0, - 5.0, - 2.3, - 1.5, - 1.36, - 1.63, - 1.73, - 2.0, - 2.5, - 2.0, - 2.74, - 2.0, - 2.0, - 5.14, - 5.0, - 3.75, - 2.61, - 2.0, - 3.5, - 2.5, - 2.0, - 2.0, - 3.0, - 3.48, - 2.24, - 4.5, - 1.61, - 2.0, - 10.0, - 3.16, - 5.15, - 3.18, - 4.0, - 3.11, - 2.0, - 2.0, - 4.0, - 3.55, - 3.68, - 5.65, - 3.5, - 6.5, - 3.0, - 5.0, - 3.5, - 2.0, - 3.5, - 4.0, - 1.5, - 4.19, - 2.56, - 2.02, - 4.0, - 1.44, - 2.0, - 5.0, - 2.0, - 2.0, - 4.0, - 2.01, - 2.0, - 2.5, - 4.0, - 3.23, - 3.41, - 3.0, - 2.03, - 2.23, - 2.0, - 5.16, - 9.0, - 2.5, - 6.5, - 1.1, - 3.0, - 1.5, - 1.44, - 3.09, - 2.2, - 3.48, - 1.92, - 3.0, - 1.58, - 2.5, - 2.0, - 3.0, - 2.72, - 2.88, - 2.0, - 3.0, - 3.39, - 1.47, - 3.0, - 1.25, - 1.0, - 1.17, - 4.67, - 5.92, - 2.0, - 2.0, - 1.75, - 3.0, + 1.01, 1.66, 3.5, 3.31, 3.61, 4.71, 2.0, 3.12, 1.96, 3.23, 1.71, 5.0, 1.57, 3.0, 3.02, 3.92, + 1.67, 3.71, 3.5, 3.35, 4.08, 2.75, 2.23, 7.58, 3.18, 2.34, 2.0, 2.0, 4.3, 3.0, 1.45, 2.5, 3.0, + 2.45, 3.27, 3.6, 2.0, 3.07, 2.31, 5.0, 2.24, 2.54, 3.06, 1.32, 5.6, 3.0, 5.0, 6.0, 2.05, 3.0, + 2.5, 2.6, 5.2, 1.56, 4.34, 3.51, 3.0, 1.5, 1.76, 6.73, 3.21, 2.0, 1.98, 3.76, 2.64, 3.15, 2.47, + 1.0, 2.01, 2.09, 1.97, 3.0, 3.14, 5.0, 2.2, 1.25, 3.08, 4.0, 3.0, 2.71, 3.0, 3.4, 1.83, 5.0, + 2.03, 5.17, 2.0, 4.0, 5.85, 3.0, 3.0, 3.5, 1.0, 4.3, 3.25, 4.73, 4.0, 1.5, 3.0, 1.5, 2.5, 3.0, + 2.5, 3.48, 4.08, 1.64, 4.06, 4.29, 3.76, 4.0, 3.0, 1.0, 4.0, 2.55, 4.0, 3.5, 5.07, 1.5, 1.8, + 2.92, 2.31, 1.68, 2.5, 2.0, 2.52, 4.2, 1.48, 2.0, 2.0, 2.18, 1.5, 2.83, 1.5, 2.0, 3.25, 1.25, + 2.0, 2.0, 2.0, 2.75, 3.5, 6.7, 5.0, 5.0, 2.3, 1.5, 1.36, 1.63, 1.73, 2.0, 2.5, 2.0, 2.74, 2.0, + 2.0, 5.14, 5.0, 3.75, 2.61, 2.0, 3.5, 2.5, 2.0, 2.0, 3.0, 3.48, 2.24, 4.5, 1.61, 2.0, 10.0, + 3.16, 5.15, 3.18, 4.0, 3.11, 2.0, 2.0, 4.0, 3.55, 3.68, 5.65, 3.5, 6.5, 3.0, 5.0, 3.5, 2.0, 3.5, + 4.0, 1.5, 4.19, 2.56, 2.02, 4.0, 1.44, 2.0, 5.0, 2.0, 2.0, 4.0, 2.01, 2.0, 2.5, 4.0, 3.23, 3.41, + 3.0, 2.03, 2.23, 2.0, 5.16, 9.0, 2.5, 6.5, 1.1, 3.0, 1.5, 1.44, 3.09, 2.2, 3.48, 1.92, 3.0, + 1.58, 2.5, 2.0, 3.0, 2.72, 2.88, 2.0, 3.0, 3.39, 1.47, 3.0, 1.25, 1.0, 1.17, 4.67, 5.92, 2.0, + 2.0, 1.75, 3.0, ], 'tips.sex': [ 'Female', @@ -1478,250 +1023,14 @@ export default { 'Dinner', ], 'tips.size': [ - 2, - 3, - 3, - 2, - 4, - 4, - 2, - 4, - 2, - 2, - 2, - 4, - 2, - 4, - 2, - 2, - 3, - 3, - 3, - 3, - 2, - 2, - 2, - 4, - 2, - 4, - 2, - 2, - 2, - 2, - 2, - 4, - 2, - 4, - 2, - 3, - 3, - 3, - 3, - 3, - 3, - 2, - 2, - 2, - 4, - 2, - 2, - 4, - 3, - 2, - 2, - 2, - 4, - 2, - 4, - 2, - 4, - 2, - 2, - 4, - 2, - 2, - 2, - 4, - 3, - 3, - 2, - 1, - 2, - 2, - 2, - 3, - 2, - 2, - 2, - 2, - 2, - 4, - 2, - 2, - 2, - 2, - 1, - 2, - 2, - 4, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 4, - 2, - 2, - 2, - 2, - 2, - 2, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 1, - 3, - 2, - 3, - 2, - 4, - 2, - 2, - 4, - 2, - 2, - 2, - 2, - 2, - 6, - 2, - 2, - 2, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 6, - 5, - 6, - 2, - 2, - 3, - 2, - 2, - 2, - 2, - 2, - 3, - 4, - 4, - 5, - 6, - 4, - 2, - 4, - 4, - 2, - 3, - 2, - 2, - 3, - 2, - 4, - 2, - 2, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 4, - 2, - 3, - 4, - 2, - 5, - 3, - 5, - 3, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 4, - 2, - 2, - 3, - 2, - 2, - 2, - 4, - 3, - 3, - 4, - 2, - 2, - 3, - 4, - 4, - 2, - 3, - 2, - 5, - 2, - 2, - 4, - 2, - 2, - 1, - 3, - 2, - 2, - 2, - 4, - 2, - 2, - 4, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 3, - 3, - 2, - 2, - 2, - 2, + 2, 3, 3, 2, 4, 4, 2, 4, 2, 2, 2, 4, 2, 4, 2, 2, 3, 3, 3, 3, 2, 2, 2, 4, 2, 4, 2, 2, 2, 2, 2, 4, + 2, 4, 2, 3, 3, 3, 3, 3, 3, 2, 2, 2, 4, 2, 2, 4, 3, 2, 2, 2, 4, 2, 4, 2, 4, 2, 2, 4, 2, 2, 2, 4, + 3, 3, 2, 1, 2, 2, 2, 3, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 1, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, + 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 1, 3, 2, 3, 2, 4, 2, 2, 4, 2, 2, 2, 2, 2, 6, 2, 2, + 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 5, 6, 2, 2, 3, 2, 2, 2, 2, 2, 3, 4, 4, 5, 6, 4, 2, 4, + 4, 2, 3, 2, 2, 3, 2, 4, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 3, 4, 2, 5, 3, 5, 3, 3, 2, 2, + 2, 2, 2, 2, 2, 4, 2, 2, 3, 2, 2, 2, 4, 3, 3, 4, 2, 2, 3, 4, 4, 2, 3, 2, 5, 2, 2, 4, 2, 2, 1, 3, + 2, 2, 2, 4, 2, 2, 4, 3, 2, 2, 2, 2, 2, 2, 3, 3, 2, 2, 2, 2, ], ints: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17], @@ -2202,223 +1511,22 @@ export default { '', ], energyLinkSource: [ - 0, - 1, - 1, - 1, - 1, - 6, - 7, - 8, - 10, - 9, - 11, - 11, - 11, - 15, - 15, - 15, - 15, - 15, - 15, - 15, - 15, - 15, - 15, - 15, - 23, - 25, - 5, - 5, - 5, - 5, - 5, - 27, - 17, - 17, - 28, - 29, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 34, - 24, - 35, - 35, - 36, - 38, - 37, - 39, - 39, - 40, - 40, - 41, - 42, - 43, - 43, - 4, - 4, - 4, - 26, - 26, - 26, - 44, - 45, - 46, - 47, - 35, - 35, + 0, 1, 1, 1, 1, 6, 7, 8, 10, 9, 11, 11, 11, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 23, 25, + 5, 5, 5, 5, 5, 27, 17, 17, 28, 29, 2, 2, 2, 2, 2, 2, 2, 2, 34, 24, 35, 35, 36, 38, 37, 39, 39, + 40, 40, 41, 42, 43, 43, 4, 4, 4, 26, 26, 26, 44, 45, 46, 47, 35, 35, ], energyLinkTarget: [ - 1, - 2, - 3, - 4, - 5, - 2, - 4, - 9, - 9, - 4, - 12, - 13, - 14, - 16, - 14, - 17, - 12, - 18, - 19, - 13, - 3, - 20, - 21, - 22, - 24, - 24, - 13, - 3, - 26, - 19, - 12, - 15, - 28, - 3, - 18, - 15, - 12, - 30, - 18, - 31, - 32, - 19, - 33, - 20, - 1, - 5, - 26, - 26, - 37, - 37, - 2, - 4, - 1, - 14, - 13, - 15, - 14, - 42, - 41, - 19, - 26, - 12, - 15, - 3, - 11, - 15, - 1, - 15, - 15, - 26, - 26, + 1, 2, 3, 4, 5, 2, 4, 9, 9, 4, 12, 13, 14, 16, 14, 17, 12, 18, 19, 13, 3, 20, 21, 22, 24, 24, 13, + 3, 26, 19, 12, 15, 28, 3, 18, 15, 12, 30, 18, 31, 32, 19, 33, 20, 1, 5, 26, 26, 37, 37, 2, 4, 1, + 14, 13, 15, 14, 42, 41, 19, 26, 12, 15, 3, 11, 15, 1, 15, 15, 26, 26, ], energyLinkValue: [ - 124.729, - 0.597, - 26.862, - 280.322, - 81.144, - 35, - 35, - 11.606, - 63.965, - 75.571, - 10.639, - 22.505, - 46.184, - 104.453, - 113.726, - 27.14, - 342.165, - 37.797, - 4.412, - 40.858, - 56.691, - 7.863, - 90.008, - 93.494, - 40.719, - 82.233, - 0.129, - 1.401, - 151.891, - 2.096, - 48.58, - 7.013, - 20.897, - 6.242, - 20.897, - 6.995, - 121.066, - 128.69, - 135.835, - 14.458, - 206.267, - 3.64, - 33.218, - 4.413, - 14.375, - 122.952, - 500, - 139.978, - 504.287, - 107.703, - 611.99, - 56.587, - 77.81, - 193.026, - 70.672, - 59.901, - 19.263, - 19.263, - 59.901, - 0.882, - 400.12, - 46.477, - 525.531, - 787.129, - 79.329, - 9.452, - 182.01, - 19.013, - 289.366, - 100, - 100, + 124.729, 0.597, 26.862, 280.322, 81.144, 35, 35, 11.606, 63.965, 75.571, 10.639, 22.505, 46.184, + 104.453, 113.726, 27.14, 342.165, 37.797, 4.412, 40.858, 56.691, 7.863, 90.008, 93.494, 40.719, + 82.233, 0.129, 1.401, 151.891, 2.096, 48.58, 7.013, 20.897, 6.242, 20.897, 6.995, 121.066, + 128.69, 135.835, 14.458, 206.267, 3.64, 33.218, 4.413, 14.375, 122.952, 500, 139.978, 504.287, + 107.703, 611.99, 56.587, 77.81, 193.026, 70.672, 59.901, 19.263, 19.263, 59.901, 0.882, 400.12, + 46.477, 525.531, 787.129, 79.329, 9.452, 182.01, 19.013, 289.366, 100, 100, ], energyLinkColor: [ 'rgba(0,0,96,0.2)', diff --git a/examples/custom/src/App.js b/examples/custom/src/App.js index 25a6d71f6..f8c7cda8d 100644 --- a/examples/custom/src/App.js +++ b/examples/custom/src/App.js @@ -9,7 +9,7 @@ const dataSources = { col2: [4, 3, 2], // eslint-disable-line no-magic-numbers col3: [17, 13, 9], // eslint-disable-line no-magic-numbers }; -const dataSourceOptions = Object.keys(dataSources).map(name => ({ +const dataSourceOptions = Object.keys(dataSources).map((name) => ({ value: name, label: name, })); diff --git a/examples/custom/src/CustomEditor.js b/examples/custom/src/CustomEditor.js index 8199f4cc4..c8dc62857 100644 --- a/examples/custom/src/CustomEditor.js +++ b/examples/custom/src/CustomEditor.js @@ -47,19 +47,28 @@ export default class CustomEditor extends Component { label="Dropdown" attr="xaxis.title" show - options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]} + options={[ + {label: 'Yes', value: 'yes'}, + {label: 'No', value: 'no'}, + ]} /> diff --git a/examples/demo/package.json b/examples/demo/package.json index e0dde495d..350a75dcc 100644 --- a/examples/demo/package.json +++ b/examples/demo/package.json @@ -1,17 +1,17 @@ { "name": "demo", - "version": "0.1.0", + "version": "0.2.0", "private": true, "dependencies": { - "plotly.js": "^1.49.5", - "react": "^16.2.0", - "react-dom": "^16.2.0", + "plotly.js": "2.16.4", + "react": "16.14.0", "react-chart-editor": "latest", - "react-scripts": "1.0.17" + "react-dom": "16.14.0", + "react-scripts": "5.0.1" }, "scripts": { "start": "react-scripts start", - "build": "react-scripts build", + "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "predeploy": "npm run build", @@ -19,6 +19,6 @@ }, "homepage": "http://plotly.github.io/react-chart-editor", "devDependencies": { - "gh-pages": "^1.1.0" + "gh-pages": "^5.0.0" } } diff --git a/examples/demo/src/App.js b/examples/demo/src/App.js index fd479239f..2c230c147 100644 --- a/examples/demo/src/App.js +++ b/examples/demo/src/App.js @@ -5,7 +5,7 @@ import 'react-chart-editor/lib/react-chart-editor.css'; import Nav from './Nav'; import dataSources from './dataSources'; -const dataSourceOptions = Object.keys(dataSources).map(name => ({ +const dataSourceOptions = Object.keys(dataSources).map((name) => ({ value: name, label: name, })); @@ -29,8 +29,8 @@ class App extends Component { UNSAFE_componentWillMount() { fetch('https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks') - .then(response => response.json()) - .then(mocks => this.setState({mocks})); + .then((response) => response.json()) + .then((mocks) => this.setState({mocks})); } loadMock(mockIndex) { @@ -38,8 +38,8 @@ class App extends Component { fetch(mock.url, { headers: new Headers({Accept: 'application/vnd.github.v3.raw'}), }) - .then(response => response.json()) - .then(figure => { + .then((response) => response.json()) + .then((figure) => { this.setState({ currentMockIndex: mockIndex, data: figure.data, diff --git a/examples/demo/src/Nav.js b/examples/demo/src/Nav.js index b13fd7b3e..2440c7fea 100644 --- a/examples/demo/src/Nav.js +++ b/examples/demo/src/Nav.js @@ -20,7 +20,7 @@ const Nav = ({mocks, currentMockIndex, loadMock}) => ( value: i, }))} value={currentMockIndex} - onChange={option => loadMock(option)} + onChange={(option) => loadMock(option)} /> diff --git a/examples/redux/src/App.js b/examples/redux/src/App.js index 63ba2b2cf..d55e1c02a 100644 --- a/examples/redux/src/App.js +++ b/examples/redux/src/App.js @@ -12,7 +12,7 @@ const dataSources = { col2: [4, 3, 2], // eslint-disable-line no-magic-numbers col3: [17, 13, 9], // eslint-disable-line no-magic-numbers }; -const dataSourceOptions = Object.keys(dataSources).map(name => ({ +const dataSourceOptions = Object.keys(dataSources).map((name) => ({ value: name, label: name, })); @@ -29,14 +29,7 @@ class App extends Component { } render() { - const { - actions, - dataSources, - dataSourceOptions, - data, - layout, - frames, - } = this.props; + const {actions, dataSources, dataSourceOptions, data, layout, frames} = this.props; return (
@@ -67,7 +60,7 @@ App.propTypes = { frames: PropTypes.array, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ dataSourceOptions: state.dataSourceOptions, dataSources: state.dataSources, data: state.data, @@ -75,7 +68,7 @@ const mapStateToProps = state => ({ frames: state.frames, }); -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators(actions, dispatch), }); diff --git a/examples/simple/src/App.js b/examples/simple/src/App.js index 37403e84e..8115967d1 100644 --- a/examples/simple/src/App.js +++ b/examples/simple/src/App.js @@ -9,7 +9,7 @@ const dataSources = { col3: [17, 13, 9], // eslint-disable-line no-magic-numbers }; -const dataSourceOptions = Object.keys(dataSources).map(name => ({ +const dataSourceOptions = Object.keys(dataSources).map((name) => ({ value: name, label: name, })); @@ -33,9 +33,7 @@ class App extends Component { dataSources={dataSources} dataSourceOptions={dataSourceOptions} plotly={plotly} - onUpdate={(data, layout, frames) => - this.setState({data, layout, frames}) - } + onUpdate={(data, layout, frames) => this.setState({data, layout, frames})} useResizeHandler debug advancedTraceTypeSelector diff --git a/package.json b/package.json index 231cfcf18..9585b9849 100644 --- a/package.json +++ b/package.json @@ -1,112 +1,121 @@ { "name": "react-chart-editor", "description": "plotly.js chart editor react component UI", - "version": "0.45.0", + "version": "0.46.0", "author": "Plotly, Inc.", "bugs": { "url": "https://github.com/plotly/react-chart-editor/issues" }, "scripts": { - "lint": "prettier --write \"src/**/*.js\"", - "make:arrows": "node scripts/makeArrows.js", - "make:combined-translation-keys": "npm run make:translation-keys && node scripts/combineTranslationKeys.js", - "make:lib:css": "mkdirp lib && babel-node scripts/styles.js && SASS_ENV=ie babel-node scripts/styles.js && babel-node scripts/postcss.js && SASS_ENV=ie babel-node scripts/postcss.js", - "make:lib:js": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps", - "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", - "start": "webpack-dev-server --hot", - "storybook": "start-storybook -p 9001 -c .storybook", + "prettier": "prettier --write \"src/**/*.{js,scss}\" \"dev/**/*.{js,scss}\" \"examples/**/*.{js,scss}\"", + "build:arrows": "node scripts/makeArrows.js", + "build:translation-keys": "node scripts/findTranslationKeys.js", + "build:combined-translation-keys": "npm run build:translation-keys && node scripts/combineTranslationKeys.js", + "build:css": "mkdirp lib && sass src/styles/main.scss:lib/react-chart-editor.css && postcss lib/react-chart-editor.css -o lib/react-chart-editor.min.css ", + "build:js": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps", + "build": "BABEL_ENV=production rimraf lib && mkdir lib && npm run build:js && npm run build:css && npm run build:combined-translation-keys", + "watch": "webpack serve --hot --mode development", + "prepublishOnly": "npm run build", + "storybook": "storybook dev -p 9001 -c .storybook", "test": "npm run test:lint && npm run test:pretty && npm run test:js", "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill --maxWorkers=2", - "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": "node --max-old-space-size=4096 $(npm bin)/build-storybook && percy-storybook --widths=500", - "test:percy-local": "node --max-old-space-size=4096 $(npm bin)/build-storybook", - "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" + "test:lint": "eslint \"src/**/*.js\" \"dev/**/*.js\" \"examples/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'", + "test:pretty": "prettier -l \"src/**/*.{js,scss}\" \"dev/**/*.{js,scss}\" \"examples/**/*.{js,scss}\" && echo -e '\\033[0;32m'PASS'\\033[0m'", + "test:percy": "storybook build && percy storybook ./storybook-static", + "test:percy-local": "storybook build", + "test:watch": "jest --watch" }, "dependencies": { - "@plotly/draft-js-export-html": "1.2.0", - "classnames": "2.3.1", - "draft-js": "0.11.7", - "draft-js-import-html": "1.4.1", - "draft-js-utils": "1.4.0", - "fast-isnumeric": "1.1.4", - "immutability-helper": "3.1.1", - "plotly-icons": "1.3.15", - "plotly.js": "1.58.x", - "prop-types": "15.7.2", - "raf": "3.4.1", - "react-color": "2.19.3", - "react-colorscales": "0.7.3", - "react-day-picker": "7.4.10", - "react-dropzone": "10.2.2", - "react-plotly.js": "2.5.1", - "react-rangeslider": "2.2.0", - "react-resizable-rotatable-draggable": "0.2.0", - "react-select": "2.4.4", - "react-tabs": "3.2.2", - "styled-components": "5.2.3", - "tinycolor2": "1.4.2" + "@plotly/draft-js-export-html": "^1.2.0", + "classnames": "^2.3.2", + "draft-js": "^0.11.7", + "draft-js-import-html": "^1.4.1", + "draft-js-utils": "^1.4.1", + "fast-isnumeric": "^1.1.4", + "immutability-helper": "^3.1.1", + "plotly-icons": "^1.3.15", + "prop-types": "^15.8.1", + "raf": "^3.4.1", + "react-color": "^2.19.3", + "react-colorscales": "^0.7.3", + "react-day-picker": "^7.4.10", + "react-dropzone": "^14.2.3", + "react-plotly.js": "^2.6.0", + "react-rangeslider": "^2.2.0", + "react-resizable-rotatable-draggable": "^0.2.0", + "react-select": "^5.7.4", + "react-tabs": "^4.2.1", + "styled-components": "^5.3.6", + "tinycolor2": "^1.6.0" }, "devDependencies": { - "@babel/cli": "7.13.16", - "@babel/core": "7.14.0", - "@babel/node": "7.13.13", - "@babel/plugin-proposal-object-rest-spread": "7.13.8", - "@babel/polyfill": "7.12.1", - "@babel/preset-env": "7.14.0", - "@babel/preset-react": "7.13.13", - "@babel/traverse": "7.14.0", + "@babel/cli": "7.22.15", + "@babel/core": "7.22.15", + "@babel/eslint-parser": "7.22.15", + "@babel/node": "7.22.15", + "@babel/plugin-proposal-object-rest-spread": "7.20.7", + "@babel/preset-env": "7.22.15", + "@babel/preset-react": "7.22.15", + "@babel/traverse": "7.22.15", "@hot-loader/react-dom": "16.14.0", - "@percy/storybook": "3.3.1", - "@storybook/react": "6.2.9", - "autoprefixer": "10.2.5", - "babel-eslint": "10.1.0", + "@percy/cli": "1.26.3", + "@percy/storybook": "4.3.6", + "@storybook/blocks": "7.4.1", + "@storybook/react": "7.4.1", + "@storybook/react-webpack5": "7.4.1", + "@storybook/source-loader": "^7.4.1", + "autoprefixer": "10.4.15", "babel-jest": "26.6.3", - "babel-loader": "8.2.2", - "babel-plugin-module-resolver": "4.1.0", - "css-loader": "5.2.4", - "cssnano": "4.1.11", + "babel-loader": "9.1.3", + "babel-plugin-module-resolver": "5.0.0", + "css-loader": "6.8.1", + "cssnano": "6.0.1", "enzyme": "3.11.0", - "enzyme-adapter-react-16": "1.15.6", - "eslint": "7.25.0", - "eslint-config-prettier": "8.3.0", - "eslint-plugin-import": "2.22.1", - "eslint-plugin-react": "7.23.2", + "enzyme-adapter-react-16": "1.15.7", + "eslint": "8.48.0", + "eslint-config-prettier": "8.6.0", + "eslint-plugin-import": "2.28.1", + "eslint-plugin-jsx": "0.1.0", + "eslint-plugin-react": "7.33.2", "eslint-plugin-react-percy": "0.2.4", "fs": "0.0.2", - "glob": "7.1.6", + "glob": "8.1.0", "jest": "26.6.3", "jest-cli": "26.6.3", - "mkdirp": "1.0.4", - "node-sass": "4.14.1", - "postcss": "8.2.13", - "postcss-combine-duplicated-selectors": "10.0.2", - "postcss-custom-properties": "8.0.11", - "postcss-remove-root": "0.0.2", - "prettier": "2.2.1", + "mkdirp": "3.0.1", + "plotly.js": "2.26.0", + "postcss": "8.4.29", + "postcss-cli": "10.1.0", + "postcss-combine-duplicated-selectors": "10.0.3", + "postcss-import": "15.1.0", + "postcss-preset-env": "9.1.3", + "prettier": "2.8.4", "react": "16.14.0", "react-ace": "7.0.5", "react-dom": "16.14.0", - "react-hot-loader": "4.13.0", - "react-inspector": "4.0.1", + "react-hot-loader": "4.13.1", + "react-inspector": "5.1.1", "react-test-renderer": "16.14.0", "request": "2.88.2", - "rimraf": "3.0.2", - "sass-loader": "7.1.0", - "style-loader": "2.0.0", - "webpack": "4.46.0", - "webpack-cli": "3.3.12", - "webpack-dev-server": "3.11.2" + "rimraf": "5.0.1", + "sass": "1.66.1", + "sass-loader": "13.3.2", + "storybook": "7.4.1", + "style-loader": "3.3.3", + "webpack": "5.88.2", + "webpack-cli": "5.1.4", + "webpack-dev-server": "4.15.1" }, "peerDependencies": { - "react": ">15", - "react-dom": ">15" + "plotly.js": ">=1.58.5 <3.0.0", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "resolutions": { + "jackspeak": "2.1.1" }, "engines": { - "node": ">=10.0.0" + "node": ">=12.13.0" }, "homepage": "https://plotly.github.io/react-chart-editor/", "jest": { @@ -135,6 +144,14 @@ "url": "https://github.com/plotly/react-chart-editor.git" }, "browserslist": [ - "ie 11" - ] + "last 8 years and not dead" + ], + "volta": { + "node": "20.6.0", + "yarn": "1.22.19" + }, + "directories": { + "example": "examples", + "lib": "lib" + } } diff --git a/percy.config.js b/percy.config.js deleted file mode 100644 index b6d9d9ea0..000000000 --- a/percy.config.js +++ /dev/null @@ -1,16 +0,0 @@ -export default { - webpack: { - module: { - rules: [ - { - test: /\.(css|scss)?$/, - use: ['style-loader', 'css-loader', 'sass-loader'], - }, - { - test: /\.json$/, - loader: 'json-loader', - }, - ], - }, - }, -}; diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..c3aab83fe --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,14 @@ +module.exports = { + plugins: [ + require('postcss-import'), + require('postcss-preset-env')({ + features: {'nesting-rules': false}, + }), + require('postcss-combine-duplicated-selectors'), + require('autoprefixer'), + require('cssnano')({ + preset: 'default', + }), + // ...(process.env.NODE_ENV === 'production' ? {cssnano: {preset: 'default'}} : {}), + ], +}; diff --git a/renovate.json b/renovate.json index 84d7599e0..4777b3ffd 100644 --- a/renovate.json +++ b/renovate.json @@ -1,33 +1,24 @@ { - "extends": [ - "config:base" - ], + "extends": ["config:base"], "packageRules": [ { "updateTypes": "minor", - "depTypeList": [ - "dependencies" - ], + "depTypeList": ["dependencies"], "groupName": "minor deps", - "schedule": [ - "before 2am on monday" - ] + "schedule": ["before 2am on monday"], + "enabled": false }, { "updateTypes": "minor", - "depTypeList": [ - "devDependencies" - ], + "depTypeList": ["devDependencies"], "groupName": "minor devDeps", - "schedule": [ - "before 2am on monday" - ] + "schedule": ["before 2am on monday"], + "enabled": false }, { - "packageNames": [ - "plotly.js" - ], - "groupName": "plotly.js" + "packageNames": ["plotly.js"], + "groupName": "plotly.js", + "enabled": false }, { "packagePatterns": ["^sass-loader"], diff --git a/scripts/postcss.js b/scripts/postcss.js deleted file mode 100644 index c0b5ca595..000000000 --- a/scripts/postcss.js +++ /dev/null @@ -1,85 +0,0 @@ -const fs = require('fs'); -const postcss = require('postcss'); -const customProperties = require('postcss-custom-properties'); -const autoprefixer = require('autoprefixer'); -const cssnano = require('cssnano'); -const combineSelectors = require('postcss-combine-duplicated-selectors'); -const removeRoot = require('postcss-remove-root'); - -/* eslint-disable no-process-env */ -const SASS_ENV = process.env.SASS_ENV || 'default'; -const BUILD_ENV = process.env.BUILD_ENV || 'lib'; - -const fileName = `react-chart-editor`; -const dist = `${BUILD_ENV}/${fileName}.css`; - -const internetExplorerPostCSS = () => { - /** - * IE11 specific post-processing - * This will: - * - combine duplicate selectors into one, - * - convert all css variables into their true value - * - remove unneeded `:root{}` after converting vars into their value - * - autoprefix for IE11 - * - minify the css with cssnano - */ - const ie11_plugins = [ - combineSelectors, - customProperties({preserve: false}), - removeRoot, - autoprefixer({grid: true}), - cssnano, - ]; - fs.readFile(`${BUILD_ENV}/${fileName}.ie.css`, (err, css) => { - postcss([...ie11_plugins]) - .process(css, { - from: dist, - to: `${BUILD_ENV}/${fileName}.ie.min.css`, - }) - .then(result => { - fs.writeFile(`${BUILD_ENV}/${fileName}.ie.min.css`, result.css, error => { - if (error) { - /* eslint-disable no-console */ - console.log(error); - } - }); - }); - }); -}; - -const defaultPostCSS = () => { - /** - * Default post-processing - * This will: - * - combine duplicate selectors into one, - * - convert all css variables into their true value - * - remove unneeded `:root{}` after converting vars into their value - * - autoprefix for IE11 - * - minify the css with cssnano - */ - const default_plugins = [combineSelectors, autoprefixer, cssnano]; - fs.readFile(`${BUILD_ENV}/${fileName}.css`, (err, css) => { - postcss([...default_plugins]) - .process(css, { - from: `${BUILD_ENV}/${fileName}.css`, - to: `${BUILD_ENV}/${fileName}.min.css`, - }) - .then(result => { - fs.writeFile(`${BUILD_ENV}/${fileName}.min.css`, result.css, error => { - if (error) { - /* eslint-disable no-console */ - console.log(error); - } - }); - }); - }); -}; - -/** - * Run our PostCSS scripts based off of SASS_ENV passed through - */ -if (SASS_ENV === 'ie') { - internetExplorerPostCSS(); -} else { - defaultPostCSS(); -} diff --git a/scripts/styles.js b/scripts/styles.js deleted file mode 100644 index aeae2f1b7..000000000 --- a/scripts/styles.js +++ /dev/null @@ -1,46 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const sass = require('node-sass'); - -/* eslint-disable no-process-env */ -const SASS_ENV = process.env.SASS_ENV || 'default'; -const BUILD_ENV = process.env.BUILD_ENV || 'lib'; - -const src = 'src/styles/main.scss'; -const fileName = `react-chart-editor`; -const dist = - SASS_ENV === 'ie' - ? `${BUILD_ENV}/${fileName}.ie.css` - : `${BUILD_ENV}/${fileName}.css`; - -/** - * Compile our scss to css! - * -- - * the `data:...` line will inject our SASS_ENV value into our scss, - * so we are able to do conditionals in scss for our env (default|ie) - */ -fs.readFile(src, function(err, data) { - sass.render( - { - data: '$ENV: "' + SASS_ENV + '";\n' + data, - includePaths: [path.dirname(src)], - outFile: dist, - }, - (error, result) => { - if (error) { - /* eslint-disable no-console */ - console.log(error.status); - console.log(error.column); - console.log(error.message); - console.log(error.line); - } else { - fs.writeFile(dist, result.css, error => { - if (error) { - /* eslint-disable no-console */ - console.log(error); - } - }); - } - } - ); -}); diff --git a/scripts/translationKeys/combined-translation-keys.txt b/scripts/translationKeys/combined-translation-keys.txt index e710cccc9..0642f3ec0 100644 --- a/scripts/translationKeys/combined-translation-keys.txt +++ b/scripts/translationKeys/combined-translation-keys.txt @@ -66,7 +66,7 @@ Atlas Map August // react-chart-editor: /components/widgets/DateTimePicker.js:82 Auto // react-chart-editor: /components/fields/MarkerColor.js:202 Auto margins // react-chart-editor: /default_panels/StyleAxesPanel.js:184 -Autoscale // plotly.js: components/modebar/buttons.js:209 +Autoscale // plotly.js: components/modebar/buttons.js:208 Average // react-chart-editor: /default_panels/GraphTransformsPanel.js:40 && react-chart-editor: /components/fields/derived.js:144 Axes // react-chart-editor: /DefaultEditor.js:93 Axes to Use // react-chart-editor: /components/fields/AxesCreator.js:158 @@ -118,11 +118,11 @@ Box Line Width Box Mean // react-chart-editor: /default_panels/StyleTracesPanel.js:834 Box Mode // react-chart-editor: /default_panels/StyleTracesPanel.js:344 Box Padding // react-chart-editor: /default_panels/StyleTracesPanel.js:352 -Box Select // plotly.js: components/modebar/buttons.js:121 +Box Select // plotly.js: components/modebar/buttons.js:116 Box Size and Spacing // react-chart-editor: /default_panels/StyleTracesPanel.js:341 Box Width // react-chart-editor: /default_panels/StyleTracesPanel.js:351 -Boxes // react-chart-editor: /components/fields/derived.js:749 -Boxes and Points // react-chart-editor: /components/fields/derived.js:751 +Boxes // react-chart-editor: /components/fields/derived.js:750 +Boxes and Points // react-chart-editor: /components/fields/derived.js:752 Button // react-chart-editor: /components/containers/RangeSelectorAccordion.js:44 Button Labels // react-chart-editor: /default_panels/StyleUpdateMenusPanel.js:24 Buttons // react-chart-editor: /components/containers/UpdateMenuAccordion.js:22 @@ -135,8 +135,8 @@ Canvas Carpet // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:107 Carpet Contour // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:115 Carpet Scatter // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:111 -Carto Dark Matter // react-chart-editor: /components/fields/derived.js:729 -Carto Positron // react-chart-editor: /components/fields/derived.js:728 +Carto Dark Matter // react-chart-editor: /components/fields/derived.js:730 +Carto Positron // react-chart-editor: /components/fields/derived.js:729 Categorical // react-chart-editor: /default_panels/StyleAxesPanel.js:51 Cell Options // react-chart-editor: /default_panels/GraphCreatePanel.js:182 Cells // react-chart-editor: /default_panels/StyleTracesPanel.js:232 @@ -146,6 +146,7 @@ Center Longitude Center of Mass // react-chart-editor: /default_panels/StyleTracesPanel.js:93 Change // react-chart-editor: /default_panels/GraphTransformsPanel.js:49 Charts like this by Plotly users. // react-chart-editor: /components/widgets/TraceTypeSelector.js:106 +Choose data... // react-chart-editor: /components/fields/DataSelector.js:133 Choropleth // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:79 Choropleth Atlas Map // react-chart-editor: /lib/traceTypes.js:165 Choropleth Tile Map // react-chart-editor: /lib/traceTypes.js:160 @@ -156,19 +157,19 @@ Click on the + button above to add a trace. Click on the + button above to add a transform. // react-chart-editor: /components/containers/TransformAccordion.js:129 Click on the + button above to add an annotation. // react-chart-editor: /components/containers/AnnotationAccordion.js:63 Click on the + button above to add an image. // react-chart-editor: /components/containers/ImageAccordion.js:61 -Click to enter Colorscale title // plotly.js: plots/plots.js:335 -Click to enter Component A title // plotly.js: plots/ternary/ternary.js:381 -Click to enter Component B title // plotly.js: plots/ternary/ternary.js:391 -Click to enter Component C title // plotly.js: plots/ternary/ternary.js:401 -Click to enter Plot title // plotly.js: plot_api/plot_api.js:604 -Click to enter X axis title // plotly.js: plots/plots.js:333 -Click to enter Y axis title // plotly.js: plots/plots.js:334 -Click to enter radial axis title // plotly.js: plots/polar/polar.js:496 +Click to enter Colorscale title // plotly.js: plots/plots.js:323 +Click to enter Component A title // plotly.js: plots/ternary/ternary.js:372 +Click to enter Component B title // plotly.js: plots/ternary/ternary.js:382 +Click to enter Component C title // plotly.js: plots/ternary/ternary.js:392 +Click to enter Plot title // plotly.js: plots/plots.js:320 +Click to enter X axis title // plotly.js: plots/plots.js:321 +Click to enter Y axis title // plotly.js: plots/plots.js:322 +Click to enter radial axis title // plotly.js: plots/polar/polar.js:575 Clip To // react-chart-editor: /components/fields/HoverLabelNameLength.js:54 Clip on Axes // react-chart-editor: /default_panels/StyleTracesPanel.js:706 Clockwise // react-chart-editor: /components/fields/derived.js:113 Close // react-chart-editor: /default_panels/GraphCreatePanel.js:145 -Closest // react-chart-editor: /components/fields/derived.js:781 +Closest // react-chart-editor: /components/fields/derived.js:782 Coastlines // react-chart-editor: /default_panels/StyleMapsPanel.js:143 Collapse All // react-chart-editor: /components/containers/PanelHeader.js:35 Color // react-chart-editor: /components/fields/ErrorBars.js:108 @@ -184,7 +185,7 @@ Colorscales Column Options // react-chart-editor: /default_panels/GraphCreatePanel.js:188 Columns // react-chart-editor: /default_panels/GraphCreatePanel.js:156 Common Case: An 'All' tab might display this message because the X and Y tabs contain different settings. // react-chart-editor: /lib/constants.js:24 -Compare data on hover // plotly.js: components/modebar/buttons.js:237 +Compare data on hover // plotly.js: components/modebar/buttons.js:239 Cone // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:67 Cone Anchor // react-chart-editor: /default_panels/StyleTracesPanel.js:88 Cones & Streamtubes // react-chart-editor: /default_panels/StyleTracesPanel.js:77 @@ -225,6 +226,7 @@ Current Bin Custom // react-chart-editor: /components/fields/MarkerColor.js:203 Custom Data // react-chart-editor: /components/fields/ErrorBars.js:129 Data // react-chart-editor: /components/fields/ErrorBars.js:124 +Data inlined in figure // react-chart-editor: /components/fields/DataSelector.js:133 Date // react-chart-editor: /default_panels/StyleAxesPanel.js:50 Day // react-chart-editor: /default_panels/StyleAxesPanel.js:408 Days // react-chart-editor: /components/fields/AxisInterval.js:164 @@ -241,30 +243,30 @@ Diagonal Diameter // react-chart-editor: /default_panels/StyleTracesPanel.js:431 Diffuse // react-chart-editor: /default_panels/StyleTracesPanel.js:791 Direction // react-chart-editor: /default_panels/StyleAxesPanel.js:77 -Disable // react-chart-editor: /components/fields/derived.js:784 +Disable // react-chart-editor: /components/fields/derived.js:785 Disabled // react-chart-editor: /default_panels/GraphTransformsPanel.js:75 Display // react-chart-editor: /default_panels/StyleTracesPanel.js:250 Distributions // react-chart-editor: /lib/traceTypes.js:18 Divergence // react-chart-editor: /components/fields/derived.js:633 Diverging // react-chart-editor: /default_panels/StyleLayoutPanel.js:42 -Double-click on legend to isolate one trace // plotly.js: components/legend/handle_click.js:27 -Double-click to zoom back out // plotly.js: plots/cartesian/dragbox.js:1172 -Download plot // plotly.js: components/modebar/buttons.js:53 -Download plot as a png // plotly.js: components/modebar/buttons.js:52 +Double-click on legend to isolate one trace // plotly.js: components/legend/handle_click.js:21 +Double-click to zoom back out // plotly.js: plots/cartesian/dragbox.js:1215 +Download plot // plotly.js: components/modebar/buttons.js:45 +Download plot as a png // plotly.js: components/modebar/buttons.js:44 Drag // react-chart-editor: /default_panels/StyleLayoutPanel.js:126 -Draw circle // plotly.js: components/modebar/buttons.js:175 -Draw closed freeform // plotly.js: components/modebar/buttons.js:139 -Draw line // plotly.js: components/modebar/buttons.js:157 -Draw open freeform // plotly.js: components/modebar/buttons.js:148 -Draw rectangle // plotly.js: components/modebar/buttons.js:166 -Drop the // react-chart-editor: /components/widgets/Dropzone.js:55 +Draw circle // plotly.js: components/modebar/buttons.js:171 +Draw closed freeform // plotly.js: components/modebar/buttons.js:135 +Draw line // plotly.js: components/modebar/buttons.js:153 +Draw open freeform // plotly.js: components/modebar/buttons.js:144 +Draw rectangle // plotly.js: components/modebar/buttons.js:162 +Drop the // react-chart-editor: /components/widgets/Dropzone.js:64 Dropdown // react-chart-editor: /components/containers/UpdateMenuAccordion.js:21 E+6 // react-chart-editor: /default_panels/StyleAxesPanel.js:236 Each point in a trace is colored according to data. // react-chart-editor: /components/fields/MarkerColor.js:169 Each trace will be colored according to the selected colorscale. // react-chart-editor: /components/fields/ColorArrayPicker.js:102 Each will be colored according to the selected colors. // react-chart-editor: /components/fields/MultiColorPicker.js:86 Eckert 4 // react-chart-editor: /default_panels/StyleMapsPanel.js:79 -Edit in Chart Studio // plotly.js: components/modebar/buttons.js:85 +Edit in Chart Studio // plotly.js: components/modebar/buttons.js:77 Edit in HTML // react-chart-editor: /components/widgets/text_editors/MultiFormat.js:29 Edit in Rich Text // react-chart-editor: /components/widgets/text_editors/MultiFormat.js:224 Ellipse // react-chart-editor: /default_panels/StyleShapesPanel.js:29 @@ -276,7 +278,7 @@ Enter LaTeX formatted text Enter Link URL // react-chart-editor: /components/widgets/text_editors/RichText/LinkEditor.js:89 Enter html formatted text // react-chart-editor: /components/fields/TextEditor.js:93 Equirectangular // react-chart-editor: /default_panels/StyleMapsPanel.js:70 -Erase active shape // plotly.js: components/modebar/buttons.js:184 +Erase active shape // plotly.js: components/modebar/buttons.js:180 Error (+) // react-chart-editor: /components/fields/ErrorBars.js:152 Error (-) // react-chart-editor: /components/fields/ErrorBars.js:153 Error Bars X // react-chart-editor: /default_panels/StyleTracesPanel.js:957 @@ -296,12 +298,12 @@ Face Normal Facecolor // react-chart-editor: /default_panels/GraphCreatePanel.js:195 False // react-chart-editor: /default_panels/StyleAxesPanel.js:188 February // react-chart-editor: /components/widgets/DateTimePicker.js:76 -File loaded! // react-chart-editor: /components/widgets/Dropzone.js:40 +File loaded! // react-chart-editor: /components/widgets/Dropzone.js:49 Fill // react-chart-editor: /default_panels/StyleImagesPanel.js:30 Fill Color // react-chart-editor: /default_panels/GraphCreatePanel.js:177 Fill to // react-chart-editor: /default_panels/StyleTracesPanel.js:632 Filled Area // react-chart-editor: /default_panels/StyleTracesPanel.js:631 -Fills // react-chart-editor: /components/fields/derived.js:764 +Fills // react-chart-editor: /components/fields/derived.js:765 Filter // react-chart-editor: /components/containers/TransformAccordion.js:21 Finance // react-chart-editor: /lib/traceTypes.js:13 First // react-chart-editor: /default_panels/GraphTransformsPanel.js:47 @@ -330,7 +332,7 @@ General GeoJSON // react-chart-editor: /default_panels/StyleMapsPanel.js:44 GeoJSON Location Field // react-chart-editor: /default_panels/GraphCreatePanel.js:79 GeoJSON feature // react-chart-editor: /components/fields/LocationSelector.js:31 -GeoJSON loaded! // react-chart-editor: /components/widgets/Dropzone.js:34 +GeoJSON loaded! // react-chart-editor: /components/widgets/Dropzone.js:43 Gnomonic // react-chart-editor: /default_panels/StyleMapsPanel.js:88 Go back // react-chart-editor: /components/widgets/text_editors/MultiFormat.js:185 Go to the // react-chart-editor: /components/containers/TraceRequiredPanel.js:24 @@ -371,7 +373,7 @@ Hover on Gaps Hover/Tooltip // react-chart-editor: /default_panels/StyleTracesPanel.js:908 I (Optional) // react-chart-editor: /default_panels/GraphCreatePanel.js:139 IDs // react-chart-editor: /default_panels/GraphCreatePanel.js:42 -IE only supports svg. Changing format to svg. // plotly.js: components/modebar/buttons.js:63 +IE only supports svg. Changing format to svg. // plotly.js: components/modebar/buttons.js:55 Icon Color // react-chart-editor: /default_panels/StyleLayoutPanel.js:101 Image // react-chart-editor: /components/containers/ImageAccordion.js:21 Images // react-chart-editor: /DefaultEditor.js:99 @@ -397,7 +399,7 @@ Jitter July // react-chart-editor: /components/widgets/DateTimePicker.js:81 June // react-chart-editor: /components/widgets/DateTimePicker.js:80 K (Optional) // react-chart-editor: /default_panels/GraphCreatePanel.js:141 -KDE // react-chart-editor: /components/fields/derived.js:757 +KDE // react-chart-editor: /components/fields/derived.js:758 Kavrayskiy 7 // react-chart-editor: /default_panels/StyleMapsPanel.js:78 LaTeX // react-chart-editor: /components/widgets/text_editors/MultiFormat.js:24 LaTeX is a math typesetting language that doesn't work with rich text. // react-chart-editor: /components/widgets/text_editors/MultiFormat.js:105 @@ -409,7 +411,7 @@ Labels Lakes // react-chart-editor: /default_panels/StyleMapsPanel.js:174 Land // react-chart-editor: /default_panels/StyleMapsPanel.js:164 Lasso // react-chart-editor: /default_panels/StyleLayoutPanel.js:134 -Lasso Select // plotly.js: components/modebar/buttons.js:130 +Lasso Select // plotly.js: components/modebar/buttons.js:126 Last // react-chart-editor: /default_panels/GraphTransformsPanel.js:48 Last label // react-chart-editor: /default_panels/StyleAxesPanel.js:275 Lat/Lon // react-chart-editor: /components/fields/LocationSelector.js:101 @@ -436,7 +438,7 @@ Linear Lines // react-chart-editor: /default_panels/StyleAxesPanel.js:87 Lines, Rectangles and Ellipses. // react-chart-editor: /components/containers/ShapeAccordion.js:55 Links // react-chart-editor: /default_panels/GraphCreatePanel.js:98 -Loading... // react-chart-editor: /components/widgets/Dropzone.js:118 +Loading... // react-chart-editor: /components/widgets/Dropzone.js:131 Location // react-chart-editor: /components/fields/derived.js:586 Location Format // react-chart-editor: /components/fields/LocationSelector.js:27 Locations // react-chart-editor: /components/fields/LocationSelector.js:25 @@ -455,12 +457,12 @@ Map Map Frame // react-chart-editor: /default_panels/StyleMapsPanel.js:196 Map Positioning // react-chart-editor: /default_panels/StyleMapsPanel.js:32 Map Projection // react-chart-editor: /default_panels/StyleMapsPanel.js:50 -Mapbox Basic // react-chart-editor: /components/fields/derived.js:718 -Mapbox Dark // react-chart-editor: /components/fields/derived.js:721 -Mapbox Light // react-chart-editor: /components/fields/derived.js:720 -Mapbox Outdoors // react-chart-editor: /components/fields/derived.js:719 -Mapbox Satellite // react-chart-editor: /components/fields/derived.js:722 -Mapbox Satellite with Streets // react-chart-editor: /components/fields/derived.js:723 +Mapbox Basic // react-chart-editor: /components/fields/derived.js:719 +Mapbox Dark // react-chart-editor: /components/fields/derived.js:722 +Mapbox Light // react-chart-editor: /components/fields/derived.js:721 +Mapbox Outdoors // react-chart-editor: /components/fields/derived.js:720 +Mapbox Satellite // react-chart-editor: /components/fields/derived.js:723 +Mapbox Satellite with Streets // react-chart-editor: /components/fields/derived.js:724 Maps // react-chart-editor: /DefaultEditor.js:94 March // react-chart-editor: /components/widgets/DateTimePicker.js:77 Margin Color // react-chart-editor: /default_panels/StyleLayoutPanel.js:27 @@ -518,7 +520,7 @@ Negative Sequential No // react-chart-editor: /components/fields/ErrorBars.js:97 No Clip // react-chart-editor: /components/fields/HoverLabelNameLength.js:55 No Results // react-chart-editor: /components/widgets/Dropdown.js:67 -No tiles (white background) // react-chart-editor: /components/fields/derived.js:726 +No tiles (white background) // react-chart-editor: /components/fields/derived.js:727 Nodes // react-chart-editor: /default_panels/GraphCreatePanel.js:92 None // react-chart-editor: /components/fields/derived.js:64 None label // react-chart-editor: /default_panels/StyleColorbarsPanel.js:185 @@ -543,11 +545,11 @@ Offset On // react-chart-editor: /components/fields/RectanglePositioner.js:88 Opacity // react-chart-editor: /default_panels/StyleShapesPanel.js:51 Open // react-chart-editor: /default_panels/GraphCreatePanel.js:142 -Open Street Map // react-chart-editor: /components/fields/derived.js:727 +Open Street Map // react-chart-editor: /components/fields/derived.js:728 Operator // react-chart-editor: /default_panels/GraphTransformsPanel.js:82 Options // react-chart-editor: /default_panels/GraphCreatePanel.js:193 Orbit // react-chart-editor: /default_panels/StyleLayoutPanel.js:135 -Orbital rotation // plotly.js: components/modebar/buttons.js:338 +Orbital rotation // plotly.js: components/modebar/buttons.js:346 Order // react-chart-editor: /default_panels/GraphCreatePanel.js:190 Orientation // react-chart-editor: /default_panels/GraphCreatePanel.js:105 Orthographic // react-chart-editor: /default_panels/GraphSubplotsPanel.js:64 @@ -556,7 +558,7 @@ Outside Overlaid // react-chart-editor: /default_panels/StyleTracesPanel.js:281 Overlay // react-chart-editor: /default_panels/GraphSubplotsPanel.js:79 Padding // react-chart-editor: /default_panels/StyleColorbarsPanel.js:116 -Pan // plotly.js: components/modebar/buttons.js:112 && react-chart-editor: /default_panels/StyleLayoutPanel.js:133 +Pan // plotly.js: components/modebar/buttons.js:106 && react-chart-editor: /default_panels/StyleLayoutPanel.js:133 Parallel Categories // react-chart-editor: /lib/traceTypes.js:258 Parallel Coordinates // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:95 Parent Value Mode // react-chart-editor: /default_panels/GraphCreatePanel.js:45 @@ -572,7 +574,7 @@ Plot Background Point Cloud // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:87 Point Opacity // react-chart-editor: /default_panels/StyleTracesPanel.js:418 Points // react-chart-editor: /components/containers/TraceMarkerSection.js:23 -Points and Fills // react-chart-editor: /components/fields/derived.js:765 +Points and Fills // react-chart-editor: /components/fields/derived.js:766 Polar // react-chart-editor: /lib/constants.js:109 Polar Bar // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:135 Polar Scatter // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:127 @@ -588,7 +590,7 @@ Previous X Previous Y // react-chart-editor: /components/fields/derived.js:665 Probability // react-chart-editor: /default_panels/StyleTracesPanel.js:180 Probability Density // react-chart-editor: /default_panels/StyleTracesPanel.js:182 -Produced with Plotly // plotly.js: components/modebar/modebar.js:304 +Produced with Plotly.js // plotly.js: components/modebar/modebar.js:301 Projection // react-chart-editor: /default_panels/GraphSubplotsPanel.js:58 Pull // react-chart-editor: /default_panels/StyleTracesPanel.js:389 R // react-chart-editor: /components/fields/derived.js:617 @@ -606,12 +608,12 @@ Relative to Relative to Grid // react-chart-editor: /default_panels/StyleImagesPanel.js:36 Remainder // react-chart-editor: /default_panels/GraphCreatePanel.js:49 Rendering // react-chart-editor: /components/fields/TraceSelector.js:139 -Reset // plotly.js: components/modebar/buttons.js:505 +Reset // plotly.js: components/modebar/buttons.js:519 Reset axes // plotly.js: components/modebar/buttons.js:218 -Reset camera to default // plotly.js: components/modebar/buttons.js:376 -Reset camera to last save // plotly.js: components/modebar/buttons.js:384 -Reset view // plotly.js: components/modebar/buttons.js:586 -Reset views // plotly.js: components/modebar/buttons.js:624 +Reset camera to default // plotly.js: components/modebar/buttons.js:385 +Reset camera to last save // plotly.js: components/modebar/buttons.js:394 +Reset view // plotly.js: components/modebar/buttons.js:603 +Reset views // plotly.js: components/modebar/buttons.js:641 Resolution // react-chart-editor: /default_panels/StyleMapsPanel.js:112 Reversed // react-chart-editor: /components/fields/MarkerColor.js:187 Reversed and Grouped // react-chart-editor: /default_panels/StyleLegendPanel.js:97 @@ -621,7 +623,7 @@ Right Rivers // react-chart-editor: /default_panels/StyleMapsPanel.js:184 Robinson // react-chart-editor: /default_panels/StyleMapsPanel.js:76 Roll // react-chart-editor: /default_panels/StyleMapsPanel.js:100 -Root // react-chart-editor: /components/fields/derived.js:809 +Root // react-chart-editor: /components/fields/derived.js:810 Rotation // react-chart-editor: /default_panels/StyleTracesPanel.js:387 Roughness // react-chart-editor: /default_panels/StyleTracesPanel.js:793 SVG // react-chart-editor: /components/fields/TraceSelector.js:102 @@ -659,7 +661,7 @@ Show Exponents Show Prefix // react-chart-editor: /default_panels/StyleAxesPanel.js:270 Show Sides // react-chart-editor: /default_panels/StyleAxesPanel.js:485 Show Suffix // react-chart-editor: /default_panels/StyleAxesPanel.js:294 -Show closest data on hover // plotly.js: components/modebar/buttons.js:227 +Show closest data on hover // plotly.js: components/modebar/buttons.js:228 Show in Legend // react-chart-editor: /default_panels/StyleTracesPanel.js:66 Side // react-chart-editor: /default_panels/GraphSubplotsPanel.js:32 Simple // react-chart-editor: /components/fields/derived.js:162 @@ -675,9 +677,9 @@ Sliders Smoothing // react-chart-editor: /default_panels/StyleTracesPanel.js:621 Snap // react-chart-editor: /default_panels/StyleTracesPanel.js:878 Snap to Grid // react-chart-editor: /components/fields/RectanglePositioner.js:82 -Snapshot succeeded // plotly.js: components/modebar/buttons.js:75 +Snapshot succeeded // plotly.js: components/modebar/buttons.js:67 Soft // react-chart-editor: /default_panels/StyleTracesPanel.js:817 -Sorry, there was a problem downloading your snapshot! // plotly.js: components/modebar/buttons.js:78 +Sorry, there was a problem downloading your snapshot! // plotly.js: components/modebar/buttons.js:70 Sort // react-chart-editor: /components/containers/TransformAccordion.js:24 Sorted // react-chart-editor: /default_panels/StyleTracesPanel.js:375 Sources // react-chart-editor: /default_panels/GraphCreatePanel.js:99 @@ -693,9 +695,9 @@ Split labels Stack // react-chart-editor: /default_panels/GraphSubplotsPanel.js:78 Stacked // react-chart-editor: /default_panels/StyleTracesPanel.js:303 Stacking // react-chart-editor: /default_panels/StyleTracesPanel.js:556 -Stamen Terrain // react-chart-editor: /components/fields/derived.js:730 -Stamen Toner // react-chart-editor: /components/fields/derived.js:731 -Stamen Watercolor // react-chart-editor: /components/fields/derived.js:732 +Stamen Terrain // react-chart-editor: /components/fields/derived.js:731 +Stamen Toner // react-chart-editor: /components/fields/derived.js:732 +Stamen Watercolor // react-chart-editor: /components/fields/derived.js:733 Standard Deviation // react-chart-editor: /default_panels/GraphTransformsPanel.js:44 Start Point // react-chart-editor: /default_panels/StyleShapesPanel.js:35 Start at Level // react-chart-editor: /default_panels/StyleTracesPanel.js:60 @@ -716,14 +718,14 @@ Subplots to Use Suffix // react-chart-editor: /default_panels/StyleAxesPanel.js:280 Sum // react-chart-editor: /default_panels/GraphSubplotsPanel.js:86 && react-chart-editor: /components/fields/derived.js:143 Sunburst // react-chart-editor: /lib/traceTypes.js:190 -Supported formats are: // react-chart-editor: /components/widgets/Dropzone.js:62 +Supported formats are: // react-chart-editor: /components/widgets/Dropzone.js:71 Surface // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:59 Suspected Outliers // react-chart-editor: /default_panels/StyleTracesPanel.js:394 Symbol // react-chart-editor: /default_panels/StyleTracesPanel.js:435 Symmetric // react-chart-editor: /components/fields/ErrorBars.js:77 Table // react-chart-editor: /lib/computeTraceOptionsFromSchema.js:103 Tail // react-chart-editor: /default_panels/StyleTracesPanel.js:91 -Taking snapshot - this may take a few seconds // plotly.js: components/modebar/buttons.js:60 +Taking snapshot - this may take a few seconds // plotly.js: components/modebar/buttons.js:52 Tangential // react-chart-editor: /default_panels/StyleTracesPanel.js:675 Target // react-chart-editor: /default_panels/GraphTransformsPanel.js:81 Target < Reference // react-chart-editor: /components/fields/FilterOperation.js:11 @@ -743,6 +745,7 @@ Text Position Theta // react-chart-editor: /components/fields/derived.js:618 Theta Unit // react-chart-editor: /default_panels/GraphCreatePanel.js:162 Thickness // react-chart-editor: /components/fields/ErrorBars.js:109 +This color is computed from other parts of the figure but you can // react-chart-editor: /components/fields/ColorPicker.js:22 This input has multiple values associated with it. Changing this setting will override these custom inputs. // react-chart-editor: /lib/constants.js:20 This panel could not be displayed due to an error. // react-chart-editor: /components/containers/PlotlyPanel.js:15 This will position all text values on the plot according to the selected position. // react-chart-editor: /components/fields/TextPosition.js:29 @@ -763,8 +766,8 @@ Titles To Date // react-chart-editor: /default_panels/StyleAxesPanel.js:420 To Next // react-chart-editor: /components/fields/derived.js:677 To Self // react-chart-editor: /components/fields/derived.js:676 -Toggle Spike Lines // plotly.js: components/modebar/buttons.js:643 -Toggle show closest data on hover // plotly.js: components/modebar/buttons.js:433 +Toggle Spike Lines // plotly.js: components/modebar/buttons.js:660 +Toggle show closest data on hover // plotly.js: components/modebar/buttons.js:444 Top // react-chart-editor: /components/fields/derived.js:105 Top Center // react-chart-editor: /components/fields/TextPosition.js:87 Top Left // react-chart-editor: /components/fields/TextPosition.js:86 @@ -785,9 +788,9 @@ Transpose Transverse Mercator // react-chart-editor: /default_panels/StyleMapsPanel.js:92 Treemap // react-chart-editor: /lib/traceTypes.js:195 True // react-chart-editor: /default_panels/StyleAxesPanel.js:187 -Try again with a supported file format: // react-chart-editor: /components/widgets/Dropzone.js:82 +Try again with a supported file format: // react-chart-editor: /components/widgets/Dropzone.js:94 Turntable // react-chart-editor: /default_panels/StyleLayoutPanel.js:136 -Turntable rotation // plotly.js: components/modebar/buttons.js:347 +Turntable rotation // plotly.js: components/modebar/buttons.js:355 Type // react-chart-editor: /default_panels/GraphCreatePanel.js:33 Typeface // react-chart-editor: /default_panels/StyleAxesPanel.js:36 U // react-chart-editor: /components/fields/derived.js:629 @@ -821,9 +824,9 @@ Violin Mode Violin Padding // react-chart-editor: /default_panels/StyleTracesPanel.js:366 Violin Size and Spacing // react-chart-editor: /default_panels/StyleTracesPanel.js:355 Violin Width // react-chart-editor: /default_panels/StyleTracesPanel.js:365 -Violins // react-chart-editor: /components/fields/derived.js:755 -Violins and Points // react-chart-editor: /components/fields/derived.js:758 -Violins, Points and KDE // react-chart-editor: /components/fields/derived.js:759 +Violins // react-chart-editor: /components/fields/derived.js:756 +Violins and Points // react-chart-editor: /components/fields/derived.js:759 +Violins, Points and KDE // react-chart-editor: /components/fields/derived.js:760 Visible Sides // react-chart-editor: /default_panels/StyleTracesPanel.js:826 W // react-chart-editor: /components/fields/derived.js:631 Waterfall // react-chart-editor: /lib/traceTypes.js:215 @@ -836,7 +839,7 @@ World X // react-chart-editor: /components/fields/derived.js:566 X = 0 // react-chart-editor: /components/fields/derived.js:664 X Anchor // react-chart-editor: /default_panels/GraphSubplotsPanel.js:30 -X Axis // react-chart-editor: /components/fields/derived.js:782 +X Axis // react-chart-editor: /components/fields/derived.js:783 X Bin End // react-chart-editor: /default_panels/StyleTracesPanel.js:327 X Bin Size // react-chart-editor: /default_panels/StyleTracesPanel.js:329 X Bin Start // react-chart-editor: /default_panels/StyleTracesPanel.js:326 @@ -848,7 +851,7 @@ X start Y // react-chart-editor: /components/fields/derived.js:567 Y = 0 // react-chart-editor: /components/fields/derived.js:663 Y Anchor // react-chart-editor: /default_panels/GraphSubplotsPanel.js:34 -Y Axis // react-chart-editor: /components/fields/derived.js:783 +Y Axis // react-chart-editor: /components/fields/derived.js:784 Y Bin End // react-chart-editor: /default_panels/StyleTracesPanel.js:332 Y Bin Size // react-chart-editor: /default_panels/StyleTracesPanel.js:334 Y Bin Start // react-chart-editor: /default_panels/StyleTracesPanel.js:331 @@ -860,8 +863,8 @@ Y start Year // react-chart-editor: /default_panels/StyleAxesPanel.js:406 Years // react-chart-editor: /components/fields/AxisInterval.js:162 Yes // react-chart-editor: /components/fields/ErrorBars.js:96 -Yikes! This doesn't look like a valid // react-chart-editor: /components/widgets/Dropzone.js:81 -Yikes! You can only upload one file at a time. // react-chart-editor: /components/widgets/Dropzone.js:112 +Yikes! This doesn't look like a valid // react-chart-editor: /components/widgets/Dropzone.js:93 +Yikes! You can only upload one file at a time. // react-chart-editor: /components/widgets/Dropzone.js:125 You can add as many as you like, mixing and matching types and arranging them into subplots. // react-chart-editor: /components/containers/TraceAccordion.js:124 You can refer to the items in this column in any text fields of the editor like so: // react-chart-editor: /default_panels/StyleLayoutPanel.js:202 You can style and position your axes in the // react-chart-editor: /components/fields/AxesCreator.js:161 @@ -871,55 +874,56 @@ Z Z Values // react-chart-editor: /default_panels/GraphCreatePanel.js:73 Z start // react-chart-editor: /default_panels/GraphCreatePanel.js:154 Zero Line // react-chart-editor: /default_panels/StyleAxesPanel.js:147 -Zoom // plotly.js: components/modebar/buttons.js:103 && react-chart-editor: /default_panels/StyleLayoutPanel.js:131 +Zoom // plotly.js: components/modebar/buttons.js:96 && react-chart-editor: /default_panels/StyleLayoutPanel.js:131 Zoom Interactivity // react-chart-editor: /default_panels/StyleAxesPanel.js:67 Zoom Level // react-chart-editor: /default_panels/StyleMapsPanel.js:35 -Zoom in // plotly.js: components/modebar/buttons.js:191 -Zoom out // plotly.js: components/modebar/buttons.js:200 +Zoom in // plotly.js: components/modebar/buttons.js:188 +Zoom out // plotly.js: components/modebar/buttons.js:198 ^ // react-chart-editor: /default_panels/StyleAxesPanel.js:286 absolute // react-chart-editor: /default_panels/StyleTracesPanel.js:83 according to axis // react-chart-editor: /components/fields/derived.js:391 -close: // plotly.js: traces/ohlc/calc.js:116 -concentration: // plotly.js: traces/sankey/plot.js:167 +close: // plotly.js: traces/ohlc/calc.js:108 +concentration: // plotly.js: traces/sankey/plot.js:160 e+6 // react-chart-editor: /default_panels/StyleAxesPanel.js:235 -features detected. // react-chart-editor: /components/widgets/Dropzone.js:35 -high: // plotly.js: traces/ohlc/calc.js:114 +features detected. // react-chart-editor: /components/widgets/Dropzone.js:44 +high: // plotly.js: traces/ohlc/calc.js:106 id // react-chart-editor: /default_panels/GraphCreatePanel.js:82 in pixels // react-chart-editor: /components/fields/derived.js:380 -incoming flow count: // plotly.js: traces/sankey/plot.js:168 +incoming flow count: // plotly.js: traces/sankey/plot.js:161 k/M/B // react-chart-editor: /default_panels/StyleAxesPanel.js:239 k/M/G // react-chart-editor: /default_panels/StyleAxesPanel.js:238 -kde: // plotly.js: traces/violin/calc.js:94 -lat: // plotly.js: traces/densitymapbox/calc.js:50 -lon: // plotly.js: traces/densitymapbox/calc.js:51 -low: // plotly.js: traces/ohlc/calc.js:115 -lower fence: // plotly.js: traces/box/calc.js:298 -max: // plotly.js: traces/box/calc.js:296 -mean ± σ: // plotly.js: traces/box/calc.js:297 -mean: // plotly.js: traces/box/calc.js:297 -median: // plotly.js: traces/box/calc.js:292 -min: // plotly.js: traces/box/calc.js:293 -new text // plotly.js: plots/plots.js:336 && react-chart-editor: /components/containers/AnnotationAccordion.js:44 +kde: // plotly.js: traces/violin/calc.js:86 +lat: // plotly.js: traces/densitymapbox/calc.js:42 +lon: // plotly.js: traces/densitymapbox/calc.js:43 +low: // plotly.js: traces/ohlc/calc.js:107 +lower fence: // plotly.js: traces/box/calc.js:292 +max: // plotly.js: traces/box/calc.js:288 +mean ± σ: // plotly.js: traces/box/calc.js:290 +mean: // plotly.js: traces/box/calc.js:291 +median: // plotly.js: traces/box/calc.js:284 +min: // plotly.js: traces/box/calc.js:285 +new text // plotly.js: plots/plots.js:324 && react-chart-editor: /components/containers/AnnotationAccordion.js:44 noon // react-chart-editor: /components/widgets/DateTimePicker.js:145 -open: // plotly.js: traces/ohlc/calc.js:113 -outgoing flow count: // plotly.js: traces/sankey/plot.js:169 +open: // plotly.js: traces/ohlc/calc.js:105 +outgoing flow count: // plotly.js: traces/sankey/plot.js:162 +override it // react-chart-editor: /components/fields/ColorPicker.js:29 panel under Structure to define traces. // react-chart-editor: /components/containers/TraceRequiredPanel.js:26 panel under Style. If Y values are omitted, the histogram function defaults to Count. // react-chart-editor: /default_panels/GraphCreatePanel.js:118 panel. // react-chart-editor: /components/fields/AxesCreator.js:163 -q1: // plotly.js: traces/box/calc.js:294 -q3: // plotly.js: traces/box/calc.js:295 +q1: // plotly.js: traces/box/calc.js:286 +q3: // plotly.js: traces/box/calc.js:287 scaled // react-chart-editor: /default_panels/StyleTracesPanel.js:82 -source: // plotly.js: traces/sankey/plot.js:165 -target: // plotly.js: traces/sankey/plot.js:166 -to upload here or click to choose a file from your computer. // react-chart-editor: /components/widgets/Dropzone.js:57 -trace // plotly.js: plots/plots.js:338 +source: // plotly.js: traces/sankey/plot.js:158 +target: // plotly.js: traces/sankey/plot.js:159 +to upload here or click to choose a file from your computer. // react-chart-editor: /components/widgets/Dropzone.js:66 +trace // plotly.js: plots/plots.js:326 transforms allow you to create multiple traces from one source trace, so as to style them differently. // react-chart-editor: /components/containers/TransformAccordion.js:113 transforms allow you to filter data out from a trace. // react-chart-editor: /components/containers/TransformAccordion.js:108 transforms allow you to sort a trace, so as to control marker overlay or line connection order. // react-chart-editor: /components/containers/TransformAccordion.js:125 transforms allow you to summarize a trace using an aggregate function like "average" or "minimum". // react-chart-editor: /components/containers/TransformAccordion.js:119 under Style panel. If X values are omitted, the histogram function defaults to Count. // react-chart-editor: /default_panels/GraphCreatePanel.js:127 under Style panel. If Z values are omitted, the histogram function defaults to Count. // react-chart-editor: /default_panels/GraphCreatePanel.js:136 -upper fence: // plotly.js: traces/box/calc.js:299 +upper fence: // plotly.js: traces/box/calc.js:293 x // react-chart-editor: /default_panels/StyleAxesPanel.js:259 x10^6 // react-chart-editor: /default_panels/StyleAxesPanel.js:237 √ // react-chart-editor: /components/fields/ErrorBars.js:123 \ No newline at end of file diff --git a/scripts/translationKeys/translation-keys.txt b/scripts/translationKeys/translation-keys.txt index 4903b65f9..b840a3e14 100644 --- a/scripts/translationKeys/translation-keys.txt +++ b/scripts/translationKeys/translation-keys.txt @@ -1,9 +1,9 @@ Axis // /components/fields/AxesCreator.js:150 - features detected. // /components/widgets/Dropzone.js:35 + features detected. // /components/widgets/Dropzone.js:44 panel under Structure to define traces. // /components/containers/TraceRequiredPanel.js:26 panel under Style. If Y values are omitted, the histogram function defaults to Count. // /default_panels/GraphCreatePanel.js:118 panel. // /components/fields/AxesCreator.js:163 - to upload here or click to choose a file from your computer. // /components/widgets/Dropzone.js:57 + to upload here or click to choose a file from your computer. // /components/widgets/Dropzone.js:66 transforms allow you to create multiple traces from one source trace, so as to style them differently. // /components/containers/TransformAccordion.js:113 transforms allow you to filter data out from a trace. // /components/containers/TransformAccordion.js:108 transforms allow you to sort a trace, so as to control marker overlay or line connection order. // /components/containers/TransformAccordion.js:125 @@ -131,8 +131,8 @@ Box Mode Box Padding // /default_panels/StyleTracesPanel.js:352 Box Size and Spacing // /default_panels/StyleTracesPanel.js:341 Box Width // /default_panels/StyleTracesPanel.js:351 -Boxes // /components/fields/derived.js:749 -Boxes and Points // /components/fields/derived.js:751 +Boxes // /components/fields/derived.js:750 +Boxes and Points // /components/fields/derived.js:752 Button // /components/containers/RangeSelectorAccordion.js:44 Button Labels // /default_panels/StyleUpdateMenusPanel.js:24 Buttons // /components/containers/UpdateMenuAccordion.js:22 @@ -145,8 +145,8 @@ Canvas Carpet // /lib/computeTraceOptionsFromSchema.js:107 Carpet Contour // /lib/computeTraceOptionsFromSchema.js:115 Carpet Scatter // /lib/computeTraceOptionsFromSchema.js:111 -Carto Dark Matter // /components/fields/derived.js:729 -Carto Positron // /components/fields/derived.js:728 +Carto Dark Matter // /components/fields/derived.js:730 +Carto Positron // /components/fields/derived.js:729 Categorical // /default_panels/StyleAxesPanel.js:51 Cell Options // /default_panels/GraphCreatePanel.js:182 Cells // /default_panels/StyleTracesPanel.js:232 @@ -156,6 +156,7 @@ Center Longitude Center of Mass // /default_panels/StyleTracesPanel.js:93 Change // /default_panels/GraphTransformsPanel.js:49 Charts like this by Plotly users. // /components/widgets/TraceTypeSelector.js:106 +Choose data... // /components/fields/DataSelector.js:133 Choropleth // /lib/computeTraceOptionsFromSchema.js:79 Choropleth Atlas Map // /lib/traceTypes.js:165 Choropleth Tile Map // /lib/traceTypes.js:160 @@ -170,7 +171,7 @@ Clip To Clip on Axes // /default_panels/StyleTracesPanel.js:706 Clockwise // /components/fields/derived.js:113 Close // /default_panels/GraphCreatePanel.js:145 -Closest // /components/fields/derived.js:781 +Closest // /components/fields/derived.js:782 Coastlines // /default_panels/StyleMapsPanel.js:143 Collapse All // /components/containers/PanelHeader.js:35 Color // /components/fields/ErrorBars.js:108 @@ -227,6 +228,7 @@ Current Bin Custom // /components/fields/MarkerColor.js:203 Custom Data // /components/fields/ErrorBars.js:129 Data // /components/fields/ErrorBars.js:124 +Data inlined in figure // /components/fields/DataSelector.js:133 Date // /default_panels/StyleAxesPanel.js:50 Day // /default_panels/StyleAxesPanel.js:408 Days // /components/fields/AxisInterval.js:164 @@ -243,14 +245,14 @@ Diagonal Diameter // /default_panels/StyleTracesPanel.js:431 Diffuse // /default_panels/StyleTracesPanel.js:791 Direction // /default_panels/StyleAxesPanel.js:77 -Disable // /components/fields/derived.js:784 +Disable // /components/fields/derived.js:785 Disabled // /default_panels/GraphTransformsPanel.js:75 Display // /default_panels/StyleTracesPanel.js:250 Distributions // /lib/traceTypes.js:18 Divergence // /components/fields/derived.js:633 Diverging // /default_panels/StyleLayoutPanel.js:42 Drag // /default_panels/StyleLayoutPanel.js:126 -Drop the // /components/widgets/Dropzone.js:55 +Drop the // /components/widgets/Dropzone.js:64 Dropdown // /components/containers/UpdateMenuAccordion.js:21 E+6 // /default_panels/StyleAxesPanel.js:236 Each point in a trace is colored according to data. // /components/fields/MarkerColor.js:169 @@ -287,12 +289,12 @@ Face Normal Facecolor // /default_panels/GraphCreatePanel.js:195 False // /default_panels/StyleAxesPanel.js:188 February // /components/widgets/DateTimePicker.js:76 -File loaded! // /components/widgets/Dropzone.js:40 +File loaded! // /components/widgets/Dropzone.js:49 Fill // /default_panels/StyleImagesPanel.js:30 Fill Color // /default_panels/GraphCreatePanel.js:177 Fill to // /default_panels/StyleTracesPanel.js:632 Filled Area // /default_panels/StyleTracesPanel.js:631 -Fills // /components/fields/derived.js:764 +Fills // /components/fields/derived.js:765 Filter // /components/containers/TransformAccordion.js:21 Finance // /lib/traceTypes.js:13 First // /default_panels/GraphTransformsPanel.js:47 @@ -321,7 +323,7 @@ General GeoJSON // /default_panels/StyleMapsPanel.js:44 GeoJSON Location Field // /default_panels/GraphCreatePanel.js:79 GeoJSON feature // /components/fields/LocationSelector.js:31 -GeoJSON loaded! // /components/widgets/Dropzone.js:34 +GeoJSON loaded! // /components/widgets/Dropzone.js:43 Gnomonic // /default_panels/StyleMapsPanel.js:88 Go back // /components/widgets/text_editors/MultiFormat.js:185 Go to the // /components/containers/TraceRequiredPanel.js:24 @@ -387,7 +389,7 @@ Jitter July // /components/widgets/DateTimePicker.js:81 June // /components/widgets/DateTimePicker.js:80 K (Optional) // /default_panels/GraphCreatePanel.js:141 -KDE // /components/fields/derived.js:757 +KDE // /components/fields/derived.js:758 Kavrayskiy 7 // /default_panels/StyleMapsPanel.js:78 LaTeX // /components/widgets/text_editors/MultiFormat.js:24 LaTeX is a math typesetting language that doesn't work with rich text. // /components/widgets/text_editors/MultiFormat.js:105 @@ -425,7 +427,7 @@ Linear Lines // /default_panels/StyleAxesPanel.js:87 Lines, Rectangles and Ellipses. // /components/containers/ShapeAccordion.js:55 Links // /default_panels/GraphCreatePanel.js:98 -Loading... // /components/widgets/Dropzone.js:118 +Loading... // /components/widgets/Dropzone.js:131 Location // /components/fields/derived.js:586 Location Format // /components/fields/LocationSelector.js:27 Locations // /components/fields/LocationSelector.js:25 @@ -444,12 +446,12 @@ Map Map Frame // /default_panels/StyleMapsPanel.js:196 Map Positioning // /default_panels/StyleMapsPanel.js:32 Map Projection // /default_panels/StyleMapsPanel.js:50 -Mapbox Basic // /components/fields/derived.js:718 -Mapbox Dark // /components/fields/derived.js:721 -Mapbox Light // /components/fields/derived.js:720 -Mapbox Outdoors // /components/fields/derived.js:719 -Mapbox Satellite // /components/fields/derived.js:722 -Mapbox Satellite with Streets // /components/fields/derived.js:723 +Mapbox Basic // /components/fields/derived.js:719 +Mapbox Dark // /components/fields/derived.js:722 +Mapbox Light // /components/fields/derived.js:721 +Mapbox Outdoors // /components/fields/derived.js:720 +Mapbox Satellite // /components/fields/derived.js:723 +Mapbox Satellite with Streets // /components/fields/derived.js:724 Maps // /DefaultEditor.js:94 March // /components/widgets/DateTimePicker.js:77 Margin Color // /default_panels/StyleLayoutPanel.js:27 @@ -507,7 +509,7 @@ Negative Sequential No // /components/fields/ErrorBars.js:97 No Clip // /components/fields/HoverLabelNameLength.js:55 No Results // /components/widgets/Dropdown.js:67 -No tiles (white background) // /components/fields/derived.js:726 +No tiles (white background) // /components/fields/derived.js:727 Nodes // /default_panels/GraphCreatePanel.js:92 None // /components/fields/derived.js:64 None label // /default_panels/StyleColorbarsPanel.js:185 @@ -532,7 +534,7 @@ Offset On // /components/fields/RectanglePositioner.js:88 Opacity // /default_panels/StyleShapesPanel.js:51 Open // /default_panels/GraphCreatePanel.js:142 -Open Street Map // /components/fields/derived.js:727 +Open Street Map // /components/fields/derived.js:728 Operator // /default_panels/GraphTransformsPanel.js:82 Options // /default_panels/GraphCreatePanel.js:193 Orbit // /default_panels/StyleLayoutPanel.js:135 @@ -560,7 +562,7 @@ Plot Background Point Cloud // /lib/computeTraceOptionsFromSchema.js:87 Point Opacity // /default_panels/StyleTracesPanel.js:418 Points // /components/containers/TraceMarkerSection.js:23 -Points and Fills // /components/fields/derived.js:765 +Points and Fills // /components/fields/derived.js:766 Polar // /lib/constants.js:109 Polar Bar // /lib/computeTraceOptionsFromSchema.js:135 Polar Scatter // /lib/computeTraceOptionsFromSchema.js:127 @@ -602,7 +604,7 @@ Right Rivers // /default_panels/StyleMapsPanel.js:184 Robinson // /default_panels/StyleMapsPanel.js:76 Roll // /default_panels/StyleMapsPanel.js:100 -Root // /components/fields/derived.js:809 +Root // /components/fields/derived.js:810 Rotation // /default_panels/StyleTracesPanel.js:387 Roughness // /default_panels/StyleTracesPanel.js:793 SVG // /components/fields/TraceSelector.js:102 @@ -671,9 +673,9 @@ Split labels Stack // /default_panels/GraphSubplotsPanel.js:78 Stacked // /default_panels/StyleTracesPanel.js:303 Stacking // /default_panels/StyleTracesPanel.js:556 -Stamen Terrain // /components/fields/derived.js:730 -Stamen Toner // /components/fields/derived.js:731 -Stamen Watercolor // /components/fields/derived.js:732 +Stamen Terrain // /components/fields/derived.js:731 +Stamen Toner // /components/fields/derived.js:732 +Stamen Watercolor // /components/fields/derived.js:733 Standard Deviation // /default_panels/GraphTransformsPanel.js:44 Start Point // /default_panels/StyleShapesPanel.js:35 Start at Level // /default_panels/StyleTracesPanel.js:60 @@ -695,7 +697,7 @@ Suffix Sum // /default_panels/GraphSubplotsPanel.js:86 Sum // /components/fields/derived.js:143 Sunburst // /lib/traceTypes.js:190 -Supported formats are: // /components/widgets/Dropzone.js:62 +Supported formats are: // /components/widgets/Dropzone.js:71 Surface // /lib/computeTraceOptionsFromSchema.js:59 Suspected Outliers // /default_panels/StyleTracesPanel.js:394 Symbol // /default_panels/StyleTracesPanel.js:435 @@ -721,6 +723,7 @@ Text Position Theta // /components/fields/derived.js:618 Theta Unit // /default_panels/GraphCreatePanel.js:162 Thickness // /components/fields/ErrorBars.js:109 +This color is computed from other parts of the figure but you can // /components/fields/ColorPicker.js:22 This input has multiple values associated with it. Changing this setting will override these custom inputs. // /lib/constants.js:20 This panel could not be displayed due to an error. // /components/containers/PlotlyPanel.js:15 This will position all text values on the plot according to the selected position. // /components/fields/TextPosition.js:29 @@ -761,7 +764,7 @@ Transpose Transverse Mercator // /default_panels/StyleMapsPanel.js:92 Treemap // /lib/traceTypes.js:195 True // /default_panels/StyleAxesPanel.js:187 -Try again with a supported file format: // /components/widgets/Dropzone.js:82 +Try again with a supported file format: // /components/widgets/Dropzone.js:94 Turntable // /default_panels/StyleLayoutPanel.js:136 Type // /default_panels/GraphCreatePanel.js:33 Typeface // /default_panels/StyleAxesPanel.js:36 @@ -796,9 +799,9 @@ Violin Mode Violin Padding // /default_panels/StyleTracesPanel.js:366 Violin Size and Spacing // /default_panels/StyleTracesPanel.js:355 Violin Width // /default_panels/StyleTracesPanel.js:365 -Violins // /components/fields/derived.js:755 -Violins and Points // /components/fields/derived.js:758 -Violins, Points and KDE // /components/fields/derived.js:759 +Violins // /components/fields/derived.js:756 +Violins and Points // /components/fields/derived.js:759 +Violins, Points and KDE // /components/fields/derived.js:760 Visible Sides // /default_panels/StyleTracesPanel.js:826 W // /components/fields/derived.js:631 Waterfall // /lib/traceTypes.js:215 @@ -811,7 +814,7 @@ World X // /components/fields/derived.js:566 X = 0 // /components/fields/derived.js:664 X Anchor // /default_panels/GraphSubplotsPanel.js:30 -X Axis // /components/fields/derived.js:782 +X Axis // /components/fields/derived.js:783 X Bin End // /default_panels/StyleTracesPanel.js:327 X Bin Size // /default_panels/StyleTracesPanel.js:329 X Bin Start // /default_panels/StyleTracesPanel.js:326 @@ -823,7 +826,7 @@ X start Y // /components/fields/derived.js:567 Y = 0 // /components/fields/derived.js:663 Y Anchor // /default_panels/GraphSubplotsPanel.js:34 -Y Axis // /components/fields/derived.js:783 +Y Axis // /components/fields/derived.js:784 Y Bin End // /default_panels/StyleTracesPanel.js:332 Y Bin Size // /default_panels/StyleTracesPanel.js:334 Y Bin Start // /default_panels/StyleTracesPanel.js:331 @@ -835,8 +838,8 @@ Y start Year // /default_panels/StyleAxesPanel.js:406 Years // /components/fields/AxisInterval.js:162 Yes // /components/fields/ErrorBars.js:96 -Yikes! This doesn't look like a valid // /components/widgets/Dropzone.js:81 -Yikes! You can only upload one file at a time. // /components/widgets/Dropzone.js:112 +Yikes! This doesn't look like a valid // /components/widgets/Dropzone.js:93 +Yikes! You can only upload one file at a time. // /components/widgets/Dropzone.js:125 You can add as many as you like, mixing and matching types and arranging them into subplots. // /components/containers/TraceAccordion.js:124 You can refer to the items in this column in any text fields of the editor like so: // /default_panels/StyleLayoutPanel.js:202 You can style and position your axes in the // /components/fields/AxesCreator.js:161 @@ -859,6 +862,7 @@ k/M/B k/M/G // /default_panels/StyleAxesPanel.js:238 new text // /components/containers/AnnotationAccordion.js:44 noon // /components/widgets/DateTimePicker.js:145 +override it // /components/fields/ColorPicker.js:29 scaled // /default_panels/StyleTracesPanel.js:82 x // /default_panels/StyleAxesPanel.js:259 x10^6 // /default_panels/StyleAxesPanel.js:237 diff --git a/src/__stories__/index.stories.js b/src/__stories__/index.stories.js new file mode 100644 index 000000000..e78432a03 --- /dev/null +++ b/src/__stories__/index.stories.js @@ -0,0 +1,804 @@ +import React from 'react'; +import {TestEditor, setupGraphDiv, fixtures} from 'lib/test-utils'; +import plotly from 'plotly.js/dist/plotly'; + +import {PanelMenuWrapper} from '../components'; +import {customConfigTest} from '../../dev/customConfigTest'; + +import * as mocks from '../../dev/percy'; +import * as panels from '../default_panels/'; + +import '../../dev/styles.css'; +import '../styles/main.scss'; +import './stories.css'; + +/** + * To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js + * To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested + */ +const panelsToTest = { + bar: ['GraphCreatePanel', 'StyleTracesPanel'], + box: ['GraphCreatePanel', 'StyleTracesPanel'], + pie: ['GraphCreatePanel', 'StyleTracesPanel'], + histogram: ['GraphCreatePanel', 'StyleTracesPanel'], + histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'], + violin: ['GraphCreatePanel', 'StyleTracesPanel'], + waterfall: ['GraphCreatePanel', 'StyleTracesPanel'], + sunburst: ['GraphCreatePanel', 'StyleTracesPanel'], + sankey: ['GraphCreatePanel', 'StyleTracesPanel'], + geoTest: ['GraphCreatePanel', 'StyleMapsPanel', 'StyleTracesPanel'], + funnel: ['GraphCreatePanel', 'StyleTracesPanel'], + funnelarea: ['GraphCreatePanel', 'StyleTracesPanel'], +}; + +window.URL.createObjectURL = function () { + return null; +}; + +// eslint-disable-next-line react/prop-types +const PanelFixture = ({panel, group, name, figure, customConfig}) => { + const gd = setupGraphDiv(figure, plotly); + gd._context = plotly.setPlotConfig(); + gd._context.setBackground = () => null; + + const Panel = panel; + + return ( +
+ + + + + +
+ ); +}; + +const meta = {component: PanelFixture, title: 'Panels'}; +export default meta; + +const stories = {}; + +const panelGroups = {}; +const panelNames = {}; + +Object.keys(mocks).forEach((mock) => { + const selectedPanels = panelsToTest[mock] ? panelsToTest[mock] : Object.keys(panels); + + selectedPanels.forEach((panel) => { + const words = panel.split(/(?=[A-Z])/); + const panelGroup = words[0]; + const panelName = words.slice(1, -1).join(' '); + + stories[`${mock}_${panel}`] = { + render: () => ( + + ), + }; + stories[`${mock}_${panel}_withCustomConfig`] = { + render: () => ( + + ), + }; + + // This generates the code below (to copy/paste from browser console) + // console.log(`export const ${mock}_${panel} = { + // name: '${mock}_${panel}', + // render: () => ()};`); + + // console.log(`export const ${mock}_${panel}_withCustomConfig = { + // name: '${mock}_${panel}_withCustomConfig', + // render: () => ()};`); + + panelGroups[`${mock}_${panel}`] = panelGroup; + panelNames[`${mock}_${panel}`] = panelName; + }); +}); + +/* + * https://github.com/storybookjs/storybook/issues/9828 + * Problem: storybook introduced the new format for stories where they now have to be statically analyzeable. + * So generating the stories as before doesn't work anymore. storiesOf API is still available but deprecated, + * and somehow I couldn't get it to work after upgrade to V7. The solution of generating all the stories and + * copy/pasting them from the browser console is ugly. + * Currently there's an RFC for an API to generate stories dynamically. Once that's implemented sometime after + * V8, we should switch to that and remove the code below. + */ +/* eslint-disable dot-notation */ + +export const bar_GraphCreatePanel = { + name: 'bar_GraphCreatePanel', + render: () => ( + + ), +}; +export const bar_GraphCreatePanel_withCustomConfig = { + name: 'bar_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const bar_StyleTracesPanel = { + name: 'bar_StyleTracesPanel', + render: () => ( + + ), +}; +export const bar_StyleTracesPanel_withCustomConfig = { + name: 'bar_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const box_GraphCreatePanel = { + name: 'box_GraphCreatePanel', + render: () => ( + + ), +}; +export const box_GraphCreatePanel_withCustomConfig = { + name: 'box_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const box_StyleTracesPanel = { + name: 'box_StyleTracesPanel', + render: () => ( + + ), +}; +export const box_StyleTracesPanel_withCustomConfig = { + name: 'box_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const funnel_GraphCreatePanel = { + name: 'funnel_GraphCreatePanel', + render: () => ( + + ), +}; +export const funnel_GraphCreatePanel_withCustomConfig = { + name: 'funnel_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const funnel_StyleTracesPanel = { + name: 'funnel_StyleTracesPanel', + render: () => ( + + ), +}; +export const funnel_StyleTracesPanel_withCustomConfig = { + name: 'funnel_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const funnelarea_GraphCreatePanel = { + name: 'funnelarea_GraphCreatePanel', + render: () => ( + + ), +}; +export const funnelarea_GraphCreatePanel_withCustomConfig = { + name: 'funnelarea_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const funnelarea_StyleTracesPanel = { + name: 'funnelarea_StyleTracesPanel', + render: () => ( + + ), +}; +export const funnelarea_StyleTracesPanel_withCustomConfig = { + name: 'funnelarea_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const geoTest_GraphCreatePanel = { + name: 'geoTest_GraphCreatePanel', + render: () => ( + + ), +}; +export const geoTest_GraphCreatePanel_withCustomConfig = { + name: 'geoTest_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const geoTest_StyleMapsPanel = { + name: 'geoTest_StyleMapsPanel', + render: () => ( + + ), +}; +export const geoTest_StyleMapsPanel_withCustomConfig = { + name: 'geoTest_StyleMapsPanel_withCustomConfig', + render: () => ( + + ), +}; +export const geoTest_StyleTracesPanel = { + name: 'geoTest_StyleTracesPanel', + render: () => ( + + ), +}; +export const geoTest_StyleTracesPanel_withCustomConfig = { + name: 'geoTest_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const histogram_GraphCreatePanel = { + name: 'histogram_GraphCreatePanel', + render: () => ( + + ), +}; +export const histogram_GraphCreatePanel_withCustomConfig = { + name: 'histogram_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const histogram_StyleTracesPanel = { + name: 'histogram_StyleTracesPanel', + render: () => ( + + ), +}; +export const histogram_StyleTracesPanel_withCustomConfig = { + name: 'histogram_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const histogram2d_GraphCreatePanel = { + name: 'histogram2d_GraphCreatePanel', + render: () => ( + + ), +}; +export const histogram2d_GraphCreatePanel_withCustomConfig = { + name: 'histogram2d_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const histogram2d_StyleTracesPanel = { + name: 'histogram2d_StyleTracesPanel', + render: () => ( + + ), +}; +export const histogram2d_StyleTracesPanel_withCustomConfig = { + name: 'histogram2d_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_GraphCreatePanel = { + name: 'panelTest_GraphCreatePanel', + render: () => ( + + ), +}; +export const panelTest_GraphCreatePanel_withCustomConfig = { + name: 'panelTest_GraphCreatePanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_GraphSubplotsPanel = { + name: 'panelTest_GraphSubplotsPanel', + render: () => ( + + ), +}; +export const panelTest_GraphSubplotsPanel_withCustomConfig = { + name: 'panelTest_GraphSubplotsPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_GraphTransformsPanel = { + name: 'panelTest_GraphTransformsPanel', + render: () => ( + + ), +}; +export const panelTest_GraphTransformsPanel_withCustomConfig = { + name: 'panelTest_GraphTransformsPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleAxesPanel = { + name: 'panelTest_StyleAxesPanel', + render: () => ( + + ), +}; +export const panelTest_StyleAxesPanel_withCustomConfig = { + name: 'panelTest_StyleAxesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleColorbarsPanel = { + name: 'panelTest_StyleColorbarsPanel', + render: () => ( + + ), +}; +export const panelTest_StyleColorbarsPanel_withCustomConfig = { + name: 'panelTest_StyleColorbarsPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleImagesPanel = { + name: 'panelTest_StyleImagesPanel', + render: () => ( + + ), +}; +export const panelTest_StyleImagesPanel_withCustomConfig = { + name: 'panelTest_StyleImagesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleLayoutPanel = { + name: 'panelTest_StyleLayoutPanel', + render: () => ( + + ), +}; +export const panelTest_StyleLayoutPanel_withCustomConfig = { + name: 'panelTest_StyleLayoutPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleLegendPanel = { + name: 'panelTest_StyleLegendPanel', + render: () => ( + + ), +}; +export const panelTest_StyleLegendPanel_withCustomConfig = { + name: 'panelTest_StyleLegendPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleMapsPanel = { + name: 'panelTest_StyleMapsPanel', + render: () => ( + + ), +}; +export const panelTest_StyleMapsPanel_withCustomConfig = { + name: 'panelTest_StyleMapsPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleNotesPanel = { + name: 'panelTest_StyleNotesPanel', + render: () => ( + + ), +}; +export const panelTest_StyleNotesPanel_withCustomConfig = { + name: 'panelTest_StyleNotesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleShapesPanel = { + name: 'panelTest_StyleShapesPanel', + render: () => ( + + ), +}; +export const panelTest_StyleShapesPanel_withCustomConfig = { + name: 'panelTest_StyleShapesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleSlidersPanel = { + name: 'panelTest_StyleSlidersPanel', + render: () => ( + + ), +}; +export const panelTest_StyleSlidersPanel_withCustomConfig = { + name: 'panelTest_StyleSlidersPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleTracesPanel = { + name: 'panelTest_StyleTracesPanel', + render: () => ( + + ), +}; +export const panelTest_StyleTracesPanel_withCustomConfig = { + name: 'panelTest_StyleTracesPanel_withCustomConfig', + render: () => ( + + ), +}; +export const panelTest_StyleUpdateMenusPanel = { + name: 'panelTest_StyleUpdateMenusPanel', + render: () => ( + + ), +}; +export const panelTest_StyleUpdateMenusPanel_withCustomConfig = { + name: 'panelTest_StyleUpdateMenusPanel_withCustomConfig', + render: () => ( + + ), +}; +/* eslint-enable dot-notation */ diff --git a/src/components/fields/ColorPicker.js b/src/components/fields/ColorPicker.js index 75d333371..5e4526b22 100644 --- a/src/components/fields/ColorPicker.js +++ b/src/components/fields/ColorPicker.js @@ -13,18 +13,20 @@ export class UnconnectedColorPicker extends Component { } render() { + const {localize: _} = this.context; + if (this.state.empty) { return (
- This color is computed from other parts of the figure but you can{' '} + {_('This color is computed from other parts of the figure but you can')}{' '} { this.setState({empty: false}); this.props.updatePlot(this.props.defaultColor); }} > - override it + {_('override it')} .
@@ -51,6 +53,10 @@ UnconnectedColorPicker.propTypes = { ...Field.propTypes, }; +UnconnectedColorPicker.contextTypes = { + localize: PropTypes.func, +}; + UnconnectedColorPicker.displayName = 'UnconnectedColorPicker'; export default connectToContainer(UnconnectedColorPicker); diff --git a/src/components/fields/DataSelector.js b/src/components/fields/DataSelector.js index 09bd2648b..eaca67dec 100644 --- a/src/components/fields/DataSelector.js +++ b/src/components/fields/DataSelector.js @@ -30,7 +30,7 @@ export class UnconnectedDataSelector extends Component { this.srcAttr = props.attr + 'src'; this.srcProperty = nestedProperty(props.container, this.srcAttr).get(); this.fullValue = this.context.srcConverters - ? this.context.srcConverters.toSrc(this.srcProperty, props.container.type) + ? this.context.srcConverters.toSrc(this.srcProperty, props.container?.type) : this.srcProperty; this.is2D = false; @@ -107,6 +107,7 @@ export class UnconnectedDataSelector extends Component { } render() { + const {localize: _} = this.context; const {label} = this.props; let newLabel; if (typeof label === 'object') { @@ -129,7 +130,7 @@ export class UnconnectedDataSelector extends Component { multi={this.is2D} searchable={true} clearable={true} - placeholder={this.hasData ? 'Data inlined in figure' : 'Choose data...'} + placeholder={this.hasData ? _('Data inlined in figure') : _('Choose data...')} disabled={this.dataSourceOptions.length === 0} components={this.props.dataSourceComponents} /> @@ -154,6 +155,7 @@ UnconnectedDataSelector.contextTypes = { fromSrc: PropTypes.func.isRequired, }), container: PropTypes.object, + localize: PropTypes.func, }; UnconnectedDataSelector.displayName = 'UnconnectedDataSelector'; diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js index 098c78887..7ab34bb6f 100644 --- a/src/components/fields/derived.js +++ b/src/components/fields/derived.js @@ -712,16 +712,17 @@ export const MapboxStyleDropdown = connectToContainer(UnconnectedDropdown, { modifyPlotProps: (props, context, plotProps) => { const {mapBoxAccess, localize: _} = context; - plotProps.options = (!mapBoxAccess - ? [] - : [ - {label: _('Mapbox Basic'), value: 'basic'}, - {label: _('Mapbox Outdoors'), value: 'outdoors'}, - {label: _('Mapbox Light'), value: 'light'}, - {label: _('Mapbox Dark'), value: 'dark'}, - {label: _('Mapbox Satellite'), value: 'satellite'}, - {label: _('Mapbox Satellite with Streets'), value: 'satellite-streets'}, - ] + plotProps.options = ( + !mapBoxAccess + ? [] + : [ + {label: _('Mapbox Basic'), value: 'basic'}, + {label: _('Mapbox Outdoors'), value: 'outdoors'}, + {label: _('Mapbox Light'), value: 'light'}, + {label: _('Mapbox Dark'), value: 'dark'}, + {label: _('Mapbox Satellite'), value: 'satellite'}, + {label: _('Mapbox Satellite with Streets'), value: 'satellite-streets'}, + ] ).concat([ {label: _('No tiles (white background)'), value: 'white-bg'}, {label: _('Open Street Map'), value: 'open-street-map'}, diff --git a/src/components/widgets/Dropzone.js b/src/components/widgets/Dropzone.js index 4529dae9a..05366d6c1 100644 --- a/src/components/widgets/Dropzone.js +++ b/src/components/widgets/Dropzone.js @@ -11,8 +11,17 @@ class Dropzone extends Component { }; this.validFiletypes = { - image: 'image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp', - geojson: 'application/json', + image: [ + 'image/jpeg', + 'image/jpg', + 'image/svg', + 'image/svg+xml', + 'image/png', + 'image/gif', + 'image/bmp', + 'image/webp', + ], + geojson: ['application/json'], }; this.onDrop = this.onDrop.bind(this); @@ -60,7 +69,10 @@ class Dropzone extends Component { {this.validFiletypes[this.props.fileType] ? (

{_('Supported formats are: ') + - this.validFiletypes[this.props.fileType].split('image/').join('') + + this.validFiletypes[this.props.fileType] + .join(', ') + .replaceAll('image/', '') + .toUpperCase() + '.'}

) : null} @@ -69,17 +81,18 @@ class Dropzone extends Component { }); } - parsingError() { + parsingError(optionalError) { const _ = this.context.localize; const supportedFileTypes = this.props.fileType === 'image' - ? this.validFiletypes[this.props.fileType].split('image/').join('') - : this.validFiletypes[this.props.fileType]; + ? this.validFiletypes[this.props.fileType].join(', ').replaceAll('image/', '').toUpperCase() + : this.validFiletypes[this.props.fileType][0]; return (
{_("Yikes! This doesn't look like a valid ") + this.props.fileType}

{_('Try again with a supported file format: ') + supportedFileTypes + '.'}

+ {optionalError &&

{optionalError}

}
); } @@ -100,7 +113,7 @@ class Dropzone extends Component { } } - onDrop(accepted, rejected) { + onDrop(accepted, rejections) { const _ = this.context.localize; const reader = new FileReader(); @@ -124,9 +137,9 @@ class Dropzone extends Component { } } - if (rejected.length) { + if (rejections.length) { this.setState({ - content: this.parsingError(), + content: this.parsingError(rejections.map((r) => r.errors.map((e) => e.message))), }); } } diff --git a/src/components/widgets/EditableText.js b/src/components/widgets/EditableText.js index a81cca68a..dca6d6421 100644 --- a/src/components/widgets/EditableText.js +++ b/src/components/widgets/EditableText.js @@ -56,17 +56,8 @@ class EditableText extends Component { } render() { - const { - type, - className, - text, - disable, - autoFocus, - onKeyDown, - placeholder, - readOnly, - size, - } = this.props; + const {type, className, text, disable, autoFocus, onKeyDown, placeholder, readOnly, size} = + this.props; return ( this.handleChange(value)} - > +
this.handleChange(value)}> {Icon ? : null} {label ? {label} : null}
diff --git a/src/lib/__tests__/connectLayoutToPlot-test.js b/src/lib/__tests__/connectLayoutToPlot-test.js index 1e247bdff..1f75fc99b 100644 --- a/src/lib/__tests__/connectLayoutToPlot-test.js +++ b/src/lib/__tests__/connectLayoutToPlot-test.js @@ -53,19 +53,19 @@ Layouts.forEach((Layout) => { it(`automatically computes min and max defaults`, () => { const onUpdate = jest.fn(); const wrapper = mount( - + - + ) - .find('[attr="legend.x"]') + .find('[attr="title.x"]') .find(NumericInput); - const expectedMin = -2; - const expectedMax = 3; + const expectedMin = 0; + const expectedMax = 1; expect(wrapper.prop('min')).toBe(expectedMin); expect(wrapper.prop('max')).toBe(expectedMax); }); diff --git a/src/lib/connectAxesToLayout.js b/src/lib/connectAxesToLayout.js index 61c7153ad..572a45221 100644 --- a/src/lib/connectAxesToLayout.js +++ b/src/lib/connectAxesToLayout.js @@ -15,9 +15,10 @@ function computeAxesOptions(axes, props, context) { for (let i = 0; i < filteredAxes.length; i++) { const ax = filteredAxes[i]; const label = capitalize(ax._name.split('axis')[0]); - const value = (ax._subplot && !ax._subplot.includes('xaxis') && !ax._subplot.includes('yaxis') - ? ax._subplot + '.' + ax._name - : ax._subplot + const value = ( + ax._subplot && !ax._subplot.includes('xaxis') && !ax._subplot.includes('yaxis') + ? ax._subplot + '.' + ax._name + : ax._subplot ).trim(); options[i] = { @@ -59,7 +60,7 @@ export default function connectAxesToLayout(WrappedComponent) { this.setLocals(props, this.state, context); } - componentWillUpdate(nextProps, nextState, nextContext) { + UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) { this.axes = getAllAxes(nextContext.fullContainer); this.axesOptions = computeAxesOptions(this.axes, nextProps, nextContext); // This is not enough, what if plotly.js adds new axes... diff --git a/src/lib/dereference.js b/src/lib/dereference.js index e5ed54d8f..a1858a931 100644 --- a/src/lib/dereference.js +++ b/src/lib/dereference.js @@ -40,6 +40,7 @@ export default function dereference( let dereferencedData = srcRef.map((ref) => { if (config.deleteKeys && !(ref in dataSources)) { delete parent[dataKey]; + delete parent[dataKey + 'src']; } return dataSources[ref]; }); diff --git a/src/lib/striptags.js b/src/lib/striptags.js index 4728918cf..836e8b1a5 100644 --- a/src/lib/striptags.js +++ b/src/lib/striptags.js @@ -24,15 +24,6 @@ 'use strict'; -// minimal symbol polyfill for IE11 and others -if (typeof Symbol !== 'function') { - var Symbol = function (name) { - return name; - }; - - Symbol.nonNative = true; -} - const STATE_PLAINTEXT = Symbol('plaintext'); const STATE_HTML = Symbol('html'); const STATE_COMMENT = Symbol('comment'); diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss index 608bb2887..1658c59c5 100644 --- a/src/styles/_helpers.scss +++ b/src/styles/_helpers.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; .\+flex { display: flex; } @@ -15,7 +16,7 @@ @function spacing($name, $true-val: false) { @if $true-val == true { - @return map-get($spacings, $name); + @return map.get($spacings, $name); } @else { @return var(--spacing-#{$name}); } @@ -23,7 +24,7 @@ @function font($name, $true-val: false) { @if $true-val == true { - @return map-get($fonts, $name); + @return map.get($fonts, $name); } @else { @return var(--font-#{$name}); } @@ -31,7 +32,7 @@ @function color($name, $true-val: false) { @if $true-val == true { - @return map-get($colors, $name); + @return map.get($colors, $name); } @else { @return var(--color-#{$name}); } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index b3a11a800..4d1d61d13 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,7 +1,11 @@ +@use 'sass:meta'; +@use 'variables/defaults' as *; +@use 'variables/main' as *; +@import 'movement'; + @mixin vendor($property, $value) { -webkit-#{$property}: $value; -moz-#{$property}: $value; - -ms-#{$property}: $value; -o-#{$property}: $value; #{$property}: $value; } @@ -34,7 +38,11 @@ } } -@mixin scrollbar($width: 5px, $trackbg: var(--scrollbar-track-background), $thumb-color: var(--scrollbar-thumb-color)) { +@mixin scrollbar( + $width: 5px, + $trackbg: var(--scrollbar-track-background), + $thumb-color: var(--scrollbar-thumb-color) +) { -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { background: white; @@ -84,9 +92,9 @@ @mixin generateVars() { // Base Color Variables @each $var, $val in $colors { - @if type-of($val) == map { + @if meta.type-of($val) == map { @each $var-n, $val-n in $val { - @if type-of($val-n) == map { + @if meta.type-of($val-n) == map { @each $var-i, $val-i in $val-n { #{--color}-#{$var}-#{$var-n}-#{$var-i}: $val-i; } @@ -95,7 +103,7 @@ } } } @else { - #{--color}-#{$var}: $val; + #{--color}-#{"" + $var}: $val; } } @@ -103,7 +111,6 @@ @each $var, $val in $brand { #{--color}-#{$var}: $val; } - // Text Color @each $var, $val in $text { #{--color}-#{$var}: $val; @@ -118,7 +125,7 @@ } // Button Color Variables @each $var, $val in $buttons { - @if type-of($val) == map { + @if meta.type-of($val) == map { @each $var-n, $val-n in $val { #{--color-button}-#{$var}-#{$var-n}: $val-n; } @@ -163,9 +170,7 @@ @each $var, $val in $sidebar { #{--sidebar}-#{$var}: $val; } - --editor-width: calc( - var(--sidebar-width) + var(--panel-width) + 1px - ); // +1px for border + --editor-width: calc(var(--sidebar-width) + var(--panel-width) + 1px); // +1px for border } @mixin heading($type: 'base') { @@ -195,22 +200,22 @@ @mixin animate($type: 'fade-in', $time: 1s, $delay: 0s) { @if $type == 'fade-in' { - @extend .animate--fade-in; + @extend %animate--fade-in; animation-duration: $time; animation-delay: $delay; } @if $type == 'fade-out' { - @extend .animate--fade-out; + @extend %animate--fade-out; animation-duration: $time; animation-delay: $delay; } @if $type == 'fsb' { - @extend .animate--fade-and-slide-in-from-bottom; + @extend %animate--fade-and-slide-in-from-bottom; animation-duration: $time; animation-delay: $delay; } @if $type == 'fsbr' { - @extend .animate--fsbr; + @extend %animate--fsbr; animation-duration: $time; animation-delay: $delay; } diff --git a/src/styles/_movement.scss b/src/styles/_movement.scss index 624f1f6fc..98a04f630 100644 --- a/src/styles/_movement.scss +++ b/src/styles/_movement.scss @@ -41,7 +41,8 @@ } } -.animate { +.animate, +%animate { &--fade-in { opacity: 0; animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); @@ -53,8 +54,7 @@ &--fade-and-slide-in-from-bottom { opacity: 0; transform: translateY(20px); - animation: fade-and-slide-in-from-bottom 0.1s forwards - cubic-bezier(0.19, 1, 0.22, 1); + animation: fade-and-slide-in-from-bottom 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); } &--fsbr { opacity: 1; diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss index 572fd00bb..df01fb752 100644 --- a/src/styles/components/_main.scss +++ b/src/styles/components/_main.scss @@ -1,4 +1,4 @@ -@import 'sidebar/main'; -@import 'containers/main'; -@import 'fields/main'; -@import 'widgets/main'; +@use 'sidebar/main'; +@use 'containers/main' as main2; +@use 'fields/main' as main3; +@use 'widgets/main' as main4; diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index 5876e41b5..c7023af55 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -1,3 +1,6 @@ +@use 'sass:math'; +@use '../../variables/main' as *; + .fold { width: 100%; user-select: none; @@ -53,7 +56,7 @@ } &__title { - margin-left: var(--spacing-half-unit) / 3; + margin-left: calc(var(--spacing-half-unit) / 3); font-size: var(--font-size-medium); line-height: var(--font-size-medium); font-weight: var(--font-weight-semibold); @@ -108,7 +111,9 @@ opacity: 1; } &--disabled { - @extend .fold__top__moving-controls--up; + height: 13px; + width: 18px; + display: block; svg { transform: rotate(-180deg); transform-origin: center center; @@ -129,7 +134,10 @@ opacity: 1; } &--disabled { - @extend .fold__top__moving-controls--down; + height: 13px; + width: 18px; + display: block; + margin-top: -2px; svg { opacity: 0.3; } diff --git a/src/styles/components/containers/_info.scss b/src/styles/components/containers/_info.scss index 67ddf9f26..194fdccc1 100644 --- a/src/styles/components/containers/_info.scss +++ b/src/styles/components/containers/_info.scss @@ -1,8 +1,10 @@ +@use '../../mixins' as *; + .info { &__title { @include heading('small'); - padding: var(--spacing-half-unit) var(--spacing-half-unit) - var(--spacing-quarter-unit) var(--spacing-half-unit); + padding: var(--spacing-half-unit) var(--spacing-half-unit) var(--spacing-quarter-unit) + var(--spacing-half-unit); } &__text { padding: var(--spacing-quarter-unit) var(--spacing-half-unit); @@ -17,7 +19,7 @@ font-weight: var(--font-weight-normal); font-style: italic; line-height: var(--font-leading-body); - padding: var(--spacing-quarter-unit) var(--spacing-half-unit) - var(--spacing-half-unit) var(--spacing-half-unit); + padding: var(--spacing-quarter-unit) var(--spacing-half-unit) var(--spacing-half-unit) + var(--spacing-half-unit); } } diff --git a/src/styles/components/containers/_main.scss b/src/styles/components/containers/_main.scss index 52459fdb7..f0e4bb9ec 100644 --- a/src/styles/components/containers/_main.scss +++ b/src/styles/components/containers/_main.scss @@ -1,8 +1,8 @@ -@import 'panel'; -@import 'fold'; -@import 'section'; -@import 'menupanel'; -@import 'info'; -@import 'modalbox'; -@import 'modal'; -@import 'tabs'; +@use 'panel'; +@use 'fold'; +@use 'section'; +@use 'menupanel'; +@use 'info'; +@use 'modalbox'; +@use 'modal'; +@use 'tabs'; diff --git a/src/styles/components/containers/_modal.scss b/src/styles/components/containers/_modal.scss index c0de073bc..70bf39b95 100644 --- a/src/styles/components/containers/_modal.scss +++ b/src/styles/components/containers/_modal.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + .modal { box-sizing: border-box; * { diff --git a/src/styles/components/containers/_modalbox.scss b/src/styles/components/containers/_modalbox.scss index c8d7d412e..ea239e245 100644 --- a/src/styles/components/containers/_modalbox.scss +++ b/src/styles/components/containers/_modalbox.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + .modalbox { position: absolute; border-radius: var(--border-radius); diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss index 25b80503a..8c3aa37d9 100644 --- a/src/styles/components/containers/_panel.scss +++ b/src/styles/components/containers/_panel.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + .panel { flex-grow: 1; overflow-x: hidden; @@ -14,7 +16,7 @@ // These are for the first panel background-color: var(--panel-background); border-right: var(--border-default); - width: calc(var(--panel-width)); + width: var(--panel-width); } &__content { flex-grow: 1; @@ -61,7 +63,7 @@ padding: var(--spacing-half-unit); background-color: var(--panel-background); box-sizing: border-box; - @include z-index(orbit); + @include z-index(floor); display: flex; &__message { text-align: center; diff --git a/src/styles/components/containers/_section.scss b/src/styles/components/containers/_section.scss index e3e23fb2b..769c7435e 100644 --- a/src/styles/components/containers/_section.scss +++ b/src/styles/components/containers/_section.scss @@ -11,13 +11,13 @@ clear: both; text-transform: capitalize; } - &:not(:first-child){ + &:not(:first-child) { .section__heading { border-top: var(--border-light); } } - &:first-child{ - .section__heading{ + &:first-child { + .section__heading { border-top: 0; } } diff --git a/src/styles/components/containers/_tabs.scss b/src/styles/components/containers/_tabs.scss index aafecdc1e..0db06dc4a 100644 --- a/src/styles/components/containers/_tabs.scss +++ b/src/styles/components/containers/_tabs.scss @@ -8,7 +8,7 @@ &-list { background: var(--color-background-medium); margin: 0; - flex-shrink:0; + flex-shrink: 0; list-style: none; display: flex; align-items: flex-end; @@ -20,7 +20,7 @@ } // Tab Styles flex-grow: 1; - flex-shrink:0; + flex-shrink: 0; display: flex; align-items: center; justify-content: center; @@ -41,7 +41,6 @@ border-top-right-radius: var(--border-radius); } - &:hover { background-color: var(--color-background-base); cursor: pointer; diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index 5250aa280..268696274 100644 --- a/src/styles/components/fields/_field.scss +++ b/src/styles/components/fields/_field.scss @@ -101,14 +101,6 @@ } } -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .field { - &__widget { - flex-basis: auto; - } - } -} - .field .field { border-top: none; .field__no-title { diff --git a/src/styles/components/fields/_main.scss b/src/styles/components/fields/_main.scss index 3c7187a9b..a5a41be26 100644 --- a/src/styles/components/fields/_main.scss +++ b/src/styles/components/fields/_main.scss @@ -1,2 +1,2 @@ -@import 'field'; -@import 'symbolselector'; +@use 'field'; +@use 'symbolselector'; diff --git a/src/styles/components/fields/_symbolselector.scss b/src/styles/components/fields/_symbolselector.scss index f98d64e49..c741a54ec 100644 --- a/src/styles/components/fields/_symbolselector.scss +++ b/src/styles/components/fields/_symbolselector.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + .symbol-selector__toggle { border: var(--border-default); border-radius: var(--border-radius); diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index b7b2ec987..7c5b8941e 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/src/styles/components/sidebar/_main.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + .sidebar { user-select: none; height: 100%; @@ -12,7 +14,6 @@ border-right: var(--border-default); flex-grow: 1; @include scrollbar(0px); - -ms-overflow-style: none; &__group { background-color: var(--sidebar-group-background-base); diff --git a/src/styles/components/widgets/_button.scss b/src/styles/components/widgets/_button.scss index a7a081d51..ac4f47785 100644 --- a/src/styles/components/widgets/_button.scss +++ b/src/styles/components/widgets/_button.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + // button default styles button { display: inline-block; diff --git a/src/styles/components/widgets/_checkbox.scss b/src/styles/components/widgets/_checkbox.scss index 61463e23b..5b92c7d28 100644 --- a/src/styles/components/widgets/_checkbox.scss +++ b/src/styles/components/widgets/_checkbox.scss @@ -1,3 +1,5 @@ +@use '../../variables/main' as *; + .checkbox { &__group { text-align: left; diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index cf4f35cd8..9a301ae6b 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -29,11 +29,6 @@ $text-padding: 5px; .colorscalePickerContainer input:focus { outline: none; } -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .colorscalePickerContainer { - display: inline; - } -} .colorscalePickerContainer::-webkit-scrollbar { width: 5px; } diff --git a/src/styles/components/widgets/_datetimepicker.scss b/src/styles/components/widgets/_datetimepicker.scss index 327370c74..97b24bbac 100644 --- a/src/styles/components/widgets/_datetimepicker.scss +++ b/src/styles/components/widgets/_datetimepicker.scss @@ -1,3 +1,5 @@ +@use '../../variables/defaults' as *; + .datetimepicker-container { min-width: 176px; min-height: 70px; diff --git a/src/styles/components/widgets/_dropdown.scss b/src/styles/components/widgets/_dropdown.scss index f3a49bd7b..5f40e9e31 100644 --- a/src/styles/components/widgets/_dropdown.scss +++ b/src/styles/components/widgets/_dropdown.scss @@ -47,14 +47,14 @@ } &__clear-indicator { padding: 6px 0; - color: $color-rhino-medium-2; + color: var(--color-rhino-medium-2); &:hover { - color: $color-sienna; + color: var(--color-sienna); } } &__dropdown-indicator { padding: 6px 6px 6px 0; - color: $color-rhino-medium-2; + color: var(--color-rhino-medium-2); &:hover { color: var(--color-border-accent); } @@ -66,7 +66,7 @@ font-weight: 400; } &__multi-value { - background-color: $color-rhino-light-2; + background-color: var(--color-rhino-medium-2); border: var(--border-default); &__label { max-width: 105px; diff --git a/src/styles/components/widgets/_main.scss b/src/styles/components/widgets/_main.scss index e736280f5..6f3b074b3 100644 --- a/src/styles/components/widgets/_main.scss +++ b/src/styles/components/widgets/_main.scss @@ -1,14 +1,14 @@ -@import 'button'; -@import 'checkbox'; -@import 'colorpicker'; -@import 'colorscalepicker'; -@import 'dropdown'; -@import 'numeric-input'; -@import 'text-input'; -@import 'radio-block'; -@import 'text-editor'; -@import 'rangeslider'; -@import 'trace-type-selector'; -@import 'dropzone'; -@import 'microtip'; -@import 'datetimepicker'; +@use 'button'; +@use 'checkbox'; +@use 'colorpicker'; +@use 'colorscalepicker'; +@use 'dropdown'; +@use 'numeric-input'; +@use 'text-input'; +@use 'radio-block'; +@use 'text-editor'; +@use 'rangeslider'; +@use 'trace-type-selector'; +@use 'dropzone'; +@use 'microtip'; +@use 'datetimepicker'; diff --git a/src/styles/components/widgets/_microtip.scss b/src/styles/components/widgets/_microtip.scss index aed5dee57..5b67acf37 100644 --- a/src/styles/components/widgets/_microtip.scss +++ b/src/styles/components/widgets/_microtip.scss @@ -31,8 +31,7 @@ opacity: 0; pointer-events: none; transition: all var(--microtip-transition-duration, 0.18s) - var(--microtip-transition-easing, ease-in-out) - var(--microtip-transition-delay, 0s); + var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); position: absolute; box-sizing: border-box; z-index: 10; @@ -45,7 +44,7 @@ } [aria-label][role~='tooltip']::after { - background: $color-rhino-dark; + background: var(--color-rhino-dark); border-radius: 4px; color: #ffffff; content: attr(aria-label); diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index 0e4ab6b7d..caccd5693 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -6,10 +6,6 @@ /* Firefox 19+ */ color: var(--color-text-placeholder); } -:-ms-input-placeholder { - /* IE 10+ */ - color: var(--color-text-placeholder); -} :-moz-placeholder { /* Firefox 18- */ color: var(--color-text-placeholder); @@ -24,12 +20,6 @@ color: var(--color-text-base); } -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .numeric-input__wrapper { - flex-basis: auto; - } -} - .numeric-input__number { display: inline-block; border: var(--border-default); diff --git a/src/styles/components/widgets/_radio-block.scss b/src/styles/components/widgets/_radio-block.scss index 762ee0af8..bb4804f92 100644 --- a/src/styles/components/widgets/_radio-block.scss +++ b/src/styles/components/widgets/_radio-block.scss @@ -26,7 +26,8 @@ cursor: default; text-shadow: var(--text-shadow-dark-ui); font-weight: var(--font-weight-semibold); - &:not(:first-child), &:last-child { + &:not(:first-child), + &:last-child { border-left: var(--border-accent-shade) !important; } } diff --git a/src/styles/components/widgets/_rangeslider.scss b/src/styles/components/widgets/_rangeslider.scss index 3bdc9b54c..7976cb77b 100644 --- a/src/styles/components/widgets/_rangeslider.scss +++ b/src/styles/components/widgets/_rangeslider.scss @@ -1,17 +1,17 @@ /** * Rangeslider */ +@use 'sass:math'; + .rangeslider { margin: 0 var(--spacing-quarter-unit); min-width: 60px; position: relative; background: var(--color-background-light); - -ms-touch-action: none; touch-action: none; border: 1px solid var(--color-border-default); flex-grow: 1; - &, .rangeslider__fill { display: block; @@ -73,8 +73,8 @@ } .rangeslider__handle { $size: 20px; - width: $size/3; - height: $size*1.5; + width: math.div($size, 3); + height: $size * 1.5; border-radius: $size; top: 50%; transform: translate3d(-50%, -50%, 0); @@ -84,9 +84,9 @@ &:after { content: ' '; position: absolute; - width: $size/5; + width: $size * 0.2; height: $size; - border-radius: $size/4; + border-radius: $size * 0.25; background-color: var(--color-accent); display: none; } diff --git a/src/styles/components/widgets/_text-editor.scss b/src/styles/components/widgets/_text-editor.scss index ea605ce5d..7f7449e7d 100644 --- a/src/styles/components/widgets/_text-editor.scss +++ b/src/styles/components/widgets/_text-editor.scss @@ -1,3 +1,5 @@ +@use '../../mixins' as *; + // GENERAL TEXT EDITOR STYLES .text-editor { * { @@ -101,7 +103,7 @@ } } &__content__wrapper { - &__rich_text{ + &__rich_text { flex-grow: 1; display: flex; flex-direction: column; diff --git a/src/styles/components/widgets/_text-input.scss b/src/styles/components/widgets/_text-input.scss index af36941d3..5f250ea13 100644 --- a/src/styles/components/widgets/_text-input.scss +++ b/src/styles/components/widgets/_text-input.scss @@ -6,10 +6,6 @@ /* Firefox 19+ */ color: var(--color-text-placeholder); } -:-ms-input-placeholder { - /* IE 10+ */ - color: var(--color-text-placeholder); -} :-moz-placeholder { /* Firefox 18- */ color: var(--color-text-placeholder); diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss index 6a77f6288..0f278bff8 100644 --- a/src/styles/components/widgets/_trace-type-selector.scss +++ b/src/styles/components/widgets/_trace-type-selector.scss @@ -1,3 +1,6 @@ +@use '../../variables/defaults' as *; +@use '../../mixins' as *; + $item-size: 90px; $image-size: 60px; $label-height: 34px; @@ -26,52 +29,6 @@ $row-height: $image-size + $label-height + $default-half-spacing-unit + flex-shrink: 0; flex-grow: 0; - &:nth-of-type(4n + 3) { - -ms-grid-column: 1; - } - &:nth-of-type(4n) { - -ms-grid-column: 2; - } - &:nth-of-type(4n + 1) { - -ms-grid-column: 3; - } - &:nth-of-type(4n + 2) { - -ms-grid-column: 4; - } - &:nth-of-type(3), - &:nth-of-type(4), - &:nth-of-type(5), - &:nth-of-type(6) { - -ms-grid-row: 2; - } - &:nth-of-type(7), - &:nth-of-type(8), - &:nth-of-type(9), - &:nth-of-type(10) { - -ms-grid-row: 3; - } - - .trace-item { - &:nth-of-type(2n + 1) { - -ms-grid-column: 1; - } - &:nth-of-type(2n + 2) { - -ms-grid-column: 2; - } - &:nth-of-type(3), - &:nth-of-type(4) { - -ms-grid-row: 2; - } - &:nth-of-type(5), - &:nth-of-type(6) { - -ms-grid-row: 3; - } - &:nth-of-type(7), - &:nth-of-type(8) { - -ms-grid-row: 4; - } - } - &:not(:first-of-type) { position: relative; &::before { @@ -94,52 +51,6 @@ $row-height: $image-size + $label-height + $default-half-spacing-unit + grid-column: span 2; flex-grow: 0; - &:nth-of-type(2n + 1) { - -ms-grid-column: 1; - } - &:nth-of-type(2n + 2) { - -ms-grid-column: 3; - } - &:nth-of-type(5), - &:nth-of-type(6) { - -ms-grid-row: 2; - } - &:nth-of-type(7), - &:nth-of-type(8) { - -ms-grid-row: 3; - } - - .trace-item { - &:nth-of-type(4n + 1) { - -ms-grid-column: 1; - } - &:nth-of-type(4n + 2) { - -ms-grid-column: 2; - } - &:nth-of-type(4n + 3) { - -ms-grid-column: 3; - } - &:nth-of-type(4n) { - -ms-grid-column: 4; - } - &:nth-of-type(3), - &:nth-of-type(4) { - -ms-grid-row: 1; - } - &:nth-of-type(5), - &:nth-of-type(6), - &:nth-of-type(7), - &:nth-of-type(8) { - -ms-grid-row: 2; - } - &:nth-of-type(9), - &:nth-of-type(10), - &:nth-of-type(11), - &:nth-of-type(12) { - -ms-grid-row: 3; - } - } - .trace-grid__column__items { display: grid; grid-gap: 0; diff --git a/src/styles/main.scss b/src/styles/main.scss index e1479c036..9918d43ae 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,21 +1,18 @@ @charset 'utf-8'; -@import 'variables/main'; -@import 'mixins'; -@import 'helpers'; -@import 'movement'; +@use 'sass:meta'; +@use 'variables/main'; +@use 'mixins'; +@use 'helpers'; +@use 'movement'; +@use 'variables/colors'; +@use 'variables/layout'; :root { --env: $ENV; } -@if $ENV == 'ie' { - :root { - @include generateVars; - } -} @else { - .plotly-editor--theme-provider { - @include generateVars; - } +.plotly-editor--theme-provider { + @include mixins.generateVars; } .editor_controls { @@ -24,15 +21,15 @@ flex-shrink: 0; overflow: hidden; display: flex; - @import 'components/main'; - @include font-smoothing; + @include meta.load-css('components/main'); + @include mixins.font-smoothing; font-family: var(--font-family-body); &__wrapper { display: flex; flex-grow: 1; } a { - color: $color-dodger-shade; + color: colors.$color-dodger-shade; cursor: pointer; } } diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss index 982a02b17..c93e2599f 100644 --- a/src/styles/variables/_colors.scss +++ b/src/styles/variables/_colors.scss @@ -55,5 +55,5 @@ $colors: ( lavender-shade-mid: $color-lavender-shade-mid, cornflower: $color-cornflower, emerald: $color-emerald, - sienna: $color-sienna + sienna: $color-sienna, ); diff --git a/src/styles/variables/_defaults.scss b/src/styles/variables/_defaults.scss index 59ef363f5..38e65ab33 100644 --- a/src/styles/variables/_defaults.scss +++ b/src/styles/variables/_defaults.scss @@ -1,6 +1,6 @@ -@import './colors'; -@import './typography'; -@import './units'; -@import './layout'; -@import './theme'; +@forward 'colors'; +@forward 'typography'; +@forward 'units'; +@forward 'layout'; +@forward 'theme'; $ENV: 'default' !default; diff --git a/src/styles/variables/_layout.scss b/src/styles/variables/_layout.scss index 6b979a210..263a51f5f 100644 --- a/src/styles/variables/_layout.scss +++ b/src/styles/variables/_layout.scss @@ -1,5 +1,8 @@ /* * Layout */ -$layout-panel-width: 335px; -$layout-sidebar-width: 100px; + +:root { + --layout-panel-width: 335px; + --layout-sidebar-width: 100px; +} diff --git a/src/styles/variables/_main.scss b/src/styles/variables/_main.scss index 6a54e9c71..c7696a5d6 100644 --- a/src/styles/variables/_main.scss +++ b/src/styles/variables/_main.scss @@ -1,9 +1,9 @@ -@import 'defaults'; +@use 'defaults'; +@use 'typography'; /* * Typography */ - $font-weight-light: var(--font-weight-light); $font-weight-normal: var(--font-weight-normal); $font-weight-semibold: var(--font-weight-semibold); @@ -15,7 +15,6 @@ $h5-size: var(--font-size-h5); /* * SPACING */ - $base-spacing-unit: var(--spacing-base-unit); $half-spacing-unit: var(--spacing-half-unit); $quarter-spacing-unit: var(--spacing-quarter-unit); @@ -26,8 +25,6 @@ $eighth-spacing-unit: var(--spacing-eighth-unit); * BORDERS */ - - /* * Typography */ diff --git a/src/styles/variables/_theme.scss b/src/styles/variables/_theme.scss index e7fdcfa33..d2dbd8a97 100644 --- a/src/styles/variables/_theme.scss +++ b/src/styles/variables/_theme.scss @@ -1,16 +1,16 @@ -// --------------------------------------------------------------------------------------------------------------------- +// ------------------------------------------------------------------------------------------------ // _theme.scss -// This file maps out any variables that we use for theming the editor. These SCSS maps are parsed and result in -// custom css properties / css4 variables. -// --------------------------------------------------------------------------------------------------------------------- +// This file maps out any variables that we use for theming the editor. +// These SCSS maps are parsed and result in custom css properties / css4 variables. +// ------------------------------------------------------------------------------------------------ // Brand Colors $brand: ( - accent:var(--color-dodger), - accent-shade:var(--color-dodger-shade), - accent-shade-mid:var(--color-dodger-shade-mid), + accent: var(--color-dodger), + accent-shade: var(--color-dodger-shade), + accent-shade-mid: var(--color-dodger-shade-mid), brand: var(--color-dodger), - hightlight-darker: var(--color-gray-blue-pale) + hightlight-darker: var(--color-gray-blue-pale), ); // Text Colors $text: ( @@ -20,7 +20,7 @@ $text: ( text-headings: var(--color-text-dark), text-section-header: var(--color-text-dark), text-active: var(--color-rhino-core), - text-placeholder: var(--color-rhino-medium-1) + text-placeholder: var(--color-rhino-medium-1), ); // Border Colors $border-colors: ( @@ -28,17 +28,17 @@ $border-colors: ( light: var(--color-rhino-light-1), dark: var(--color-rhino-medium-1), accent: var(--color-accent), - accent-shade: var(--color-accent-shade) + accent-shade: var(--color-accent-shade), ); // Border styles $borders: ( - default:1px solid var(--color-border-default), - light:1px solid var(--color-border-light), - dark:1px solid var(--color-border-dark), - accent:1px solid var(--color-border-accent), - accent-shade:1px solid var(--color-border-accent-shade), + default: 1px solid var(--color-border-default), + light: 1px solid var(--color-border-light), + dark: 1px solid var(--color-border-dark), + accent: 1px solid var(--color-border-accent), + accent-shade: 1px solid var(--color-border-accent-shade), radius: 5px, - radius-small: 3px + radius-small: 3px, ); $fills: ( background: var(--color-rhino-light-2), @@ -48,140 +48,140 @@ $fills: ( background-dark: var(--color-rhino-medium-1), background-top: var(--color-white), background-inverse: var(--color-rhino-dark), - background-inputs: var(--color-background-top) + background-inputs: var(--color-background-top), ); $box-shadows: ( base-color: rgba(80, 103, 132, 0.2), - base: 0px 2px 9px var(--box-shadow-base-color) + base: 0px 2px 9px var(--box-shadow-base-color), ); $text-shadows: ( - dark-color:rgba(42, 63, 95, 0.7), + dark-color: rgba(42, 63, 95, 0.7), dark-ui: 0 1px 2px var(--text-shadow-dark-color), - dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4) + dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4), ); $scrollbar: ( track-background: var(--color-background-base), - thumb-color: var(--color-accent) + thumb-color: var(--color-accent), ); // Panel Styles + Colors $panel: ( background: var(--color-background-base), - width: $layout-panel-width + width: var(--layout-panel-width), ); // Sidebar $sidebar: ( background: var(--color-background-top), - width: $layout-sidebar-width, + width: var(--layout-sidebar-width), group-background-base: var(--sidebar-background), - item-background-base:var(--color-background-light), + item-background-base: var(--color-background-light), item-background-hover: var(--color-background-base), - item-background-active: var(--color-background-medium) + item-background-active: var(--color-background-medium), ); $fold: ( header-text-color-base: var(--color-white), header-text-color-closed: var(--color-white), - header-background-base:var(--color-rhino-dark), - header-background-closed:var(--color-rhino-core), - header-border-color-closed:var(--color-rhino-core), - header-border-color-base:var(--color-rhino-dark) + header-background-base: var(--color-rhino-dark), + header-background-closed: var(--color-rhino-core), + header-border-color-closed: var(--color-rhino-core), + header-border-color-base: var(--color-rhino-dark), ); // Buttons $buttons: ( - primary-base:( - fill: var(--color-accent), - border: var(--color-accent-shade), - text: var(--color-white) - ), - primary-hover:( - fill: var(--color-accent-shade-mid), - border: var(--color-accent-shade), - text: var(--color-white) - ), - primary-active:( - fill: var(--color-accent-shade), - border: var(--color-accent-shade), - text: var(--color-white) - ), - secondary-base:( - fill: transparent, - border: var(--color-rhino-medium-2), - text: var(--color-text-base) - ), - secondary-hover:( - fill: transparent, - border: var(--color-rhino-medium-1), - text: var(--color-text-dark) - ), - secondary-active:( - fill: transparent, - border: var(--color-rhino-medium-1), - text: var(--color-text-dark) - ), - tertiary-base:( - fill: transparent, - border: transparent, - text: var(--color-text-base) - ), - tertiary-hover:( - fill: transparent, - border: transparent, - text: var(--color-text-dark) - ), - tertiary-active:( - fill: transparent, - border: transparent, - text: var(--color-text-dark) - ), - default-base:( - fill: var(--color-background-light), - border: var(--color-border-default), - text: var(--color-text-base) - ), - default-hover:( - fill: var(--color-background-base), - border: var(--color-border-dark), - text: var(--color-text-dark) - ), - default-active:( - fill: var(--color-background-dark), - border: var(--color-border-dark), - text: var(--color-text-dark) - ), - upgrade-base:( - fill: var(--color-lavender-shade), - border: var(--color-lavender-shade-dark), - text: var(--color-white) - ), - upgrade-hover:( - fill: var(--color-lavender-shade-mid), - border: var(--color-lavender-shade-dark), - text: var(--color-white) - ), - upgrade-active:( - fill: var(--color-lavender-shade-dark), - border: var(--color-lavender-shade-dark), - text: var(--color-white) - ), - header-base:( - fill: transparent, - border: var(--color-dodger), - text: var(--color-dodger) - ), - header-hover:( - fill: transparent, - border: var(--color-dodger-shade-mid), - text: var(--color-dodger-shade) - ), - header-active:( - fill: transparent, - border: var(--color-dodger-shade), - text: var(--color-dodger-shade) - ) + primary-base: ( + fill: var(--color-accent), + border: var(--color-accent-shade), + text: var(--color-white), + ), + primary-hover: ( + fill: var(--color-accent-shade-mid), + border: var(--color-accent-shade), + text: var(--color-white), + ), + primary-active: ( + fill: var(--color-accent-shade), + border: var(--color-accent-shade), + text: var(--color-white), + ), + secondary-base: ( + fill: transparent, + border: var(--color-rhino-medium-2), + text: var(--color-text-base), + ), + secondary-hover: ( + fill: transparent, + border: var(--color-rhino-medium-1), + text: var(--color-text-dark), + ), + secondary-active: ( + fill: transparent, + border: var(--color-rhino-medium-1), + text: var(--color-text-dark), + ), + tertiary-base: ( + fill: transparent, + border: transparent, + text: var(--color-text-base), + ), + tertiary-hover: ( + fill: transparent, + border: transparent, + text: var(--color-text-dark), + ), + tertiary-active: ( + fill: transparent, + border: transparent, + text: var(--color-text-dark), + ), + default-base: ( + fill: var(--color-background-light), + border: var(--color-border-default), + text: var(--color-text-base), + ), + default-hover: ( + fill: var(--color-background-base), + border: var(--color-border-dark), + text: var(--color-text-dark), + ), + default-active: ( + fill: var(--color-background-dark), + border: var(--color-border-dark), + text: var(--color-text-dark), + ), + upgrade-base: ( + fill: var(--color-lavender-shade), + border: var(--color-lavender-shade-dark), + text: var(--color-white), + ), + upgrade-hover: ( + fill: var(--color-lavender-shade-mid), + border: var(--color-lavender-shade-dark), + text: var(--color-white), + ), + upgrade-active: ( + fill: var(--color-lavender-shade-dark), + border: var(--color-lavender-shade-dark), + text: var(--color-white), + ), + header-base: ( + fill: transparent, + border: var(--color-dodger), + text: var(--color-dodger), + ), + header-hover: ( + fill: transparent, + border: var(--color-dodger-shade-mid), + text: var(--color-dodger-shade), + ), + header-active: ( + fill: transparent, + border: var(--color-dodger-shade), + text: var(--color-dodger-shade), + ), ); $theme: ( buttons: $buttons, panel: $panel, - sidebar: $sidebar + sidebar: $sidebar, ); diff --git a/src/styles/variables/_typography.scss b/src/styles/variables/_typography.scss index 270654b68..73484166a 100644 --- a/src/styles/variables/_typography.scss +++ b/src/styles/variables/_typography.scss @@ -9,29 +9,39 @@ $font-size-large: 14px; $h5-size: 16px; $font: ( - size: - ( - base: $font-size, - small: $font-size-small, - medium:$font-size-medium, - large:$font-size-large, - heading-base: 24px, - heading-small: 18px, - heading-large: 28px, - h5: 16px + size: ( + base: $font-size, + small: $font-size-small, + medium: $font-size-medium, + large: $font-size-large, + heading-base: 24px, + heading-small: 18px, + heading-large: 28px, + h5: 16px, + ), + weight: ( + light: $font-weight-light, + normal: $font-weight-normal, + semibold: $font-weight-semibold, + bold: $font-weight-bold, + ), + leading: ( + body: 1.6, + head: 1.2, + ), + letter-spacing: ( + headings: 0.5px, + ), + family: ( + body: ( + 'Open Sans', + --apple-default, + sans-serif, ), - weight: - ( - light: $font-weight-light, - normal: $font-weight-normal, - semibold: $font-weight-semibold, - bold: $font-weight-bold + headings: ( + 'Dosis', + 'Arial', + sans-serif, ), - leading: (body: 1.6, head: 1.2), - letter-spacing: (headings: 0.5px), - family: - ( - body: ('Open Sans', --apple-default, sans-serif), - headings: ('Dosis', 'Arial', sans-serif) - ) + ), ); diff --git a/src/styles/variables/_units.scss b/src/styles/variables/_units.scss index f742d19da..915726fd3 100644 --- a/src/styles/variables/_units.scss +++ b/src/styles/variables/_units.scss @@ -6,12 +6,10 @@ $default-quarter-spacing-unit: 6px; $default-sixth-spacing-unit: 4px; $default-eighth-spacing-unit: 3px; - $spacing: ( - base-unit: 24px, - half-unit: 12px, - quarter-unit: 6px, - sixth-unit: 4px, - eighth-unit: 3px + base-unit: 24px, + half-unit: 12px, + quarter-unit: 6px, + sixth-unit: 4px, + eighth-unit: 3px, ); - diff --git a/webpack.config.js b/webpack.config.js index 37a423049..3e5f07367 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,36 +1,15 @@ const webpack = require('webpack'); -module.exports = { - entry: ['@babel/polyfill', 'react-hot-loader/patch', './dev/index.js'], +module.exports = () => ({ + entry: ['react-hot-loader/patch', './dev/index.js'], output: { filename: 'bundle.js', }, - mode: 'development', module: { rules: [ { test: /\.js?$/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/react', '@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', - }, - }, - ], - ], - }, - }, + use: 'babel-loader', exclude: [/node_modules/], }, { @@ -44,10 +23,12 @@ module.exports = { 'react-dom': '@hot-loader/react-dom', }, }, - plugins: [new webpack.IgnorePlugin(/vertx/)], + plugins: [new webpack.IgnorePlugin({resourceRegExp: /vertx/})], devServer: { - open: true, - contentBase: './dev', + open: false, + static: './dev', + client: {overlay: {errors: true, warnings: false}}, }, devtool: 'eval-source-map', -}; + target: 'browserslist', +});