Skip to content

Commit 1f7220e

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #796 from rvsia/carbonMapper
feat(carbon): introduce carbon mapper
2 parents 9211221 + d532667 commit 1f7220e

Some content is hidden

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

69 files changed

+3479
-17
lines changed

‎packages/carbon-component-mapper/.gitignore

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

‎packages/carbon-component-mapper/.npmignore

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

‎packages/carbon-component-mapper/LICENSE

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

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

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

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

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

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

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

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const TerserPlugin = require('terser-webpack-plugin');
2+
const HtmlWebPackPlugin = require('html-webpack-plugin');
3+
const resolve = require('path').resolve;
4+
const merge = require('webpack-merge');
5+
6+
const commonConfig = {
7+
devtool: "source-map",
8+
module: {
9+
rules: [{
10+
test: /\.(js|jsx)$/,
11+
exclude: /node_modules/,
12+
use: {
13+
loader: 'babel-loader',
14+
},
15+
}, {
16+
test: /\.(ts|tsx)$/,
17+
exclude: /node_modules/,
18+
use: {
19+
loader: 'ts-loader',
20+
},
21+
}, {
22+
test: /\.(sa|sc|c)ss$/,
23+
use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],
24+
}, {
25+
test: /\.(png|jpg|gif|svg|woff|ttf|eot)/,
26+
loader: 'url-loader',
27+
},
28+
],
29+
},
30+
};
31+
32+
const htmlPlugin = new HtmlWebPackPlugin({
33+
template: './demo/index.html',
34+
filename: './index.html',
35+
});
36+
37+
const devConfig = {
38+
mode: 'development',
39+
entry: './demo/index.js',
40+
output: {
41+
path: resolve('../dist'),
42+
filename: '[name].[hash].js',
43+
},
44+
devtool: 'source-map',
45+
plugins: [ htmlPlugin ],
46+
};
47+
48+
const package = {
49+
commonjs: 'package',
50+
commonjs2: 'package',
51+
amd: 'package',
52+
root: 'package',
53+
};
54+
55+
const externals = {
56+
'package': package,
57+
};
58+
59+
const prodConfig = {
60+
mode: 'development',
61+
entry: './src/index.js',
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+
output: {
75+
path: resolve('./dist'),
76+
library: '[name]',
77+
libraryTarget: 'umd',
78+
filename: 'index.js',
79+
umdNamedDefine: true,
80+
globalObject: 'this',
81+
},
82+
externals,
83+
};
84+
85+
module.exports = env => ({
86+
dev: merge(commonConfig, devConfig),
87+
prod: merge(commonConfig, prodConfig),
88+
})[env];
89+

0 commit comments

Comments
 (0)