Skip to content

Commit 5630a26

Browse files
Hyperkid123Hyperkid123
committed
Use env based builds in pf4 component mapper.
1 parent 14e2282 commit 5630a26

31 files changed

+216
-109
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"eslint-plugin-prettier": "^3.1.2",
5555
"eslint-plugin-react": "^7.18.3",
5656
"eslint-plugin-react-hooks": "^2.4.0",
57+
"glob": "^7.1.6",
5758
"identity-obj-proxy": "^3.0.0",
5859
"jest": "^24.8.0",
5960
"lerna": "^3.13.1",

‎packages/common/babel.config.js

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,133 @@
1+
require.extensions['.css'] = () => undefined;
2+
const path = require('path');
3+
const glob = require('glob');
4+
5+
const mapper = {
6+
TextVariants: 'Text',
7+
ButtonVariant: 'Button',
8+
DropdownPosition: 'dropdownConstants',
9+
TextListVariants: 'TextList',
10+
TextListItemVariants: 'TextListItem'
11+
};
12+
13+
const camelToSnake = (string) => {
14+
return string
15+
.replace(/[\w]([A-Z])/g, function(m) {
16+
return m[0] + '-' + m[1];
17+
})
18+
.toLowerCase();
19+
};
20+
121
module.exports = {
222
extends: '../../babel.config.js',
23+
env: {
24+
cjs: {
25+
plugins: [
26+
[
27+
'transform-imports',
28+
{
29+
'@data-driven-forms/react-form-renderer': {
30+
transform: (importName) => `@data-driven-forms/react-form-renderer/dist/cjs/${camelToSnake(importName)}`,
31+
preventFullImport: true
32+
}
33+
},
34+
'@data-driven-forms/react-form-renderer-CJS'
35+
],
36+
[
37+
'transform-imports',
38+
{
39+
'@patternfly/react-core': {
40+
transform: (importName) => {
41+
let res;
42+
const files = glob.sync(
43+
path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/js/**/${mapper[importName] || importName}.js`)
44+
);
45+
if (files.length > 0) {
46+
res = files[0];
47+
} else {
48+
throw new Error(`File with importName ${importName} does not exist`);
49+
}
50+
51+
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
52+
res = res.replace(/^\//, '');
53+
return res;
54+
},
55+
preventFullImport: false,
56+
skipDefaultConversion: true
57+
}
58+
},
59+
'react-core-CJS'
60+
],
61+
62+
[
63+
'transform-imports',
64+
{
65+
'@patternfly/react-icons': {
66+
transform: (importName) =>
67+
`@patternfly/react-icons/dist/js/icons/${importName
68+
.split(/(?=[A-Z])/)
69+
.join('-')
70+
.toLowerCase()}`,
71+
preventFullImport: true
72+
}
73+
},
74+
'react-icons-CJS'
75+
]
76+
]
77+
},
78+
esm: {
79+
plugins: [
80+
[
81+
'transform-imports',
82+
{
83+
'@data-driven-forms/react-form-renderer': {
84+
transform: (importName) => `@data-driven-forms/react-form-renderer/dist/esm/${camelToSnake(importName)}`,
85+
preventFullImport: true
86+
}
87+
},
88+
'@data-driven-forms/react-form-renderer-ESM'
89+
],
90+
[
91+
'transform-imports',
92+
{
93+
'@patternfly/react-core': {
94+
transform: (importName) => {
95+
let res;
96+
const files = glob.sync(
97+
path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/esm/**/${mapper[importName] || importName}.js`)
98+
);
99+
if (files.length > 0) {
100+
res = files[0];
101+
} else {
102+
throw new Error(`File with importName ${importName} does not exist`);
103+
}
104+
105+
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
106+
res = res.replace(/^\//, '');
107+
return res;
108+
},
109+
preventFullImport: false,
110+
skipDefaultConversion: true
111+
}
112+
},
113+
'react-core-ESM'
114+
],
115+
116+
[
117+
'transform-imports',
118+
{
119+
'@patternfly/react-icons': {
120+
transform: (importName) =>
121+
`@patternfly/react-icons/dist/esm/icons/${importName
122+
.split(/(?=[A-Z])/)
123+
.join('-')
124+
.toLowerCase()}`,
125+
preventFullImport: true
126+
}
127+
},
128+
'react-icons-ESM'
129+
]
130+
]
131+
}
132+
}
3133
};

