Progress

Author: Ives van Hoorne

packages/codesandbox-playground/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "codemirror": "^5.32.0",
+    "codesandbox": "^1.1.14",
     "prop-types": "^15.6.0"
   }
 }

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

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import CodeMirror from 'codemirror';
@@ -52,14 +52,6 @@ export default class CodeEditor extends React.Component {
   };
 
   render() {
-    return (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-        }}
-        ref={this.getCodeMirror}
-      />
-    );
+    return <div style={{ width: '100%' }} ref={this.getCodeMirror} />;
   }
 }

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { getParameters } from 'codesandbox/lib/api/define';
+
+import { filePropTypes } from '../../utils/prop-types';
+
+export default class OpenInCodeSandbox extends React.Component {
+  static propTypes = {
+    ...filePropTypes,
+  };
+
+  static defaultProps = {
+    entry: '/index.js',
+  };
+
+  getFileParameters = () => {
+    const { files, dependencies } = this.props;
+    const paramFiles = { ...files };
+    const packageJSON = {
+      main: this.props.entry,
+      dependencies,
+    };
+
+    paramFiles['/package.json'] = { code: JSON.stringify(packageJSON) };
+
+    const normalized = Object.keys(paramFiles).reduce(
+      (prev, next) => ({
+        ...prev,
+        [next.replace('/', '')]: {
+          ...paramFiles[next],
+          content: paramFiles[next].code,
+        },
+      }),
+      {}
+    );
+
+    return getParameters({ files: normalized });
+  };
+
+  render() {
+    const { files, dependencies, ...props } = this.props;
+    return (
+      <form
+        action="https://codesandbox.io/api/v1/sandboxes/define"
+        method="POST"
+        target="_blank"
+        {...props}
+      >
+        <input
+          type="hidden"
+          name="parameters"
+          value={this.getFileParameters()}
+        />
+        <input type="submit" value="Open in CodeSandbox" />
+      </form>
+    );
+  }
+}

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

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

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

@@ -3,6 +3,7 @@ import { filePropTypes } from '../../utils/prop-types';
 
 import CodeEditor from '../CodeEditor';
 import Preview from '../Preview';
+import OpenInCodeSandbox from '../OpenInCodeSandbox';
 
 export default class Playground extends React.Component {
   static propTypes = {
@@ -31,23 +32,26 @@ export default class Playground extends React.Component {
   };
 
   render() {
-    const code = this.state.files[this.props.entry].code;
+    const entryCode = this.state.files[this.props.entry].code;
+    const updatedProps = {
+      ...this.props,
+      files: this.state.files,
+    };
 
     return (
-      <div>
+      <div style={{ position: 'relative' }}>
         <div
           style={{
-            height: '3rem',
             width: '100%',
             backgroundColor: '#1C2022',
             color: 'white',
           }}
         >
-          CodeSandbox
+          <OpenInCodeSandbox {...updatedProps} />
         </div>
         <div style={{ display: 'flex' }}>
-          <CodeEditor code={code} onChangeCode={this.handleChange} />
-          <Preview {...this.props} files={this.state.files} />
+          <CodeEditor code={entryCode} onChangeCode={this.handleChange} />
+          <Preview {...updatedProps} />
         </div>
       </div>
     );

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

@@ -10,6 +10,7 @@ export default class Preview extends React.PureComponent {
   static defaultProps = {
     dependencies: {},
     resources: [],
+    entry: '/index.js',
   };
 
   setupFrame = el => {
@@ -33,7 +34,7 @@ export default class Preview extends React.PureComponent {
         codesandbox: true,
         version: 2,
         modules,
-        entry: '/index.js',
+        entry: this.props.entry,
         externalResources: this.props.resources,
         dependencies: this.props.dependencies,
       },
@@ -42,7 +43,12 @@ export default class Preview extends React.PureComponent {
   };
 
   componentDidUpdate(prevProps) {
-    if (this.props.files !== prevProps.files) {
+    if (
+      this.props.files !== prevProps.files ||
+      this.props.resources !== prevProps.resources ||
+      this.props.dependencies !== prevProps.dependencies ||
+      this.props.entry !== prevProps.entry
+    ) {
       this.sendCode();
     }
   }

packages/codesandbox-playground/src/index.js

@@ -1,24 +0,0 @@
-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',
-  };
-
-  render() {
-    return (
-      <div>
-        {/* <CodeEditor /> */}
-        <Preview />
-      </div>
-    );
-  }
-}

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

@@ -8,4 +8,5 @@ export const filePropTypes = {
   }).isRequired,
   dependencies: PropTypes.objectOf(PropTypes.string),
   resources: PropTypes.arrayOf(PropTypes.string),
+  entry: PropTypes.string,
 };

packages/codesandbox-playground/stories/OpenInCodeSandbox.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import OpenInCodeSandbox from '../src/components/OpenInCodeSandbox';
+
+const stories = storiesOf('Export To CodeSandbox', module);
+
+stories.add('with multiple files', () => (
+  <OpenInCodeSandbox
+    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={{
+      uuid: 'latest',
+    }}
+  />
+));

packages/codesandbox-playground/stories/Playground.js

@@ -23,11 +23,10 @@ stories.add('with multiple files', () => (
   <Playground
     files={{
       '/index.js': {
-        code: `
-            import Hello from './Hello.js';
+        code: `import Hello from './Hello.js';
 
-            document.body.innerHTML = JSON.stringify(Hello);
-          `,
+document.body.innerHTML = JSON.stringify(Hello);
+`,
       },
       '/Hello.js': {
         code: `export default "Hello from another file!"`,