Add GitHub page and update README

.gitignore

@@ -7,6 +7,7 @@ npm-debug.log*
 
 # compiled files
 lib
+_book
 
 # coverage directory used by tools like istanbul
 coverage

CHANGELOG.md

@@ -1,15 +1,35 @@
 # Change Log
 
-## [v1.0.0](https://github.com/hckhanh/react-tree-es6/tree/v1.0.0)
+## [v1.1.0](https://github.com/hckhanh/react-tree-es6/tree/HEAD)
 
-[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.2...v1.0.0)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v1.0.1...v1.1.0)
+
+**Implemented enhancements:**
+
+- Remove Gulp dependency [\#25](https://github.com/hckhanh/react-tree-es6/issues/25)
+- Create GitHub Page [\#6](https://github.com/hckhanh/react-tree-es6/issues/6)
+
+## [v1.0.1](https://github.com/hckhanh/react-tree-es6/tree/v1.0.1) (2016-08-18)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v1.0.0...v1.0.1)
+
+**Fixed bugs:**
+
+- Update missing code in README doc [\#24](https://github.com/hckhanh/react-tree-es6/pull/24) ([hckhanh](https://github.com/hckhanh))
+
+## [v1.0.0](https://github.com/hckhanh/react-tree-es6/tree/v1.0.0) (2016-08-16)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v1.0.0-0...v1.0.0)
 
 **Implemented enhancements:**
 
 - Add core property [\#20](https://github.com/hckhanh/react-tree-es6/issues/20)
 - Add Codecov service [\#15](https://github.com/hckhanh/react-tree-es6/issues/15)
+- Update content in README [\#23](https://github.com/hckhanh/react-tree-es6/pull/23) ([hckhanh](https://github.com/hckhanh))
+- Add core prop to ReactTree [\#22](https://github.com/hckhanh/react-tree-es6/pull/22) ([hckhanh](https://github.com/hckhanh))
 - Add test coverage \(\#15\) [\#19](https://github.com/hckhanh/react-tree-es6/pull/19) ([hckhanh](https://github.com/hckhanh))
 
+## [v1.0.0-0](https://github.com/hckhanh/react-tree-es6/tree/v1.0.0-0) (2016-08-15)
+[Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.2...v1.0.0-0)
+
 ## [v0.1.2](https://github.com/hckhanh/react-tree-es6/tree/v0.1.2) (2016-08-14)
 [Full Changelog](https://github.com/hckhanh/react-tree-es6/compare/v0.1.1...v0.1.2)
 

README.md

@@ -5,12 +5,11 @@
 [![dependencies Status](https://david-dm.org/hckhanh/react-tree-es6/status.svg)](https://david-dm.org/hckhanh/react-tree-es6)
 [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/288/badge)](https://bestpractices.coreinfrastructure.org/projects/288)
 
-The wrapper of jsTree (jstree.com) for React
+If you want to find a **tree view** component for [React](https://facebook.github.io/react/), this module is what you need.
 
 ## Getting Started
 
-If you want to find a **tree view** component for React, this module is what you need.
-**It supports ES6 and backward compatible with ES5.**
+**It ONLY supports ES6 and above.** Read <https://hckhanh.github.io/react-tree-es6> for more details.
 
 ## Installation
 
@@ -20,102 +19,6 @@ npm install --save react-tree-es6
 
 ## Usage
 
-import/require `ReactTree` in your source code:
-
-```js
-import ReactTree from 'react-tree-es6';
-```
-
-and add this component into your `render()` function:
-
-```js
-render() {
-  return (<ReactTree core={CORE} onChanged={this.handleOnChanged} />);
-}
-```
-
-**Go to [example](example) folder to get more details.**
-
-### core
-
-`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'
-      ]
-    }
-  ]
-}
-```
-
-As you know, a tree has one or many nodes, here is the full structure of a node:
-
-```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 then put it to `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.**
-
-### onChanged
-
-This is an event to handle when a node is clicked:
-
 ```js
 const CORE = {
   data: [
@@ -162,39 +65,6 @@ class ExampleApp extends React.Component {
 }
 ```
 
-### 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'
-  }
-};
-```
-
 ## License
 
-MIT (<http://www.opensource.org/licenses/mit-license.php>)
+MIT

book.json

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

book/README.md

@@ -0,0 +1,9 @@
+# react-tree-es6
+
+[jsTree](https://www.jstree.com) is written on library, my wrapper just *wrap it* to make sure it can work well with life cycle of React.
+All APIs from jsTree are apply to this wrapper. So you can work with this component like [jsTree](https://www.jstree.com).
+
+![Tree Folder](./images/tree.png)
+
+For now, it' just has some basic features. If you think there are some better ideas can apply to this wrapper,
+please [make a issue](https://github.com/hckhanh/react-tree-es6/issues/new). *Any help would be appreciated.*

book/SUMMARY.md

@@ -0,0 +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>
+    );
+  }
+}
+```