fix(mui): map component prop to element in plain text

Author: rvsia

packages/mui-component-mapper/src/files/plain-text.d.ts

@@ -1,9 +1,10 @@
 import { TypographyProps } from "@material-ui/core";
-import { ReactNode } from "react";
+import { ElementType, ReactNode } from "react";
 
-export interface PlainTextProps extends TypographyProps {
+export interface PlainTextProps extends Omit<TypographyProps, 'component'> {
   label: ReactNode;
   name: string;
+  element?: ElementType;
 }
 
 declare const PlainText: React.ComponentType<PlainTextProps>;

packages/mui-component-mapper/src/files/plain-text.js

@@ -2,21 +2,24 @@ import React from 'react';
 import { Typography } from '@material-ui/core';
 import PropTypes from 'prop-types';
 
-const PlainText = ({ label, name, component, ...props }) =>
+const PlainText = ({ label, name, component, element, ...props }) =>
   typeof label === 'string' ? (
     label.split('\n').map((paragraph, index) => (
-      <Typography key={`${index}-${name}`} {...props}>
+      <Typography key={`${index}-${name}`} {...props} {...(element && { component: element })}>
         {paragraph}
       </Typography>
     ))
   ) : (
-    <Typography {...props}>{label}</Typography>
+    <Typography {...props} {...(element && { component: element })}>
+      {label}
+    </Typography>
   );
 
 PlainText.propTypes = {
   label: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
-  component: PropTypes.any
+  component: PropTypes.any,
+  element: PropTypes.elementType
 };
 
 PlainText.defaultProps = {

packages/react-renderer-demo/src/doc-components/examples-texts/mui/plain-text.md

@@ -0,0 +1,14 @@
+PlainText is just a `Typography` component. It accepts all the [same props](https://material-ui.com/api/typography/).
+
+## component prop
+
+Due to conficting props names, `component` prop is not available, use `element` prop.
+
+```jsx
+{
+    component: 'plain-text',
+    name: 'plain-text',
+    label: 'Header',
+    element: 'h1'
+}
+```