‎packages/pf4-component-mapper/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
"license": "Apache-2.0",
88
"scripts": {
99
"start": "webpack-dev-server --env dev --config ./config/webpack.config.js --open --hot",
10-
"build": "rollup -c ./rollup.config.js",
10+
"build": "yarn build:cjs && yarn build:esm && yarn build:umd",
11+
"build:cjs": "BABEL_ENV=cjs rollup -c ./rollup.config.js --format=cjs --environment FORMAT:cjs",
12+
"build:esm": "BABEL_ENV=esm rollup -c ./rollup.config.js --format=esm --environment FORMAT:esm",
13+
"build:umd": "rollup -c ./rollup.config.js --format=umd --environment FORMAT:umd",
1114
"release": "semantic-release"
1215
},
1316
"repository": "[email protected]:data-driven-forms/react-forms.git",

‎packages/pf4-component-mapper/rollup.config.js

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
1212
import glob from 'glob';
1313
import path from 'path';
1414

15-
const outputPaths = glob.sync(path.resolve(__dirname, './src/components/*.js'));
15+
const outputPaths = glob.sync(path.resolve(__dirname, './src/files/*.js'));
1616

1717
const pf4Externals = createFilter(
1818
[
@@ -21,6 +21,7 @@ const pf4Externals = createFilter(
2121
'prop-types',
2222
'@data-driven-forms/react-form-renderer',
2323
'@data-driven-forms/react-form-renderer/dist/cjs/**',
24+
'@patternfly/react-core',
2425
'@patternfly/react-core/**',
2526
'@patternfly/react-icons/**'
2627
],
@@ -39,7 +40,7 @@ const globals = {
3940
const babelOptions = {
4041
exclude: /node_modules/,
4142
runtimeHelpers: true,
42-
configFile: '../../babel.config.js'
43+
configFile: './babel.config.js'
4344
};
4445

4546
const commonjsOptions = {
@@ -64,31 +65,19 @@ const plugins = [
6465
sourcemaps()
6566
];
6667

67-
export default [
68-
...['cjs', 'esm'].map((env) => ({
69-
input: ['./src/index.js', ...outputPaths],
70-
output: {
71-
dir: `./dist/${env}`,
72-
format: env,
73-
name: '@data-driven-forms/pf4-component-mapper',
74-
exports: 'named',
75-
globals,
76-
sourcemap: true
77-
},
78-
external: pf4Externals,
79-
plugins
80-
})),
81-
{
82-
input: './src/index.js',
83-
output: {
84-
file: `./dist/umd/index.js`,
85-
format: 'umd',
86-
name: '@data-driven-forms/pf4-component-mapper',
87-
exports: 'named',
88-
globals,
89-
sourcemap: true
90-
},
91-
external: pf4Externals,
92-
plugins
93-
}
94-
];
68+
export default {
69+
input: process.env.FORMAT === 'umd' ? './src/index.js' : ['./src/index.js', ...outputPaths],
70+
output: {
71+
...(process.env.FORMAT === 'umd'
72+
? {
73+
file: `./dist/umd/index.js`
74+
}
75+
: { dir: `./dist/${process.env.FORMAT}` }),
76+
name: '@data-driven-forms/pf4-component-mapper',
77+
exports: 'named',
78+
globals,
79+
sourcemap: true
80+
},
81+
external: pf4Externals,
82+
plugins
83+
};

‎packages/pf4-component-mapper/src/common/form-group.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
2-
import { FormGroup as Pf4FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
3-
import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
4-
import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
2+
import { FormGroup as Pf4FormGroup, TextContent, Text, TextVariants } from '@patternfly/react-core';
53
import PropTypes from 'prop-types';
64

75
const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id }) => {

‎packages/pf4-component-mapper/src/common/multiple-choice-list.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
4+
import { Checkbox } from '@patternfly/react-core';
55

66
import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
77
import FormGroup from './form-group';

‎packages/pf4-component-mapper/src/files/checkbox.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import MultipleChoiceList from '../common/multiple-choice-list';
44
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import FormGroup from '../common/form-group';
6-
import { Checkbox as Pf4Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
6+
import { Checkbox as Pf4Checkbox } from '@patternfly/react-core';
77
import IsRequired from '../common/is-required';
88

99
const SingleCheckbox = (props) => {

‎packages/pf4-component-mapper/src/files/date-picker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
2+
import { TextInput } from '@patternfly/react-core';
33
import PropTypes from 'prop-types';
44
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import FormGroup from '../common/form-group';

‎packages/pf4-component-mapper/src/files/dual-list-select.js

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,31 @@ import React, { useReducer } from 'react';
22
import PropTypes from 'prop-types';
33
import isEqual from 'lodash/isEqual';
44

5-
import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid/index';
6-
7-
import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
8-
import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
9-
import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
10-
import { Button, ButtonVariant } from '@patternfly/react-core/dist/js/components/Button/Button';
11-
import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye/Bullseye';
12-
import { InputGroup } from '@patternfly/react-core/dist/js/components/InputGroup/InputGroup';
13-
import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
5+
import {
6+
TextInput,
7+
InputGroup,
8+
Bullseye,
9+
Button,
10+
ButtonVariant,
11+
FormGroup,
12+
Grid,
13+
GridItem,
14+
Text,
15+
TextVariants,
16+
TextContent
17+
} from '@patternfly/react-core';
1418

1519
import { DataToolbar, DataToolbarItem, DataToolbarContent } from '@patternfly/react-core/dist/js/experimental';
1620

17-
import AngleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-right-icon';
18-
import AngleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-left-icon';
19-
import AngleDoubleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-double-right-icon';
20-
import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-double-left-icon';
21-
import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
22-
23-
import SortAlphaUp from '@patternfly/react-icons/dist/js/icons/sort-alpha-up-icon';
24-
import SortAlphaDown from '@patternfly/react-icons/dist/js/icons/sort-alpha-down-icon';
21+
import {
22+
SortAlphaDownIcon,
23+
SortAlphaUpIcon,
24+
SearchIcon,
25+
AngleDoubleLeftIcon,
26+
AngleDoubleRightIcon,
27+
AngleRightIcon,
28+
AngleLeftIcon
29+
} from '@patternfly/react-icons';
2530

2631
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
2732

@@ -89,7 +94,7 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, value, placeholde
8994
</DataToolbarItem>
9095
<DataToolbarItem>
9196
<Button onClick={onSort} title={sortTitle} variant="plain">
92-
{!sortDirection ? <SortAlphaDown size="md" /> : <SortAlphaUp size="md" />}
97+
{!sortDirection ? <SortAlphaDownIcon size="md" /> : <SortAlphaUpIcon size="md" />}
9398
</Button>
9499
</DataToolbarItem>
95100
</DataToolbarContent>

‎packages/pf4-component-mapper/src/files/field-array.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@ import React, { Fragment } from 'react';
22
import PropTypes from 'prop-types';
33
import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
44

5-
import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid';
6-
import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye';
7-
import { FormHelperText } from '@patternfly/react-core/dist/js/components/Form/FormHelperText';
5+
import { Bullseye, FormHelperText, Grid, GridItem } from '@patternfly/react-core';
86

9-
import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon';
10-
import AddCircleOIcon from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
7+
import { AddCircleOIcon, CloseIcon } from '@patternfly/react-icons';
118

129
import './final-form-array.scss';
1310
import { useFieldApi } from '@data-driven-forms/react-form-renderer';

0 commit comments

Comments
 (0)