From 204f1bbf6f91b78edc91a2d47e32ae16c0ae32f1 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sat, 21 Jul 2018 01:31:42 -0300
Subject: [PATCH] feat(docz-theme-default): add line numbers on Playground

---
 packages/docz-theme-default/librc.js          | 28 ++++--
 packages/docz-theme-default/package.json      |  4 +-
 .../src/components/ui/Pre.tsx                 | 97 ++++++++++++-------
 .../src/components/ui/Render.tsx              | 35 +++----
 packages/docz-theme-default/src/index.tsx     |  2 +-
 .../docz-theme-default/src/styles/index.ts    | 15 +--
 packages/docz-theme-default/src/types.d.ts    | 11 ++-
 yarn.lock                                     | 76 +++++++++++++--
 8 files changed, 187 insertions(+), 81 deletions(-)

diff --git a/packages/docz-theme-default/librc.js b/packages/docz-theme-default/librc.js
index c9305d8b4..c88cd46a2 100644
--- 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
index b22eff4a6..d9431737f 100644
--- 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,6 +36,7 @@
     "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": {
@@ -43,7 +44,6 @@
     "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
index 287406697..575174423 100644
--- 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
index c94f0d3b7..c03c66f70 100644
--- 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
index dfa07525f..98074f96a 100644
--- 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
index 52b9a2277..f95819442 100644
--- 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
index 53c14c8f2..e4d4192fb 100644
--- 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
diff --git a/yarn.lock b/yarn.lock
index 86c9d5721..431ec5c3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1371,10 +1371,6 @@
   version "1.13.2"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-1.13.2.tgz#ffe96278e712a8d4e467e367a338b05e22872646"
 
-"@types/prismjs@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz#38af9491e2f105079a443703ee675fb27371ec94"
-
 "@types/react-dom@^16.0.6":
   version "16.0.6"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"
@@ -3508,6 +3504,12 @@ combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz#b13793131d9ea2d2431cf5b507ddec258f0ce0db"
+  dependencies:
+    trim "0.0.1"
+
 command-join@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
@@ -5126,7 +5128,7 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
-fault@^1.0.1:
+fault@^1.0.1, fault@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz#c3d0fec202f172a3a4d414042ad2bb5e2a3ffbaa"
   dependencies:
@@ -6015,10 +6017,24 @@ hast-util-is-element@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.0.0.tgz#3f7216978b2ae14d98749878782675f33be3ce00"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.0.tgz#2175f18cdd697308fc3431d5c29a9e48dfa4817a"
+
 hast-util-to-string@^1.0.0, hast-util-to-string@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.1.tgz#b28055cdca012d3c8fd048757c8483d0de0d002c"
 
+hastscript@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/hastscript/-/hastscript-3.1.0.tgz#66628ba6d7f1ad07d9277dd09028aba7f4934599"
+  dependencies:
+    camelcase "^3.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^3.0.0"
+    space-separated-tokens "^1.0.0"
+
 hawk@3.1.3, hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
@@ -6036,6 +6052,10 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+highlight.js@~9.12.0:
+  version "9.12.0"
+  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+
 history@^4.7.2:
   version "4.7.2"
   resolved "https://registry.npmjs.org/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
@@ -7625,6 +7645,13 @@ lowercase-keys@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
 
+lowlight@~1.9.1:
+  version "1.9.2"
+  resolved "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.12.0"
+
 lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1:
   version "4.1.2"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
@@ -8981,6 +9008,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+polished@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/polished/-/polished-1.9.3.tgz#d61b8a0c4624efe31e2583ff24a358932b6b75e1"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -9325,12 +9356,18 @@ pretty-time@^1.0.0:
     is-number "^5.0.0"
     nanoseconds "^1.0.0"
 
-prismjs@^1.15.0:
+prismjs@^1.8.4:
   version "1.15.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"
   optionalDependencies:
     clipboard "^2.0.0"
 
+prismjs@~1.14.0:
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6, private@^0.1.8, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -9380,6 +9417,10 @@ prop-types@^15.6.0, prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+property-information@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/property-information/-/property-information-3.2.0.tgz#fd1483c8fbac61808f5fe359e7693a1f48a58331"
+
 proxy-addr@~2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
@@ -9656,6 +9697,16 @@ react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-syntax-highlighter@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.0.1.tgz#88f7833e3a2d3c718799f2e7776266486c82c566"
+  dependencies:
+    babel-runtime "^6.18.0"
+    highlight.js "~9.12.0"
+    lowlight "~1.9.1"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react@^16.2.0, react@^16.3.2, react@^16.4.1:
   version "16.4.1"
   resolved "https://registry.npmjs.org/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
@@ -9828,6 +9879,13 @@ reduce-css-calc@^2.0.0:
     css-unit-converter "^1.1.1"
     postcss-value-parser "^3.3.0"
 
+refractor@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/refractor/-/refractor-2.4.1.tgz#067654311ed1618fc2dd76e9263c8cf05ab6298b"
+  dependencies:
+    hastscript "^3.1.0"
+    prismjs "~1.14.0"
+
 regenerate-unicode-properties@^5.1.1:
   version "5.1.3"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-5.1.3.tgz#54f5891543468f36f2274b67c6bc4c033c27b308"
@@ -10760,6 +10818,12 @@ source-map@^0.7.2:
   version "0.7.3"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
 
+space-separated-tokens@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412"
+  dependencies:
+    trim "0.0.1"
+
 spawn-sync@^1.0.15:
   version "1.0.15"
   resolved "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"