Add readme documentation

Author: rreusser

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Plotly, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,25 +1,60 @@
-# plotly.js-react
+# react-plotly.js
 
-> A React component for plotly.js charts <a href="https://z8tgespzmd63w51brzdh360ryvgt3m1ho.netlify.com/">&rarr; See demo</a>
+> A [plotly.js](https://github.com/plotly/plotly.js) react component from [Plotly](https://plot.ly/)
 
 ## Installation
 
-Not yet published
-
 ```bash
-$ npm install plotly.js-react
+$ npm install react-plotly.js plotly.js
 ```
 
 ## Usage
 
-The component definition is created by dependency injection so that you can use whichever version of plotly.js you'd like, including the [CDN versions](https://plot.ly/javascript/getting-started/#plotlyjs-cdn).
+### With bundled `plotly.js`
+
+[`plotly.js`](https://github.com/plotly/plotly.js) is a peer dependency of `react-plotly.js`. If you would like to bundle `plotly.js` with the rest of your project, you must install it separately.
+
+```bash
+$ npm install -S react-plotly.js plotly.js
+```
+
+Since `plotly.js` is a peer dependency, you do not need to require it separately to use it.
+
+```javascript
+import Plot from 'react-plotly.js'
+
+render () {
+  return <Plot 
+    data={...}
+    layout={...}
+    frames={...}
+    config={...}
+  />
+}
+```
+
+### With external `plotly.js`
+
+If you wish to use a version of `plotly.js` that is not bundled with the rest of your project, whether a [CDN versions](https://plot.ly/javascript/getting-started/#plotlyjs-cdn) or through a [static distribution bundle](https://github.com/plotly/plotly.js/tree/master/dist), you may skip installing `plotly.js` and ignore the peer dependency warning.
+
+```bash
+$ npm install -S react-plotly.js
+```
+
+Given perhaps a script tag that has loaded a CDN version of plotly.js,
+
+```html
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+```
+
+you may then inject Plotly and use the returned React component:
 
 ```javascript
-const createPlotlyComponent = require('plotly.js-react');
-const PlotlyComponent = createPlotlyComponent(Plotly);
+import plotComponentFactory from 'react-plotly.js/factory'
+const Plot = plotComponentFactory(Plotly);
 
 render () {
-  <PlotlyComponent
+  return <Plot
     data={...}
     layout={...}
     frames={...}
@@ -28,7 +63,8 @@ render () {
 }
 ```
 
-The only requirement is that plotly.js is loaded before you inject it. You may need to use a module like [load-script](https://www.npmjs.com/package/load-script) to ensure it's available.
+You must ensure `Plotly` is available before your React app tries to render the component. That could mean perhaps using script tag (without `async` or `defer`) or a utility like [load-script](https://www.npmjs.com/package/load-script).
+
 
 ## API
 
@@ -48,6 +84,8 @@ The only requirement is that plotly.js is loaded before you inject it. You may n
 
 ### Event handler props
 
+Event handlers for [`plotly.js` events](https://plot.ly/javascript/plotlyjs-events/) may be attached through the following props.
+
 | Prop | Type | Plotly Event |
 | ---- | ---- | ----------- |
 | `onAfterExport` | `Function` | `plotly_afterexport` |
@@ -88,12 +126,14 @@ $ npm start
 To build the dist version:
 
 ```bash
-$ npm run prepublish
+$ npm run prepublishOnly
 ```
 
-## See also
+To run the tests:
 
-- [plotly-react-editor](https://github.com/plotly/plotly-react-editor)
+```bash
+$ npm run test
+```
 
 ## License
 

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "description": "A plotly.js react component from Plotly",
   "author": "Plotly, Inc.",
-  "main": "lib/react-plotly.js",
+  "main": "react-plotly.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/plotly/react-plotly.js.git"
@@ -19,7 +19,7 @@
     "example:build:assets": "rm -rf example/dist/assets && cp -r example/assets example/dist/assets",
     "example:build": "rm -rf example/dist && mkdir -p example/dist && npm run example:build:html && npm run example:build:js && npm run example:build:assets",
     "example:deploy": "netlify deploy example/dist",
-    "make:lib": "mkdir -p lib && babel src/react-plotly.js -o lib/react-plotly.js --presets=es2015,react --source-maps --plugins babel-plugin-add-module-exports",
+    "make:lib": "babel src/*.js --out-dir=./ --presets=es2015,react --source-maps --plugins babel-plugin-add-module-exports",
     "make:build": "mkdir -p build && browserify src/react-plotly.js -o ./build/react-plotly.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./build/react-plotly.js --compress --mangle --output ./build/react-plotly.js.min.js --source-map filename=build/react-plotly.js.min.js.map",
     "clean": "rm -rf build lib",
     "prepublishOnly": "npm run make:lib && npm run make:build",

src/__tests__/react-plotly.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import createComponent from "../react-plotly";
+import createComponent from "../factory";
 import once from "onetime";
 
 describe("<Plotly/>", () => {