Merge pull request #831 from rvsia/refactorComponentExamplePage

Refactor component example component

Author: Hyperkid123

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

@@ -19,15 +19,26 @@ import Box from '@material-ui/core/Box';
 import Link from 'next/link';
 import clsx from 'clsx';
 
-import { muiCode, muiWizardCode, muiHtml, muiDependencies } from '../stackblitz-templates/mui-templates';
-import { pf4Code, pf4WizardCode, pf4Html, pf4Dependencies } from '../stackblitz-templates/pf4-templates';
-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 { antCode, antWizardCode, antHtml, antDependencies } from '../stackblitz-templates/ant-templates';
-import { carbonCode, carbonWizardCode, carbonHtml, carbonDependencies } from '../stackblitz-templates/carbon-templates';
+import * as mui from '../stackblitz-templates/mui-templates';
+import * as pf4 from '../stackblitz-templates/pf4-templates';
+import * as pf3 from '../stackblitz-templates/pf3-templates';
+import * as blueprint from '../stackblitz-templates/blueprint-templates';
+import * as suir from '../stackblitz-templates/suir-template';
+import * as ant from '../stackblitz-templates/ant-templates';
+import * as carbon from '../stackblitz-templates/carbon-templates';
+
 import avalableMappers from '../helpers/available-mappers';
 
