Add docz

.gitignore

@@ -1,3 +1,4 @@
+.docz
 .DS_Store
 .idea/
 .vscode/

.npmignore

@@ -1,10 +1,14 @@
+.docz
 .DS_Store
 .idea/
 .vscode/
 
 node_modules
 npm-debug.log
 
+doczrc.js
+
 __vcr__/
 __generated__/
-coverage/
+coverage/
+docs/

README.md

@@ -12,7 +12,7 @@
   <a href="https://github.com/releasy/react-releasy/issues"><img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"></a>
 </p>
 
-## Installation
+## Installation 
 
 With Yarn:
 
@@ -30,7 +30,7 @@ npm install --save-dev relay-devtools
 
 ## Usage
 
-Using `Releasy` is quite simple, first we need to create an instance of our [Config](docs/classes/Config.md) class:
+Using `Releasy` is quite simple, first we need to create an instance of our [Config](/core/config) class:
 
 ```javascript
 import { Config, InMemoryCache, Link } from 'react-releasy';
@@ -47,7 +47,7 @@ const config = new Config({
 });
 ```
 
-Then we need to wrap the application with a [ReleasyProvider](docs/components/ReleasyProvider.md):
+Then we need to wrap the application with a [ReleasyProvider](/components/releasy-provider):
 
 ```javascript
 import { ReleasyProvider } from 'react-releasy';
@@ -62,77 +62,45 @@ ReactDOM.render(
 
 ## Examples
 
-Let's start making a simple [query](docs/hocs/query.md):
+Let's start making a simple [Query](/components/query):
 
 ```javascript
 import { graphql } from 'react-relay';
-import { query } from 'react-releasy';
-
-const MyComponent = ({ error, isFetching, me }) => {
-  if (error) {
-    return `Error: ${error.message}`;
-  }
-
-  if (isFetching) {
-    return 'Loading...';
-  }
-
-  return `My name is ${me.name}`;
-}
-
-export default query(
-  graphql`
-    query MyComponentMeQuery {
-      me {
-        name
-      }
-    }
-  `
-)(MyComponent);
-```
-
-If you want to implement your own abstraction of [Relay QueryRenderer](https://facebook.github.io/relay/docs/en/query-renderer.html) or even create some [mutations](https://facebook.github.io/relay/docs/en/mutations.html), we can use [withReleasy](docs/hocs/withReleasy.md) to get the `environment`:
-
-```javascript
-import React from 'react';
-import { QueryRenderer, graphql } from 'react-relay';
-import { withReleasy } from 'react-releasy';
-
-const MyComponent = ({ environment }) => (
-  <QueryRenderer
-    environment={environment}
-    query={graphql`
-      query MyComponentMeQuery {
-        me {
-          id
+import { Query } from 'react-releasy';
+
+const MyComponent = () => {
+  return (
+    <Query
+      query={graphql`
+        query MyComponentMeQuery {
+          me {
+            name
+          }
+        }
+      `}
+    >
+      {({ me, isFetching, error }) => {
+        if (error) {
+          return `Error: ${error.message}`;
         }
-      }
-    `}
-    render={({ error, props }) => {
-      if (error) {
-        return error.message;
-      }
-
-      if (props) {
-        return props.me.id;
-      }
 
-      return 'loading';
-    }}
-  />
-);
+        if (isFetching) {
+          return 'Loading...';
+        }
 
-export default withReleasy(MyComponent);
+        return `My name is ${me.name}`;
+      })}
+    </Query>
+  );
+}
 ```
 
-Also, we can get it directly using `getEnvironment`:
+Also, we can commit a mutation using `getEnvironment`:
 
 ```javascript
 import { graphql, commitMutation } from 'react-relay';
 import { getEnvironment } from 'react-releasy';
 
