Update README file

README.md

@@ -1,11 +1,39 @@
-# React Tress
+# React Tree
 
 [![Build Status](https://travis-ci.org/kenshoo/react-tree.svg?branch=master)](https://travis-ci.org/kenshoo/react-tree)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/7b44acc9042c5ee410a8/test_coverage)](https://codeclimate.com/github/kenshoo/react-tree/test_coverage)
 
-Code usage:
+React Tree is a straight forward component that allows a user to display and manage a hierarchical structure of items in a clear and comfortable way.
 
+ ## Optional Themes
+
+Two optional themes are supported when using React Tree:
+- Basic tree: using @emotion/core. 
+- Material tree: based on the basic tree logic, using Material-UI components - https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md
 
+Both options support component customization.
+
+Examples - https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js
+
+ ## Basic tree
+
+  <p align="center">
+      <img src="core-tree-demo.gif?raw=true" width="400" />
+  </p>
+
+  ### Installation
+
+   **Installation using npm:**
+  ```
+   npm install @kenshooui/react-tree --save
+  ```
+ **Installation using Yarn:**
+
+```
+ yarn add @kenshooui/react-tree
+```
+
+ ### How to use
  <!-- example -->
 
 ```jsx
@@ -31,12 +59,191 @@ const structure = [
 />;
 ```
 
-## Props
+### Props
+
+| Name                   | Type        | Default                | Description                                                     |
+| :------------------    | :---------- | :--------------------- | :-------------------------------------------------------------- |
+| `structure`            | `Array`     | `[]`                   | `Component input - array of leaves along with their ancestors`  |
+| `title`                | `String`    | `""`                   | `Title to be displayed on root mode`                            |
+| `onSelect`             | `Func`      | `() => {}`             | `callback when clicking a leaf`                                 |
+| `styles`               | `Object`    |                        | `Optional - enables customized styles`                          |
+| `width`                | `number`    | `230 `                 | `The width of the tree component`                               |
+| `height`               | `number`    | `300 `                 | `The height of the tree component`                              |
+| `noResultsText`        | `String`    | `No matching results`  | `The message to be displayed when having no results on searching`                  |
+| `noResultsRenderer`    | `Component` | `no_matching_items.js` | `Component to replace the default NoResults component. `        |
+| `noResultsIconRenderer`| `Component` |                        | `Component to replace the default NoResultsIcon component.`     |
+| `headerRenderer`       | `Component` | `header.js`            | `Component to replace the default Header component.`            |
+| `backIconRenderer`     | `Component` |                       | `Component to replace the default BackIcon component. `          |
+| `inputRenderer`        | `Component` | `input.js️`             | `Component to replace the default Input component. `            |
+| `inputIconRenderer`    | `Component` |                        | `Component to replace the default InputIcon component. `        |
+| `clearIconRenderer`    | `Component` |                        | `Component to replace the default CleaseIcon component. `       |
+| `itemRenderer`         | `Component` | `item.js️`              | `Component to replace the default Item component. `             |
+| `itemsRenderer`        | `Component` | `items.js`             | `Component to replace the default Items component. `            |
+| `forwardIconRenderer`  | `Component` |                        | `Component to replace the default ForwardIcon component. `      |
+| `treeContainerRenderer`| `Component` | `tree_container.js`    | `Component to replace the default TreeContainer component. `    |
+| `markSelectedItem`     | `boolean`   | `false`                | `Toggle to mark selected item. `                                |
+
+<br/>
+
+### Customization
+
+#### Styling
+
+The basic tree gets "styles" object property.
+<br/>
+If the "styles" object is empty, the basic tree will use the default styles.
+<br/>
+The "styles" object can override any of the following:
+ - container - tree container
+ - header - tree header. Displays tree title or item's parents
+ - headerBackIcon - back icon
+ - item - a single item from the hierarchical tree.
+ - highlight - the style of the searched (highlighted) letters of an item
+ - searchItemInitial: the style of the basic ("not searched") letters of an item
+ - parents - the style of parents sub-title on search
+ - items - items list container
+ - noResults - displayed when there are no found items
+-  noResultsIcon - the icon displayed when there are no found items 
+-  noResultsText - the massage displayed when there are no found items 
+ - input - search input
+-  searchInput - the icon of the search input
+ - clearInput - the icon of the search input "clear" button
+ - forwardIcon - the icon that is part of the item component. Displayed when the item has children. 
+ - selectedItem - the style of the selectedItem item 
+ - inputWrapper - the style of input wrapper
+
+<br/>
+
+#### Renderers
+
+You can replace the renderers of the following components:
+
+<br/>
+
+**Container**
+
+Use the `treeContainerRenderer` to replace the default component.
+
+Each treeContainer receives the following props:
+
+`containerRef` - Holds a reference to the tree container component
+
+`children` - Holds all sub components (like header, input, items, etc..)
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+<br/>
+
+**Header**
+
+Use the `headerRenderer` to replace the default component.
+
+Each header receives the following props:
+
+`headerRef` - Holds a reference to the header component
+
+`parents` - Holds the parents of the current level. 
+<br/>
+For example for the following structure: ["Profiles", "Performance", "Clicks"]
+- In the first level the parents are: [""]
+- In the second level the parents are: ["Profile"]
+- In the third level the parents are: ["Profile, "Performance"]
+
+
+`onClick` -  Triggers the back event on click
+
+`title` - The title of the header. Displayed on the first level.
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+`backIconRenderer` - Use the `backIconRenderer` to replace the default back button component.
+
+<br/>
+
+**Input**
+
+Use the `inputRenderer` to replace the default component.
+
+Each header receives the following props:
+
+`inputRef` - Holds a reference to the input component
+
+`searchTerm` - Holds the searched value
+
+`onInputChange` - Triggers set searchTerm event on change
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+`inputIconRenderer` - Use the `inputIconRenderer` to replace the default input icon component.
+
+`clearIconRenderer` - Use the `clearIconRenderer` to replace the default clear input icon component.
+
+<br/>
+
+**Items**
+
+Use the `itemsRenderer` to replace the default component.
+
+Each header receives the following props:
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+`children` - All items
+
+<br/>
+
+**Item**
+
+Use the `itemRenderer` to replace the default component
+
+Each header receives the following props:
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+`searchTerm` - Holds the searched value
+
+`item` - Represents an item from the given structure
+
+`onClick` - Is called when clicking on an item
+
+`forwardIconRenderer` - Use the `forwardIconRenderer` to replace the default forward icon component
+
+`selectedItem` - Represents the current selected item. Is relevant when markSelectedItem = true
+
+<br/>
+
+**No Results**
+
+Use the `noResultsRenderer` to replace the default component.
+
+`getStyles` - Gets relevant styles
+
+`styles` - Enables using customized styles
+
+`text` - Displayed when there are no results
+
+`noResultsIconRenderer` - Use the `noResultsIconRenderer` to replace the default no results warning icon component.
+
+
+## How to Contribute
+
+#### Setting up development environment
+
+1. Fork the repository and create your branch from `master`.
+2. Install the project: `yarn install`
+3. Run tests: `yarn test` or `yarn test:watch`
+4. Run dev environment: `yarn storybook` and head to [https://localhost:6006](https://localhost:6006)
 
-| Name                | Type      | Default                | Description                                                     |
-| :------------------ | :-------- | :--------------------- | :-------------------------------------------------------------- |
-| `structure`         | `Array`   | `[]`                   | `Component input - array of leaves along with their ancestors`  |
-| `title`             | `String`  | ``                     | `Title to be displayed on root mode`                            |
-| `onSelect`          | `Func`    | ``                     | `callback when clicking a leaf`                                 |
-| `NoResultsRenderer` | ``        | `no_matching_items.js` | `renderer when having no results on searching`                  |
+## Credit
 
+Styling patterns were taken from react-select - https://github.com/JedWatson/react-select/blob/master/README.md

packages/core/src/tree.js

@@ -25,6 +25,7 @@ const Tree = props => {
     onSelect,
     width,
     height,
+    styles,
     noResultsText = "No matching results",
     headerRenderer: Header = HeaderDefault,
     backIconRenderer,
@@ -66,6 +67,7 @@ const Tree = props => {
     <TreeContainer
       containerRef={containerRef}
       getStyles={getStyles}
+      styles={styles}
       width={(width || DEFAULT_WIDTH) + PIXEL_SUFFIX}
       height={(height || DEFAULT_HEIGHT) + PIXEL_SUFFIX}
     >
@@ -75,18 +77,20 @@ const Tree = props => {
         title={title}
         onClick={onBackClick}
         getStyles={getStyles}
+        styles={styles}
         backIconRenderer={backIconRenderer}
       >
         {title}
       </Header>
       <Input
         inputRef={inputRef}
         getStyles={getStyles}
+        styles={styles}
         searchTerm={searchTerm}
         onInputChange={onInputChange}
         inputIconRenderer={inputIconRenderer}
       />
-      <Items getStyles={getStyles} height={itemsHeight}>
+      <Items styles={styles} getStyles={getStyles} height={itemsHeight}>
         {leaves &&
           leaves.length > 0 &&
           leaves.map(item => (
@@ -104,6 +108,7 @@ const Tree = props => {
           height={itemsHeight}
           text={noResultsText}
           getStyles={getStyles}
+          styles={styles}
           noResultsIconRenderer={noResultsIconRenderer}
         />
       )}

packages/docs/stories/core.stories.js

@@ -2,6 +2,12 @@ import React from "react";
 import Tree from "@kenshooui/react-tree";
 import MaterialTree from "@kenshooui/material-tree";
 import makeStyles from "@material-ui/core/styles/makeStyles";
+import {
+  CustomForwardIcon,
+  CustomHeader,
+  CustomSearchIcon,
+  customStyles
+} from "./custom_renderers";
 
 const useStyles = makeStyles({
   wrapper: {
@@ -57,13 +63,33 @@ export const Basic = () => {
   return (
     <div className={classes.wrapper}>
       <div className={classes.item}>
-        <div className={classes.title}>Default Dimensions</div>
+        <div className={classes.title}>Default Tree</div>
         <Tree
           structure={structure}
           title={"Choose an item"}
           onSelect={item => alert(item)}
         />
       </div>
+      <div className={classes.item}>
+        <div className={classes.title}>Custom Renderers</div>
+        <Tree
+          structure={structure}
+          title={"Choose an item"}
+          onSelect={item => alert(item)}
+          headerRenderer={CustomHeader}
+          forwardIconRenderer={CustomForwardIcon}
+          inputIconRenderer={CustomSearchIcon}
+        />
+      </div>
+      <div className={classes.item}>
+        <div className={classes.title}>Custom Styles</div>
+        <Tree
+          structure={structure}
+          title={"Choose an item"}
+          onSelect={item => alert(item)}
+          styles={customStyles}
+        />
+      </div>
       <div className={classes.item}>
         <div className={classes.title}>Custom Dimensions</div>
         <Tree
@@ -83,11 +109,22 @@ export const MaterialTheme = () => {
   return (
     <div className={classes.wrapper}>
       <div className={classes.item}>
-        <div className={classes.title}>Default Dimensions</div>
+        <div className={classes.title}>Default Tree</div>
+        <MaterialTree
+          structure={structure}
+          title={"Choose an item"}
+          onSelect={item => alert(item)}
+        />
+      </div>
+      <div className={classes.item}>
+        <div className={classes.title}>Custom Renderers</div>
         <MaterialTree
           structure={structure}
           title={"Choose an item"}
           onSelect={item => alert(item)}
+          headerRenderer={CustomHeader}
+          forwardIconRenderer={CustomForwardIcon}
+          inputIconRenderer={CustomSearchIcon}
         />
       </div>
       <div className={classes.item}>