Merge pull request #834 from rvsia/refactorExampleText

Refactor example text

Author: Hyperkid123

packages/react-renderer-demo/src/components/component-example-text.js

@@ -6,6 +6,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Heading } from './mdx/mdx-components';
 import avalableMappers from '../helpers/available-mappers';
 
+import AdditionalComponentText from '@docs/doc-components/additional-component-text';
+import useComponentExample from '@docs/hooks/use-component-example';
+
 const useStyles = makeStyles((theme) => ({
   wrapper: {
     [theme.breakpoints.up('md')]: {
@@ -21,35 +24,32 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const ComponentExampleText = ({ linkText, schema, variants, component, activeMapper, ContentText }) => {
+const ComponentExampleText = ({ linkText, schema, variants }) => {
   const classes = useStyles();
+  const [activeMapper, component] = useComponentExample();
 
   return (
     <div className={classes.wrapper}>
       <div className={classes.content}>
         <Heading level="4" component="h1">
-          {`${avalableMappers.find(({ mapper }) => mapper === activeMapper).title} ${linkText}`}
+          {`${avalableMappers.find(({ mapper }) => mapper === activeMapper)?.title} ${linkText}`}
         </Heading>
         <ComponentExample variants={variants} schema={schema} activeMapper={activeMapper} component={component} />
         <br />
-        <ContentText activeMapper={activeMapper} component={component} />
+        <AdditionalComponentText activeMapper={activeMapper} component={component} />
       </div>
     </div>
   );
 };
 
 ComponentExampleText.propTypes = {
-  component: PropTypes.string.isRequired,
-  activeMapper: PropTypes.oneOf(avalableMappers.map(({ mapper }) => mapper)),
   linkText: PropTypes.string.isRequired,
-  ContentText: PropTypes.elementType,
   schema: PropTypes.object.isRequired,
   variants: PropTypes.arrayOf(PropTypes.object)
 };
 
 ComponentExampleText.defaultProps = {
-  variants: [],
-  ContentText: () => null
+  variants: []
 };
 
 export default ComponentExampleText;

packages/react-renderer-demo/src/doc-components/additional-component-text.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GenericMuiComponent from '../helpers/generic-mui-component';
+
+const Checkbox = ({ activeMapper, component }) => {
+  try {
+    const Text = require(`@docs/doc-components/examples-texts/${activeMapper}/${component}.md`)?.default;
+
+    return <Text />;
+  } catch (err) {
+    return <GenericMuiComponent activeMapper={activeMapper} component={component} />;
+  }
+};
+
+Checkbox.propTypes = {
+  activeMapper: PropTypes.string.isRequired,
+  component: PropTypes.string.isRequired
+};
+
+export default Checkbox;