Skip to content

Commit 3093c21

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #655 from rvsia/mergeAntToMaster
Merge ant to master
2 parents e044543 + 6aa245c commit 3093c21

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+7389
-23
lines changed

‎README.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Data Driven Forms is a React library used for rendering and managing forms with
1515

1616
:tada: Features :tada:
1717
- Easily readable schema, you don't need to know any HTML or JS to be able to write your own form schemas!
18-
- 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/)!)
18+
- 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/)!)
1919
- Form state managing out-of-the-box (including error states!)
2020
- Fully customizable (you can use your own buttons, actions, etc.)!
2121
- Conditional fields!
@@ -38,6 +38,8 @@ Data Driven Forms is a React library used for rendering and managing forms with
3838
- [PatternFly 4 Mapper](#patternfly-4-mapper)
3939
- [BlueprintJS Mapper](#blueprintjs-mapper)
4040
- [Semantic UI Mapper](#semantic-ui-mapper)
41+
- [Material-UI Mapper](#material-ui-mapper)
42+
- [Ant Design Mapper](#ant-design-mapper)
4143
- [Usage](#usage)
4244
- [Custom mapper](#custom-mapper)
4345
- [Basic provided components](#basic-provided-components)
@@ -119,6 +121,16 @@ $ yarn add @data-driven-forms/suir-component-mapper
119121

120122
Component libraries in mappers are external dependencies. Make sure to install them in your bundles.
121123

124+
#### [Ant Design Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
125+
126+
```console
127+
$ npm install @data-driven-forms/ant-component-mapper -S
128+
```
129+
130+
```console
131+
$ yarn add @data-driven-forms/ant-component-mapper
132+
```
133+
122134
### Usage
123135

124136
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 +227,13 @@ Please use our [documentation site](https://data-driven-forms.org/). In case of
215227
- [PatternFly 3 Design documentation](https://www.patternfly.org/v3/)
216228
- [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)
217229
- [Material-UI documentation](https://material-ui.com/)
230+
- [Ant Design documentation](https://ant.design/)
218231
- NPM
219232
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
220233
- [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper)
221234
- [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)
222235
- [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper)
236+
- [Ant Design Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
223237
- Examples of schemas (PatternFly 3)
224238
- [ManageIQ Form Components](https://github.com/ManageIQ/manageiq-ui-classic/tree/master/app/javascript/components)
225239

‎config/jest.setup.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,17 @@ import Adapter from 'enzyme-adapter-react-16';
33

44
configure({ adapter: new Adapter() });
55
Element.prototype.scrollTo = () => {};
6+
7+
Object.defineProperty(window, 'matchMedia', {
8+
writable: true,
9+
value: jest.fn().mockImplementation((query) => ({
10+
matches: false,
11+
media: query,
12+
onchange: null,
13+
addListener: jest.fn(), // deprecated
14+
removeListener: jest.fn(), // deprecated
15+
addEventListener: jest.fn(),
16+
removeEventListener: jest.fn(),
17+
dispatchEvent: jest.fn()
18+
}))
19+
});

‎packages/ant-component-mapper/LICENSE

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../LICENSE

‎packages/ant-component-mapper/README.md

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
[![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)
2+
3+
[![Data Driven Form logo](images/logo.png)](https://data-driven-forms.org/)
4+
5+
Material-UI component mapper for [Data Driven Forms](https://github.com/data-driven-forms/react-forms).
6+
7+
:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
8+
9+
**Table of Contents**
10+
11+
- [Installation](#installation)
12+
- [React Form Renderer](#react-form-renderer)
13+
- [ANT mapper](#ant-mapper)
14+
- [Usage](#usage)
15+
- [Basic provided components](#basic-provided-components)
16+
- [Useful links](#useful-links)
17+
- [Development setup](#development-setup)
18+
- [Tests](#tests)
19+
- [Commits](#commits)
20+
- [Changes to documentation](#changes-to-documentation)
21+
- [Contribution](#contribution)
22+
- [LICENSE](#license)
23+
24+
### Installation
25+
26+
You neet to add React Form Renderer
27+
28+
#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
29+
30+
```console
31+
$ npm install @data-driven-forms/react-form-renderer -S
32+
```
33+
34+
```console
35+
$ yarn add @data-driven-forms/react-form-renderer
36+
```
37+
38+
Optionally you can install one of provided mappers:
39+
40+
#### [ANT mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
41+
42+
```console
43+
$ npm install @data-driven-forms/ant-component-mapper -S
44+
```
45+
46+
```console
47+
$ yarn add @data-driven-forms/ant-component-mapper
48+
```
49+
50+
51+
### Usage
52+
53+
For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.
54+
55+
```jsx
56+
import React from 'react';
57+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
58+
import { componentMapper, layoutMapper } from '@data-driven-forms/ant-component-mapper';
59+
60+
const schema = {
61+
fields: [{
62+
component: componentTypes.TEXT_FIELD,
63+
name: 'name',
64+
label: 'Your name'
65+
}]
66+
}
67+
68+
const Form = () => (
69+
<FormRenderer
70+
schema={schema}
71+
componentMapper={componentMapper}
72+
layoutMapper={layoutMapper}
73+
onSubmit={console.log}
74+
/>
75+
)
76+
```
77+
78+
### Basic provided components
79+
80+
Data Driven Forms supports all kinds of component, basic set is consisted of:
81+
82+
- Text input
83+
- Text area
84+
- Checkbox (Multiple checkboxes)
85+
- Select (dropdown)
86+
- Switch
87+
- Radio buttons
88+
- Date picker
89+
- Time picker
90+
- Tabs
91+
- Sub-form
92+
- Wizard
93+
- Plain-text
94+
95+
### Useful links
96+
97+
- [Data Driven Forms documentation](https://data-driven-forms.org/)
98+
- [Material-UI documentation](https://material-ui.com/)
99+
- NPM
100+
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
101+
- [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/ant-component-mapper)
102+
103+
104+
### Development setup
105+
106+
Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lerna), so you can use all its commands as well.
107+
108+
1. Install
109+
110+
```console
111+
yarn install
112+
```
113+
114+
2. Build
115+
116+
```console
117+
yarn build
118+
```
119+
120+
3. Run a package
121+
122+
Each package has a small playground `package/demo`, where you can test your changes.
123+
124+
```console
125+
cd packages/ant-component-mapper
126+
yarn start
127+
```
128+
129+
4. How to clean?
130+
131+
```console
132+
rm yarn.lock
133+
yarn lerna clean # will delete all node_modules
134+
```
135+
136+
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.
137+
138+
#### Tests
139+
140+
Tests needed to be run from the core folder.
141+
142+
```console
143+
yarn test
144+
145+
yarn test packages/ant-component-mapper
146+
```
147+
148+
#### Commits
149+
150+
Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)
151+
152+
Format:
153+
154+
```
155+
[type]([package]): message
156+
157+
fix(ant): title accepts node
158+
```
159+
160+
Types:
161+
- `feat`: a new feature, will trigger new `_.X._` release
162+
- `fix`: a fix, will trigger new `_._.X` release
163+
164+
Packages:
165+
- Please describe which package is being changed `pf3`, `renderer`, ...
166+
167+
Please, do not use Semantic Release, if you update only the demo.
168+
169+
All packages are releasing together and they share the version number.
170+
171+
#### Changes to documentation
172+
173+
If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!
174+
175+
### Contribution
176+
177+
We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:
178+
179+
### LICENSE
180+
181+
Apache License 2.0

‎packages/ant-component-mapper/babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../common/babel.config.js

‎packages/ant-component-mapper/config/jest.setup.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../common/config/jest.setup.js

‎packages/ant-component-mapper/config/webpack.config.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
const TerserPlugin = require('terser-webpack-plugin');
2+
const HtmlWebPackPlugin = require('html-webpack-plugin');
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
const resolve = require('path').resolve;
5+
const merge = require('webpack-merge');
6+
7+
const commonConfig = {
8+
module: {
9+
rules: [{
10+
test: /\.(js|jsx)$/,
11+
exclude: /node_modules/,
12+
use: {
13+
loader: 'babel-loader',
14+
},
15+
}, {
16+
test: /\.(sa|sc|c)ss$/,
17+
use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
18+
}, {
19+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
20+
loader: 'url-loader',
21+
},
22+
],
23+
},
24+
};
25+
26+
const htmlPlugin = new HtmlWebPackPlugin({
27+
template: './demo/index.html',
28+
filename: './index.html',
29+
});
30+
31+
const devConfig = {
32+
mode: 'development',
33+
entry: './demo/index.js',
34+
output: {
35+
path: resolve('../dist'),
36+
filename: '[name].[hash].js',
37+
},
38+
devtool: 'source-map',
39+
plugins: [ htmlPlugin ],
40+
};
41+
42+
const externals = [{
43+
react: {
44+
root: 'React',
45+
commonjs2: 'react',
46+
commonjs: [ 'react' ],
47+
amd: 'react',
48+
},
49+
},
50+
/@material-ui\/core\/.*/,
51+
];
52+
53+
const prodConfig = {
54+
mode: 'production',
55+
entry: './src/index.js',
56+
output: {
57+
path: resolve('./dist'),
58+
library: '[name]',
59+
libraryTarget: 'umd',
60+
filename: 'index.js',
61+
},
62+
optimization: {
63+
minimizer: [
64+
new TerserPlugin({
65+
cache: true,
66+
parallel: true,
67+
terserOptions: {
68+
keep_classnames: true,
69+
keep_fnames: true,
70+
},
71+
}),
72+
],
73+
},
74+
externals,
75+
};
76+
77+
const vendorConfig = {
78+
mode: 'production',
79+
entry: './src/vendor.js',
80+
output: {
81+
path: resolve('./vendor'),
82+
filename: 'vendor.js',
83+
},
84+
module: {
85+
rules: [
86+
{
87+
test: /\.(sa|sc|c)ss$/,
88+
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'resolve-url-loader' ],
89+
}, {
90+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
91+
loader: 'url-loader',
92+
},
93+
],
94+
},
95+
plugins: [ new MiniCssExtractPlugin({ filename: 'vendor.css' }) ],
96+
};
97+
98+
module.exports = prodConfig;
99+
100+
module.exports = env => ({
101+
dev: merge(commonConfig, devConfig),
102+
prod: merge(commonConfig, prodConfig),
103+
vendor: vendorConfig,
104+
})[env];
105+

0 commit comments

Comments
 (0)