Merge pull request #1161 from rvsia/finishMUIMigration

Mui finishing touches

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/package.json

@@ -31,9 +31,9 @@
   },
   "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.4",
+    "@mui/material": "^5.0.4",
+    "@mui/styles": "^5.0.1",
     "prop-types": ">=15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -44,7 +44,6 @@
     "@emotion/styled": "^11.3.0",
     "@mui/lab": "^5.0.0-alpha.51",
     "clsx": "^1.0.4",
-    "lodash": "^4.17.21",
-    "moment": "^2.23.0"
+    "lodash": "^4.17.21"
   }
 }

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 "@mui/material";
-import { MuiPickersUtilsProviderProps } from "@material-ui/pickers/MuiPickersUtilsProvider";
-
 interface InternalDatePickerProps extends MuiDatePickerProps {
   FormFieldGridProps: GridProps;
-  MuiPickersUtilsProviderProps: MuiPickersUtilsProviderProps;
   DatePickerProps: MuiDatePickerProps;
 }
 

packages/mui-component-mapper/src/date-picker/date-picker.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MUIDatePicker from '@mui/lab/DatePicker';
+import { DatePicker as MUIDatePicker } from '@mui/lab';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
@@ -63,7 +63,6 @@ DatePicker.propTypes = {
   validateOnMount: PropTypes.bool,
   description: PropTypes.node,
   FormFieldGridProps: PropTypes.object,
-  MuiPickersUtilsProviderProps: PropTypes.object,
   DatePickerProps: PropTypes.object,
 };
 

packages/mui-component-mapper/src/dual-list-select/dual-list-select.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 

packages/mui-component-mapper/src/form-template/form-template.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Grid, Button as MUIButton, Typography } from '@mui/material';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
+import { Alert, AlertTitle } from '@mui/material';
 
 import FormTemplate from '@data-driven-forms/common/form-template';
 import clsx from 'clsx';

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

@@ -9,7 +9,7 @@ import parseInternalValue from '@data-driven-forms/common/select/parse-internal-
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import { TextField, CircularProgress } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import Autocomplete from '@mui/material/Autocomplete';
+import { Autocomplete } from '@mui/material';
 
 /**
  * Returns label of selected option