data-driven-forms · Hyperkid123 · Oct 19, 2021 · Oct 12, 2021 · Oct 19, 2021 · Oct 19, 2021
diff --git a/packages/react-renderer-demo/firebaseFunctions.js b/packages/react-renderer-demo/firebaseFunctions.js
@@ -9,8 +9,8 @@ const nextjsDistDir = join('src', require('./src/next.config.js').distDir);
 const nextjsServer = next({
   dev: isDev,
   conf: {
-    distDir: nextjsDistDir
-  }
+    distDir: nextjsDistDir,
+  },
 });
 const nextjsHandle = nextjsServer.getRequestHandler();
 
@@ -40,7 +40,7 @@ exports.nextjsFunc = functions.https.onRequest((req, res) => {
             .map(({ 'created-at': createdAt, active_till: activeTill, ...notification }) => ({
               ...notification,
               activeTill: activeTill.toDate(),
-              'created-at': createdAt ? createdAt.toDate : undefined // eslint-disable-line camelcase
+              'created-at': createdAt ? createdAt.toDate : undefined, // eslint-disable-line camelcase
             }));
           res.status(200).json(data);
           res.finished = true;
@@ -75,7 +75,7 @@ exports.sendComment = functions.https.onRequest(async (request, response) => {
         repo: 'react-forms',
         // eslint-disable-next-line camelcase
         comment_id: commentId,
-        body: message
+        body: message,
       });
       response.send(`Comment ${commentId} updated with message: ${message}`);
     } else {
@@ -84,7 +84,7 @@ exports.sendComment = functions.https.onRequest(async (request, response) => {
         repo: 'react-forms',
         // eslint-disable-next-line camelcase
         issue_number: issueNumber,
-        body: message
+        body: message,
       });
       response.send(`Comment in issue ${issueNumber} created with message: ${message}`);
     }

diff --git a/packages/react-renderer-demo/package.json b/packages/react-renderer-demo/package.json
@@ -31,11 +31,16 @@
         "@data-driven-forms/form-builder": "0.0.12-rc1",
         "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
         "@material-ui/core": "^4.11.0",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/styles": "^4.10.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
+        "@mui/icons-material": "^5.0.3",
+        "@mui/material": "^5.0.3",
+        "@mui/styles": "^5.0.1",
         "@next/bundle-analyzer": "^11.1.2",
         "@next/mdx": "^11.1.2",
         "@stackblitz/sdk": "^1.5.2",

diff --git a/packages/react-renderer-demo/scripts/generate-component-examples.js b/packages/react-renderer-demo/scripts/generate-component-examples.js
@@ -9,25 +9,20 @@ const availableMappers = [
   { title: 'PF4', mapper: 'pf4' },
   { title: 'BJS', mapper: 'blueprint' },
   { title: 'SUIR', mapper: 'suir' },
-  { title: 'ANT', mapper: 'ant' }
+  { title: 'ANT', mapper: 'ant' },
 ];
 
 const targetDirectory = path.resolve(__dirname, '../doc-components');
 
 const mdSources = availableMappers.reduce(
   (acc, curr) => ({
     ...acc,
-    [curr.mapper]: glob.sync(path.resolve(__dirname, `../doc-components/examples-texts/${curr.mapper}/*.md`)).map((path) => path.split('/').pop())
+    [curr.mapper]: glob.sync(path.resolve(__dirname, `../doc-components/examples-texts/${curr.mapper}/*.md`)).map((path) => path.split('/').pop()),
   }),
   {}
 );
 
-const filesToGenerate = glob.sync(path.resolve(__dirname, '../pages/component-example/*.js')).map((path) =>
-  path
-    .split('/')
-    .pop()
-    .replace('.js', '')
-);
+const filesToGenerate = glob.sync(path.resolve(__dirname, '../pages/component-example/*.js')).map((path) => path.split('/').pop().replace('.js', ''));
 
 const fileTemplate = `import React from 'react';
 import PropTypes from 'prop-types';

diff --git a/packages/react-renderer-demo/src/babel.config.js b/packages/react-renderer-demo/src/babel.config.js
@@ -1,16 +1,16 @@
 const muiTransformPlugin = [
   'transform-imports',
   {
-    '@material-ui/core': {
-      transform: (importName) => `@material-ui/core/${importName}`,
+    '@mui/material': {
+      transform: (importName) => `@mui/material/${importName}`,
       preventFullImport: false,
-      skipDefaultConversion: false
-    }
+      skipDefaultConversion: false,
+    },
   },
-  'MUI-CJS'
+  'MUI-CJS',
 ];
 
 module.exports = {
   presets: [['next/babel']],
-  plugins: [muiTransformPlugin]
+  plugins: [muiTransformPlugin],
 };
diff --git a/packages/react-renderer-demo/src/components/code-editor/index.js b/packages/react-renderer-demo/src/components/code-editor/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import { styled } from '@mui/material/styles';
 import Highlight, { defaultProps } from 'prism-react-renderer/';
 import ghTheme from 'prism-react-renderer/themes/github';
 import vsTheme from 'prism-react-renderer/themes/vsDark';
 import tranformImports from './transform-imports';
 import clsx from 'clsx';
 
-const useStyles = makeStyles({
-  pre: {
+const StyledPre = styled('pre')({
+  '&.pre': {
     maxWidth: '100vw',
     textAlign: 'left',
     margin: '1em 0',
@@ -21,32 +21,27 @@ const useStyles = makeStyles({
   },
 });
 
-const Pre = ({ children, ...props }) => {
-  const classes = useStyles();
-  return (
-    <pre {...props} className={classes.pre}>
-      {children}
-    </pre>
-  );
-};
+const Pre = ({ children, ...props }) => (
+  <StyledPre {...props} className={'pre'}>
+    {children}
+  </StyledPre>
+);
 
 Pre.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
 };
 
-const useStylesCode = makeStyles((theme) => ({
-  wrapper: {
+const Root = styled('div')(({ theme }) => ({
+  '&.wrapper': {
     position: 'relative',
     maxWidth: '100%',
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       maxWidth: (props) => (props.inExample ? '100%' : 'calc(100vw - 64px)'),
     },
   },
 }));
 
 const CodeEditor = ({ value, children, className, inExample, editorClassname, keepLastLine }) => {
-  const classes = useStylesCode({ inExample });
-
   const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
   let content = value || children || '';
 
@@ -64,7 +59,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
   content = keepLastLine ? content : content.substring(0, content.length - 1);
 
   return (
-    <div className={clsx(classes.wrapper, editorClassname)}>
+    <Root className={clsx('wrapper', editorClassname)}>
       <Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <Pre className={className} style={style}>
@@ -80,7 +75,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
           </Pre>
         )}
       </Highlight>
-    </div>
+    </Root>
   );
 };
 

diff --git a/packages/react-renderer-demo/src/components/code-example.js b/packages/react-renderer-demo/src/components/code-example.js
@@ -1,41 +1,41 @@
 /* eslint-disable react/prop-types */
 import React, { Fragment, useEffect, useState, useRef } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import Box from '@material-ui/core/Box';
-import CodeIcon from '@material-ui/icons/Code';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+import CodeIcon from '@mui/icons-material/Code';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
 import PropTypes from 'prop-types';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Paper from '@material-ui/core/Paper';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Paper from '@mui/material/Paper';
 import clsx from 'clsx';
-import grey from '@material-ui/core/colors/grey';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/material/IconButton';
 import { getParameters } from 'codesandbox/lib/api/define';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-
 import GhIcon from './common/gh-svg-icon';
+
 import CodesandboxIcon from './common/code-sandbox-svg-icon';
 import CodeEditor from './code-editor';
 import { headerToId } from '../helpers/list-of-contents';
 import ShareButton from './mdx/share-button';
+import { grey } from '@mui/material/colors';
 
-const useHeadingStyles = makeStyles((theme) => ({
-  anchor: {
+const HeadingRoot = styled('div')(({ theme }) => ({
+  '& .anchor': {
     textDecoration: 'none',
     color: 'inherit',
     fontWeight: 'inherit',
   },
-  wrapper: {
+  '&.wrapper': {
     flexGrow: 1,
     display: 'flex',
   },
-  heading: {
+  '& .heading': {
     paddingTop: 4,
     fontSize: theme.typography.pxToRem(20),
     fontWeight: theme.typography.fontWeightRegular,
@@ -52,44 +52,44 @@ const useHeadingStyles = makeStyles((theme) => ({
 
 export const Heading = ({ level, children, component }) => {
   const router = useRouter();
-  const classes = useHeadingStyles();
   const id = headerToId(children);
   const path = `${router.asPath}#${id}`;
   return (
-    <div id={id} className={classes.wrapper} data-scroll="true">
-      <Typography id={`heading-${id}`} className={classes.heading} variant={`h${level}`} component={component}>
-        <a href={path} className={classes.anchor} data-mdlink="md-heading">
+    <HeadingRoot id={id} className={'wrapper'} data-scroll="true">
+      <Typography id={`heading-${id}`} className={'heading'} variant={`h${level}`} component={component}>
+        <a href={path} className={'anchor'} data-mdlink="md-heading">
           {children}
           <ShareButton path={path} />
         </a>
       </Typography>
-    </div>
+    </HeadingRoot>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    [theme.breakpoints.down('sm')]: {
+const ExampleRoot = styled(Grid)(({ theme }) => ({
+  '&.container': {
+    [theme.breakpoints.down('md')]: {
       maxWidth: 'calc(100vw - 64px)',
     },
   },
-  codeWrapper: {
+  '& .codeWrapper': {
     background: '#1D1F21',
     paddingTop: 16,
     paddingBottom: 16,
     borderRadius: 4,
   },
-  componentPanel: {
+  '& .componentPanel': {
     padding: 16,
   },
-  accordion: {
+  '& .accordion': {
     border: 'none',
     boxShadow: 'none',
     background: 'none',
     padding: 0,
   },
-  accordionSummary: {
+  '& .accordionSummary': {
     padding: 0,
+    width: '100%',
   },
 }));
 
@@ -134,8 +134,8 @@ const getPayload = (code, sourceFiles = {}) =>
           dependencies: {
             '@data-driven-forms/mui-component-mapper': 'latest',
             '@data-driven-forms/react-form-renderer': 'latest',
-            '@material-ui/core': 'latest',
-            '@material-ui/icons': 'latest',
+            '@mui/material': 'latest',
+            '@mui/icons-material': 'latest',
             react: '16.12.0',
             'react-dom': '16.12.0',
             'react-scripts': '3.0.1',
@@ -179,17 +179,16 @@ const CodeExample = ({ source, mode }) => {
       setCodeSource(file.default);
     });
   }, [source]);
-  const classes = useStyles();
   if (mode === 'preview') {
     return (
-      <Grid container spacing={0} className={clsx('DocRawComponent', classes.container)}>
+      <ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
         <Grid item xs={12}>
-          <Accordion className={classes.accordion}>
+          <Accordion className={'accordion'}>
             <AccordionSummary
-              className={classes.accordionSummary}
+              className={'accordionSummary'}
               expandIcon={
                 <Tooltip title="Expand code example">
-                  <IconButton>
+                  <IconButton size="large">
                     <CodeIcon />
                   </IconButton>
                 </Tooltip>
@@ -204,7 +203,7 @@ const CodeExample = ({ source, mode }) => {
                 <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
                   <input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
                   <Tooltip title="Edit in codesandbox">
-                    <IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()}>
+                    <IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()} size="large">
                       <CodesandboxIcon />
                     </IconButton>
                   </Tooltip>
@@ -216,31 +215,31 @@ const CodeExample = ({ source, mode }) => {
                   onClick={(event) => event.stopPropagation()}
                 >
                   <Tooltip title="View source on github">
-                    <IconButton>
+                    <IconButton size="large">
                       <GhIcon style={{ color: grey[700] }} />
                     </IconButton>
                   </Tooltip>
                 </Link>
               </Box>
             </AccordionSummary>
-            <AccordionDetails className={clsx(classes.accordionDetail, classes.codeWrapper)}>
+            <AccordionDetails className={clsx('accordionDetail', 'codeWrapper')}>
               <CodeEditor value={codeSource} inExample />
             </AccordionDetails>
           </Accordion>
         </Grid>
         {Component && (
-          <Grid className={classes.formContainer} item xs={12}>
-            <Paper className={classes.componentPanel}>
+          <Grid className={'formContainer'} item xs={12}>
+            <Paper className={'componentPanel'}>
               <Component />
             </Paper>
           </Grid>
         )}
-      </Grid>
+      </ExampleRoot>
     );
   }
 
   return (
-    <Grid container spacing={0} className="DocRawComponent">
+    <ExampleRoot container spacing={0} className="DocRawComponent">
       <Grid item xs={12}>
         <Box display="flex" justifyContent="flex-end">
           <Link
@@ -253,10 +252,10 @@ const CodeExample = ({ source, mode }) => {
           </Link>
         </Box>
       </Grid>
-      <Grid item xs={12} className={classes.codeWrapper}>
+      <Grid item xs={12} className={'codeWrapper'}>
         <CodeEditor value={codeSource} />
       </Grid>
-    </Grid>
+    </ExampleRoot>
   );
 };