Enable mapper switching of component example in docs.

Hyperkid123 · Hyperkid123 · commit eb6122fe6c68 · 2020-05-07T14:49:50.000+02:00
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js
@@ -1,22 +1,14 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
 import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.CHECKBOX]: MuiCheckbox
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
-      <CheckboxText />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
+      {activeMapper === 'mui' && <CheckboxText />}
     </Fragment>
   );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js
@@ -1,21 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
 import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.CHECKBOX]: MuiCheckbox
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <CheckboxText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js
@@ -1,21 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiDatepicker from '@data-driven-forms/mui-component-mapper/dist/cjs/date-picker';
 import DatePickerText from '@docs/components/mui-definitions/date-picker-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.DATE_PICKER]: MuiDatepicker
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <DatePickerText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js b/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import MuiDualListSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/dual-list-select';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import useComponentExample from '@docs/hooks/use-component-example';
 
-const mappers = {
-  mui: {
-    [componentTypes.DUAL_LIST_SELECT]: MuiDualListSelect
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/field-array.js b/packages/react-renderer-demo/src/app/pages/component-example/field-array.js
@@ -1,18 +1,8 @@
 import React from 'react';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import MuiFieldArray from '@data-driven-forms/mui-component-mapper/dist/cjs/field-array';
-import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-
-const mappers = {
-  mui: {
-    [componentTypes.FIELD_ARRAY]: MuiFieldArray,
-    [componentTypes.TEXT_FIELD]: MuiTextField
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js b/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiPlainText from '@data-driven-forms/mui-component-mapper/dist/cjs/plain-text';
-
-const mappers = {
-  mui: {
-    [componentTypes.PLAIN_TEXT]: MuiPlainText
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.js b/packages/react-renderer-demo/src/app/pages/component-example/radio.js
@@ -1,21 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiRadio from '@data-driven-forms/mui-component-mapper/dist/cjs/radio';
 import RadioText from '@docs/components/mui-definitions/radio-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.RADIO]: MuiRadio
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <RadioText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/select.js b/packages/react-renderer-demo/src/app/pages/component-example/select.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/select';
-
-const mappers = {
-  mui: {
-    [componentTypes.SELECT]: MuiSelect
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/slider.js b/packages/react-renderer-demo/src/app/pages/component-example/slider.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MUISlider from '@data-driven-forms/mui-component-mapper/dist/cjs/slider';
-
-const mappers = {
-  mui: {
-    [componentTypes.SLIDER]: MUISlider
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js b/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js
@@ -1,18 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiSubForm from '@data-driven-forms/mui-component-mapper/dist/cjs/sub-form';
-import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-
-const mappers = {
-  mui: {
-    [componentTypes.SUB_FORM]: MuiSubForm,
-    [componentTypes.TEXT_FIELD]: MuiTextField
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch.js b/packages/react-renderer-demo/src/app/pages/component-example/switch.js
@@ -1,21 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiSwitch from '@data-driven-forms/mui-component-mapper/dist/cjs/switch';
 import SwitchText from '@docs/components/mui-definitions/switch-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.SWITCH]: MuiSwitch
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <SwitchText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.js b/packages/react-renderer-demo/src/app/pages/component-example/tabs.js
@@ -1,23 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiTabs from '@data-driven-forms/mui-component-mapper/dist/cjs/tabs';
-import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
 import TabsText from '@docs/components/mui-definitions/tabs-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.TABS]: MuiTabs,
-    [componentTypes.TEXT_FIELD]: MuiTextField
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <TabsText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/text-field.js b/packages/react-renderer-demo/src/app/pages/component-example/text-field.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-
-const mappers = {
-  mui: {
-    [componentTypes.TEXT_FIELD]: MuiTextField
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/textarea.js b/packages/react-renderer-demo/src/app/pages/component-example/textarea.js
@@ -1,16 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiTextarea from '@data-driven-forms/mui-component-mapper/dist/cjs/textarea';
-
-const mappers = {
-  mui: {
-    [componentTypes.TEXTAREA]: MuiTextarea
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js
@@ -1,21 +1,13 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiTimePicker from '@data-driven-forms/mui-component-mapper/dist/cjs/time-picker';
 import TimePickerText from '@docs/components/mui-definitions/time-picker-text.md';
 
-const mappers = {
-  mui: {
-    [componentTypes.TIME_PICKER]: MuiTimePicker
-  }
-};
-
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
       {activeMapper === 'mui' && <TimePickerText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/wizard.js b/packages/react-renderer-demo/src/app/pages/component-example/wizard.js
@@ -1,29 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '@docs/hooks/use-component-example';
-import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
-import MuiWizard from '@data-driven-forms/mui-component-mapper/dist/cjs/wizard';
-import MuiSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/select';
-import MuiTextarea from '@data-driven-forms/mui-component-mapper/dist/cjs/textarea';
-import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-
-const Summary = ({ title }) => <div>{title}</div>;
-Summary.propTypes = {
-  title: PropTypes.node.isRequired
-};
-
-const mappers = {
-  mui: {
-    [componentTypes.WIZARD]: MuiWizard,
-    [componentTypes.SELECT]: MuiSelect,
-    [componentTypes.TEXTAREA]: MuiTextarea,
-    [componentTypes.TEXT_FIELD]: MuiTextField,
-    summary: Summary
-  }
-};
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
 };
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example-text.js b/packages/react-renderer-demo/src/app/src/components/component-example-text.js
@@ -1,29 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MuiFormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
 import ComponentExample from '@docs/components/component-example';
 import { Heading } from './mdx/mdx-components';
 
-const templates = {
-  mui: MuiFormTemplate
-};
-
-const ComponentExampleText = ({ component, activeMapper, baseStructure, componentMapper }) => {
+const ComponentExampleText = ({ component, activeMapper, baseStructure }) => {
   return (
     <React.Fragment>
       <Heading level="4" component="h1">
         {baseStructure.linkText}
       </Heading>
-      <ComponentExample
-        activeMapper={activeMapper}
-        baseStructure={baseStructure}
-        component={component}
-        componentMapper={componentMapper}
-        FormTemplate={templates[activeMapper]}
-      />
+      <ComponentExample activeMapper={activeMapper} baseStructure={baseStructure} component={component} />
       <div hidden={activeMapper !== 'mui'} className="mui">
         <Heading level="5" component="h2">{`MUI ${baseStructure.linkText}`}</Heading>
-        <baseStructure.ContentText activeMapper={'mui'} component={component} />
+        <baseStructure.ContentText activeMapper={activeMapper} component={component} />
       </div>
     </React.Fragment>
   );
@@ -32,8 +21,7 @@ const ComponentExampleText = ({ component, activeMapper, baseStructure, componen
 ComponentExampleText.propTypes = {
   component: PropTypes.string.isRequired,
   activeMapper: PropTypes.oneOf(['mui', 'pf4', 'pf3']),
-  baseStructure: PropTypes.shape({ linkText: PropTypes.string.isRequired }).isRequired,
-  componentMapper: PropTypes.object.isRequired
+  baseStructure: PropTypes.shape({ linkText: PropTypes.string.isRequired }).isRequired
 };
 
 export default ComponentExampleText;
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example.js b/packages/react-renderer-demo/src/app/src/components/component-example.js
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js b/packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js
diff --git a/packages/react-renderer-demo/src/app/src/stackblitz-templates/mui-templates.js b/packages/react-renderer-demo/src/app/src/stackblitz-templates/mui-templates.js
diff --git a/packages/react-renderer-demo/src/app/src/stackblitz-templates/pf3-templates.js b/packages/react-renderer-demo/src/app/src/stackblitz-templates/pf3-templates.js
diff --git a/packages/react-renderer-demo/src/app/src/stackblitz-templates/pf4-templates.js b/packages/react-renderer-demo/src/app/src/stackblitz-templates/pf4-templates.js
