From 89e1d03a8ea489fb6dd244588221c8d62aaf1122 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Fri, 14 Dec 2018 11:39:23 -0200
Subject: [PATCH] fix(docz-theme-default): use theme getter instead of literal
 obj access

---
 .../src/components/shared/Main/index.tsx      | 13 ++---
 .../components/shared/Sidebar/Hamburguer.tsx  |  8 +--
 .../components/shared/Sidebar/MenuLink.tsx    |  4 +-
 .../src/components/shared/Sidebar/index.tsx   | 12 ++---
 .../src/components/ui/CodeMirror/index.tsx    |  5 +-
 .../src/components/ui/H1.tsx                  |  3 +-
 .../src/components/ui/H2.tsx                  |  3 +-
 .../src/components/ui/H3.tsx                  |  3 +-
 .../src/components/ui/H4.tsx                  |  3 +-
 .../src/components/ui/H5.tsx                  |  3 +-
 .../src/components/ui/H6.tsx                  |  3 +-
 .../src/components/ui/Hr.tsx                  |  8 +--
 .../src/components/ui/InlineCode.tsx          |  3 +-
 .../src/components/ui/OrderedList.tsx         |  3 +-
 .../src/components/ui/Page.tsx                | 16 +++---
 .../src/components/ui/Render/index.tsx        |  5 +-
 .../src/components/ui/Table.tsx               | 49 +++++++++----------
 .../src/components/ui/UnorderedList.tsx       |  3 +-
 packages/docz-theme-default/src/index.tsx     | 20 ++++----
 .../docz-theme-default/src/styles/global.ts   |  5 +-
 20 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/packages/docz-theme-default/src/components/shared/Main/index.tsx b/packages/docz-theme-default/src/components/shared/Main/index.tsx
index 2a7264fd9..e23790856 100644
--- a/packages/docz-theme-default/src/components/shared/Main/index.tsx
+++ b/packages/docz-theme-default/src/components/shared/Main/index.tsx
@@ -1,7 +1,8 @@
 import { SFC } from 'react'
-import { Global, css, jsx } from '@emotion/core'
+import { Global, jsx } from '@emotion/core'
 import styled from '@emotion/styled'
