From 7178aa594c4c573cd37e60ee03f89c5479ea07fb Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 2 Jun 2020 15:34:06 -0700
Subject: [PATCH] feat: add a component example that renders a live preview

---
 src/components/ComponentExample.js | 32 ++++++++++++++++++++++++++++++
 src/templates/ReferenceTemplate.js | 18 +++++++++++++++--
 src/utils/formatCode.js            | 15 ++++++++++++++
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ComponentExample.js
 create mode 100644 src/utils/formatCode.js

diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
new file mode 100644
index 000000000..905c79a92
--- /dev/null
+++ b/src/components/ComponentExample.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import formatCode from '../utils/formatCode';
+import github from 'prism-react-renderer/themes/github';
+import { LiveEditor, LiveError, LiveProvider, LivePreview } from 'react-live';
+
+const TRAILING_SEMI = /;\s*$/;
+
+const ComponentExample = ({ className, example }) => (
+  <div className={className}>
+    <h3>{example.label}</h3>
+    <LiveProvider
+      scope={window.__NR1_SDK__.default}
+      code={formatCode(example.sourceCode).replace(TRAILING_SEMI, '')}
+      theme={github}
+    >
+      <LivePreview />
+      <LiveEditor />
+      <LiveError />
+    </LiveProvider>
+  </div>
+);
+
+ComponentExample.propTypes = {
+  className: PropTypes.string,
+  example: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    sourceCode: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default ComponentExample;
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 0f0cc9ce9..bba80db1b 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import Container from '../components/Container';
+import ComponentExample from '../components/ComponentExample';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
+import useSdk from '../hooks/useSdk';
 
 import pages from '../data/sidenav.json';
 
@@ -14,7 +16,11 @@ const ReferenceTemplate = ({ data }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
-  const { title, description, component } = frontmatter;
+  const { title, description } = frontmatter;
+  useSdk();
+
+  const component = window.__NR1_SDK__?.default[frontmatter.component];
+  const examples = component?.__docs__.tags.examples || [];
 
   return (
     <Layout>
@@ -27,7 +33,15 @@ const ReferenceTemplate = ({ data }) => {
           toggle={() => setIsOpen(!isOpen)}
         />
         <main className={styles.content}>
-          <h1>{component}</h1>
+          <h1>{frontmatter.component}</h1>
+          <section>
+            <h2>Examples</h2>
+            <section>
+              {examples.map((example, i) => (
+                <ComponentExample key={i} example={example} />
+              ))}
+            </section>
+          </section>
         </main>
       </Container>
     </Layout>
diff --git a/src/utils/formatCode.js b/src/utils/formatCode.js
new file mode 100644
index 000000000..90426275e
--- /dev/null
+++ b/src/utils/formatCode.js
@@ -0,0 +1,15 @@
+import prettier from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
+
+const formatCode = (code, formatOptions = {}) =>
+  prettier.format(code, {
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+    semi: true,
+    singleQuote: true,
+    ...formatOptions,
+    plugins: [parserBabel],
+  });
+
+export default formatCode;