Skip to content

Commit a3de1c9

Browse files
Jakub007dJakub007d
committed
fix: fixing docs examples
1 parent 89e6ece commit a3de1c9

File tree

9 files changed

+700
-169
lines changed

9 files changed

+700
-169
lines changed

‎package-lock.json‎

Lines changed: 476 additions & 59 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-renderer-demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@actions/github": "^5.0.0",
23+
"@codesandbox/sandpack-react": "^2.20.0",
2324
"@data-driven-forms/editor-pro": "0.0.13",
2425
"@data-driven-forms/mui-component-mapper": "*",
2526
"@data-driven-forms/react-form-renderer": "*",
@@ -35,7 +36,6 @@
3536
"@mui/system": "^5.10.4",
3637
"@mui/x-date-pickers": "^5.0.1",
3738
"@next/bundle-analyzer": "^15.3.1",
38-
"@stackblitz/sdk": "^1.5.3",
3939
"clsx": "^1.1.1",
4040
"codesandbox": "2.2.3",
4141
"evergreen-ui": "^6.9.10",

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

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { useEffect, useState } from 'react';
22
import { styled } from '@mui/material/styles';
33
import { useRouter } from 'next/router';
4-
import CircularProgress from '@mui/material/CircularProgress';
54
import Card from '@mui/material/Card';
65
import CardContent from '@mui/material/CardContent';
7-
import sdk from '@stackblitz/sdk';
6+
import { Sandpack } from '@codesandbox/sandpack-react';
87
import Table from '@mui/material/Table';
98
import TableBody from '@mui/material/TableBody';
109
import TableCell from '@mui/material/TableCell';
@@ -23,12 +22,12 @@ import IconButton from '@mui/material/IconButton';
2322

2423
import clsx from 'clsx';
2524

26-
import * as mui from '../stackblitz-templates/mui-templates';
27-
import * as pf4 from '../stackblitz-templates/pf4-templates';
28-
import * as blueprint from '../stackblitz-templates/blueprint-templates';
29-
import * as suir from '../stackblitz-templates/suir-template';
30-
import * as ant from '../stackblitz-templates/ant-templates';
31-
import * as carbon from '../stackblitz-templates/carbon-templates';
25+
import * as mui from '../sandpack-templates/mui-sandpack';
26+
import * as pf4 from '../sandpack-templates/pf4-sandpack';
27+
import * as blueprint from '../sandpack-templates/blueprint-sandpack';
28+
import * as suir from '../sandpack-templates/suir-sandpack';
29+
import * as ant from '../sandpack-templates/ant-sandpack';
30+
import * as carbon from '../sandpack-templates/carbon-sandpack';
3231

