Skip to content

Commit ea36b35

Browse files
rvsiarvsia
committed
Add mapper generator
1 parent 35b9d03 commit ea36b35

Some content is hidden

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

41 files changed

+1993
-5
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
/**/coverage
55
/**/vendor.js
66
/**/*.config.js
7+
/templates/**/*.*

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"release": "semantic-release",
1717
"codecov": "codecov",
1818
"start-demo": "lerna run start --scope=@data-driven-forms/react-render-demo",
19-
"lint": "yarn eslint ."
19+
"lint": "yarn eslint .",
20+
"generate-template": "node ./scripts/generate-mapper.js"
2021
},
2122
"workspaces": [
2223
"packages/**"
@@ -29,7 +30,8 @@
2930
"collectCoverageFrom": [
3031
"<rootDir>/packages/**/src/**/*.js",
3132
"!<rootDir>/packages/react-renderer-demo/**/*.js",
32-
"!<rootDir>/packages/**/dist"
33+
"!<rootDir>/packages/**/dist",
34+
"!<rootDir>/templates/**/*.js"
3335
],
3436
"moduleNameMapper": {
3537
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
@@ -58,9 +60,12 @@
5860
"eslint-plugin-react-hooks": "^2.4.0",
5961
"glob": "^7.1.6",
6062
"identity-obj-proxy": "^3.0.0",
63+
"inquirer": "^7.1.0",
6164
"jest": "^24.8.0",
6265
"lerna": "^3.13.1",
66+
"ncp": "^2.0.0",
6367
"prettier": "^1.19.1",
68+
"replace-in-file": "^6.0.0",
6469
"semantic-release": "^15.13.3",
6570
"terser-webpack-plugin": "^1.3.0"
6671
},

‎packages/common/.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*
2+
3+
!dist

‎packages/react-renderer-demo/src/app/pages/renderer/development-setup.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,16 @@ All packages are releasing together and they share the version number.
8787

8888
If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!
8989

90+
# Generating a mapper template
91+
92+
To generate a mapper template, run:
93+
94+
```bash
95+
yarn generate-template
96+
```
97+
98+
This command starts a CLI, that provides an interface for generating mappers. A mapper folder will be created and it will be populated with all neccesary files.
99+
90100
</Grid>
91101
<Grid item xs={false} md={2}>
92102
<ListOfContents file="renderer/development-setup" />

‎scripts/generate-mapper.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* eslint-disable no-console */
2+
const inquirer = require('inquirer');
3+
const replace = require('replace-in-file');
4+
const ncp = require('ncp').ncp;
5+
const path = require('path');
6+
7+
const QUESTIONS = [
8+
{
9+
name: 'componentmapper',
10+
type: 'input',
11+
message: 'Project name (i.e.: pf4, pf3, mui, blueprint, etc.):',
12+
validate(input) {
13+
if (/^([A-Za-z\d_-])+$/.test(input)) {
14+
return true;
15+
} else {
16+
return 'Project name may only include letters or numbers.';
17+
}
18+
}
19+
}
20+
];
21+
22+
inquirer.prompt(QUESTIONS).then(async ({ componentmapper }) => {
23+
console.log('Creating ', componentmapper, '-component-mapper');
24+
25+
console.log('Copying template');
26+
await ncp('./templates/component-mapper', `./packages/${componentmapper}-component-mapper`, {}, async () => {
27+
console.log('Replacing strings');
28+
29+
const options = {
30+
files: [
31+
path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/README.md`),
32+
path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/package.json`),
33+
path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/rollup.config.js`),
34+
path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/demo/index.js`)
35+
],
36+
from: /\{\{componentmapper\}\}/g,
37+
to: componentmapper
38+
};
39+
40+
try {
41+
await replace(options);
42+
} catch (e) {
43+
console.error('Error occurred:', e);
44+
}
45+
46+
console.log(`
47+
Next steps:
48+
49+
1. Update styles in "packages/${componentmapper}-component-mapper/demo/index.html"
50+
2. Add dependencies in "packages/${componentmapper}-component-mapper/package.json",
51+
3. Mark the dependencies as globals/external in "packages/${componentmapper}-component-mapper/rollup.config.js"
52+
4. (optional) Transform import to allow threeshake (bundle size optimization) in "packages/common/babel.config.js"
53+
5. Have a fun and make some magic! :-)
54+
55+
Please visit https://data-driven-forms.org for more information.
56+
57+
(After your mapper is done, consider adding it to the documentation page.)
58+
`);
59+
});
60+
});

‎templates/component-mapper/.gitignore

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

‎templates/component-mapper/.npmignore

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

‎templates/component-mapper/LICENSE

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

‎templates/component-mapper/README.md

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
[![npm version](https://badge.fury.io/js/%40data-driven-forms%2F{{componentmapper}}-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2F{{componentmapper}}-component-mapper)
2+
3+
[![Data Driven Form logo](images/logo.png)](https://data-driven-forms.org/)
4+
5+
{{componentmapper}} 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+
- [{{componentmapper}} 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+
Optionally you can install one of provided mappers:
39+
40+
#### [{{componentmapper}} Mapper](https://www.npmjs.com/package/@data-driven-forms/{{componentmapper}}-component-mapper)
41+
42+
```console
43+
$ npm install @data-driven-forms/{{componentmapper}}-component-mapper -S
44+
```
45+
46+
```console
47+
$ yarn add @data-driven-forms/{{componentmapper}}-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/{{componentmapper}}-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+
- 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+
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
99+
- [{{componentmapper}} Mapper](https://www.npmjs.com/package/@data-driven-forms/{{componentmapper}}-component-mapper)
100+
101+
102+
### Development setup
103+
104+
Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lerna), 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/{{componentmapper}}-component-mapper
124+
yarn start
125+
```
126+
127+
4. How to clean?
128+
129+
```console
130+
rm yarn.lock
131+
yarn lerna clean # will delete all node_modules
132+
```
133+
134+
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.
135+
136+
#### Tests
137+
138+
Tests needed to be run from the core folder.
139+
140+
```console
141+
yarn test
142+
143+
yarn test packages/pf3-component-mapper
144+
```
145+
146+
#### Commits
147+
148+
Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)
149+
150+
Format:
151+
152+
```
153+
[type]([package]): message
154+
155+
fix({{componentmapper}}): title accepts node
156+
```
157+
158+
Types:
159+
- `feat`: a new feature, will trigger new `_.X._` release
160+
- `fix`: a fix, will trigger new `_._.X` release
161+
162+
Packages:
163+
- Please describe which package is being changed `pf3`, `renderer`, ...
164+
165+
Please, do not use Semantic Release, if you update only the demo.
166+
167+
All packages are releasing together and they share the version number.
168+
169+
#### Changes to documentation
170+
171+
If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!
172+
173+
### Contribution
174+
175+
We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:
176+
177+
### LICENSE
178+
179+
Apache License 2.0

‎templates/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

0 commit comments

Comments
 (0)