Make demo not crash after V2 progress.

Author: Hyperkid123

packages/react-form-renderer/src/tests/form-renderer/render-form.test.js

@@ -1185,7 +1185,7 @@ describe('renderForm function', () => {
     });
   });
 
-  it.only('should use actionMapper', () => {
+  it('should use actionMapper', () => {
     const id = '23asd86';
 
     const intl = jest.fn().mockImplementation((id) => `translated ${id}`);

packages/react-renderer-demo/src/app/pages/live-editor.js

@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import FormRenderer from '@data-driven-forms/react-form-renderer';
 import { componentTypes as components, validatorTypes as validators, defaultSchemaValidator } from '@data-driven-forms/react-form-renderer';
-import { formTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
 
 import dynamic from 'next/dynamic';
 const CodeEditor = dynamic(import('@docs/components/code-editor'), {
@@ -518,7 +518,7 @@ const LiveEditor = () => {
               <div className="pf4">
                 <FormRenderer
                   componentMapper={componentMapper}
-                  formTemplate={formTemplate()}
+                  FormTemplate={FormTemplate}
                   schema={parsedSchema}
                   onSubmit={console.log}
                   onCancel={() => console.log('Cancel clicked')}

packages/react-renderer-demo/src/app/pages/renderer/form-controls.md

@@ -6,6 +6,8 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
+# Obsolete page
+
 # Custom form buttons
 
 If you need completely customized buttons, you can pass a component to form renderer via `renderFormButtons` prop.

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

@@ -147,21 +147,21 @@ class ComponentExample extends Component {
           [componentTypes.WIZARD]: MuiWizard,
           summary: Summary
         },
-        formTemplate: props.mappers.mui.formTemplate
+        FormTemplate: props.mappers.mui.FormTemplate
       },
       pf3: {
         componentMapper: {
           ...props.mappers.pf3.componentMapper,
           summary: Summary
         },
-        formTemplate: props.mappers.pf3.formTemplate
+        FormTemplate: props.mappers.pf3.FormTemplate
       },
       pf4: {
         componentMapper: {
           ...props.mappers.pf4.componentMapper,
           summary: Summary
         },
-        formTemplate: props.mappers.pf4.formTemplate
+        FormTemplate: props.mappers.pf4.FormTemplate
       }
     };
   }

packages/react-renderer-demo/src/app/src/doc-components/cleared-value.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
 
 const schema = {
@@ -15,7 +15,7 @@ const schema = {
   }],
 };
 
-const DataTypesExample = () => {
+const ClearedValueExample = () => {
   const [ values, setValues ] = useState({});
   return (
     <div className="pf4">
@@ -24,7 +24,7 @@ const DataTypesExample = () => {
           'field-with-initial-value': 'Delete me!',
         }}
         clearedValue={ null }
-        FormTemplate={ formTemplate }
+        FormTemplate={ FormTemplate }
         componentMapper={ componentMapper }
         schema={ schema }
         onSubmit={ console.log }
@@ -39,4 +39,4 @@ const DataTypesExample = () => {
     </div>
   );};
 
-export default DataTypesExample;
+export default ClearedValueExample;

packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js

@@ -101,7 +101,7 @@ const ComponentMapper = () => {
     <div>
       <FormRender
         componentMapper={componentMapper}
-        formTemplate={FormTemplate}
+        FormTemplate={FormTemplate}
         schema={schema}
         onSubmit={(values) => setValues(values)}
         onCancel={() => console.log('cancel action')}

packages/react-renderer-demo/src/app/src/doc-components/custom-buttons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
-import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 import { Button } from '@material-ui/core';
 
 const schema = {
@@ -31,7 +31,7 @@ const asyncSubmit = (values, api) => new Promise(resolve => setTimeout(() => res
 const FormControls = () => (
   <div className="pf4">
     <FormRenderer
-      FormTemplate={ formTemplate }
+      FormTemplate={ FormTemplate }
       componentMapper={ componentMapper }
       schema={ schema }
       onSubmit={ asyncSubmit }

packages/react-renderer-demo/src/app/src/doc-components/field-array/pf4-demo.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import FormRender, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
-import { formTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
 const schema = {
   title: 'PF4 FieldArray',
   fields: [
@@ -78,7 +78,7 @@ const PF4FieldArray = () => {
     <div className="pf4">
       <FormRender
         componentMapper={ componentMapper }
-        FormTemplate={ formTemplate }
+        FormTemplate={ FormTemplate }
         schema={ schema }
         onSubmit={ onSubmit }
         onStateUpdate={ ({ values }) => setValues(values) }

packages/react-renderer-demo/src/app/src/doc-components/initialize-mount.js

@@ -36,6 +36,7 @@ const schema = {
       },
       {
         title: 'Way 1',
+        name: 'way-1',
         stepKey: 'way-1',
         fields: [
           {
@@ -49,6 +50,7 @@ const schema = {
       },
       {
         title: 'Way 2',
+        name: 'way-2',
         stepKey: 'way-2',
         fields: [
           {
@@ -69,7 +71,7 @@ const InitializeOnMountWizardExample = () => {
   return (
     <div className="pf4">
       <FormRenderer
-        FormTemplate={ FormTemplate }
+        FormTemplate={ props => <FormTemplate {...props} showFormControls={false} /> }
         componentMapper={ componentMapper }
         schema={ schema }
         onSubmit={ console.log }

packages/react-renderer-demo/src/app/src/doc-components/validators/async-validator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { formTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
 const mockEndpoint = value => new Promise((resolve, reject) => {
   setTimeout(() => {
     if (value === 'John') {
@@ -31,7 +31,7 @@ const schema = {
 const AsyncValidator = () => (
   <div className="pf4">
     <FormRenderer
-      FormTemplate={ formTemplate }
+      FormTemplate={ FormTemplate }
       componentMapper={ componentMapper }
       schema={ schema }
       onSubmit={ console.log }