Added wizard.js

Author: Arun-42

README.md

@@ -15,7 +15,7 @@ Data Driven Forms is a React library used for rendering and managing forms with
 
 :tada: Features :tada:
 - Easily readable schema, you don't need to know any HTML or JS to be able to write your own form schemas!
-- You can use your own components or use one of our provided mappers ([PatternFly 3](https://patternfly-react.surge.sh/patternfly-3/index.html), [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/) or [Material-UI](https://material-ui.com/)!)
+- You can use your own components or use one of our provided mappers ([PatternFly 3](https://patternfly-react.surge.sh/patternfly-3/index.html), [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/), [Material-UI](https://material-ui.com/) or [Ant Design](https://ant.design/)!)
 - Form state managing out-of-the-box (including error states!)
 - Fully customizable (you can use your own buttons, actions, etc.)!
 - Conditional fields!
@@ -36,8 +36,13 @@ Data Driven Forms is a React library used for rendering and managing forms with
   - [Material-UI Mapper](#material-ui-mapper)
   - [PatternFly 3 Mapper](#patternfly-3-mapper)
   - [PatternFly 4 Mapper](#patternfly-4-mapper)
+<<<<<<< HEAD
   - [BlueprintJS Mapper](#blueprintjs-mapper)
   - [Semantic UI Mapper](#semantic-ui-mapper)
+=======
+  - [Material-UI Mapper](#material-ui-mapper)
+  - [Ant Design Mapper](#ant-design-mapper)
+>>>>>>> Added wizard.js
 - [Usage](#usage)
   - [Custom mapper](#custom-mapper)
 - [Basic provided components](#basic-provided-components)
@@ -107,6 +112,7 @@ $ npm install @data-driven-forms/blueprint-component-mapper -S
 $ yarn add @data-driven-forms/blueprint-component-mapper
 ```
 
+<<<<<<< HEAD
 #### [Semantic UI Mapper](https://data-driven-forms.org/mappers/suir-component-mapper)
 
 ```console
@@ -119,6 +125,18 @@ $ yarn add @data-driven-forms/suir-component-mapper
 
 Component libraries in mappers are external dependencies. Make sure to install them in your bundles.
 
+=======
+#### [Ant Design Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
+
+```console
+$ npm install @data-driven-forms/ant-component-mapper -S
+```
+
+```console
+$ yarn add @data-driven-forms/ant-component-mapper
+```
+
+>>>>>>> Added wizard.js
 ### Usage
 
 In order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template.
@@ -215,11 +233,13 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
 - [PatternFly 3 Design documentation](https://www.patternfly.org/v3/)
 - [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)
 - [Material-UI documentation](https://material-ui.com/)
+- [Ant Design documentation](https://ant.design/)
 - NPM
   - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
   - [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)
   - [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)
   - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)
+  - [Ant Design Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
 - Examples of schemas (PatternFly 3)
   - [ManageIQ Form Components](https://github.com/ManageIQ/manageiq-ui-classic/tree/master/app/javascript/components)
 

packages/ant-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -0,0 +1,102 @@
+import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+const wizardSchema = {
+  fields: [
+    {
+      component: componentTypes.WIZARD,
+      name: 'wizzard',
+      buttonLabels: {},
+      title: 'Cokoliv',
+      stepsInfo: [{ title: 'Add a source' }, { title: 'Configure a source' }, { title: 'Summary' }],
+      fields: [
+        {
+          title: 'Get started with adding source',
+          name: 'step-1',
+          nextStep: {
+            when: 'source-type',
+            stepMapper: {
+              aws: 'aws',
+              google: 'google'
+            }
+          },
+          fields: [
+            {
+              component: componentTypes.TEXTAREA,
+              name: 'source-name',
+              type: 'text',
+              label: 'Source name'
+            },
+            {
+              component: componentTypes.SELECT,
+              name: 'source-type',
+              label: 'Source type',
+              isRequired: true,
+              options: [
+                {
+                  label: 'Please Choose'
+                },
+                {
+                  value: 'aws',
+                  label: 'Aws'
+                },
+                {
+                  value: 'google',
+                  label: 'Google'
+                }
+              ],
+              validate: [
+                {
+                  type: validatorTypes.REQUIRED
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'Configure AWS',
+          name: 'aws',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'aws-field',
+              label: 'Aws field part'
+            }
+          ]
+        },
+        {
+          name: 'google',
+          title: 'Configure google',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'google-field',
+              label: 'Google field part'
+            }
+          ]
+        },
+        {
+          title: 'hola title',
+          name: 'holaname',
+          component: componentTypes.PLAIN_TEXT,
+          label: 'Hello this is a test and this shall be a text'
+        },
+        {
+          nextStep: 'holaname',
+          fields: [
+            {
+              name: 'summary',
+              component: componentTypes.PLAIN_TEXT,
+              isDisabled: true,
+              label: 'Summary'
+            }
+          ],
+          name: 'summary'
+        }
+      ]
+    }
+  ]
+};
+
+export default wizardSchema;

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

@@ -1,22 +1,30 @@
 /* eslint-disable */
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer';
 import 'antd/dist/antd.css';
 import './style.css';
-import { componentMapper,  FormTemplate } from '../src';
-
-//import { RedditOutlined } from '@ant-design/icons';
-//import { Button, Input, Form, Checkbox } from 'antd';
 import demoSchema from '@data-driven-forms/common/src/demoschema';
+import { componentMapper, FormTemplate } from '../src';
+import wizardSchema from './demo-schemas/wizard-schema';
+
+
+
+const style = {
+  position: 'relative',
+  width:'70%',
+  margin:'auto'
+}
 
-const App = () => ( 
-  <FormRenderer 
-    componentMapper={componentMapper} 
-    FormTemplate={props => <FormTemplate {...props} />} 
-    onSubmit={console.log} 
-    schema={demoSchema} 
-  />
-)
+const App = () => (
+  <div style={style}>
+    <FormRenderer
+      componentMapper={componentMapper}
+      FormTemplate={(props) => <FormTemplate {...props} />}
+      onSubmit={console.log}
+      schema={demoSchema}
+    />
+  </div>
+);
 
 ReactDOM.render(<App />, document.getElementById('root'));

packages/ant-component-mapper/package.json

@@ -22,7 +22,7 @@
     "@data-driven-forms/react-form-renderer": "*",
     "@semantic-release/git": "^7.0.5",
     "@semantic-release/npm": "^5.1.1",
-    "antd": "^4.0.1",
+    "antd": "^4.2.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "9.x",
     "babel-jest": "^23.6.0",

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

@@ -18,7 +18,7 @@ const AntForm = ({ label, children, layout, component, invalid, isRequired, help
         label={label}
         name={label}
       >
-        {children}
+        <div>{children}</div>
       </Form.Item>
     </Form>
   );

packages/ant-component-mapper/src/files/checkbox.js

@@ -17,7 +17,13 @@ export const SingleCheckbox = (props) => {
   const text = invalid || helperText || description;
   return (
     <AntForm component="fieldset" invalid={invalid} help={text}>
-      <AntCheckbox checked={input.checked} {...input} disabled={isDisabled || isReadOnly} value={input.name}>
+      <AntCheckbox
+        checked={input.checked}
+        {...input}
+        defaultValue={input.value ? input.value : undefined}
+        disabled={isDisabled || isReadOnly}
+        value={input.name}
+      >
         {isRequired ? <IsRequired>{label}</IsRequired> : label}
       </AntCheckbox>
     </AntForm>

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

@@ -9,6 +9,7 @@ import TimePicker from './time-picker';
 import Radio from './radio';
 import Switch from './switch';
 import Select from './select';
+import Wizard from './wizard';
 import SubForm from './sub-form.js';
 export const components = {
   TextField,
@@ -20,7 +21,8 @@ export const components = {
   DatePicker,
   TimePicker,
   PlainText,
-  SubForm
+  SubForm,
+  Wizard
 };
 
 const componentMapper = {
@@ -34,7 +36,8 @@ const componentMapper = {
   [componentTypes.DATE_PICKER]: DatePicker,
   [componentTypes.TIME_PICKER]: TimePicker,
   [componentTypes.PLAIN_TEXT]: PlainText,
-  [componentTypes.SWITCH]: Switch
+  [componentTypes.SWITCH]: Switch,
+  [componentTypes.WIZARD]: Wizard
 };
 
 export default componentMapper;

packages/ant-component-mapper/src/files/date-picker.js

@@ -15,6 +15,7 @@ const DatePicker = (props) => {
     <AntForm layout="vertical" isRequired={isRequired} label={label} invalid={invalid} help={help}>
       <AntDatePicker
         disabled={isDisabled || isReadOnly}
+        defaultValue={input.value ? input.value : undefined}
         placeholder={placeholderDisplay}
         required={isRequired}
         error={!!invalid}

packages/ant-component-mapper/src/files/select.js

@@ -32,9 +32,9 @@ const Select = (props) => {
   return (
     <AntForm layout="vertical" label={label} isRequired={isRequired} invalid={invalid} help={invalid || helperText || description}>
       <AntSelect
-        placeholder={placeholder || 'Please choose'}
-        // value={options.filter(({ value }) => (rest.isMulti ? input.value.includes(value) : value === input.value))}
         {...input}
+        defaultValue={input.value ? input.value : undefined}
+        placeholder={placeholder || 'Please choose'}
         mode={rest.isMulti ? 'tags' : ''}
         showSearch={!!isSearchable}
         filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}

packages/ant-component-mapper/src/files/switch.js

@@ -16,7 +16,15 @@ export const Switch = (props) => {
   const { name, value, onChange, onBlur } = input;
   return (
     <AntForm help={text} invalid={invalid} isRequired={isRequired} error={!!invalid} label={input.checked ? onText || label : offText || label}>
-      <AntSwitch {...rest} onChange={onChange} value={value} name={name} onClick={onBlur} disabled={isDisabled || isReadOnly} />
+      <AntSwitch
+        {...rest}
+        defaultValue={input.value ? input.value : undefined}
+        onChange={onChange}
+        value={value}
+        name={name}
+        onClick={onBlur}
+        disabled={isDisabled || isReadOnly}
+      />
     </AntForm>
   );
 };