Use generated component examples texts

Author: Hyperkid123

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

@@ -2,38 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ComponentExample from '@docs/components/component-example';
 import { Heading } from './mdx/mdx-components';
+import avalableMappers from '../helpers/available-mappers';
 
-const ComponentExampleText = ({ component, activeMapper, baseStructure }) => {
-  return (
-    <React.Fragment>
-      <Heading level="4" component="h1">
-        {baseStructure.linkText}
-      </Heading>
-      <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={activeMapper} component={component} />
+const ComponentExampleText = ({ linkText, schema, variants, component, activeMapper, ContentText }) => (
+  <React.Fragment>
+    <Heading level="4" component="h1">
+      {linkText}
+    </Heading>
+    <ComponentExample variants={variants} schema={schema} activeMapper={activeMapper} component={component} />
+    {avalableMappers.map(({ mapper, title }) => (
+      <div key={mapper} hidden={activeMapper !== mapper}>
+        <Heading level="5" component="h2">{`${title} ${linkText}`}</Heading>
+        <ContentText activeMapper={activeMapper} component={component} />
       </div>
-      <div hidden={activeMapper !== 'pf3'}>
-        <Heading level="5" component="h2">{`PF3 ${baseStructure.linkText}`}</Heading>
-        <baseStructure.ContentText activeMapper={'pf3'} component={component} />
-      </div>
-      <div hidden={activeMapper !== 'pf4'}>
-        <Heading level="5" component="h2">{`PF4 ${baseStructure.linkText}`}</Heading>
-        <baseStructure.ContentText activeMapper={'pf4'} component={component} />
-      </div>
-      <div hidden={activeMapper !== 'blueprint'}>
-        <Heading level="5" component="h2">{`Blueprint ${baseStructure.linkText}`}</Heading>
-        <baseStructure.ContentText activeMapper={'blueprint'} component={component} />
-      </div>
-    </React.Fragment>
-  );
-};
+    ))}
+  </React.Fragment>
+);
 
 ComponentExampleText.propTypes = {
   component: PropTypes.string.isRequired,
-  activeMapper: PropTypes.oneOf(['mui', 'pf4', 'pf3']),
-  baseStructure: PropTypes.shape({ linkText: PropTypes.string.isRequired }).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
 };
 
 export default ComponentExampleText;

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

@@ -24,6 +24,7 @@ import { pf4Code, pf4WizardCode, pf4Html, pf4Dependencies } from '../stackblitz-
 import { pf3Code, pf3WizardCode, pf3Html, pf3Dependencies } from '../stackblitz-templates/pf3-templates';
 import { blueprintCode, blueprintWizardCode, blueprintHtml, blueprintDependencies } from '../stackblitz-templates/blueprint-templates';
 import { suirCode, suirWizardCode, suirHtml, suirDependencies } from '../stackblitz-templates/suir-template';
+import avalableMappers from '../helpers/available-mappers';
 
 const project = {
   settings: {
@@ -146,15 +147,7 @@ const mapperTab = {
   suir: 4
 };
 
-const tabs = [
-  { title: 'MUI', mapper: 'mui' },
-  { title: 'PF4', mapper: 'pf4' },
-  { title: 'PF3', mapper: 'pf3' },
-  { title: 'BJS', mapper: 'blueprint' },
-  { title: 'SUIR', mapper: 'suir' }
-];
-
-const ComponentExample = ({ baseStructure, activeMapper, component }) => {
+const ComponentExample = ({ variants, schema, activeMapper, component }) => {
   const activeTab = mapperTab[activeMapper];
   const { pathname, push } = useRouter();
   const classes = useStyles();
@@ -167,15 +160,15 @@ const ComponentExample = ({ baseStructure, activeMapper, component }) => {
         files: {
           ...blitzFiles[activeMapper],
           ...(component === 'wizard' && { 'index.js': blitzWizards[activeMapper] }),
-          'schema.js': `export default ${JSON.stringify(baseStructure.value, null, 2)};`
+          'schema.js': `export default ${JSON.stringify(schema, null, 2)};`
         }
       },
       { height: '100%', hideNavigation: true, forceEmbedLayout: true, openFile: 'schema.js' }
     );
-  }, [activeMapper, baseStructure.value]);
+  }, [activeMapper, schema]);
 
   const renderMapperTabs = () =>
-    tabs.map(({ title, mapper }, index) => (
+    avalableMappers.map(({ title, mapper }, index) => (
       <Tab
         key={mapper}
         value={index}
@@ -205,7 +198,7 @@ const ComponentExample = ({ baseStructure, activeMapper, component }) => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {baseStructure.variants.map(({ name, type, required }) => (
+              {variants.map(({ name, type, required }) => (
                 <TableRow key={name}>
                   <TableCell>{name}</TableCell>
                   <TableCell>{`${type}`}</TableCell>
@@ -255,10 +248,14 @@ const ComponentExample = ({ baseStructure, activeMapper, component }) => {
 ComponentExample.propTypes = {
   component: PropTypes.string.isRequired,
   activeMapper: PropTypes.string.isRequired,
-  baseStructure: PropTypes.shape({
-    variants: PropTypes.array.isRequired,
-    value: PropTypes.object.isRequired
-  }).isRequired
+  schema: PropTypes.object.isRequired,
+  variants: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      required: PropTypes.bool
+    })
+  ).isRequired
 };
 
 export default ComponentExample;