Added FormWrapper in FormTemplate

Author: Arun-42

package.json

@@ -43,7 +43,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.10.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-typescript": "^7.9.0",
     "@khala/commit-analyzer-wildcard": "^2.4.1",
     "@khala/npm-release-monorepo": "^2.4.1",
@@ -64,44 +64,31 @@
     "eslint-config-react-app": "^5.2.0",
     "eslint-loader": "^3.0.3",
     "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.4.0",
     "glob": "^7.1.6",
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^7.1.0",
     "jest": "^24.8.0",
-    "lerna": "^3.22.1",
+    "lerna": "^3.13.1",
     "ncp": "^2.0.0",
     "prettier": "^1.19.1",
     "replace-in-file": "^6.0.0",
     "semantic-release": "^16.0.4",
     "source-map-loader": "^0.2.4",
     "strip-ansi": "^6.0.0",
-    "terser-webpack-plugin": "^1.4.4",
+    "terser-webpack-plugin": "^1.3.0",
     "ts-loader": "^7.0.5",
     "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.9.3"
   },
   "release": {
     "monorepo": "./packages",
-    "branches": [
-      "+([0-9])?(.{+([0-9]),x}).x",
-      "master",
-      "next",
-      "next-major",
-      {
-        "name": "beta",
-        "prerelease": true
-      },
-      {
-        "name": "alpha",
-        "prerelease": true
-      }
-    ],
+    "branches": ["+([0-9])?(.{+([0-9]),x}).x", "master", "next", "next-major", {"name": "beta", "prerelease": true}, {"name": "alpha", "prerelease": true}],
     "plugins": [
       "@khala/npm-release-monorepo",
       [

packages/ant-component-mapper/demo/index.js

@@ -18,7 +18,7 @@ const App = () => (
   <div style={style}>
     <FormRenderer
       componentMapper={componentMapper}
-      FormTemplate={(props) => <FormTemplate {...props} />}
+      FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
       schema={demoSchema}
     />

packages/ant-component-mapper/src/common/form-wrapper.js

@@ -5,22 +5,9 @@ import { Form } from 'antd';
 
 const AntForm = ({ label, children, layout, component, invalid, isRequired, help }) => {
   return (
-    <Form layout={layout} component={component}>
-      <Form.Item
-        validateStatus={!invalid ? '' : 'error'}
-        rules={[
-          {
-            required: isRequired,
-            message: 'Required'
-          }
-        ]}
-        help={help}
-        label={label}
-        name={label}
-      >
-        <div>{children}</div>
-      </Form.Item>
-    </Form>
+    <Form.Item validateStatus={!invalid ? '' : 'error'} help={help} label={label} name={label}>
+      <div>{children}</div>
+    </Form.Item>
   );
 };
 

packages/ant-component-mapper/src/files/form-template.js

@@ -1,11 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { Button, Typography } from 'antd';
+import { Button, Typography, Form as AntForm } from 'antd';
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 
 const { Title, Paragraph } = Typography;
 
-const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
+const Form = ({ layout, children, onSubmit, ...props }) => (
+  <AntForm onFinish={onSubmit} layout={layout ? layout : 'vertical'}>
+    {children}
+  </AntForm>
+);
+
 const Description = ({ children }) => (
   <Typography>
     <Paragraph>{children}</Paragraph>
@@ -25,7 +30,15 @@ const ButtonComponent = ({ label, variant, children, buttonType, ...props }) =>
 );
 
 const AntFormTemplate = (props) => (
-  <FormTemplate FormWrapper={Form} Button={ButtonComponent} ButtonGroup={ButtonGroup} Title={TitleComponent} Description={Description} {...props} />
+  <FormTemplate
+    FormWrapper={Form}
+    Button={ButtonComponent}
+    ButtonGroup={ButtonGroup}
+    Title={TitleComponent}
+    Description={Description}
+    formWrapperProps={{ layout: props.layout }}
+    {...props}
+  />
 );
 
 export default AntFormTemplate;

packages/ant-component-mapper/src/files/wizard/wizard-step.js

@@ -2,13 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import WizardStepButtons from './step-buttons';
 
-const style = {
-  minHeight: '250px'
-};
-
 const WizardStep = ({ fields, formOptions, ...rest }) => (
   <Fragment>
-    <div style={style}>{fields.map((item) => formOptions.renderForm([item], formOptions))}</div>
+    <div className="style">{fields.map((item) => formOptions.renderForm([item], formOptions))}</div>
     {/* maybe this button could be in a sperate footer such that the position remains constant  */}
     <WizardStepButtons formOptions={formOptions} {...rest} />
   </Fragment>

packages/ant-component-mapper/src/files/wizard/wizard-step.scss

@@ -0,0 +1,3 @@
+.style {
+  min-height: 250px;
+}