+const metadata = {
+  mui,
+  pf4,
+  pf3,
+  blueprint,
+  suir,
+  ant,
+  carbon
+};
+
 const project = {
   settings: {
     compile: {
@@ -102,80 +113,19 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const blitzFiles = {
-  mui: {
-    'index.html': muiHtml,
-    'index.js': muiCode
-  },
-  pf4: {
-    'index.html': pf4Html,
-    'index.js': pf4Code
-  },
-  pf3: {
-    'index.html': pf3Html,
-    'index.js': pf3Code
-  },
-  blueprint: {
-    'index.html': blueprintHtml,
-    'index.js': blueprintCode
-  },
-  suir: {
-    'index.html': suirHtml,
-    'index.js': suirCode
-  },
-  ant: {
-    'index.html': antHtml,
-    'index.js': antCode
-  },
-  carbon: {
-    'index.html': carbonHtml,
-    'index.js': carbonCode
-  }
-};
-
-const blitzWizards = {
-  mui: muiWizardCode,
-  pf4: pf4WizardCode,
-  pf3: pf3WizardCode,
-  blueprint: blueprintWizardCode,
-  suir: suirWizardCode,
-  ant: antWizardCode,
-  carbon: carbonWizardCode
-};
-
-const blitzDependencies = {
-  mui: muiDependencies,
-  pf4: pf4Dependencies,
-  pf3: pf3Dependencies,
-  blueprint: blueprintDependencies,
-  suir: suirDependencies,
-  ant: antDependencies,
-  carbon: carbonDependencies
-};
-
-const mapperTab = {
-  mui: 0,
-  pf4: 1,
-  pf3: 2,
-  blueprint: 3,
-  suir: 4,
-  ant: 5,
-  carbon: 6
-};
-
 const ComponentExample = ({ variants, schema, activeMapper, component }) => {
-  const activeTab = mapperTab[activeMapper];
   const { pathname, push } = useRouter();
   const classes = useStyles();
   useEffect(() => {
     sdk.embedProject(
       'code-target',
       {
         ...project,
-        dependencies: blitzDependencies[activeMapper],
+        dependencies: metadata[activeMapper].dependencies,
         files: {
-          ...blitzFiles[activeMapper],
-          ...(component === 'wizard' && { 'index.js': blitzWizards[activeMapper] }),
+          'index.html': metadata[activeMapper].html,
+          'index.js': metadata[activeMapper].code,
+          ...(component === 'wizard' && { 'index.js': metadata[activeMapper].wizardCode }),
           'schema.js': `export default ${JSON.stringify(schema, null, 2)};`
         }
       },
@@ -184,10 +134,10 @@ const ComponentExample = ({ variants, schema, activeMapper, component }) => {
   }, [activeMapper, schema]);
 
   const renderMapperTabs = () =>
-    avalableMappers.map(({ title, mapper }, index) => (
+    avalableMappers.map(({ title, mapper }) => (
       <Tab
         key={mapper}
-        value={index}
+        value={mapper}
         onClick={() => push(`${pathname}?mapper=${mapper}`)}
         className={clsx(classes.tab, { active: activeMapper === mapper })}
         label={
@@ -228,7 +178,7 @@ const ComponentExample = ({ variants, schema, activeMapper, component }) => {
       <Box display="flex" className={classes.editorContainer}>
         <div className={classes.smTabDown}>
           <Tabs
-            value={activeTab}
+            value={activeMapper}
             orientation="horizontal"
             variant="fullWidth"
             classes={{
@@ -240,7 +190,7 @@ const ComponentExample = ({ variants, schema, activeMapper, component }) => {
         </div>
         <div className={classes.smTabUp}>
           <Tabs
-            value={activeTab}
+            value={activeMapper}
             orientation="vertical"
             variant="scrollable"
             classes={{

packages/react-renderer-demo/src/stackblitz-templates/ant-templates.js

@@ -1,12 +1,12 @@
-export const antHtml = `
+export const html = `
 <html>
   <body>
     <div id="root"></div>
   </body>
 </html>
 `;
 
-export const antCode = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/ant-component-mapper/dist/cjs/form-template';
@@ -32,7 +32,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const antWizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import AntFormTemplate from '@data-driven-forms/ant-component-mapper/dist/cjs/form-template';
@@ -60,7 +60,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const antDependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/blueprint-templates.js

@@ -1,4 +1,4 @@
-export const blueprintHtml = `
+export const html = `
 <html>
   <head>
     <!-- Style dependencies -->
@@ -14,7 +14,7 @@ export const blueprintHtml = `
 </html>
 `;
 
-export const blueprintCode = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/blueprint-component-mapper/dist/cjs/form-template';
@@ -39,7 +39,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const blueprintWizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import BlueprintFormTemplate from '@data-driven-forms/blueprint-component-mapper/dist/cjs/form-template';
@@ -66,7 +66,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const blueprintDependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/carbon-templates.js

@@ -1,4 +1,4 @@
-export const carbonHtml = `
+export const html = `
 <html>
   <head>
     <!-- Carbon stylesheets -->
@@ -10,7 +10,7 @@ export const carbonHtml = `
 </html>
 `;
 
-export const carbonCode = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/carbon-component-mapper/dist/cjs/form-template';
@@ -35,7 +35,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const carbonWizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import CarbonFormTemplate from '@data-driven-forms/carbon-component-mapper/dist/cjs/form-template';
@@ -62,7 +62,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const carbonDependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/mui-templates.js

@@ -1,4 +1,4 @@
-export const muiHtml = `
+export const html = `
 <html>
   <head>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
@@ -9,7 +9,7 @@ export const muiHtml = `
 </html>
 `;
 
-export const muiCode = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
@@ -34,7 +34,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const muiWizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import MuiFormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
@@ -61,7 +61,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const muiDependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/pf3-templates.js

@@ -1,4 +1,4 @@
-export const pf3Html = `
+export const html = `
 <html>
   <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.59.5/css/patternfly.min.css" integrity="sha256-rLJV3jlFRU38RbS+z4Ee+xgtP71nt4Tg+d1OTGmnJkw=" crossorigin="anonymous" />
@@ -10,7 +10,7 @@ export const pf3Html = `
 </html>
 `;
 
-export const pf3Code = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/pf3-component-mapper/dist/cjs/form-template';
@@ -37,7 +37,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const pf3WizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import Pf3FormTemplate from '@data-driven-forms/pf3-component-mapper/dist/cjs/form-template';
@@ -64,7 +64,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const pf3Dependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/pf4-templates.js

@@ -1,4 +1,4 @@
-export const pf4Html = `
+export const html = `
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/[email protected]/patternfly-base.css"/>
@@ -10,7 +10,7 @@ export const pf4Html = `
 </html>
 `;
 
-export const pf4Code = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
@@ -35,7 +35,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const pf4WizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import Pf4FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
@@ -62,7 +62,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const pf4Dependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',

packages/react-renderer-demo/src/stackblitz-templates/suir-template.js

@@ -1,4 +1,4 @@
-export const suirHtml = `
+export const html = `
 <html>
   <head>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
@@ -9,7 +9,7 @@ export const suirHtml = `
 </html>
 `;
 
-export const suirCode = `import React, { Component } from 'react';
+export const code = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import FormTemplate from '@data-driven-forms/suir-component-mapper/dist/cjs/form-template';
@@ -34,7 +34,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const suirWizardCode = `import React, { Component } from 'react';
+export const wizardCode = `import React, { Component } from 'react';
 import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
 import SuirFormTemplate from '@data-driven-forms/suir-component-mapper/dist/cjs/form-template';
@@ -61,7 +61,7 @@ class App extends Component {
 
 render(<App />, document.getElementById('root'));`;
 
-export const suirDependencies = {
+export const dependencies = {
   react: '^16.12.0',
   'react-dom': '^16.12.0',
   '@data-driven-forms/react-form-renderer': 'latest',