Update mui demo to mui 5

Author: rvsia

packages/mui-component-mapper/demo/index.js

@@ -2,75 +2,73 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
 
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import { componentMapper, FormTemplate } from '../src';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
-import Typography from '@material-ui/core/Typography';
+import { createTheme } from '@mui/material/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import Typography from '@mui/material/Typography';
 import demoSchema from '../../../shared/demoschema';
 import fieldArraySchema from './demo-schemas/field-array-schema';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
 
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import wizardSchema from './demo-schemas/wizard-schema';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 
-const theme = createMuiTheme({
-  typography: {
-    useNextVariants: true
-  }
-});
+const theme = createTheme();
 
 const compositeMapper = {
   ...componentMapper,
   [componentTypes.SWITCH]: {
     component: componentMapper[componentTypes.SWITCH],
     FormControlLabelProps: {
-      labelPlacement: 'end'
-    }
-  }
+      labelPlacement: 'end',
+    },
+  },
 };
 
 const options = [
   {
     label: 'One',
-    value: 1
+    value: 1,
   },
   {
     label: 'Two',
-    value: 2
+    value: 2,
   },
   {
     label: 'Three',
-    value: 3
+    value: 3,
   },
   {
     label: 'Four',
-    value: 4
+    value: 4,
   },
   {
     label: 'Five',
-    value: 5
+    value: 5,
   },
   {
     label: 'Six',
-    value: 6
+    value: 6,
   },
   {
     label: 'Seven',
-    value: 7
+    value: 7,
   },
   {
     label: 'Eight',
-    value: 8
+    value: 8,
   },
   {
     label: 'Nine',
-    value: 9
+    value: 9,
   },
   {
     label: 'Ten',
-    value: 10
-  }
+    value: 10,
+  },
 ];
 
 const loadOptions = (filter) =>
@@ -95,76 +93,80 @@ const selectSchema = {
       isSearchable: true,
       isRequired: true,
       validate: [{ type: validatorTypes.REQUIRED }],
-      closeMenuOnSelect: false
+      closeMenuOnSelect: false,
     },
     {
       name: 'default-select',
       component: componentTypes.SELECT,
       label: 'Default select',
       options,
-      placeholder: 'Select'
+      placeholder: 'Select',
     },
     {
       name: 'disabled-select',
       component: componentTypes.SELECT,
       label: 'Disabled select',
       options,
-      isDisabled: true
+      isDisabled: true,
     },
     {
       name: 'clearable-select',
       component: componentTypes.SELECT,
       label: 'Clearable select',
       options,
-      isClearable: true
+      isClearable: true,
     },
     {
       name: 'multi-select',
       component: componentTypes.SELECT,
       label: 'Multi select',
       options,
-      isMulti: true
+      isMulti: true,
     },
     {
       name: 'searchable-select',
       component: componentTypes.SELECT,
       label: 'Searchable select',
       options,
-      isSearchable: true
+      isSearchable: true,
     },
     {
       name: 'async-select',
       component: componentTypes.SELECT,
       label: 'Async select',
-      loadOptions
-    }
-  ]
+      loadOptions,
+    },
+  ],
 };
 
 const App = () => {
   const [schema, setSchema] = useState(wizardSchema);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Grid container spacing={4} justify="center" alignItems="center">
-        <Grid item xs={12}>
-          <Typography variant="h3">Material UI component mapper</Typography>
-        </Grid>
-        <Grid item xs={12}>
-          <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
-          <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
-          <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
-          <Button onClick={() => setSchema(selectSchema)}>Select</Button>
-        </Grid>
-        <FormRenderer
-          onSubmit={console.log}
-          componentMapper={compositeMapper}
-          FormTemplate={(props) => <FormTemplate {...props} />}
-          schema={schema}
-          onCancel={() => console.log('canceling')}
-        />
-      </Grid>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <Grid container spacing={4} justifyContent="center" alignItems="center">
+            <Grid item xs={12}>
+              <Typography variant="h3">Material UI component mapper</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
+              <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
+              <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
+              <Button onClick={() => setSchema(selectSchema)}>Select</Button>
+            </Grid>
+            <FormRenderer
+              onSubmit={console.log}
+              componentMapper={compositeMapper}
+              FormTemplate={(props) => <FormTemplate {...props} />}
+              schema={schema}
+              onCancel={() => console.log('canceling')}
+            />
+          </Grid>
+        </LocalizationProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 };