3332
import avalableMappers from '../helpers/available-mappers';
3433
import GhIcon from './common/gh-svg-icon';
@@ -104,11 +103,17 @@ const Root = styled('div')(({ theme }) => ({
104103

105104
[`& .${classes.spinnerCheat}`]: {
106105
flex: 1,
106+
height: '100%',
107+
display: 'flex',
108+
flexDirection: 'column',
107109
position: 'relative',
108110
boxShadow: theme.shadows[1],
109111
'& .longer + #code-target': {
110112
maxHeight: 'calc(100% - 49px)',
111113
},
114+
'& .sp-layout': {
115+
height: '100%',
116+
},
112117
},
113118

114119
[`& .${classes.spinner}`]: {
@@ -196,16 +201,6 @@ const metadata = {
196201
carbon,
197202
};
198203

199-
const project = {
200-
settings: {
201-
compile: {
202-
trigger: 'auto',
203-
action: 'hmr',
204-
clearConsole: false,
205-
},
206-
},
207-
template: 'javascript',
208-
};
209204

210205
const stringifyWithFunctions = (string) =>
211206
JSON.stringify(string, null, 2)
@@ -222,24 +217,18 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
222217
availableVariants?.find(({ value }) => value === activeSchema)?.schema ||
223218
availableVariants?.find(({ value }) => value === 'basic')?.schema ||
224219
schema;
225-
const basicConfiguration = {
226-
...project,
227-
dependencies: metadata[activeMapper].dependencies,
228-
files: {
229-
'index.html': metadata[activeMapper].html,
230-
'index.js': metadata[activeMapper].code,
231-
...(component === 'wizard' && { 'index.js': metadata[activeMapper].wizardCode }),
232-
'schema.js': `export default ${stringifyWithFunctions(selectedSchema)};`,
233-
},
220+
221+
const sandpackFiles = {
222+
'/index.js': metadata[activeMapper].code,
223+
...(component === 'wizard' && { '/index.js': metadata[activeMapper].wizardCode }),
224+
'/schema.js': `export default ${stringifyWithFunctions(selectedSchema)};`,
225+
...(metadata[activeMapper].css && { '/styles.css': metadata[activeMapper].css }),
234226
};
235-
const basicEditorSettings = { height: '100%', hideNavigation: true, forceEmbedLayout: true, openFile: 'schema.js' };
236227

237228
useEffect(() => {
238229
if (activeSchema && !availableVariants?.find(({ value }) => value === activeSchema)) {
239230
push(`${pathname}?mapper=${activeMapper}&schema=basic`);
240231
}
241-
242-
sdk.embedProject('code-target', basicConfiguration, basicEditorSettings);
243232
}, [activeMapper, schema, activeSchema]);
244233

245234
const renderMapperTabs = () =>
@@ -351,10 +340,25 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
351340
/>
352341
))}
353342
</Tabs>
354-
<div id="code-target" className="pepa"></div>
355-
<div className={classes.spinner}>
356-
<CircularProgress color="inherit" size={80} />
357-
</div>
343+
<Sandpack
344+
key={`${activeMapper}-${activeSchema || 'default'}-${component}`}
345+
template="react"
346+
files={sandpackFiles}
347+
customSetup={{
348+
dependencies: metadata[activeMapper].dependencies,
349+
}}
350+
options={{
351+
showNavigator: false,
352+
showTabs: true,
353+
showLineNumbers: true,
354+
editorHeight: '100%',
355+
activeFile: '/schema.js',
356+
bundlerTimeout: 60000,
357+
wrapContent: true,
358+
}}
359+
theme="light"
360+
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
361+
/>
358362
</div>
359363
</Box>
360364
</Box>

packages/react-renderer-demo/src/stackblitz-templates/ant-templates.js renamed to packages/react-renderer-demo/src/sandpack-templates/ant-sandpack.js

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
export const html = `
22
<html>
3+
<head>
4+
<style>
5+
body {
6+
margin: 0;
7+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
8+
}
9+
</style>
10+
</head>
311
<body>
412
<div id="root"></div>
513
</body>
614
</html>
715
`;
816

917
export const code = `import React, { Component } from 'react';
10-
import { render } from 'react-dom';
18+
import { createRoot } from 'react-dom/client';
1119
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
1220
import FormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
1321
import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
@@ -30,10 +38,11 @@ class App extends Component {
3038
}
3139
}
3240
33-
render(<App />, document.getElementById('root'));`;
41+
const root = createRoot(document.getElementById('root'));
42+
root.render(<App />);`;
3443

3544
export const wizardCode = `import React, { Component } from 'react';
36-
import { render } from 'react-dom';
45+
import { createRoot } from 'react-dom/client';
3746
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
3847
import AntFormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
3948
import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
@@ -58,7 +67,8 @@ class App extends Component {
5867
}
5968
}
6069
61-
render(<App />, document.getElementById('root'));`;
70+
const root = createRoot(document.getElementById('root'));
71+
root.render(<App />);`;
6272

6373
export const dependencies = {
6474
react: 'latest',
@@ -70,4 +80,7 @@ export const dependencies = {
7080
'@ant-design/icons': '^4.7.0',
7181
'prop-types': 'latest',
7282
'@babel/runtime': '^7.12.1',
83+
'react-final-form': '^6.5.9',
84+
'final-form': '^4.20.10',
85+
'final-form-arrays': '^3.1.0',
7386
};

packages/react-renderer-demo/src/stackblitz-templates/blueprint-templates.js renamed to packages/react-renderer-demo/src/sandpack-templates/blueprint-sandpack.js

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,45 @@ export const html = `
44
<!-- Style dependencies -->
55
<link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
66
<!-- Blueprint stylesheets -->
7-
<link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
7+
<link href="https://unpkg.com/@blueprintjs/icons@^4.2.1/lib/css/blueprint-icons.css" rel="stylesheet" />
88
<link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
9-
<link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
9+
<link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4/lib/css/blueprint-datetime.css" rel="stylesheet" />
10+
<style>
11+
body {
12+
margin: 0;
13+
}
14+
.bp4-slider {
15+
width: 100%;
16+
}
17+
.bp4-slider-axis {
18+
display: none;
19+
}
20+
</style>
1021
</head>
1122
<body>
1223
<div id="root"></div>
1324
</body>
1425
</html>
1526
`;
1627

17-
export const code = `import React, { Component } from 'react';
18-
import { render } from 'react-dom';
28+
export const code = `import React, { Component, useEffect } from 'react';
29+
import { createRoot } from 'react-dom/client';
1930
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
2031
import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
2132
import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
2233
34+
import 'normalize.css';
35+
import '@blueprintjs/core/lib/css/blueprint.css';
36+
import '@blueprintjs/icons/lib/css/blueprint-icons.css';
37+
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
38+
2339
import schema from './schema'
2440
41+
// Hide slider axis labels to prevent number ghosting
42+
const style = document.createElement('style');
43+
style.textContent = '.bp4-slider-axis { display: none; }';
44+
document.head.appendChild(style);
45+
2546
class App extends Component {
2647
render() {
2748
return (
@@ -37,16 +58,27 @@ class App extends Component {
3758
}
3859
}
3960
40-
render(<App />, document.getElementById('root'));`;
61+
const root = createRoot(document.getElementById('root'));
62+
root.render(<App />);`;
4163

4264
export const wizardCode = `import React, { Component } from 'react';
43-
import { render } from 'react-dom';
65+
import { createRoot } from 'react-dom/client';
4466
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
4567
import BlueprintFormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
4668
import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
4769
70+
import 'normalize.css';
71+
import '@blueprintjs/core/lib/css/blueprint.css';
72+
import '@blueprintjs/icons/lib/css/blueprint-icons.css';
73+
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
74+
4875
import schema from './schema'
4976
77+
// Hide slider axis labels to prevent number ghosting
78+
const style = document.createElement('style');
79+
style.textContent = '.bp4-slider-axis { display: none; }';
80+
document.head.appendChild(style);
81+
5082
const FormTemplate = (props) => <BlueprintFormTemplate {...props} showFormControls={false} />
5183
5284
class App extends Component {
@@ -64,17 +96,25 @@ class App extends Component {
6496
}
6597
}
6698
67-
render(<App />, document.getElementById('root'));`;
99+
const root = createRoot(document.getElementById('root'));
100+
root.render(<App />);`;
68101

69102
export const dependencies = {
70-
react: 'latest',
71-
'react-dom': 'latest',
103+
react: '^18.0.0',
104+
'react-dom': '^18.0.0',
72105
'@babel/runtime': '^7.12.1',
73106
'@data-driven-forms/react-form-renderer': 'latest',
74107
'@data-driven-forms/blueprint-component-mapper': 'latest',
75108
'@data-driven-forms/common': 'latest',
76-
'@blueprintjs/core': 'latest',
77-
'@blueprintjs/datetime': 'latest',
78-
'@blueprintjs/select': 'latest',
79-
'prop-types': 'latest',
109+
'@blueprintjs/core': '^4.2.1',
110+
'@blueprintjs/datetime': '^4.1.4',
111+
'@blueprintjs/select': '^4.1.4',
112+
'@blueprintjs/icons': '^4.2.1',
113+
'normalize.css': '^8.0.1',
114+
'react-final-form': '^6.5.9',
115+
'final-form': '^4.20.10',
116+
'final-form-arrays': '^3.1.0',
117+
'prop-types': '^15.8.1',
118+
'react-transition-group': '^4.4.5',
119+
'classnames': '^2.3.2',
80120
};

packages/react-renderer-demo/src/stackblitz-templates/carbon-templates.js renamed to packages/react-renderer-demo/src/sandpack-templates/carbon-sandpack.js

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
export const html = `
2-
<html>
3-
<head>
4-
<!-- Carbon stylesheets -->
5-
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css">
6-
</head>
7-
<body>
8-
<div id="root"></div>
9-
</body>
10-
</html>
1+
// This css is needed as curently the Carbon mapper is rendering the datepicker input outside of the box
2+
export const css = `.cds--date-picker.cds--date-picker--single * {
3+
max-width: 100%;
4+
}
5+
.cds--date-picker.cds--date-picker--single{
6+
max-width: 100%;
7+
}
118
`;
129

1310
export const code = `import React, { Component } from 'react';
14-
import { render } from 'react-dom';
11+
import { createRoot } from 'react-dom/client';
1512
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
1613
import FormTemplate from '@data-driven-forms/carbon-component-mapper/form-template';
1714
import componentMapper from '@data-driven-forms/carbon-component-mapper/component-mapper';
1815
16+
import '@carbon/styles/css/styles.css';
17+
import './styles.css';
18+
1919
import schema from './schema'
2020
2121
class App extends Component {
@@ -33,14 +33,17 @@ class App extends Component {
3333
}
3434
}
3535
36-
render(<App />, document.getElementById('root'));`;
36+
const root = createRoot(document.getElementById('root'));
37+
root.render(<App />);`;
3738

3839
export const wizardCode = `import React, { Component } from 'react';
39-
import { render } from 'react-dom';
40+
import { createRoot } from 'react-dom/client';
4041
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
4142
import CarbonFormTemplate from '@data-driven-forms/carbon-component-mapper/form-template';
4243
import componentMapper from '@data-driven-forms/carbon-component-mapper/component-mapper';
4344
45+
import '@carbon/styles/css/styles.css';
46+
4447
import schema from './schema'
4548
4649
const FormTemplate = (props) => <CarbonFormTemplate {...props} showFormControls={false} />
@@ -60,19 +63,23 @@ class App extends Component {
6063
}
6164
}
6265
63-
render(<App />, document.getElementById('root'));`;
66+
const root = createRoot(document.getElementById('root'));
67+
root.render(<App />);`;
6468

6569
export const dependencies = {
66-
react: 'latest',
67-
'react-dom': 'latest',
70+
react: '18.0.0',
71+
'react-dom': '18.0.0',
6872
'@data-driven-forms/react-form-renderer': 'latest',
6973
'@data-driven-forms/carbon-component-mapper': 'latest',
7074
'@data-driven-forms/common': 'latest',
71-
'@carbon/icons-react': 'latest',
72-
'carbon-components': 'latest',
73-
'carbon-components-react': 'latest',
74-
'carbon-icons': 'latest',
75-
'prop-types': 'latest',
75+
'@carbon/react': '^1.95.0',
76+
'@carbon/styles': '^1.95.0',
77+
'@carbon/icons-react': '^11.26.0',
78+
'@floating-ui/dom': '^1.5.3',
79+
'prop-types': '^15.8.1',
7680
'@babel/runtime': '^7.12.1',
77-
clsx: 'latest',
81+
clsx: '^2.0.0',
82+
'react-final-form': '^6.5.9',
83+
'final-form': '^4.20.10',
84+
'final-form-arrays': '^3.1.0',
7885
};

0 commit comments

Comments
 (0)