Install doc

.gitignore

@@ -7,4 +7,7 @@ dist
 # Coverage
 coverage
 
+# Doc
+.docz
+
 .DS_Store

.npmignore

@@ -13,3 +13,6 @@ coverage
 # Jest
 __mocks__
 jest
+
+# Doc
+.docz

README.md

@@ -2,4 +2,44 @@
 
 # React Gondola
 
-React Native declarative navigation
+React Native declarative and reactive navigation.
+
+## Philosophy
+
+This repo focuses on grouping pages by business conversion tunnels called **canals**. When navigating in Venice, you can not teleport yourself from the beginning of a canal to the end of it. You are forced to either go ahead or go back; and doing so you might discover another canal. **When you use React Gondola**, define several gondoliers and hhow they are authorize to move accross their canals.
+
+## 👍 TLDR; Use this package if:
+
+- you want to group pages by **business** conversion tunnels rather than transition.
+- you want to control your navigation state with a **state machine**.
+- you want you navigation to **react** to your store changes.
+
+## 👎 Do not use this repo if:
+
+- you want to navigate imperatively.
+- you need to use Native navigation (react-gondola's navigation is powered by JS code only).
+
+## Docs
+
+The docs are here: https://react-gondola.netlify.com/
+
+## Contribute
+
+- Clone this repository.
+- Run `yarn` in the root directory.
+- Run `yarn` in the `example` directory.
+- Add your code and its test in the `<rootDir>/src` directory.
+- Add your example code and its test in the `<rootDir>/example` directory.
+- Open a pull request !
+
+## Run the example project
+
+- Clone this repository.
+- Run `yarn` in the root directory.
+- Run `yarn` in the `example` directory.
+- In the `example` directory, run either `react-native run-ios` or `react-native run-android`.
+
+## Compare
+
+- [React Navigation](https://reactnavigation.org/)
+- [React Native Navigation](https://github.com/wix/react-native-navigation)

docs/Contribute.mdx

@@ -0,0 +1,12 @@
+---
+name: Contribute
+---
+
+# Contribute
+
+- Clone this repository.
+- Run `yarn` in the root directory.
+- Run `yarn` in the `example` directory.
+- Add your code and its test in the `<rootDir>/src` directory.
+- Add your example code and its test in the `<rootDir>/example` directory.
+- Open a pull request !

docs/GettingStarted.mdx

@@ -0,0 +1,92 @@
+---
+name: Getting Started
+---
+
+# Getting Started
+
+## Installation
+
+React-gondola needs the following dependencies; if you do not have those installed, you need to install them with the correspondig command:
+
+| Dependencie name | Yarn Installation command | NPM Installation command |
+| :--------------: | :-----------------------: | :----------------------: |
+|      `mobx`      |      `yarn add mobx`      |       `npm i mobx`       |
+|      `rxjs`      |      `yarn add rxjs`      |       `npm i rxjs`       |
+
+Then, install React-Gondola with:
+
+`yarn add react-gondola`
+
+or
+
+`npm i react-gondola`
+
+## Basic Usage
+
+### Create a canal
+
+In order to create a canal, use the `createCanal` function. Pass it your screens in the business order.
+
+```ts
+import React from "react";
+import { createCanal } from "react-gondola";
+import { FirstName } from "./FirstName";
+import { LastName } from "./LastName";
+
+const SignInCanal = createCanal([
+  { name: "firstName", Component: FirstName },
+  { name: "lastName", Component: LastName }
+]);
+```
+
+Then, use the canal wherever you want in your app. Specify wether to show/hide a screen by using the screen's name as a prop:
+
+```ts
+import React, { Component } from "react";
+import { SignInCanal } from "./canals/SignIn";
+
+export default class App extends Component {
+  render() {
+    return <SignInCanal firstName />;
+  }
+}
+```
+
+That's all !
+
+### Add some full screen page
+
+If you want to add full screen page, pass the `isFullScreen` flag when creating a canal. In the following example, `confirm` is a full screen page.
+
+```ts
+import React from "react";
+import { createCanal } from "react-gondola";
+import { FirstName } from "./FirstName";
+import { LastName } from "./LastName";
+
+const SignInCanal = createCanal([
+  { name: "firstName", Component: FirstName },
+  { name: "lastName", Component: LastName },
+  { name: "confirm", Component: Confirm, isFullScreen: true }
+]);
+```
+
+In order to render the full screen page at the top level in your app, add the `FullScreenPortal` at the top level in your rendering tree.
+
+```ts
+import React, { Component } from "react";
+import { SignInCanal } from "./canals/SignIn";
+import { FullScreenPortal } from "react-gondola";
+
+export default class App extends Component {
+  render() {
+    return (
+      <FullScreenPortal>
+        <SignInCanal firstName lastName confirm />
+      </FullScreenPortal>
+    );
+  }
+}
+```
+
+You are ready to use React-Gondola

docs/Roadmap.mdx

@@ -0,0 +1,14 @@
+---
+name: Roadmap
+---
+
+# Roadmap
+
+If there is a real interest on `react-gondola` and its phylosophy, I might add support for the following features:
+
+- transitions
+- navigation gestures
+
+Tweet me some encouragements 😁
+
+My twitter: [@Thomas_Pucci](https://twitter.com/Thomas_Pucci)

docs/Welcome.mdx

@@ -0,0 +1,29 @@
+---
+name: Welcome
+---
+
+# React Gondola
+
+React Native declarative and reactive navigation.
+
+## Philosophy
+
+This repo focuses on grouping pages by business conversion tunnels called **canals**. When navigating in Venice, you can not teleport yourself from the beginning of a canal to the end of it. You are forced to either go ahead or go back; and doing so you might discover another canal. **When you use React Gondola**, define several gondoliers and hhow they are authorize to move accross their canals.
+
+## When to use this package
+
+### 👍 TLDR; Use this package if:
+
+- you want to group pages by **business** conversion tunnels rather than transition.
+- you want to control your navigation state with a **state machine**.
+- you want you navigation to **react** to your store changes.
+
+### 👎 Do not use this repo if:
+
+- you want to navigate imperatively.
+- you need to use Native navigation (react-gondola's navigation is powered by JS code only).
+
+## Compare
+
+- [React Navigation](https://reactnavigation.org/)
+- [React Native Navigation](https://github.com/wix/react-native-navigation)

doczrc.js

@@ -0,0 +1,22 @@
+import path from 'path';
+
+module.exports = {
+  native: true,
+  typescript: true,
+  menu: [
+    'Welcome',
+    'Getting Started',
+    'Example',
+    'Contribute',
+    'Roadmap',
+    { name: 'API', menu: ['createCanal', 'FullScreenPortal'] },
+  ],
+  modifyBundlerConfig: config => {
+    // Combine the default docz aliases with our custom aliases.
+    config.resolve.alias = Object.assign({}, config.resolve.alias, {
+      'react-native$': 'react-native-web',
+      'react-gondola$': path.resolve(__dirname, 'src/index.ts'),
+    });
+    return config;
+  },
+};

example/README.md

@@ -0,0 +1,6 @@
+# Run the example project
+
+- Clone this repository.
+- Run `yarn` in the root (`cd ..`) directory.
+- Run `yarn` in this `example` directory.
+- In this `example` directory, run either `react-native run-ios` or `react-native run-android`.

example/src/Exemple.mdx

@@ -0,0 +1,26 @@
+---
+name: Example
+---
+
+# Example
+
+The following example runs with `react-native-web` 🎉
+
+import { Playground } from "docz";
+import { View } from "react-native";
+import App from "./App";
+
+<Playground>
+  <View style={{ alignItems: "center" }}>
+    <View style={{ width: 320, height: 568 }}>
+      <App />
+    </View>
+  </View>
+</Playground>
+
+## Run the example project
+
+- Clone this repository.
+- Run `yarn` in the root directory.
+- Run `yarn` in the `example` directory.
+- In the `example` directory, run either `react-native run-ios` or `react-native run-android`.

package.json

@@ -20,13 +20,15 @@
     "react-native": "*"
   },
   "scripts": {
+    "predoc:build": "cd example && yarn && cd ..",
+    "doc:build": "docz build",
+    "release": "release-it",
+    "test:ci": "yarn test:lint && yarn test:unit:ci && yarn test:type",
     "test:lint": "tslint src/**/*.ts{,x}",
-    "test:unit": "jest",
-    "test:unit:ci": "jest --runInBand",
     "test:type": "tsc --noEmit",
-    "test": "yarn test:lint && yarn test:unit && yarn test:type",
-    "test:ci": "yarn test:lint && yarn test:unit:ci && yarn test:type",
-    "release": "release-it"
+    "test:unit:ci": "jest --runInBand",
+    "test:unit": "jest",
+    "test": "yarn test:lint && yarn test:unit && yarn test:type"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
@@ -38,6 +40,8 @@
     "@types/react-test-renderer": "^16.8.1",
     "babel-jest": "^24.7.0",
     "conventional-changelog-cz-emoji": "^2.0.0",
+    "docz": "^1.2.0",
+    "docz-theme-default": "^1.2.0",
     "eslint": "^5.16.0",
     "eslint-config-bambi": "^1.4.0",
     "jest": "^24.7.0",
@@ -46,14 +50,20 @@
     "mobx-react": "^5.4.3",
     "mobx-utils": "^5.4.0",
     "prettier": "^1.16.4",
-    "react": "16.8.3",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "react-native": "0.59.5",
+    "react-native-web": "^0.11.4",
     "react-test-renderer": "^16.8.6",
     "release-it": "^12.0.1",
     "rxjs": "^6.4.0",
     "tslint": "^5.15.0",
     "typescript": "^3.4.3"
   },
+  "resolutions": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }

src/FullScreenPortal.mdx

@@ -0,0 +1,41 @@
+---
+name: FullScreenPortal
+menu: API
+---
+
+# FullScreenPortal
+
+`type: React.Component`
+
+## Props
+
+| Prop name  | Required | Default     | Usage                                                                                                      |
+| :--------: | :------: | ----------- | ---------------------------------------------------------------------------------------------------------- |
+| `children` |  `true`  | `undefined` | Children are wrapped in a `React.Fragment`. All full screen Stops are rendered in front of those children. |
+
+## Properties
+
+### `fullScreenStack: IStreamListener<IStop[]>`
+
+MobX Strem Listener of list of React Gondola full screen Stops. This stream is observed by MobX and fires the rendering of the full screen stack in the `FullScreenPortal.render` method.
+
+## Basic usage
+
+Wrap your application main canal with `FullScreenPortal`. `FullScreenPortal` must appear at the top of your tree in order to render full screen pages.
+
+```tsx
+import React, { Component } from "react";
+import { FullScreenPortal } from "react-gondola";
+
+import { MainCanal } from "./canals/MainCanal";
+
+export default class App extends Component {
+  render() {
+    return (
+      <FullScreenPortal>
+        <MainCanal />
+      </FullScreenPortal>
+    );
+  }
+}
+```

src/Navigation.ts

@@ -48,7 +48,7 @@ export class Navigation {
       }),
       {}
     ),
-    map(fullScreenStackMap =>
+    map((fullScreenStackMap: IFullScreenStackMap) =>
       Object.keys(fullScreenStackMap).reduce(
         (fullScreenStack: Stack, canalId: string) =>
           fullScreenStack.concat(fullScreenStackMap[canalId]),