fix(pro): remove using MUI in common components

Author: rvsia

package-lock.json

@@ -49,6 +49,16 @@ A mapper of components you want to be able to edit.
 import { componentMapper } from '@data-driven-forms/mui-component-mapper';
 ```
 
+## FormTemplate
+
+A FormTemplate to use in the preview box.
+
+**Example**
+
+```tsx
+import { MuiFormTemplate } from '@data-driven-forms/mui-component-mapper';
+```
+
 ## componentInitialProps
 
 An object to set initial props for components. For example, some components required props to be initialized.

packages/editor-pro/README.md

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { componentMapper } from '@data-driven-forms/mui-component-mapper';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
 
 import Editor from '../../src/editor';
 import propertiesFields from '../../src/editor/properties-fields';
@@ -9,6 +10,7 @@ import { AnyObject } from '../../src/types';
 
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import SubForm from '../../src/editor/sub-form';
 
 const componentInitialProps: AnyObject = {
 	'dual-list-select': {
@@ -33,13 +35,13 @@ const fields = propertiesFields({ componentMapper });
 
 const Wrapper = (props) => (
 	<LocalizationProvider dateAdapter={AdapterDateFns}>
-		<Editor {...props} />
+		<Editor {...props} FormTemplate={FormTemplate} fields={fields} componentMapper={{...componentMapper, 'sub-form': SubForm}} componentInitialProps={componentInitialProps} />
 	</LocalizationProvider>
 );
 
 describe('ProEditor', () => {
 	it('can drag a new component', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="text-field"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -49,7 +51,7 @@ describe('ProEditor', () => {
 	});
 
 	it('can open properties editor', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="text-field"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -61,7 +63,7 @@ describe('ProEditor', () => {
 	});
 
 	it('can drag multiple components', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="text-field"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -77,7 +79,7 @@ describe('ProEditor', () => {
 	});
 
 	it('can drag component to top', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="text-field"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -99,7 +101,7 @@ describe('ProEditor', () => {
 	});
 
 	it('move components', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="text-field"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -124,7 +126,7 @@ describe('ProEditor', () => {
 	});
 
 	it('move into nested component', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="sub-form"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
@@ -138,7 +140,7 @@ describe('ProEditor', () => {
 	});
 
 	it('move nested into nested component', () => {
-		cy.mount(<Wrapper fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
+		cy.mount(<Wrapper />);
 
 		cy.get('[data-cy="sub-form"]').trigger('mousedown');
 		cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');

packages/editor-pro/cypress/component/ProEditor.cy.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { componentMapper } from '@data-driven-forms/mui-component-mapper';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+
 import Editor from '../src/editor';
 import propertiesFields from '../src/editor/properties-fields';
+import SubForm from '../src/editor/sub-form';
 
 import { AnyObject } from '../src/types';
 import { componentTypes, Schema, validatorTypes } from '@data-driven-forms/react-form-renderer';
@@ -76,7 +79,15 @@ const initialSchema: Schema = {
 	]
 };
 
-const App = () => <LocalizationProvider dateAdapter={AdapterDateFns}><Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} initialSchema={initialSchema} /></LocalizationProvider>;
+const App = () => <LocalizationProvider dateAdapter={AdapterDateFns}>
+	<Editor
+		fields={fields}
+		componentMapper={{...componentMapper, 'sub-form': SubForm }}
+		componentInitialProps={componentInitialProps}
+		initialSchema={initialSchema}
+		FormTemplate={FormTemplate}
+	/>
+</LocalizationProvider>;
 
 ReactDOM.render(
 	<App />,

packages/editor-pro/public/index.tsx

@@ -4,18 +4,18 @@ import useState from '@data-driven-forms/dnd/use-state';
 import { Pane } from 'evergreen-ui';
 
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
-import { componentMapper } from '@data-driven-forms/mui-component-mapper';
-import { Field, Schema } from '@data-driven-forms/react-form-renderer';
-import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import { Field, Schema, FormTemplateRenderProps, ComponentMapper } from '@data-driven-forms/react-form-renderer';
 import convertToSchema from '@data-driven-forms/editor-core/convert-to-schema';
 import FormCard from './form-card';
 import { AnyObject } from '../types';
 
 export interface EditorContentProps {
     fields: Field[];
+	FormTemplate: React.ComponentType<FormTemplateRenderProps>;
+	componentMapper: ComponentMapper;
 }
 
-const EditorContent: React.FC<EditorContentProps> = ({ fields }) => {
+const EditorContent: React.FC<EditorContentProps> = ({ fields, FormTemplate, componentMapper }) => {
 	const state: AnyObject = useState();
 
 	if (state.mode === 'test') {

packages/editor-pro/src/editor/editor-content.tsx

@@ -7,10 +7,9 @@ import CoreEditor from '@data-driven-forms/editor-core/editor';
 import TopNav from './top-nav';
 import EditorContent from './editor-content';
 import PropertiesCard from './properties-card';
-import { Field, FormRenderer, ComponentMapper, Schema } from '@data-driven-forms/react-form-renderer';
+import { Field, FormRenderer, ComponentMapper, Schema, FormTemplateRenderProps } from '@data-driven-forms/react-form-renderer';
 import ContainerWrapper from './container-wrapper';
 import ComponentWrapper from './component-wrapper';
-import SubForm from './sub-form';
 import Code from './code';
 import { AnyObject } from '../types';
 
@@ -21,9 +20,10 @@ export interface EditorProps {
 	componentInitialProps?: AnyObject;
 	fields: Field[];
 	initialSchema?: Schema;
+	FormTemplate: React.ComponentType<FormTemplateRenderProps>;
 }
 
-const Editor = ({ componentMapper, componentInitialProps, fields, initialSchema }: EditorProps) => {
+const Editor = ({ componentMapper, componentInitialProps, fields, initialSchema, FormTemplate }: EditorProps) => {
 	return (
 		<Pane
 			display="flex"
@@ -61,13 +61,13 @@ const Editor = ({ componentMapper, componentInitialProps, fields, initialSchema
 						<FormRenderer
 							schema={{ fields: [] }}
 							onSubmit={() => undefined}
-							componentMapper={{ ...componentMapper, 'sub-form': SubForm }}
+							componentMapper={componentMapper}
 							FormTemplate={() => <ContainerWrapper isRoot Component={ComponentWrapper} />}
 						/>
 						<Code />
 					</Pane>
 					<PropertiesCard fields={fields} />
-					<EditorContent fields={fields} />
+					<EditorContent fields={fields} componentMapper={componentMapper} FormTemplate={FormTemplate} />
 				</Pane>
 			</CoreEditor>
 		</Pane>