-import get from 'lodash.get'
+
+import { styles } from '../../../styles/global'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -14,13 +15,7 @@ interface MainProps {
 
 export const Main: SFC<MainProps> = props => (
   <Wrapper>
-    <Global
-      styles={css`
-        body {
-          ${get(props, 'config.themeConfig.styles.body')}
-        }
-      `}
-    />
+    <Global styles={styles(props)} />
     {props.children}
   </Wrapper>
 )
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx
index a72dd77f2..9f25e1df7 100644
--- a/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx
+++ b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx
@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core'
 import styled from '@emotion/styled'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 interface OpenProps {
   opened: boolean
@@ -90,10 +91,9 @@ const ToggleButton = styled.button<OpenProps>`
     background: ${p => sidebarPrimary(p) || primaryColor(p)};
   }
 
-  ${p =>
-    p.theme.docz.mq({
-      display: ['block', 'block', 'block', 'none'],
-    })};
+  ${mq({
+    display: ['block', 'block', 'block', 'none'],
+  })};
 `
 
 interface HamburguerProps extends OpenProps {
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx
index b9cec52d7..8ad17409c 100644
--- a/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx
+++ b/packages/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx
@@ -38,7 +38,7 @@ const Wrapper = styled.div<WrapperProps>`
   ${p => p.active && activeWrapper};
 `
 
-export const linkStyle = ({ colors }: any) => css`
+export const linkStyle = (colors: any) => css`
   position: relative;
   display: block;
   padding: 4px 24px;
@@ -62,7 +62,7 @@ export const linkStyle = ({ colors }: any) => css`
 `
 
 const LinkAnchor = styled('a')`
-  ${p => linkStyle(p.theme.docz)};
+  ${p => linkStyle(get('colors')(p))};
 `
 
 export const getActiveFromClass = (el: HTMLElement | null) =>
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
index 45926adb5..e06ea1e4e 100644
--- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
+++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -13,7 +13,7 @@ import { Docz } from './Docz'
 import { Hamburguer } from './Hamburguer'
 
 import { get } from '@utils/theme'
-import { breakpoints } from '@styles/responsive'
+import { mq, breakpoints } from '@styles/responsive'
 
 interface WrapperProps {
   opened: boolean
@@ -24,11 +24,6 @@ const sidebarBg = get('colors.sidebarBg')
 const sidebarText = get('colors.sidebarText')
 const sidebarBorder = get('colors.sidebarBorder')
 
-const position = (p: WrapperProps) =>
-  p.theme.docz.mq({
-    position: ['absolute', 'absolute', 'absolute', 'relative'],
-  })
-
 const Wrapper = styled.div<WrapperProps>`
   position: relative;
   width: 280px;
@@ -37,8 +32,11 @@ const Wrapper = styled.div<WrapperProps>`
   background: ${sidebarBg};
   transition: transform 0.2s, background 0.3s;
   z-index: 1000;
-  ${position};
+
   ${get('styles.sidebar')};
+  ${mq({
+    position: ['absolute', 'absolute', 'absolute', 'relative'],
+  })};
 
   dl {
     padding: 0;
diff --git a/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx b/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx
index 542194106..5d5cc8c66 100644
--- a/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/CodeMirror/index.tsx
@@ -7,6 +7,7 @@ import styled from '@emotion/styled'
 import * as themes from '@styles/codemirror'
 import { get } from '@utils/theme'
 import { global } from './ps-scrollbar'
+import { mq } from '@styles/responsive'
 
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/mode/javascript/javascript'
@@ -31,7 +32,7 @@ const preStyles = get('styles.pre')
 const EditorStyled = styled(BaseCodeMirror)`
   ${themes.dark()};
   ${themes.light()};
-  ${p => p.theme.docz.mq(preStyles(p))};
+  ${p => mq(preStyles(p))};
   position: relative;
   flex: 1;
 
@@ -41,7 +42,7 @@ const EditorStyled = styled(BaseCodeMirror)`
   }
 
   .CodeMirror pre {
-    ${p => p.theme.docz.mq(preStyles(p))};
+    ${p => mq(preStyles(p))};
   }
 
   .CodeMirror-gutters {
diff --git a/packages/docz-theme-default/src/components/ui/H1.tsx b/packages/docz-theme-default/src/components/ui/H1.tsx
index 88d40e480..316236bea 100644
--- a/packages/docz-theme-default/src/components/ui/H1.tsx
+++ b/packages/docz-theme-default/src/components/ui/H1.tsx
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H1 = styled('h1')`
   position: relative;
   display: table;
   margin: 30px 0;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.h1)};
+  ${p => mq(get('styles.h1')(p))};
 
   &:before {
     position: absolute;
diff --git a/packages/docz-theme-default/src/components/ui/H2.tsx b/packages/docz-theme-default/src/components/ui/H2.tsx
index 40c2a9b55..ee2148314 100644
--- a/packages/docz-theme-default/src/components/ui/H2.tsx
+++ b/packages/docz-theme-default/src/components/ui/H2.tsx
@@ -6,6 +6,7 @@ import Hash from 'react-feather/dist/icons/hash'
 import { Link } from 'docz'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Icon = styled(Hash)`
   position: absolute;
@@ -21,7 +22,7 @@ const Heading = styled('h2')`
   position: relative;
   border-bottom: 1px dashed ${get('colors.border')};
   padding-bottom: 5px;
-  ${p => p.theme.docz.mq(get('styles.h2')(p))};
+  ${p => mq(get('styles.h2')(p))};
 
   &:hover ${Icon.toString()} {
     opacity: 1;
diff --git a/packages/docz-theme-default/src/components/ui/H3.tsx b/packages/docz-theme-default/src/components/ui/H3.tsx
index 72b5277bf..cb1b8e129 100644
--- a/packages/docz-theme-default/src/components/ui/H3.tsx
+++ b/packages/docz-theme-default/src/components/ui/H3.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H3 = styled('h3')`
-  ${p => p.theme.docz.mq(get('styles.h3')(p))};
+  ${p => mq(get('styles.h3')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H4.tsx b/packages/docz-theme-default/src/components/ui/H4.tsx
index 1d4e4f319..7dcc81c57 100644
--- a/packages/docz-theme-default/src/components/ui/H4.tsx
+++ b/packages/docz-theme-default/src/components/ui/H4.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H4 = styled('h4')`
-  ${p => p.theme.docz.mq(get('styles.h4')(p))};
+  ${p => mq(get('styles.h4')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H5.tsx b/packages/docz-theme-default/src/components/ui/H5.tsx
index aae79c900..17993ba8b 100644
--- a/packages/docz-theme-default/src/components/ui/H5.tsx
+++ b/packages/docz-theme-default/src/components/ui/H5.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H5 = styled('h5')`
-  ${p => p.theme.docz.mq(get('styles.h5')(p))};
+  ${p => mq(get('styles.h5')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/H6.tsx b/packages/docz-theme-default/src/components/ui/H6.tsx
index 51bd72d21..cf3688358 100644
--- a/packages/docz-theme-default/src/components/ui/H6.tsx
+++ b/packages/docz-theme-default/src/components/ui/H6.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const H6 = styled('h6')`
-  ${p => p.theme.docz.mq(get('styles.h6')(p))};
+  ${p => mq(get('styles.h6')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/Hr.tsx b/packages/docz-theme-default/src/components/ui/Hr.tsx
index bd47c06a3..89fe6a023 100644
--- a/packages/docz-theme-default/src/components/ui/Hr.tsx
+++ b/packages/docz-theme-default/src/components/ui/Hr.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const Hr = styled('hr')`
   border: none;
   border-top: 1px dashed ${get('colors.border')};
 
-  ${p =>
-    p.theme.docz.mq({
-      margin: ['30px 0', '50px 0'],
-    })};
+  ${mq({
+    margin: ['30px 0', '50px 0'],
+  })};
 `
diff --git a/packages/docz-theme-default/src/components/ui/InlineCode.tsx b/packages/docz-theme-default/src/components/ui/InlineCode.tsx
index f745a3d42..16417b9ec 100644
--- a/packages/docz-theme-default/src/components/ui/InlineCode.tsx
+++ b/packages/docz-theme-default/src/components/ui/InlineCode.tsx
@@ -1,8 +1,9 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const InlineCode = styled('code')`
   background: ${get('colors.codeBg')};
   color: ${get('colors.codeColor')};
-  ${p => p.theme.docz.mq(p.theme.docz.styles.code)};
+  ${p => mq(get('styles.code')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/OrderedList.tsx b/packages/docz-theme-default/src/components/ui/OrderedList.tsx
index 2e061e61c..da5dae112 100644
--- a/packages/docz-theme-default/src/components/ui/OrderedList.tsx
+++ b/packages/docz-theme-default/src/components/ui/OrderedList.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const OrderedList = styled('ol')`
   list-style: none;
@@ -17,5 +18,5 @@ export const OrderedList = styled('ol')`
     margin-right: 5px;
   }
 
-  ${p => p.theme.docz.mq(p.theme.docz.styles.ol)};
+  ${p => mq(get('styles.ol')(p))};
 `
diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx
index 3a893ec50..58c7e0e5f 100644
--- a/packages/docz-theme-default/src/components/ui/Page.tsx
+++ b/packages/docz-theme-default/src/components/ui/Page.tsx
@@ -8,6 +8,7 @@ import styled from '@emotion/styled'
 import { ButtonLink } from './Button'
 import { GithubLink, Sidebar, Main } from '../shared'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Wrapper = styled('div')`
   flex: 1;
@@ -20,7 +21,7 @@ const Wrapper = styled('div')`
 export const Container = styled('div')`
   box-sizing: border-box;
   margin: 0 auto;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.container)};
+  ${p => mq(get('styles.container')(p))};
 `
 
 const EditPage = styled(ButtonLink.withComponent('a'))`
@@ -41,15 +42,14 @@ const EditPage = styled(ButtonLink.withComponent('a'))`
 
   &:hover {
     opacity: 1;
-    background: ${p => lighten(0.1, p.theme.docz.colors.border)};
+    background: ${p => lighten(0.1, get('colors.border')(p))};
   }
 
-  ${p =>
-    p.theme.docz.mq({
-      visibility: ['hidden', 'hidden', 'visible'],
-      top: [0, -60, 32],
-      right: [0, 0, 40],
-    })};
+  ${mq({
+    visibility: ['hidden', 'hidden', 'visible'],
+    top: [0, -60, 32],
+    right: [0, 0, 40],
+  })};
 `
 
 const EditIcon = styled(Edit)<{ width: number }>`
diff --git a/packages/docz-theme-default/src/components/ui/Render/index.tsx b/packages/docz-theme-default/src/components/ui/Render/index.tsx
index 825ed6dcf..98e3107ab 100644
--- a/packages/docz-theme-default/src/components/ui/Render/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/Render/index.tsx
@@ -22,6 +22,7 @@ import { ActionButton, ClipboardAction } from '../Editor/elements'
 
 import { localStorage } from '@utils/local-storage'
 import { get as themeGet } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 interface OverlayProps {
   full: boolean
@@ -67,7 +68,7 @@ const StyledPreview = styled(LivePreview)`
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  ${p => p.theme.docz.mq(p.theme.docz.styles.playground)};
+  ${p => mq(themeGet('styles.playground')(p))};
 `
 
 const StyledError = styled(LiveError)`
@@ -110,7 +111,7 @@ const Actions = styled('div')<WithRadiusProps>`
   justify-content: flex-end;
   padding: 0 5px;
   background: ${p =>
-    p.theme.docz.mode === 'light'
+    themeGet('mode')(p) === 'light'
       ? lighten(0.13, borderColor(p))
       : darken(0.04, borderColor(p))};
   border-left: 1px solid ${themeGet('colors.border')};
diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx
index ad793e726..a3a9e81bf 100644
--- a/packages/docz-theme-default/src/components/ui/Table.tsx
+++ b/packages/docz-theme-default/src/components/ui/Table.tsx
@@ -3,16 +3,16 @@ import { jsx } from '@emotion/core'
 import styled from '@emotion/styled'
 
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 const Wrapper = styled('div')`
   overflow-x: auto;
   padding: 2px;
 
-  ${p =>
-    p.theme.docz.mq({
-      marginBottom: [20, 40],
-      maxWidth: ['calc(100vw - 40px)', 'calc(100vw - 80px)', '100%'],
-    })};
+  ${mq({
+    marginBottom: [20, 40],
+    maxWidth: ['calc(100vw - 40px)', 'calc(100vw - 80px)', '100%'],
+  })};
 `
 
 const TableStyled = styled('table')`
@@ -26,7 +26,7 @@ const TableStyled = styled('table')`
   border-radius: ${get('radii')};
   font-size: 14px;
   color: ${get('colors.tableColor')};
-  ${p => p.theme.docz.mq(p.theme.docz.styles.table)};
+  ${p => mq(get('styles.table')(p))};
 
   & thead {
     color: ${get('colors.theadColor')};
@@ -38,38 +38,33 @@ const TableStyled = styled('table')`
     padding: 20px 20px;
 
     &:nth-of-type(1) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['20%', '20%', '20%', 'auto'],
-        })};
+      ${mq({
+        width: ['20%', '20%', '20%', 'auto'],
+      })};
     }
 
     &:nth-of-type(2) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(3) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(4) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['10%', '10%', '10%', 'auto'],
-        })};
+      ${mq({
+        width: ['10%', '10%', '10%', 'auto'],
+      })};
     }
 
     &:nth-of-type(5) {
-      ${p =>
-        p.theme.docz.mq({
-          width: ['20%', '20%', '20%', 'auto'],
-        })};
+      ${mq({
+        width: ['20%', '20%', '20%', 'auto'],
+      })};
     }
   }
 
