(doc) add docz documentation

Author: JeanBaptisteWATENBERG

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.docz

doczrc.js

@@ -0,0 +1,12 @@
+import { css } from 'docz-plugin-css';
+import { svgr } from 'docz-plugin-svgr';
+
+export default {
+    themeConfig: {
+        mode: 'dark'
+    },
+    plugins: [
+        svgr(),
+        css()
+    ]
+};

nwb.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  type: 'react-component',
-  npm: {
-    esModules: true,
-    umd: false
-  }
-}
+    type: 'react-component',
+    npm: {
+        esModules: true,
+        umd: false
+    }
+};

package.json

@@ -16,17 +16,23 @@
     "start": "nwb serve-react-demo",
     "test": "nwb test-react",
     "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server"
+    "test:watch": "nwb test-react --server",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build"
   },
   "dependencies": {
     "easy-json-schema": "0.0.2-beta",
     "jsoneditor": "^5.16.0",
-    "jsonpath": "^1.0.0"
+    "jsonpath": "^1.0.0",
+    "prop-types": "^15.6.2"
   },
   "peerDependencies": {
     "react": "16.x"
   },
   "devDependencies": {
+    "docz": "^0.11.0",
+    "docz-plugin-css": "^0.11.0",
+    "docz-plugin-svgr": "^0.11.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^5.3.0",

src/index.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import Editor from './components/Editor';
+import PropTypes from 'prop-types';
 
 /** 
  * props :
@@ -9,7 +10,7 @@ import Editor from './components/Editor';
  *  - json? -- json to edit
  *  - editorPosition? -- {x,y} overrides the position of the editor 
 */
-export default class extends Component {
+class ReactJsonPath extends Component {
 
     constructor(props) {
         super(props);
@@ -114,3 +115,22 @@ export default class extends Component {
         </React.Fragment>;
     }
 }
+
+ReactJsonPath.propTypes = {
+    /** Properties to set on input tag */
+    inputProps: PropTypes.object,
+    /** Input value */
+    value: PropTypes.string,
+    /** Function called when input value change */
+    onChange: PropTypes.func,
+    /** Json to edit */
+    json: PropTypes.object,
+    /** {x,y} overrides the position of the editor  */
+    editorPosition: PropTypes.exact({
+        x: PropTypes.number,
+        y: PropTypes.number
+    }),
+};
+
+
+export default ReactJsonPath;

src/index.mdx

@@ -0,0 +1,94 @@
+---
+name: react-json-editor
+route: /
+---
+
+import { Playground, PropsTable } from 'docz'
+import JsonPathEditor from './';
+
+# React JSON Path editor
+
+[![Travis][build-badge]][build]   
+[![npm package][npm-badge]][npm]   
+[![Coveralls][coveralls-badge]][coveralls]
+
+A react component that enables simple jsonpath editing by providing autocompletion and preview evaluation in a JSON editor
+
+<PropsTable of={JsonPathEditor} />
+
+## Basic usage
+
+The editor won't be displayed rigth under the field due to the offset of the playground
+
+<Playground>
+    <JsonPathEditor/>
+</Playground>
+
+## With editor position
+
+With editor position fixing the display issue when the component is encapsulated
+
+<Playground>
+    <JsonPathEditor editorPosition={{ x: 31, y: 55 }}/>
+</Playground>
+
+## With a default value
+
+<Playground>
+    <JsonPathEditor value='$.' editorPosition={{ x: 31, y: 55 }}/>
+</Playground>
+
+## With a prop
+
+<Playground>
+    <JsonPathEditor inputProps={{style: {background: 'black', color: 'white'}}} editorPosition={{ x: 31, y: 55 }}/>
+</Playground>
+
+
+## With a callback on change
+
+<Playground>
+    <JsonPathEditor onChange={(newValue) => { console.log(newValue) }} editorPosition={{ x: 31, y: 55 }}/>
+</Playground>
+
+## With a json
+
+<Playground>
+    <JsonPathEditor json={{
+  "data": [{
+    "type": "articles",
+    "id": "1",
+    "attributes": {
+      "title": "JSON API paints my bikeshed!",
+      "body": "The shortest article. Ever.",
+      "created": "2015-05-22T14:56:29.000Z",
+      "updated": "2015-05-22T14:56:28.000Z"
+    },
+    "relationships": {
+      "author": {
+        "data": {"id": "42", "type": "people"}
+      }
+    }
+  }],
+  "included": [
+    {
+      "type": "people",
+      "id": "42",
+      "attributes": {
+        "name": "John",
+        "age": 80,
+        "gender": "male"
+      }
+    }
+  ]
+}} editorPosition={{ x: 31, y: 55 }}/>
+</Playground>
+
+[build-badge]: https://img.shields.io/travis/JeanBaptisteWATENBERG/react-jsonpath-editor/master.png?style=flat-square
+[build]: https://travis-ci.org/JeanBaptisteWATENBERG/react-jsonpath-editor
+
+[npm-badge]: https://img.shields.io/npm/v/react-jsonpath-editor.png?style=flat-square
+[npm]: https://www.npmjs.com/package/react-jsonpath-editor
+
+[coveralls-badge]: https://img.shields.io/coveralls/JeanBaptisteWATENBERG/react-jsonpath-editor/master.png?style=flat-square
+[coveralls]: https://coveralls.io/github/JeanBaptisteWATENBERG/react-jsonpath-editor