feat: add playground component

core/docz-core/package.json

@@ -76,15 +76,15 @@
     "titleize": "^1.0.1",
     "typescript": "^3.3.3",
     "url-loader": "^1.1.2",
-    "webpack": "^4.29.4",
+    "webpack": "^4.29.5",
     "webpack-bundle-analyzer": "^3.0.4",
     "webpack-chain": "^5.2.0",
     "webpack-dev-server": "^3.1.14",
     "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.4",
     "webpackbar": "^3.1.5",
     "ws": "^6.1.4",
-    "yargs": "^13.2.0"
+    "yargs": "^13.2.1"
   },
   "devDependencies": {
     "@types/chokidar": "^1.7.5",

core/docz-core/templates/root.tpl.js

@@ -1,23 +1,25 @@
 import React from 'react'
-import { Link, Router, Routes } from 'docz'
+import { Link, Router, Routes, useDataServer } from 'docz'
 import { hot } from 'react-hot-loader'
 import Theme from '<%- theme %>'
 
 import { imports } from './imports'
 import database from './db.json'
 <% if (wrapper) {%>import Wrapper from '<%- wrapper %>'<%}%>
 
-const Root = () => (
-  <Theme
-    <% if (wrapper) {%>wrapper={Wrapper}<%}%>
-    <% if (websocketUrl) {%>websocketUrl="<%- websocketUrl %>"<%}%>
-    db={database}
-    linkComponent={Link}
-  >
-    <Router>
-      <Routes imports={imports} />
-    </Router>
-  </Theme>
-)
+const Root = () => {
+  <% if (websocketUrl) {%>useDataServer('<%- websocketUrl %>')<%}%>
+  return (
+    <Theme
+      <% if (wrapper) {%>wrapper={Wrapper}<%}%>
+      linkComponent={Link}
+      db={database}
+      >
+      <Router>
+        <Routes imports={imports} />
+      </Router>
+    </Theme>
+  )
+}
 
 export default hot(module)(Root)

core/docz-theme-default/src/components/shared/Logo/index.tsx

@@ -68,6 +68,8 @@ export const Logo: SFC<LogoProps> = ({ showBg }) => {
     linkComponent: Link,
     themeConfig: { logo },
   } = useConfig()
+
+  if (!Link) return null
   return (
     <Wrapper showBg={showBg}>
       <Link to="/">

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

@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import { MenuLink, getActiveFromClass } from './MenuLink'
 import { get } from '@utils/theme'
 
-const Wrapper = styled('div')`
+const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
 `

core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { SFC } from 'react'
+import { SFC, useMemo } from 'react'
 import { Entry, useDocs, useConfig } from 'docz'
 import styled from 'styled-components'
-import get from 'lodash.get'
+import get from 'lodash/get'
 
 import { get as themeGet } from '@utils/theme'
 
@@ -62,10 +62,10 @@ interface MenuHeadingsProps {
 }
 
 export const MenuHeadings: SFC<MenuHeadingsProps> = ({ route, onClick }) => {
-  const { linkComponent: Link } = useConfig()
   const docs = useDocs()
+  const { linkComponent: Link } = useConfig()
   const headings = docs && getHeadings(route, docs)
-  const SmallLink = React.useMemo(() => createSmallLink(Link), [Link])
+  const SmallLink = useMemo(() => createSmallLink(Link!), [Link])
 
   return headings && headings.length > 0 ? (
     <Submenu>

core/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx

@@ -40,15 +40,17 @@ export const createLink = (Link: React.ComponentType<any>) => styled(Link)`
   display: block;
   padding: 4px 24px;
   font-weight: 600;
-  font-size: 18px;
+  font-size: 16px;
   letter-spacing: -0.02em;
   color: ${get('colors.sidebarText')};
   text-decoration: none;
   transition: color 0.2s;
+
   &:hover,
   &:visited {
     color: ${get('colors.sidebarText')};
   }
+
   &:hover,
   &.active {
     color: ${p => get('colors.sidebarPrimary')(p) || get('colors.primary')(p)};
@@ -78,7 +80,7 @@ export const MenuLink: SFC<LinkProps> = ({
   const [active, setActive] = useState(false)
   const prevActive = usePrevious(active)
   const $el = useRef(null)
-  const Link = useMemo(() => createLink(linkComponent), [linkComponent])
+  const Link = useMemo(() => createLink(linkComponent!), [linkComponent])
 
   const linkProps = {
     children,

core/docz-theme-default/src/components/ui/AsyncPlayground.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+const Playground = React.lazy(() => import('./Playground'))
+export const AsyncPlayground: React.SFC<any> = props => (
+  <React.Suspense fallback={null}>
+    <Playground {...props} />
+  </React.Suspense>
+)

core/docz-theme-default/src/components/ui/Button.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-const Button = styled.button`
+export const Button = styled.button`
   cursor: pointer;
   display: flex;
   align-items: center;

core/docz-theme-default/src/components/ui/CodeMirror/index.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { useConfig } from 'docz'
+import { Controlled as BaseCodeMirror } from 'react-codemirror2'
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import styled from 'styled-components'
+
+import { get } from '@utils/theme'
+import { mq } from '@styles/responsive'
+
+import { ScrollbarStyles } from './ps-scrollbar'
+import * as themes from './themes'
+
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/jsx/jsx'
+import 'codemirror/mode/css/css'
+import 'codemirror/addon/edit/matchbrackets'
+import 'codemirror/addon/edit/closetag'
+import 'codemirror/addon/fold/xml-fold'
+
+const Scrollbar = styled(PerfectScrollbar)`
+  overflow: auto;
+  position: relative;
+  max-height: ${p => 25 * p.linesToScroll}px;
+
+  .ps__rail-y {
+    z-index: 9;
+    opacity: 0.4;
+  }
+`
+
+const preStyles = get('styles.pre')
+const EditorStyled = styled(BaseCodeMirror)`
+  ${themes.dark};
+  ${themes.light};
+  position: relative;
+  flex: 1;
+  font-size: 16px;
+  ${p => mq(preStyles(p))};
+
+  .CodeMirror {
+    max-width: 100%;
+    height: 100%;
+  }
+
+  .CodeMirror pre {
+    ${p => mq(preStyles(p))};
+  }
+
+  .CodeMirror-gutters {
+    left: 1px !important;
+  }
+
+  .CodeMirror-lines {
+    padding: 10px 0;
+    box-sizing: content-box;
+  }
+
+  .CodeMirror-line {
+    padding: 0 10px;
+  }
+
+  .CodeMirror-linenumber {
+    padding: 0 7px 0 5px;
+  }
+`
+
+const scrollbarOpts = {
+  wheelSpeed: 2,
+  wheelPropagation: true,
+  minScrollbarLength: 20,
+  suppressScrollX: true,
+}
+
+const CodeMirror: SFC<any> = props => {
+  const { themeConfig } = useConfig()
+  const linesToScroll = themeConfig.linesToScrollEditor || 14
+  return (
+    <React.Fragment>
+      <ScrollbarStyles />
+      <Scrollbar option={scrollbarOpts} linesToScroll={linesToScroll}>
+        <EditorStyled {...props} />
+      </Scrollbar>
+    </React.Fragment>
+  )
+}
+
+export default CodeMirror

core/docz-theme-default/src/components/ui/CodeMirror/ps-scrollbar.tsx

@@ -0,0 +1,97 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const ScrollbarStyles = createGlobalStyle`
+  /*
+  * Container style
+  */
+  .ps {
+    overflow: hidden !important;
+    overflow-anchor: none;
+    -ms-overflow-style: none;
+    touch-action: auto;
+    -ms-touch-action: auto;
+  }
+  /*
+  * Scrollbar rail styles
+  */
+  .ps__rail-x {
+    display: none;
+    opacity: 0;
+    transition: background-color 0.2s linear, opacity 0.2s linear;
+    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+    height: 15px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  .ps__rail-y {
+    display: none;
+    opacity: 0;
+    transition: background-color 0.2s linear, opacity 0.2s linear;
+    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+    width: 15px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    display: block;
+    background-color: transparent;
+  }
+  /*
+  * Scrollbar thumb styles
+  */
+  .ps__thumb-x {
+    background-color: #aaa;
+    border-radius: 4px;
+    transition: background-color 0.2s linear, height 0.2s ease-in-out;
+    -webkit-transition: background-color 0.2s linear,
+      height 0.2s ease-in-out;
+    height: 6px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  .ps__thumb-y {
+    background-color: #aaa;
+    border-radius: 4px;
+    transition: background-color 0.2s linear, width 0.2s ease-in-out;
+    -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+    width: 6px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x,
+  .ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: #999;
+    height: 11px;
+  }
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y,
+  .ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #999;
+    width: 11px;
+  }
+  /* MS supports */
+  @supports (-ms-overflow-style: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }
+  .scrollbar-container {
+    position: relative;
+    height: 100%;
+  }
+`