Rename react-plotly.js-editor to react-chart-editor

README.md

@@ -1,41 +1,41 @@
-# react-plotly.js-editor
+# react-chart-editor
 
 > Customizable React-based editor panel for Plotly charts, Part of Plotly's [React Component Suite](https://plot.ly/products/react/) for building data visualization Web apps and products.
 
 master
-![master](https://circleci.com/gh/plotly/react-plotly.js-editor/tree/master.svg?style=svg&circle-token=df4574e01732846dba81d800d062be5f0fef5641)
+![master](https://circleci.com/gh/plotly/react-chart-editor/tree/master.svg?style=svg&circle-token=df4574e01732846dba81d800d062be5f0fef5641)
 
 ## Demo & Screenshots
 
-Check out the [live demo here](https://plotly.github.io/react-plotly.js-editor/).
+Check out the [live demo here](https://plotly.github.io/react-chart-editor/).
 
 ![gif](examples/editor.gif)
 
 ## Quick start
 
-Check out the demo of the latest release of the `DefaultEditor` at https://plotly.github.io/react-plotly.js-editor/ or run it locally with:
+Check out the demo of the latest release of the `DefaultEditor` at https://plotly.github.io/react-chart-editor/ or run it locally with:
 
 ```
 git clone [this repo]
-cd react-plotly.js-editor
+cd react-chart-editor
 cd examples/simple
 npm install
 npm start
 ```
 
 See more examples
-[here](https://github.com/plotly/react-plotly.js-editor/tree/master/examples).
+[here](https://github.com/plotly/react-chart-editor/tree/master/examples).
 
 ## Overview
 
 This module's entry point is a React component called `<PlotlyEditor />` which connects to a [plotly.js](https://plot.ly/javascript/)-powered `<Plot />` component care of [`react-plotly.js`](https://github.com/plotly/react-plotly.js). A plotly.js plot is defined by a JSON-serializable object called a _figure_. `<PlotlyEditor />` accepts as children React components whose descendents are input elements wrapped via `connectToContainer()` calls so as to bind them to the `<Plot />`'s figure's values. If no children are passed to the `<PlotlyEditor />`, the `<DefaultEditor />` is used. This module also exposes the [building block components](#Built-in-Components) that comprise the `<DefaultEditor />` so that developers can create their own customized editors.
 
 ## Connecting `<PlotlyEditor />` to `<Plot />`
 
-The binding between `<PlotlyEditor />` and `<Plot />` works a little differently that in most React apps because plotly.js mutates its properties. This is mapped onto React's one-way dataflow model via event handlers and shared revision numbers which trigger re-renders of mutated state. The following subset of the [simple example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/simple) shows how this works using a parent component to store state, but the principle is the same with a different state-manage approach, as shown in the [redux example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/redux):
+The binding between `<PlotlyEditor />` and `<Plot />` works a little differently that in most React apps because plotly.js mutates its properties. This is mapped onto React's one-way dataflow model via event handlers and shared revision numbers which trigger re-renders of mutated state. The following subset of the [simple example](https://github.com/plotly/react-chart-editor/tree/master/examples/simple) shows how this works using a parent component to store state, but the principle is the same with a different state-manage approach, as shown in the [redux example](https://github.com/plotly/react-chart-editor/tree/master/examples/redux):
 
 ```javascript
-import PlotlyEditor from 'react-plotly.js-editor';
+import PlotlyEditor from 'react-chart-editor';
 import Plot from 'react-plotly.js';
 
 class App extends Component {
@@ -76,17 +76,17 @@ class App extends Component {
 
 ## Data Management
 
-`<PlotlyEditor />` accepts a `dataSources` property which is an object of arrays of data, as well as a `dataSourceOptions` property which contains metadata about the `dataSources`, such as human-readable labels used to populate input elements like dropdown menus. `<PlotlyEditor />` treats these properties as immutable so any changes to them will trigger a rerender, and accepts an `onUpdateTraces` event handler property which is called whenever it needs to access a column from `dataSources`, enabling asynchronous data loading e.g. from remote APIs. The [async-data example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/async-data) shows how this is done using a dummy asynchronous back-end proxy.
+`<PlotlyEditor />` accepts a `dataSources` property which is an object of arrays of data, as well as a `dataSourceOptions` property which contains metadata about the `dataSources`, such as human-readable labels used to populate input elements like dropdown menus. `<PlotlyEditor />` treats these properties as immutable so any changes to them will trigger a rerender, and accepts an `onUpdateTraces` event handler property which is called whenever it needs to access a column from `dataSources`, enabling asynchronous data loading e.g. from remote APIs. The [async-data example](https://github.com/plotly/react-chart-editor/tree/master/examples/async-data) shows how this is done using a dummy asynchronous back-end proxy.
 
 ## Styling the `<DefaultEditor />` and the built-in components
 
-* Import editor styles with `import react-plotly.js-editor/lib/react-plotly.js-editor.min.css`
-* Interested in [theming](https://github.com/plotly/react-plotly.js-editor/tree/master/THEMING.md)?
-* Need to support IE11? import the IE css instead: `import react-plotly.js-editor/lib/react-plotly.js-editor.ie.min.css`
+* Import editor styles with `import react-chart-editor/lib/react-chart-editor.min.css`
+* Interested in [theming](https://github.com/plotly/react-chart-editor/tree/master/THEMING.md)?
+* Need to support IE11? import the IE css instead: `import react-chart-editor/lib/react-chart-editor.ie.min.css`
 
 ## Development Setup
 
-This repo contains a [dev app](https://github.com/plotly/react-plotly.js-editor/tree/master/dev) that depends on the components locally and is configured for hot reloading, for easy local development. A `jest`-based test suite is also included.
+This repo contains a [dev app](https://github.com/plotly/react-chart-editor/tree/master/dev) that depends on the components locally and is configured for hot reloading, for easy local development. A `jest`-based test suite is also included.
 
 ```
 npm install
@@ -109,7 +109,7 @@ At a pseudo-code level it looks like this:
 </PlotlyEditor>
 ```
 
-The [custom editor example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/custom) shows how to build a custom editor, and shows off all of the general-purpose containers and fields listed below.
+The [custom editor example](https://github.com/plotly/react-chart-editor/tree/master/examples/custom) shows how to build a custom editor, and shows off all of the general-purpose containers and fields listed below.
 
 ### General-purpose Containers
 

THEMING.md

@@ -83,10 +83,10 @@ You can inspect the editor and see a full listing of all variables that you can
 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-plotly.js-editor/lib/react-plotly.js-editor.ie.css` (this stylesheet has the variables attached to the `:root{}` scope).
+ `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-plotly.js-editor/tree/master/scripts/postcss.js).
+ You can see our PostCSS scripts [here](https://github.com/plotly/react-chart-editor/tree/master/scripts/postcss.js).

circle.yml

@@ -5,7 +5,7 @@ jobs:
       # specify the version you desire here
       - image: circleci/node:8.9
 
-    working_directory: ~/react-plotly.js-editor
+    working_directory: ~/react-chart-editor
 
     steps:
       - checkout

dev/App.js

@@ -6,7 +6,7 @@ import PlotlyEditor from '../src';
 import '../src/styles/main.scss';
 import Nav from './Nav';
 
-// https://github.com/plotly/react-plotly.js-editor#mapbox-access-tokens
+// https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
 
 const dataSources = {

examples/README.md

@@ -1,6 +1,6 @@
-# `react-plotly.js-editor` examples
+# `react-chart-editor` examples
 
-* [Simple `react-plotly.js-editor` example](simple): `DefaultEditor`, synchronous data, top-level component state management
-* [Async-data `react-plotly.js-editor` example](async-data): `DefaultEditor`, asynchronous data, top-level component state management
-* [Custom `react-plotly.js-editor` example](custom): `CustomEditor`, synchronous data, top-level component state management
-* [Redux `react-plotly.js-editor` example](redux): `DefaultEditor`, synchronous data, Redux state management
+* [Simple `react-chart-editor` example](simple): `DefaultEditor`, synchronous data, top-level component state management
+* [Async-data `react-chart-editor` example](async-data): `DefaultEditor`, asynchronous data, top-level component state management
+* [Custom `react-chart-editor` example](custom): `CustomEditor`, synchronous data, top-level component state management
+* [Redux `react-chart-editor` example](redux): `DefaultEditor`, synchronous data, Redux state management

examples/custom/README.md

@@ -1,4 +1,4 @@
-# Custom `react-plotly.js-editor` example
+# Custom `react-chart-editor` example
 
 This example built with [`create-react-app`](https://github.com/facebookincubator/create-react-app) uses a [customized editor](src/CustomEditor.js), with synchronously-loaded data and a top-level component for state, so as to demo the customizability of this component.
 

examples/custom/package.json

@@ -6,7 +6,7 @@
     "plotly.js": "^1.32.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-plotly.js-editor": "latest",
+    "react-chart-editor": "latest",
     "react-plotly.js": "^1.2.0",
     "react-scripts": "1.0.17"
   },

examples/custom/src/App.js

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import createPlotComponent from 'react-plotly.js/factory';
-import PlotlyEditor from 'react-plotly.js-editor';
+import PlotlyEditor from 'react-chart-editor';
 import CustomEditor from './CustomEditor';
-import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
+import 'react-chart-editor/lib/react-chart-editor.css';
 
 const dataSources = {
   col1: [1, 2, 3], // eslint-disable-line no-magic-numbers

examples/custom/src/CustomEditor.js

@@ -16,7 +16,7 @@ import {
   Button,
   SingleSidebarItem,
   TraceAccordion,
-} from 'react-plotly.js-editor';
+} from 'react-chart-editor';
 
 export default class CustomEditor extends Component {
   render() {

examples/demo/README.md

@@ -1,4 +1,4 @@
-# Simple `react-plotly.js-editor` example
+# Simple `react-chart-editor` example
 
 This example built with [`create-react-app`](https://github.com/facebookincubator/create-react-app) uses the `DefaultEditor`, with synchronously-loaded data and a top-level component for state, so as to demo the basic functionality of this component.
 

examples/demo/package.json

@@ -6,7 +6,7 @@
     "plotly.js": "^1.32.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-plotly.js-editor": "latest",
+    "react-chart-editor": "latest",
     "react-plotly.js": "^1.2.0",
     "react-scripts": "1.0.17"
   },
@@ -18,7 +18,7 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
-  "homepage": "http://plotly.github.io/react-plotly.js-editor",
+  "homepage": "http://plotly.github.io/react-chart-editor",
   "devDependencies": {
     "gh-pages": "^1.1.0"
   }

examples/demo/src/App.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import createPlotComponent from 'react-plotly.js/factory';
-import PlotlyEditor from 'react-plotly.js-editor';
-import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
+import PlotlyEditor from 'react-chart-editor';
+import 'react-chart-editor/lib/react-chart-editor.css';
 import Nav from './Nav';
 
 const dataSources = {

examples/redux/README.md

@@ -1,4 +1,4 @@
-# Redux `react-plotly.js-editor` example
+# Redux `react-chart-editor` example
 
 This example built with [`create-react-app`](https://github.com/facebookincubator/create-react-app) uses the `DefaultEditor`, with synchronously-loaded data and a [Redux](https://redux.js.org) for state manage, so as to demo the Redux machinery required to.
 

examples/redux/package.json

@@ -7,7 +7,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-plotly.js-editor": "latest",
+    "react-chart-editor": "latest",
     "react-plotly.js": "^1.2.0",
     "react-redux": "^5.0.6",
     "react-scripts": "1.0.17",

examples/redux/src/App.js

@@ -1,5 +1,5 @@
-import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
-import PlotlyEditor from 'react-plotly.js-editor';
+import 'react-chart-editor/lib/react-chart-editor.css';
+import PlotlyEditor from 'react-chart-editor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import createPlotComponent from 'react-plotly.js/factory';

examples/simple/README.md

@@ -1,4 +1,4 @@
-# Simple `react-plotly.js-editor` example
+# Simple `react-chart-editor` example
 
 This example built with [`create-react-app`](https://github.com/facebookincubator/create-react-app) uses the `DefaultEditor`, with synchronously-loaded data and a top-level component for state, so as to demo the basic functionality of this component.
 

examples/simple/package.json

@@ -6,7 +6,7 @@
     "plotly.js": "^1.32.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-plotly.js-editor": "latest",
+    "react-chart-editor": "latest",
     "react-plotly.js": "^1.2.0",
     "react-scripts": "1.0.17"
   },
@@ -16,7 +16,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "homepage": "http://plotly.github.io/react-plotly.js-editor",
+  "homepage": "http://plotly.github.io/react-chart-editor",
   "devDependencies": {
     "gh-pages": "^1.1.0"
   }

examples/simple/src/App.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import createPlotComponent from 'react-plotly.js/factory';
-import PlotlyEditor from 'react-plotly.js-editor';
-import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
+import PlotlyEditor from 'react-chart-editor';
+import 'react-chart-editor/lib/react-chart-editor.css';
 
 const dataSources = {
   col1: [1, 2, 3], // eslint-disable-line no-magic-numbers

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-plotly.js-editor",
+  "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
   "version": "0.10.2",
   "author": "Plotly, Inc.",
   "bugs": {
-    "url": "https://github.com/plotly/react-plotly.js-editor/issues"
+    "url": "https://github.com/plotly/react-chart-editor/issues"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -73,7 +73,7 @@
     "react": ">15",
     "react-dom": ">15"
   },
-  "homepage": "https://plotly.github.io/react-plotly.js-editor/",
+  "homepage": "https://plotly.github.io/react-chart-editor/",
   "jest": {
     "roots": [
       "<rootDir>/src/"
@@ -97,7 +97,7 @@
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/plotly/react-plotly.js-editor.git"
+    "url": "https://github.com/plotly/react-chart-editor.git"
   },
   "scripts": {
     "lint": "prettier --write \"src/**/*.js\"",
@@ -113,7 +113,7 @@
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
     "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
+    "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"
   }
 }

scripts/postcss.js

@@ -10,7 +10,7 @@ const removeRoot = require('postcss-remove-root');
 const SASS_ENV = process.env.SASS_ENV || 'default';
 const BUILD_ENV = process.env.BUILD_ENV || 'lib';
 
-const fileName = `react-plotly.js-editor`;
+const fileName = `react-chart-editor`;
 const dist = `${BUILD_ENV}/${fileName}.css`;
 
 const internetExplorerPostCSS = () => {

scripts/styles.js

@@ -7,7 +7,7 @@ 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-plotly.js-editor`;
+const fileName = `react-chart-editor`;
 const dist =
   SASS_ENV === 'ie'
     ? `${BUILD_ENV}/${fileName}.ie.css`