Progress

Author: Ives van Hoorne

packages/codesandbox-playground/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+const req = require.context('../stories', true);
+
 function loadStories() {
-  require('../stories');
+  req.keys().forEach(filename => req(filename));
 }
 
 configure(loadStories, module);

packages/codesandbox-playground/src/components/CodeEditor/CodeEditor.js

@@ -1,5 +1,7 @@
 // @flow
 import * as React from 'react';
+import PropTypes from 'prop-types';
+
 import CodeMirror from 'codemirror';
 
 import 'codemirror/lib/codemirror.css';
@@ -14,11 +16,21 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 
+import './styles.css';
+
 export default class CodeEditor extends React.Component {
+  static propTypes = {
+    code: PropTypes.string.isRequired,
+    onChangeCode: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onChangeCode: () => {},
+  };
+
   getCodeMirror = el => {
-    console.log('oke');
     this.codemirror = new CodeMirror(el, {
-      value: 'console.log("mama")',
+      value: this.props.code,
       theme: 'oceanic',
       keyMap: 'sublime',
       indentUnit: 2,
@@ -29,16 +41,22 @@ export default class CodeEditor extends React.Component {
       lineNumbers: true,
       lineWrapping: false,
       styleActiveLine: true,
-      lint: false,
+      mode: 'javascript',
     });
+
+    this.codemirror.on('change', this.handleChange);
+  };
+
+  handleChange = cm => {
+    this.props.onChangeCode(cm.getValue());
   };
 
   render() {
-    console.log('hey?');
     return (
       <div
         style={{
           height: '100%',
+          width: '100%',
         }}
         ref={this.getCodeMirror}
       />

packages/codesandbox-playground/src/components/CodeEditor/index.js

@@ -1,14 +1 @@
-import React from 'react';
-
-import CodeEditor from './CodeEditor';
-
-type Props = {
-  id: string,
-
-  changeCode: (id: string, code: string) => Object,
-  saveCode: ?() => void,
-};
-
-export default (props: Props) => {
-  return <CodeEditor {...props} />;
-};
+export default from './CodeEditor';

packages/codesandbox-playground/src/components/CodeEditor/styles.css

@@ -0,0 +1,102 @@
+.CodeMirror {
+  font-family: Source Code Pro, Menlo, monospace;
+  line-height: 1.4;
+  background: #1c2022;
+  color: #e0e0e0;
+  height: 100%;
+  font-weight: 500;
+}
+div.CodeMirror-selected {
+  background: #374140;
+}
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #65737e;
+}
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #65737e;
+}
+.CodeMirror-gutters {
+  background: #1c2022;
+  border-right: 0px;
+}
+.CodeMirror-guttermarker {
+  color: #ac4142;
+}
+.CodeMirror-guttermarker-subtle {
+  color: #505050;
+}
+.CodeMirror-linenumber {
+  color: #505050;
+}
+.CodeMirror-cursor {
+  border-left: 1px solid #b0b0b0;
+}
+
+span.cm-comment {
+  color: #626466;
+}
+span.cm-atom {
+  color: #aa759f;
+}
+span.cm-number {
+  color: #aa759f;
+}
+
+span.cm-property,
+span.cm-attribute {
+  color: #aa759f;
+}
+span.cm-keyword {
+  color: #6caedd;
+}
+span.cm-string {
+  color: #99c794;
+}
+
+span.cm-variable {
+  color: #ffd399;
+}
+span.cm-variable-2 {
+  color: #6caedd;
+}
+span.cm-def {
+  color: #fac863;
+}
+span.cm-bracket {
+  color: #e0e0e0;
+}
+span.cm-tag {
+  color: #ec5f67;
+}
+span.cm-link {
+  color: #aa759f;
+}
+span.cm-error {
+  background: #ac4142;
+  color: #b0b0b0;
+}
+
+.CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.2);
+}
+.CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
+span.CodeMirror-matchingtag {
+  background-color: inherit;
+}
+span.cm-tag.CodeMirror-matchingtag {
+  text-decoration: underline;
+}
+span.cm-tag.cm-bracket.CodeMirror-matchingtag {
+  text-decoration: none;
+}
+
+div.cm-line-highlight.CodeMirror-linebackground {
+  background-color: rgba(0, 0, 0, 0.3);
+}

