Merge pull request #1175 from data-driven-forms/mui-migration-5

Release a new MUI 5 mapper

Author: Hyperkid123

README.md

@@ -16,7 +16,7 @@ Data Driven Forms is a React library used for rendering and managing forms with
 
 :tada: Features :tada:
 - **Easily readable schema**, you don't need to know any HTML or JS to be able to write your own form schemas!
-- You can use your **own components** or use one of our **provided mappers**: [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/), [Material-UI](https://material-ui.com/), [Ant Design](https://ant.design/)! and more, see below!)
+- You can use your **own components** or use one of our **provided mappers**: [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/), [Material-UI](https://mui.com/), [Ant Design](https://ant.design/)! and more, see below!)
 - **Form state manager** out-of-the-box (including error states!)
 - Fully **customizable** (you can use your own buttons, actions, etc.)!
 - **Conditional** fields!
@@ -365,7 +365,7 @@ We are trying to avoid breaking changes. Please, open an issue and discuss the i
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
 - [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)
-- [Material-UI documentation](https://material-ui.com/)
+- [Material-UI documentation](https://mui.com/)
 - [Ant Design documentation](https://ant.design/)
 - [Semantic UI React](https://react.semantic-ui.com/)
 - [BlueprintJS](https://blueprintjs.com/)

packages/ant-component-mapper/README.md

@@ -101,7 +101,7 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 ### Useful links
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
-- [Material-UI documentation](https://material-ui.com/)
+- [Material-UI documentation](https://mui.com/)
 - NPM
   - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
   - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)

packages/common/babel.config.js

@@ -72,13 +72,13 @@ const createSuirCJSTransform = (env = 'commonjs') => [
 const createMuiTransform = (env) => [
   'transform-imports',
   {
-    '@material-ui/lab': {
-      transform: (importName) => (env ? `@material-ui/lab/${env}/${importName}` : `@material-ui/lab/${importName}`),
+    '@mui/lab': {
+      transform: (importName) => (env ? `@mui/lab/${env}/${importName}` : `@mui/lab/${importName}`),
       preventFullImport: false,
       skipDefaultConversion: false
     },
-    '@material-ui/core': {
-      transform: (importName) => (env ? `@material-ui/core/${env}/${importName}` : `@material-ui/core/${importName}`),
+    '@mui/material': {
+      transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`),
       preventFullImport: false,
       skipDefaultConversion: false
     }
@@ -294,7 +294,7 @@ module.exports = {
       presets: [['@babel/preset-env', { modules: 'commonjs' }]],
       plugins: [
         createSuirCJSTransform('commonjs'),
-        createMuiTransform(),
+        createMuiTransform('node'),
         createPfReactTransform('js'),
         createBluePrintTransform('cjs'),
         createAntTransform('cjs'),
@@ -306,7 +306,7 @@ module.exports = {
       presets: [['@babel/preset-env', { modules: false }]],
       plugins: [
         createSuirCJSTransform('es'),
-        createMuiTransform('esm'),
+        createMuiTransform(),
         createPfReactTransform('esm'),
         createBluePrintTransform('esm'),
         createAntTransform('esm'),

packages/mui-component-mapper/README.md

@@ -8,7 +8,7 @@ Material-UI component mapper for [Data Driven Forms](https://github.com/data-dri
 
 :book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
 
-[Material-IU docs](https://material-ui.com/)
+[Material-IU docs](https://mui.com/)
 
 
 **Table of Contents**
@@ -102,7 +102,7 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 ### Useful links
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
-- [Material-UI documentation](https://material-ui.com/)
+- [Material-UI documentation](https://mui.com/)
 - NPM
   - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
   - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)

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>
   );
 };
 

packages/mui-component-mapper/package.json

@@ -25,28 +25,26 @@
     "directory": "packages/mui-component-mapper"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.10.0"
+    "@mui/icons-material": "^5.0.5",
+    "@mui/material": "^5.0.6",
+    "@mui/styles": "^5.0.2"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": ">=3.2.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.9.14",
+    "@mui/icons-material": "^5.0.5",
+    "@mui/material": "^5.0.6",
+    "@mui/styles": "^5.0.2",
     "prop-types": ">=15.7.2",
-    "react": "^16.13.1 || ^17.0.2",
-    "react-dom": "^16.13.1 || ^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",
-    "@date-io/date-fns": "^1.0.1",
-    "@date-io/moment": "^1.0.1",
-    "@material-ui/pickers": "^3.2.10",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/lab": "^5.0.0-alpha.53",
     "clsx": "^1.0.4",
-    "date-fns": "^1.30.1",
-    "lodash": "^4.17.21",
-    "moment": "^2.23.0",
-    "@material-ui/lab": "^4.0.0-alpha.53"
+    "date-fns": "^2.16.1",
+    "lodash": "^4.17.21"
   }
 }

packages/mui-component-mapper/src/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from '@data-driven-forms/react-form-renderer';
-import { CheckboxProps as MuiCheckboxProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { CheckboxProps as MuiCheckboxProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 
 interface InternalCheckboxProps extends MuiCheckboxProps {
   FormFieldGridProps?: GridProps;

packages/mui-component-mapper/src/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox as MUICheckbox, FormControl, FormControlLabel, FormHelperText, FormGroup, FormLabel } from '@material-ui/core';
+import { Checkbox as MUICheckbox, FormControl, FormControlLabel, FormHelperText, FormGroup, FormLabel } from '@mui/material';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';

packages/mui-component-mapper/src/date-picker/date-picker.d.ts

@@ -1,11 +1,8 @@
-import { DatePickerProps as MuiDatePickerProps } from "@material-ui/pickers/DatePicker";
+import { DatePickerProps as MuiDatePickerProps } from "@mui/lab/DatePicker";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { GridProps } from "@material-ui/core";
-import { MuiPickersUtilsProviderProps } from "@material-ui/pickers/MuiPickersUtilsProvider";
-
+import { GridProps } from "@mui/material";
 interface InternalDatePickerProps extends MuiDatePickerProps {
   FormFieldGridProps: GridProps;
-  MuiPickersUtilsProviderProps: MuiPickersUtilsProviderProps;
   DatePickerProps: MuiDatePickerProps;
 }