feat(docz): add doc page wrapper as component

Author: pedronauck

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

@@ -2,14 +2,15 @@ import styled from 'react-emotion'
 
 export const H1 = styled('h1')`
   position: relative;
+  display: table;
   ${p => p.theme.styles.h1};
 
   &:before {
     position: absolute;
     content: '';
-    bottom: 0;
+    bottom: 5%;
     left: 0;
-    width: 10%;
+    width: 30%;
     height: 3px;
     background: ${p => p.theme.colors.primary};
   }

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { PageProps } from 'docz'
+import { SFC } from 'react'
+import styled from 'react-emotion'
+
+export const Container = styled('div')`
+  margin: 0 auto;
+  ${p => p.theme.styles.container};
+`
+
+const Wrapper = styled('div')`
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+`
+
+export const Page: SFC<PageProps> = ({ children, ...props }) => (
+  <Wrapper>
+    <Container>{children}</Container>
+  </Wrapper>
+)

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

@@ -10,7 +10,7 @@ interface TooltipProps {
 
 export const Tooltip: SFC<TooltipProps> = ({ text, children }) => (
   <ThemeConfig>
-    {({ config }) => (
+    {config => (
       <BaseTooltip styles={config.styles.tooltip} content={text}>
         {children}
       </BaseTooltip>

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

@@ -1,11 +1,11 @@
-export { Container } from './Container'
 export { H1 } from './H1'
 export { H2 } from './H2'
 export { H3 } from './H3'
 export { H4 } from './H4'
 export { H5 } from './H5'
 export { H6 } from './H6'
 export { List } from './List'
+export { Page } from './Page'
 export { Pre } from './Pre'
 export { Render } from './Render'
 export { Table } from './Table'

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

@@ -1,46 +1,35 @@
 import './styles/prism-theme'
 
 import * as React from 'react'
-import styled from 'react-emotion'
 import { theme, DocPreview, ThemeConfig } from 'docz'
 import { ThemeProvider } from 'emotion-theming'
 
-import * as components from './components/ui'
-import { Container } from './components/ui'
-import { Sidebar, Main } from './components/shared'
 import { config } from './config'
-
-const Page = styled('div')`
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-`
+import { Sidebar, Main } from './components/shared'
+import * as components from './components/ui'
 
 const Theme = () => (
   <ThemeConfig>
-    {({ config }) => (
+    {config => (
       <ThemeProvider theme={config}>
         <Main config={config}>
           <Sidebar />
-          <Page>
-            <Container>
-              <DocPreview
-                components={{
-                  h1: components.H1,
-                  h2: components.H2,
-                  h3: components.H3,
-                  h4: components.H4,
-                  h5: components.H5,
-                  h6: components.H6,
-                  ul: components.List,
-                  table: components.Table,
-                  render: components.Render,
-                  tooltip: components.Tooltip,
-                  pre: components.Pre,
-                }}
-              />
-            </Container>
-          </Page>
+          <DocPreview
+            components={{
+              page: components.Page,
+              render: components.Render,
+              h1: components.H1,
+              h2: components.H2,
+              h3: components.H3,
+              h4: components.H4,
+              h5: components.H5,
+              h6: components.H6,
+              ul: components.List,
+              table: components.Table,
+              pre: components.Pre,
+              tooltip: components.Tooltip,
+            }}
+          />
         </Main>
       </ThemeProvider>
     )}

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

@@ -1,39 +1,67 @@
 import * as React from 'react'
 import { SFC } from 'react'
 import loadable from 'loadable-components'
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, RouteComponentProps } from 'react-router-dom'
 
-import { dataContext } from '../theme'
+import { RenderComponent } from './Playground'
+import { dataContext, Entry } from '../theme'
+
+export type PageProps = RouteComponentProps<any> & {
+  doc?: Entry
+}
 
 export interface DocPreviewProps {
   components: {
+    page?: React.ComponentType<PageProps>
+    render?: RenderComponent
+    h1?: React.ComponentType<any>
+    h2?: React.ComponentType<any>
+    h3?: React.ComponentType<any>
+    h4?: React.ComponentType<any>
+    h5?: React.ComponentType<any>
+    h6?: React.ComponentType<any>
+    ul?: React.ComponentType<any>
+    table?: React.ComponentType<any>
+    pre?: React.ComponentType<any>
     [key: string]: any
   }
 }
 
-export const DocPreview: SFC<DocPreviewProps> = ({ components }) => (
-  <dataContext.Consumer>
-    {({ imports, entries }) => (
-      <Switch>
-        {Object.keys(imports).map(path => {
-          const entry = entries && entries[path]
-          const asyncComponent = loadable(async () => {
-            const { default: Component } = await imports[path]()
-            return props => <Component {...props} components={components} />
-          })
+export const DocPreview: SFC<DocPreviewProps> = ({ components }) => {
+  const Page = components.page
 
-          return (
-            entry && (
-              <Route
-                exact
-                key={entry.id}
-                path={entry.route}
-                component={asyncComponent}
-              />
+  return (
+    <dataContext.Consumer>
+      {({ imports, entries }) => (
+        <Switch>
+          {Object.keys(imports).map(path => {
+            const entry = entries && entries[path]
+            const AsyncComponent = loadable(async () => {
+              const { default: Component } = await imports[path]()
+              return props => <Component {...props} components={components} />
+            })
+
+            return (
+              entry && (
+                <Route
+                  exact
+                  key={entry.id}
+                  path={entry.route}
+                  render={props =>
+                    Page ? (
+                      <Page {...props} doc={entry}>
+                        <AsyncComponent />
+                      </Page>
+                    ) : (
+                      <AsyncComponent {...props} />
+                    )
+                  }
+                />
+              )
             )
-          )
-        })}
-      </Switch>
-    )}
-  </dataContext.Consumer>
-)
+          })}
+        </Switch>
+      )}
+    </dataContext.Consumer>
+  )
+}

packages/docz/src/components/DocPreview.tsx

@@ -1,7 +1,7 @@
 export { theme, Entry } from './theme'
-export { DocPreview } from './components/DocPreview'
+export { DocPreview, PageProps } from './components/DocPreview'
 export { Docs, DocsRenderProps } from './components/Docs'
 export { Link } from './components/Link'
 export { Playground, RenderComponent } from './components/Playground'
 export { PropsTable } from './components/PropsTable'
-export { ThemeConfig, ThemeConfigRenderProps } from './components/ThemeConfig'
+export { ThemeConfig } from './components/ThemeConfig'