new docs

.gitignore

@@ -2,6 +2,4 @@
 dist
 node_modules
 public
-examples
-media
 ./src/test.js

README.md

@@ -1,5 +1,3 @@
-WORK IN PROGRESS
-
 # react-color-tools
 
 > A set of tools as React components for working with colors
@@ -30,15 +28,15 @@ WORK IN PROGRESS
 
 ## Introduction
 
-`react-color-tools` provides a set of tools as React components for working with colors. These tools can be used to manipulate a color for example controlling the intensity or purity of color, extracting swatches directly from an image, creating a gradient, choosing from variety of shades and tints or choosing a color scheme.
+`react-color-tools` provides a set of tools as React components for working with colors. These tools can be used to manipulate a color for example controlling the intensity or purity of color, extracting swatches from an image, creating a gradienty defining color stop positions, choosing from variety of shades and tints or choosing a color scheme.
 
 ## Motivation
 
 `react-color-tools` is inspired from [`react-color`](https://github.com/casesandberg/react-color). I was using `react-color` for my projects and felt the need for more features like [image color extraction](https://react-color-extractor.surge.sh), generating shades and tints, creating gradients, and advance color tools for controlling the intensity and value of the color. So I decided to build `react-color-tools` with these features while keeping the API surface minimal and easy to use.
 
 ## Features
 
-- Image color extraction :
+- Image color extraction
 
 - Generate shades and tints
 
@@ -72,7 +70,7 @@ A little bit about different color terms and color harmonies that you will be us
 
 - **Desaturation** - Desaturation makes a color look more muted (hue approaches closer to gray).
 
-### Color Harmony
+### Color schemes
 
 - **Monochromatic** - This color scheme contains tints, shades and tones of a color.
 
@@ -103,7 +101,7 @@ yarn add react-color-tools
 ```js
 import React from 'react'
 import { render } from 'react-dom'
-import { BasicColorPicker } from 'react-color-tools'
+import { BasicPicker } from 'react-color-tools'
 
 class App extends React.Component {
   state = {
@@ -113,7 +111,7 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <BasicColorPicker
+        <BasicPicker
           color={this.state.color}
           onChange={color => this.setState({ color })}
         />
@@ -136,7 +134,7 @@ This will render -
 
 ## Contributing
 
-If you like to contribute to this project, then follow the below instructions to setup the project locally on your machine.
+If you'd like to contribute to this project, then follow the below instructions to setup the project locally on your machine.
 
 ```
 git clone https://github.com/<your_username_here>/react-color-tools

docs/BasicColorPicker.md → docs/BasicPicker.md

@@ -4,7 +4,7 @@
     <img src="../media/basic_picker.gif" />
 </p>
 
-## `<BasicColorPicker />`
+## `<BasicPicker />`
 
 Basic color picker includes tools such as -
 
@@ -19,7 +19,7 @@ Basic color picker includes tools such as -
 
 ```jsx
 import React from 'react'
-import { BasicColorPicker } from 'react-color-tools'
+import { BasicPicker } from 'react-color-tools'
 
 class App extends React.Component {
   state = {
@@ -29,7 +29,7 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <BasicColorPicker
+        <BasicPicker
           color={this.state.color}
           onChange={color => this.setState({ color })}
         />
@@ -47,7 +47,7 @@ class App extends React.Component {
 color prop represents what color is currently active in the color picker. Use this prop to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component. The default value is `#088da5`
 
 ```jsx
-<BasicColorPicker color={this.state.color} />
+<BasicPicker color={this.state.color} />
 ```
 
 `onChange: (color: string): void => {}`
@@ -56,7 +56,7 @@ This is invoked everytime when a color is updated in the color picker for exampl
 
 ```jsx
 <div>
-  <BasicColorPicker
+  <BasicPicker
     color={this.state.color}
     onChange={color => this.setState({ color })}
   />
@@ -69,7 +69,7 @@ This is invoked everytime when a color is updated in the color picker for exampl
 Initialize your own swatches in the color picker by passing an array of colors in either hex format or specifying the name of color.
 
 ```jsx
-<BasicColorPicker swatches={['red', 'mistyrose', 'hotpink']} />
+<BasicPicker swatches={['red', 'mistyrose', 'hotpink']} />
 ```
 
 `onSwatchHover: (color: string): void => {}`
@@ -143,7 +143,7 @@ For example - The default format for color when `onChange` is invoked is hex.
 ```jsx
 state = { color: 'red' }
 
-<BasicColorPicker color={this.state.color} onChange={color => {
+<BasicPicker color={this.state.color} onChange={color => {
   this.setState({ color });
   console.log(color); // #F00
 }}/>
@@ -154,7 +154,7 @@ state = { color: 'red' }
 To convert a color to rgb format, use the static method `toRGB(color)`
 
 ```
-BasicColorPicker.toRGB(color)
+BasicPicker.toRGB(color)
 ```
 
 Example -
@@ -168,11 +168,9 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <BasicColorPicker
+        <BasicPicker
           color={this.state.color}
-          onChange={color =>
-            this.setState({ color: BasicColorPicker.toRGB(color) })
-          }
+          onChange={color => this.setState({ color: BasicPicker.toRGB(color) })}
         />
         <h1 style={{ color: this.state.color }}>React Color Tools</h1>
       </div>
@@ -186,19 +184,19 @@ Similarly for other formats,
 **`toHSL`**
 
 ```
-BasicColorPicker.toHSL(color)
+BasicPicker.toHSL(color)
 ```
 
 **`toHSV`**
 
 ```
-BasicColorPicker.toHSV(color)
+BasicPicker.toHSV(color)
 ```
 
 **`toRGBPercent`**
 
 ```
-BasicColorPicker.toRGBPercent(color)
+BasicPicker.toRGBPercent(color)
 ```
 
 ### Image color extraction

docs/README.md

@@ -2,10 +2,28 @@
 
 This is the documentation for `react-color-tools`
 
-`react-color-tools` provides three pickers -
+## Table of contents
 
-- **Basic color picker** for color manipulation
-
-* **Gradient picker** for creating a gradient
-
-- **Color harmony picker** for selecting a color scheme
+- [Introduction](./README.md#introduction)
+- [Features](./README.md#features)
+- [Usage](./README.md#usage)
+- [Basic color picker](./BasicPicker.md)
+  - [Component API]()
+  - [Usage]()
+  - [Image color extraction]()
+  - [Generating shades and tints]()
+  - [Copying color from picker]()
+  - [Displaying previous swatches]()
+  - [Generating different swatches]()
+- [Gradient picker]()
+  - [Component API]()
+  - [Usage]()
+  - [Gradient picker tools]()
+- [Color scheme picker]()
+  - [Component API]()
+  - [Usage]()
+  - [Color schemes and color theory]()
+- [Color conversion APIs]()
+- [Examples]()
+- [Contributing]()
+- [License]()

examples/BasicPicker.js

@@ -1,8 +1,7 @@
 import React from 'react'
-import { BasicColorPicker } from 'react-color-tools'
+import { BasicPicker } from 'react-color-tools'
 
-// Without color tools
-class WithoutTools extends React.Component {
+class App extends React.Component {
   state = {
     color: 'hotpink'
   }
@@ -12,31 +11,10 @@ class WithoutTools extends React.Component {
 
     return (
       <div>
-        <BasicColorPicker
+        <BasicPicker
           color={color}
           onChange={color => this.setState({ color })}
           theme="dark"
-        />
-        <h1 style={{ color }}>React Color Tools</h1>
-      </div>
-    )
-  }
-}
-
-// With colors tools
-class WithTools extends React.Component {
-  state = {
-    color: 'hotpink'
-  }
-
-  render() {
-    const { color } = this.state
-
-    return (
-      <div>
-        <BasicColorPicker
-          color={color}
-          onChange={color => this.setState({ color })}
           showTools={true}
         />
         <h1 style={{ color }}>React Color Tools</h1>

examples/SchemePicker.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { SchemePicker } from 'react-color-tools'
+
+class App extends React.Component {
+  state = { color: 'hotpink' }
+
+  render() {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          alignItems: 'center'
+        }}
+      >
+        <h1 style={{ color: this.state.color }}>React Color Tools</h1>
+        <SchemePicker
+          theme="light"
+          scheme="analogous"
+          color={this.state.color}
+          onChange={color => this.setState({ color })}
+        />
+      </div>
+    )
+  }
+}