-const environment = getEnvironment();
-
 const mutation = graphql`
   mutation ChangeNameMutation($input: ChangeNameInput!) {
     ChangeName(input: $input) {
@@ -147,7 +115,7 @@ const mutation = graphql`
 let tempID = 0;
 
 const commit = (name) => {
-  return commitMutation(environment, {
+  return commitMutation(getEnvironment(), {
     mutation,
     variables: {
       input: {

docs/components/Query.mdx

@@ -0,0 +1,14 @@
+---
+name: Query
+menu: Components
+route: /components/query
+---
+
+import { PropsTable } from 'docz'
+import { Query } from '../../src'
+
+# Query
+
+## Properties
+
+<PropsTable of={Query} />

docs/components/ReleasyProvider.mdx

@@ -0,0 +1,14 @@
+---
+name: ReleasyProvider
+menu: Components
+route: /components/releasy-provider
+---
+
+import { PropsTable } from 'docz'
+import { ReleasyProvider } from '../../src'
+
+# ReleasyProvider
+
+## Properties
+
+<PropsTable of={ReleasyProvider} />

docs/core/Cache.mdx

@@ -0,0 +1,20 @@
+---
+name: Cache
+menu: Core
+route: /core/cache
+---
+
+# Cache
+
+A class responsible to store/recover data without needing make any request to the server.
+
+## Usage
+
+```javascript
+import { InMemoryCache } from 'react-releasy';
+
+const cache = new InMemoryCache({
+  ttl: 300000,
+  size: 250,
+});
+```

docs/core/Config.mdx

@@ -0,0 +1,22 @@
+---
+name: Config
+menu: Core
+route: /core/config
+---
+
+# Config
+
+A configuration class.
+
+## Usage
+
+```javascript
+import { Config, InMemoryCache, Link } from 'react-releasy';
+
+const config = new Config({
+  link: new Link({ url: 'https://yourserveraddress.com/graphql' }),
+  cache: new InMemoryCache(),
+  devTools: true,
+  networkLogger: true,
+});
+```

docs/core/Link.mdx

@@ -0,0 +1,38 @@
+---
+name: Link
+menu: Core
+route: /core/link
+---
+
+# Link
+
+A class responsible to fetch data from server.
+
+## Usage
+
+```javascript
+import { Link } from 'react-releasy';
+
+const link = new Link({
+  url: 'https://yourserveraddress.com/graphql',
+  fetchTimeout: 30000,
+  retryDelays: [1000, 3000, 5000, 10000],
+  headers: {},
+});
+```
+
+Also, we can use a function to generate the `headers` object:
+
+```javascript
+import { Link } from 'react-releasy';
+
+// this function would get the token inside localStorage or AsyncStorage
+import { getToken } from './auth';
+
+const link = new Link({
+  url: 'https://yourserveraddress.com/graphql',
+  fetchTimeout: 30000,
+  retryDelays: [1000, 3000, 5000, 10000],
+  headers: () => ({ token: getToken() }),
+});
+```

docs/core/VCR.mdx

@@ -0,0 +1,34 @@
+---
+name: VCR
+menu: Core
+route: /core/vcr
+---
+
+# VCR
+
+A class able to record and replay fetching results.
+
+Usefull for testing purpouses, it will record all HTTP requests and replay on the later ones.
+
+## Usage
+
+```javascript
+import { VCR } from 'react-releasy';
+
+const link = new VCR({
+  mode: VCR.MODE.AUTO,
+  url: 'https://yourserveraddress.com/graphql',
+});
+```
+
+## Why should I use VCR?
+
+- Faster (no real HTTP requests are made anymore)
+- Deterministic (the test will continue to pass, even if you are offline, or if the server goes down for maintenance)
+- Accurate (the response will contain the same data you get from a real request)
+
+## Modes
+
+- **VCR.MODE.AUTO**: Record on first execution, replay the later ones.
+- **VCR.MODE.RECORD**: Record all executions. (Overwrite data)
+- **VCR.MODE.REPLAY**: Replay all executions.