feat(gatsby-theme-docz): add new Pre component

doczjs · Jun 28, 2019 · a6be6a1 · a6be6a1
1 parent 8eb780d
commit a6be6a1
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 62 deletions.
diff --git a/core/gatsby-theme-docz/package.json b/core/gatsby-theme-docz/package.json
@@ -21,16 +21,11 @@
     "@loadable/component": "^5.10.1",
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
-    "@reach/router": "^1.2.1",
     "@theme-ui/typography": "^0.2.0",
     "babel-plugin-export-metadata": "^1.2.0",
-    "change-case": "^3.1.0",
-    "chokidar": "^3.0.1",
     "copy-text-to-clipboard": "^2.1.0",
     "docz": "^1.2.0",
     "docz-core": "^1.2.0",
-    "docz-theme-default": "^1.2.0",
-    "docz-utils": "^1.2.0",
     "emotion-theming": "^10.0.14",
     "fs-extra": "^8.0.1",
     "gatsby": "^2.11.0",
@@ -42,16 +37,17 @@
     "gatsby-plugin-react-helmet": "^3.1.0",
     "gatsby-plugin-root-import": "^2.0.5",
     "hotkeys-js": "^3.6.11",
-    "is-absolute-url": "^3.0.0",
     "lodash": "^4.17.11",
+    "mdx-utils": "^0.1.1",
+    "prism-react-renderer": "^0.1.7",
+    "prismjs": "^1.16.0",
     "prop-types": "^15.7.2",
-    "re-resizable": "^5.0.1",
     "react": "^16.8.6",
     "react-docgen-props-table": "^1.0.3",
     "react-dom": "^16.8.6",
     "react-feather": "^1.1.6",
     "react-helmet": "^5.2.1",
-    "react-live": "2.1.2",
+    "react-simple-code-editor": "^0.9.11",
     "rehype-docz": "^1.2.0",
     "rehype-slug": "^2.0.3",
     "remark-docz": "^1.2.0",

diff --git a/core/gatsby-theme-docz/src/components/Code/index.js b/core/gatsby-theme-docz/src/components/Code/index.js
@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { useConfig } from 'docz'
+import { jsx, Styled } from 'theme-ui'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import { get } from 'lodash/fp'
+
+export const Code = ({ codeString, language = 'jsx' }) => {
+  const config = useConfig()
+  const theme = get('themeConfig.prismjs', config)
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={theme}
+      code={codeString}
+      language={language}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <Styled.pre className={className} style={style}>
+          {tokens.map((line, i) => {
+            if (line.length === 1 && line[0].empty) return null
+            return (
+              <div key={line} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            )
+          })}
+        </Styled.pre>
+      )}
+    </Highlight>
+  )
+}
diff --git a/core/gatsby-theme-docz/src/components/Code/styles.js b/core/gatsby-theme-docz/src/components/Code/styles.js
@@ -0,0 +1 @@
+export const line = {}
diff --git a/core/gatsby-theme-docz/src/components/Pre/index.js b/core/gatsby-theme-docz/src/components/Pre/index.js
@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { preToCodeBlock } from 'mdx-utils'
+
+import { Code } from '../Code'
+
+export const Pre = preProps => {
+  const props = preToCodeBlock(preProps)
+  if (props) {
+    return <Code {...props} />
+  } else {
+    return <pre {...preProps} />
+  }
+}
diff --git a/core/gatsby-theme-docz/src/components/index.js b/core/gatsby-theme-docz/src/components/index.js
@@ -1,10 +1,12 @@
 import * as headings from './Headings'
 
+import { Pre } from './Pre'
 import { Layout } from './Layout'
 import { Props } from './Props'
 
 export const componentsMap = {
   ...headings,
+  pre: Pre,
   layout: Layout,
   props: Props,
 }
diff --git a/core/gatsby-theme-docz/src/theme/index.js b/core/gatsby-theme-docz/src/theme/index.js
@@ -3,11 +3,13 @@ import { toTheme } from '@theme-ui/typography'
 import { merge } from 'lodash/fp'
 
 import * as modes from './modes'
+import prismjs from './prismjs'
 
 moraga.headerWeight = 700
 const typography = toTheme(moraga)
 
 export default merge(typography, {
+  prismjs,
   initialColorMode: 'light',
   colors: {
     ...modes.light,
@@ -75,7 +77,21 @@ export default merge(typography, {
       marginBottom: 1,
     },
     code: {
-      fontFamily: 'mono',
+      fontFamily: 'monospace',
+    },
+    inlineCode: {
+      fontFamily: 'monospace',
+    },
+    pre: {
+      p: 3,
+      my: 4,
+      fontFamily: 'monospace',
+      textAlign: 'left',
+      borderRadius: 'radius',
+      '.token-line': {
+        lineHeight: '1.3em',
+        height: '1.3em',
+      },
     },
   },
 })
diff --git a/core/gatsby-theme-docz/src/theme/prismjs.js b/core/gatsby-theme-docz/src/theme/prismjs.js
@@ -0,0 +1,74 @@
+export default {
+  plain: {
+    color: '#393A34',
+    backgroundColor: '#f6f8fa',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#999988',
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ['string', 'attr-value'],
+      style: {
+        color: '#e3116c',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#393A34',
+      },
+    },
+    {
+      types: [
+        'entity',
+        'url',
+        'symbol',
+        'number',
+        'boolean',
+        'variable',
+        'constant',
+        'property',
+        'regex',
+        'inserted',
+      ],
+      style: {
+        color: '#36acaa',
+      },
+    },
+    {
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
+      style: {
+        color: '#00a4db',
+      },
+    },
+    {
+      types: ['function', 'deleted', 'tag'],
+      style: {
+        color: '#d73a49',
+      },
+    },
+    {
+      types: ['function-variable'],
+      style: {
+        color: '#6f42c1',
+      },
+    },
+    {
+      types: ['tag', 'selector', 'keyword'],
+      style: {
+        color: '#00009f',
+      },
+    },
+  ],
+}