feat(docz): add custom routes for docs

examples/basic/src/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { doc } from 'playgrodd'
+
+doc('Home')
+  .route('/')
+  .order(1)
+  .section(() => <div>This is home</div>)

packages/playgrodd-theme-default/src/components/List.jsx

@@ -33,9 +33,9 @@ export const List = () => (
   <Docs>
     {docs => (
       <Sidebar>
-        {docs.map(doc => (
-          <li key={doc.id}>
-            <Link to={doc.route}>{doc.name}</Link>
+        {docs.map(({ id, name, docRoute }) => (
+          <li key={id}>
+            <Link to={docRoute}>{name}</Link>
           </li>
         ))}
       </Sidebar>

packages/playgrodd/index.d.ts

@@ -18,14 +18,17 @@ declare module 'playgrodd' {
   export class Doc {
     public id: string
     public name: string
-    public docDescription: string | null
     public sections: Section[]
-    public route: string
+    public docDescription: string | null
+    public docRoute: string
+    public docOrder: number
 
     public constructor({ name }: DocConstructorArgs)
 
     public description(value: string): Doc
     public section(...args: any[]): Doc
+    public route(value: string): Doc
+    public order(num: number): Doc
   }
 
   export interface DocMap {

packages/playgrodd/src/components/Docs.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react'
 import { SFC } from 'react'
 import { Subscribe } from 'unstated'
-import { DocsProps } from 'playgrodd'
+import { Doc, DocsProps } from 'playgrodd'
 
 import { DocsContainer } from '../container'
 
+const sortByOrder = (a: Doc, b: Doc) => b.docOrder - a.docOrder
+
 export const Docs: SFC<DocsProps> = ({ children }) => (
   <Subscribe to={[DocsContainer]}>
-    {({ state }) => children(Object.values(state.docs))}
+    {({ state }) => {
+      const docsArr: Doc[] = Object.values(state.docs)
+      return children(docsArr.sort(sortByOrder))
+    }}
   </Subscribe>
 )

packages/playgrodd/src/components/Preview.tsx

@@ -17,7 +17,7 @@ export const Preview: SFC<PreviewProps> = ({ children }) => (
           <Route
             exact
             key={doc.id}
-            path={doc.route}
+            path={doc.docRoute}
             render={() => children(doc)}
           />
         ))

packages/playgrodd/src/docs/index.ts

@@ -10,12 +10,16 @@ export class Doc {
   private _name: string
   private _description: string | null
   private _sections: Section[]
+  private _route: string
+  private _order: number
 
   constructor({ name }: DocConstructorArgs) {
     this._id = ulid()
     this._name = name
-    this._sections = []
     this._description = null
+    this._sections = []
+    this._route = `/${name}`
+    this._order = 0
 
     container.addDoc(this)
     return this
@@ -41,6 +45,16 @@ export class Doc {
     return this
   }
 
+  public route(value: string): Doc {
+    this._route = value
+    return this
+  }
+
+  public order(num: number): Doc {
+    this._order = num
+    return this
+  }
+
   // getters
 
   public get id(): string {
@@ -51,16 +65,20 @@ export class Doc {
     return this._name
   }
 
+  public get sections(): Section[] {
+    return this._sections
+  }
+
   public get docDescription(): string | null {
     return this._description
   }
 
-  public get sections(): Section[] {
-    return this._sections
+  public get docRoute(): string {
+    return this._route
   }
 
-  public get route(): string {
-    return `/${this._name}`
+  public get docOrder(): number {
+    return this._order
   }
 }