Add content for docs (#6)

book.json

@@ -1,3 +1,4 @@
 {
-  "root": "./book"
+  "root": "./book",
+  "version": "v1.1.0"
 }

book/SUMMARY.md

@@ -1,4 +1,9 @@
 # Summary
 
 * [Overview](README.md)
+* [Get Started](get-started/README.md)
+  * [Add core Data](get-started/add-core-data.md)
+  * [Add onChanged Listener](get-started/add-onchanged-listener.md)
+  * [Themes](get-started/themes.md)
+  * [Full Example](get-started/full-example.md)
 * [License](license.md)

book/get-started/README.md

@@ -0,0 +1,30 @@
+# Get Started
+
+## Installation
+
+```js
+npm install --save react-tree-es6
+```
+
+Keep in mind that this module has *two peer dependencies* (**reat** and **react-dom**).
+It *only* support for **ES6 and above**, because I decide to move forward.
+The source code from this module is written in ES6 and compiled to ES5.
+
+Please upgrade to **{{ config.version }}** to support [jsTree API](https://www.jstree.com/api)
+better than ~~v0.x~~.
+
+## Usage
+
+import `ReactTree` in your code:
+
+```js
+import ReactTree from 'react-tree-es6';
+```
+
+then, add to `render()` function:
+
+```js
+render() {
+  return (<ReactTree core={CORE} onChanged={this.handleOnChanged} />);
+}
+```

book/get-started/add-core-data.md

@@ -0,0 +1,77 @@
+# Add core data
+
+[`core`](https://www.jstree.com/api/#/?q=core) is the jsTree object contains basic
+data and configurations of the tree. This is an example of `core` object:
+
+```js
+{
+  data: [ // data can be an array or object.
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ]
+}
+```
+
+## Node Format
+
+As you know, *a tree has one or many nodes, each node has one or many child nodes*:
+
+```js
+// Alternative format of the node (id & parent are required)
+{
+  id: 'string' // required
+  parent: 'string' // required
+  text: 'string' // node text
+  icon: 'string' // string for custom
+  state: {
+    opened: boolean  // is the node open
+    disabled: boolean  // is the node disabled
+    selected: boolean  // is the node selected
+  },
+  li_attr: { }  // attributes for the generated LI node
+  a_attr: { }  // attributes for the generated A node
+}
+```
+
+You can define a `core` object and use with `core` property:
+
+```js
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ]
+};
+
+class ExampleApp extends React.Component {
+  render() {
+    return (<ReactTree core={CORE} />);
+  }
+}
+```
+
+**To make sure you can find what you need, go to [jsTree API](https://www.jstree.com/api) for more details.**

book/get-started/add-onchanged-listener.md

@@ -0,0 +1,30 @@
+# Add onChanged Listener
+
+This event will be triggered when a node is clicked:
+
+```js
+class ExampleApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { items: [] };
+
+    this.handleOnChanged = this.handleOnChanged.bind(this);
+  }
+
+  handleOnChanged(changedItems) {
+    this.setState({
+      items: changedItems.map(item => item.text).join(', ')
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactTree core={CORE} onChanged={this.handleOnChanged} />
+        <div>Selected items: {this.state.items}</div>
+      </div>
+    );
+  }
+}
+```

book/get-started/full-example.md

@@ -0,0 +1,50 @@
+# Full Example
+
+```js
+import React from 'react';
+import ReactTree from 'react-tree-es6';
+
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ]
+};
+
+class ExampleApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { items: [] };
+
+    this.handleOnChanged = this.handleOnChanged.bind(this);
+  }
+
+  handleOnChanged(changedItems) {
+    this.setState({
+      items: changedItems.map(item => item.text).join(', ')
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <ReactTree core={CORE} onChanged={this.handleOnChanged} />
+        <div>Selected items: {this.state.items}</div>
+      </div>
+    );
+  }
+}
+```

book/get-started/themes.md

@@ -0,0 +1,42 @@
+# Themes
+
+If user want to apply css for **ReactTree**, consider to include these files to your web app:
+
+* node_modules/jstree/dist/themes/**default**/style.min.css
+* node_modules/jstree/dist/themes/**default-dark**/style.min.css
+
+with additional options in `core` object, for instance with **default-dark** theme:
+
+```js
+const CORE = {
+  data: [
+    'Simple root node',
+    {
+      text: 'Root node 2',
+      state: {
+        opened: true,
+        selected: true
+      },
+      children: [
+        {
+          text: 'Child 1'
+        },
+        'Child 2'
+      ]
+    }
+  ],
+  themes: {
+    name: 'default-dark'
+  }
+};
+```
+
+If you are using React ES6 with [webpack](https://github.com/webpack/webpack),
+you can add these themes easily by using [css-loader](https://github.com/webpack/css-loader):
+
+```js
+import 'node_modules/jstree/dist/themes/default/style.min.css';
+import 'node_modules/jstree/dist/themes/default-dark/style.min.css';
+```
+
+*You only need to `import` these themes one time.*

package.json

@@ -5,9 +5,11 @@
   "main": "./lib/react-tree.js",
   "scripts": {
     "start": "webpack-dev-server --port=3000",
+    "start-docs":"gitbook serve",
     "test": "jest",
     "test-coverage": "jest && codecov",
-    "build": "babel src --out-dir lib"
+    "build": "babel src --out-dir lib",
+    "build-docs":"gitbook build"
   },
   "repository": {
     "type": "git",