Add a button to generate code sandbox

Hyperkid123 · Hyperkid123 · commit fa7d35cbea6e · 2020-04-21T11:25:33.000+02:00
diff --git a/packages/react-renderer-demo/package.json b/packages/react-renderer-demo/package.json
@@ -36,6 +36,7 @@
         "@patternfly/react-tokens": "^2.5.1",
         "brace": "^0.11.1",
         "clsx": "^1.0.4",
+        "codesandbox": "2.1.14",
         "firebase-admin": "^8.5.0",
         "firebase-functions": "^2.1.0",
         "markdown-to-jsx": "^6.10.3",
diff --git a/packages/react-renderer-demo/src/app/src/components/code-example.js b/packages/react-renderer-demo/src/app/src/components/code-example.js
@@ -13,6 +13,7 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Paper from '@material-ui/core/Paper';
 import clsx from 'clsx';
 import grey from '@material-ui/core/colors/grey';
+import { getParameters } from 'codesandbox/lib/api/define';
 
 import GhIcon from './common/gh-svg-icon';
 
@@ -53,6 +54,44 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
+const payload = getParameters({
+  files: {
+    'public/index.html': {
+      content:
+        '<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <meta\n      name="viewport"\n      content="width=device-width, initial-scale=1, shrink-to-fit=no"\n    />\n    <meta name="theme-color" content="#000000" />\n    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />\n    <title>Data driven forms example</title>\n\n    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">-->\n\n    <!--<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.0.5/patternfly-base.css"/>-->\n    <!--<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.0.5/patternfly-addons.css"/>-->\n  </head>\n\n  <body>\n    <noscript>\n      You need to enable JavaScript to run this app.\n    </noscript>\n    <div id="root"></div>\n  </body>\n</html>\n'
+    },
+    'package.json': {
+      content: {
+        name: 'data-driven-forms-example',
+        version: '1.0.0',
+        description: '',
+        keywords: [],
+        main: 'src/index.js',
+        dependencies: {
+          '@data-driven-forms/mui-component-mapper': '2.1.2',
+          '@data-driven-forms/pf4-component-mapper': '2.1.2',
+          '@data-driven-forms/react-form-renderer': '2.1.2',
+          react: '16.12.0',
+          'react-dom': '16.12.0',
+          'react-scripts': '3.0.1'
+        },
+        devDependencies: { typescript: '3.8.3' },
+        scripts: { start: 'react-scripts start', build: 'react-scripts build', test: 'react-scripts test --env=jsdom', eject: 'react-scripts eject' },
+        browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all']
+      }
+    },
+    'src/index.js': {
+      content:
+        'import React from "react";\nimport ReactDOM from "react-dom";\n\nimport App from "./App";\n\nconst rootElement = document.getElementById("root");\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  rootElement\n);\n'
+    },
+    'src/App.js': {
+      content: 'import React from "react";\n\nexport default function App() {\n  return <div>there will be dragons</div>;\n}\n'
+    }
+  }
+});
+
+console.log(payload);
+
 const CodeExample = ({ source, mode }) => {
   const classes = useStyles();
   const codeSource = reqSource(`./${source}.js`).default;
@@ -67,6 +106,10 @@ const CodeExample = ({ source, mode }) => {
             <ExpansionPanelSummary className={classes.expansionPanelSummary} expandIcon={<CodeIcon />}>
               {Component && <Typography className={classes.heading}>{Component.name}</Typography>}
               <Box display="flex">
+                <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
+                  <input type="hidden" name="parameters" value={payload} />
+                  <input type="submit" value="Open in sandbox" />
+                </form>
                 <Link
                   href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
                   target="_blank"
diff --git a/yarn.lock b/yarn.lock
