feat(docz): add groups feature

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

@@ -2,8 +2,10 @@ import React, { Fragment } from 'react'
 import { doc } from 'docz'
 
 import { Alert } from './Alert'
+import { components } from './'
 
 doc('Alert')
+  .group(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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { doc } from 'docz'
+
+import { Button } from './Button'
+import { components } from './'
+
+doc('Button')
+  .group(components)
+  .section(() => <Button>Click me</Button>)

examples/basic/src/components/index.jsx

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

examples/basic/src/design.doc.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { doc } from 'docz'
+
+doc('Design System')
+  .order(0)
+  .section(() => <div>Now we will talk about design systems!</div>)

examples/basic/src/hocs/index.jsx

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

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

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

examples/basic/src/hocs/withProps.jsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const withProps = (mapProps = p => p) => WrappedComponent => props => (
+  <WrappedComponent {...props} {...mapProps(props)} />
+)

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

@@ -0,0 +1,85 @@
+import React from 'react'
+import { NavLink as BaseLink } from 'react-router-dom'
+import styled, { css } from 'react-emotion'
+
+import { Links } from 'docz'
+
+const BORDER_COLOR = '#ced6e0'
+const LINK_COLOR = '#2f3542'
+const PURPLE = '#5352ed'
+
+const Sidebar = styled('div')`
+  padding: 20px 0;
+  width: 250px;
+  height: 100vh;
+  border-right: 1px solid ${BORDER_COLOR};
+`
+
+const List = styled('ul')`
+  list-style: none;
+  padding: 5px 15px;
+  margin: 0;
+
+  & ~ & {
+    margin-top: 10px;
+  }
+`
+
+const GroupTitle = styled('div')`
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #b2bec3;
+`
+
+const LinkStyled = styled(BaseLink)`
+  display: block;
+  padding: 4px 0;
+  font-size: 14px;
+  font-weight: 700;
+
+  &,
+  &:visited {
+    color: ${LINK_COLOR};
+  }
+
+  &.active {
+    color: ${PURPLE};
+  }
+`
+
+const Link = props => {
+  const isActive = (match, location) => match && match.url === location.pathname
+  return <LinkStyled isActive={isActive} {...props} />
+}
+
+export const Menu = () => (
+  <Links>
+    {({ groups, docs }) => (
+      <Sidebar>
+        <List>
+          {docs.filter(doc => !doc.group).map(doc => (
+            <li key={doc.id}>
+              <Link to={doc.route}>{doc.name}</Link>
+            </li>
+          ))}
+        </List>
+        {groups.map(group => (
+          <List key={group.id}>
+            <li>
+              <GroupTitle>{group.name}</GroupTitle>
+              <List>
+                {docs
+                  .filter(doc => doc.group && doc.group.id === group.id)
+                  .map(doc => (
+                    <li key={doc.id}>
+                      <Link to={doc.route}>{doc.name}</Link>
+                    </li>
+                  ))}
+              </List>
+            </li>
+          </List>
+        ))}
+      </Sidebar>
+    )}
+  </Links>
+)

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

@@ -6,7 +6,7 @@ import { Preview } from 'docz'
 const Container = styled('div')`
   width: 960px;
   max-width: 960px;
-  padding: 50px 20px;
+  padding: 50px;
   margin: 0 auto;
 `
 

packages/docz-theme-default/src/index.jsx

@@ -5,9 +5,9 @@ import { createTheme } from 'docz'
 import { injectGlobal } from 'emotion'
 import { Helmet } from 'react-helmet'
 
-import { List } from './components/List'
-import { View } from './components/View'
 import { Main } from './components/Main'
+import { Menu } from './components/Menu'
+import { View } from './components/View'
 
 export const Theme = createTheme(() => (
   <React.Fragment>
@@ -18,7 +18,7 @@ export const Theme = createTheme(() => (
       />
     </Helmet>
     <Main>
-      <List />
+      <Menu />
       <View />
     </Main>
   </React.Fragment>

packages/docz-theme-default/src/styles.js

@@ -1,6 +1,6 @@
 import { css, injectGlobal } from 'emotion'
 
-const BACKGROUND = '#white'
+const BACKGROUND = 'white'
 const TEXT_COLOR = '#2f3542'
 const LINK_COLOR = '#5352ed'
 
@@ -24,6 +24,8 @@ injectGlobal`
   }
 
   body {
+    margin: 0;
+    padding: 0;
     font-family: 'Noto Sans', sans-serif;
     font-size: 16px;
     line-height: 1.5;

packages/docz/index.d.ts

@@ -6,17 +6,39 @@ export interface Section {
   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)
 
+  public order(num: number): Doc
+  public group(group: Group): Doc
+  public route(value: string): Doc
   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
@@ -25,6 +47,7 @@ export class Doc {
 export interface DocObj {
   readonly id: string
   readonly name: string
+  readonly group: GroupObj | null
   readonly sections: Section[]
   readonly description: string | null
   readonly route: string
@@ -43,8 +66,13 @@ export interface PreviewProps {
 
 export const Preview: SFC<PreviewProps>
 
-export interface DocsProps {
-  children: (docs: DocObj[]) => ReactNode
+export interface LinksObj {
+  groups: GroupObj[]
+  docs: DocObj[]
+}
+
+export interface LinksProps {
+  children: ({ groups, docs }: LinksObj) => ReactNode
 }
 
-export const Docs: SFC<DocsProps>
+export const Links: SFC<LinksProps>

packages/docz/src/Doc.ts

@@ -2,14 +2,15 @@
 import { ulid } from 'ulid'
 import kebabcase from 'lodash.kebabcase'
 
-import { isFn } from './utils/helpers'
-import { Section, DocConstructorArgs, DocObj } from '../'
+import { isFn, safeUrl } from './utils/helpers'
+import { Section, DocConstructorArgs, DocObj, Group, GroupObj } from '../'
 import { docsContainer } from './DocsContainer'
 
 class Doc {
   private _id: string
   private _name: string
   private _description: string | null
+  private _group: GroupObj | null
   private _sections: Section[]
   private _route: string
   private _order: number
@@ -18,6 +19,7 @@ class Doc {
     this._id = ulid()
     this._name = name
     this._description = null
+    this._group = null
     this._sections = []
     this._route = `/${kebabcase(name)}`
     this._order = 0
@@ -29,6 +31,20 @@ class Doc {
    * setters
    */
 
+  public group(group: Group): Doc {
+    const groupObj = group.toObject()
+
+    this._group = groupObj
+    this._route = groupObj.route + this._route
+
+    return this
+  }
+
+  public order(num: number): Doc {
+    this._order = num
+    return this
+  }
+
   public description(value: string): Doc {
     this._description = value
     return this
@@ -48,12 +64,7 @@ class Doc {
   }
 
   public route(path: string): Doc {
-    this._route = encodeURI(path.replace(/\s/g, ''))
-    return this
-  }
-
-  public order(num: number): Doc {
-    this._order = num
+    this._route = safeUrl(path)
     return this
   }
 
@@ -68,6 +79,7 @@ class Doc {
   public toObject(): DocObj {
     return {
       description: this._description,
+      group: this._group,
       id: this._id,
       name: this._name,
       order: this._order,