feat: parse doc class to object

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

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

packages/docz-theme-default/src/components/View.jsx

@@ -26,10 +26,10 @@ const Section = styled('div')`
 
 export const View = () => (
   <Preview>
-    {({ id, name, docDescription, sections }) => (
+    {({ id, name, description, sections }) => (
       <Container key={id}>
         <Title>{name}</Title>
-        {docDescription && <Description>{docDescription}</Description>}
+        {description && <Description>{description}</Description>}
         {sections &&
           sections.length > 0 &&
           sections.map(section => (

packages/docz/index.d.ts

@@ -6,28 +6,29 @@ export interface Section {
   render: () => ReactNode
 }
 
-export interface DocArgs {
-  name: string
-}
-
 export interface DocConstructorArgs {
   name: string
 }
 
 export class Doc {
-  public id: string
-  public name: string
-  public sections: Section[]
-  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
+  public toObject(): DocObj
+
+  public name: string
+}
+
+export interface DocObj {
+  readonly id: string
+  readonly name: string
+  readonly sections: Section[]
+  readonly description: string | null
+  readonly route: string
+  readonly order: number
 }
 
 /**
@@ -37,13 +38,13 @@ export class Doc {
 export function createTheme(WrappedComponent: ComponentType): ComponentType
 
 export interface PreviewProps {
-  children: (doc: Doc) => ReactNode
+  children: (doc: DocObj) => ReactNode
 }
 
 export const Preview: SFC<PreviewProps>
 
 export interface DocsProps {
-  children: (docs: Doc[]) => ReactNode
+  children: (docs: DocObj[]) => ReactNode
 }
 
 export const Docs: SFC<DocsProps>

packages/docz/src/Doc.ts

@@ -2,12 +2,11 @@
 import { ulid } from 'ulid'
 import kebabcase from 'lodash.kebabcase'
 
-import { Section, DocConstructorArgs } from '../'
+import { isFn } from './utils/helpers'
+import { Section, DocConstructorArgs, DocObj } from '../'
 import { docsContainer } from './DocsContainer'
 
-const isFn = (value: any): boolean => typeof value === 'function'
-
-export class Doc {
+class Doc {
   private _id: string
   private _name: string
   private _description: string | null
@@ -26,7 +25,9 @@ export class Doc {
     return this
   }
 
-  // setters
+  /**
+   * setters
+   */
 
   public description(value: string): Doc {
     this._description = value
@@ -56,30 +57,23 @@ export class Doc {
     return this
   }
 
-  // getters
-
-  public get id(): string {
-    return this._id
-  }
-
   public get name(): string {
     return this._name
   }
 
-  public get sections(): Section[] {
-    return this._sections
-  }
-
-  public get docDescription(): string | null {
-    return this._description
-  }
-
-  public get docRoute(): string {
-    return this._route
-  }
-
-  public get docOrder(): number {
-    return this._order
+  /**
+   * getters
+   */
+
+  public toObject(): DocObj {
+    return {
+      description: this._description,
+      id: this._id,
+      name: this._name,
+      order: this._order,
+      route: this._route,
+      sections: this._sections,
+    }
   }
 }
 

packages/docz/src/components/Docs.tsx

@@ -2,18 +2,20 @@ import * as React from 'react'
 import { SFC } from 'react'
 import { Subscribe } from 'unstated'
 
-import { Doc, DocsProps } from '../../'
+import { Doc, DocObj, DocsProps } from '../../'
 import { DocsContainer } from '../DocsContainer'
+import { isFn } from '../utils/helpers'
 
-const sortByOrder = (a: Doc, b: Doc) => b.docOrder - a.docOrder
+const sortByOrder = (a: DocObj, b: DocObj) => b.order - a.order
 
 export const Docs: SFC<DocsProps> = ({ children }) => (
   <Subscribe to={[DocsContainer]}>
     {({ state }) => {
       const docs: Doc[] = Array.from(state.docs.values())
-      const sortedDocs: Doc[] = docs.sort(sortByOrder)
+      const docsObj: DocObj[] = docs.map(doc => doc.toObject())
+      const sortedDocs: DocObj[] = docsObj.sort(sortByOrder)
 
-      return children(sortedDocs)
+      return isFn(children) && children(sortedDocs)
     }}
   </Subscribe>
 )

packages/docz/src/components/Preview.tsx

@@ -5,6 +5,7 @@ import { Switch, Route } from 'react-router-dom'
 
 import { PreviewProps, Doc } from '../../'
 import { DocsContainer } from '../DocsContainer'
+import { isFn } from '../utils/helpers'
 
 export const Preview: SFC<PreviewProps> = ({ children }) => (
   <Subscribe to={[DocsContainer]}>
@@ -13,15 +14,20 @@ export const Preview: SFC<PreviewProps> = ({ children }) => (
 
       return (
         <Switch>
-          {docs.length > 0 &&
-            docs.map(doc => (
-              <Route
-                exact
-                key={doc.id}
-                path={doc.docRoute}
-                render={() => children(doc)}
-              />
-            ))}
+          {docs &&
+            docs.length > 0 &&
+            docs.map(doc => {
+              const docObj = doc.toObject()
+
+              return (
+                <Route
+                  exact
+                  key={docObj.id}
+                  path={docObj.route}
+                  render={() => isFn(children) && children(docObj)}
+                />
+              )
+            })}
         </Switch>
       )
     }}

packages/docz/src/utils/helpers.ts

@@ -0,0 +1 @@
+export const isFn = (value: any): boolean => typeof value === 'function'