Skip to content

Commit a059efe

Browse files
rvsiarvsia
committed
Update demo to V5
1 parent eb9bb9d commit a059efe

Some content is hidden

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

43 files changed

+751
-470
lines changed

‎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/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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import makeStyles from '@material-ui/core/styles/makeStyles';
3+
import makeStyles from '@mui/styles/makeStyles';
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';
@@ -38,7 +38,7 @@ const useStylesCode = makeStyles((theme) => ({
3838
wrapper: {
3939
position: 'relative',
4040
maxWidth: '100%',
41-
[theme.breakpoints.down('sm')]: {
41+
[theme.breakpoints.down('md')]: {
4242
maxWidth: (props) => (props.inExample ? '100%' : 'calc(100vw - 64px)'),
4343
},
4444
},

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
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 makeStyles from '@mui/styles/makeStyles';
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

2828
const useHeadingStyles = makeStyles((theme) => ({
2929
anchor: {
@@ -69,7 +69,7 @@ export const Heading = ({ level, children, component }) => {
6969

7070
const useStyles = makeStyles((theme) => ({
7171
container: {
72-
[theme.breakpoints.down('sm')]: {
72+
[theme.breakpoints.down('md')]: {
7373
maxWidth: 'calc(100vw - 64px)',
7474
},
7575
},
@@ -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',
@@ -189,7 +189,7 @@ const CodeExample = ({ source, mode }) => {
189189
className={classes.accordionSummary}
190190
expandIcon={
191191
<Tooltip title="Expand code example">
192-
<IconButton>
192+
<IconButton size="large">
193193
<CodeIcon />
194194
</IconButton>
195195
</Tooltip>
@@ -204,7 +204,7 @@ const CodeExample = ({ source, mode }) => {
204204
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
205205
<input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
206206
<Tooltip title="Edit in codesandbox">
207-
<IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()}>
207+
<IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()} size="large">
208208
<CodesandboxIcon />
209209
</IconButton>
210210
</Tooltip>
@@ -216,7 +216,7 @@ const CodeExample = ({ source, mode }) => {
216216
onClick={(event) => event.stopPropagation()}
217217
>
218218
<Tooltip title="View source on github">
219-
<IconButton>
219+
<IconButton size="large">
220220
<GhIcon style={{ color: grey[700] }} />
221221
</IconButton>
222222
</Tooltip>

‎packages/react-renderer-demo/src/components/common/code-sandbox-svg-icon.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
22
import React from 'react';
3-
import SvgIcon from '@material-ui/core/SvgIcon';
3+
import SvgIcon from '@mui/material/SvgIcon';
44

55
const CodesandboxIcon = (props) => (
66
<SvgIcon {...props} viewBox="0 0 24 24" role="presentation">

‎packages/react-renderer-demo/src/components/common/connected-links.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useContext } from 'react';
2-
import Grid from '@material-ui/core/Grid';
3-
import Button from '@material-ui/core/Button';
4-
import { makeStyles } from '@material-ui/core/styles';
5-
import ChevronRight from '@material-ui/icons/ChevronRight';
6-
import ChevronLeft from '@material-ui/icons/ChevronLeft';
2+
import Grid from '@mui/material/Grid';
3+
import Button from '@mui/material/Button';
4+
import makeStyles from '@mui/styles/makeStyles';
5+
import ChevronRight from '@mui/icons-material/ChevronRight';
6+
import ChevronLeft from '@mui/icons-material/ChevronLeft';
77
import Link from 'next/link';
88

99
import MenuContext from '../navigation/menu-context';
@@ -31,7 +31,7 @@ const ConnectedLinks = () => {
3131
const prevLink = `/${useMapperLink(prev && prev.link)}`;
3232
const nextLink = `/${useMapperLink(next && next.link)}`;
3333
return (
34-
<Grid container justify="space-between" className={classNames.linksContainer}>
34+
<Grid container justifyContent="space-between" className={classNames.linksContainer}>
3535
<Grid item>
3636
{prev && prev.link && (
3737
<Link href={prevLink}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import RouterLink from 'next/link';
4-
import Button from '@material-ui/core/Button';
5-
import makeStyles from '@material-ui/core/styles/makeStyles';
4+
import Button from '@mui/material/Button';
5+
import makeStyles from '@mui/styles/makeStyles';
66

77
const useStyles = makeStyles({
88
toExampleLink: {

‎packages/react-renderer-demo/src/components/common/gh-svg-icon.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
22
import React from 'react';
3-
import SvgIcon from '@material-ui/core/SvgIcon';
3+
import SvgIcon from '@mui/material/SvgIcon';
44

55
const GhIcon = (props) => (
66
<SvgIcon {...props} viewBox="0 0 24 24" role="presentation">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import ComponentExample from '@docs/components/component-example';
4-
import { makeStyles } from '@material-ui/core/styles';
4+
import makeStyles from '@mui/styles/makeStyles';
55

66
import { Heading } from './mdx/mdx-components';
77
import avalableMappers from '../helpers/available-mappers';

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import React, { useEffect, useState } from 'react';
22
import { useRouter } from 'next/router';
3-
import CircularProgress from '@material-ui/core/CircularProgress';
4-
import { makeStyles } from '@material-ui/core/styles';
3+
import CircularProgress from '@mui/material/CircularProgress';
4+
import makeStyles from '@mui/styles/makeStyles';
55
import PropTypes from 'prop-types';
6-
import Card from '@material-ui/core/Card';
7-
import CardContent from '@material-ui/core/CardContent';
6+
import Card from '@mui/material/Card';
7+
import CardContent from '@mui/material/CardContent';
88
import sdk from '@stackblitz/sdk';
9-
import Table from '@material-ui/core/Table';
10-
import TableBody from '@material-ui/core/TableBody';
11-
import TableCell from '@material-ui/core/TableCell';
12-
import TableHead from '@material-ui/core/TableHead';
13-
import TableRow from '@material-ui/core/TableRow';
14-
import CheckIcon from '@material-ui/icons/Check';
15-
import Tabs from '@material-ui/core/Tabs';
16-
import Tab from '@material-ui/core/Tab';
17-
import Box from '@material-ui/core/Box';
18-
import LinkIcon from '@material-ui/icons/Link';
19-
import Button from '@material-ui/core/Button';
20-
import ButtonGroup from '@material-ui/core/ButtonGroup';
21-
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
22-
import CardHeader from '@material-ui/core/CardHeader';
23-
import IconButton from '@material-ui/core/IconButton';
9+
import Table from '@mui/material/Table';
10+
import TableBody from '@mui/material/TableBody';
11+
import TableCell from '@mui/material/TableCell';
12+
import TableHead from '@mui/material/TableHead';
13+
import TableRow from '@mui/material/TableRow';
14+
import CheckIcon from '@mui/icons-material/Check';
15+
import Tabs from '@mui/material/Tabs';
16+
import Tab from '@mui/material/Tab';
17+
import Box from '@mui/material/Box';
18+
import LinkIcon from '@mui/icons-material/Link';
19+
import Button from '@mui/material/Button';
20+
import ButtonGroup from '@mui/material/ButtonGroup';
21+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
22+
import CardHeader from '@mui/material/CardHeader';
23+
import IconButton from '@mui/material/IconButton';
2424

2525
import Link from 'next/link';
2626
import clsx from 'clsx';
@@ -60,19 +60,19 @@ const project = {
6060

6161
const useStyles = makeStyles((theme) => ({
6262
box: {
63-
[theme.breakpoints.down('sm')]: {
63+
[theme.breakpoints.down('md')]: {
6464
flexDirection: 'column-reverse',
6565
},
6666
},
6767
smTabDown: {
6868
display: 'none',
69-
[theme.breakpoints.down('sm')]: {
69+
[theme.breakpoints.down('md')]: {
7070
display: 'block',
7171
},
7272
},
7373
smTabUp: {
7474
display: 'block',
75-
[theme.breakpoints.down('sm')]: {
75+
[theme.breakpoints.down('md')]: {
7676
display: 'none',
7777
},
7878
},
@@ -111,13 +111,13 @@ const useStyles = makeStyles((theme) => ({
111111
editorContainer: {
112112
minHeight: 500,
113113
flex: 1,
114-
[theme.breakpoints.down('sm')]: {
114+
[theme.breakpoints.down('md')]: {
115115
marginBottom: 16,
116116
flexDirection: 'column',
117117
},
118118
'& iframe': {
119119
border: 'none',
120-
[theme.breakpoints.down('sm')]: {
120+
[theme.breakpoints.down('md')]: {
121121
height: 500,
122122
},
123123
},
@@ -145,7 +145,7 @@ const useStyles = makeStyles((theme) => ({
145145
},
146146
tableHeader: {
147147
paddingBottom: 0,
148-
[theme.breakpoints.down('sm')]: {
148+
[theme.breakpoints.down('md')]: {
149149
display: 'none',
150150
},
151151
},
@@ -222,7 +222,7 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
222222
className={clsx(classes.tableHeader)}
223223
title={expanded ? 'Options' : ''}
224224
action={
225-
<IconButton aria-label="hide options" onClick={() => setExpanded(!expanded)}>
225+
<IconButton aria-label="hide options" onClick={() => setExpanded(!expanded)} size="large">
226226
<ExpandMoreIcon className={classes.hide} />
227227
</IconButton>
228228
}
@@ -264,7 +264,7 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
264264
</div>
265265
<div className={classes.smTabUp}>
266266
{!expanded && (
267-
<IconButton className={classes.expandButton} aria-label="expand options" onClick={() => setExpanded(!expanded)}>
267+
<IconButton className={classes.expandButton} aria-label="expand options" onClick={() => setExpanded(!expanded)} size="large">
268268
<ExpandMoreIcon className={classes.expand} />
269269
</IconButton>
270270
)}

0 commit comments

Comments
 (0)