From 3629044babb0983ee84b45599f5e73297aea401d Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 2 Feb 2026 13:46:56 +0100 Subject: [PATCH 1/5] chore: remove babel and ts config symlinks --- packages/ant-component-mapper/babel.config.js | 239 +++++++++++++++++- packages/ant-component-mapper/tsconfig.json | 18 +- .../babel.config.js | 239 +++++++++++++++++- .../blueprint-component-mapper/tsconfig.json | 18 +- .../carbon-component-mapper/babel.config.js | 239 +++++++++++++++++- .../carbon-component-mapper/tsconfig.json | 18 +- packages/mui-component-mapper/babel.config.js | 239 +++++++++++++++++- packages/mui-component-mapper/tsconfig.json | 18 +- packages/parsers/babel.config.js | 239 +++++++++++++++++- packages/pf4-component-mapper/babel.config.js | 239 +++++++++++++++++- packages/pf4-component-mapper/tsconfig.json | 18 +- packages/react-form-renderer/babel.config.js | 1 - .../suir-component-mapper/babel.config.js | 239 +++++++++++++++++- packages/suir-component-mapper/tsconfig.json | 18 +- 14 files changed, 1768 insertions(+), 14 deletions(-) mode change 120000 => 100644 packages/ant-component-mapper/babel.config.js mode change 120000 => 100644 packages/ant-component-mapper/tsconfig.json mode change 120000 => 100644 packages/blueprint-component-mapper/babel.config.js mode change 120000 => 100644 packages/blueprint-component-mapper/tsconfig.json mode change 120000 => 100644 packages/carbon-component-mapper/babel.config.js mode change 120000 => 100644 packages/carbon-component-mapper/tsconfig.json mode change 120000 => 100644 packages/mui-component-mapper/babel.config.js mode change 120000 => 100644 packages/mui-component-mapper/tsconfig.json mode change 120000 => 100644 packages/parsers/babel.config.js mode change 120000 => 100644 packages/pf4-component-mapper/babel.config.js mode change 120000 => 100644 packages/pf4-component-mapper/tsconfig.json delete mode 120000 packages/react-form-renderer/babel.config.js mode change 120000 => 100644 packages/suir-component-mapper/babel.config.js mode change 120000 => 100644 packages/suir-component-mapper/tsconfig.json diff --git a/packages/ant-component-mapper/babel.config.js b/packages/ant-component-mapper/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/ant-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/ant-component-mapper/babel.config.js b/packages/ant-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/ant-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/ant-component-mapper/tsconfig.json b/packages/ant-component-mapper/tsconfig.json deleted file mode 120000 index e37858de7..000000000 --- a/packages/ant-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../common/tsconfig.json \ No newline at end of file diff --git a/packages/ant-component-mapper/tsconfig.json b/packages/ant-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/ant-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file diff --git a/packages/blueprint-component-mapper/babel.config.js b/packages/blueprint-component-mapper/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/blueprint-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/blueprint-component-mapper/babel.config.js b/packages/blueprint-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/blueprint-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/blueprint-component-mapper/tsconfig.json b/packages/blueprint-component-mapper/tsconfig.json deleted file mode 120000 index e37858de7..000000000 --- a/packages/blueprint-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../common/tsconfig.json \ No newline at end of file diff --git a/packages/blueprint-component-mapper/tsconfig.json b/packages/blueprint-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/blueprint-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file diff --git a/packages/carbon-component-mapper/babel.config.js b/packages/carbon-component-mapper/babel.config.js deleted file mode 120000 index 12c976bac..000000000 --- a/packages/carbon-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../../packages/common/babel.config.js \ No newline at end of file diff --git a/packages/carbon-component-mapper/babel.config.js b/packages/carbon-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/carbon-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/carbon-component-mapper/tsconfig.json b/packages/carbon-component-mapper/tsconfig.json deleted file mode 120000 index ca44a12b3..000000000 --- a/packages/carbon-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../../packages/common/tsconfig.json \ No newline at end of file diff --git a/packages/carbon-component-mapper/tsconfig.json b/packages/carbon-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/carbon-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file diff --git a/packages/mui-component-mapper/babel.config.js b/packages/mui-component-mapper/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/mui-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/mui-component-mapper/babel.config.js b/packages/mui-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/mui-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/mui-component-mapper/tsconfig.json b/packages/mui-component-mapper/tsconfig.json deleted file mode 120000 index e37858de7..000000000 --- a/packages/mui-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../common/tsconfig.json \ No newline at end of file diff --git a/packages/mui-component-mapper/tsconfig.json b/packages/mui-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/mui-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file diff --git a/packages/parsers/babel.config.js b/packages/parsers/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/parsers/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/parsers/babel.config.js b/packages/parsers/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/parsers/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/pf4-component-mapper/babel.config.js b/packages/pf4-component-mapper/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/pf4-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/pf4-component-mapper/babel.config.js b/packages/pf4-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/pf4-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/pf4-component-mapper/tsconfig.json b/packages/pf4-component-mapper/tsconfig.json deleted file mode 120000 index e37858de7..000000000 --- a/packages/pf4-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../common/tsconfig.json \ No newline at end of file diff --git a/packages/pf4-component-mapper/tsconfig.json b/packages/pf4-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/pf4-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file diff --git a/packages/react-form-renderer/babel.config.js b/packages/react-form-renderer/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/react-form-renderer/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/suir-component-mapper/babel.config.js b/packages/suir-component-mapper/babel.config.js deleted file mode 120000 index f76748ec5..000000000 --- a/packages/suir-component-mapper/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -../common/babel.config.js \ No newline at end of file diff --git a/packages/suir-component-mapper/babel.config.js b/packages/suir-component-mapper/babel.config.js new file mode 100644 index 000000000..8de97ee7b --- /dev/null +++ b/packages/suir-component-mapper/babel.config.js @@ -0,0 +1,238 @@ +require.extensions['.css'] = () => undefined; +const path = require('path'); +const glob = require('glob'); + +const mapper = { + ContentVariants: 'Content', + ButtonVariant: 'Button', + TextListVariants: 'TextList', + TextListItemVariants: 'TextListItem', + FlexItem: 'Flex', + FormFieldGroup: 'Form', + FormFieldGroupHeader: 'Form', + FormHelperText: 'Form', + FormGroup: 'Form', + GridItem: 'Grid', + Content: 'Content', + HelperTextItem: 'HelperText', + ActionGroup: 'Form', + Tab: 'Tabs', + TabTitleText: 'Tabs', + WizardNavItem: 'Wizard', + WizardNav: 'Wizard', + WizardBody: 'Wizard', + WizardHeader: 'Wizard', + ActionListGroup: 'ActionList', + ActionListItem: 'ActionList', +}; + +const blueprintMapper = { + Checkbox: 'components/forms/controls', + FormGroup: 'components/forms/formGroup', + Intent: 'common/intent', + Button: 'components/button/buttons', + H1: 'components/html/html', + H2: 'components/html/html', + H3: 'components/html/html', + H4: 'components/html/html', + RadioGroup: 'components/forms/radioGroup', + MenuItem: 'components/menu/menuItem', + Switch: 'components/forms/controls', + Tab: 'components/tabs/tab', + InputGroup: 'components/forms/inputGroup', + TextArea: 'components/forms/textArea', + Menu: 'components/menu/menu', + ButtonGroup: 'components/button/buttonGroup', + ControlGroup: 'components/forms/controlGroup' +}; + +const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); +const pascalToKebabCase = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/, '-$1') + .toLowerCase(); + +const pascalToKebabCaseCarbonIcons = (name) => + name.charAt(0).toLowerCase() + + name + .slice(1) + .replace(/([A-Z])/g, '--$1') + .toLowerCase(); + +const createSuirCJSTransform = (env = 'commonjs') => [ + 'transform-imports', + { + 'semantic-ui-react': { + transform: (importName) => { + let res; + const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); + + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: false + } + }, + `semantic-ui-react-${env}` +]; + +const createMuiTransform = (env) => [ + 'transform-imports', + { + '@mui/x-date-pickers': { + transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), + preventFullImport: false, + skipDefaultConversion: true + }, + '@mui/material': { + transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), + preventFullImport: false, + skipDefaultConversion: false + } + }, + `MUI-${env || 'commonjs'}` +]; + +const createPfReactTransform = (env) => [ + 'transform-imports', + { + '@patternfly/react-core': { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + }, + preventFullImport: false, + skipDefaultConversion: true + }, + '@patternfly/react-icons': { + transform: (importName) => + `@patternfly/react-icons/dist/dynamic/icons/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}`, + preventFullImport: true + }, + }, + `pf-react-${env}` +]; + +const createBluePrintTransform = (env) => [ + 'transform-imports', + { + '@blueprintjs/core': { + transform: (importName) => + `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || + `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, + preventFullImport: false, + skipDefaultConversion: true + } + }, + `BLUEPRINT-${env}` +]; + +const createAntTransform = (env) => [ + 'transform-imports', + { + antd: { + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName + .split(/(?=[A-Z])/) + .join('-') + .toLowerCase()}/index.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(/^.*node_modules\//, ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `ant-${env}` +]; + +const createReactJSSTransform = (env) => [ + 'transform-imports', + { + 'react-jss': { + skipDefaultConversion: true, + transform: (importName) => { + let res; + const files = glob.sync( + path.resolve( + __dirname, + `../../node_modules/react-jss/dist/react-jss.${env}.js` + ) + ); + if (files.length > 0) { + res = files[0]; + } else { + throw new Error(`File with importName ${importName} does not exist`); + } + + res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); + res = res.replace(/^\//, ''); + return res; + } + } + }, + `react-jss-${env}` +]; + +module.exports = { + extends: '../../babel.config.js', + env: { + cjs: { + presets: [['@babel/preset-env', { modules: 'commonjs' }]], + plugins: [ + createSuirCJSTransform('commonjs'), + createMuiTransform(), + createPfReactTransform('js'), + createBluePrintTransform('cjs'), + createAntTransform('cjs'), + createReactJSSTransform('cjs') + ] + }, + esm: { + presets: [['@babel/preset-env', { modules: false }]], + plugins: [ + createSuirCJSTransform('es'), + createMuiTransform(), + createPfReactTransform('esm'), + createBluePrintTransform('esm'), + createAntTransform('esm'), + createReactJSSTransform('esm') + ] + } + } +}; \ No newline at end of file diff --git a/packages/suir-component-mapper/tsconfig.json b/packages/suir-component-mapper/tsconfig.json deleted file mode 120000 index e37858de7..000000000 --- a/packages/suir-component-mapper/tsconfig.json +++ /dev/null @@ -1 +0,0 @@ -../common/tsconfig.json \ No newline at end of file diff --git a/packages/suir-component-mapper/tsconfig.json b/packages/suir-component-mapper/tsconfig.json new file mode 100644 index 000000000..da332a59e --- /dev/null +++ b/packages/suir-component-mapper/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "sourceMap": true, + "module": "es6", + "moduleResolution": "node", + "target": "es5", + "lib": ["es2020", "dom"], + "jsx": "preserve", + "allowSyntheticDefaultImports": true, + "noErrorTruncation": true, + "allowJs": true, + "strict": true, + "noEmit": true + }, + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], + "exclude": ["./dist"] +} \ No newline at end of file From ec8e0090f3e146056c69d7875b05a477a3c951e2 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 2 Feb 2026 13:47:35 +0100 Subject: [PATCH 2/5] fix(renderer): update wizard context types --- .../src/renderer-context/renderer-context.ts | 2 +- .../src/wizard-context/wizard-context.ts | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-form-renderer/src/renderer-context/renderer-context.ts b/packages/react-form-renderer/src/renderer-context/renderer-context.ts index d0d8e3831..a6843cf6c 100644 --- a/packages/react-form-renderer/src/renderer-context/renderer-context.ts +++ b/packages/react-form-renderer/src/renderer-context/renderer-context.ts @@ -13,7 +13,7 @@ export interface FormOptions, InitialFormValues unRegisterInputFile?: (name: keyof FormValues) => void; onCancel?: (values: FormValues, ...args: any[]) => void; onReset?: () => void; - onSubmit?: (...args: any[]) => void; + onSubmit?: (...args: any[]) => void | any | Promise; handleSubmit: () => Promise | undefined; onError?: (...args: any[]) => void; clearOnUnmount?: boolean; diff --git a/packages/react-form-renderer/src/wizard-context/wizard-context.ts b/packages/react-form-renderer/src/wizard-context/wizard-context.ts index d78850d40..4e0bdbc96 100644 --- a/packages/react-form-renderer/src/wizard-context/wizard-context.ts +++ b/packages/react-form-renderer/src/wizard-context/wizard-context.ts @@ -2,10 +2,22 @@ import { createContext } from 'react'; import { Field } from '../common-types'; import { FormOptions } from '../renderer-context'; +export type NextStep = + | string + | ((context: { values: any }) => string) + | ((context: { values: any }) => Promise) + | (any & { + stepMapper: { + [key: string]: string; + [key: number]: string; + }; + when: string[] | string; + }); + export interface WizardContextValue { formOptions: FormOptions; crossroads: string[]; - currentStep: { fields: Field[]; name: string; title: string; nextStep?: string }; + currentStep: { fields?: Field[]; name: string; title?: string; nextStep?: NextStep } | undefined; handlePrev: Function; onKeyDown: Function; jumpToStep: Function; @@ -16,6 +28,7 @@ export interface WizardContextValue { maxStepIndex: number; isDynamic: boolean; prevSteps: string[]; + selectNext: Function; } const WizardContext = createContext({} as WizardContextValue); From 757598d11ff4f18fb86ca04f9bdfa5a9639e4e52 Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 2 Feb 2026 13:47:53 +0100 Subject: [PATCH 3/5] fix(renderer): export use field api type --- packages/react-form-renderer/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-form-renderer/src/index.ts b/packages/react-form-renderer/src/index.ts index 028f0a745..6ebd22782 100644 --- a/packages/react-form-renderer/src/index.ts +++ b/packages/react-form-renderer/src/index.ts @@ -13,6 +13,7 @@ export { default as parseCondition } from './parse-condition'; export { default as RendererContext, FormOptions } from './renderer-context'; export { default as schemaErrors } from './schema-errors'; export { default as useFieldApi } from './use-field-api'; +export { UseFieldApiConfig } from './use-field-api'; export { default as useFormApi } from './use-form-api'; export { default as validatorMapper, ValidatorMapper } from './validator-mapper'; export { default as validatorTypes } from './validator-types'; From feb4e4c5e1f36eba9309da003228f857a9757dac Mon Sep 17 00:00:00 2001 From: Martin Marosi Date: Mon, 2 Feb 2026 13:51:49 +0100 Subject: [PATCH 4/5] feat(common): fully migrate to TS --- package-lock.json | 47 +--- packages/common/.gitignore | 2 + packages/common/babel.config.js | 238 ---------------- packages/common/package.json | 8 +- .../dual-list-select/dual-list-select.d.ts | 18 -- .../src/dual-list-select/dual-list-select.js | 99 ------- .../src/dual-list-select/dual-list-select.tsx | 161 +++++++++++ .../common/src/dual-list-select/index.d.ts | 2 - .../dual-list-select/{index.js => index.ts} | 0 .../common/src/dual-list-select/reducer.js | 55 ---- .../common/src/dual-list-select/reducer.ts | 107 +++++++ .../src/form-template/form-template.d.ts | 21 -- .../{form-template.js => form-template.tsx} | 94 +++++-- packages/common/src/form-template/index.js | 2 - .../form-template/{index.d.ts => index.ts} | 0 packages/common/src/hooks/index.js | 1 - .../common/src/hooks/{index.d.ts => index.ts} | 0 packages/common/src/hooks/use-is-mounted.d.ts | 3 - packages/common/src/hooks/use-is-mounted.js | 12 - packages/common/src/hooks/use-is-mounted.ts | 14 + packages/common/src/index.js | 1 - packages/common/src/index.ts | 17 ++ .../common/src/multiple-choice-list/index.js | 2 - .../{index.d.ts => index.ts} | 0 .../multiple-choice-list.d.ts | 13 - .../multiple-choice-list.js | 47 ---- .../multiple-choice-list.tsx | 110 ++++++++ packages/common/src/select/deep-equal.d.ts | 3 - .../select/{deep-equal.js => deep-equal.ts} | 2 +- packages/common/src/select/flat-options.js | 3 - .../{flat-options.d.ts => flat-options.ts} | 5 +- packages/common/src/select/index.d.ts | 4 - .../common/src/select/{index.js => index.ts} | 0 .../src/select/parse-internal-value.d.ts | 2 - ...ernal-value.js => parse-internal-value.ts} | 10 +- packages/common/src/select/select.d.ts | 37 --- .../src/select/{select.js => select.tsx} | 37 ++- packages/common/src/types/shared-types.ts | 45 +++ packages/common/src/use-select/index.js | 2 - .../src/use-select/{index.d.ts => index.ts} | 0 packages/common/src/use-select/reducer.js | 57 ---- packages/common/src/use-select/reducer.ts | 87 ++++++ .../common/src/use-select/use-select.d.ts | 35 --- packages/common/src/use-select/use-select.js | 170 ----------- packages/common/src/use-select/use-select.ts | 220 +++++++++++++++ packages/common/src/utils/fn-to-string.d.ts | 3 - packages/common/src/utils/fn-to-string.js | 3 - packages/common/src/utils/fn-to-string.ts | 3 + packages/common/src/utils/index.d.ts | 2 - packages/common/src/utils/index.js | 2 - packages/common/src/utils/index.ts | 10 + .../common/src/utils/valid-text-fields.d.ts | 28 -- ...id-text-fields.js => valid-text-fields.ts} | 2 +- packages/common/src/wizard/consts.js | 1 - .../src/wizard/{consts.d.ts => consts.ts} | 0 packages/common/src/wizard/enter-handler.js | 29 -- packages/common/src/wizard/enter-handler.ts | 55 ++++ packages/common/src/wizard/index.js | 4 - .../src/wizard/{index.d.ts => index.ts} | 0 packages/common/src/wizard/reducer.js | 170 ----------- packages/common/src/wizard/reducer.ts | 266 ++++++++++++++++++ packages/common/src/wizard/select-next.d.ts | 16 -- packages/common/src/wizard/select-next.js | 17 -- packages/common/src/wizard/select-next.ts | 30 ++ packages/common/src/wizard/wizard.d.ts | 13 - packages/common/src/wizard/wizard.js | 99 ------- packages/common/src/wizard/wizard.tsx | 136 +++++++++ packages/common/tsconfig.cjs.json | 9 + packages/common/tsconfig.esm.json | 9 + packages/common/tsconfig.json | 17 +- 70 files changed, 1418 insertions(+), 1299 deletions(-) delete mode 100644 packages/common/babel.config.js delete mode 100644 packages/common/src/dual-list-select/dual-list-select.d.ts delete mode 100644 packages/common/src/dual-list-select/dual-list-select.js create mode 100644 packages/common/src/dual-list-select/dual-list-select.tsx delete mode 100644 packages/common/src/dual-list-select/index.d.ts rename packages/common/src/dual-list-select/{index.js => index.ts} (100%) delete mode 100644 packages/common/src/dual-list-select/reducer.js create mode 100644 packages/common/src/dual-list-select/reducer.ts delete mode 100644 packages/common/src/form-template/form-template.d.ts rename packages/common/src/form-template/{form-template.js => form-template.tsx} (53%) delete mode 100644 packages/common/src/form-template/index.js rename packages/common/src/form-template/{index.d.ts => index.ts} (100%) delete mode 100644 packages/common/src/hooks/index.js rename packages/common/src/hooks/{index.d.ts => index.ts} (100%) delete mode 100644 packages/common/src/hooks/use-is-mounted.d.ts delete mode 100644 packages/common/src/hooks/use-is-mounted.js create mode 100644 packages/common/src/hooks/use-is-mounted.ts delete mode 100644 packages/common/src/index.js create mode 100644 packages/common/src/index.ts delete mode 100644 packages/common/src/multiple-choice-list/index.js rename packages/common/src/multiple-choice-list/{index.d.ts => index.ts} (100%) delete mode 100644 packages/common/src/multiple-choice-list/multiple-choice-list.d.ts delete mode 100644 packages/common/src/multiple-choice-list/multiple-choice-list.js create mode 100644 packages/common/src/multiple-choice-list/multiple-choice-list.tsx delete mode 100644 packages/common/src/select/deep-equal.d.ts rename packages/common/src/select/{deep-equal.js => deep-equal.ts} (91%) delete mode 100644 packages/common/src/select/flat-options.js rename packages/common/src/select/{flat-options.d.ts => flat-options.ts} (66%) delete mode 100644 packages/common/src/select/index.d.ts rename packages/common/src/select/{index.js => index.ts} (100%) delete mode 100644 packages/common/src/select/parse-internal-value.d.ts rename packages/common/src/select/{parse-internal-value.js => parse-internal-value.ts} (59%) delete mode 100644 packages/common/src/select/select.d.ts rename packages/common/src/select/{select.js => select.tsx} (73%) create mode 100644 packages/common/src/types/shared-types.ts delete mode 100644 packages/common/src/use-select/index.js rename packages/common/src/use-select/{index.d.ts => index.ts} (100%) delete mode 100644 packages/common/src/use-select/reducer.js create mode 100644 packages/common/src/use-select/reducer.ts delete mode 100644 packages/common/src/use-select/use-select.d.ts delete mode 100644 packages/common/src/use-select/use-select.js create mode 100644 packages/common/src/use-select/use-select.ts delete mode 100644 packages/common/src/utils/fn-to-string.d.ts delete mode 100644 packages/common/src/utils/fn-to-string.js create mode 100644 packages/common/src/utils/fn-to-string.ts delete mode 100644 packages/common/src/utils/index.d.ts delete mode 100644 packages/common/src/utils/index.js create mode 100644 packages/common/src/utils/index.ts delete mode 100644 packages/common/src/utils/valid-text-fields.d.ts rename packages/common/src/utils/{valid-text-fields.js => valid-text-fields.ts} (95%) delete mode 100644 packages/common/src/wizard/consts.js rename packages/common/src/wizard/{consts.d.ts => consts.ts} (100%) delete mode 100644 packages/common/src/wizard/enter-handler.js create mode 100644 packages/common/src/wizard/enter-handler.ts delete mode 100644 packages/common/src/wizard/index.js rename packages/common/src/wizard/{index.d.ts => index.ts} (100%) delete mode 100644 packages/common/src/wizard/reducer.js create mode 100644 packages/common/src/wizard/reducer.ts delete mode 100644 packages/common/src/wizard/select-next.d.ts delete mode 100644 packages/common/src/wizard/select-next.js create mode 100644 packages/common/src/wizard/select-next.ts delete mode 100644 packages/common/src/wizard/wizard.d.ts delete mode 100644 packages/common/src/wizard/wizard.js create mode 100644 packages/common/src/wizard/wizard.tsx create mode 100644 packages/common/tsconfig.cjs.json create mode 100644 packages/common/tsconfig.esm.json diff --git a/package-lock.json b/package-lock.json index 856496a17..358c51829 100644 --- a/package-lock.json +++ b/package-lock.json @@ -245,7 +245,6 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.47.0.tgz", "integrity": "sha512-b5hlU69CuhnS2Rqgsz7uSW0t4VqrLMLTPbUpEl0QVz56rsSwr1Sugyogrjb493sWDA+XU1FU5m9eB8uH7MoI0g==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.47.0", "@algolia/requester-browser-xhr": "5.47.0", @@ -453,7 +452,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1096,7 +1094,6 @@ "integrity": "sha512-D+OrJumc9McXNEBI/JmFnc/0uCM2/Y3PEBG3gfV3QIYkKv5pvnpzFrl1kYCrcHJP8nOeFB/SHi1IHz29pNGuew==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, @@ -2022,7 +2019,6 @@ "integrity": "sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-module-imports": "^7.28.6", @@ -3323,7 +3319,6 @@ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", "license": "MIT", - "peer": true, "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", @@ -3358,7 +3353,6 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -3396,7 +3390,6 @@ "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.11.0.tgz", "integrity": "sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==", "license": "MIT", - "peer": true, "dependencies": { "@emotion/utils": "^1.2.1", "html-tokenize": "^2.0.0", @@ -3423,7 +3416,6 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -6793,7 +6785,6 @@ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.23.9", "@mui/core-downloads-tracker": "^5.18.0", @@ -6943,7 +6934,6 @@ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz", "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.23.9", "@mui/private-theming": "^5.17.1", @@ -8115,7 +8105,6 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "license": "MIT", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -8424,7 +8413,6 @@ "integrity": "sha512-6QNqcsRSy1WbAGvjA2DAEx4yyAzwrvT6vd24Kv4xdZHdvF6FmcUbr5J+mLJ1jSOXvpNhZ+RzN37JQ8fSmytEtw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@module-federation/runtime-tools": "0.22.0", "@rspack/binding": "1.7.4", @@ -8555,7 +8543,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -9061,7 +9048,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz", "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==", "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -9113,7 +9099,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz", "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -9447,7 +9432,6 @@ "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.54.0", "@typescript-eslint/types": "8.54.0", @@ -10250,7 +10234,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -10330,7 +10313,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -10395,7 +10377,6 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.47.0.tgz", "integrity": "sha512-AGtz2U7zOV4DlsuYV84tLp2tBbA7RPtLA44jbVH4TTpDcc1dIWmULjHSsunlhscbzDydnjuFlNhflR3nV4VJaQ==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/abtesting": "1.13.0", "@algolia/client-abtesting": "5.47.0", @@ -11614,7 +11595,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -14346,7 +14326,6 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -14445,7 +14424,6 @@ "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -14481,7 +14459,6 @@ "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -15943,7 +15920,6 @@ "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz", "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.10.0" }, @@ -15960,7 +15936,6 @@ "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz", "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==", "license": "MIT", - "peer": true, "peerDependencies": { "final-form": "^4.20.8" } @@ -18341,7 +18316,6 @@ "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -24156,7 +24130,6 @@ "resolved": "https://registry.npmjs.org/next/-/next-15.5.11.tgz", "integrity": "sha512-L2KPiKmqTDpRdeVDdPjhf43g2/VPe0NCNndq7OKDCgOLWtxe1kbr/zXGIZtYY7kZEAjRf7Bj/mwUFSr+tYC2Yg==", "license": "MIT", - "peer": true, "dependencies": { "@next/env": "15.5.11", "@swc/helpers": "0.5.15", @@ -24353,7 +24326,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "dependencies": { "@napi-rs/wasm-runtime": "0.2.4", "@yarnpkg/lockfile": "^1.1.0", @@ -25273,7 +25245,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -25383,7 +25354,6 @@ "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin-prettier.js" }, @@ -25503,7 +25473,6 @@ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -26372,7 +26341,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -26423,7 +26391,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -26461,7 +26428,6 @@ "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz", "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.15.4" }, @@ -26533,8 +26499,7 @@ "version": "19.2.3", "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz", "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/react-jss": { "version": "10.10.0", @@ -27208,7 +27173,6 @@ "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -27336,7 +27300,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -29078,7 +29041,6 @@ "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", "license": "MIT", - "peer": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -29157,8 +29119,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tsutils": { "version": "3.21.0", @@ -29329,7 +29290,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -29899,7 +29859,6 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz", "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==", "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -30008,7 +29967,6 @@ "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", "@webpack-cli/configtest": "^2.1.1", @@ -30723,6 +30681,7 @@ "version": "4.1.8", "license": "Apache-2.0", "dependencies": { + "@data-driven-forms/react-form-renderer": "^4.1.8", "clsx": "^1.0.4", "lodash": "^4.17.15" }, diff --git a/packages/common/.gitignore b/packages/common/.gitignore index 911fcca54..8d8fa6117 100644 --- a/packages/common/.gitignore +++ b/packages/common/.gitignore @@ -87,6 +87,8 @@ vendor !README.md !tsconfig.json !tsconfig.spec.json +!tsconfig.cjs.json +!tsconfig.esm.json !jest.config.ts !generate-typings.js !rollup.config.js diff --git a/packages/common/babel.config.js b/packages/common/babel.config.js deleted file mode 100644 index 5283cadc3..000000000 --- a/packages/common/babel.config.js +++ /dev/null @@ -1,238 +0,0 @@ -require.extensions['.css'] = () => undefined; -const path = require('path'); -const glob = require('glob'); - -const mapper = { - ContentVariants: 'Content', - ButtonVariant: 'Button', - TextListVariants: 'TextList', - TextListItemVariants: 'TextListItem', - FlexItem: 'Flex', - FormFieldGroup: 'Form', - FormFieldGroupHeader: 'Form', - FormHelperText: 'Form', - FormGroup: 'Form', - GridItem: 'Grid', - Content: 'Content', - HelperTextItem: 'HelperText', - ActionGroup: 'Form', - Tab: 'Tabs', - TabTitleText: 'Tabs', - WizardNavItem: 'Wizard', - WizardNav: 'Wizard', - WizardBody: 'Wizard', - WizardHeader: 'Wizard', - ActionListGroup: 'ActionList', - ActionListItem: 'ActionList', -}; - -const blueprintMapper = { - Checkbox: 'components/forms/controls', - FormGroup: 'components/forms/formGroup', - Intent: 'common/intent', - Button: 'components/button/buttons', - H1: 'components/html/html', - H2: 'components/html/html', - H3: 'components/html/html', - H4: 'components/html/html', - RadioGroup: 'components/forms/radioGroup', - MenuItem: 'components/menu/menuItem', - Switch: 'components/forms/controls', - Tab: 'components/tabs/tab', - InputGroup: 'components/forms/inputGroup', - TextArea: 'components/forms/textArea', - Menu: 'components/menu/menu', - ButtonGroup: 'components/button/buttonGroup', - ControlGroup: 'components/forms/controlGroup' -}; - -const pascaltoCamelCase = (name) => name.charAt(0).toLowerCase() + name.slice(1); -const pascalToKebabCase = (name) => - name.charAt(0).toLowerCase() + - name - .slice(1) - .replace(/([A-Z])/, '-$1') - .toLowerCase(); - -const pascalToKebabCaseCarbonIcons = (name) => - name.charAt(0).toLowerCase() + - name - .slice(1) - .replace(/([A-Z])/g, '--$1') - .toLowerCase(); - -const createSuirCJSTransform = (env = 'commonjs') => [ - 'transform-imports', - { - 'semantic-ui-react': { - transform: (importName) => { - let res; - const files = glob.sync(path.resolve(__dirname, `../{..,suir-component-mapper}/node_modules/semantic-ui-react/dist/${env}/**/${importName}.js`)); - - if (files.length > 0) { - res = files[0]; - } else { - throw new Error(`File with importName ${importName} does not exist`); - } - - res = res.replace(/^.*node_modules\//, ''); - res = res.replace(/^\//, ''); - return res; - }, - preventFullImport: false, - skipDefaultConversion: false - } - }, - `semantic-ui-react-${env}` -]; - -const createMuiTransform = (env) => [ - 'transform-imports', - { - '@mui/x-date-pickers': { - transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`), - preventFullImport: false, - skipDefaultConversion: true - }, - '@mui/material': { - transform: (importName) => (env ? `@mui/material/${env}/${importName}` : `@mui/material/${importName}`), - preventFullImport: false, - skipDefaultConversion: false - } - }, - `MUI-${env || 'commonjs'}` -]; - -const createPfReactTransform = (env) => [ - 'transform-imports', - { - '@patternfly/react-core': { - transform: (importName) => { - let res; - const files = glob.sync( - path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`) - ); - if (files.length > 0) { - res = files[0]; - } else { - throw new Error(`File with importName ${importName} does not exist`); - } - - res = res.replace(/^.*node_modules\//, ''); - res = res.replace(/^\//, ''); - return res; - }, - preventFullImport: false, - skipDefaultConversion: true - }, - '@patternfly/react-icons': { - transform: (importName) => - `@patternfly/react-icons/dist/dynamic/icons/${importName - .split(/(?=[A-Z])/) - .join('-') - .toLowerCase()}`, - preventFullImport: true - }, - }, - `pf-react-${env}` -]; - -const createBluePrintTransform = (env) => [ - 'transform-imports', - { - '@blueprintjs/core': { - transform: (importName) => - `@blueprintjs/core/lib/${env}/${blueprintMapper[importName] || - `components/${pascalToKebabCase(importName)}/${pascaltoCamelCase(importName)}`}.js`, - preventFullImport: false, - skipDefaultConversion: true - } - }, - `BLUEPRINT-${env}` -]; - -const createAntTransform = (env) => [ - 'transform-imports', - { - antd: { - transform: (importName) => { - let res; - const files = glob.sync( - path.resolve( - __dirname, - `../{..,ant-component-mapper}/node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName - .split(/(?=[A-Z])/) - .join('-') - .toLowerCase()}/index.js` - ) - ); - if (files.length > 0) { - res = files[0]; - } else { - throw new Error(`File with importName ${importName} does not exist`); - } - - res = res.replace(/^.*node_modules\//, ''); - res = res.replace(/^\//, ''); - return res; - } - } - }, - `ant-${env}` -]; - -const createReactJSSTransform = (env) => [ - 'transform-imports', - { - 'react-jss': { - skipDefaultConversion: true, - transform: (importName) => { - let res; - const files = glob.sync( - path.resolve( - __dirname, - `../../node_modules/react-jss/dist/react-jss.${env}.js` - ) - ); - if (files.length > 0) { - res = files[0]; - } else { - throw new Error(`File with importName ${importName} does not exist`); - } - - res = res.replace(path.resolve(__dirname, '../../node_modules/'), ''); - res = res.replace(/^\//, ''); - return res; - } - } - }, - `react-jss-${env}` -]; - -module.exports = { - extends: '../../babel.config.js', - env: { - cjs: { - presets: [['@babel/preset-env', { modules: 'commonjs' }]], - plugins: [ - createSuirCJSTransform('commonjs'), - createMuiTransform(), - createPfReactTransform('js'), - createBluePrintTransform('cjs'), - createAntTransform('cjs'), - createReactJSSTransform('cjs') - ] - }, - esm: { - presets: [['@babel/preset-env', { modules: false }]], - plugins: [ - createSuirCJSTransform('es'), - createMuiTransform(), - createPfReactTransform('esm'), - createBluePrintTransform('esm'), - createAntTransform('esm'), - createReactJSSTransform('esm') - ] - } - } -}; diff --git a/packages/common/package.json b/packages/common/package.json index 3a7ddcc03..25208fb6a 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -6,10 +6,9 @@ "main": "index.js", "module": "esm/index.js", "scripts": { - "build": "npm run build:cjs && npm run build:esm && npm run build:typings && npm run build:packages", - "build:cjs": "BABEL_ENV=cjs babel src --out-dir ./ --ignore \"src/tests/*\"", - "build:esm": "BABEL_ENV=esm babel src --out-dir ./esm --ignore \"src/tests/*\"", - "build:typings": "node ../../scripts/generate-typings.js", + "build": "npm run build:cjs && npm run build:esm && npm run build:packages", + "build:cjs": "tsc -p tsconfig.cjs.json", + "build:esm": "tsc -p tsconfig.esm.json", "build:packages": "node ../../scripts/generate-packages.js" }, "homepage": "https://data-driven-forms.org/", @@ -21,6 +20,7 @@ }, "devDependencies": {}, "dependencies": { + "@data-driven-forms/react-form-renderer": "^4.1.8", "clsx": "^1.0.4", "lodash": "^4.17.15" }, diff --git a/packages/common/src/dual-list-select/dual-list-select.d.ts b/packages/common/src/dual-list-select/dual-list-select.d.ts deleted file mode 100644 index 48b94efd5..000000000 --- a/packages/common/src/dual-list-select/dual-list-select.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AnyObject, Input } from "@data-driven-forms/react-form-renderer"; - -export type DualListSelectCommonProps< - FieldValue, - SelectProps = {} -> = { - DualListSelect: React.ComponentType; - options: { - [key: string]: any; - label: React.ReactNode, - value: any - }[]; - input: Input; -} & SelectProps & AnyObject; - -declare const DualListSelectCommon: React.ComponentType>; - -export default DualListSelectCommon; \ No newline at end of file diff --git a/packages/common/src/dual-list-select/dual-list-select.js b/packages/common/src/dual-list-select/dual-list-select.js deleted file mode 100644 index 53a950810..000000000 --- a/packages/common/src/dual-list-select/dual-list-select.js +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useReducer } from 'react'; -import isEqual from 'lodash/isEqual'; - -import { useFieldApi } from '@data-driven-forms/react-form-renderer'; - -import reducer, { initialState } from './reducer'; - -const getOptionsGroup = (value, lastClicked, options) => { - const lastIndex = options.map(({ value }) => value.toString()).indexOf(lastClicked.toString()); - const currentIndex = options.map(({ value }) => value.toString()).indexOf(value); - const startIndex = Math.min(lastIndex, currentIndex); - const endIndex = Math.max(lastIndex, currentIndex) + 1; - return [...options.slice(startIndex, endIndex).map(({ value }) => value.toString())]; -}; - -const handleOptionClick = (event, value, options, isRight, dispatch, state) => { - const selectedKey = isRight ? 'selectedLeftValues' : 'selectedRightValues'; - const lastKey = isRight ? 'lastLeftClicked' : 'lastRightClicked'; - if (event.shiftKey && state[lastKey]) { - dispatch({ type: 'setSelectedValue', value, values: getOptionsGroup(value, state[lastKey], options), isRight }); - } else if (event.ctrlKey && state[lastKey]) { - const selectedValues = state[selectedKey].includes(value) ? state[selectedKey].filter((item) => item !== value) : [...state[selectedKey], value]; - - dispatch({ type: 'setSelectedValue', value, values: selectedValues, isRight }); - } else { - dispatch({ type: 'setSelectedValue', value, values: [value], isRight }); - } -}; - -const DualListSelectCommon = (props) => { - const [state, dispatch] = useReducer(reducer, initialState); - - const { DualListSelect, ...rest } = useFieldApi({ - ...props, - FieldProps: { - isEqual: (current, initial) => isEqual([...(current || [])].sort(), [...(initial || [])].sort()), - }, - }); - - const leftValues = rest.options - .filter((option) => !rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterOptions.toLowerCase())) - .sort((a, b) => (state.sortLeftDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); - const rightValues = rest.options - .filter((option) => rest.input.value.includes(option.value) && option.label.toLowerCase().includes(state.filterValue.toLowerCase())) - .sort((a, b) => (state.sortRightDesc ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label))); - - const handleOptionsClick = (event, value) => handleOptionClick(event, value, leftValues, true, dispatch, state); - - const handleValuesClick = (event, value) => handleOptionClick(event, value, rightValues, false, dispatch, state); - - const handleMoveRight = () => { - rest.input.onChange([...rest.input.value, ...state.selectedLeftValues]); - dispatch({ type: 'clearLeftOptions' }); - }; - - const handleMoveLeft = () => { - rest.input.onChange(rest.input.value.filter((value) => !state.selectedRightValues.includes(value))); - dispatch({ type: 'clearRightValues' }); - }; - - const sortOptions = () => dispatch({ type: 'sortOptions' }); - - const sortValues = () => dispatch({ type: 'sortValue' }); - - const filterOptions = (value) => dispatch({ type: 'setFilterOptions', value }); - - const filterValues = (value) => dispatch({ type: 'setFilterValue', value }); - - const handleClearLeftValues = () => { - dispatch({ type: 'clearLeftValues' }); - rest.input.onChange([...rest.input.value, ...leftValues.map(({ value }) => value)]); - }; - - const handleClearRightValues = () => { - dispatch({ type: 'clearRightValues' }); - rest.input.onChange([...rest.input.value.filter((val) => !rightValues.find(({ value }) => val === value))]); - }; - - return ( - - ); -}; - -export default DualListSelectCommon; diff --git a/packages/common/src/dual-list-select/dual-list-select.tsx b/packages/common/src/dual-list-select/dual-list-select.tsx new file mode 100644 index 000000000..bf6fa0a5a --- /dev/null +++ b/packages/common/src/dual-list-select/dual-list-select.tsx @@ -0,0 +1,161 @@ +import React, { useReducer } from 'react'; +import isEqual from 'lodash/isEqual'; + +import { useFieldApi, UseFieldApiConfig } from '@data-driven-forms/react-form-renderer'; +import { SelectOption, OptionValue } from '../types/shared-types'; + +import reducer, { initialState, DualListSelectState, DualListSelectAction } from './reducer'; + +interface DualListSelectComponentProps { + leftValues: SelectOption[]; + rightValues: SelectOption[]; + handleOptionsClick: (event: React.MouseEvent, value: T) => void; + handleValuesClick: (event: React.MouseEvent, value: T) => void; + handleMoveRight: () => void; + handleMoveLeft: () => void; + handleClearLeftValues: () => void; + handleClearRightValues: () => void; + filterOptions?: (options: SelectOption[], filterValue: string) => SelectOption[]; + filterValue?: string; + filterValueText?: string; + filterPlaceholder?: string; + filterOptionsText?: string; + filterValuePlaceholder?: string; + noOptionsText?: string; + noValueText?: string; + [key: string]: unknown; +} + +export type DualListSelectCommonProps< + T = OptionValue, + SelectProps = Record +> = UseFieldApiConfig & { + DualListSelect: React.ComponentType>; + options: SelectOption[]; +} & SelectProps; + +const getOptionsGroup = ( + value: T, + lastClicked: T, + options: SelectOption[] +): T[] => { + const lastIndex = options.map(({ value }) => value.toString()).indexOf(lastClicked.toString()); + const currentIndex = options.map(({ value }) => value.toString()).indexOf(value.toString()); + const startIndex = Math.min(lastIndex, currentIndex); + const endIndex = Math.max(lastIndex, currentIndex) + 1; + return [...options.slice(startIndex, endIndex).map(({ value }) => value)]; +}; + +const handleOptionClick = ( + event: React.MouseEvent, + value: T, + options: SelectOption[], + isRight: boolean, + dispatch: React.Dispatch, + state: DualListSelectState +): void => { + const selectedKey = isRight ? 'selectedLeftValues' : 'selectedRightValues'; + const lastKey = isRight ? 'lastLeftClicked' : 'lastRightClicked'; + + if (event.shiftKey && state[lastKey]) { + dispatch({ type: 'setSelectedValue', value, values: getOptionsGroup(value, state[lastKey] as T, options), isRight }); + } else if (event.ctrlKey && state[lastKey]) { + const selectedValues = state[selectedKey].includes(value) ? state[selectedKey].filter((item) => item !== value) : [...state[selectedKey], value]; + + dispatch({ type: 'setSelectedValue', value, values: selectedValues, isRight }); + } else { + dispatch({ type: 'setSelectedValue', value, values: [value], isRight }); + } +}; + +const DualListSelectCommon = ( + props: DualListSelectCommonProps +) => { + const [state, dispatch] = useReducer(reducer, initialState); + + const { DualListSelect, ...rest } = useFieldApi({ + ...props, + FieldProps: { + isEqual: (current: T[], initial: T[]) => isEqual([...(current || [])].sort(), [...(initial || [])].sort()), + }, + }); + + const leftValues = rest.options + .filter((option: SelectOption) => + !rest.input.value.includes(option.value) && + String(option.label).toLowerCase().includes(state.filterOptions.toLowerCase()) + ) + .sort((a: SelectOption, b: SelectOption) => + state.sortLeftDesc + ? String(a.label).localeCompare(String(b.label)) + : String(b.label).localeCompare(String(a.label)) + ); + + const rightValues = rest.options + .filter((option: SelectOption) => + rest.input.value.includes(option.value) && + String(option.label).toLowerCase().includes(state.filterValue.toLowerCase()) + ) + .sort((a: SelectOption, b: SelectOption) => + state.sortRightDesc + ? String(a.label).localeCompare(String(b.label)) + : String(b.label).localeCompare(String(a.label)) + ); + + const handleOptionsClick = (event: React.MouseEvent, value: T) => + handleOptionClick(event, value, leftValues, true, dispatch, state); + + const handleValuesClick = (event: React.MouseEvent, value: T) => + handleOptionClick(event, value, rightValues, false, dispatch, state); + + const handleMoveRight = () => { + rest.input.onChange([...rest.input.value, ...state.selectedLeftValues]); + dispatch({ type: 'clearLeftOptions' }); + }; + + const handleMoveLeft = () => { + rest.input.onChange(rest.input.value.filter((value: T) => !state.selectedRightValues.includes(value))); + dispatch({ type: 'clearRightValues' }); + }; + + const sortOptions = () => dispatch({ type: 'sortOptions' }); + + const sortValues = () => dispatch({ type: 'sortValue' }); + + const filterOptions = (value: string) => dispatch({ type: 'setFilterOptions', value }); + + const filterValues = (value: string) => dispatch({ type: 'setFilterValue', value }); + + const handleClearLeftValues = () => { + dispatch({ type: 'clearLeftValues' }); + rest.input.onChange([...rest.input.value, ...leftValues.map(({ value }: SelectOption) => value)]); + }; + + const handleClearRightValues = () => { + dispatch({ type: 'clearRightValues' }); + rest.input.onChange([ + ...rest.input.value.filter((val: T) => !rightValues.find(({ value }: SelectOption) => val === value)) + ]); + }; + + return ( + + ); +}; + +export default DualListSelectCommon; diff --git a/packages/common/src/dual-list-select/index.d.ts b/packages/common/src/dual-list-select/index.d.ts deleted file mode 100644 index 34150f77b..000000000 --- a/packages/common/src/dual-list-select/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './dual-list-select'; -export * from './dual-list-select'; diff --git a/packages/common/src/dual-list-select/index.js b/packages/common/src/dual-list-select/index.ts similarity index 100% rename from packages/common/src/dual-list-select/index.js rename to packages/common/src/dual-list-select/index.ts diff --git a/packages/common/src/dual-list-select/reducer.js b/packages/common/src/dual-list-select/reducer.js deleted file mode 100644 index 91f69c262..000000000 --- a/packages/common/src/dual-list-select/reducer.js +++ /dev/null @@ -1,55 +0,0 @@ -export const initialState = { - lastLeftClicked: undefined, - selectedLeftValues: [], - lastRightClicked: undefined, - selectedRightValues: [], - sortLeftDesc: true, - sortRightDesc: true, - filterOptions: '', - filterValue: '', -}; - -const reducer = (state, { type, value, values, isRight }) => { - switch (type) { - case 'setSelectedValue': - return { - ...state, - ...(isRight ? { selectedLeftValues: values } : { selectedRightValues: values }), - ...(isRight ? { lastLeftClicked: value } : { lastRightClicked: value }), - }; - case 'setFilterValue': - return { - ...state, - filterValue: value, - }; - case 'setFilterOptions': - return { - ...state, - filterOptions: value, - }; - case 'sortValue': - return { - ...state, - sortRightDesc: !state.sortRightDesc, - }; - case 'sortOptions': - return { - ...state, - sortLeftDesc: !state.sortLeftDesc, - }; - case 'clearRightValues': - return { - ...state, - selectedRightValues: [], - }; - case 'clearLeftOptions': - return { - ...state, - selectedLeftValues: [], - }; - default: - return state; - } -}; - -export default reducer; diff --git a/packages/common/src/dual-list-select/reducer.ts b/packages/common/src/dual-list-select/reducer.ts new file mode 100644 index 000000000..aa6a9d0b4 --- /dev/null +++ b/packages/common/src/dual-list-select/reducer.ts @@ -0,0 +1,107 @@ +import { OptionValue } from '../types/shared-types'; + +export interface DualListSelectState { + lastLeftClicked: T | undefined; + selectedLeftValues: T[]; + lastRightClicked: T | undefined; + selectedRightValues: T[]; + sortLeftDesc: boolean; + sortRightDesc: boolean; + filterOptions: string; + filterValue: string; +} + +export const initialState: DualListSelectState = { + lastLeftClicked: undefined, + selectedLeftValues: [], + lastRightClicked: undefined, + selectedRightValues: [], + sortLeftDesc: true, + sortRightDesc: true, + filterOptions: '', + filterValue: '', +}; + +export type DualListSelectAction = + | { + type: 'setSelectedValue'; + value: T; + values: T[]; + isRight: boolean; + } + | { + type: 'setFilterValue'; + value: string; + } + | { + type: 'setFilterOptions'; + value: string; + } + | { + type: 'sortValue'; + } + | { + type: 'sortOptions'; + } + | { + type: 'clearRightValues'; + } + | { + type: 'clearLeftOptions'; + } + | { + type: 'clearLeftValues'; + }; + +const reducer = ( + state: DualListSelectState, + action: DualListSelectAction +): DualListSelectState => { + switch (action.type) { + case 'setSelectedValue': + return { + ...state, + ...(action.isRight ? { selectedLeftValues: action.values } : { selectedRightValues: action.values }), + ...(action.isRight ? { lastLeftClicked: action.value } : { lastRightClicked: action.value }), + }; + case 'setFilterValue': + return { + ...state, + filterValue: action.value, + }; + case 'setFilterOptions': + return { + ...state, + filterOptions: action.value, + }; + case 'sortValue': + return { + ...state, + sortRightDesc: !state.sortRightDesc, + }; + case 'sortOptions': + return { + ...state, + sortLeftDesc: !state.sortLeftDesc, + }; + case 'clearRightValues': + return { + ...state, + selectedRightValues: [], + }; + case 'clearLeftOptions': + return { + ...state, + selectedLeftValues: [], + }; + case 'clearLeftValues': + return { + ...state, + selectedLeftValues: [], + }; + default: + return state; + } +}; + +export default reducer; diff --git a/packages/common/src/form-template/form-template.d.ts b/packages/common/src/form-template/form-template.d.ts deleted file mode 100644 index 19bb03b55..000000000 --- a/packages/common/src/form-template/form-template.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { AnyObject, FormTemplateRenderProps } from "@data-driven-forms/react-form-renderer"; -import { ElementType } from "react"; - -export interface FormTemplateCommonProps extends FormTemplateRenderProps { - FormWrapper?: ElementType; - Title?: ElementType; - Description?: ElementType; - Button?: ElementType; - ButtonGroup?: ElementType; - formWrapperProps?: AnyObject; - showFormControls?: boolean; - disableSubmit?: string[]; - Header?: ElementType; - headerProps?: AnyObject; - titleProps?: AnyObject; - descriptionProps?: AnyObject; - buttonGroupProps?: AnyObject; - buttonsProps?: AnyObject -} - -export default FormTemplateCommonProps; diff --git a/packages/common/src/form-template/form-template.js b/packages/common/src/form-template/form-template.tsx similarity index 53% rename from packages/common/src/form-template/form-template.js rename to packages/common/src/form-template/form-template.tsx index aa89c2f39..3fae8cd6b 100644 --- a/packages/common/src/form-template/form-template.js +++ b/packages/common/src/form-template/form-template.tsx @@ -1,9 +1,57 @@ -import React from 'react'; -import { useFormApi, FormSpy } from '@data-driven-forms/react-form-renderer'; +import React, { ElementType } from 'react'; +import { useFormApi, FormSpy, AnyObject } from '@data-driven-forms/react-form-renderer'; -export const isDisabled = (disableStates, getState) => disableStates.map((item) => getState()[item]).find((item) => !!item); +// Define local interface until FormTemplateRenderProps is exported +interface FormTemplateRenderProps extends AnyObject { + formFields: React.ReactNode[]; + schema: { + title?: string; + description?: string; + label?: string; + }; +} + +export interface FormTemplateCommonProps extends FormTemplateRenderProps { + FormWrapper?: ElementType; + Title?: ElementType; + Description?: ElementType; + Button?: ElementType; + ButtonGroup?: ElementType; + formWrapperProps?: AnyObject; + showFormControls?: boolean; + disableSubmit?: string[]; + Header?: ElementType; + headerProps?: AnyObject; + titleProps?: AnyObject; + descriptionProps?: AnyObject; + buttonGroupProps?: AnyObject; + buttonsProps?: AnyObject; + alertProps?: AnyObject; + BeforeError?: ElementType; +} + +interface FormControlsProps { + onCancel?: ((values: Record, ...args: any[]) => void) | (() => void); + onReset?: () => void; + submitLabel?: string; + cancelLabel?: string; + resetLabel?: string; + canReset?: boolean; + disableSubmit?: boolean; + buttonOrder?: string[]; + buttonClassName?: string; + FormButtons?: ElementType; + Button?: ElementType; + ButtonGroup?: ElementType; + formSpyProps?: AnyObject; + buttonsProps?: AnyObject; + buttonGroupProps?: AnyObject; +} -export const completeButtons = (buttonOrder) => { +export const isDisabled = (disableStates: string[], getState: () => AnyObject): boolean => + disableStates.map((item) => getState()[item]).find((item) => !!item); + +export const completeButtons = (buttonOrder: string[]): string[] => { const expectedOrder = [...buttonOrder]; if (!expectedOrder.includes('submit')) { expectedOrder.push('submit'); @@ -20,7 +68,7 @@ export const completeButtons = (buttonOrder) => { return expectedOrder; }; -export const FormControls = ({ +export const FormControls: React.FC = ({ onCancel, onReset, submitLabel = 'Submit', @@ -33,7 +81,7 @@ export const FormControls = ({ FormButtons, Button, ButtonGroup, - formSpyProps, + formSpyProps = {}, buttonsProps = {}, buttonGroupProps, }) => { @@ -44,8 +92,8 @@ export const FormControls = ({ const { submitting, pristine, validating } = formSpyProps; const { submit, reset, cancel } = buttonsProps; - const buttons = { - submit: ( + const buttons: Record = { + submit: Button ? (