Merge pull request #513 from data-driven-forms/release-2.4

Release 2.4

Author: rvsia

.circleci/config.yml

@@ -52,7 +52,7 @@ jobs:
       - run:
           name: Predeploy demo
           command: |
-              yarn --cwd packages/react-renderer-demo/ create-deploy-files
+              yarn --cwd packages/react-renderer-demo/ build
       - persist_to_workspace:
           root: ~/react-forms
           paths:

.eslintignore

@@ -5,3 +5,4 @@
 /**/vendor.js
 /**/*.config.js
 /templates/**/*.*
+packages/**/service-worker.js

README.md

@@ -29,8 +29,6 @@ Data Driven Forms is a React library used for rendering and managing forms with
 
 :book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
 
-Used by [ManageIQ](http://manageiq.org/), Red Hat Cloud Services.
-
 **Table of Contents**
 
 - [Installation](#installation)
@@ -51,7 +49,7 @@ Used by [ManageIQ](http://manageiq.org/), Red Hat Cloud Services.
 
 ### Installation
 
-You neet to add React Form Renderer
+Add React Form Renderer
 
 #### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
 
@@ -65,39 +63,42 @@ $ yarn add @data-driven-forms/react-form-renderer
 
 Optionally you can install one of provided mappers:
 
-#### [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)
+
+#### [Material-UI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)
 
 ```console
-$ npm install @data-driven-forms/pf3-component-mapper -S
+$ npm install @data-driven-forms/mui-component-mapper -S
 ```
 
 ```console
-$ yarn add @data-driven-forms/pf3-component-mapper
+$ yarn add @data-driven-forms/mui-component-mapper
 ```
 
-#### [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)
+#### [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)
 
 ```console
-$ npm install @data-driven-forms/pf4-component-mapper -S
+$ npm install @data-driven-forms/pf3-component-mapper -S
 ```
 
 ```console
-$ yarn add @data-driven-forms/pf4-component-mapper
+$ yarn add @data-driven-forms/pf3-component-mapper
 ```
 
-#### [Material-UI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)
+#### [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)
 
 ```console
-$ npm install @data-driven-forms/mui-component-mapper -S
+$ npm install @data-driven-forms/pf4-component-mapper -S
 ```
 
 ```console
-$ yarn add @data-driven-forms/mui-component-mapper
+$ yarn add @data-driven-forms/pf4-component-mapper
 ```
 
+Component libraries in mappers are external dependencies. Make sure to install them in your bundles.
+
 ### Usage
 
-For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.
+In order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template
 
 ```jsx
 import React from 'react';
@@ -138,6 +139,8 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
 - Sub-form
 - Wizard
 
+Any other components can be added to mapper and renderer with the form renderer. Existing components can be also overriden.
+
 ### Documentation
 
 Please use our [documentation site](https://data-driven-forms.org/). In case of any problem, you can access documentation files directly in GitHub.

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "build": "lerna run build --ignore @data-driven-forms/react-render-demo",
+    "build": "lerna run build --ignore @data-driven-forms/react-renderer-demo",
     "vendor": "lerna run vendor",
     "test": "jest --coverage",
     "test:ci": "jest --coverage --runInBand",

packages/blueprint-component-mapper/.gitignore

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

packages/blueprint-component-mapper/LICENSE

@@ -0,0 +1 @@
+../../LICENSE

packages/blueprint-component-mapper/README.md

@@ -0,0 +1,181 @@
+[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fblueprint-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fblueprint-component-mapper)
+
+[![Data Driven Form logo](images/logo.png)](https://data-driven-forms.org/)
+
+Blueprint component mapper for [Data Driven Forms](https://github.com/data-driven-forms/react-forms).
+
+:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
+
+**Table of Contents**
+
+- [Installation](#installation)
+  - [React Form Renderer](#react-form-renderer)
+  - [Blueprint Mapper](#blueprint-mapper)
+- [Usage](#usage)
+- [Basic provided components](#basic-provided-components)
+- [Useful links](#useful-links)
+- [Development setup](#development-setup)
+  - [Tests](#tests)
+  - [Commits](#commits)
+  - [Changes to documentation](#changes-to-documentation)
+- [Contribution](#contribution)
+- [LICENSE](#license)
+
+### Installation
+
+You neet to add React Form Renderer
+
+#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
+
+```console
+$ npm install @data-driven-forms/react-form-renderer -S
+```
+
+```console
+$ yarn add @data-driven-forms/react-form-renderer
+```
+
+Optionally you can install one of provided mappers:
+
+#### [Blueprint Mapper](https://www.npmjs.com/package/@data-driven-forms/blueprint-component-mapper)
+
+```console
+$ npm install @data-driven-forms/blueprint-component-mapper -S
+```
+
+```console
+$ yarn add @data-driven-forms/blueprint-component-mapper
+```
+
+
+### Usage
+
+For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.
+
+```jsx
+import React from 'react';
+import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { componentMapper, FormTemplate } from '@data-driven-forms/blueprint-component-mapper';
+
+const schema = {
+  fields: [{
+    component: componentTypes.TEXT_FIELD,
+    name: 'name',
+    label: 'Your name'
+  }]
+}
+
+const Form = () => (
+  <FormRenderer
+    schema={schema}
+    componentMapper={componentMapper}
+    FormTemplate={FormTemplate}
+    onSubmit={console.log}
+  />
+)
+```
+
+### Basic provided components
+
+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
+
+### Useful links
+
+- [Data Driven Forms documentation](https://data-driven-forms.org/)
+- [Blueprint Design documentation](https://blueprintjs.com/docs/)
+- NPM
+  - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
+  - [Blueprint 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/blueprint-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.
+
+1. Install
+
+```console
+yarn install
+```
+
+2. Build
+
+```console
+yarn build
+```
+
+3. Run a package
+
+Each package has a small playground `package/demo`, where you can test your changes.
+
+```console
+cd packages/blueprint-component-mapper
+yarn start
+```
+
+4. How to clean?
+
+```console
+rm yarn.lock
+yarn lerna clean # will delete all node_modules
+```
+
+All packages are linked together by default, so if you run a `yarn build` in a package, all other packages are updated to the latest version of that package.
+
+#### Tests
+
+Tests needed to be run from the core folder.
+
+```console
+yarn test
+
+yarn test packages/blueprint-component-mapper
+```
+
+#### Commits
+
+Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)
+
+Format:
+
+```
+[type]([package]): message
+
+fix(blueprint): 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, do not use Semantic Release, if you update only the demo.
+
+All packages are releasing together and they share the version number.
+
+#### Changes to documentation
+
+If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!
+
+### Contribution
+
+We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:
+
+### LICENSE
+
+Apache License 2.0

packages/blueprint-component-mapper/babel.config.js

@@ -0,0 +1 @@
+../common/babel.config.js

packages/blueprint-component-mapper/config/jest.setup.js

@@ -0,0 +1 @@
+../../common/config/jest.setup.js

packages/blueprint-component-mapper/config/webpack.config.js

@@ -0,0 +1,70 @@
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const resolve = require('path').resolve;
+const merge = require('webpack-merge');
+
+const commonConfig = {
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+      },
+    }, {
+      test: /\.(sa|sc|c)ss$/,
+      use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
+    }, {
+      test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
+      loader: 'url-loader',
+    },
+    ],
+  },
+};
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: './demo/index.html',
+  filename: './index.html',
+});
+
+const devConfig = {
+  mode: 'development',
+  entry: './demo/index.js',
+  output: {
+    path: resolve('../dist'),
+    filename: '[name].[hash].js',
+  },
+  devtool: 'source-map',
+  plugins: [ htmlPlugin ],
+};
+
+const prodConfig = {
+  mode: 'development',
+  entry: './src/index.js',
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        terserOptions: {
+          keep_classnames: true,
+          keep_fnames: true,
+        },
+      }),
+    ],
+  },
+  output: {
+    path: resolve('./dist'),
+    library: '[name]',
+    libraryTarget: 'umd',
+    filename: 'index.js',
+    umdNamedDefine: true,
+    globalObject: 'this',
+  },
+};
+
+module.exports = env => ({
+  dev: merge(commonConfig, devConfig),
+  prod: merge(commonConfig, prodConfig),
+})[env];
+