packages/codesandbox-playground/src/components/Playground/Playground.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { filePropTypes } from '../../utils/prop-types';
+
+import CodeEditor from '../CodeEditor';
+import Preview from '../Preview';
+
+export default class Playground extends React.Component {
+  static propTypes = {
+    ...filePropTypes,
+  };
+  static defaultProps = {
+    entry: '/index.js',
+  };
+
+  state = {
+    files: this.props.files,
+  };
+
+  handleChange = (code: string) => {
+    const newFiles = {
+      ...this.state.files,
+      [this.props.entry]: {
+        ...[this.state.files[this.props.entry]],
+        code,
+      },
+    };
+
+    this.setState({
+      files: newFiles,
+    });
+  };
+
+  render() {
+    const code = this.state.files[this.props.entry].code;
+
+    return (
+      <div>
+        <div
+          style={{
+            height: '3rem',
+            width: '100%',
+            backgroundColor: '#1C2022',
+            color: 'white',
+          }}
+        >
+          CodeSandbox
+        </div>
+        <div style={{ display: 'flex' }}>
+          <CodeEditor code={code} onChangeCode={this.handleChange} />
+          <Preview {...this.props} files={this.state.files} />
+        </div>
+      </div>
+    );
+  }
+}

packages/codesandbox-playground/src/components/Playground/index.js

@@ -0,0 +1 @@
+export default from './Playground';

packages/codesandbox-playground/src/components/Preview/Preview.js

@@ -1,15 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
+import { filePropTypes } from '../../utils/prop-types';
 
 export default class Preview extends React.PureComponent {
   static propTypes = {
-    files: PropTypes.shape({
-      path: PropTypes.shape({
-        code: PropTypes.string.isRequired,
-      }),
-    }).isRequired,
-    dependencies: PropTypes.objectOf(PropTypes.string),
-    resources: PropTypes.arrayOf(PropTypes.string),
+    ...filePropTypes,
   };
 
   static defaultProps = {
@@ -18,7 +13,6 @@ export default class Preview extends React.PureComponent {
   };
 
   setupFrame = el => {
-    // listen(this.handleMessage);
     if (el) {
       this.frame = el;
       this.frame.onload = () => {
@@ -47,11 +41,11 @@ export default class Preview extends React.PureComponent {
     );
   };
 
-  handleMessage = (data, source) => {
-    // if (data.type === 'initialized') {
-    //   this.frame = source;
-    // }
-  };
+  componentDidUpdate(prevProps) {
+    if (this.props.files !== prevProps.files) {
+      this.sendCode();
+    }
+  }
 
   render() {
     return (

packages/codesandbox-playground/src/index.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { filePropTypes } from './utils/prop-types';
 
 import CodeEditor from './components/CodeEditor';
 import Preview from './components/Preview';
 
 export default class Playground extends React.Component {
+  static propTypes = {
+    ...filePropTypes,
+  };
   static defaultProps = {
     entry: 'index.js',
   };

packages/codesandbox-playground/src/utils/prop-types.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+export const filePropTypes = {
+  files: PropTypes.shape({
+    path: PropTypes.shape({
+      code: PropTypes.string.isRequired,
+    }),
+  }).isRequired,
+  dependencies: PropTypes.objectOf(PropTypes.string),
+  resources: PropTypes.arrayOf(PropTypes.string),
+};

packages/codesandbox-playground/stories/Playground.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Playground from '../src/components/Playground';
+
+const stories = storiesOf('Playground', module);
+
+stories.add('with one file', () => (
+  <Playground
+    files={{
+      '/index.js': {
+        code: `document.body.innerHTML = \`<div>$\{require('uuid')()}</div>\``,
+      },
+    }}
+    dependencies={{
+      uuid: 'latest',
+    }}
+  />
+));
+
+stories.add('with multiple files', () => (
+  <Playground
+    files={{
+      '/index.js': {
+        code: `
+            import Hello from './Hello.js';
+
+            document.body.innerHTML = JSON.stringify(Hello);
+          `,
+      },
+      '/Hello.js': {
+        code: `export default "Hello from another file!"`,
+      },
+    }}
+    dependencies={{}}
+  />
+));
+
+stories.add('with errors', () => (
+  <Playground
+    files={{
+      '/index.js': {
+        code: `
+throw new Error("I'm an error!");
+          `,
+      },
+    }}
+    dependencies={{}}
+  />
+));