chore(docz-theme-default): refac to use new docz links and preview

packages/docz-theme-default/package.json

@@ -28,7 +28,7 @@
     "react-emotion": "^9.1.2",
     "react-feather": "^1.1.0",
     "react-lightweight-tooltip": "^1.0.0",
-    "react-router-dom": "^4.2.2"
+    "react-powerplug": "^0.1.5"
   },
   "peerDependencies": {
     "docz": "^0.0.1",
@@ -42,7 +42,6 @@
     "@babel/preset-react": "^7.0.0-beta.44",
     "@types/classnames": "^2.2.3",
     "@types/prismjs": "^1.9.0",
-    "@types/react-router-dom": "^4.2.6",
     "babel-plugin-emotion": "^9.1.0"
   }
 }

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

@@ -7,7 +7,7 @@ export const H1 = styled('h1')`
   position: relative;
   font-size: ${rem(48)};
   font-weight: 200;
-  margin: ${rem(50)} 0 ${rem(40)};
+  margin: ${rem(30)} 0 ${rem(60)};
 
   &:before {
     position: absolute;

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

@@ -3,33 +3,40 @@ import './styles/prism-theme'
 
 import * as React from 'react'
 import styled from 'react-emotion'
+import { theme, DocPreview } from 'docz'
 
-import { BrowserRouter } from 'react-router-dom'
-import { theme, Docs } from 'docz'
-
-import { Menu } from './modules/Sidebar'
-import { Doc } from './modules/Doc'
+import * as components from './components'
+import { Container } from './components'
+import { Sidebar } from './modules/Sidebar'
 
 export const Main = styled('div')`
   display: flex;
   height: 100vh;
 `
 
 const View = styled('div')`
-  width: 100%;
+  flex: 1;
   height: 100%;
   overflow-y: auto;
 `
 
 export const Theme = theme(() => (
-  <BrowserRouter>
-    <Main>
-      <Menu />
-      <View>
-        <Docs>
-          {({ docs }) => docs.map(doc => <Doc key={doc.id} {...doc} />)}
-        </Docs>
-      </View>
-    </Main>
-  </BrowserRouter>
+  <Main>
+    <Sidebar />
+    <View>
+      <Container>
+        <DocPreview
+          components={{
+            h1: components.H1,
+            h2: components.H2,
+            h3: components.H3,
+            table: components.Table,
+            render: components.Render,
+            tooltip: components.Tooltip,
+            pre: components.Pre,
+          }}
+        />
+      </Container>
+    </View>
+  </Main>
 ))

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

@@ -0,0 +1,124 @@
+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'
+
+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
+}
+
+const Icon = styled<IconProps, 'div'>('div')`
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  transform: translateY(-50%) rotate(${p => (p.opened ? '-180deg' : '0deg')});
+  transform-origin: 50% 50%;
+  transition: transform 0.3s;
+
+  & svg {
+    stroke: ${colors.steel};
+  }
+`
+
+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 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) => {
+      const handleToggle = (ev: React.SyntheticEvent<any>) => {
+        ev.preventDefault()
+        toggle()
+      }
+
+      return (
+        <Wrapper>
+          <Toggler href="#" onClick={handleToggle}>
+            {menu}
+            <Icon opened={on}>
+              <ChevronDown size={15} />
+            </Icon>
+          </Toggler>
+          {on && (
+            <List>
+              {docs.map(doc => (
+                <dt key={doc.id}>
+                  <Link isActive={isActive} to={doc.slug}>
+                    {doc.name}
+                  </Link>
+                </dt>
+              ))}
+            </List>
+          )}
+        </Wrapper>
+      )
+    }}
+  </Toggle>
+)

packages/docz-theme-default/src/modules/Sidebar/index.tsx

@@ -1,70 +1,44 @@
-import React, { Fragment, SFC } from 'react'
-import { DocObj } from 'docz'
-import { Docs } from 'docz'
+import React from 'react'
+import { Docs, Link as BaseLink, Entry } from 'docz'
 import styled from 'react-emotion'
 
 import * as colors from '../../styles/colors'
-import { Link } from './Link'
+import { Menu, menuStyle } from './Menu'
 
-const Sidebar = styled('div')`
-  padding: 15px 0;
-  width: 200px;
-  height: 100vh;
+const Wrapper = styled('div')`
+  width: 320px;
+  height: 100%;
   border-right: 1px solid ${colors.border};
-  background: ${colors.snow};
 `
 
-const List = styled('ul')`
-  list-style: none;
-  padding: 0;
-  margin: 5px 0;
-
-  & ~ & {
-    margin-top: 10px;
-  }
-`
-
-const Category = styled('li')`
-  padding: 0 20px;
-  margin: 20px 0 5px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: ${colors.steel};
+const Link = styled(BaseLink)`
+  ${menuStyle};
 `
 
-interface LinksProps {
-  docs: DocObj[]
-}
-
-const Links: SFC<LinksProps> = ({ docs }) => (
-  <Fragment>
-    {docs.map(doc => (
-      <li key={doc.id}>
-        <Link to={doc.route}>{doc.name}</Link>
-      </li>
-    ))}
-  </Fragment>
-)
-
-export const Menu = () => (
+export const Sidebar = () => (
   <Docs>
-    {({ categories, docs }) => (
-      <Sidebar>
-        <List>
-          <Links docs={docs.filter(doc => !doc.category)} />
-          {categories.map(category => (
-            <Fragment key={category}>
-              <Category>{category}</Category>
-              <Links
-                docs={docs.filter(
-                  doc => doc.category && doc.category === category
-                )}
-              />
-            </Fragment>
+    {({ docs, menus }) => {
+      const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu)
+
+      return (
+        <Wrapper>
+          {docsWithoutMenu.map(doc => (
+            <Link key={doc.id} to={doc.slug}>
+              {doc.name}
+            </Link>
           ))}
-        </List>
-      </Sidebar>
-    )}
+          {menus.map(
+            menu =>
+              menu && (
+                <Menu
+                  key={menu}
+                  menu={menu}
+                  docs={docs.filter(doc => doc.menu && doc.menu === menu)}
+                />
+              )
+          )}
+        </Wrapper>
+      )
+    }}
   </Docs>
 )

packages/docz-theme-default/src/types.d.ts

@@ -1,2 +1,3 @@
 declare module 'react-feather'
+declare module 'react-powerplug'
 declare module 'react-lightweight-tooltip'