[docs] Linkify parameter types (#2403)

docs/docs/BottomTabs.md

@@ -4,5 +4,5 @@
 
 | Name | Type |
 | --- | --- |
-| tabs | <code>Array.&lt;Container&gt;</code> | 
+| tabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
 

docs/docs/Container.md

@@ -5,5 +5,5 @@
 | Name | Type | Description |
 | --- | --- | --- |
 | name | <code>string</code> | The container's registered name |
-| passProps | <code>Object</code> | props |
+| passProps | <code>object</code> | props |
 

docs/docs/Navigation.md

@@ -41,7 +41,7 @@ Reset the navigation stack to a new screen (the stack root is changed).
 
 | Param | Type |
 | --- | --- |
-| root | <code>Root</code> | 
+| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> | 
 
 
 * * *
@@ -54,7 +54,7 @@ Set default options to all screens. Useful for declaring a consistent style acro
 
 | Param | Type |
 | --- | --- |
-| options | <code>NavigationOptions</code> | 
+| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> | 
 
 
 * * *
@@ -68,7 +68,7 @@ Change a containers navigation options
 | Param | Type | Description |
 | --- | --- | --- |
 | containerId | <code>string</code> | The container's id. |
-| options | <code>NavigationOptions</code> |  |
+| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
 
 
 * * *
@@ -81,7 +81,7 @@ Show a screen as a modal.
 
 | Param | Type |
 | --- | --- |
-| params | <code>Object</code> | 
+| params | <code>object</code> | 
 
 
 * * *
@@ -94,7 +94,7 @@ Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>String</code> | The container's id. |
+| containerId | <code>string</code> | The container's id. |
 
 
 * * *
@@ -115,8 +115,8 @@ Push a new screen into this screen's navigation stack.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>String</code> | The container's id. |
-| params | <code>\*</code> |  |
+| containerId | <code>string</code> | The container's id. |
+| params | <code>*</code> |  |
 
 
 * * *
@@ -129,8 +129,8 @@ Pop a container from the stack, regardless of it's position.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>String</code> | The container's id. |
-| params | <code>\*</code> |  |
+| containerId | <code>string</code> | The container's id. |
+| params | <code>*</code> |  |
 
 
 * * *
@@ -143,7 +143,7 @@ Pop the stack to a given container
 
 | Param | Type | Description |
 | --- | --- | --- |
-| containerId | <code>String</code> | The container's id. |
+| containerId | <code>string</code> | The container's id. |
 
 
 * * *
@@ -156,7 +156,7 @@ Pop the container's stack to root.
 
 | Param | Type |
 | --- | --- |
-| containerId | <code>\*</code> | 
+| containerId | <code>*</code> | 
 
 
 * * *

docs/docs/Root.md

@@ -4,7 +4,7 @@
 
 | Name | Type |
 | --- | --- |
-| container | <code>Container</code> | 
-| sideMenu | <code>SideMenu</code> | 
-| bottomTabs | <code>BottomTabs</code> | 
+| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/BottomTabs">BottomTabs</a> | 
 

docs/docs/SideMenu.md

@@ -4,6 +4,6 @@
 
 | Name | Type |
 | --- | --- |
-| left | <code>Container</code> | 
-| right | <code>Container</code> | 
+| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
 

docs/docs/options/Button.md

@@ -4,7 +4,7 @@
 
 | Name | Type |
 | --- | --- |
-| id | <code>String</code> | 
+| id | <code>string</code> | 
 | testID | <code>string</code> | 
 | title | <code>string</code> | 
 | buttonColor | <code>string</code> | 

docs/docs/options/NavigationOptions.md

@@ -4,9 +4,9 @@
 
 | Name | Type |
 | --- | --- |
-| topBar | <code>TopBar</code> | 
-| bottomTabs | <code>BottomTabs</code> | 
-| orientation | <code>String</code> | 
-| rightButtons | <code>Button</code> | 
-| leftButtons | <code>Button</code> | 
+| topBar | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/TopBar">TopBar</a> | 
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTabs">BottomTabs</a> | 
+| orientation | <code>string</code> | 
+| rightButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
+| leftButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
 

docs/linkify.js

@@ -0,0 +1,9 @@
+const URL = 'https://wix.github.io/react-native-navigation/v2/#/docs/';
+const isLetter = (c) => c.toLowerCase() !== c.toUpperCase();
+const isClass = (type) => isLetter(type[0]) && (type.includes(':') || type[0] === type[0].toUpperCase());
+const stripArray = (type) => type.substring(type.indexOf('<') + 1, type.indexOf('>'));
+const classUrl = (type) => URL + (type.includes('Array.<') ? stripArray(type) : type).replace(':', '/');
+const className = (type) => type.includes('Array.<') ? className(stripArray(type)) + '[]' : type.substring(type.indexOf(':') + 1);
+const url = (type) => `<a href="${classUrl(type)}">${className(type)}</a>`;
+const simpleString = (type) => `<code>${type}</code>`;
+exports.linkify = (type) => isClass(type) ? url(type) : simpleString(type);

docs/stringify.js

@@ -0,0 +1 @@
+exports.stringify = (obj) => JSON.stringify(obj);

docs/templates/link.hbs

@@ -0,0 +1,25 @@
+{{! usage: link to="namepath" html=true/false caption="optional caption"~}}
+
+{{~#if html~}}
+<code>
+
+{{~#link to~}}
+{{#if url~}}
+<a href="{{{url}}}">{{#if ../../caption}}{{../../../caption}}{{else}}{{name}}{{/if}}</a>
+{{~else~}}
+{{#if ../../caption}}{{../../../caption}}{{else}}{{name}}{{/if~}}
+{{/if~}}
+{{/link~}}
+
+</code>
+{{~else~}}
+
+{{#link to~}}
+{{#if url~}}
+[<code>{{#if ../../caption}}{{escape ../../../caption}}{{else}}{{escape name}}{{/if}}</code>]({{{url}}})
+{{~else~}}
+{{#if ../../caption}}<code>{{escape ../../../caption}}</code>{{else}}{{{linkify name}}}{{/if~}}
+{{~/if~}}
+{{/link~}}
+
+{{/if~}}

docs/templates/linked-type-list.hbs

@@ -0,0 +1,4 @@
+{{#each types~}}
+{{>link to=this html=../html ~}}
+{{#unless @last}}{{{../../delimiter}}}{{/unless~}}
+{{/each}}

docs/templates/param-table-name.hbs

@@ -0,0 +1,4 @@
+{{#if optional}}[{{/if~}}
+{{#if variable}}...{{/if~}}
+{{{name}~}}
+{{#if optional}}]{{/if}}

docs/templates/params-table.hbs

@@ -0,0 +1,12 @@
+{{#if params}}
+
+{{tableHead params "name|Param" "type|Type" "defaultvalue|Default" "description|Description" ~}}
+
+{{#tableRow params "name" "type" "defaultvalue" "description" ~}}
+| {{#if @col1}}{{>param-table-name}} | {{/if~}}
+{{#if @col2}}{{>linked-type-list types=type.names delimiter=" \| " }} | {{/if~}}
+{{#if @col3}}{{>defaultvalue}} | {{/if~}}
+{{#if @col4}}{{{stripNewlines (inlineLinks description)}}} |{{/if}}
+{{/tableRow}}
+
+{{/if}}

lib/src/Navigation.js

@@ -48,7 +48,7 @@ class Navigation {
 
   /**
    * Set default options to all screens. Useful for declaring a consistent style across the app.
-   * @param {NavigationOptions} options
+   * @param {options:NavigationOptions} options
    */
   setDefaultOptions(options) {
     this.commands.setDefaultOptions(options);
@@ -57,7 +57,7 @@ class Navigation {
   /**
    * Change a containers navigation options
    * @param {string} containerId The container's id.
-   * @param {NavigationOptions} options
+   * @param {options:NavigationOptions} options
    */
   setOptions(containerId, options) {
     this.commands.setOptions(containerId, new NavigationOptions(options));
@@ -65,7 +65,7 @@ class Navigation {
 
   /**
    * Show a screen as a modal.
-   * @param {Object} params
+   * @param {object} params
    */
   showModal(params) {
     return this.commands.showModal(params);
@@ -73,7 +73,7 @@ class Navigation {
 
   /**
    * Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack.
-   * @param {String} containerId The container's id.
+   * @param {string} containerId The container's id.
    */
   dismissModal(containerId) {
     return this.commands.dismissModal(containerId);
@@ -88,7 +88,7 @@ class Navigation {
 
   /**
    * Push a new screen into this screen's navigation stack.
-   * @param {String} containerId The container's id.
+   * @param {string} containerId The container's id.
    * @param {*} params
    */
   push(containerId, params) {
@@ -97,7 +97,7 @@ class Navigation {
 
   /**
    * Pop a container from the stack, regardless of it's position.
-   * @param {String} containerId The container's id.
+   * @param {string} containerId The container's id.
    * @param {*} params
    */
   pop(containerId, params) {
@@ -106,7 +106,7 @@ class Navigation {
 
   /**
    * Pop the stack to a given container
-   * @param {String} containerId The container's id.
+   * @param {string} containerId The container's id.
    */
   popTo(containerId) {
     return this.commands.popTo(containerId);

lib/src/params/containers/Container.js

@@ -1,7 +1,7 @@
 class Container {
   /**
    * @property {string} name The container's registered name
-   * @property {Object} [passProps] props
+   * @property {object} [passProps] props
    */
   constructor(params) {
     if (!params || !params.name) {

lib/src/params/options/Button.js

@@ -1,6 +1,6 @@
 class Button {
   /**
-   * @property {String} id
+   * @property {string} id
    * @property {string} [testID]
    * @property {string} [title]
    * @property {string} [buttonColor]

lib/src/params/options/NavigationOptions.js

@@ -4,11 +4,11 @@ const Button = require('./Button');
 
 class NavigationOptions {
   /**
-   * @property {TopBar} topBar
-   * @property {BottomTabs} bottomTabs
-   * @property {String} [orientation]
-   * @property {Button} [rightButtons]
-   * @property {Button} [leftButtons]
+   * @property {options:TopBar} [topBar]
+   * @property {options:BottomTabs} [bottomTabs]
+   * @property {string} [orientation]
+   * @property {options:Button[]} [rightButtons]
+   * @property {options:Button[]} [leftButtons]
    */
   constructor(options) {
     this.topBar = options.topBar && new TopBar(options.topBar);

scripts/generate-js-doc.js

@@ -7,7 +7,14 @@ const OPTIONS_DIR = BASE_DIR + 'options/';
 const CONTAINERS_DIR = BASE_DIR + 'containers/';
 const OUTPUT_DIR = './docs/docs/';
 const PARAMS_PARTIALS = ['./docs/templates/header.hbs', './docs/templates/sig-name.hbs'];
-const PARTIALS = ['./docs/templates/scope.hbs', './docs/templates/docs.hbs'];
+const PARTIALS = [
+  './docs/templates/scope.hbs',
+  './docs/templates/docs.hbs',
+  './docs/templates/param-table-name.hbs',
+  '/docs/templates/linked-type-list.hbs',
+  './docs/templates/link.hbs',
+  './docs/templates/params-table.hbs'
+];
 
 const generateMarkdownForFile = ({ file, outputDir, partial, separator }) => {
   const templateData = jsdoc2md.getTemplateDataSync({ files: file });
@@ -32,6 +39,7 @@ function createDocFileForClass({ className, templateData, outputDir, partial = [
     template,
     separators: separator,
     'heading-depth': 1,
+    helper: ['./docs/linkify.js', './docs/stringify.js'],
     partial: [...PARTIALS, ...partial]
   };
   console.log(`rendering ${className}`);