Merge pull request #975 from data-driven-forms/v3

Merge V3 to master

Author: Hyperkid123

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -22,7 +22,7 @@
     "arguments": true
   },
   "plugins": ["prettier"],
-  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier/react"],
+  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended"],
   "env": {
     "es6": true,
     "browser": true,

.gitignore

@@ -76,3 +76,5 @@ packages/**/size-snapshot.json
 
 # Node version manager configuration
 .nvmrc
+
+.DS_STORE

README.md

@@ -17,7 +17,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/), [Material-UI](https://material-ui.com/), [Ant Design](https://ant.design/)! and more, see below!)
+- You can use your **own components** or use one of our **provided mappers**: [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!
@@ -36,7 +36,6 @@ Data Driven Forms is a React library used for rendering and managing forms with
 - [Installation](#installation)
   - [React Form Renderer](#react-form-renderer)
   - [Material-UI Mapper](#material-ui-mapper)
-  - [PatternFly 3 Mapper](#patternfly-3-mapper)
   - [PatternFly 4 Mapper](#patternfly-4-mapper)
   - [BlueprintJS Mapper](#blueprintjs-mapper)
   - [Semantic UI Mapper](#semantic-ui-mapper)
@@ -81,16 +80,6 @@ $ npm install @data-driven-forms/mui-component-mapper -S
 $ yarn add @data-driven-forms/mui-component-mapper
 ```
 
-#### [PatternFly 3 Mapper](https://data-driven-forms.org/mappers/pf3-component-mapper)
-
-```console
-$ npm install @data-driven-forms/pf3-component-mapper -S
-```
-
-```console
-$ yarn add @data-driven-forms/pf3-component-mapper
-```
-
 #### [PatternFly 4 Mapper](https://data-driven-forms.org/mappers/pf4-component-mapper)
 
 ```console
@@ -149,7 +138,7 @@ In order to Data Driven Forms in your component you need the renderer and a comp
 
 ```jsx
 import React from 'react';
-import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
 import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 
 const schema = {
@@ -176,7 +165,7 @@ You can also use custom mapper.
 
 ```jsx
 import React from 'react';
-import FormRenderer, { componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';
+import { FormRenderer, componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 const TextField = props => {
   const {label, input, meta, ...rest} = useFieldApi(props)
@@ -237,7 +226,6 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
 ### Useful links
 
 - [Data Driven Forms documentation](https://data-driven-forms.org/)
-- [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/)
@@ -246,7 +234,6 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
 - [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)
@@ -275,7 +262,7 @@ yarn build
 Each package has a small playground `package/demo`, where you can test your changes.
 
 ```console
-cd packages/pf3-component-mapper
+cd packages/pf4-component-mapper
 yarn start
 ```
 
@@ -294,7 +281,7 @@ Tests needed to be run from the core folder.
 ```console
 yarn test
 
-yarn test packages/pf3-component-mapper
+yarn test packages/pf4-component-mapper
 ```
 
 #### Commits
@@ -306,15 +293,15 @@ Format:
 ```
 [type]([package]): message
 
-fix(pf3): title accepts node
+fix(pf4): title accepts node
 ```
 
 Types:
 - `feat`: a new feature, will trigger new `_.X._` release
 - `fix`: a fix, will trigger new `_._.X` release
 
 Packages:
-- Please describe which package is being changed `pf3`, `renderer`, ...
+- Please describe which package is being changed `4`, `renderer`, ...
 
 Please, do not use Semantic Release, if you update only the demo.
 

__mocks__/with-provider.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { RendererContext } from '@data-driven-forms/react-form-renderer';
-import Form from '@data-driven-forms/react-form-renderer/dist/cjs/form';
+import Form from '@data-driven-forms/react-form-renderer/form';
 
 const RenderWithProvider = ({ value = { formOptions: {} }, children, onSubmit = () => {} }) => {
   return (

babel.config.js

@@ -7,36 +7,20 @@ const camelToSnake = (string) => {
   };
 
 module.exports = {
-    presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-    plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
-    env: {
-        cjs: {
-            plugins: [
-                [
-                    'transform-imports',
-                    {
-                    '@data-driven-forms/react-form-renderer': {
-                        transform: (importName) => `@data-driven-forms/react-form-renderer/dist/cjs/${camelToSnake(importName)}`,
-                        preventFullImport: true
-                    }
-                    },
-                    '@data-driven-forms/react-form-renderer-CJS'
-                ],
-            ]
+    presets: ["@babel/preset-env", "@babel/preset-react", ["@babel/preset-typescript", {allowNamespaces: true}]],
+    plugins: [
+      "@babel/plugin-transform-runtime",
+      "@babel/plugin-syntax-dynamic-import",
+      "lodash",
+      "@babel/plugin-proposal-class-properties",
+      [
+        'transform-imports',
+        {
+        '@data-driven-forms/react-form-renderer': {
+            transform: (importName) => `@data-driven-forms/react-form-renderer/${camelToSnake(importName)}`,
+            preventFullImport: true
+          }
         },
-        esm: {
-            plugins: [
-                [
-                  'transform-imports',
-                  {
-                    '@data-driven-forms/react-form-renderer': {
-                      transform: (importName) => `@data-driven-forms/react-form-renderer/dist/esm/${camelToSnake(importName)}`,
-                      preventFullImport: true
-                    }
-                  },
-                  '@data-driven-forms/react-form-renderer-ESM'
-                ],
-            ]
-        }
-    }
+        '@data-driven-forms/react-form-renderer'
+    ]]
 }

globalSetup.js renamed to config/globalSetup.js

@@ -8,31 +8,39 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "build": "lerna run build --concurrency 1 --ignore @data-driven-forms/react-renderer-demo",
+    "build": "yarn clean-build && lerna run build --concurrency 1 --ignore @data-driven-forms/react-renderer-demo",
     "vendor": "lerna run vendor",
     "test": "jest --coverage",
     "test:ci": "jest --coverage --runInBand",
     "test:update": "jest -u",
     "release": "semantic-release",
     "codecov": "codecov",
     "start-demo": "lerna run start --scope=@data-driven-forms/react-render-demo",
-    "lint": "yarn eslint .",
+    "lint": "yarn eslint ./packages/*/src --ext .js",
     "lint:ts": "tslint -c ./tslint.json 'packages/**/*.d.ts'",
-    "generate-template": "node ./scripts/generate-mapper.js"
+    "generate-template": "node ./scripts/generate-mapper.js",
+    "clean-build": "node ./scripts/clean-build.js",
+    "preinstall": "node ./scripts/clean-build.js"
   },
   "workspaces": [
     "packages/**"
   ],
   "jest": {
     "verbose": true,
+    "testPathIgnorePatterns": [
+      "/node_modules/"
+    ],
     "setupFiles": [
       "<rootDir>/config/jest.setup.js"
     ],
     "collectCoverageFrom": [
       "<rootDir>/packages/**/src/**/*.js",
+      "<rootDir>/packages/**/src/**/*.ts",
+      "!<rootDir>/packages/**/src/**/*.d.ts",
       "!<rootDir>/packages/react-renderer-demo/**/*.js",
       "!<rootDir>/packages/**/dist",
-      "!<rootDir>/templates/**/*.js"
+      "!<rootDir>/templates/**/*.js",
+      "!<rootDir>/packages/**/src/**/index.js"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
@@ -41,11 +49,12 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/templates/"
     ],
-    "globalSetup": "<rootDir>/globalSetup.js"
+    "globalSetup": "<rootDir>/config/globalSetup.js"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/eslint-parser": "^7.13.8",
+    "@babel/plugin-transform-runtime": "^7.13.9",
+    "@babel/preset-typescript": "^7.13.0",
     "@khala/commit-analyzer-wildcard": "^2.4.1",
     "@khala/npm-release-monorepo": "^2.4.1",
     "@khala/wildcard-release-notes": "^2.4.1",
@@ -59,17 +68,17 @@
     "atob-lite": "^2.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "dtslint": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-config-i-am-meticulous": "^12.0.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-config-react-app": "^5.2.0",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "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",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-flowtype": "^5.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^7.1.0",
@@ -89,7 +98,20 @@
   },
   "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",
       [
@@ -119,7 +141,7 @@
         "assets": [
           "package.json"
         ],
-        "successComment": ":tada: This ${issue.pull_request ? 'PR is included' : 'issue has been resolved'} in version ${nextRelease.version} :tada:\n\nThe release is available on \n\n- [react-form-renderer (@latest dist-tag)](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n\n- [pf3-component-mapper (@latest dist-tag)](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)\n\n- [pf4-component-mapper (@latest dist-tag)](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)\n\n- [mui-component-mapper (@latest dist-tag)](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)\n\nDemo can be found [here](http://data-driven-forms.org/)!"
+        "successComment": ":tada: This ${issue.pull_request ? 'PR is included' : 'issue has been resolved'} in version ${nextRelease.version} :tada:\n\nThe release is available on \n\n- [react-form-renderer (@latest dist-tag)](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n\nDemo can be found [here](http://data-driven-forms.org/)!"
       },
       [
         "@semantic-release/git",

package.json

@@ -0,0 +1 @@
+../common/.npmignore

packages/pf3-component-mapper/.gitignore renamed to packages/ant-component-mapper/.gitignore

@@ -56,7 +56,7 @@ For using Data Driven Forms in your component you need the renderer and a compon
 
 ```jsx
 import React from 'react';
-import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
 import { componentMapper, layoutMapper } from '@data-driven-forms/ant-component-mapper';
 
 const schema = {