Merge pull request #142 from FormidableLabs/add-theme-plain-to-compon…

…ents Handle optional `theme.plain` object, add storybook example #139
FormidableLabs · May 14, 2019 · d79447f · d79447f
2 parents 2fe4222 + d04de57
commit d79447f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
@@ -55,9 +55,19 @@ class CodeEditor extends Component {
   );
 
   render() {
-    const { style, code: _code, onChange, language, ...rest } = this.props;
+    const {
+      style,
+      code: _code,
+      onChange,
+      language,
+      theme,
+      ...rest
+    } = this.props;
     const { code } = this.state;
 
+    const baseTheme =
+      theme && typeof theme.plain === 'object' ? theme.plain : {};
+
     return (
       <Editor
         value={code}
@@ -67,6 +77,7 @@ class CodeEditor extends Component {
         style={{
           whiteSpace: 'pre',
           fontFamily: 'monospace',
+          ...baseTheme,
           ...style
         }}
         {...rest}

diff --git a/stories/Live.js b/stories/Live.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean } from '@storybook/addon-knobs/react';
+import { theme } from '../src/constants/theme';
 
 import {
   LiveProvider,
@@ -76,7 +77,7 @@ const StyledLivePreview = styled(LivePreview)`
 `;
 
 const StyledEditor = styled(LiveEditor)`
-  background: #322e3c;
+  background: #46424f;
 `;
 
 const StyledTextarea = styled.textarea`
@@ -165,6 +166,19 @@ storiesOf('Live', module)
       <LivePreview />
     </LiveProvider>
   ))
+  .add('component with theme', () => (
+    <LiveProvider
+      code={componentExample}
+      disabled={boolean('Disable editing', false)}
+      language="jsx"
+      noInline={boolean('No inline evaluation', false)}
+      theme={theme}
+    >
+      <StyledEditor />
+      <LiveError />
+      <LivePreview />
+    </LiveProvider>
+  ))
   .add('withLive example', () => (
     <LiveProvider code={hooksExample}>
       <LiveComponent />