Skip to content

Commit e33b359

Browse files
Hyperkid123Hyperkid123
committed
Generate codesandbox from the component code.
1 parent fa7d35c commit e33b359

File tree

1 file changed

+79
-36
lines changed

1 file changed

+79
-36
lines changed

‎packages/react-renderer-demo/src/app/src/components/code-example.js‎

Lines changed: 79 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -54,43 +54,86 @@ const useStyles = makeStyles((theme) => ({
5454
}
5555
}));
5656

57-
const payload = getParameters({
58-
files: {
59-
'public/index.html': {
60-
content:
61-
'<!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'
62-
},
63-
'package.json': {
64-
content: {
65-
name: 'data-driven-forms-example',
66-
version: '1.0.0',
67-
description: '',
68-
keywords: [],
69-
main: 'src/index.js',
70-
dependencies: {
71-
'@data-driven-forms/mui-component-mapper': '2.1.2',
72-
'@data-driven-forms/pf4-component-mapper': '2.1.2',
73-
'@data-driven-forms/react-form-renderer': '2.1.2',
74-
react: '16.12.0',
75-
'react-dom': '16.12.0',
76-
'react-scripts': '3.0.1'
77-
},
78-
devDependencies: { typescript: '3.8.3' },
79-
scripts: { start: 'react-scripts start', build: 'react-scripts build', test: 'react-scripts test --env=jsdom', eject: 'react-scripts eject' },
80-
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all']
57+
/**
58+
* Generates html markup for the sandbox
59+
* @param {String} type either MUI or PF4
60+
*/
61+
const generateIndex = (type) => `<!DOCTYPE html>
62+
<html lang="en">
63+
<head>
64+
<meta charset="utf-8" />
65+
<meta
66+
name="viewport"
67+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
68+
/>
69+
<meta name="theme-color" content="#000000" />
70+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
71+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
72+
<title>Data driven forms example</title>
73+
${type === 'mui' ? '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">' : ''}
74+
${
75+
type === 'pf4'
76+
? `
77+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.0.5/patternfly-base.css"/>
78+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.0.5/patternfly-addons.css"/>
79+
`
80+
: ''
81+
}
82+
</head>
83+
84+
<body>
85+
<noscript>
86+
You need to enable JavaScript to run this app.
87+
</noscript>
88+
<div id="root" style="padding: 16px;"></div>
89+
</body>
90+
</html>
91+
`;
92+
93+
const getPayload = (type, code) =>
94+
getParameters({
95+
files: {
96+
'public/index.html': {
97+
content: generateIndex(type)
98+
},
99+
'package.json': {
100+
content: {
101+
name: 'data-driven-forms-example',
102+
version: '1.0.0',
103+
description: '',
104+
keywords: [],
105+
main: 'src/index.js',
106+
dependencies: {
107+
'@data-driven-forms/mui-component-mapper': '2.1.2',
108+
'@data-driven-forms/pf4-component-mapper': '2.1.2',
109+
'@data-driven-forms/react-form-renderer': '2.1.2',
110+
'@patternfly/react-core': 'latest',
111+
'@patternfly/react-icons': 'latest',
112+
'@material-ui/core': 'latest',
113+
'@material-ui/icons': 'latest',
114+
react: '16.12.0',
115+
'react-dom': '16.12.0',
116+
'react-scripts': '3.0.1'
117+
},
118+
devDependencies: { typescript: '3.8.3' },
119+
scripts: {
120+
start: 'react-scripts start',
121+
build: 'react-scripts build',
122+
test: 'react-scripts test --env=jsdom',
123+
eject: 'react-scripts eject'
124+
},
125+
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all']
126+
}
127+
},
128+
'src/index.js': {
129+
content:
130+
'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'
131+
},
132+
'src/App.js': {
133+
content: code
81134
}
82-
},
83-
'src/index.js': {
84-
content:
85-
'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'
86-
},
87-
'src/App.js': {
88-
content: 'import React from "react";\n\nexport default function App() {\n return <div>there will be dragons</div>;\n}\n'
89135
}
90-
}
91-
});
92-
93-
console.log(payload);
136+
});
94137

95138
const CodeExample = ({ source, mode }) => {
96139
const classes = useStyles();
@@ -107,7 +150,7 @@ const CodeExample = ({ source, mode }) => {
107150
{Component && <Typography className={classes.heading}>{Component.name}</Typography>}
108151
<Box display="flex">
109152
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
110-
<input type="hidden" name="parameters" value={payload} />
153+
<input type="hidden" name="parameters" value={getPayload('pf4', codeSource)} />
111154
<input type="submit" value="Open in sandbox" />
112155
</form>
113156
<Link

0 commit comments

Comments
 (0)