[docs] Add codesandbox edit button (mui#32)

oliviertassinari · Dec 2, 2017 · 022d90b · 022d90b
1 parent 9dca15a
commit 022d90b
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 22 deletions.
diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
@@ -36,8 +36,8 @@ const styles = theme => ({
   },
   navLinkButton: {
     color: theme.palette.text.secondary,
-    marginLeft: theme.spacing.unit * 3,
     fontSize: theme.typography.pxToRem(13),
+    paddingLeft: theme.spacing.unit * 5,
   },
   activeButton: {
     color: theme.palette.text.primary,

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -1,13 +1,13 @@
-// @flow
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import LZString from 'lz-string';
 import { withStyles } from '@material-next/core/styles';
 import IconButton from '@material-next/core/IconButton';
 import Collapse from '@material-next/core/transitions/Collapse';
+import ModeEditIcon from '@material-next/icons/ModeEdit';
 import CodeIcon from '@material-next/icons/Code';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Tooltip from '@material-next/core/Tooltip';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
 const styles = theme => ({
   root: {
@@ -16,64 +16,150 @@ const styles = theme => ({
     marginBottom: 40,
     marginLeft: -theme.spacing.unit * 2,
     marginRight: -theme.spacing.unit * 2,
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: 0,
+      marginRight: 0,
+    },
+  },
+  demo: {
+    ...theme.mixins.gutters({
+      display: 'flex',
+      justifyContent: 'center',
+      paddingTop: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing.unit * 2,
+    }),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing.unit * 3,
+      paddingRight: theme.spacing.unit * 3,
+      paddingTop: theme.spacing.unit * 6,
+    },
   },
-  demo: theme.mixins.gutters({
-    display: 'flex',
-    justifyContent: 'center',
-    paddingTop: 20,
-    paddingBottom: 20,
-  }),
   codeButton: {
     flip: false,
     display: 'none',
     zIndex: 10,
     position: 'absolute',
     top: 2,
     right: 7,
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
   },
   code: {
     display: 'none',
     padding: 0,
     margin: 0,
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
     '& pre': {
       overflow: 'auto',
       margin: '0px !important',
       borderRadius: '0px !important',
     },
   },
-  [theme.breakpoints.up(600)]: {
-    codeButton: {
-      display: 'block',
-    },
-    code: {
+  codesandbox: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
       display: 'block',
-    },
-    root: {
-      marginLeft: 0,
-      marginRight: 0,
+      flip: false,
+      zIndex: 10,
+      position: 'absolute',
+      top: 2,
+      right: 48,
     },
   },
 });
 
-class Demo extends React.Component<any, any> {
+function compress(object) {
+  return LZString.compressToBase64(JSON.stringify(object))
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+}
+
+class Demo extends React.Component {
   state = {
     codeOpen: false,
   };
 
-  handleCodeButtonClick = () => {
+  codesandboxForm = null;
+
+  handleClickCodeOpen = () => {
     this.setState({
       codeOpen: !this.state.codeOpen,
     });
   };
 
+  handleClickCodesandbox = () => {
+    const codesandboxValue = {
+      files: {
+        'package.json': {
+          content: {
+            dependencies: {
+              react: 'latest',
+              'react-dom': 'latest',
+              '@material-next/core': 'latest',
+              '@material-next/icons': 'latest',
+            },
+          },
+        },
+        'demo.js': {
+          content: this.props.raw,
+        },
+        'index.js': {
+          content: `
+import React from 'react';
+import { render } from 'react-dom';
+import Demo from './demo';
+
+const rootElement = document.querySelector('#root');
+if (rootElement) {
+  render(<Demo />, rootElement);
+}
+          `,
+        },
+        'index.html': {
+          content: `
+<body>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <div id="root"></div>
+</body>
+            `,
+        },
+      },
+    };
+
+    this.codesandboxForm.querySelector('[name="parameters"]').value = compress(codesandboxValue);
+    this.codesandboxForm.submit();
+  };
+
   render() {
     const { classes, js: DemoComponent, raw } = this.props;
     const { codeOpen } = this.state;
 
     return (
       <div className={classes.root}>
+        <Tooltip title="Edit in codesandbox" placement="top">
+          <div className={classes.codesandbox}>
+            <IconButton onClick={this.handleClickCodesandbox}>
+              <ModeEditIcon />
+            </IconButton>
+            <form
+              ref={node => {
+                this.codesandboxForm = node;
+              }}
+              method="get"
+              action="https://codesandbox.io/api/v1/sandboxes/define"
+              target="_blank"
+            >
+              <input type="hidden" name="parameters" value="" />
+            </form>
+          </div>
+        </Tooltip>
         <Tooltip title={codeOpen ? 'Hide the source' : 'Show the source'} placement="top">
-          <IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
+          <IconButton onClick={this.handleClickCodeOpen} className={classes.codeButton}>
             <CodeIcon />
           </IconButton>
         </Tooltip>

diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.6",
+    "lz-string": "^1.4.4",
     "marked": "^0.3.6",
     "mocha": "^4.0.1",
     "next": "^4.1.4",

diff --git a/yarn.lock b/yarn.lock
@@ -5575,6 +5575,10 @@ [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lsmod/-/lsmod-1.0.0.tgz#9a00f76dca36eb23fa05350afe1b585d4299e64b"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"