Merge pull request #894 from rvsia/updateManagerBranch

Update manager branch from master

Author: Hyperkid123

.gitignore

@@ -73,3 +73,6 @@ packages/react-renderer-demo/public/vendor.css
 
 # Rollup build info
 packages/**/size-snapshot.json
+
+# Node version manager configuration
+.nvmrc

README.md

@@ -1,30 +1,32 @@
 [![codecov](https://codecov.io/gh/data-driven-forms/react-forms/branch/master/graph/badge.svg)](https://codecov.io/gh/data-driven-forms/react-forms)
 [![CircleCI](https://circleci.com/gh/data-driven-forms/react-forms/tree/master.svg?style=svg)](https://circleci.com/gh/data-driven-forms/react-forms/tree/master)
 [![npm version](https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer.svg)](https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer)
+[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms)
+[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)
 
 [![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)
 
 Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on [React Final Form](https://github.com/final-form/react-final-form).
 
 
 :question: Why to use Data Driven Forms? :question:
-- All forms shared the same functionality!
-- Components are controlled in one place!
-- You can easily migrate to different sets of components!
-- All functionality is provided (see below!)
+- All forms **shared** the same **functionality**!
+- Components are **controlled** in **one place**!
+- You can **easily migrate** to different sets of components!
+- All **functionality** is **provided** (see below!)
 
 :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/), [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!
-- Custom field validation with basic set included!
-- Datatype validation!
-- Cross-field validation!
-- Asynchronous validation supported!
-- Supporting Wizard forms!
-- Supporting [Final Form Field Array](https://github.com/final-form/react-final-form-arrays)!
+- **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/), [Material-UI](https://material-ui.com/), [Ant Design](https://ant.design/)! and more, see below!)
+- **Form state manager** out-of-the-box (including error states!)
+- Fully **customizable** (you can use your own buttons, actions, etc.)!
+- **Conditional** fields!
+- Custom field **validation** with basic set included!
+- **Datatype** validation!
+- **Cross-field** validation!
+- **Asynchronous** validation supported!
+- Supporting **Wizard** forms!
+- Supporting **[Final Form Field Array](https://github.com/final-form/react-final-form-arrays)!**
 - ... and a lot more!
 
 :book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
@@ -38,8 +40,8 @@ Data Driven Forms is a React library used for rendering and managing forms with
   - [PatternFly 4 Mapper](#patternfly-4-mapper)
   - [BlueprintJS Mapper](#blueprintjs-mapper)
   - [Semantic UI Mapper](#semantic-ui-mapper)
-  - [Material-UI Mapper](#material-ui-mapper)
   - [Ant Design Mapper](#ant-design-mapper)
+  - [Carbon Mapper](#carbon-mapper)
 - [Usage](#usage)
   - [Custom mapper](#custom-mapper)
 - [Basic provided components](#basic-provided-components)
@@ -119,9 +121,7 @@ $ npm install @data-driven-forms/suir-component-mapper -S
 $ 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)
+#### [Ant Design Mapper](https://data-driven-forms.org/mappers/ant-component-mapper)
 
 ```console
 $ npm install @data-driven-forms/ant-component-mapper -S
@@ -131,6 +131,18 @@ $ npm install @data-driven-forms/ant-component-mapper -S
 $ yarn add @data-driven-forms/ant-component-mapper
 ```
 
+#### [Carbon Mapper](https://data-driven-forms.org/mappers/carbon-component-mapper)
+
+```console
+$ npm install @data-driven-forms/carbon-component-mapper -S
+```
+
+```console
+$ yarn add @data-driven-forms/carbon-component-mapper
+```
+
+Component libraries in mappers are external dependencies. Make sure to install them and their styles in your bundles.
+
 ### 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.
@@ -200,20 +212,21 @@ Mappers can be also generated by using `yarn generate-template` [command](https:
 
 Data Driven Forms supports all kinds of component, basic set is consisted of:
 
-- Text input
-- Text area
-- Checkbox (Multiple checkboxes)
-- Select (dropdown)
-- Dual list select
-- Field array
-- Switch
-- Radio buttons
-- Date picker
-- Time picker
-- Tabs
-- Slider
-- Sub-form
-- Wizard
+- [Text input](https://data-driven-forms.org/mappers/text-field?mapper=mui)
+- [Text area](https://data-driven-forms.org/mappers/textarea?mapper=mui)
+- [Checkbox](https://data-driven-forms.org/mappers/checkbox?mapper=mui) ([Multiple checkboxes](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=mui))
+- [Select (dropdown)](https://data-driven-forms.org/mappers/select?mapper=mui)
+- [Dual list select](https://data-driven-forms.org/mappers/dual-list-select?mapper=mui)
+- [Field array](https://data-driven-forms.org/mappers/field-array?mapper=mui)
+- [Switch](https://data-driven-forms.org/mappers/switch?mapper=mui)
+- [Radio buttons](https://data-driven-forms.org/mappers/radio?mapper=mui)
+- [Date picker](https://data-driven-forms.org/mappers/date-picker?mapper=mui)
+- [Time picker](https://data-driven-forms.org/mappers/time-picker?mapper=mui)
+- [Tabs](https://data-driven-forms.org/mappers/tabs?mapper=mui)
+- [Slider](https://data-driven-forms.org/mappers/slider?mapper=mui)
+- [Sub-form](https://data-driven-forms.org/mappers/sub-form?mapper=mui)
+- [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=mui)
+- [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=mui)
 
 Any other components can be added to mapper and renderer with the form renderer. Existing components can be also overriden.
 
@@ -228,18 +241,22 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
 - [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)
 - [Material-UI documentation](https://material-ui.com/)
 - [Ant Design documentation](https://ant.design/)
+- [Semantic UI React](https://react.semantic-ui.com/)
+- [BlueprintJS](https://blueprintjs.com/)
+- [IBM Carbon](https://www.carbondesignsystem.com/)
 - 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)
+  - [Semantic UI Mapper](https://www.npmjs.com/package/@data-driven-forms/suir-component-mapper)
+  - [BlueprintJS Mapper](https://www.npmjs.com/package/@data-driven-forms/blueprint-component-mapper)
+  - [Carbon Mapper](https://www.npmjs.com/package/@data-driven-forms/carbon-component-mapper)
 
 ### Development setup
 
-Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lerna), so you can use all its commands as well.
+Data Driven Forms is a monorepo that uses [Lerna](https://github.com/lerna/lerna) and [yarn workspaces](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/), so you can use all its commands as well.
 
 1. Install
 

package.json

@@ -80,7 +80,7 @@
     "ncp": "^2.0.0",
     "prettier": "^1.19.1",
     "replace-in-file": "^6.0.0",
-    "semantic-release": "^16.0.4",
+    "semantic-release": "^17.2.3",
     "source-map-loader": "^0.2.4",
     "strip-ansi": "^6.0.0",
     "terser-webpack-plugin": "^1.3.0",

packages/ant-component-mapper/README.md

@@ -1,4 +1,6 @@
 [![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fant-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fant-component-mapper)
+[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms)
+[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)
 
 [![Data Driven Form logo](images/logo.png)](https://data-driven-forms.org/)
 
@@ -23,7 +25,7 @@ Material-UI component mapper for [Data Driven Forms](https://github.com/data-dri
 
 ### Installation
 
-You neet to add React Form Renderer
+You need to add React Form Renderer
 
 #### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
 
@@ -79,18 +81,21 @@ const Form = () => (
 
 Data Driven Forms supports all kinds of component, basic set is consisted of:
 
-- Text input
-- Text area
-- Checkbox (Multiple checkboxes)
-- Select (dropdown)
-- Switch
-- Radio buttons
-- Date picker
-- Time picker
-- Tabs
-- Sub-form
-- Wizard
-- Plain-text
+- [Text input](https://data-driven-forms.org/mappers/text-field?mapper=ant)
+- [Text area](https://data-driven-forms.org/mappers/textarea?mapper=ant)
+- [Checkbox](https://data-driven-forms.org/mappers/checkbox?mapper=ant) ([Multiple checkboxes](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=ant))
+- [Select (dropdown)](https://data-driven-forms.org/mappers/select?mapper=ant)
+- [Dual list select](https://data-driven-forms.org/mappers/dual-list-select?mapper=ant)
+- [Field array](https://data-driven-forms.org/mappers/field-array?mapper=ant)
+- [Switch](https://data-driven-forms.org/mappers/switch?mapper=ant)
+- [Radio buttons](https://data-driven-forms.org/mappers/radio?mapper=ant)
+- [Date picker](https://data-driven-forms.org/mappers/date-picker?mapper=ant)
+- [Time picker](https://data-driven-forms.org/mappers/time-picker?mapper=ant)
+- [Tabs](https://data-driven-forms.org/mappers/tabs?mapper=ant)
+- [Slider](https://data-driven-forms.org/mappers/slider?mapper=ant)
+- [Sub-form](https://data-driven-forms.org/mappers/sub-form?mapper=ant)
+- [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=ant)
+- [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=ant)
 
 ### Useful links
 
@@ -103,7 +108,7 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 
 ### Development setup
 
-Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lerna), so you can use all its commands as well.
+Data Driven Forms is a monorepo that uses [Lerna](https://github.com/lerna/lerna) and [yarn workspaces](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/), so you can use all its commands as well.
 
 1. Install
 

packages/ant-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/ant-component-mapper",
-  "version": "2.8.2",
+  "version": "2.17.0",
   "description": "Component mapper for Ant Design component mapper form data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -51,7 +51,7 @@
     "rollup-plugin-sourcemaps": "^0.5.0",
     "rollup-pluginutils": "^2.8.2",
     "sass-loader": "^7.1.0",
-    "semantic-release": "15.12.0",
+    "semantic-release": "17.2.3",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.25.1",
@@ -67,10 +67,10 @@
     "react-select": "^2.2.0"
   },
   "peerDependencies": {
-    "@data-driven-forms/react-form-renderer": "^1.9.3",
+    "@data-driven-forms/react-form-renderer": ">=2.4.6",
     "antd": "^4.2.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "react": ">=16.13.0",
+    "react-dom": ">=16.13.0"
   },
   "dependencies": {},
   "postpublish": "export RELEASE_DEMO=true"

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

@@ -7,10 +7,17 @@ import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-temp
 
 const AntForm = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel }) => {
   const invalid = validationError(meta, validateOnMount);
-  const help = invalid || helperText || description;
+  const warning = (meta.touched || validateOnMount) && meta.warning;
+  const help = invalid || warning || helperText || description;
 
   return (
-    <Form.Item validateStatus={!invalid ? '' : 'error'} help={help} label={!hideLabel && label} required={isRequired} {...FormItemProps}>
+    <Form.Item
+      validateStatus={!invalid ? (warning ? 'warning' : '') : 'error'}
+      help={help}
+      label={!hideLabel && label}
+      required={isRequired}
+      {...FormItemProps}
+    >
       {children}
     </Form.Item>
   );

packages/ant-component-mapper/src/files/form-template.d.ts

@@ -1,7 +1,6 @@
-import { FormTemplateRenderProps, AnyObject } from "@data-driven-forms/react-form-renderer";
+import FormTemplateCommonProps from "@data-driven-forms/common/src/form-template";
 
-export interface FormTemplateProps extends FormTemplateRenderProps {
-  formWrapperProps?: AnyObject;
+export interface FormTemplateProps extends FormTemplateCommonProps {
   layout?: string;
 }
 

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

@@ -22,8 +22,8 @@ Form.defaultProps = {
   layout: 'vertical'
 };
 
-const Description = ({ children }) => (
-  <Typography>
+const Description = ({ children, ...props }) => (
+  <Typography {...props}>
     <Paragraph>{children}</Paragraph>
   </Typography>
 );
@@ -32,8 +32,8 @@ Description.propTypes = {
   children: childrenPropTypes
 };
 
-const TitleComponent = ({ children }) => (
-  <Typography>
+const TitleComponent = ({ children, ...props }) => (
+  <Typography {...props}>
     <Title level={3}>{children}</Title>
   </Typography>
 );
@@ -42,7 +42,11 @@ TitleComponent.propTypes = {
   children: childrenPropTypes
 };
 
-const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
+const ButtonGroup = ({ children, ...props }) => (
+  <div style={{ display: 'flex', justifyContent: 'flex-end' }} {...props}>
+    {children}
+  </div>
+);
 
 ButtonGroup.propTypes = {
   children: childrenPropTypes

packages/ant-component-mapper/src/tests/components.test.js

@@ -103,6 +103,29 @@ describe('formFields generated tests', () => {
           expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
         });
 
+        it('renders with warning', async () => {
+          const errorField = {
+            ...field,
+            validate: [{ type: validatorTypes.REQUIRED, warning: true }],
+            useWarnings: true,
+            validateOnMount: true
+          };
+          let wrapper;
+
+          await act(async () => {
+            wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
+          });
+          wrapper.update();
+
+          expect(
+            wrapper
+              .find('.ant-form-item-explain')
+              .last()
+              .text()
+          ).toEqual(errorText);
+          expect(wrapper.find('.ant-form-item-has-warning').length).toBeGreaterThanOrEqual(1);
+        });
+
         it('renders with error and validateOnMount', async () => {
           const errorField = {
             ...field,