@@ -84,7 +79,7 @@ const TableStyled = styled('table')`
     border-top: 1px solid ${get('colors.border')};
   }
 
-  ${p => p.theme.docz.mq(p.theme.docz.styles.table)};
+  ${p => mq(get('styles.table')(p))};
 `
 
 export const Table = (props: React.TableHTMLAttributes<any>) => (
diff --git a/packages/docz-theme-default/src/components/ui/UnorderedList.tsx b/packages/docz-theme-default/src/components/ui/UnorderedList.tsx
index 713ec571b..995e155d2 100644
--- a/packages/docz-theme-default/src/components/ui/UnorderedList.tsx
+++ b/packages/docz-theme-default/src/components/ui/UnorderedList.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
 
 export const UnorderedList = styled('ul')`
   list-style: none;
@@ -11,5 +12,5 @@ export const UnorderedList = styled('ul')`
     margin-right: 5px;
   }
 
-  ${p => p.theme.docz.mq(p.theme.docz.styles.ul)};
+  ${p => mq(get('styles.ul')(p))};
 `
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
index ca4376942..8f28f6b83 100644
--- a/packages/docz-theme-default/src/index.tsx
+++ b/packages/docz-theme-default/src/index.tsx
@@ -1,27 +1,27 @@
 import { Fragment } from 'react'
 import { theme, DocPreview, ThemeConfig } from 'docz'
 import { ThemeProvider } from 'emotion-theming'
-import { Global, jsx } from '@emotion/core'
+import { jsx } from '@emotion/core'
 import webfont from 'webfontloader'
 
 import { config } from './config'
-import { styles } from './styles/global'
 import { mq } from './styles/responsive'
 import * as components from './components/ui'
 import * as modes from './styles/modes'
 
-// tslint:disable
-const mergeTheme = (config: any) => (old: any) => ({
-  ...old,
-  docz: Object.assign({}, config.themeConfig, { mq }),
-})
-
 const Theme = () => (
   <Fragment>
-    <Global styles={styles} />
     <ThemeConfig>
       {config => (
-        <ThemeProvider theme={mergeTheme(config)}>
+        <ThemeProvider
+          theme={(old: any) => ({
+            ...old,
+            docz: {
+              ...config.themeConfig,
+              mq,
+            },
+          })}
+        >
           <DocPreview
             components={{
               page: components.Page,
diff --git a/packages/docz-theme-default/src/styles/global.ts b/packages/docz-theme-default/src/styles/global.ts
index 4b988667b..a90acd5bf 100644
--- a/packages/docz-theme-default/src/styles/global.ts
+++ b/packages/docz-theme-default/src/styles/global.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/core'
+import get from 'lodash.get'
 
-// tslint:disable
-export const styles = css`
+export const styles = (props: any) => css`
   @import url('https://unpkg.com/rc-tooltip@3.7.3/assets/bootstrap.css');
   @import url('https://unpkg.com/codemirror@5.42.0/lib/codemirror.css');
 
@@ -12,6 +12,7 @@ export const styles = css`
   body {
     margin: 0;
     padding: 0;
+    ${get(props, 'config.themeConfig.styles.body')};
   }
 
   .with-overlay {