Skip to content

Commit 6576eb1

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1140 from rvsia/migrateToMUI5
Update demo to V5
2 parents eb9bb9d + 38653e0 commit 6576eb1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1238
-804
lines changed

‎packages/react-renderer-demo/firebaseFunctions.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const nextjsDistDir = join('src', require('./src/next.config.js').distDir);
99
const nextjsServer = next({
1010
dev: isDev,
1111
conf: {
12-
distDir: nextjsDistDir
13-
}
12+
distDir: nextjsDistDir,
13+
},
1414
});
1515
const nextjsHandle = nextjsServer.getRequestHandler();
1616

@@ -40,7 +40,7 @@ exports.nextjsFunc = functions.https.onRequest((req, res) => {
4040
.map(({ 'created-at': createdAt, active_till: activeTill, ...notification }) => ({
4141
...notification,
4242
activeTill: activeTill.toDate(),
43-
'created-at': createdAt ? createdAt.toDate : undefined // eslint-disable-line camelcase
43+
'created-at': createdAt ? createdAt.toDate : undefined, // eslint-disable-line camelcase
4444
}));
4545
res.status(200).json(data);
4646
res.finished = true;
@@ -75,7 +75,7 @@ exports.sendComment = functions.https.onRequest(async (request, response) => {
7575
repo: 'react-forms',
7676
// eslint-disable-next-line camelcase
7777
comment_id: commentId,
78-
body: message
78+
body: message,
7979
});
8080
response.send(`Comment ${commentId} updated with message: ${message}`);
8181
} else {
@@ -84,7 +84,7 @@ exports.sendComment = functions.https.onRequest(async (request, response) => {
8484
repo: 'react-forms',
8585
// eslint-disable-next-line camelcase
8686
issue_number: issueNumber,
87-
body: message
87+
body: message,
8888
});
8989
response.send(`Comment in issue ${issueNumber} created with message: ${message}`);
9090
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,16 @@
3131
"@data-driven-forms/form-builder": "0.0.12-rc1",
3232
"@data-driven-forms/mui-component-mapper": "*",
3333
"@data-driven-forms/react-form-renderer": "*",
34+
"@emotion/react": "^11.4.1",
35+
"@emotion/styled": "^11.3.0",
3436
"@material-ui/core": "^4.11.0",
3537
"@material-ui/icons": "^4.9.1",
3638
"@material-ui/styles": "^4.10.0",
3739
"@mdx-js/loader": "^1.6.22",
3840
"@mdx-js/react": "^1.6.22",
41+
"@mui/icons-material": "^5.0.3",
42+
"@mui/material": "^5.0.3",
43+
"@mui/styles": "^5.0.1",
3944
"@next/bundle-analyzer": "^11.1.2",
4045
"@next/mdx": "^11.1.2",
4146
"@stackblitz/sdk": "^1.5.2",

‎packages/react-renderer-demo/scripts/generate-component-examples.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,20 @@ const availableMappers = [
99
{ title: 'PF4', mapper: 'pf4' },
1010
{ title: 'BJS', mapper: 'blueprint' },
1111
{ title: 'SUIR', mapper: 'suir' },
12-
{ title: 'ANT', mapper: 'ant' }
12+
{ title: 'ANT', mapper: 'ant' },
1313
];
1414

1515
const targetDirectory = path.resolve(__dirname, '../doc-components');
1616

1717
const mdSources = availableMappers.reduce(
1818
(acc, curr) => ({
1919
...acc,
20-
[curr.mapper]: glob.sync(path.resolve(__dirname, `../doc-components/examples-texts/${curr.mapper}/*.md`)).map((path) => path.split('/').pop())
20+
[curr.mapper]: glob.sync(path.resolve(__dirname, `../doc-components/examples-texts/${curr.mapper}/*.md`)).map((path) => path.split('/').pop()),
2121
}),
2222
{}
2323
);
2424

25-
const filesToGenerate = glob.sync(path.resolve(__dirname, '../pages/component-example/*.js')).map((path) =>
26-
path
27-
.split('/')
28-
.pop()
29-
.replace('.js', '')
30-
);
25+
const filesToGenerate = glob.sync(path.resolve(__dirname, '../pages/component-example/*.js')).map((path) => path.split('/').pop().replace('.js', ''));
3126

3227
const fileTemplate = `import React from 'react';
3328
import PropTypes from 'prop-types';

‎packages/react-renderer-demo/src/babel.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
const muiTransformPlugin = [
22
'transform-imports',
33
{
4-
'@material-ui/core': {
5-
transform: (importName) => `@material-ui/core/${importName}`,
4+
'@mui/material': {
5+
transform: (importName) => `@mui/material/${importName}`,
66
preventFullImport: false,
7-
skipDefaultConversion: false
8-
}
7+
skipDefaultConversion: false,
8+
},
99
},
10-
'MUI-CJS'
10+
'MUI-CJS',
1111
];
1212

1313
module.exports = {
1414
presets: [['next/babel']],
15-
plugins: [muiTransformPlugin]
15+
plugins: [muiTransformPlugin],
1616
};

‎packages/react-renderer-demo/src/components/code-editor/index.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import makeStyles from '@material-ui/core/styles/makeStyles';
3+
import { styled } from '@mui/material/styles';
44
import Highlight, { defaultProps } from 'prism-react-renderer/';
55
import ghTheme from 'prism-react-renderer/themes/github';
66
import vsTheme from 'prism-react-renderer/themes/vsDark';
77
import tranformImports from './transform-imports';
88
import clsx from 'clsx';
99

10-
const useStyles = makeStyles({
11-
pre: {
10+
const StyledPre = styled('pre')({
11+
'&.pre': {
1212
maxWidth: '100vw',
1313
textAlign: 'left',
1414
margin: '1em 0',
@@ -21,32 +21,27 @@ const useStyles = makeStyles({
2121
},
2222
});
2323

24-
const Pre = ({ children, ...props }) => {
25-
const classes = useStyles();
26-
return (
27-
<pre {...props} className={classes.pre}>
28-
{children}
29-
</pre>
30-
);
31-
};
24+
const Pre = ({ children, ...props }) => (
25+
<StyledPre {...props} className={'pre'}>
26+
{children}
27+
</StyledPre>
28+
);
3229

3330
Pre.propTypes = {
3431
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
3532
};
3633

37-
const useStylesCode = makeStyles((theme) => ({
38-
wrapper: {
34+
const Root = styled('div')(({ theme }) => ({
35+
'&.wrapper': {
3936
position: 'relative',
4037
maxWidth: '100%',
41-
[theme.breakpoints.down('sm')]: {
38+
[theme.breakpoints.down('md')]: {
4239
maxWidth: (props) => (props.inExample ? '100%' : 'calc(100vw - 64px)'),
4340
},
4441
},
4542
}));
4643

4744
const CodeEditor = ({ value, children, className, inExample, editorClassname, keepLastLine }) => {
48-
const classes = useStylesCode({ inExample });
49-
5045
const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
5146
let content = value || children || '';
5247

@@ -64,7 +59,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
6459
content = keepLastLine ? content : content.substring(0, content.length - 1);
6560

6661
return (
67-
<div className={clsx(classes.wrapper, editorClassname)}>
62+
<Root className={clsx('wrapper', editorClassname)}>
6863
<Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
6964
{({ className, style, tokens, getLineProps, getTokenProps }) => (
7065
<Pre className={className} style={style}>
@@ -80,7 +75,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
8075
</Pre>
8176
)}
8277
</Highlight>
83-
</div>
78+
</Root>
8479
);
8580
};
8681

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

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
/* eslint-disable react/prop-types */
22
import React, { Fragment, useEffect, useState, useRef } from 'react';
3-
import Grid from '@material-ui/core/Grid';
4-
import { makeStyles } from '@material-ui/core/styles';
5-
import Typography from '@material-ui/core/Typography';
6-
import Link from '@material-ui/core/Link';
7-
import Box from '@material-ui/core/Box';
8-
import CodeIcon from '@material-ui/icons/Code';
9-
import Accordion from '@material-ui/core/Accordion';
10-
import AccordionSummary from '@material-ui/core/AccordionSummary';
3+
import Grid from '@mui/material/Grid';
4+
import { styled } from '@mui/material/styles';
5+
import Typography from '@mui/material/Typography';
6+
import Link from '@mui/material/Link';
7+
import Box from '@mui/material/Box';
8+
import CodeIcon from '@mui/icons-material/Code';
9+
import Accordion from '@mui/material/Accordion';
10+
import AccordionSummary from '@mui/material/AccordionSummary';
1111
import PropTypes from 'prop-types';
12-
import AccordionDetails from '@material-ui/core/AccordionDetails';
13-
import Paper from '@material-ui/core/Paper';
12+
import AccordionDetails from '@mui/material/AccordionDetails';
13+
import Paper from '@mui/material/Paper';
1414
import clsx from 'clsx';
15-
import grey from '@material-ui/core/colors/grey';
16-
import IconButton from '@material-ui/core/IconButton';
15+
import IconButton from '@mui/material/IconButton';
1716
import { getParameters } from 'codesandbox/lib/api/define';
18-
import Tooltip from '@material-ui/core/Tooltip';
17+
import Tooltip from '@mui/material/Tooltip';
1918
import dynamic from 'next/dynamic';
2019
import { useRouter } from 'next/router';
21-
2220
import GhIcon from './common/gh-svg-icon';
21+
2322
import CodesandboxIcon from './common/code-sandbox-svg-icon';
2423
import CodeEditor from './code-editor';
2524
import { headerToId } from '../helpers/list-of-contents';
2625
import ShareButton from './mdx/share-button';
26+
import { grey } from '@mui/material/colors';
2727

28-
const useHeadingStyles = makeStyles((theme) => ({
29-
anchor: {
28+
const HeadingRoot = styled('div')(({ theme }) => ({
29+
'& .anchor': {
3030
textDecoration: 'none',
3131
color: 'inherit',
3232
fontWeight: 'inherit',
3333
},
34-
wrapper: {
34+
'&.wrapper': {
3535
flexGrow: 1,
3636
display: 'flex',
3737
},
38-
heading: {
38+
'& .heading': {
3939
paddingTop: 4,
4040
fontSize: theme.typography.pxToRem(20),
4141
fontWeight: theme.typography.fontWeightRegular,
@@ -52,44 +52,44 @@ const useHeadingStyles = makeStyles((theme) => ({
5252

5353
export const Heading = ({ level, children, component }) => {
5454
const router = useRouter();
55-
const classes = useHeadingStyles();
5655
const id = headerToId(children);
5756
const path = `${router.asPath}#${id}`;
5857
return (
59-
<div id={id} className={classes.wrapper} data-scroll="true">
60-
<Typography id={`heading-${id}`} className={classes.heading} variant={`h${level}`} component={component}>
61-
<a href={path} className={classes.anchor} data-mdlink="md-heading">
58+
<HeadingRoot id={id} className={'wrapper'} data-scroll="true">
59+
<Typography id={`heading-${id}`} className={'heading'} variant={`h${level}`} component={component}>
60+
<a href={path} className={'anchor'} data-mdlink="md-heading">
6261
{children}
6362
<ShareButton path={path} />
6463
</a>
6564
</Typography>
66-
</div>
65+
</HeadingRoot>
6766
);
6867
};
6968

70-
const useStyles = makeStyles((theme) => ({
71-
container: {
72-
[theme.breakpoints.down('sm')]: {
69+
const ExampleRoot = styled(Grid)(({ theme }) => ({
70+
'&.container': {
71+
[theme.breakpoints.down('md')]: {
7372
maxWidth: 'calc(100vw - 64px)',
7473
},
7574
},
76-
codeWrapper: {
75+
'& .codeWrapper': {
7776
background: '#1D1F21',
7877
paddingTop: 16,
7978
paddingBottom: 16,
8079
borderRadius: 4,
8180
},
82-
componentPanel: {
81+
'& .componentPanel': {
8382
padding: 16,
8483
},
85-
accordion: {
84+
'& .accordion': {
8685
border: 'none',
8786
boxShadow: 'none',
8887
background: 'none',
8988
padding: 0,
9089
},
91-
accordionSummary: {
90+
'& .accordionSummary': {
9291
padding: 0,
92+
width: '100%',
9393
},
9494
}));
9595

@@ -134,8 +134,8 @@ const getPayload = (code, sourceFiles = {}) =>
134134
dependencies: {
135135
'@data-driven-forms/mui-component-mapper': 'latest',
136136
'@data-driven-forms/react-form-renderer': 'latest',
137-
'@material-ui/core': 'latest',
138-
'@material-ui/icons': 'latest',
137+
'@mui/material': 'latest',
138+
'@mui/icons-material': 'latest',
139139
react: '16.12.0',
140140
'react-dom': '16.12.0',
141141
'react-scripts': '3.0.1',
@@ -179,17 +179,16 @@ const CodeExample = ({ source, mode }) => {
179179
setCodeSource(file.default);
180180
});
181181
}, [source]);
182-
const classes = useStyles();
183182
if (mode === 'preview') {
184183
return (
185-
<Grid container spacing={0} className={clsx('DocRawComponent', classes.container)}>
184+
<ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
186185
<Grid item xs={12}>
187-
<Accordion className={classes.accordion}>
186+
<Accordion className={'accordion'}>
188187
<AccordionSummary
189-
className={classes.accordionSummary}
188+
className={'accordionSummary'}
190189
expandIcon={
191190
<Tooltip title="Expand code example">
192-
<IconButton>
191+
<IconButton size="large">
193192
<CodeIcon />
194193
</IconButton>
195194
</Tooltip>
@@ -204,7 +203,7 @@ const CodeExample = ({ source, mode }) => {
204203
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
205204
<input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
206205
<Tooltip title="Edit in codesandbox">
207-
<IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()}>
206+
<IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()} size="large">
208207
<CodesandboxIcon />
209208
</IconButton>
210209
</Tooltip>
@@ -216,31 +215,31 @@ const CodeExample = ({ source, mode }) => {
216215
onClick={(event) => event.stopPropagation()}
217216
>
218217
<Tooltip title="View source on github">
219-
<IconButton>
218+
<IconButton size="large">
220219
<GhIcon style={{ color: grey[700] }} />
221220
</IconButton>
222221
</Tooltip>
223222
</Link>
224223
</Box>
225224
</AccordionSummary>
226-
<AccordionDetails className={clsx(classes.accordionDetail, classes.codeWrapper)}>
225+
<AccordionDetails className={clsx('accordionDetail', 'codeWrapper')}>
227226
<CodeEditor value={codeSource} inExample />
228227
</AccordionDetails>
229228
</Accordion>
230229
</Grid>
231230
{Component && (
232-
<Grid className={classes.formContainer} item xs={12}>
233-
<Paper className={classes.componentPanel}>
231+
<Grid className={'formContainer'} item xs={12}>
232+
<Paper className={'componentPanel'}>
234233
<Component />
235234
</Paper>
236235
</Grid>
237236
)}
238-
</Grid>
237+
</ExampleRoot>
239238
);
240239
}
241240

242241
return (
243-
<Grid container spacing={0} className="DocRawComponent">
242+
<ExampleRoot container spacing={0} className="DocRawComponent">
244243
<Grid item xs={12}>
245244
<Box display="flex" justifyContent="flex-end">
246245
<Link
@@ -253,10 +252,10 @@ const CodeExample = ({ source, mode }) => {
253252
</Link>
254253
</Box>
255254
</Grid>
256-
<Grid item xs={12} className={classes.codeWrapper}>
255+
<Grid item xs={12} className={'codeWrapper'}>
257256
<CodeEditor value={codeSource} />
258257
</Grid>
259-
</Grid>
258+
</ExampleRoot>
260259
);
261260
};
262261

0 commit comments

Comments
 (0)