From 4f948f7a02afcb8f9b8250e60a34bbcc8cda6a55 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Thu, 9 Aug 2018 18:14:34 -0300 Subject: [PATCH] feat: allow edit code inside playground (#205) * feat(docz): fetch data on documents * feat(rehype-docz): add dependencies scope on Playground * feat(docz-theme-default): add codemirror as editor * chore(rehype-docz): use replace instead of split join --- packages/docz-theme-default/librc.js | 7 +- packages/docz-theme-default/package.json | 4 +- .../src/components/ui/Pre.tsx | 164 ++++--- .../src/components/ui/Render/LiveConsumer.tsx | 5 + .../src/components/ui/Render/index.tsx | 143 ++++-- packages/docz-theme-default/src/index.tsx | 5 +- .../src/styles/codemirror/dark.ts | 131 ++++++ .../src/styles/{prism => codemirror}/index.ts | 2 +- .../src/styles/codemirror/light.ts | 104 +++++ .../docz-theme-default/src/styles/colors.ts | 1 + .../docz-theme-default/src/styles/index.ts | 1 - .../src/styles/prism/dark.ts | 411 ------------------ .../src/styles/prism/light.ts | 155 ------- packages/docz-theme-default/src/types.d.ts | 7 +- .../docz/src/components/AsyncComponent.tsx | 56 +++ packages/docz/src/components/AsyncRoute.tsx | 67 +++ packages/docz/src/components/DocPreview.tsx | 40 +- packages/docz/src/components/Playground.tsx | 3 + packages/docz/src/state.ts | 5 +- packages/rehype-docz/package.json | 10 +- packages/rehype-docz/src/code-from-node.ts | 6 +- .../rehype-docz/src/imports-from-entry.ts | 33 ++ packages/rehype-docz/src/index.ts | 25 +- packages/rehype-docz/src/types.d.ts | 4 +- yarn.lock | 368 ++++++++++++---- 25 files changed, 961 insertions(+), 796 deletions(-) create mode 100644 packages/docz-theme-default/src/components/ui/Render/LiveConsumer.tsx create mode 100644 packages/docz-theme-default/src/styles/codemirror/dark.ts rename packages/docz-theme-default/src/styles/{prism => codemirror}/index.ts (100%) create mode 100644 packages/docz-theme-default/src/styles/codemirror/light.ts delete mode 100644 packages/docz-theme-default/src/styles/prism/dark.ts delete mode 100644 packages/docz-theme-default/src/styles/prism/light.ts create mode 100644 packages/docz/src/components/AsyncComponent.tsx create mode 100644 packages/docz/src/components/AsyncRoute.tsx create mode 100644 packages/rehype-docz/src/imports-from-entry.ts diff --git a/packages/docz-theme-default/librc.js b/packages/docz-theme-default/librc.js index cd508775a..9bc6a1475 100644 --- a/packages/docz-theme-default/librc.js +++ b/packages/docz-theme-default/librc.js @@ -11,14 +11,11 @@ const internal = [ ] const depsExternal = [ - 're-resizable', + '@mdx-js/tag', 'react-dom/server', 'polished/lib/color/rgba', 'polished/lib/color/lighten', 'polished/lib/color/darken', - 'react-syntax-highlighter', - 'react-syntax-highlighter/prism', - 'react-syntax-highlighter/prism-light', 'react-feather/dist/icons/edit-2', 'react-feather/dist/icons/chevron-down', 'react-feather/dist/icons/search', @@ -36,7 +33,7 @@ const external = Object.keys(pkg.dependencies) .filter(dep => internal.indexOf(dep) === -1) module.exports = { + external, sourcemap: false, plugins: [svg()], - external, } diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index de02c8fb6..88d6ff2e4 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -21,6 +21,7 @@ "tslint": "tslint --project ." }, "dependencies": { + "codemirror": "^5.39.2", "copy-text-to-clipboard": "^1.0.4", "docz": "^0.9.6", "emotion": "^9.2.6", @@ -36,12 +37,13 @@ "react": "^16.4.2", "react-adopt": "^0.6.0", "react-breakpoints": "^3.0.0", + "react-codemirror": "^1.0.0", "react-dom": "^16.4.2", "react-emotion": "^9.2.6", "react-feather": "^1.1.1", "react-lightweight-tooltip": "^1.0.0", + "react-live": "^1.11.0", "react-powerplug": "^1.0.0-rc.1", - "react-syntax-highlighter": "^8.0.1", "webfontloader": "^1.6.28" }, "peerDependencies": { diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx index 80c12423c..e602fa2a5 100644 --- a/packages/docz-theme-default/src/components/ui/Pre.tsx +++ b/packages/docz-theme-default/src/components/ui/Pre.tsx @@ -1,65 +1,92 @@ import * as React from 'react' -import { SFC, Component, Fragment } from 'react' +import { SFC, Component } from 'react' import { ThemeConfig } from 'docz' -import styled, { cx } from 'react-emotion' +import styled, { injectGlobal } from 'react-emotion' import rgba from 'polished/lib/color/rgba' -import lighten from 'polished/lib/color/lighten' -import darken from 'polished/lib/color/darken' import BaseCheck from 'react-feather/dist/icons/check' -import SyntaxHighlighter from 'react-syntax-highlighter/prism-light' import Clipboard from 'react-feather/dist/icons/clipboard' +import Codemirror from 'react-codemirror' import copy from 'copy-text-to-clipboard' import get from 'lodash.get' import { ButtonSwap } from './ButtonSwap' import { ButtonLink } from './Button' +import * as themes from '../../styles/codemirror' -const TOP_PADDING = '15px' +// tslint:disable +declare var require: any +require('codemirror/mode/markdown/markdown') +require('codemirror/mode/javascript/javascript') +require('codemirror/mode/jsx/jsx') +require('codemirror/mode/css/css') +require('codemirror/addon/edit/matchbrackets') -const PrismTheme = styled('pre')` - ${p => p.theme.docz.prismTheme}; - ${p => p.theme.docz.mq(p.theme.docz.styles.pre)}; - overflow-y: hidden; - padding: ${TOP_PADDING} 20px; - margin: 0; - flex: 1; -` - -const getChildren = (children: any) => - children && typeof children !== 'string' ? children.props.children : children +injectGlobal(` + @import url('https://unpkg.com/codemirror@5.39.2/lib/codemirror.css'); +`) const getLanguage = (children: any) => { - const defaultLanguage = 'language-jsx' + const defaultLanguage = 'jsx' if (typeof children === 'string') return defaultLanguage - return get(children, 'props.props.className') || defaultLanguage + const language = get(children, 'props.props.className') || defaultLanguage + return language.replace('language-', '') } -const getCode = (content: any): SFC => ({ children }) => { - const className = cx('react-prism', getLanguage(content)) - return {children} -} +const getChildren = (children: any) => + children && typeof children !== 'string' ? children.props.children : children const Wrapper = styled('div')` - display: flex; + margin: 30px 0; position: relative; - border: 1px solid ${p => p.theme.docz.colors.border}; - border-radius: 5px; - background: ${p => darken(0.01, p.theme.docz.colors.preBg)}; +` + +const Editor = styled(Codemirror)` + ${themes.dark()}; + ${themes.light()}; ${p => p.theme.docz.mq(p.theme.docz.styles.pre)}; + position: relative; + border-radius: 5px; + border: 1px solid ${p => p.theme.docz.colors.border}; + overflow-y: auto; + flex: 1; + + .CodeMirror { + max-width: 100%; + height: auto; + } + + .CodeMirror pre { + ${p => p.theme.docz.mq(p.theme.docz.styles.pre)}; + } + + .CodeMirror-gutters { + left: 1px !important; + } + + .CodeMirror-lines { + padding: 10px 0; + } - .react-syntax-highlighter-line-number { - display: block; + .CodeMirror-line { padding: 0 10px; - opacity: 0.3; - text-align: right; + } + + .CodeMirror-linenumber { + padding: 0 7px 0 5px; + opacity: 0.7; } ` const Actions = styled('div')` + z-index: 999; + position: absolute; + top: 0; + right: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; + background: transparent; ` export const ActionButton = styled(ButtonSwap)` @@ -98,49 +125,58 @@ export const ClipboardAction: SFC = ({ ) -const Nullable: SFC = ({ children }) => {children} - -const linesStyle = ({ mode, colors }: any) => ({ - padding: `${TOP_PADDING} 3px`, - borderRight: `1px solid ${colors.border}`, - background: - mode === 'light' - ? lighten(0.13, colors.border) - : darken(0.04, colors.border), - left: 0, -}) - interface PreProps { children: any className?: string + editorClassName?: string actions?: React.ReactNode + readOnly?: boolean + mode?: string + matchBrackets?: boolean + indentUnit?: number + onChange?: (code: string) => any } export class Pre extends Component { + public static defaultProps = { + readOnly: true, + mode: 'jsx', + matchBrackets: true, + indentUnit: 2, + } + public render(): JSX.Element { - const { children, className, actions } = this.props - const content = getChildren(children) + const { children, actions, onChange, ...props } = this.props + const code = getChildren(this.props.children) + const language = getLanguage(children) + const mode = language || this.props.mode + + const options = { + ...props, + mode, + gutter: true, + lineNumbers: true, + tabSize: 2, + theme: 'docz-light', + } return ( - - {config => ( - - - {getChildren(content)} - - - {actions || } - - - )} - + + + {config => ( + + )} + + {actions || } + ) } } diff --git a/packages/docz-theme-default/src/components/ui/Render/LiveConsumer.tsx b/packages/docz-theme-default/src/components/ui/Render/LiveConsumer.tsx new file mode 100644 index 000000000..81f498f29 --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Render/LiveConsumer.tsx @@ -0,0 +1,5 @@ +import { withLive } from 'react-live' + +export const LiveConsumer = withLive(({ live, children }) => + children(live) +) diff --git a/packages/docz-theme-default/src/components/ui/Render/index.tsx b/packages/docz-theme-default/src/components/ui/Render/index.tsx index 092311d52..3835465e3 100644 --- a/packages/docz-theme-default/src/components/ui/Render/index.tsx +++ b/packages/docz-theme-default/src/components/ui/Render/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react' -import { Component, Fragment } from 'react' +import { SFC, Fragment, Component } from 'react' import { renderToStaticMarkup } from 'react-dom/server' import { RenderComponentProps } from 'docz' +import { LiveProvider, LiveError, LivePreview } from 'react-live' import styled, { css } from 'react-emotion' import lighten from 'polished/lib/color/lighten' import darken from 'polished/lib/color/darken' @@ -14,8 +15,9 @@ import getIn from 'lodash.get' import pretty from 'pretty' import { ResizeBar } from './ResizeBar' +import { LiveConsumer } from './LiveConsumer' import { Handle, HANDLE_SIZE } from './Handle' -import { Pre as PreBase, ActionButton, ClipboardAction } from '../Pre' +import { ActionButton, ClipboardAction, Pre as PreBase } from '../Pre' import { localStorage } from '../../../utils/local-storage' interface OverlayProps { @@ -46,19 +48,43 @@ const Wrapper = styled('div')` width: ${minusHandleSize}; ` -const Playground = styled('div')` - overflow-y: hidden; +const PlaygroundWrapper = styled('div')` + position: relative; flex: 1; - background: ${p => p.theme.docz.colors.background}; - border: 1px solid ${p => p.theme.docz.colors.border}; + overflow-y: hidden; border-radius: 4px 4px 0 0; + border: 1px solid ${p => p.theme.docz.colors.border}; + background: ${p => p.theme.docz.colors.background}; ${p => p.theme.docz.mq(p.theme.docz.styles.playground)}; ` +const StyledPreview = styled(LivePreview)` + width: 100%; +` + +const DummyPlayground = styled('div')` + width: 100%; +` + +const StyledError = styled(LiveError)` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 20px; + background: ${rgba('black', 0.8)}; + font-size: 16px; + color: white; +` + const Pre = styled(PreBase)` margin: 0; - border-radius: 0 0 4px 4px; +` + +const editorClassName = css` border-top: 0; + border-radius: 0 0 0 5px; ` const Actions = styled('div')` @@ -121,11 +147,28 @@ const parse = (position: number, key: string, defaultValue: any) => { return obj ? getIn(obj, key) : defaultValue } +interface JSXProps { + code: string + onChange: (code: string) => any +} + +const Jsx: SFC = ({ onChange, code }) => ( + 
}
+  >
+    {code}
+
+) + export interface RenderState { fullscreen: boolean width: string height: string showing: 'jsx' | 'html' + code: string } export class Render extends Component { @@ -134,6 +177,7 @@ export class Render extends Component { width: parse(this.props.position, 'width', '100%'), height: parse(this.props.position, 'height', '100%'), showing: parse(this.props.position, 'showing', 'jsx'), + code: this.props.code, } public componentDidMount(): void { @@ -146,18 +190,6 @@ export class Render extends Component { hotkeys.unbind('esc') } - get showingContent(): string { - const { code, component } = this.props - const { showing } = this.state - - const content = { - jsx: () => code, - html: () => pretty(renderToStaticMarkup(component)), - } - - return content[showing]() - } - get actions(): JSX.Element { const { showing, fullscreen } = this.state @@ -174,7 +206,7 @@ export class Render extends Component { HTML - + { ) } + get html(): string { + return pretty(renderToStaticMarkup(this.props.component)) + } + get resizableProps(): Record { const { fullscreen, width, height } = this.state @@ -224,22 +260,49 @@ export class Render extends Component { } public render(): JSX.Element { - const { className, style, component } = this.props - const { fullscreen } = this.state + const { className, style, scope } = this.props + const { fullscreen, showing } = this.state return ( - - {fullscreen && } - - - - {component} - - {this.actions} - 
}>{this.showingContent}
- - - + + + {fullscreen && } + + + + {(live: any) => ( + + {live.error && ( + + {this.props.component} + + )} + + + + )} + + {this.actions} + {showing === 'jsx' ? ( + this.setState({ code })} + code={this.state.code} + /> + ) : ( + 
}>
+                  {this.html}
+
+ )} + + + + ) } @@ -287,4 +350,16 @@ export class Render extends Component { const fullscreen = parse(this.props.position, 'fullscreen', false) this.setState({ width, height }, () => this.setSize(fullscreen)) } + + private transformCode(code: string): string { + return ` + const App = ({ children }) => ( + + {children && typeof children === 'function' ? children() : children} + + ) + + render(${code}) + ` + } } diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index c30040ddf..04dcc88fc 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -10,7 +10,6 @@ import { config } from './config' import { mq, breakpoints } from './styles/responsive' import * as components from './components/ui' import * as modes from './styles/modes' -import * as prismThemes from './styles/prism' const Theme = () => ( @@ -50,13 +49,13 @@ webfont.load({ }, }) -const transform = ({ mode, ...config }: any) => { +const transform = ({ mode, codemirrorTheme, ...config }: any) => { const selectedMode: any = (modes as any)[mode] return { ...config, mode, - prismTheme: (prismThemes as any)[mode], + codemirrorTheme: codemirrorTheme || `docz-${mode}`, colors: { ...selectedMode, ...config.colors, diff --git a/packages/docz-theme-default/src/styles/codemirror/dark.ts b/packages/docz-theme-default/src/styles/codemirror/dark.ts new file mode 100644 index 000000000..3109ec4bc --- /dev/null +++ b/packages/docz-theme-default/src/styles/codemirror/dark.ts @@ -0,0 +1,131 @@ +import { css } from 'react-emotion' + +export const theme = () => css` + .CodeMirror.cm-s-docz-dark { + color: #d8dee9; + background-color: #2e3440; + } + .cm-s-docz-dark .CodeMirror-selected { + background-color: rgba(67, 76, 94, 0.8); + } + .cm-s-docz-dark .CodeMirror-gutter, + .cm-s-docz-dark .CodeMirror-gutters { + border: none; + background-color: #2e3440; + } + .cm-s-docz-dark .CodeMirror-linenumber, + .cm-s-docz-dark .CodeMirror-linenumbers { + color: rgba(216, 222, 233, 0.4) !important; + background-color: transparent; + } + .cm-s-docz-dark .CodeMirror-lines { + color: #d8dee9 !important; + background-color: transparent; + } + .cm-s-docz-dark .CodeMirror-cursor { + border-left: 2px solid #d8dee9 !important; + } + /* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ + .cm-s-docz-dark .CodeMirror-matchingbracket, + .cm-s-docz-dark .CodeMirror-matchingtag { + border-bottom: 2px solid #81a1c1; + color: #d8dee9 !important; + background-color: transparent; + } + .cm-s-docz-dark .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #bf616a; + color: #d8dee9 !important; + background-color: transparent; + } + /* addon: fold/foldgutter.js */ + .cm-s-docz-dark .CodeMirror-foldmarker, + .cm-s-docz-dark .CodeMirror-foldgutter, + .cm-s-docz-dark .CodeMirror-foldgutter-open, + .cm-s-docz-dark .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #d8dee9 !important; + background-color: transparent; + } + /* addon: selection/active-line.js */ + .cm-s-docz-dark .CodeMirror-activeline-background { + background-color: rgba(67, 76, 94, 0.32); + } + /* basic syntax */ + .cm-s-docz-dark .cm-attribute { + color: #8fbcbb; + } + .cm-s-docz-dark .cm-keyword { + color: #81a1c1; + } + .cm-s-docz-dark .cm-def { + color: #d8dee9; + } + .cm-s-docz-dark .cm-atom { + color: #81a1c1; + } + .cm-s-docz-dark .cm-number { + color: #b48ead; + } + .cm-s-docz-dark .cm-property { + color: #d8dee9; + } + .cm-s-docz-dark .cm-qualifier { + color: #88c0d0; + } + .cm-s-docz-dark .cm-variable, + .cm-s-docz-dark .cm-variable-2 { + color: #88c0d0; + } + .cm-s-docz-dark .cm-variable-3 { + color: #d8dee9; + } + .cm-s-docz-dark .cm-string, + .cm-s-docz-dark .cm-string-2 { + color: #a3be8c; + } + .cm-s-docz-dark .cm-operator { + color: #81a1c1; + } + .cm-s-docz-dark .cm-meta { + color: #81a1c1; + } + .cm-s-docz-dark .cm-comment { + color: #4c566a; + } + .cm-s-docz-dark .cm-error { + color: #bf616a; + } + /* markdown */ + .cm-s-docz-dark .cm-header { + color: #88c0d0; + } + .cm-s-docz-dark .cm-quote { + color: #4c566a; + } + .cm-s-docz-dark .cm-link { + color: #88c0d0; + text-decoration: none; + } + .cm-s-docz-dark .cm-url { + color: #d8dee9; + text-decoration: underline; + } + .cm-s-docz-dark .cm-strong { + font-weight: bold; + } + .cm-s-docz-dark .cm-em { + font-style: italic; + } + /* diff */ + .cm-s-docz-dark .cm-negative { + color: #bf616a; + } + .cm-s-docz-dark .cm-positive { + color: #a3be8c; + } + /* html */ + .cm-s-docz-dark .cm-tag { + color: #81a1c1; + } +` diff --git a/packages/docz-theme-default/src/styles/prism/index.ts b/packages/docz-theme-default/src/styles/codemirror/index.ts similarity index 100% rename from packages/docz-theme-default/src/styles/prism/index.ts rename to packages/docz-theme-default/src/styles/codemirror/index.ts index 0145fff2b..4d4431842 100644 --- a/packages/docz-theme-default/src/styles/prism/index.ts +++ b/packages/docz-theme-default/src/styles/codemirror/index.ts @@ -1,2 +1,2 @@ -export { theme as dark } from './dark' export { theme as light } from './light' +export { theme as dark } from './dark' diff --git a/packages/docz-theme-default/src/styles/codemirror/light.ts b/packages/docz-theme-default/src/styles/codemirror/light.ts new file mode 100644 index 000000000..a4cd2eac9 --- /dev/null +++ b/packages/docz-theme-default/src/styles/codemirror/light.ts @@ -0,0 +1,104 @@ +import { css } from 'react-emotion' + +export const theme = () => css` + .cm-s-docz-light.CodeMirror { + background: #fbfcfd; + color: #24292e; + } + + .cm-s-docz-light .CodeMirror-gutters { + background: #fbfcfd; + border-right-width: 0; + } + + .cm-s-docz-light .CodeMirror-guttermarker { + color: white; + } + + .cm-s-docz-light .CodeMirror-guttermarker-subtle { + color: #d0d0d0; + } + + .cm-s-docz-light .CodeMirror-linenumber { + color: #959da5; + } + + .cm-s-docz-light .CodeMirror-cursor { + border-left: 1px solid #24292e; + } + + .cm-s-docz-light div.CodeMirror-selected, + .cm-s-docz-light .CodeMirror-line::selection, + .cm-s-docz-light .CodeMirror-line > span::selection, + .cm-s-docz-light .CodeMirror-line > span > span::selection, + .cm-s-docz-light .CodeMirror-line::-moz-selection, + .cm-s-docz-light .CodeMirror-line > span::-moz-selection, + .cm-s-docz-light .CodeMirror-line > span > span::-moz-selection { + background: #c8c8fa; + } + + .cm-s-docz-light .CodeMirror-activeline-background { + background: #fafbfc; + } + + .cm-s-docz-light .CodeMirror-matchingbracket { + text-decoration: underline; + color: #949495 !important; + } + + .cm-s-docz-light .CodeMirror-lines { + background: #fbfcfd; + } + + .cm-s-docz-light .cm-comment { + color: #6a737d; + } + + .cm-s-docz-light .cm-tag, + .cm-s-docz-light .cm-bracket { + color: #d73a49; + } + + .cm-s-docz-light .cm-constant { + color: #005cc5; + } + + .cm-s-docz-light .cm-entity { + font-weight: normal; + font-style: normal; + text-decoration: none; + color: #6f42c1; + } + + .cm-s-docz-light .cm-keyword { + font-weight: normal; + font-style: normal; + text-decoration: none; + color: #d73a49; + } + + .cm-s-docz-light .cm-storage { + color: #d73a49; + } + + .cm-s-docz-light .cm-string { + font-weight: normal; + font-style: normal; + text-decoration: none; + color: #005cc5; + } + + .cm-s-docz-light .cm-support { + font-weight: normal; + font-style: normal; + text-decoration: none; + color: #005cc5; + } + + .cm-s-docz-light .cm-variable { + font-weight: normal; + font-style: normal; + text-decoration: none; + color: #e36209; + } +` diff --git a/packages/docz-theme-default/src/styles/colors.ts b/packages/docz-theme-default/src/styles/colors.ts index 908d2f8ab..63024f569 100644 --- a/packages/docz-theme-default/src/styles/colors.ts +++ b/packages/docz-theme-default/src/styles/colors.ts @@ -8,3 +8,4 @@ export const dark = '#13161F' export const blue = '#0B5FFF' export const skyBlue = '#1FB6FF' +export const negative = '#EB4D4B' diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index 70ad2dda7..59a1fa655 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -53,7 +53,6 @@ export const styles = { fontSize: 14, }, pre: { - margin: '30px 0', fontFamily: '"Source Code Pro", monospace', fontSize: 14, lineHeight: 1.8, diff --git a/packages/docz-theme-default/src/styles/prism/dark.ts b/packages/docz-theme-default/src/styles/prism/dark.ts deleted file mode 100644 index 248fc7274..000000000 --- a/packages/docz-theme-default/src/styles/prism/dark.ts +++ /dev/null @@ -1,411 +0,0 @@ -export const theme = ` -/* PrismJS 1.14.0 -http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+csharp+arduino+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+erb+matlab+mel+mizar+monkey+n4js+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+plsql+soy+stylus+swift+tcl+textile+twig+tsx+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+yaml&plugins=line-numbers+toolbar+show-language */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - -/* -* Dracula Theme for Prism.JS -* -* @author Gustavo Costa -* e-mail: gusbemacbe@gmail.com -* -* @contributor Jon Leopard -* e-mail: jonlprd@gmail.com -* -* @license MIT 2016-2018 -*/ - -pre::-webkit-scrollbar { - width: 14px; -} - -pre::-webkit-scrollbar-track { - background-color: #6272a4; - border-radius: 0px; -} - -pre::-webkit-scrollbar-thumb { - background-color: #bd93f9; - border-radius: 0px; -} - -code[class*="language-"], -pre[class*="language-"] { - color: #ccc; - background: rgb(40, 41, 54); - text-shadow: none; - font-family: PT Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono", - monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { - text-shadow: none; - background-color: #5a5f80; -} - -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection, -code[class*="language-"]::selection, -code[class*="language-"] ::selection { - text-shadow: none; - background-color: #5a5f80; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - background: rgba(40, 41, 54, 1) !important; - border-radius: 0.5em; - padding: 1em; - margin: 0.5em 0; - overflow: auto; - height: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: rgba(40, 41, 54, 1); -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: 4px 7px; - border-radius: 0.3em; - white-space: normal; -} - -.limit-300 -{ - height: 300px !important; -} - -.limit-400 -{ - height: 400px !important; -} - -.limit-500 -{ - height: 500px !important; -} - -.limit-600 -{ - height: 600px !important; -} - -.limit-700 -{ - height: 700px !important; -} - -.limit-800 -{ - height: 800px !important; -} - -.token.comment { - color: rgba(98, 114, 164, 1); -} - -.token.prolog { - color: rgba(207, 207, 194, 1); -} - -.token.tag { - color: rgba(220, 104, 170, 1); -} - -.token.entity { - color: rgba(139, 233, 253, 1); -} - -.token.atrule { - color: rgba(98, 239, 117, 1); -} - -.token.url { - color: rgba(102, 217, 239, 1); -} - -.token.selector { - color: rgba(207, 207, 194, 1); -} - -.token.string { - color: rgba(241, 250, 140, 1); -} - -.token.property { - color: rgba(255, 184, 108, 1); -} - -.token.important { - color: rgba(255, 121, 198, 1); - font-weight: bold; -} - -.token.punctuation { - color: rgba(230, 219, 116, 1); -} - -.token.number { - color: rgba(189, 147, 249, 1); -} - -.token.function { - color: rgba(80, 250, 123, 1); -} - -.token.class-name { - color: rgba(255, 184, 108, 1); -} - -.token.keyword { - color: rgba(255, 121, 198, 1); -} - -.token.boolean { - color: rgba(255, 184, 108, 1); -} - -.token.operator { - color: rgba(139, 233, 253, 1); -} - -.token.char { - color: rgba(255, 135, 157, 1); -} - -.token.regex { - color: rgba(80, 250, 123, 1); -} - -.token.variable { - color: rgba(80, 250, 123, 1); -} - -.token.constant { - color: rgba(255, 184, 108, 1); -} - -.token.symbol { - color: rgba(255, 184, 108, 1); -} - -.token.builtin { - color: rgba(255, 121, 198, 1); -} - -.token.attr-value { - color: #7ec699; -} - -.token.deleted { - color: #e2777a; -} - -.token.namespace { - color: #e2777a; -} - -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token { - color: #ff79c6; -} - -.langague-cpp .token.string { - color: #8be9fd; -} - -.langague-c .token.string { - color: #8be9fd; -} - -.language-css .token.selector { - color: rgba(80, 250, 123, 1); -} - -.language-css .token.property { - color: rgba(255, 184, 108, 1); -} - -.language-java span.token.class-name { - color: #8be9fd; -} - -.language-java .token.class-name { - color: #8be9fd; -} - -.language-markup .token.attr-value { - color: rgba(102, 217, 239, 1); -} - -.language-markup .token.tag { - color: rgba(80, 250, 123, 1); -} - -.language-objectivec .token.property { - color: #66d9ef; -} - -.language-objectivec .token.string { - color: #50fa7b; -} - -.language-php .token.boolean { - color: #8be9fd; -} - -.language-php .token.function { - color: #ff79c6; -} - -.language-php .token.keyword { - color: #66d9ef; -} - -.language-ruby .token.symbol { - color: #8be9fd; -} - -.language-ruby .token.class-name { - color: #cfcfc2; -} - -pre.line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} - -pre.line-numbers > code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.line-numbers-rows > span { - pointer-events: none; - display: block; - counter-increment: linenumber; -} - -.line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; -} - -div.code-toolbar { - position: relative; -} - -div.code-toolbar > .toolbar { - position: absolute; - top: 0.3em; - right: 0.2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; -} - -div.code-toolbar:hover > .toolbar { - opacity: 1; -} - -div.code-toolbar > .toolbar .toolbar-item { - display: inline-block; - padding-right: 20px; -} - -div.code-toolbar > .toolbar a { - cursor: pointer; -} - -div.code-toolbar > .toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-user-select: none; -} - -div.code-toolbar > .toolbar a, -div.code-toolbar > .toolbar button, -div.code-toolbar > .toolbar span { - color: #ccc; - font-size: 0.8em; - padding: 0.5em; - background: rgba(98, 114, 164, 1); - border-radius: 0.5em; -} - -div.code-toolbar > .toolbar a:hover, -div.code-toolbar > .toolbar a:focus, -div.code-toolbar > .toolbar button:hover, -div.code-toolbar > .toolbar button:focus, -div.code-toolbar > .toolbar span:hover, -div.code-toolbar > .toolbar span:focus { - color: inherit; - text-decoration: none; - background-color: var(--verde); -} -` diff --git a/packages/docz-theme-default/src/styles/prism/light.ts b/packages/docz-theme-default/src/styles/prism/light.ts deleted file mode 100644 index 514259d34..000000000 --- a/packages/docz-theme-default/src/styles/prism/light.ts +++ /dev/null @@ -1,155 +0,0 @@ -export const theme = ` - code[class*="language-"], - pre[class*="language-"] { - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - background: #f5f7ff; - border-radius: 5px; - color: #5e6687; - } - - pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, - code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #dfe2f1; - } - - pre[class*="language-"]::selection, pre[class*="language-"] ::selection, - code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #dfe2f1; - } - - /* Code blocks */ - pre[class*="language-"] { - overflow: auto; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: #898ea4; - } - - .token.punctuation { - color: #5e6687; - } - - .token.namespace { - opacity: .7; - } - - .token.operator, - .token.boolean, - .token.number { - color: #c76b29; - } - - .token.property { - color: #c08b30; - } - - .token.tag { - color: #3d8fd1; - } - - .token.string { - color: #22a2c9; - } - - .token.selector { - color: #6679cc; - } - - .token.attr-name { - color: #c76b29; - } - - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { - color: #22a2c9; - } - - .token.attr-value, - .token.keyword, - .token.control, - .token.directive, - .token.unit { - color: #ac9739; - } - - .token.statement, - .token.regex, - .token.atrule { - color: #22a2c9; - } - - .token.placeholder, - .token.variable { - color: #3d8fd1; - } - - .token.deleted { - text-decoration: line-through; - } - - .token.inserted { - border-bottom: 1px dotted #202746; - text-decoration: none; - } - - .token.italic { - font-style: italic; - } - - .token.important, - .token.bold { - font-weight: bold; - } - - .token.important { - color: #c94922; - } - - .token.entity { - cursor: help; - } - - pre > code.highlight { - outline: 0.4em solid #c94922; - outline-offset: .4rem; - } - - /* overrides color-values for the Line Numbers plugin - * http://prismjs.com/plugins/line-numbers/ - */ - .line-numbers .line-numbers-rows { - border-right-color: #dfe2f1; - } - - .line-numbers-rows > span:before { - color: #979db4; - } - - /* overrides color-values for the Line Highlight plugin - * http://prismjs.com/plugins/line-highlight/ - */ - .line-highlight { - background: rgba(107, 115, 148, 0.2); - background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); - background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); - } -` diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts index 7b537ccc6..77423e824 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -1,5 +1,11 @@ declare module 'copy-text-to-clipboard' declare module 'hotkeys-js' +declare module 'codemirror/mode/markdown/markdown' +declare module 'codemirror/mode/javascript/javascript' +declare module 'codemirror/mode/jsx/jsx' +declare module 'codemirror/mode/css/css' +declare module 'codemirror/addon/edit/matchbrackets' +declare module 'react-codemirror' declare module 'react-breakpoints' declare module 'react-feather/dist/icons/edit-2' declare module 'react-feather/dist/icons/chevron-down' @@ -13,7 +19,6 @@ declare module 'react-feather/dist/icons/maximize' declare module 'react-feather/dist/icons/minimize' declare module 'react-lightweight-tooltip' declare module 'react-powerplug' -declare module 'react-syntax-highlighter/prism-light' declare module 're-resizable' declare module 'match-sorter' declare module 'polished/lib/color/rgba' diff --git a/packages/docz/src/components/AsyncComponent.tsx b/packages/docz/src/components/AsyncComponent.tsx new file mode 100644 index 000000000..e4999b759 --- /dev/null +++ b/packages/docz/src/components/AsyncComponent.tsx @@ -0,0 +1,56 @@ +import * as React from 'react' +import { ReactNode, ComponentType, Component } from 'react' + +import { isFn } from './Docs' + +interface Props { + as: ComponentType + getInitialData?: (props: any) => any +} + +interface State { + loading: boolean + data: any + error: any +} + +export class AsyncComponent extends Component { + public state = { + loading: false, + error: null, + data: {}, + } + + public componentDidMount(): void { + this.fetch() + } + + public render(): ReactNode { + const { as: Comp = 'div', getInitialData, ...props } = this.props + const { data, loading, error } = this.state + + return + } + + private async fetch(): Promise { + const { getInitialData } = this.props + + if (getInitialData && isFn(getInitialData)) { + this.setState({ loading: true }) + try { + const data = await getInitialData(this.props) + this.setState({ + data, + error: null, + loading: false, + }) + } catch (error) { + this.setState({ + error, + data: {}, + loading: false, + }) + } + } + } +} diff --git a/packages/docz/src/components/AsyncRoute.tsx b/packages/docz/src/components/AsyncRoute.tsx new file mode 100644 index 000000000..8e6461cf3 --- /dev/null +++ b/packages/docz/src/components/AsyncRoute.tsx @@ -0,0 +1,67 @@ +import * as React from 'react' +import { SFC } from 'react' +import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider' +import importedComponent from 'react-imported-component' + +import { ImportMap, EntryMap } from '../state' +import { ComponentsMap } from './DocPreview' +import { AsyncComponent } from './AsyncComponent' + +interface AsyncRouteProps { + components: ComponentsMap + path: string + imports: ImportMap + entries: EntryMap +} + +export const AsyncRoute: SFC = ({ + components, + path, + imports, + entries, + ...routeProps +}) => { + const Page: any = components.page + const LoadingComponent: any = components.loading + const entry = entries && entries[path] + const props = { ...routeProps, doc: entry } + + const loadImport = async () => { + const { default: Component, getInitialData } = await imports[path]() + + const ExportedComponent: any = (props: any) => + ExportedComponent.getInitialData = getInitialData + return ExportedComponent + } + + const Component = withMDXComponents( + importedComponent(loadImport, { + LoadingComponent, + render(Component: any, state, defaultProps: any): React.ReactNode { + const { history, match, location, doc } = defaultProps + const { LoadingComponent: Loading } = defaultProps + const props = { history, match, location, doc } + + if (state === 'done') { + return ( + + ) + } + + return + }, + }) + ) + + return Page ? ( + + + + ) : ( + + ) +} diff --git a/packages/docz/src/components/DocPreview.tsx b/packages/docz/src/components/DocPreview.tsx index cd51a8f68..56539998b 100644 --- a/packages/docz/src/components/DocPreview.tsx +++ b/packages/docz/src/components/DocPreview.tsx @@ -1,12 +1,11 @@ import * as React from 'react' import { Fragment, SFC, ComponentType as CT } from 'react' import { Switch, Route, RouteComponentProps } from 'react-router-dom' -import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider' import { MDXProvider } from '@mdx-js/tag' -import importedComponent from 'react-imported-component' import { state, State, Entry, EntryMap } from '../state' import { themeContext } from '../theme' +import { AsyncRoute } from './AsyncRoute' export type PageProps = RouteComponentProps & { doc: Entry @@ -20,6 +19,7 @@ export interface RenderComponentProps { component: JSX.Element position: number code: string + scope: Record } export type RenderComponent = CT @@ -82,7 +82,6 @@ export const DocPreview: SFC = ({ ...themeComponents, } - const Page: any = components.page const NotFound: any = components.notFound const LoadingComponent: any = components.loading @@ -96,28 +95,23 @@ export const DocPreview: SFC = ({ {(entries: EntryMap) => ( {Object.keys(imports).map(path => { - const entry = entries && entries[path] - const AsyncComponent = withMDXComponents( - importedComponent(imports[path], { LoadingComponent }) - ) + const entry = entries[path] return ( - entry && ( - - Page ? ( - - - - ) : ( - - ) - } - /> - ) + ( + + )} + /> ) })} {NotFound && } diff --git a/packages/docz/src/components/Playground.tsx b/packages/docz/src/components/Playground.tsx index 3f6ed5f26..4718c3dff 100644 --- a/packages/docz/src/components/Playground.tsx +++ b/packages/docz/src/components/Playground.tsx @@ -11,6 +11,7 @@ export interface PlaygroundProps { style?: any wrapper?: ComponentType children: any + __scope: Record __position: number __code: string } @@ -21,6 +22,7 @@ const BasePlayground: SFC = ({ style, wrapper: Wrapper = Identity, children, + __scope, __position, __code, }) => { @@ -32,6 +34,7 @@ const BasePlayground: SFC = ({ style={style} components={components} component={{isFn(children) ? children() : children}} + scope={__scope} position={__position} code={__code} /> diff --git a/packages/docz/src/state.ts b/packages/docz/src/state.ts index 536a2e949..1f7e26040 100644 --- a/packages/docz/src/state.ts +++ b/packages/docz/src/state.ts @@ -9,6 +9,7 @@ export type MSXComponent = CT<{ export interface MSXImport { default: MSXComponent + getInitialData?: (props: any) => any } export interface Heading { @@ -41,8 +42,10 @@ export interface Config { version: string | null } +type Import = () => Promise + export type EntryMap = Record -export type ImportMap = Record Promise> +export type ImportMap = Record export type TransformFn = (config: Config) => Config export interface State { diff --git a/packages/rehype-docz/package.json b/packages/rehype-docz/package.json index 337b45f7c..34b77ed98 100644 --- a/packages/rehype-docz/package.json +++ b/packages/rehype-docz/package.json @@ -22,12 +22,18 @@ "tslint": "tslint --project ." }, "dependencies": { - "babel-traverse": "^6.26.0", - "babylon": "^6.18.0", + "@babel/parser": "^7.0.0-beta.56", + "@babel/traverse": "^7.0.0-beta.56", "hast-util-to-string": "^1.0.1", + "lodash.flatten": "^4.4.0", + "lodash.get": "^4.4.2", "prettier": "^1.14.0", "signale": "^1.2.1", "strip-indent": "^2.0.0", "unist-util-is": "^2.1.2" + }, + "devDependencies": { + "@types/lodash.flatten": "^4.4.4", + "@types/lodash.get": "^4.4.4" } } diff --git a/packages/rehype-docz/src/code-from-node.ts b/packages/rehype-docz/src/code-from-node.ts index f081021ef..faafbd829 100644 --- a/packages/rehype-docz/src/code-from-node.ts +++ b/packages/rehype-docz/src/code-from-node.ts @@ -1,11 +1,11 @@ -import * as babylon from 'babylon' -import traverse from 'babel-traverse' +import * as parser from '@babel/parser' +import traverse from '@babel/traverse' type Condition = (path: any) => boolean export const codeFromNode = (condition: Condition) => (code: string) => { let value = '' - const ast = babylon.parse(code, { plugins: ['jsx'] }) + const ast = parser.parse(code, { plugins: ['jsx'] }) traverse(ast, { enter(path: any): void { diff --git a/packages/rehype-docz/src/imports-from-entry.ts b/packages/rehype-docz/src/imports-from-entry.ts new file mode 100644 index 000000000..85935fcf0 --- /dev/null +++ b/packages/rehype-docz/src/imports-from-entry.ts @@ -0,0 +1,33 @@ +import * as parser from '@babel/parser' +import traverse from '@babel/traverse' +import get from 'lodash.get' + +const fromSpecifiers = (specifiers: any = []) => + Array.isArray(specifiers) && specifiers.length > 0 + ? specifiers.map(specifier => get(specifier, 'local.name')) + : [] + +export const importsFromEntry = (node: any) => { + try { + const ast = parser.parse(node.value, { sourceType: 'module' }) + const imports: any[] = [] + + traverse(ast, { + enter(path: any): void { + if (path.isImportDeclaration()) { + const sourceValue = get(path, 'node.source.value') + + if (sourceValue !== 'docz') { + imports.push(...fromSpecifiers(path.node.specifiers)) + } + + return + } + }, + }) + + return imports + } catch (err) { + return [] + } +} diff --git a/packages/rehype-docz/src/index.ts b/packages/rehype-docz/src/index.ts index e22b5929d..a60e487ed 100644 --- a/packages/rehype-docz/src/index.ts +++ b/packages/rehype-docz/src/index.ts @@ -1,8 +1,10 @@ import is from 'unist-util-is' import nodeToString from 'hast-util-to-string' import strip from 'strip-indent' +import flatten from 'lodash.flatten' import { codeFromNode } from './code-from-node' +import { importsFromEntry } from './imports-from-entry' import { format } from './format' const componentName = (value: any) => { @@ -25,29 +27,38 @@ const removePlayground = (code: string) => { return code.replace(open(code), '').replace(close(code), '') } -const addCodeProp = async (node: any, idx: number) => { +const addCodeProp = (imports: string[]) => async (node: any, idx: number) => { const name = componentName(node.value) const tagOpen = new RegExp(`^\\<${name}`) if (isPlayground(name)) { const formatted = await format(nodeToString(node)) const code = formatted.slice(1, Infinity) + const scope = `{${imports.join(',')}}` const child = strip(removePlayground(code)) .trim() - .split(`'`) - .join(`\\'`) - .split('`') - .join('\\`') + .replace(/'/g, `\\'`) + .replace(/`/g, '\\`') node.value = node.value.replace( tagOpen, - `<${name} __position={${idx}} __code={\`${child}\`}` + `<${name} __position={${idx}} __code={\`${child}\`} __scope={${scope}}` ) } } +const getScope = (node: any, idx: number) => { + return importsFromEntry(node) +} + export default () => (tree: any) => { + const imports: string[] = flatten( + tree.children.filter((node: any) => is('import', node)).map(getScope) + ) + const nodes = [ - tree.children.filter((node: any) => is('jsx', node)).map(addCodeProp), + tree.children + .filter((node: any) => is('jsx', node)) + .map(addCodeProp(imports)), ] return Promise.all(nodes).then(() => tree) diff --git a/packages/rehype-docz/src/types.d.ts b/packages/rehype-docz/src/types.d.ts index b7b10e6b4..6210498c6 100644 --- a/packages/rehype-docz/src/types.d.ts +++ b/packages/rehype-docz/src/types.d.ts @@ -2,5 +2,5 @@ declare module 'unist-util-is' declare module 'hast-util-to-string' declare module 'strip-indent' declare module 'signale' -declare module 'babylon' -declare module 'babel-traverse' +declare module '@babel/parser' +declare module '@babel/traverse' diff --git a/yarn.lock b/yarn.lock index f33963f61..9aafefee5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,6 +20,12 @@ dependencies: "@babel/highlight" "7.0.0-beta.55" +"@babel/code-frame@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.56.tgz#09f76300673ac085d3b90e02aafa0ffc2c96846a" + dependencies: + "@babel/highlight" "7.0.0-beta.56" + "@babel/core@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.42.tgz#b3a838fddbd19663369a0b4892189fd8d3f82001" @@ -109,6 +115,16 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.56.tgz#07d9c2f45990c453130e080eddcd252a9cbd8d66" + dependencies: + "@babel/types" "7.0.0-beta.56" + jsesc "^2.5.1" + lodash "^4.17.10" + source-map "^0.5.0" + trim-right "^1.0.1" + "@babel/helper-annotate-as-pure@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.42.tgz#f2b0a3be684018b55fc308eb5408326f78479085" @@ -219,6 +235,14 @@ "@babel/template" "7.0.0-beta.55" "@babel/types" "7.0.0-beta.55" +"@babel/helper-function-name@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.56.tgz#4e9c8a84ce4368b4a779409d0c4fe3f714be60ab" + dependencies: + "@babel/helper-get-function-arity" "7.0.0-beta.56" + "@babel/template" "7.0.0-beta.56" + "@babel/types" "7.0.0-beta.56" + "@babel/helper-get-function-arity@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.42.tgz#ad072e32f912c033053fc80478169aeadc22191e" @@ -237,6 +261,12 @@ dependencies: "@babel/types" "7.0.0-beta.55" +"@babel/helper-get-function-arity@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.56.tgz#872864d67e25705b94d1c71afc72344aafc8dc9c" + dependencies: + "@babel/types" "7.0.0-beta.56" + "@babel/helper-hoist-variables@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0-beta.42.tgz#6e51d75192923d96972a24c223b81126a7fabca1" @@ -409,6 +439,12 @@ dependencies: "@babel/types" "7.0.0-beta.55" +"@babel/helper-split-export-declaration@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.56.tgz#82d53382836134ba3ed0ea2394ca21fe579ec241" + dependencies: + "@babel/types" "7.0.0-beta.56" + "@babel/helper-wrap-function@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.0.0-beta.42.tgz#5ffc6576902aa2a10fe6666e063bd45029c36db3" @@ -475,6 +511,14 @@ esutils "^2.0.2" js-tokens "^3.0.0" +"@babel/highlight@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.56.tgz#f8b0fc8c5c2de53bb2c12f9001ad3d99e573696d" + dependencies: + chalk "^2.0.0" + esutils "^2.0.2" + js-tokens "^3.0.0" + "@babel/parser@7.0.0-beta.49": version "7.0.0-beta.49" resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.49.tgz#944d0c5ba2812bb159edbd226743afd265179bdc" @@ -483,6 +527,10 @@ version "7.0.0-beta.55" resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.55.tgz#0a527efc148c6c8cd85d5ffddacad817a2daeeb2" +"@babel/parser@7.0.0-beta.56", "@babel/parser@^7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.56.tgz#8638aa02e0130cd10b2ba4128e2b804112073ed3" + "@babel/plugin-proposal-async-generator-functions@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.0.0-beta.42.tgz#81465d19b6f5559092d9be4d11d6351131d08696" @@ -1285,6 +1333,15 @@ "@babel/types" "7.0.0-beta.55" lodash "^4.17.10" +"@babel/template@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.56.tgz#a428197e0c9db142f8581cbfdcfa9289b0dd7fd7" + dependencies: + "@babel/code-frame" "7.0.0-beta.56" + "@babel/parser" "7.0.0-beta.56" + "@babel/types" "7.0.0-beta.56" + lodash "^4.17.10" + "@babel/traverse@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.42.tgz#f4bf4d1e33d41baf45205e2d0463591d57326285" @@ -1329,6 +1386,20 @@ globals "^11.1.0" lodash "^4.17.10" +"@babel/traverse@^7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.56.tgz#62fdfe69328cfaad414ef01844f5ab40e32f4ad0" + dependencies: + "@babel/code-frame" "7.0.0-beta.56" + "@babel/generator" "7.0.0-beta.56" + "@babel/helper-function-name" "7.0.0-beta.56" + "@babel/helper-split-export-declaration" "7.0.0-beta.56" + "@babel/parser" "7.0.0-beta.56" + "@babel/types" "7.0.0-beta.56" + debug "^3.1.0" + globals "^11.1.0" + lodash "^4.17.10" + "@babel/types@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc" @@ -1369,6 +1440,14 @@ lodash "^4.17.10" to-fast-properties "^2.0.0" +"@babel/types@7.0.0-beta.56": + version "7.0.0-beta.56" + resolved "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.56.tgz#df456947a82510ec30361971e566110d89489056" + dependencies: + esutils "^2.0.2" + lodash "^4.17.10" + to-fast-properties "^2.0.0" + "@commitlint/cli@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/@commitlint/cli/-/cli-7.0.0.tgz#3bf86d8ab2fbd5074c3114b7ba3f4b41b775f3dc" @@ -1819,6 +1898,12 @@ "@types/koa-compose" "*" "@types/node" "*" +"@types/lodash.flatten@^4.4.4": + version "4.4.4" + resolved "https://registry.npmjs.org/@types/lodash.flatten/-/lodash.flatten-4.4.4.tgz#7f28009ef57c8d2b1d8463c3e53fdccf780120a5" + dependencies: + "@types/lodash" "*" + "@types/lodash.get@^4.4.4": version "4.4.4" resolved "https://registry.npmjs.org/@types/lodash.get/-/lodash.get-4.4.4.tgz#34b67841594e4ddc8853341d65e971a38cb4e2f0" @@ -2167,6 +2252,12 @@ acorn-jsx@^3.0.0: dependencies: acorn "^3.0.4" +acorn-jsx@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e" + dependencies: + acorn "^5.0.3" + acorn@^3.0.4: version "3.3.0" resolved "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" @@ -2175,7 +2266,7 @@ acorn@^5.0.0, acorn@^5.0.3, acorn@^5.5.0: version "5.5.3" resolved "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9" -acorn@^5.5.3: +acorn@^5.4.1, acorn@^5.5.3: version "5.7.1" resolved "https://registry.npmjs.org/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8" @@ -3491,6 +3582,19 @@ btoa-lite@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337" +buble@^0.19.3: + version "0.19.3" + resolved "https://registry.npmjs.org/buble/-/buble-0.19.3.tgz#01e9412062cff1da6f20342b6ecd72e7bf699d02" + dependencies: + acorn "^5.4.1" + acorn-dynamic-import "^3.0.0" + acorn-jsx "^4.1.1" + chalk "^2.3.1" + magic-string "^0.22.4" + minimist "^1.2.0" + os-homedir "^1.0.1" + vlq "^1.0.0" + buffer-from@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531" @@ -3515,6 +3619,13 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" +buffer@^5.0.3: + version "5.2.0" + resolved "https://registry.npmjs.org/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e" + dependencies: + base64-js "^1.0.2" + ieee754 "^1.1.4" + buffers@~0.1.1: version "0.1.1" resolved "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb" @@ -3797,6 +3908,10 @@ chownr@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181" +chroma-js@^1.3.6: + version "1.3.7" + resolved "https://registry.npmjs.org/chroma-js/-/chroma-js-1.3.7.tgz#38db1b46c99b002b77aa5e6b6744589388f28425" + chrome-trace-event@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48" @@ -3831,7 +3946,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.6: +classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" @@ -3841,6 +3956,14 @@ clean-css@4.1.x: dependencies: source-map "0.5.x" +clean-tag@^1.0.4: + version "1.1.0" + resolved "https://registry.npmjs.org/clean-tag/-/clean-tag-1.1.0.tgz#83d0d3650d84805f7edeeda15a23d773069bf242" + dependencies: + html-tags "^2.0.0" + react ">=16.0.0" + styled-system ">=2.0.0 || >=3.0.0" + cli-boxes@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143" @@ -3872,9 +3995,9 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" -clipboard@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a" +clipboard@^1.5.5: + version "1.7.1" + resolved "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b" dependencies: good-listener "^1.2.2" select "^1.1.2" @@ -3949,6 +4072,10 @@ code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" +codemirror@^5.18.2, codemirror@^5.39.2: + version "5.39.2" + resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.39.2.tgz#778aa13b55ebf280745c309cb1b148e3fc06f698" + collapse-white-space@^1.0.0, collapse-white-space@^1.0.2: version "1.0.4" resolved "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz#ce05cf49e54c3277ae573036a26851ba430a0091" @@ -4015,12 +4142,6 @@ 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" @@ -4073,6 +4194,14 @@ component-emitter@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6" +component-props@1.1.1: + version "1.1.1" + resolved "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944" + +component-xor@0.0.4: + version "0.0.4" + resolved "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa" + concat-map@0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -4477,6 +4606,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-class@^15.5.1: + version "15.6.3" + resolved "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036" + dependencies: + fbjs "^0.8.9" + loose-envify "^1.3.1" + object-assign "^4.1.1" + create-react-context@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.1.tgz#425a3d96f4b7690c2fbf20aed5aeae2e2007a959" @@ -4560,6 +4697,10 @@ crypto-random-string@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -4622,6 +4763,14 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-to-react-native@^2.0.3: + version "2.2.1" + resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e" + dependencies: + css-color-keywords "^1.0.0" + fbjs "^0.8.5" + postcss-value-parser "^3.3.0" + css-tree@1.0.0-alpha.29: version "1.0.0-alpha.29" resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39" @@ -5035,6 +5184,13 @@ dom-converter@~0.1: dependencies: utila "~0.3" +dom-iterator@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad" + dependencies: + component-props "1.1.1" + component-xor "0.0.4" + dom-serializer@0: version "0.1.0" resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" @@ -5720,7 +5876,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.2: +fault@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz#c3d0fec202f172a3a4d414042ad2bb5e2a3ffbaa" dependencies: @@ -5732,7 +5888,7 @@ faye-websocket@~0.11.0: dependencies: websocket-driver ">=0.5.1" -fbjs@^0.8.0: +fbjs@^0.8.0, fbjs@^0.8.5, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -6466,6 +6622,13 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, version "4.1.11" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" +grid-styled@^4.2.0: + version "4.3.3" + resolved "https://registry.npmjs.org/grid-styled/-/grid-styled-4.3.3.tgz#d3356e2ed5b5bb8433c0cd32e729e2a0d2ddcd03" + dependencies: + clean-tag "^1.0.4" + system-components "^2.2.3" + gud@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" @@ -6567,6 +6730,10 @@ has-ansi@^2.0.0: dependencies: ansi-regex "^2.0.0" +has-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa" + has-flag@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -6656,24 +6823,10 @@ 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" @@ -6691,10 +6844,6 @@ 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" @@ -6780,6 +6929,10 @@ html-minifier@^3.2.3, html-minifier@^3.4.3: relateurl "0.2.x" uglify-js "3.3.x" +html-tags@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" + html-webpack-plugin@^3.2.0: version "3.2.0" resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b" @@ -8187,6 +8340,10 @@ lodash.deburr@^4.1.0: version "4.1.0" resolved "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz#ddb1bbb3ef07458c0177ba07de14422cb033ff9b" +lodash.flatten@^4.4.0: + version "4.4.0" + resolved "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" + lodash.foreach@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53" @@ -8195,6 +8352,10 @@ lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + lodash.iteratee@^4.5.0: version "4.7.0" resolved "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c" @@ -8355,13 +8516,6 @@ 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@^3.2.0: version "3.2.0" resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee" @@ -10112,17 +10266,11 @@ printj@~1.1.0: version "1.1.2" resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222" -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" +prismjs@1.6: + version "1.6.0" + resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365" optionalDependencies: - clipboard "^2.0.0" + clipboard "^1.5.5" private@^0.1.6, private@^0.1.8, private@~0.1.5: version "0.1.8" @@ -10158,7 +10306,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.6.2, prop-types@^15.6.2: +prop-types@15.6.2, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" dependencies: @@ -10173,10 +10321,6 @@ 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" - proto-list@~1.2.1: version "1.2.4" resolved "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -10337,6 +10481,17 @@ react-breakpoints@^3.0.0: hoist-non-react-statics "2.5.0" lodash.debounce "4.0.8" +react-codemirror@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba" + dependencies: + classnames "^2.2.5" + codemirror "^5.18.2" + create-react-class "^15.5.1" + lodash.debounce "^4.0.8" + lodash.isequal "^4.5.0" + prop-types "^15.5.4" + react-copy-write@^0.7.0: version "0.7.0" resolved "https://registry.npmjs.org/react-copy-write/-/react-copy-write-0.7.0.tgz#7ce2b61b656aed08ac920a0607d6902a6080f525" @@ -10441,6 +10596,10 @@ react-imported-component@^4.6.2: prop-types "15.6.2" scan-directory "^1.0.0" +react-is@^16.3.1: + version "16.4.2" + resolved "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88" + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -10449,6 +10608,17 @@ react-lightweight-tooltip@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/react-lightweight-tooltip/-/react-lightweight-tooltip-1.0.0.tgz#1fb96831b88de21a4d73d02148aae3d8d0aea9bc" +react-live@^1.11.0: + version "1.11.0" + resolved "https://registry.npmjs.org/react-live/-/react-live-1.11.0.tgz#257b54abb64df250bc40b0572c21acd600ecdd5c" + dependencies: + buble "^0.19.3" + core-js "^2.4.1" + dom-iterator "^1.0.0" + prismjs "1.6" + prop-types "^15.5.8" + unescape "^0.2.0" + react-powerplug@^1.0.0-rc.1: version "1.0.0-rc.1" resolved "https://registry.npmjs.org/react-powerplug/-/react-powerplug-1.0.0-rc.1.tgz#6b3bc57e31684e8bc36baa7a65af602ba0e31145" @@ -10484,28 +10654,18 @@ 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.3.2: - version "16.4.1" - resolved "https://registry.npmjs.org/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" +react@>=16.0.0, react@^16.4.2: + version "16.4.2" + resolved "https://registry.npmjs.org/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.0" -react@^16.4.2: - version "16.4.2" - resolved "https://registry.npmjs.org/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" +react@^16.3.2: + version "16.4.1" + resolved "https://registry.npmjs.org/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" @@ -10632,6 +10792,16 @@ readdirp@^2.0.0: readable-stream "^2.0.2" set-immediate-shim "^1.0.1" +rebass@^2.0.0-10: + version "2.0.0-10" + resolved "https://registry.npmjs.org/rebass/-/rebass-2.0.0-10.tgz#0e3072d4ac08ebeef948691b08aa75d0b74bcdfe" + dependencies: + chroma-js "^1.3.6" + grid-styled "^4.2.0" + prop-types "^15.6.0" + styled-system "^2.3.1" + system-components "^2.2.1" + recast@^0.12.6: version "0.12.9" resolved "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz#e8e52bdb9691af462ccbd7c15d5a5113647a15f1" @@ -10675,13 +10845,6 @@ 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" @@ -11670,12 +11833,6 @@ 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" @@ -11959,6 +12116,32 @@ style-loader@^0.21.0: loader-utils "^1.1.0" schema-utils "^0.4.5" +styled-components@^3.4.2: + version "3.4.2" + resolved "https://registry.npmjs.org/styled-components/-/styled-components-3.4.2.tgz#8f518419932327e47fe9144824e3184b3e2da95d" + dependencies: + buffer "^5.0.3" + css-to-react-native "^2.0.3" + fbjs "^0.8.16" + hoist-non-react-statics "^2.5.0" + prop-types "^15.5.4" + react-is "^16.3.1" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^3.2.3" + +"styled-system@>=2.0.0 || >=3.0.0": + version "3.0.2" + resolved "https://registry.npmjs.org/styled-system/-/styled-system-3.0.2.tgz#2189a6d829117d212fb6ac8ebc4260fdb75d1109" + dependencies: + prop-types "^15.6.2" + +styled-system@^2.3.1: + version "2.3.6" + resolved "https://registry.npmjs.org/styled-system/-/styled-system-2.3.6.tgz#a38c1ffa04a5c35adec46473984e463c48b16f7c" + dependencies: + prop-types "^15.6.0" + stylehacks@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a" @@ -11998,6 +12181,12 @@ supports-color@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" +supports-color@^3.2.3: + version "3.2.3" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" + dependencies: + has-flag "^1.0.0" + supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.4.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54" @@ -12031,6 +12220,13 @@ symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" +system-components@^2.2.1, system-components@^2.2.3: + version "2.2.3" + resolved "https://registry.npmjs.org/system-components/-/system-components-2.2.3.tgz#3248f7c80affa4b9b61003ecd719a73da4462e59" + dependencies: + clean-tag "^1.0.4" + styled-system "^2.3.1" + table@4.0.2: version "4.0.2" resolved "https://registry.npmjs.org/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36" @@ -12508,6 +12704,10 @@ ulid@^2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz#93063522771a9774121a84d126ecd3eb9804071f" +unescape@^0.2.0: + version "0.2.0" + resolved "https://registry.npmjs.org/unescape/-/unescape-0.2.0.tgz#b78b9b60c86f1629df181bf53eee3bc8d6367ddf" + unherit@^1.0.4: version "1.1.0" resolved "https://registry.npmjs.org/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d" @@ -12951,6 +13151,10 @@ vlq@^0.2.2: version "0.2.3" resolved "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26" +vlq@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/vlq/-/vlq-1.0.0.tgz#8101be90843422954c2b13eb27f2f3122bdcc806" + vm-browserify@0.0.4: version "0.0.4" resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"