feat: some playground improvements

core/gatsby-theme-docz/src/components/Code/styles.js

@@ -1,6 +1,5 @@
 export const editor = {
   borderRadius: 'radius',
   border: t => `1px solid ${t.colors.border}`,
-  lineHeight: '1.4em',
   fontFamily: 'monospace',
 }

core/gatsby-theme-docz/src/components/Playground/index.js

@@ -1,18 +1,22 @@
 /** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
+import { jsx } from 'theme-ui'
 import { useState } from 'react'
+import { useConfig } from 'docz'
 import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
-import { get, merge } from 'lodash/fp'
+import { merge } from 'lodash/fp'
 import copy from 'copy-text-to-clipboard'
 
 import { usePrismTheme } from '~utils/theme'
 import * as styles from './styles'
 import * as Icons from '../Icons'
 
 export const Playground = ({ code, scope }) => {
-  const [showingCode, setShowingCode] = useState(false)
+  const {
+    themeConfig: { showPlaygroundEditor },
+  } = useConfig()
+
+  const [showingCode, setShowingCode] = useState(() => showPlaygroundEditor)
   const theme = usePrismTheme()
-  const ctx = useThemeUI()
 
   const transformCode = code => {
     if (code.startsWith('()') || code.startsWith('class')) return code
@@ -30,8 +34,9 @@ export const Playground = ({ code, scope }) => {
       transformCode={transformCode}
       theme={merge(theme, {
         plain: {
-          fontFamily: get('theme.fonts.monospace', ctx),
+          fontFamily: 'Inconsolata',
           fontSize: 18,
+          lineHeight: '1.5em',
         },
       })}
     >

core/gatsby-theme-docz/src/components/Playground/styles.js

@@ -1,4 +1,5 @@
 import * as mixins from '~utils/mixins'
+import { isAbsolute } from 'upath'
 
 const border = {
   border: t => `1px solid ${t.colors.playground.border}`,
@@ -9,8 +10,12 @@ export const editor = theme => ({
   border: t => `1px solid ${t.colors.border}`,
   background: theme.plain.backgroundColor,
   borderTop: 0,
-  '.npm__react-simple-code-editor__textarea': {
-    outline: 'none !important',
+  fontFamily: 'monospace',
+  fontSize: 18,
+  '* > textarea:focus': {
+    font: '400 18px Inconsolata !important',
+    lineHeight: '1.5em !important',
+    outline: 'none',
   },
 })
 
@@ -37,13 +42,16 @@ export const preview = showingCode => ({
 
 export const buttons = {
   zIndex: 9,
+  display: 'flex',
   position: 'absolute',
-  bottom: -24,
-  right: 3,
+  bottom: -20,
+  right: 4,
 }
 
 export const button = {
   ...mixins.ghostButton,
+  display: 'flex',
+  alignItems: 'center',
   py: 1,
   p: 2,
   bg: 'border',
@@ -53,3 +61,9 @@ export const button = {
     ml: 1,
   },
 }
+
+export const link = {
+  py: 0,
+  ml: 1,
+  height: 22,
+}

core/gatsby-theme-docz/src/index.js

@@ -17,9 +17,13 @@ const Theme = ({ children }) => {
   )
 }
 
-export const enhance = theme(defaultTheme, ({ mode = 'light', ...config }) => ({
-  ...config,
-  initialColorMode: mode,
-}))
+export const enhance = theme(
+  defaultTheme,
+  ({ mode = 'light', showPlaygroundEditor = true, ...config }) => ({
+    ...config,
+    showPlaygroundEditor,
+    initialColorMode: mode,
+  })
+)
 
 export default enhance(Theme)

core/gatsby-theme-docz/src/theme/index.js

@@ -105,10 +105,6 @@ export default merge(typography, {
       textAlign: 'left',
       fontFamily: 'monospace',
       borderRadius: 'radius',
-      '.token-line': {
-        lineHeight: '1.5em',
-        height: '1.5em',
-      },
     },
     table: {
       width: '100%',

core/rehype-docz/src/index.ts

@@ -1,19 +1,17 @@
-import * as path from 'path'
 import flatten from 'lodash/flatten'
 import nodeToString from 'hast-util-to-string'
 import { format } from 'docz-utils/lib/format'
 import { componentName, sanitizeCode, removeTags } from 'docz-utils/lib/jsx'
-import { getSandboxImportInfo } from 'docz-utils/lib/codesandbox'
-import { getFullImports, getImportsVariables } from 'docz-utils/lib/imports'
+import { getImportsVariables } from 'docz-utils/lib/imports'
 
-const isPlayground = (name: string) => name === 'Playground'
+const isPlayground = (name: string) => {
+  return name === 'Playground'
+}
 
-const addComponentsProps = (
-  scopes: string[],
-  imports: string[],
-  cwd: string,
-  useCodeSandbox: boolean
-) => async (node: any, idx: number) => {
+const addComponentsProps = (scopes: string[]) => async (
+  node: any,
+  idx: number
+) => {
   const name = componentName(node.value)
   const tagOpen = new RegExp(`^\\<${name}`)
 
@@ -23,15 +21,6 @@ const addComponentsProps = (
     const scope = `{props,${scopes.join(',')}}`
     const child = sanitizeCode(removeTags(code))
 
-    if (useCodeSandbox) {
-      const codesandBoxInfo = await getSandboxImportInfo(child, imports, cwd)
-
-      node.value = node.value.replace(
-        tagOpen,
-        `<${name} __codesandbox={\`${codesandBoxInfo}\`}`
-      )
-    }
-
     node.value = node.value.replace(
       tagOpen,
       `<${name} __position={${idx}} __code={'${child}'} __scope={${scope}}`
@@ -41,20 +30,14 @@ const addComponentsProps = (
 
 export interface PluginOpts {
   root: string
-  useCodeSandbox: boolean
 }
 
-export default (opts: PluginOpts) => (tree: any, fileInfo: any) => {
-  const { root, useCodeSandbox } = opts
+export default () => (tree: any) => {
   const importNodes = tree.children.filter((n: any) => n.type === 'import')
-  const imports: string[] = flatten(importNodes.map(getFullImports))
   const scopes: string[] = flatten(importNodes.map(getImportsVariables))
-  const fileInfoHistory = fileInfo.history[0] ? fileInfo.history[0] : ''
-  const fileCwd = path.relative(root, path.dirname(fileInfoHistory))
-
   const nodes = tree.children
     .filter((node: any) => node.type === 'jsx')
-    .map(addComponentsProps(scopes, imports, fileCwd, useCodeSandbox))
+    .map(addComponentsProps(scopes))
 
   return Promise.all(nodes).then(() => tree)
 }