Skip to content

Commit

Permalink
feat: add a component example that renders a live preview
Browse files Browse the repository at this point in the history
jerelmiller committed Jun 2, 2020
1 parent e190181 commit 7178aa5
Showing 3 changed files with 63 additions and 2 deletions.
32 changes: 32 additions & 0 deletions src/components/ComponentExample.js
Original file line number Diff line number Diff line change
@@ -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;
18 changes: 16 additions & 2 deletions src/templates/ReferenceTemplate.js
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions src/utils/formatCode.js
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 7178aa5

Please sign in to comment.