From 303ce947d3bd515f22a6ad02266e2b963a5a9a6b Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Tue, 4 Jun 2019 15:35:02 -0600
Subject: [PATCH] Add Highlight component w/ bash, JS, TS, CSS, JSON support

---
 package.json                        |  1 +
 src/components/Highlight.js         | 65 ++++++++++++++++++++++++++
 src/components/Highlight.stories.js | 72 +++++++++++++++++++++++++++++
 yarn.lock                           |  7 +++
 4 files changed, 145 insertions(+)
 create mode 100644 src/components/Highlight.js
 create mode 100644 src/components/Highlight.stories.js

diff --git a/package.json b/package.json
index 40aef7cd..07a095d7 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
   "dependencies": {
     "global": "^4.3.2",
     "polished": "^3.3.0",
+    "prismjs": "1.13.0",
     "react-helmet": "^5.2.1",
     "react-lazyload": "^2.5.0",
     "react-modal": "^3.8.1",
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
new file mode 100644
index 00000000..9ead2d9a
--- /dev/null
+++ b/src/components/Highlight.js
@@ -0,0 +1,65 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import Prism from 'prismjs';
+import loadLanguages from 'prismjs/components/index';
+import PropTypes from 'prop-types';
+
+import { color, typography } from './shared/styles';
+
+import 'prismjs/themes/prism.css';
+
+loadLanguages(['bash', 'typescript', 'json']);
+
+// Tweak Prism styling
+const HighlightBlock = styled.div`
+  *:not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: ${color.lighter};
+    margin: 2em 0;
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    font-size: ${typography.size.s3}px;
+  }
+
+  code {
+    font-size: 17px;
+  }
+
+  .aside code {
+    font-size: 15px;
+  }
+`;
+
+class Highlight extends React.Component {
+  componentDidMount() {
+    this.highlightCode();
+  }
+
+  componentDidUpdate() {
+    this.highlightCode();
+  }
+
+  highlightCode() {
+    const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line
+    Prism.highlightAllUnder(domNode);
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <HighlightBlock>
+        <div dangerouslySetInnerHTML={{ __html: children }} />
+      </HighlightBlock>
+    );
+  }
+}
+
+Highlight.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Highlight;
diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js
new file mode 100644
index 00000000..b31b27a2
--- /dev/null
+++ b/src/components/Highlight.stories.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Highlight from './Highlight';
+
+const bash = `
+<pre class="language-bash"><code class="language-bash"><span class="token comment"># Highlight bash:</span>
+npx install some-package-name
+<span class="token function">cd</span> some-package-name
+</code></pre>
+`;
+
+const javascript = `
+<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Highlight JavaScript:</span>
+import React from 'react'
+
+const MyComponent = () => (
+  &#x3C;div>My component renders all the things&#x3C;/div>
+)
+
+export default MyComponent
+</code></pre>
+`;
+
+const typescript = `
+<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Highlight Typescript:</span>
+import React from 'react'
+
+interface InterfaceMyComponentProps {
+  isCool: boolean;
+}
+
+const MyComponent: React.SFC&#x3C;InterfaceMyComponentProps> = ({ isCool }) => (
+  &#x3C;div>My component isCool: {isCool}&#x3C;/div>
+)
+
+export default MyComponent
+</code></pre>
+`;
+
+const css = `
+<pre class="language-css"><code class="language-css"><span class="token comment">/* Highlight CSS: */</span>
+.someClass {
+  position: relative;
+}
+</code></pre>
+`;
+
+const json = `
+<pre class="language-json"><code class="language-json">
+{
+  "name": "@yourorg/package",
+  "version": "0.0.1",
+  "description": "A sweet package",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourorg/package.git"
+  }
+}
+</code></pre>
+`;
+
+storiesOf('Design System|Highlight', module)
+  .addParameters({ component: Highlight })
+  .add('all languages', () => (
+    <div>
+      <Highlight>{bash}</Highlight>
+      <Highlight>{javascript}</Highlight>
+      <Highlight>{typescript}</Highlight>
+      <Highlight>{css}</Highlight>
+      <Highlight>{json}</Highlight>
+    </div>
+  ));
diff --git a/yarn.lock b/yarn.lock
index 8fc7f19b..d032ed2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7472,6 +7472,13 @@ pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
+prismjs@1.13.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.13.0.tgz#edcc14a90bbd72a03e5ffd2bab81a04c79a607a6"
+  integrity sha512-0/1Fiyg3MCzepo6t6Wzx2Ef4nftGKeQIv+Z6LO38RcYJN5QV2ePHh8W41ZkFn57B++6BnglF6fCiJ9b80YlzkQ==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 prismjs@^1.8.4, prismjs@~1.16.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"