feat(docz-theme-default): add line numbers on Playground

doczjs · Jul 22, 2018 · 204f1bb · 204f1bb
1 parent bd4b27f
commit 204f1bb
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 81 deletions.
diff --git a/packages/docz-theme-default/librc.js b/packages/docz-theme-default/librc.js
@@ -1,13 +1,25 @@
 const svg = require('rollup-plugin-svg')
+const pkg = require('./package.json')
+
+const inline = [
+  'facepaint',
+  'match-sorter',
+  'react-breakpoints',
+  'react-feather',
+  'react-powerplug',
+  'webfontloader',
+]
+
+const external = Object.keys(pkg.dependencies)
+  .filter(dep => inline.indexOf(dep) === -1)
+  .concat([
+    'polished/lib/colors/rgba',
+    'react-syntax-highlighter/prism',
+    'react-feather/dist/icons/search',
+    'react-feather/dist/icons/chevron-down',
+  ])
 
 module.exports = {
-  external: [
-    'docz',
-    'react',
-    'react-dom',
-    'react-router',
-    'react-router-dom',
-    'prop-types',
-  ],
   plugins: [svg()],
+  external,
 }
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -26,7 +26,7 @@
     "emotion-theming": "^9.2.6",
     "facepaint": "^1.2.1",
     "match-sorter": "^2.2.3",
-    "prismjs": "^1.15.0",
+    "polished": "^1.9.3",
     "prop-types": "15.6.2",
     "react": "^16.2.0",
     "react-adopt": "^0.6.0",
@@ -36,14 +36,14 @@
     "react-feather": "^1.1.1",
     "react-lightweight-tooltip": "^1.0.0",
     "react-powerplug": "^1.0.0-rc.1",
+    "react-syntax-highlighter": "^8.0.1",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
-    "@types/prismjs": "^1.9.0",
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
     "babel-plugin-emotion": "^9.2.6",

diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -1,50 +1,77 @@
-import 'prismjs'
-import 'prismjs/components/prism-jsx'
-
-import React, { PureComponent } from 'react'
-import prism from 'prismjs'
+import * as React from 'react'
+import { SFC, Fragment } from 'react'
+import { ThemeConfig } from 'docz'
+import rgba from 'polished/lib/color/rgba'
 import styled, { cx } from 'react-emotion'
+import SyntaxHighlighter from 'react-syntax-highlighter/prism-light'
 
-const PreStyled = styled('pre')`
-  overflow-y: hidden;
-  border: 1px solid ${p => p.theme.colors.border};
-  margin: 2em 0;
-  border-radius: 5px;
-  background: ${p => p.theme.colors.preBg};
+const PrismTheme = styled('pre')`
   ${p => p.theme.prismTheme};
   ${p => p.theme.mq(p.theme.styles.pre)};
+  padding: 30px;
+  margin: 0;
+  flex: 1;
 `
 
-interface PreProps {
-  className: string
-  children: any
+const getLanguage = (children: any) => {
+  if (typeof children === 'string') return 'language-jsx'
+  return children.props.props.className
 }
 
-export class Pre extends PureComponent<PreProps> {
-  private el: any
+const getCode = (content: any): SFC => ({ children }) => {
+  const className = cx('react-prism', getLanguage(content))
+  return <PrismTheme className={className}>{children}</PrismTheme>
+}
 
-  public render(): JSX.Element {
-    const { children } = this.props
-    const childrenProps = children.props.props
-    const childrenClassName = childrenProps && childrenProps.className
-    const className = cx('react-prism', this.props.className, childrenClassName)
+const Wrapper = styled('div')`
+  display: flex;
+  position: relative;
+  overflow-y: hidden;
+  border: 1px solid ${p => p.theme.colors.border};
+  border-radius: 5px;
+  background: ${p => p.theme.colors.preBg};
+  ${p => p.theme.mq(p.theme.styles.pre)};
 
-    return (
-      <PreStyled innerRef={ref => (this.el = ref)} className={className}>
-        <code>{children.props.children}</code>
-      </PreStyled>
-    )
+  .react-syntax-highlighter-line-number {
+    display: block;
+    padding: 0 15px;
+    opacity: 0.3;
+    text-align: right;
   }
