Add docs

.dockerignore

@@ -0,0 +1,2 @@
+*/node_modules
+*.log

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:8.11.4
+
+WORKDIR /app/website
+
+EXPOSE 3000 35729
+COPY ./docs /app/docs
+COPY ./website /app/website
+RUN yarn install
+
+CMD ["yarn", "start"]

README.md

@@ -7,73 +7,6 @@ A collection of handy, flexible, tested and documented React custom hooks.
 
 **This library is still under construction. The API will change many time!**
 
-## Installation
-```
-npm i react-tidy
-```
-
-## Contents
-  ### Custom Hooks
-  - [useStorage](#usestorage)
-  ### Functions
-  - [createMemoryStorage](#creatememorystorage)
-  ### Interfaces
-  - [Storage](#storage)
-
-## Custom Hooks
-
-### useStorage
-Get and set an item of a storage like `localStorage` and `sessionStorage`.
-
-```ts
-function useStorage(
-  key: string,
-  defaultValue: any = null,
-  storage: Storage = defaultStorage
-)
-```
-
-#### Parameters
-- **key**: The key of the item on the storage.
-- **defaultValue**(optional): The value to return and set into the storage when no item with given key is found. (Default: `null`).
-- **storage**(optional): The storage object to use. You can pass `window.localStorage`, `window.sessionStorage`, or any object implementing the [`Storage`](#storage) interface. By default, a [memory storage](#creatememorystorage) will be used.
-
-#### Usage
-```tsx
-import {useStorage} from 'react-tidy'
-```
-Then inside a React functional component:
-```ts
-const [token, setToken] = useStorage('auth-token', 'default', window.localStorage)
-```
-`token` will contain the value stored in localStorage for the key `auth-token`.
-if no item with that key is found, then `default` will be stored in localStorage.
-```ts
-setToken('foo') // stores the value on localStorage and sets token to 'foo'
-setToken(null) // removes the item from localStorage and sets token to `null`
-```
-
-The value can be anything, not just a string.
-```ts
-const [state, setState] = useStorage('state', {isLoading: true})
-//...
-setState({isLoading: false, data: {...}})
-```
-`JSON.stringify` and `JSON.parse` are used to serialize/unserialize the value.
-
-You can also give a function as value similar to `React.useState`.
-```ts
-const [lazyState, setLazyState] = useStorage('lazy-state', () => {
-  // do some computation ...
-  return data
-})
-//...
-setLazyState(currentState => {
-  // ...
-  return newState
-})
-```
-
 ## Functions
 
 ### createMemoryStorage

docker-compose.yml

@@ -0,0 +1,18 @@
+version: "3"
+
+services:
+  docusaurus:
+    build: .
+    ports:
+      - 3000:3000
+      - 35729:35729
+    volumes:
+      - ./docs:/app/docs
+      - ./website/blog:/app/website/blog
+      - ./website/core:/app/website/core
+      - ./website/i18n:/app/website/i18n
+      - ./website/pages:/app/website/pages
+      - ./website/static:/app/website/static
+      - ./website/sidebars.json:/app/website/sidebars.json
+      - ./website/siteConfig.js:/app/website/siteConfig.js
+    working_dir: /app/website

docs/install.md

@@ -0,0 +1,7 @@
+---
+title: Install
+---
+
+```
+npm i react-tidy
+```

docs/introduction.md

@@ -0,0 +1,5 @@
+---
+title: Introduction
+---
+
+**React Tidy** is a library of React custom hooks. These hooks are built with flexibility and testing in mind.

docs/use-storage.md

@@ -0,0 +1,55 @@
+---
+title: useStorage
+---
+
+### useStorage
+Get and set an item of a storage like `localStorage` and `sessionStorage`.
+
+```ts
+function useStorage(
+  key: string,
+  defaultValue: any = null,
+  storage: Storage = defaultStorage
+)
+```
+
+#### Parameters
+- **key**: The key of the item on the storage.
+- **defaultValue**(optional): The value to return and set into the storage when no item with given key is found. (Default: `null`).
+- **storage**(optional): The storage object to use. You can pass `window.localStorage`, `window.sessionStorage`, or any object implementing the [`Storage`](#storage) interface. By default, a [memory storage](#creatememorystorage) will be used.
+
+#### Usage
+```tsx
+import {useStorage} from 'react-tidy'
+```
+Then inside a React functional component:
+```ts
+const [token, setToken] = useStorage('auth-token', 'default', window.localStorage)
+```
+`token` will contain the value stored in localStorage for the key `auth-token`.
+if no item with that key is found, then `default` will be stored in localStorage.
+```ts
+setToken('foo') // stores the value on localStorage and sets token to 'foo'
+setToken(null) // removes the item from localStorage and sets token to `null`
+```
+
+The value can be anything, not just a string.
+```ts
+const [state, setState] = useStorage('state', {isLoading: true})
+//...
+setState({isLoading: false, data: {...}})
+```
+`JSON.stringify` and `JSON.parse` are used to serialize/unserialize the value.
+
+You can also give a function as value similar to `React.useState`.
+```ts
+const [lazyState, setLazyState] = useStorage('lazy-state', () => {
+  // do some computation ...
+  return data
+})
+//...
+setLazyState(currentState => {
+  // ...
+  return newState
+})
+```

website/README.md

@@ -0,0 +1,193 @@
+This website was created with [Docusaurus](https://docusaurus.io/).
+
+# What's In This Document
+
+* [Get Started in 5 Minutes](#get-started-in-5-minutes)
+* [Directory Structure](#directory-structure)
+* [Editing Content](#editing-content)
+* [Adding Content](#adding-content)
+* [Full Documentation](#full-documentation)
+
+# Get Started in 5 Minutes
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ yarn
+```
+2. Run your dev server:
+
+```sh
+# Start the site
+$ yarn start
+```
+
+## Directory Structure
+
+Your project file structure should look something like this
+
+```
+my-docusaurus/
+  docs/
+    doc-1.md
+    doc-2.md
+    doc-3.md
+  website/
+    blog/
+      2016-3-11-oldest-post.md
+      2017-10-24-newest-post.md
+    core/
+    node_modules/
+    pages/
+    static/
+      css/
+      img/
+    package.json
+    sidebar.json
+    siteConfig.js
+```
+
+# Editing Content
+
+## Editing an existing docs page
+
+Edit docs by navigating to `docs/` and editing the corresponding document:
+
+`docs/doc-to-be-edited.md`
+
+```markdown
+---
+id: page-needs-edit
+title: This Doc Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Editing an existing blog post
+
+Edit blog posts by navigating to `website/blog` and editing the corresponding post:
+
+`website/blog/post-to-be-edited.md`
+```markdown
+---
+id: post-needs-edit
+title: This Blog Post Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+# Adding Content
+
+## Adding a new docs page to an existing sidebar
+
+1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
+
+```md
+---
+id: newly-created-doc
+title: This Doc Needs To Be Edited
+---
+
+My new content here..
+```
+
+1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
+
+```javascript
+// Add newly-created-doc to the Getting Started category of docs
+{
+  "docs": {
+    "Getting Started": [
+      "quick-start",
+      "newly-created-doc" // new doc here
+    ],
+    ...
+  },
+  ...
+}
+```
+
+For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding a new blog post
+
+1. Make sure there is a header link to your blog in `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+headerLinks: [
+    ...
+    { blog: true, label: 'Blog' },
+    ...
+]
+```
+
+2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
+
+`website/blog/2018-05-21-New-Blog-Post.md`
+
+```markdown
+---
+author: Frank Li
+authorURL: https://twitter.com/foobarbaz
+authorFBID: 503283835
+title: New Blog Post
+---
+
+Lorem Ipsum...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+## Adding items to your site's top navigation bar
+
+1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    /* you can add docs */
+    { doc: 'my-examples', label: 'Examples' },
+    /* you can add custom pages */
+    { page: 'help', label: 'Help' },
+    /* you can add external links */
+    { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding custom pages
+
+1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
+1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    { page: 'my-new-custom-page', label: 'My New Custom Page' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
+
+# Full Documentation
+
+Full documentation can be found on the [website](https://docusaurus.io/).