feat(docz-theme-default): add responsive mode for playground

doczjs · Jul 22, 2018 · e04452e · e04452e
1 parent 00f096f
commit e04452e
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 39 deletions.
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -29,6 +29,7 @@
     "match-sorter": "^2.2.3",
     "polished": "^1.9.3",
     "prop-types": "15.6.2",
+    "re-resizable": "^4.7.1",
     "react": "^16.2.0",
     "react-adopt": "^0.6.0",
     "react-breakpoints": "^3.0.0",

diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { SFC, Component, Fragment } from 'react'
 import { ThemeConfig } from 'docz'
-import styled, { css, cx } from 'react-emotion'
+import styled, { cx } from 'react-emotion'
 import rgba from 'polished/lib/color/rgba'
-import Check from 'react-feather/dist/icons/check'
+import BaseCheck from 'react-feather/dist/icons/check'
 import SyntaxHighlighter from 'react-syntax-highlighter/prism-light'
 import Clipboard from 'react-feather/dist/icons/clipboard'
 import copy from 'copy-text-to-clipboard'
@@ -72,27 +72,20 @@ export const ActionButton = styled(ButtonSwap)`
   }
 `
 
-export const ClipboardAction: SFC<{ content: string }> = ({ content }) => {
-  const check = (
-    <Check
-      width={17}
-      className={css`
-        stroke: #00b894;
-      `}
-    />
-  )
-
-  return (
-    <ActionButton
-      as={ButtonLink}
-      title="Copy to clipboard"
-      onClick={() => copy(content)}
-      swap={check}
-    >
-      <Clipboard width={15} />
-    </ActionButton>
-  )
-}
+const Check = styled(BaseCheck)`
+  stroke: ${p => p.theme.colors.primary};
+`
+
+export const ClipboardAction: SFC<{ content: string }> = ({ content }) => (
+  <ActionButton
+    as={ButtonLink}
+    title="Copy to clipboard"
+    onClick={() => copy(content)}
+    swap={<Check width={17} />}
+  >
+    <Clipboard width={15} />
+  </ActionButton>
+)
 
 const Nullable: SFC = ({ children }) => <Fragment>{children}</Fragment>
 

diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx
@@ -1,35 +1,126 @@
 import * as React from 'react'
 import { Fragment } from 'react'
 import { RenderComponent } from 'docz'
-import styled from 'react-emotion'
+import { Toggle } from 'react-powerplug'
+import lighten from 'polished/lib/color/lighten'
+import darken from 'polished/lib/color/darken'
+import Resizable from 're-resizable'
+import Maximize from 'react-feather/dist/icons/maximize'
+import Minimize from 'react-feather/dist/icons/minimize'
+import styled, { css } from 'react-emotion'
 
-import { Pre as PreBase } from './Pre'
+import { Pre as PreBase, ActionButton, ClipboardAction } from './Pre'
+
+const HANDLE_WIDTH = 24
+
+interface WrapperProps {
+  full: boolean
+}
+
+const Wrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  z-index: ${(p: WrapperProps) => (p.full ? 99999 : 0)};
+  position: ${(p: WrapperProps) => (p.full ? 'fixed' : 'initial')};
+  top: 0;
+  left: 0;
+  height: ${(p: WrapperProps) => (p.full ? '100vh' : '100%')};
+  width: ${(p: WrapperProps) =>
+    p.full ? '100vw' : `calc(100% - ${HANDLE_WIDTH - 4}px)`};
+`
 
 const Playground = styled('div')`
-  background: 'white';
+  flex: 1;
+  background: ${p => p.theme.colors.background};
   border: 1px solid ${p => p.theme.colors.border};
-  border-bottom: 0;
-  border-radius: 5px 5px 0 0;
+  border-radius: 4px 4px 0 0;
   ${p => p.theme.mq(p.theme.styles.playground)};
 `
 
 const Pre = styled(PreBase)`
   margin: 0;
-  border-radius: 0 0 5px 5px;
+  border-radius: ${(p: WrapperProps) => (p.full ? 0 : '0 0 4px 4px')};
+  border-top: 0;
+`
+
+const line = (color: string, left: string) => css`
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: ${left};
+  content: '';
+  width: 2px;
+  height: 25px;
+  background: ${color};
+  transform: translate(-50%, -50%);
+`
+
+const Handle = styled('div')`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: ${HANDLE_WIDTH}px;
+  height: 100%;
+  border: 1px solid ${p => p.theme.colors.border};
+  border-radius: 0 4px 4px 0;
+  background: ${p =>
+    p.theme.mode === 'light'
+      ? lighten(0.1, p.theme.colors.border)
+      : darken(0.1, p.theme.colors.border)};
+
+  &:after {
+    ${p => line(p.theme.colors.border, 'calc(50% + 3px)')};
+  }
+
+  &:before {
+    ${p => line(p.theme.colors.border, 'calc(50% - 3px)')};
+  }
 `
 
 export const Render: RenderComponent = ({
   className,
   style,
   component,
   rawCode,
-}) => {
-  return (
-    <Fragment>
-      <Playground className={className} style={style}>
-        {component}
-      </Playground>
-      <Pre>{rawCode}</Pre>
-    </Fragment>
-  )
-}
+}) => (
+  <Toggle>
+    {({ on, toggle }: any) => {
+      const actions = (
+        <Fragment>
+          <ActionButton onClick={toggle} title={on ? 'Minimize' : 'Maximize'}>
+            {on ? <Minimize width={15} /> : <Maximize width={15} />}
+          </ActionButton>
+          <ClipboardAction content={rawCode} />
+        </Fragment>
+      )
+
+      return (
+        <Resizable
+          minWidth={320}
+          maxWidth="100%"
+          enable={{
+            top: false,
+            right: true,
+            bottom: false,
+            left: false,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+            topLeft: false,
+          }}
+        >
+          <Wrapper full={on}>
+            <Playground className={className} style={style}>
+              {component}
+            </Playground>
+            <Pre actions={actions} full={on}>
+              {rawCode}
+            </Pre>
+            {!on && <Handle />}
+          </Wrapper>
+        </Resizable>
+      )
+    }}
+  </Toggle>
+)
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -55,6 +55,7 @@ const transform = ({ mode, ...config }: any) => {
 
   return {
     ...config,
+    mode,
     prismTheme: (prismThemes as any)[mode],
     colors: {
       ...selectedMode,

diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
@@ -4,9 +4,12 @@ declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-feather/dist/icons/search'
 declare module 'react-feather/dist/icons/clipboard'
 declare module 'react-feather/dist/icons/check'
+declare module 'react-feather/dist/icons/maximize'
+declare module 'react-feather/dist/icons/minimize'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
 declare module 'react-syntax-highlighter/prism-light'
+declare module 're-resizable'
 declare module 'match-sorter'
 declare module 'polished/lib/color/rgba'
 declare module 'webfontloader'

diff --git a/yarn.lock b/yarn.lock
@@ -9557,6 +9557,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+re-resizable@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-4.7.1.tgz#3eca5bb94a6059d14311786cfd2d430bc9f7fba0"
+
 react-adopt@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz#e5ff903a655d3082217f82bc9d5033a4b64fafad"