Mui finishing touches

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

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

@@ -1,16 +1,13 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { TimePickerProps as MuiTimePickerProps } from '@material-ui/pickers';
+import { TimePickerProps as MuiTimePickerProps } from '@mui/lab';
 import { ReactNode } from "react";
-import { MuiPickersUtilsProviderProps } from "@material-ui/pickers/MuiPickersUtilsProvider";
 import { GridProps } from "@mui/material";
 interface InternalTimePickerProps extends MuiTimePickerProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   isRequired?: boolean;
   description?: ReactNode;
   validateOnMount?: boolean;
-  locale?: string;
-  MuiPickersUtilsProviderProps?: MuiPickersUtilsProviderProps;
   FormFieldGridProps?: GridProps;
 }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MUITimePicker from '@mui/lab/TimePicker';
+import { TimePicker as MUITimePicker } from '@mui/lab';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';

packages/react-form-renderer/README.md

@@ -227,7 +227,7 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
 
 - [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/react-form-renderer/demo/index.js

@@ -1,154 +1,19 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { FormRenderer, useFieldApi, componentTypes, useFormApi } from '../src';
-import MuiTextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
+import { FormRenderer } from '../src';
 
-import { Button as MUIButton, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-import FormTemplate from '@data-driven-forms/common/form-template';
-
-const useStyles = makeStyles(() => ({
-  buttonGroup: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    '&>button:not(last-child)': {
-      marginLeft: 8
-    }
-  }
-}));
-
-const Form = ({ children, GridContainerProps, GridProps, ...props }) => (
-  <Grid item xs={12} {...GridProps}>
-    <form noValidate {...props}>
-      <Grid container item spacing={2} xs={12} {...GridContainerProps}>
-        {children}
-      </Grid>
-    </form>
-  </Grid>
-);
-
-Form.propTypes = {
-  children: PropTypes.node,
-  GridProps: PropTypes.object,
-  GridContainerProps: PropTypes.object
-};
-
-const Description = ({ children, GridProps, ...props }) => (
-  <Grid item xs={12} {...GridProps}>
-    <Typography variant="body1" gutterBottom {...props}>
-      {children}
-    </Typography>
-  </Grid>
-);
-
-Description.propTypes = {
-  children: PropTypes.node,
-  GridProps: PropTypes.object
-};
-
-const Title = ({ children, GridProps, ...props }) => (
-  <Grid item xs={12} {...GridProps}>
-    <Typography variant="h3" gutterBottom {...props}>
-      {children}
-    </Typography>
-  </Grid>
-);
-
-Title.propTypes = {
-  children: PropTypes.node,
-  GridProps: PropTypes.object
-};
-
-const ButtonGroup = ({ children, GridProps, ...props }) => {
-  const classes = useStyles();
-  return (
-    <Grid item xs={12} {...GridProps}>
-      <div className={classes.buttonGroup} {...props}>
-        {children}
-      </div>
-    </Grid>
-  );
-};
-
-ButtonGroup.propTypes = {
-  children: PropTypes.node,
-  GridProps: PropTypes.object
-};
-
-const Button = ({ label, variant, children, buttonType, ...props }) => (
-  <MUIButton color={variant} variant="contained" {...props}>
-    {label || children}
-  </MUIButton>
-);
-
-Button.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.node,
-  variant: PropTypes.string,
-  buttonType: PropTypes.string
-};
-
-const MuiFormTemplate = (props) => (
-  <FormTemplate FormWrapper={Form} Button={Button} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
-);
-
-export default MuiFormTemplate;
-
-// eslint-disable-next-line react/prop-types
-const TextField = (props) => {
-  const { input, label, isRequired, WrapperProps } = useFieldApi(props);
-  return (
-    <Grid item xs={12} {...WrapperProps}>
-      <MuiTextField {...input} label={label} required={isRequired} />
-    </Grid>
-  );
-};
-
-const Spy = () => {
-  const formApi = useFormApi();
-  console.log(formApi);
-  return null;
-};
-
-const fields = [{
-  name: 'optionsSpy',
-  component: 'spy',
-}];
-
-for (let index = 0; index < 10; index++) {
-  fields.push({
-    name: `field-${index}`,
-    label: `Text field ${index}`,
-    component: 'text-field',
-    ...(index > 0 ? {
-      condition: {
-        when: `field-${index - 1}`,
-        isEmpty: true
-      }
-    } : {})
-  });
-}
-
-const schema = {
-  fields
-};
+import FormTemplate from './form-template';
+import mapper from './form-fields-mapper';
 
 const App = () => {
-  // const [values, setValues] = useState({});
   return (
     <div style={{ padding: 20 }}>
       <FormRenderer
-        componentMapper={{
-          [componentTypes.TEXT_FIELD]: TextField,
-          spy: Spy
-        }}
+        componentMapper={mapper}
         onSubmit={console.log}
-        FormTemplate={MuiFormTemplate}
-        schema={schema}
+        FormTemplate={FormTemplate}
+        schema={{ fields: [{ component: 'text-field', name: 'text' }] }}
         subscription={{ pristine: false }}
       />
     </div>

packages/react-renderer-demo/babel.config.js

@@ -1,8 +1,8 @@
 const muiTransformPlugin = [
   'transform-imports',
   {
-    '@material-ui/core': {
-      transform: (importName) => `@material-ui/core/${importName}`,
+    '@mui/material': {
+      transform: (importName) => `@mui/material/${importName}`,
       preventFullImport: false,
       skipDefaultConversion: false
     }

packages/react-renderer-demo/package.json

@@ -33,9 +33,6 @@
         "@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.4",

packages/react-renderer-demo/src/doc-components/examples-texts/mui/checkbox-multiple.md

@@ -5,10 +5,10 @@ import Common from './common.md';
 ### Composite props
 |name|type|default|target component|
 |----|----|-------|----------------|
-|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
-|FormControlProps|object|`{}`|[Form Control](https://material-ui.com/api/form-control/#formcontrol-api)|
-|FormGroupProps|object|`{}`|[Form Group](https://material-ui.com/api/form-group/#formgroup-api)|
-|FormControlLabelProps|object|`{}`|[Form Control Label](https://material-ui.com/api/form-control-label/#formcontrollabel-api)|
-|CheckboxProps|object|`{}`|[Checkbox](https://material-ui.com/api/checkbox/#checkbox-api)|
-|FormLabelProps|object|`{}`|[Form label](https://material-ui.com/api/form-label/#formlabel-api)|
-|FormHelperTextProps|object|`{}`|[Form helper text](https://material-ui.com/api/form-helper-text/#formhelpertext-api)|
+|FormFieldGridProps|object|`{}`|[Grid](https://mui.com/api/grid/)|
+|FormControlProps|object|`{}`|[Form Control](https://mui.com/api/form-control/#formcontrol-api)|
+|FormGroupProps|object|`{}`|[Form Group](https://mui.com/api/form-group/#formgroup-api)|
+|FormControlLabelProps|object|`{}`|[Form Control Label](https://mui.com/api/form-control-label/#formcontrollabel-api)|
+|CheckboxProps|object|`{}`|[Checkbox](https://mui.com/api/checkbox/#checkbox-api)|
+|FormLabelProps|object|`{}`|[Form label](https://mui.com/api/form-label/#formlabel-api)|
+|FormHelperTextProps|object|`{}`|[Form helper text](https://mui.com/api/form-helper-text/#formhelpertext-api)|