├── .npmignore
├── packages
    ├── docs-components
    │   ├── .gitignore
    │   ├── .npmignore
    │   ├── .babelrc
    │   ├── src
    │   │   ├── theme.js
    │   │   ├── index.js
    │   │   ├── ThemeProvider.js
    │   │   ├── Pagination.js
    │   │   ├── Layout.js
    │   │   ├── SideBar.js
    │   │   └── Header.js
    │   ├── README.md
    │   └── package.json
    └── mdx-editable
    │   ├── .babelrc
    │   ├── __snapshots__
    │       └── test.js.snap
    │   ├── test.js
    │   ├── package.json
    │   ├── src
    │       ├── index.js
    │       ├── LivePreview.js
    │       └── LiveEditor.js
    │   └── dist
    │       ├── index.js
    │       ├── LivePreview.js
    │       └── LiveEditor.js
├── templates
    ├── next
    │   ├── pages
    │   │   ├── components
    │   │   │   ├── index.md
    │   │   │   └── Button.md
    │   │   ├── getting-started.md
    │   │   ├── index.md
    │   │   ├── _document.js
    │   │   └── _app.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── next.config.js
    │   └── package.json
    └── x0
    │   ├── .gitignore
    │   ├── pages
    │       ├── getting-started.md
    │       ├── index.md
    │       └── _app.js
    │   └── package.json
├── README.md
├── package.json
└── cli.js


/.npmignore:
--------------------------------------------------------------------------------
1 | templates
2 | packages
3 | 


--------------------------------------------------------------------------------
/packages/docs-components/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | 


--------------------------------------------------------------------------------
/templates/next/pages/components/index.md:
--------------------------------------------------------------------------------
1 | 
2 | # Components
3 | 


--------------------------------------------------------------------------------
/templates/x0/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | dist
4 | 


--------------------------------------------------------------------------------
/packages/docs-components/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | tests/**/*
3 | .babelrc
4 | 


