chore(docz): use category() instead of group

examples/basic/src/components/Alert.doc.jsx

@@ -2,10 +2,9 @@ import React, { Fragment } from 'react'
 import { doc } from 'docz'
 
 import { Alert } from './Alert'
-import { components } from './'
 
 doc('Alert')
-  .group(components)
+  .category('Components')
   .description('This component is used to show alerts')
   .section('Basic usage', () => <Alert>Some message</Alert>)
   .section('Using different kinds', () => (

examples/basic/src/components/Button.doc.jsx

@@ -2,8 +2,7 @@ import React from 'react'
 import { doc } from 'docz'
 
 import { Button } from './Button'
-import { components } from './'
 
 doc('Button')
-  .group(components)
+  .category('Components')
   .section(() => <Button>Click me</Button>)

examples/basic/src/components/index.jsx

@@ -1,6 +1,2 @@
-import { group } from 'docz'
-
 export { Alert } from './Alert'
 export { Button } from './Button'
-
-export const components = group('Components')

examples/basic/src/hocs/index.jsx

@@ -1,4 +1 @@
-import { group } from 'docz'
 export { withProps } from './withProps'
-
-export const hocs = group('hocs')

examples/basic/src/hocs/withProps.doc.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { doc } from 'docz'
 
-import { hocs } from './'
-
 doc('withProps')
-  .group(hocs)
+  .category('Hocs')
   .section(() => <div>This section talk about withProps hoc</div>)

packages/docz/index.d.ts

@@ -3,73 +3,60 @@ import { SFC, ReactNode, ComponentType } from 'react'
 export interface Section {
   id: string
   title?: string
+  code?: string
   render: () => ReactNode
 }
 
-export interface GroupConstructorArgs {
-  name: string
-}
-
-export class Group {
-  public constructor({ name }: GroupConstructorArgs)
-
-  public route(value: string): Group
-  public order(num: number): Group
-  public toObject(): GroupObj
-
-  public name: string
-}
-
-export interface GroupObj {
-  id: string
-  name: string
-  order: number
-  route: string
-}
-
 export interface DocConstructorArgs {
   name: string
 }
 
-export class Doc {
-  public constructor({ name }: DocConstructorArgs)
+export interface DocObj {
+  readonly name: string
+  readonly route: string
+  readonly id: string | undefined
+  readonly order: number
+  readonly description: string | null
+  readonly filepath: string | undefined
+  readonly category: string | undefined
+  readonly sections: Section[]
+}
 
+export class Doc {
+  public constructor(name: string)
   public order(num: number): Doc
-  public group(group: Group): Doc
+  public category(name: string): Doc
   public route(value: string): Doc
   public description(value: string): Doc
   public section(...args: any[]): Doc
   public toObject(): DocObj
-
-  public name: string
 }
 
-export interface DocObj {
-  readonly id: string
-  readonly name: string
-  readonly group: GroupObj | null
-  readonly sections: Section[]
-  readonly description: string | null
-  readonly route: string
-  readonly order: number
+export interface Entry {
+  id: string
+  name: string
+  filepath: string
+  importPath: string
+  sections: string[]
 }
 
 /**
  * Components
  */
 
-export function createTheme(WrappedComponent: ComponentType): ComponentType
-
 export interface DocsRenderProps {
-  groups: GroupObj[]
   docs: DocObj[]
+  categories: string[]
 }
 
 export interface DocsProps {
-  children: ({ groups, docs }: DocsRenderProps) => ReactNode
+  children: (renderProps: DocsRenderProps) => ReactNode
 }
 
-export const Docs: SFC<DocsProps>
+/**
+ * Api
+ */
 
 export function doc(name: string): Doc
-export function group(name: string): Group
+export function theme(WrappedComponent: ComponentType): ComponentType
+export const Docs: SFC<DocsProps>

packages/docz/src/Doc.ts

@@ -2,24 +2,23 @@
 import { ulid } from 'ulid'
 import kebabcase from 'lodash.kebabcase'
 
+import { cache } from './Docs'
 import { isFn, safeUrl } from './utils/helpers'
-import { Section, DocConstructorArgs, DocObj, Group, GroupObj } from '../'
-import { docsContainer } from './DocsContainer'
+import { Section, DocObj, Entry } from '../'
 
-class Doc {
-  private _id: string
+export class Doc {
   private _name: string
+  private _id: string | undefined
+  private _filepath: string | undefined
+  private _category: string | undefined
   private _description: string | null
-  private _group: GroupObj | null
   private _sections: Section[]
   private _route: string
   private _order: number
 
-  constructor({ name }: DocConstructorArgs) {
-    this._id = ulid()
+  constructor(name: string) {
     this._name = name
     this._description = null
-    this._group = null
     this._sections = []
     this._route = `/${kebabcase(name)}`
     this._order = 0
@@ -27,15 +26,9 @@ class Doc {
     return this
   }
 
-  /**
-   * setters
-   */
-
-  public group(group: Group): Doc {
-    const groupObj = group.toObject()
-
-    this._group = groupObj
-    this._route = groupObj.route + this._route
+  public category(category: string): Doc {
+    this._category = category
+    this._route = `/${kebabcase(category)}` + this._route
 
     return this
   }
@@ -68,21 +61,28 @@ class Doc {
     return this
   }
 
-  public get name(): string {
-    return this._name
-  }
+  public findEntryAndMerge(entries: Entry[]): Doc {
+    const entry = entries.find(entry => entry.name === this._name)
 
-  /**
-   * getters
-   */
+    if (entry) {
+      this._id = entry.id
+      this._filepath = entry.filepath
+      this._sections.forEach((section, id) => {
+        section.code = entry.sections[id]
+      })
+    }
+
+    return this
+  }
 
   public toObject(): DocObj {
     return {
-      description: this._description,
-      group: this._group,
       id: this._id,
       name: this._name,
       order: this._order,
+      category: this._category,
+      description: this._description,
+      filepath: this._filepath,
       route: this._route,
       sections: this._sections,
     }
@@ -90,8 +90,8 @@ class Doc {
 }
 
 export const doc = (name: string): Doc => {
-  const newDoc = new Doc({ name })
+  const newDoc = new Doc(name)
 
-  docsContainer.addDoc(newDoc)
+  cache.set(name, newDoc)
   return newDoc
 }

packages/docz/src/Group.ts

@@ -1,53 +0,0 @@
-/* tslint:disable:variable-name */
-import { ulid } from 'ulid'
-import kebabcase from 'lodash.kebabcase'
-
-import { GroupConstructorArgs, GroupObj } from '../'
-import { safeUrl } from './utils/helpers'
-import { docsContainer } from './DocsContainer'
-
-class Group {
-  private _id: string
-  private _order: number
-  private _name: string
-  private _route: string
-
-  constructor({ name }: GroupConstructorArgs) {
-    this._id = ulid()
-    this._name = name
-    this._route = safeUrl(`/${kebabcase(name)}`)
-    this._order = 0
-
-    return this
-  }
-
-  public route(path: string): Group {
-    this._route = safeUrl(path)
-    return this
-  }
-
-  public order(num: number): Group {
-    this._order = num
-    return this
-  }
-
-  public toObject(): GroupObj {
-    return {
-      id: this._id,
-      name: this._name,
-      order: this._order,
-      route: this._route,
-    }
-  }
-
-  public get name(): string {
-    return this._name
-  }
-}
-
-export const group = (name: string): Group => {
-  const newGroup = new Group({ name })
-
-  docsContainer.addGroup(newGroup)
-  return newGroup
-}

packages/docz/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "dist",
     "rootDir": "src",
     "declaration": false,
-    "typeRoots": ["node_modules/@types", "index.d.ts"]
+    "typeRoots": ["node_modules/@types", "src/index.d.ts"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules/**"]