Skip to content

Commit 4a4d4a4

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #817 from data-driven-forms/carbon
Introduce Carbon mapper
2 parents b0b528a + 57ac9ad commit 4a4d4a4

File tree

103 files changed

+6187
-25
lines changed

Some content is hidden

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

103 files changed

+6187
-25
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: 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%2Fcarbon-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fcarbon-component-mapper)
2+
[![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)
3+
[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)
4+
5+
[![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)
6+
7+
carbon component mapper for [Data Driven Forms](https://github.com/data-driven-forms/react-forms).
8+
9+
:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:
10+
11+
**Table of Contents**
12+
13+
- [Installation](#installation)
14+
- [React Form Renderer](#react-form-renderer)
15+
- [Carbon Mapper](#carbon-mapper)
16+
- [Usage](#usage)
17+
- [Basic provided components](#basic-provided-components)
18+
- [Useful links](#useful-links)
19+
- [Development setup](#development-setup)
20+
- [Tests](#tests)
21+
- [Commits](#commits)
22+
- [Changes to documentation](#changes-to-documentation)
23+
- [Contribution](#contribution)
24+
- [LICENSE](#license)
25+
26+
### Installation
27+
28+
You neet to add React Form Renderer
29+
30+
#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
31+
32+
```console
33+
$ npm install @data-driven-forms/react-form-renderer -S
34+
```
35+
36+
```console
37+
$ yarn add @data-driven-forms/react-form-renderer
38+
```
39+
40+
#### [Carbon Mapper](https://data-driven-forms.org/mappers/carbon-component-mapper)
41+
42+
```console
43+
$ npm install @data-driven-forms/carbon-component-mapper -S
44+
```
45+
46+
```console
47+
$ yarn add @data-driven-forms/carbon-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, FormTemplate } from '@data-driven-forms/carbon-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+
FormTemplate={FormTemplate}
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+
- Dual list select
87+
- Field array
88+
- Switch
89+
- Radio buttons
90+
- Date picker
91+
- Time picker
92+
- Tabs
93+
- Slider
94+
- Sub-form
95+
- Wizard
96+
97+
### Useful links
98+
99+
- [Data Driven Forms documentation](https://data-driven-forms.org/)
100+
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
101+
- [Carbon Mapper NPM](https://www.npmjs.com/package/@data-driven-forms/carbon-component-mapper)
102+
- [Carbon Design System documentation](https://www.carbondesignsystem.com/)
103+
- [Carbon React Compononents storybook](https://react.carbondesignsystem.com/)
104+
105+
### Development setup
106+
107+
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.
108+
109+
1. Install
110+
111+
```console
112+
yarn install
113+
```
114+
115+
2. Build
116+
117+
```console
118+
yarn build
119+
```
120+
121+
3. Run a package
122+
123+
Each package has a small playground `package/demo`, where you can test your changes.
124+
125+
```console
126+
cd packages/carbon-component-mapper
127+
yarn start
128+
```
129+
130+
4. How to clean?
131+
132+
```console
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/carbon-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(carbon): 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 `carbon`, `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 `react-renderer-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/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)