--------------------------------------------------------------------------------
/templates/next/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .next
4 | out
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | **Deprecated** See [mdx-docs](https://github.com/jxnblk/mdx-docs)
3 | 


--------------------------------------------------------------------------------
/templates/next/pages/getting-started.md:
--------------------------------------------------------------------------------
1 | 
2 | # Getting Started
3 | 
4 | ```sh
5 | npm init docs
6 | ```
7 | 


--------------------------------------------------------------------------------
/templates/x0/pages/getting-started.md:
--------------------------------------------------------------------------------
1 | 
2 | # Getting Started
3 | 
4 | ```sh
5 | npm init docs
6 | ```
7 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   presets: [
3 |     'env',
4 |     'stage-0',
5 |     'react'
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/templates/next/pages/components/Button.md:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | # Button
4 | 
5 | ```.jsx
6 | <button>Button</button>
7 | ```
8 | 


--------------------------------------------------------------------------------
/packages/docs-components/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   presets: [
3 |     'env',
4 |     'stage-0',
5 |     'react'
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/theme.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   font: 'system-ui, sans-serif',
3 |   lineHeight: 1.5,
4 | }
5 | 


--------------------------------------------------------------------------------
/templates/next/pages/index.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # npm init docs
 3 | 
 4 | Next.js-based documentation site
 5 | 
 6 | ```sh
 7 | npm init docs
 8 | ```
 9 | 
10 | ```.jsx
11 | <h2>LiveEditor</h2>
12 | ```
13 | 
14 | ```!jsx
15 | <h2>LivePreview</h2>
16 | ```
17 | 
18 | 


--------------------------------------------------------------------------------
/templates/x0/pages/index.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # npm init docs
 3 | 
 4 | Compositor x0 based documentation site
 5 | 
 6 | ```sh
 7 | npm init docs
 8 | ```
 9 | 
10 | ```.jsx
11 | <h2>LiveEditor</h2>
12 | ```
13 | 
14 | ```!jsx
15 | <h2>LivePreview</h2>
16 | ```
17 | 
18 | 


--------------------------------------------------------------------------------
/packages/docs-components/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # docs-components
 3 | 
 4 | React components for documentation sites
 5 | 
 6 | ```sh
 7 | npm i docs-components
 8 | ```
 9 | 
10 | ## Components
11 | 
12 | ### Layout
13 | ### ThemeProvider
14 | ### Header
15 | ### SideBar
16 | ### Pagination
17 | ### Container
18 | 
19 | ## Theming
20 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Layout } from './Layout'
2 | export { default as SideBar } from './SideBar'
3 | export { default as Header } from './Header'
4 | export { default as Pagination } from './Pagination'
5 | export { default as ThemeProvider } from './ThemeProvider'
6 | export { default as theme } from './theme'
7 | 


--------------------------------------------------------------------------------
/templates/x0/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "start": "x0 pages",
 7 |     "build": "x0 build pages"
 8 |   },
 9 |   "dependencies": {
10 |     "@compositor/x0": "^6.0.2",
11 |     "react": "^16.4.1",
12 |     "styled-components": "^3.3.3"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/templates/x0/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { SidebarLayout } from '@compositor/x0/components'
 3 | 
 4 | export default class extends React.Component {
 5 |   static defaultProps = {
 6 |     title: 'npm init docs',
 7 |   }
 8 | 
 9 |   render () {
10 |     return (
11 |       <SidebarLayout {...this.props} />
12 |     )
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/templates/next/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # create-docs Next.js
 3 | 
 4 | ## Getting Started
 5 | 
 6 | ```sh
 7 | npm install
 8 | ```
 9 | 
10 | ### Run in development mode
11 | 
12 | ```sh
13 | npm start
14 | ```
15 | 
16 | ### Export static site
17 | 
18 | ```sh
19 | npm run build
20 | ```
21 | 
22 | Built with [create-docs][]
23 | 
24 | [create-docs]: https://github.com/jxnblk/create-docs
25 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/__snapshots__/test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`mdx-editable LivePreview renders 1`] = `
 4 | <div
 5 |   className="sc-bdVaJa zQNlg"
 6 | >
 7 |   <div
 8 |     className="react-live"
 9 |   >
10 |     <div
11 |       className="react-live-preview"
12 |     >
13 |       <h1>
14 |         hi
15 |       </h1>
16 |     </div>
17 |   </div>
18 | </div>
19 | `;
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-docs",
 3 |   "version": "1.0.0-3",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "bin": {
 7 |     "create-docs": "./cli.js"
 8 |   },
 9 |   "scripts": {
10 |     "test": "./cli.js"
11 |   },
12 |   "keywords": [],
13 |   "author": "Brent Jackson",
14 |   "license": "MIT",
15 |   "dependencies": {
16 |     "chalk": "^2.4.1",
17 |     "initit": "^1.0.0-2",
18 |     "meow": "^5.0.0",
19 |     "prompt": "^1.0.0",
20 |     "prompts": "^0.1.12",
21 |     "styled-system": "^2.3.6"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/ThemeProvider.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled, { ThemeProvider } from 'styled-components'
 3 | import { themeGet } from 'styled-system'
 4 | import defaultTheme from './theme'
 5 | 
 6 | export const Root = styled.div`
 7 |   font-family: ${themeGet('font', 'sans-serif')};
 8 |   line-height: ${themeGet('lineHeight')};
 9 | `
10 | 
11 | export default class extends React.Component {
12 |   static defaultProps = {
13 |     theme: defaultTheme
14 |   }
15 | 
16 |   render () {
17 |     const { children, ...props } = this.props
18 | 
19 |     return (
20 |       <ThemeProvider {...props}>
21 |         <Root>
22 |           {children}
23 |         </Root>
24 |       </ThemeProvider>
25 |     )
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { create as render } from 'react-test-renderer'
 3 | import {
 4 |   code,
 5 |   pre,
 6 |   LivePreview,
 7 |   LiveEditor
 8 | } from './src'
 9 | 
10 | const renderJSON = el => render(el).toJSON()
11 | 
12 | describe('mdx-editable', () => {
13 |   test('LiveEditor renders', () => {
14 |     const json = renderJSON(<LiveEditor code='<h1>hi</h1>' />)
15 |     expect(json).toMatchSnapshot()
16 |   })
17 | 
18 |   test('LivePreview renders', () => {
19 |     const json = renderJSON(<LivePreview code='<h1>hi</h1>' />)
20 |     expect(json).toMatchSnapshot()
21 |   })
22 | 
23 |   test('code renders', () => {
24 |     const json = renderJSON(React.createElement(code, {
25 |       className: 'language-.jsx'
26 |     }, 'hi'))
27 |     expect(json).toMatchSnapshot()
28 |   })
29 | })
30 | 


--------------------------------------------------------------------------------
/templates/next/next.config.js:
--------------------------------------------------------------------------------
 1 | const remark = {
 2 |   images: require('remark-images'),
 3 |   emoji: require('remark-emoji'),
 4 |   slug: require('remark-slug'),
 5 |   autolinkHeadings: require('remark-autolink-headings'),
 6 | }
 7 | 
 8 | module.exports = {
 9 |   pageExtensions: ['js', 'jsx', 'md', 'mdx'],
10 |   webpack: (config, { defaultLoaders }) => {
11 |     config.module.rules.push({
12 |       test: /\.mdx?$/,
13 |       use: [
14 |         defaultLoaders.babel,
15 |         {
16 |           loader: '@mdx-js/loader',
17 |           options: {
18 |             mdPlugins: [
19 |               remark.images,
20 |               remark.emoji,
21 |               remark.slug,
22 |               remark.autolinkHeadings
23 |             ]
24 |           }
25 |         },
26 |         'mdx-fm-loader'
27 |       ]
28 |     })
29 | 
30 |     return config
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/templates/next/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "start": "next",
 7 |     "build": "next build && next export"
 8 |   },
 9 |   "dependencies": {
10 |     "@mdx-js/loader": "^0.14.0",
11 |     "@mdx-js/mdx": "^0.14.0",
12 |     "@mdx-js/tag": "^0.14.0",
13 |     "babel-loader": "^7.1.5",
14 |     "clean-tag": "^1.0.4",
15 |     "docs-components": "^1.0.0-0",
16 |     "gray-matter": "^4.0.1",
17 |     "grid-styled": "^4.3.2",
18 |     "mdx-editable": "^1.0.0-0",
19 |     "mdx-fm-loader": "^1.0.0-0",
20 |     "next": "^6.1.1",
21 |     "prop-types": "^15.6.2",
22 |     "react": "^16.4.1",
23 |     "react-dom": "^16.4.1",
24 |     "remark-autolink-headings": "^5.0.0",
25 |     "remark-emoji": "^2.0.1",
26 |     "remark-images": "^0.8.1",
27 |     "remark-slug": "^5.0.0",
28 |     "stringify-object": "^3.2.2",
29 |     "styled-components": "^3.3.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/packages/docs-components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs-components",
 3 |   "version": "1.0.0-1",
 4 |   "description": "React components for documentation sites",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "prepare": "babel src -d dist",
 8 |     "test": "jest"
 9 |   },
10 |   "keywords": [],
11 |   "author": "Brent Jackson",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "babel-cli": "^6.26.0",
15 |     "babel-preset-env": "^1.7.0",
16 |     "babel-preset-react": "^6.24.1",
17 |     "babel-preset-stage-0": "^6.24.1",
18 |     "jest": "^23.4.1",
19 |     "react": "^16.4.1",
20 |     "react-test-renderer": "^16.4.1",
21 |     "styled-components": "^3.3.3"
22 |   },
23 |   "dependencies": {
24 |     "clean-tag": "^1.0.4",
25 |     "grid-styled": "^4.3.2",
26 |     "prop-types": "^15.6.2",
27 |     "reline": "^1.0.0-beta.3",
28 |     "styled-system": "^2.3.6"
29 |   },
30 |   "peerDependencies": {
31 |     "styled-components": ">=3.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/Pagination.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Flex, Box } from 'grid-styled'
 4 | 
 5 | export default class Pagination extends React.Component {
 6 |   render () {
 7 |     const { routes, route, Link } = this.props
 8 |     const index = routes.indexOf(route)
 9 |       //routes.findIndex(r => r.path === route.path)
10 |     const previous = routes[index - 1]
11 |     const next = routes[index + 1]
12 | 
13 |     return (
14 |       <Flex
15 |         py={4}
16 |         alignItems='center'>
17 |         {previous && (
18 |           <Box>
19 |             <Link href={previous.path}>
20 |               {previous.name}
21 |             </Link>
22 |           </Box>
23 |         )}
24 |         <Box mx='auto' />
25 |         {next && (
26 |           <Box>
27 |             <Link href={next.path}>
28 |               {next.name}
29 |             </Link>
30 |           </Box>
31 |         )}
32 |       </Flex>
33 |     )
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdx-editable",
 3 |   "version": "1.0.0-0",
 4 |   "description": "Components for editable fenced code blocks in MDX",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "prepare": "babel src -d dist",
 8 |     "test": "jest"
 9 |   },
10 |   "keywords": [],
11 |   "author": "Brent Jackson",
12 |   "license": "MIT",
13 |   "peerDependencies": {
14 |     "styled-components": ">=3.0.0"
15 |   },
16 |   "dependencies": {
17 |     "@mdx-js/tag": "^0.14.0",
18 |     "grid-styled": "^4.3.2",
19 |     "react": "^16.4.1",
20 |     "react-live": "^1.11.0",
21 |     "styled-system": "^2.3.6"
22 |   },
23 |   "devDependencies": {
24 |     "babel-cli": "^6.26.0",
25 |     "babel-preset-env": "^1.7.0",
26 |     "babel-preset-react": "^6.24.1",
27 |     "babel-preset-stage-0": "^6.24.1",
28 |     "jest": "^23.4.1",
29 |     "react-test-renderer": "^16.4.1",
30 |     "styled-components": "^3.3.3"
31 |   },
32 |   "jest": {
33 |     "testMatch": [
34 |       "**/test*.js"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/templates/next/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Main, NextScript } from 'next/document'
 2 | import { ServerStyleSheet } from 'styled-components'
 3 | 
 4 | const BaseCSS = ({ css }) =>
 5 |   <style
 6 |     dangerouslySetInnerHTML={{
 7 |       __html: css
 8 |     }}
 9 |   />
10 | 
11 | BaseCSS.defaultProps = {
12 |   css: '*{box-sizing:border-box}body{margin:0}'
13 | }
14 | 
15 | export default class MyDocument extends Document {
16 |   static getInitialProps ({ renderPage }) {
17 |     const sheet = new ServerStyleSheet()
18 |     const page = renderPage(App => props => (
19 |       sheet.collectStyles(<App {...props} />)
20 |     ))
21 |     const styles = sheet.getStyleElement()
22 |     return { ...page, styles }
23 |   }
24 | 
25 |   render () {
26 |     const { styles } = this.props
27 | 
28 |     return (
29 |       <html>
30 |         <Head>
31 |           <BaseCSS />
32 |           {styles}
33 |         </Head>
34 |         <body>
35 |           <Main />
36 |           <NextScript />
37 |         </body>
38 |       </html>
39 |     )
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Box } from 'grid-styled'
 3 | import LiveEditor from './LiveEditor'
 4 | import LivePreview from './LivePreview'
 5 | 
 6 | export { default as LiveEditor } from './LiveEditor'
 7 | export { default as LivePreview } from './LivePreview'
 8 | 
 9 | export const pre = props => props.children
10 | 
11 | // todo: decouple from Rebass completely
12 | export const code = ({
13 |   children,
14 |   className = '',
15 |   scope,
16 |   ...props
17 | }) => {
18 |   const lang = className.replace(/^language\-/, '')
19 |   const type = lang.charAt(0)
20 |   const code = React.Children.toArray(children).join('\n')
21 | 
22 |   switch (type) {
23 |     case '.':
24 |       return <LiveEditor code={code} scope={scope} />
25 |     case '!':
26 |       return <LivePreview code={code} scope={scope} />
27 |     default:
28 |       return (
29 |         <Box
30 |           is='pre'
31 |           p={3}
32 |           mt={4}
33 |           mb={4}
34 |           bg='lightgray'
35 |           fontSize={13}
36 |           css={{
37 |             fontFamily: 'Menlo, monospace'
38 |           }}
39 |           children={children}
40 |         />
41 |       )
42 |   }
43 | }
44 | 
45 | export default {
46 |   pre,
47 |   code
48 | }
49 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/src/LivePreview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import {
 4 |   LiveProvider,
 5 |   LivePreview,
 6 |   LiveError
 7 | } from 'react-live'
 8 | import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
 9 | import { Box } from 'grid-styled'
10 | 
11 | const transformCode = str => `<React.Fragment>${str}</React.Fragment>`
12 | 
13 | export default withMDXComponents(class extends React.Component {
14 |   static displayName = 'LivePreview'
15 | 
16 |   static propTypes = {
17 |     code: PropTypes.string.isRequired,
18 |     scope: PropTypes.object,
19 |     components: PropTypes.object,
20 |     render: PropTypes.func,
21 |     previewProps: PropTypes.object,
22 |     editorProps: PropTypes.object,
23 |     errorProps: PropTypes.object,
24 |   }
25 | 
26 |   render () {
27 |     const {
28 |       code,
29 |       scope,
30 |       components
31 |     } = this.props
32 | 
33 |     return (
34 |       <Box my={3}>
35 |         <LiveProvider
36 |           code={code}
37 |           scope={{ ...components, ...scope }}
38 |           mountStylesheet={false}
39 |           transformCode={transformCode}>
40 |           <LivePreview />
41 |           <LiveError />
42 |         </LiveProvider>
43 |       </Box>
44 |     )
45 |   }
46 | })
47 | 


--------------------------------------------------------------------------------
/templates/next/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import App, { Container } from 'next/app'
 3 | import NextLink from 'next/link'
 4 | import { MDXProvider } from '@mdx-js/tag'
 5 | import {
 6 |   pre,
 7 |   code
 8 | } from 'mdx-editable'
 9 | import { ThemeProvider, Layout } from 'docs-components'
10 | 
11 | const components = {
12 |   pre,
13 |   code
14 | }
15 | 
16 | const routes = [
17 |   { name: 'Home', path: '/' },
18 |   { name: 'Getting Started', path: '/getting-started' },
19 |   { name: 'Components', path: '/components' },
20 |   { name: 'Button', path: '/components/Button' },
21 | ]
22 | 
23 | const Link = ({ children, ...props }) =>
24 |   <NextLink {...props}>
25 |     <a>{children}</a>
26 |   </NextLink>
27 | 
28 | export default class MyApp extends App {
29 |   static async getInitialProps ({ Component, router, ctx }) {
30 |     let pageProps = {}
31 | 
32 |     if (Component.getInitialProps) {
33 |       pageProps = await Component.getInitialProps(ctx)
34 |     }
35 | 
36 |     return { pageProps }
37 |   }
38 | 
39 |   render () {
40 |     const { Component, pageProps, router } = this.props
41 |     // doesn't appear to be a way to automatically get routes array...
42 |     // console.log(this.props, pageProps)
43 | 
44 |     const route = routes.find(route => route.path === router.pathname)
45 | 
46 |     return (
47 |       <MDXProvider components={components}>
48 |         <ThemeProvider>
49 |           <Container>
50 |             <Layout
51 |               {...this.props}
52 |               Link={Link}
53 |               routes={routes}
54 |               route={route}
55 |               page={pageProps}>
56 |               <Component {...pageProps} />
57 |             </Layout>
58 |           </Container>
59 |         </ThemeProvider>
60 |       </MDXProvider>
61 |     )
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Flex, Box } from 'grid-styled'
 4 | import SideBar from './SideBar'
 5 | import Header from './Header'
 6 | import Pagination from './Pagination'
 7 | 
 8 | const Container = props =>
 9 |   <Box
10 |     {...props}
11 |     mx='auto'
12 |     px={3}
13 |     py={4}
14 |     css={{
15 |       maxWidth: '768px',
16 |     }}
17 |   />
18 | 
19 | export default class extends React.Component {
20 |   static propTypes = {
21 |     routes: PropTypes.arrayOf(
22 |       PropTypes.shape({
23 |         path: PropTypes.string.isRequired,
24 |         name: PropTypes.string.isRequired,
25 |       })
26 |     ),
27 |     Header: PropTypes.func.isRequired,
28 |     SideBar: PropTypes.func.isRequired,
29 |     Pagination: PropTypes.func.isRequired,
30 |     Container: PropTypes.func.isRequired,
31 |   }
32 | 
33 |   static defaultProps = {
34 |     Header,
35 |     SideBar,
36 |     Pagination,
37 |     Container,
38 |     Link: props => <a {...props} />,
39 |     routes: [],
40 |     title: 'create-docs',
41 |   }
42 | 
43 |   state = {
44 |     menu: false
45 |   }
46 | 
47 |   toggleMenu = () => {
48 |     this.setState(state => ({ menu: !state.menu }))
49 |   }
50 | 
51 |   closeMenu = () => {
52 |     this.setState(state => ({ menu: false }))
53 |   }
54 | 
55 |   render () {
56 |     const {
57 |       children,
58 |       routes = [],
59 |       Header,
60 |       SideBar,
61 |       Container,
62 |     } = this.props
63 |     const { menu } = this.state
64 | 
65 |     return (
66 |       <React.Fragment>
67 |         <Header
68 |           {...this.props}
69 |           {...this.state}
70 |           toggleMenu={this.toggleMenu}
71 |         />
72 |         <Flex>
73 |           <SideBar
74 |             {...this.props}
75 |             {...this.state}
76 |             toggleMenu={this.toggleMenu}
77 |             closeMenu={this.closeMenu}
78 |           />
79 |           <Box width={1}>
80 |             <Container>
81 |               {children}
82 |               <Pagination {...this.props} />
83 |             </Container>
84 |           </Box>
85 |         </Flex>
86 |       </React.Fragment>
87 |     )
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/SideBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Box } from 'grid-styled'
 4 | 
 5 | const Root = ({ open, ...props }) =>
 6 |   <Box
 7 |     width={256}
 8 |     bg='white'
 9 |     {...props}
10 |     flex='none'
11 |     css={{
12 |       position: 'fixed',
13 |       top: '48px',
14 |       left: 0,
15 |       bottom: 0,
16 |       boxShadow: '1px 0 0 0 rgba(0, 0, 0, .125)',
17 |       height: 'calc(100vh - 48px)',
18 |       overflowY: 'auto',
19 |       WebkitOverflowScrolling: 'touch',
20 |       transition: 'transform .2s ease-out',
21 |       '@media screen and (max-width: 40em)': {
22 |         transform: `translateX(${open ? '0' : '-100%'})`
23 |       },
24 |     }}
25 |   />
26 | 
27 | const Overlay = props =>
28 |   <Box
29 |     {...props}
30 |     css={{
31 |       position: 'fixed',
32 |       top: 0,
33 |       right: 0,
34 |       bottom: 0,
35 |       left: 0,
36 |     }}
37 |   />
38 | 
39 | const Spacer = props =>
40 |   <Box
41 |     width={256}
42 |     flex='none'
43 |     {...props}
44 |     css={{
45 |       display: 'none',
46 |       '@media screen and (min-width: 40em)': {
47 |         display: 'block'
48 |       }
49 |     }}
50 |   />
51 | 
52 | export default class SideBar extends React.Component {
53 |   static propTypes = {
54 |     routes: PropTypes.arrayOf(
55 |       PropTypes.shape({
56 |         path: PropTypes.string.isRequired,
57 |         name: PropTypes.string.isRequired,
58 |       })
59 |     ).isRequired,
60 |     toggleMenu: PropTypes.func.isRequired,
61 |     closeMenu: PropTypes.func.isRequired
62 |   }
63 | 
64 |   render () {
65 |     const {
66 |       menu,
67 |       toggleMenu,
68 |       closeMenu,
69 |       routes,
70 |       Link,
71 |     } = this.props
72 | 
73 |     return (
74 |       <React.Fragment>
75 |         {menu && <Overlay onClick={closeMenu} />}
76 |         <Spacer />
77 |         <Root
78 |           open={menu}
79 |           onClick={closeMenu}>
80 |           <ul>
81 |             {routes.map(route => (
82 |               <li key={route.path}>
83 |                 <Link href={route.path}>
84 |                   {route.name}
85 |                 </Link>
86 |               </li>
87 |             ))}
88 |           </ul>
89 |         </Root>
90 |       </React.Fragment>
91 |     )
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/packages/docs-components/src/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Flex, Box } from 'grid-styled'
 4 | import styled from 'styled-components'
 5 | import div from 'clean-tag'
 6 | import { Burger } from 'reline'
 7 | 
 8 | const Root = props =>
 9 |   <Flex
10 |     {...props}
11 |     bg='white'
12 |     css={{
13 |       position: 'fixed',
14 |       zIndex: 1,
15 |       top: 0,
16 |       right: 0,
17 |       left: 0,
18 |       height: '48px',
19 |       boxShadow: '0 0 0 1px rgba(0, 0, 0, .125)'
20 |     }}
21 |   />
22 | 
23 | const MobileOnly = props =>
24 |   <Box
25 |     {...props}
26 |     css={{
27 |       '@media screen and (min-width: 40em)': {
28 |         display: 'none'
29 |       }
30 |     }}
31 |   />
32 | 
33 | const MenuButton = props =>
34 |   <MobileOnly>
35 |     <Box
36 |       {...props}
37 |       is='button'
38 |       m={0}
39 |       p={2}
40 |       css={{
41 |         appearance: 'none',
42 |         fontFamily: 'inherit',
43 |         fontSize: 'inherit',
44 |         color: 'inherit',
45 |         backgroundColor: 'transparent',
46 |         border: 'none'
47 |       }}>
48 |       <Burger />
49 |     </Box>
50 |   </MobileOnly>
51 | 
52 | const NavLink = styled(div.a)`
53 |   font-weight: bold;
54 |   font-size: 14px;
55 |   text-decoration: none;
56 |   display: inline-block;
57 |   padding: 8px;
58 |   color: inherit;
59 | `
60 | 
61 | export default class SideBar extends React.Component {
62 |   static propTypes = {
63 |     logo: PropTypes.func,
64 |     title: PropTypes.string,
65 |     Link: PropTypes.func.isRequired,
66 |     toggleMenu: PropTypes.func.isRequired
67 |   }
68 | 
69 |   static defaultProps = {
70 |   }
71 | 
72 |   render () {
73 |     const {
74 |       title,
75 |       logo,
76 |       Link,
77 |       toggleMenu
78 |     } = this.props
79 | 
80 |     return (
81 |       <React.Fragment>
82 |         <Root px={2} py={1} alignItems='center'>
83 |           <MenuButton
84 |             title='Menu'
85 |             onClick={toggleMenu}
86 |             mr={3}
87 |           />
88 |           {logo}
89 |           <NavLink is={Link} href='/'>
90 |             {title}
91 |           </NavLink>
92 |           <Box mx='auto' />
93 |         </Root>
94 |         <Box css={{ height: '48px' }} />
95 |       </React.Fragment>
96 |     )
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/dist/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.code = exports.pre = exports.LivePreview = exports.LiveEditor = undefined;
 7 | 
 8 | var _LiveEditor = require('./LiveEditor');
 9 | 
10 | Object.defineProperty(exports, 'LiveEditor', {
11 |   enumerable: true,
12 |   get: function get() {
13 |     return _interopRequireDefault(_LiveEditor).default;
14 |   }
15 | });
16 | 
17 | var _LivePreview = require('./LivePreview');
18 | 
19 | Object.defineProperty(exports, 'LivePreview', {
20 |   enumerable: true,
21 |   get: function get() {
22 |     return _interopRequireDefault(_LivePreview).default;
23 |   }
24 | });
25 | 
26 | var _react = require('react');
27 | 
28 | var _react2 = _interopRequireDefault(_react);
29 | 
30 | var _gridStyled = require('grid-styled');
31 | 
32 | var _LiveEditor2 = _interopRequireDefault(_LiveEditor);
33 | 
34 | var _LivePreview2 = _interopRequireDefault(_LivePreview);
35 | 
36 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
37 | 
38 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
39 | 
40 | var pre = exports.pre = function pre(props) {
41 |   return props.children;
42 | };
43 | 
44 | // todo: decouple from Rebass completely
45 | var code = function code(_ref) {
46 |   var children = _ref.children,
47 |       _ref$className = _ref.className,
48 |       className = _ref$className === undefined ? '' : _ref$className,
49 |       scope = _ref.scope,
50 |       props = _objectWithoutProperties(_ref, ['children', 'className', 'scope']);
51 | 
52 |   var lang = className.replace(/^language\-/, '');
53 |   var type = lang.charAt(0);
54 |   var code = _react2.default.Children.toArray(children).join('\n');
55 | 
56 |   switch (type) {
57 |     case '.':
58 |       return _react2.default.createElement(_LiveEditor2.default, { code: code, scope: scope });
59 |     case '!':
60 |       return _react2.default.createElement(_LivePreview2.default, { code: code, scope: scope });
61 |     default:
62 |       return _react2.default.createElement(_gridStyled.Box, {
63 |         is: 'pre',
64 |         p: 3,
65 |         mt: 4,
66 |         mb: 4,
67 |         bg: 'lightgray',
68 |         fontSize: 13,
69 |         css: {
70 |           fontFamily: 'Menlo, monospace'
71 |         },
72 |         children: children
73 |       });
74 |   }
75 | };
76 | 
77 | exports.code = code;
78 | exports.default = {
79 |   pre: pre,
80 |   code: code
81 | };


--------------------------------------------------------------------------------
/cli.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | const fs = require('fs')
  3 | const path = require('path')
  4 | const meow = require('meow')
  5 | const prompts = require('prompts/dist')
  6 | const chalk = require('chalk')
  7 | const initit = require('initit')
  8 | 
  9 | const logo = chalk.cyan('[docs]')
 10 | const log = (...args) => {
 11 |   console.log(logo, ...args)
 12 | }
 13 | log.error = (...args) => {
 14 |   console.log(chalk.red('[ERROR]'), ...args)
 15 | }
 16 | 
 17 | const templates = [
 18 |   { name: 'Compositor x0', path: 'jxnblk/create-docs/templates/x0' },
 19 |   { name: 'Next.js [EXPERIMENTAL]', path: 'jxnblk/create-docs/templates/next' },
 20 | ]
 21 | 
 22 | const cli = meow(`
 23 |   Usage
 24 | 
 25 |     $ npm init docs
 26 | 
 27 |     $ npx create-docs
 28 | 
 29 |   Options
 30 | 
 31 |     --name  Directory name for docs
 32 | 
 33 |     -y      Create docs without confirmation step
 34 | 
 35 | `, {
 36 |   booleanDefault: undefined,
 37 |   flags: {
 38 |     help: {
 39 |       type: 'boolean',
 40 |       alias: 'h'
 41 |     },
 42 |     version: {
 43 |       type: 'boolean',
 44 |       alias: 'v'
 45 |     },
 46 |     name: {
 47 |       type: 'string'
 48 |     },
 49 |     confirm: {
 50 |       type: 'boolean',
 51 |       alias: 'y'
 52 |     }
 53 |   }
 54 | })
 55 | 
 56 | const form = [
 57 |   {
 58 |     type: 'select',
 59 |     name: 'template',
 60 |     message: 'Choose a base template',
 61 |     choices: templates.map(({ name }, i) => ({ title: name, value: i }))
 62 |   },
 63 |   {
 64 |     type: 'text',
 65 |     name: 'name',
 66 |     message: 'Choose a name for the docs folder',
 67 |   },
 68 |   {
 69 |     type: 'confirm',
 70 |     name: 'confirm',
 71 |     message: (prev, values) => `Create docs in ${values.name}?`,
 72 |     initial: true
 73 |   }
 74 | ]
 75 | 
 76 | const run = async opts => {
 77 |   prompts.inject(opts)
 78 |   const response = await prompts(form)
 79 | 
 80 |   if (!response.confirm) {
 81 |     log('aborted')
 82 |     process.exit(0)
 83 |   }
 84 |   const { name } = response
 85 |   const template = templates[response.template]
 86 | 
 87 |   log('creating docs...')
 88 | 
 89 |   if (!name) {
 90 |     log.error('name is required')
 91 |     // todo: prompt again
 92 |     process.exit(1)
 93 |   }
 94 | 
 95 |   if (!template) {
 96 |     // this should never happen
 97 |     log.error('template not found')
 98 |     process.exit(1)
 99 |   }
100 | 
101 |   // todo: ensure directory doesn't exist
102 | 
103 |   initit({ name, template: template.path })
104 |     .then(res => {
105 |       log('created docs')
106 |       process.exit(0)
107 |     })
108 |     .catch(err => {
109 |       log.error('failed to create docs')
110 |       log.error(err)
111 |       process.exit(1)
112 |     })
113 | }
114 | 
115 | run(cli.flags)
116 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/src/LiveEditor.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import {
  4 |   LiveProvider,
  5 |   LivePreview,
  6 |   LiveEditor,
  7 |   LiveError
  8 | } from 'react-live'
  9 | import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
 10 | import { Box } from 'grid-styled'
 11 | import { color, borderColor } from 'styled-system'
 12 | 
 13 | const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
 14 | 
 15 | const Preview = props =>
 16 |   <Box
 17 |     {...props}
 18 |     is={LivePreview}
 19 |     css={{
 20 |       padding: '16px',
 21 |       border: '1px solid',
 22 |       borderColor: 'lightgray',
 23 |       borderRadius: '2px 2px 0 0',
 24 |     }}
 25 |   />
 26 | 
 27 | const Editor = props =>
 28 |   <Box
 29 |     {...props}
 30 |     is={LiveEditor}
 31 |     bg='lightgray'
 32 |     css={{
 33 |       fontFamily: 'Menlo, monospace',
 34 |       fontSize: '13px',
 35 |       margin: 0,
 36 |       padding: '16px',
 37 |       borderRadius: '0 0 2px 2px',
 38 |       borderStyle: 'solid',
 39 |       borderWidth: '1px',
 40 |       borderColor: 'lightgray',
 41 |       '&:focus': {
 42 |         outline: 'none',
 43 |       }
 44 |     }}
 45 |   />
 46 | 
 47 | const Err = props =>
 48 |   <Box
 49 |     {...props}
 50 |     is={LiveError}
 51 |     css={{
 52 |       fontFamily: 'Menlo, monospace',
 53 |       fontSize: '13px',
 54 |       padding: '8px',
 55 |       color: 'white',
 56 |       backgroundColor: 'red'
 57 |     }}
 58 |   />
 59 | 
 60 | export default withMDXComponents(class extends React.Component {
 61 |   static displayName = 'LiveEditor'
 62 | 
 63 |   static propTypes = {
 64 |     code: PropTypes.string.isRequired,
 65 |     scope: PropTypes.object,
 66 |     components: PropTypes.object,
 67 |     render: PropTypes.func,
 68 |     previewProps: PropTypes.object,
 69 |     editorProps: PropTypes.object,
 70 |     errorProps: PropTypes.object,
 71 |   }
 72 | 
 73 |   render () {
 74 |     const {
 75 |       code,
 76 |       scope,
 77 |       components,
 78 |       render,
 79 |       previewProps,
 80 |       editorProps,
 81 |       errorProps,
 82 |     } = this.props
 83 |     return (
 84 |       <Box my={3}>
 85 |         <LiveProvider
 86 |           code={code}
 87 |           scope={{ ...components, ...scope }}
 88 |           mountStylesheet={false}
 89 |           transformCode={transformCode}>
 90 |           {typeof render === 'function' ? (
 91 |             render({
 92 |               code,
 93 |               scope: {
 94 |                 ...components,
 95 |                 ...scope
 96 |               }
 97 |             })
 98 |           ) : (
 99 |             <React.Fragment>
100 |               <Preview {...previewProps} />
101 |               <Editor {...editorProps} />
102 |               <Err {...errorProps} />
103 |             </React.Fragment>
104 |           )}
105 |         </LiveProvider>
106 |       </Box>
107 |     )
108 |   }
109 | })
110 | 


--------------------------------------------------------------------------------
/packages/mdx-editable/dist/LivePreview.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 8 | 
 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 | 
11 | var _class, _temp;
12 | 
13 | var _react = require('react');
14 | 
15 | var _react2 = _interopRequireDefault(_react);
16 | 
17 | var _propTypes = require('prop-types');
18 | 
19 | var _propTypes2 = _interopRequireDefault(_propTypes);
20 | 
21 | var _reactLive = require('react-live');
22 | 
23 | var _mdxProvider = require('@mdx-js/tag/dist/mdx-provider');
24 | 
25 | var _gridStyled = require('grid-styled');
26 | 
27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
28 | 
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30 | 
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
32 | 
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
34 | 
35 | var transformCode = function transformCode(str) {
36 |   return '<React.Fragment>' + str + '</React.Fragment>';
37 | };
38 | 
39 | exports.default = (0, _mdxProvider.withMDXComponents)((_temp = _class = function (_React$Component) {
40 |   _inherits(_class, _React$Component);
41 | 
42 |   function _class() {
43 |     _classCallCheck(this, _class);
44 | 
45 |     return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
46 |   }
47 | 
48 |   _createClass(_class, [{
49 |     key: 'render',
50 |     value: function render() {
51 |       var _props = this.props,
52 |           code = _props.code,
53 |           scope = _props.scope,
54 |           components = _props.components;
55 | 
56 | 
57 |       return _react2.default.createElement(
58 |         _gridStyled.Box,
59 |         { my: 3 },
60 |         _react2.default.createElement(
61 |           _reactLive.LiveProvider,
62 |           {
63 |             code: code,
64 |             scope: _extends({}, components, scope),
65 |             mountStylesheet: false,
66 |             transformCode: transformCode },
67 |           _react2.default.createElement(_reactLive.LivePreview, null),
68 |           _react2.default.createElement(_reactLive.LiveError, null)
69 |         )
70 |       );
71 |     }
72 |   }]);
73 | 
74 |   return _class;
75 | }(_react2.default.Component), _class.displayName = 'LivePreview', _class.propTypes = {
76 |   code: _propTypes2.default.string.isRequired,
77 |   scope: _propTypes2.default.object,
78 |   components: _propTypes2.default.object,
79 |   render: _propTypes2.default.func,
80 |   previewProps: _propTypes2.default.object,
81 |   editorProps: _propTypes2.default.object,
82 |   errorProps: _propTypes2.default.object
83 | }, _temp));


--------------------------------------------------------------------------------
/packages/mdx-editable/dist/LiveEditor.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _class, _temp;
 10 | 
 11 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 12 | 
 13 | var _react = require('react');
 14 | 
 15 | var _react2 = _interopRequireDefault(_react);
 16 | 
 17 | var _propTypes = require('prop-types');
 18 | 
 19 | var _propTypes2 = _interopRequireDefault(_propTypes);
 20 | 
 21 | var _reactLive = require('react-live');
 22 | 
 23 | var _mdxProvider = require('@mdx-js/tag/dist/mdx-provider');
 24 | 
 25 | var _gridStyled = require('grid-styled');
 26 | 
 27 | var _styledSystem = require('styled-system');
 28 | 
 29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 30 | 
 31 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 32 | 
 33 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 34 | 
 35 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 36 | 
 37 | var transformCode = function transformCode(src) {
 38 |   return '<React.Fragment>' + src + '</React.Fragment>';
 39 | };
 40 | 
 41 | var Preview = function Preview(props) {
 42 |   return _react2.default.createElement(_gridStyled.Box, _extends({}, props, {
 43 |     is: _reactLive.LivePreview,
 44 |     css: {
 45 |       padding: '16px',
 46 |       border: '1px solid',
 47 |       borderColor: 'lightgray',
 48 |       borderRadius: '2px 2px 0 0'
 49 |     }
 50 |   }));
 51 | };
 52 | 
 53 | var Editor = function Editor(props) {
 54 |   return _react2.default.createElement(_gridStyled.Box, _extends({}, props, {
 55 |     is: _reactLive.LiveEditor,
 56 |     bg: 'lightgray',
 57 |     css: {
 58 |       fontFamily: 'Menlo, monospace',
 59 |       fontSize: '13px',
 60 |       margin: 0,
 61 |       padding: '16px',
 62 |       borderRadius: '0 0 2px 2px',
 63 |       borderStyle: 'solid',
 64 |       borderWidth: '1px',
 65 |       borderColor: 'lightgray',
 66 |       '&:focus': {
 67 |         outline: 'none'
 68 |       }
 69 |     }
 70 |   }));
 71 | };
 72 | 
 73 | var Err = function Err(props) {
 74 |   return _react2.default.createElement(_gridStyled.Box, _extends({}, props, {
 75 |     is: _reactLive.LiveError,
 76 |     css: {
 77 |       fontFamily: 'Menlo, monospace',
 78 |       fontSize: '13px',
 79 |       padding: '8px',
 80 |       color: 'white',
 81 |       backgroundColor: 'red'
 82 |     }
 83 |   }));
 84 | };
 85 | 
 86 | exports.default = (0, _mdxProvider.withMDXComponents)((_temp = _class = function (_React$Component) {
 87 |   _inherits(_class, _React$Component);
 88 | 
 89 |   function _class() {
 90 |     _classCallCheck(this, _class);
 91 | 
 92 |     return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
 93 |   }
 94 | 
 95 |   _createClass(_class, [{
 96 |     key: 'render',
 97 |     value: function render() {
 98 |       var _props = this.props,
 99 |           code = _props.code,
100 |           scope = _props.scope,
101 |           components = _props.components,
102 |           render = _props.render,
103 |           previewProps = _props.previewProps,
104 |           editorProps = _props.editorProps,
105 |           errorProps = _props.errorProps;
106 | 
107 |       return _react2.default.createElement(
108 |         _gridStyled.Box,
109 |         { my: 3 },
110 |         _react2.default.createElement(
111 |           _reactLive.LiveProvider,
112 |           {
113 |             code: code,
114 |             scope: _extends({}, components, scope),
115 |             mountStylesheet: false,
116 |             transformCode: transformCode },
117 |           typeof render === 'function' ? render({
118 |             code: code,
119 |             scope: _extends({}, components, scope)
120 |           }) : _react2.default.createElement(
121 |             _react2.default.Fragment,
122 |             null,
123 |             _react2.default.createElement(Preview, previewProps),
124 |             _react2.default.createElement(Editor, editorProps),
125 |             _react2.default.createElement(Err, errorProps)
126 |           )
127 |         )
128 |       );
129 |     }
130 |   }]);
131 | 
132 |   return _class;
133 | }(_react2.default.Component), _class.displayName = 'LiveEditor', _class.propTypes = {
134 |   code: _propTypes2.default.string.isRequired,
135 |   scope: _propTypes2.default.object,
136 |   components: _propTypes2.default.object,
137 |   render: _propTypes2.default.func,
138 |   previewProps: _propTypes2.default.object,
139 |   editorProps: _propTypes2.default.object,
140 |   errorProps: _propTypes2.default.object
141 | }, _temp));


--------------------------------------------------------------------------------