Add open in CodeSandbox (#8747)

package.json

@@ -125,6 +125,7 @@
     "jest": "^21.1.0",
     "jsonml.js": "^0.1.0",
     "lint-staged": "^6.0.0",
+    "lz-string": "^1.4.4",
     "majo": "^0.4.1",
     "mockdate": "^2.0.1",
     "moment-timezone": "^0.5.5",

site/theme/en-US.js

@@ -20,6 +20,7 @@ module.exports = {
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
     'app.demo.codepen': 'Open in CodePen',
+    'app.demo.codesandbox': 'Open in CodeSandbox',
     'app.demo.riddle': 'Open in Riddle',
     'app.home.slogan': 'A UI Design Language',
     'app.home.introduce': 'Introduce',

site/theme/static/demo.less

@@ -231,8 +231,21 @@
     overflow: hidden;
   }
 
+  &-codesandbox {
+    background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+    border: 0;
+    text-indent: -9999px;
+    overflow: hidden;
+  }
+
   .highlight-wrapper:hover &-code-copy,
   .highlight-wrapper:hover &-codepen,
+  .highlight-wrapper:hover &-codesandbox,
   .highlight-wrapper:hover &-riddle {
     opacity: 1;
   }

site/theme/template/Content/Demo.jsx

@@ -5,11 +5,19 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
+import LZString from 'lz-string';
 import { Icon, Tooltip } from 'antd';
 import EditButton from './EditButton';
 import BrowserFrame from '../BrowserFrame';
 import { ping } from '../utils';
 
+function compress(string) {
+  return LZString.compressToBase64(string)
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+}
+
 export default class Demo extends React.Component {
   static contextTypes = {
     intl: PropTypes.object,
@@ -117,13 +125,14 @@ export default class Demo extends React.Component {
     });
 
     const prefillStyle = `@import 'antd/dist/antd.css';\n\n${style || ''}`.replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
+    const html = `<div id="container" style="padding: 24px"></div>
+<script>
+  var mountNode = document.getElementById('container');
+</script>`;
 
     const codepenPrefillConfig = {
       title: `${localizedTitle} - Ant Design Demo`,
-      html: `<div id="container" style="padding: 24px"></div>
-<script>
-  var mountNode = document.getElementById('container');
-</script>`,
+      html,
       js: state.sourceCode.replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'antd';/, 'const { $1 } = antd;'),
       css: prefillStyle,
       editors: '001',
@@ -141,6 +150,37 @@ export default class Demo extends React.Component {
       js: state.sourceCode,
       css: prefillStyle,
     };
+    const dependencies = state.sourceCode.split('\n').reduce((acc, line) => {
+      const matches = line.match(/import .+? from '(.+)';$/);
+      if (matches && matches[1]) {
+        acc[matches[1]] = 'latest';
+      }
+      return acc;
+    }, { react: 'latest', 'react-dom': 'latest' });
+    const codesanboxPrefillConfig = {
+      files: {
+        'package.json': {
+          content: {
+            dependencies,
+          },
+        },
+        'index.css': {
+          content: (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), ''),
+        },
+        'index.js': {
+          content: `
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import './index.css';
+${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')')}
+          `,
+        },
+        'index.html': {
+          content: html,
+        },
+      },
+    };
     return (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
@@ -196,6 +236,12 @@ export default class Demo extends React.Component {
                   <input type="submit" value="Create New Pen with Prefilled Data" className="code-box-codepen" />
                 </Tooltip>
               </form>
+              <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
+                <input type="hidden" name="parameters" value={compress(JSON.stringify(codesanboxPrefillConfig))} />
+                <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
+                  <input type="submit" value="Create New Sandbox with Prefilled Data" className="code-box-codesandbox" />
+                </Tooltip>
+              </form>
               <CopyToClipboard
                 text={state.sourceCode}
                 onCopy={this.handleCodeCopied}

site/theme/zh-CN.js

@@ -20,6 +20,7 @@ module.exports = {
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',
     'app.demo.codepen': '在 CodePen 中打开',
+    'app.demo.codesandbox': '在 CodeSandbox 中打开',
     'app.demo.riddle': '在 Riddle 中打开',
     'app.home.slogan': '一个 UI 设计语言',
     'app.home.introduce': '设计规范',