fix(docz): transform and merge theme config

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

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Component } from 'react'
 import { injectGlobal } from 'emotion'
 import styled from 'react-emotion'
+import get from 'lodash.get'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -23,20 +24,21 @@ const base = (body: any) =>
 
 export class Main extends Component<MainProps> {
   public componentDidUpdate(prevProps: MainProps): void {
-    const { config } = this.props
-    const prevBody = prevProps.config.styles.body
-    const body = config.styles.body
+    const body = this.getBody(this.props)
+    const prevBody = this.getBody(prevProps)
 
-    if (body && prevBody !== body) {
-      base(config.styles.body)
-    }
+    if (body && prevBody !== body) base(body)
   }
 
   public componentDidMount(): void {
-    base(this.props.config.styles.body)
+    base(this.getBody(this.props))
   }
 
   public render(): React.ReactNode {
     return <Wrapper>{this.props.children}</Wrapper>
   }
+
+  private getBody(props: MainProps): any {
+    return get(props, 'config.themeConfig.styles.body')
+  }
 }

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

@@ -41,7 +41,7 @@ const Wrapper = styled('div')`
   ${(p: WrapperProps) => p.active && activeWrapper(p)};
 `
 
-export const linkStyle = (colors: any) => css`
+export const linkStyle = ({ colors }: any) => css`
   position: relative;
   display: block;
   margin: 6px 24px;
@@ -156,10 +156,10 @@ export class Link extends Component<LinkProps, LinkState> {
     return (
       <Wrapper active={active}>
         <ThemeConfig>
-          {theme => (
+          {config => (
             <BaseLink
               {...props}
-              className={linkStyle(theme.colors)}
+              className={linkStyle(config.themeConfig)}
               onClick={onClick}
               innerRef={(node: any) => {
                 this.$el = node

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

@@ -22,7 +22,7 @@ const List = styled('dl')`
 `
 
 export const MenuLink = styled('a')`
-  ${linkStyle};
+  ${p => linkStyle(p.theme.docz)};
 `
 
 interface IconProps {

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

@@ -130,7 +130,7 @@ export class Pre extends Component<PreProps> {
               language="javascript"
               showLineNumbers
               useInlineStyles={false}
-              lineNumberContainerStyle={linesStyle(config)}
+              lineNumberContainerStyle={linesStyle(config.themeConfig)}
               PreTag={Nullable}
               CodeTag={getCode(children)}
             >

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

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

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

@@ -15,7 +15,7 @@ import * as prismThemes from './styles/prism'
 const Theme = () => (
   <ThemeConfig>
     {config => (
-      <ThemeProvider theme={{ docz: { ...config, mq } }}>
+      <ThemeProvider theme={{ docz: { ...config.themeConfig, mq } }}>
         <ReactBreakpoints breakpoints={breakpoints}>
           <DocPreview
             components={{

packages/docz/src/components/ThemeConfig.tsx

@@ -3,10 +3,10 @@ import { ReactNode, SFC, Children } from 'react'
 import merge from 'deepmerge'
 
 import { themeContext } from '../theme'
-import { state, State, Config } from '../state'
+import { state, State, Config, ThemeConfig as ThemeConfigObj } from '../state'
 
 export interface ThemeConfigProps {
-  children?: (config: any) => ReactNode
+  children?: (config: ThemeConfigObj) => ReactNode
 }
 
 export const configSelector = state.createSelector(
@@ -18,13 +18,19 @@ export const ThemeConfig: SFC<ThemeConfigProps> = ({ children }) => {
 
   return (
     <themeContext.Consumer>
-      {({ initialConfig, transform }) => (
+      {({ themeConfig: initialThemeConfig, transform }) => (
         <state.Consumer select={[configSelector]}>
-          {(config: Config) => {
-            const newConfig = merge(initialConfig, config)
-            const transformed = transform ? transform(newConfig) : newConfig
+          {({ themeConfig, ...config }: Config) => {
+            const newThemeConfig = merge(initialThemeConfig, themeConfig)
 
-            return Children.only(children(transformed))
+            return Children.only(
+              children({
+                ...config,
+                themeConfig: transform
+                  ? transform(newThemeConfig)
+                  : newThemeConfig,
+              })
+            )
           }}
         </state.Consumer>
       )}

packages/docz/src/state.ts

@@ -29,10 +29,18 @@ export interface Entry {
   [key: string]: any
 }
 
-export interface Config {
+export interface ThemeConfig {
   [key: string]: any
 }
 
+export interface Config {
+  title: string
+  description: string
+  ordering: string
+  themeConfig: ThemeConfig
+  version: string | null
+}
+
 export type EntryMap = Record<string, Entry>
 export type ImportMap = Record<string, () => Promise<MSXImport>>
 export type TransformFn = (config: Config) => Config

packages/docz/src/theme.tsx

@@ -7,7 +7,7 @@ import createContext from 'create-react-context'
 
 import { ErrorBoundary } from './components/ErrorBoundary'
 import { DataServer } from './components/DataServer'
-import { state, Database, Config, ImportMap } from './state'
+import { state, Database, ThemeConfig, ImportMap } from './state'
 
 declare var BASE_URL: any
 const DefaultWrapper: SFC = ({ children }) => <Fragment>{children}</Fragment>
@@ -22,17 +22,17 @@ export interface ThemeProps {
 }
 
 export type ThemeReturn = (WrappedComponent: CT) => CT<ThemeProps>
-export type TransformFn = (config: Config) => Config
+export type TransformFn = (config: ThemeConfig) => ThemeConfig
 
 interface ThemeContext {
-  initialConfig?: Config
+  themeConfig?: ThemeConfig
   transform?: TransformFn
 }
 
 export const themeContext = createContext<ThemeContext>({})
 
 export function theme(
-  initialConfig: Config,
+  themeConfig: ThemeConfig,
   transform?: TransformFn
 ): ThemeReturn {
   return WrappedComponent => {
@@ -46,7 +46,7 @@ export function theme(
 
       return (
         <ErrorBoundary>
-          <themeContext.Provider value={{ initialConfig, transform }}>
+          <themeContext.Provider value={{ themeConfig, transform }}>
             <state.Provider initialState={initialState}>
               <DataServer websocketUrl={props.websocketUrl}>
                 <Router basename={BASE_URL}>