feat: improve docz theme to use theme config

packages/docz-core/templates/app.tpl.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { hot } from 'react-hot-loader'
-import { Theme } from '<%- theme %>'
+import Theme from '<%- theme %>'
 
 const socket = new WebSocket(`<%- websocketUrl %>`)
 const _wrappers = [<% if (wrappers) {%><%- wrappers %><%}%>]

packages/docz-theme-default/package.json

@@ -20,6 +20,8 @@
     "docz": "^0.0.1",
     "emotion": "^9.1.2",
     "emotion-normalize": "^7.0.1",
+    "emotion-theming": "^9.1.2",
+    "fast-deep-equal": "^2.0.1",
     "history": "^4.7.2",
     "polished": "^1.9.2",
     "prismjs": "^1.14.0",

packages/docz-theme-default/src/components/shared/Main/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Component } from 'react'
+import styled from 'react-emotion'
+import equals from 'fast-deep-equal'
+
+import { base } from '../../../styles/base'
+
+const Wrapper = styled('div')`
+  display: flex;
+  height: 100vh;
+`
+
+interface MainProps {
+  config: any
+}
+
+export class Main extends Component<MainProps> {
+  public componentDidUpdate(prevProps: MainProps): void {
+    const { config } = this.props
+
+    if (!equals(prevProps.config, config)) {
+      base(config)
+    }
+  }
+
+  public componentDidMount(): void {
+    base(this.props.config)
+  }
+
+  public render(): React.ReactNode {
+    return <Wrapper>{this.props.children}</Wrapper>
+  }
+}

packages/docz-theme-default/src/modules/Sidebar/Menu.tsx → packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx

@@ -1,37 +1,15 @@
 import * as React from 'react'
-import { rem } from 'polished'
 import { SFC } from 'react'
 import { Entry, Link } from 'docz'
 import { Toggle } from 'react-powerplug'
 import { ChevronDown } from 'react-feather'
-import styled, { css } from 'react-emotion'
-
-import * as colors from '../../styles/colors'
+import styled from 'react-emotion'
 
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
 `
 
-export const menuStyle = css`
-  position: relative;
-  display: block;
-  padding: ${rem(20)} ${rem(30)};
-  border-bottom: 1px solid ${colors.border};
-  background: white;
-  font-size: 18px;
-  color: ${colors.steel};
-
-  &:hover,
-  &:visited {
-    color: ${colors.steel};
-  }
-`
-
-const Toggler = styled('a')`
-  ${menuStyle};
-`
-
 interface IconProps {
   opened: boolean
 }
@@ -45,51 +23,18 @@ const Icon = styled<IconProps, 'div'>('div')`
   transition: transform 0.3s;
 
   & svg {
-    stroke: ${colors.steel};
+    stroke: ${p => p.theme.colors.main};
   }
 `
 
-const List = styled('dl')`
-  margin: 0;
-  padding: 0;
-  background: ${colors.snow};
-
-  a {
-    padding: 10px ${rem(30)};
-    display: block;
-    position: relative;
-    border-bottom: 1px solid ${colors.border};
-    color: ${colors.silver};
-    font-size: ${rem(15)};
-  }
-
-  a:before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background: ${colors.purple};
-    transform: scaleX(0);
-    transform-origin: 0 50%;
-    transition: transform 0.3s;
-  }
-
-  a.hover::before,
-  a.active:before {
-    transform: scaleX(1);
-  }
-`
+export const isActive = (match: any, location: any) =>
+  match && match.url === location.pathname
 
 export interface MenuProps {
   menu: string
   docs: Entry[]
 }
 
-const isActive = (match: any, location: any) =>
-  match && match.url === location.pathname
-
 export const Menu: SFC<MenuProps> = ({ menu, docs }) => (
   <Toggle initial={false}>
     {({ on, toggle }: any) => {
@@ -100,22 +45,22 @@ export const Menu: SFC<MenuProps> = ({ menu, docs }) => (
 
       return (
         <Wrapper>
-          <Toggler href="#" onClick={handleToggle}>
+          <a href="#" onClick={handleToggle}>
             {menu}
             <Icon opened={on}>
               <ChevronDown size={15} />
             </Icon>
-          </Toggler>
+          </a>
           {on && (
-            <List>
+            <dl>
               {docs.map(doc => (
                 <dt key={doc.id}>
                   <Link isActive={isActive} to={doc.slug}>
                     {doc.name}
                   </Link>
                 </dt>
               ))}
-            </List>
+            </dl>
           )}
         </Wrapper>
       )

packages/docz-theme-default/src/components/shared/Sidebar/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Docs, Link, Entry } from 'docz'
+import styled from 'react-emotion'
+
+import { Menu, isActive } from './Menu'
+
+const Wrapper = styled('div')`
+  height: 100%;
+  ${p => p.theme.styles.sidebar};
+
+  a {
+    position: relative;
+    display: block;
+    padding: 6px 16px;
+    font-weight: 600;
+    color: ${p => p.theme.colors.main};
+  }
+
+  a:hover,
+  a:visited {
+    color: ${p => p.theme.colors.main};
+  }
+
+  a:hover,
+  a.active {
+    border-radius: 5px;
+    color: ${p => p.theme.colors.primary};
+    font-weight: 600;
+  }
+
+  dl {
+    padding: 0;
+    margin: 0 0 0 20px;
+  }
+
+  dl a {
+    font-weight: 400;
+  }
+`
+
+export const Sidebar = () => (
+  <Docs>
+    {({ docs, menus }) => {
+      const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu)
+      const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu)
+
+      return (
+        <Wrapper>
+          {docsWithoutMenu.map(doc => (
+            <Link key={doc.id} to={doc.slug} isActive={isActive}>
+              {doc.name}
+            </Link>
+          ))}
+          {menus.map(menu => (
+            <Menu key={menu} menu={menu} docs={fromMenu(menu)} />
+          ))}
+        </Wrapper>
+      )
+    }}
+  </Docs>
+)

packages/docz-theme-default/src/components/shared/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar'
+export { Main } from './Main'

packages/docz-theme-default/src/components/ui/Container.tsx

@@ -0,0 +1,6 @@
+import styled from 'react-emotion'
+
+export const Container = styled('div')`
+  margin: 0 auto;
+  ${p => p.theme.styles.container};
+`

packages/docz-theme-default/src/components/ui/H1.tsx

@@ -0,0 +1,6 @@
+import styled from 'react-emotion'
+
+export const H1 = styled('h1')`
+  position: relative;
+  ${p => p.theme.styles.h1};
+`

packages/docz-theme-default/src/components/ui/H2.tsx

@@ -0,0 +1,5 @@
+import styled from 'react-emotion'
+
+export const H2 = styled('h2')`
+  ${p => p.theme.styles.h2};
+`

packages/docz-theme-default/src/components/ui/H3.tsx

@@ -0,0 +1,5 @@
+import styled from 'react-emotion'
+
+export const H3 = styled('h3')`
+  ${p => p.theme.styles.h3};
+`

packages/docz-theme-default/src/components/ui/H4.tsx

@@ -0,0 +1,5 @@
+import styled from 'react-emotion'
+
+export const H4 = styled('h4')`
+  ${p => p.theme.styles.h4};
+`

packages/docz-theme-default/src/components/ui/H5.tsx

@@ -0,0 +1,5 @@
+import styled from 'react-emotion'
+
+export const H5 = styled('h5')`
+  ${p => p.theme.styles.h5};
+`