+`
 
-  public componentDidMount(): void {
-    this.highlightCode()
-  }
+const Nullable: SFC = ({ children }) => <Fragment>{children}</Fragment>
 
-  public componentDidUpdate(): void {
-    this.highlightCode()
-  }
+const linesStyle = (colors: any) => ({
+  padding: '30px 0',
+  borderRight: `1px solid ${colors.border}`,
+  background: rgba(colors.background, 0.5),
+  left: 0,
+})
 
-  private highlightCode(): void {
-    prism.highlightElement(this.el)
-  }
+interface PreProps {
+  children: any
+  className?: string
 }
+
+export const Pre: SFC<PreProps> = ({ children, className }) => (
+  <ThemeConfig>
+    {config => (
+      <Wrapper className={className}>
+        <SyntaxHighlighter
+          language="javascript"
+          showLineNumbers
+          useInlineStyles={false}
+          lineProps={{ class: 'helo' }}
+          lineNumberContainerStyle={linesStyle(config.colors)}
+          PreTag={Nullable}
+          CodeTag={getCode(children)}
+        >
+          {children && typeof children !== 'string'
+            ? children.props.children
+            : children}
+        </SyntaxHighlighter>
+      </Wrapper>
+    )}
+  </ThemeConfig>
+)
diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx
@@ -3,32 +3,33 @@ import { Fragment } from 'react'
 import { RenderComponent } from 'docz'
 import styled from 'react-emotion'
 
+import { Pre as PreBase } from './Pre'
+
 const Playground = styled('div')`
-  background: 'render';
+  background: 'white';
   border: 1px solid ${p => p.theme.colors.border};
   border-bottom: 0;
   border-radius: 5px 5px 0 0;
   ${p => p.theme.mq(p.theme.styles.playground)};
 `
 
-const Code = styled('div')`
-  & code[class*='language-'],
-  & pre[class*='language-'] {
-    margin: 0;
-    border-radius: 0 0 5px 5px;
-  }
+const Pre = styled(PreBase)`
+  margin: 0;
+  border-radius: 0 0 5px 5px;
 `
 
 export const Render: RenderComponent = ({
-  component,
-  code,
   className,
   style,
-}) => (
-  <Fragment>
-    <Playground className={className} style={style}>
-      {component}
-    </Playground>
-    <Code>{code}</Code>
-  </Fragment>
-)
+  component,
+  rawCode,
+}) => {
+  return (
+    <Fragment>
+      <Playground className={className} style={style}>
+        {component}
+      </Playground>
+      <Pre>{rawCode}</Pre>
+    </Fragment>
+  )
+}
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -46,7 +46,7 @@ const Theme = () => (
 
 webfont.load({
   google: {
-    families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'],
+    families: ['Source Code Pro', 'Source Sans Pro:300,400,600,700'],
   },
 })
 

diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts
@@ -46,16 +46,17 @@ export const styles = {
     margin: '0 3px',
     padding: '4px 6px',
     borderRadius: '3px',
-    fontFamily: "'Inconsolata', monospace",
-    fontSize: 16,
+    fontFamily: '"Source Code Pro", monospace',
+    fontSize: 14,
   },
   pre: {
-    padding: ['1.5em', '2em'],
-    fontFamily: "'Inconsolata', monospace",
-    fontSize: 16,
+    margin: '30px 0',
+    fontFamily: '"Source Code Pro", monospace',
+    fontSize: 14,
+    lineHeight: 1.8,
   },
   table: {
-    fontFamily: "'Inconsolata', monospace",
-    fontSize: 16,
+    fontFamily: '"Source Code Pro", monospace',
+    fontSize: 14,
   },
 }
diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
@@ -1,11 +1,12 @@
-declare module 'react-feather'
-declare module 'react-powerplug'
-declare module 'react-lightweight-tooltip'
+declare module 'react-breakpoints'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-feather/dist/icons/search'
-declare module 'webfontloader'
-declare module 'react-breakpoints'
+declare module 'react-lightweight-tooltip'
+declare module 'react-powerplug'
+declare module 'react-syntax-highlighter/prism-light'
 declare module 'match-sorter'
+declare module 'polished/lib/color/rgba'
+declare module 'webfontloader'
 
 declare module '*.svg' {
   const content: any