Merge pull request #1552 from data-driven-forms/migrate-pf

Migrate pf mapper to TS

Author: Hyperkid123

package.json

@@ -20,7 +20,7 @@
     "start-demo": "nx run @data-driven-forms/react-renderer-demo:start",
     "lint": "npm run lint:js && npm run lint:typescript",
     "lint:js": "npx eslint ./packages/*/src --ext .js",
-    "lint:typescript": "eslint packages/react-form-renderer/src/**/* packages/react-form-renderer/demo/**/* --ext .ts,.tsx,.js,.jsx",
+    "lint:typescript": "eslint packages/react-form-renderer/src/**/* packages/react-form-renderer/demo/**/* packages/pf4-component-mapper/src/**/* packages/pf4-component-mapper/demo/**/* --ext .ts,.tsx,.js,.jsx",
     "generate-template": "node ./scripts/generate-mapper.js",
     "clean-build": "node ./scripts/clean-build.js",
     "prebuild": "node ./scripts/clean-build.js"

packages/common/src/dual-list-select/dual-list-select.tsx

@@ -15,14 +15,19 @@ interface DualListSelectComponentProps<T = OptionValue> {
   handleMoveLeft: () => void;
   handleClearLeftValues: () => void;
   handleClearRightValues: () => void;
-  filterOptions?: (options: SelectOption<T>[], filterValue: string) => SelectOption<T>[];
+  filterOptions?: (options: SelectOption<T>[], filterValue: string) => SelectOption<T>[] | ((value: string) => void);
   filterValue?: string;
   filterValueText?: string;
   filterPlaceholder?: string;
   filterOptionsText?: string;
   filterValuePlaceholder?: string;
   noOptionsText?: string;
   noValueText?: string;
+  // Missing props that are actually used in implementation
+  sortOptions: () => void;
+  sortValues: () => void;
+  filterValues: (value: string) => void;
+  state: DualListSelectState<T>;
   [key: string]: unknown;
 }
 

packages/common/src/select/flat-options.ts

@@ -1,22 +1,14 @@
 import { ReactNode } from "react";
+import { FlatSelectOption, OptionValue } from '../types/shared-types';
 
-interface Option {
+export interface Option {
     label: string | ReactNode;
     value: any;
     selectAll?: boolean;
     selectNone?: boolean;
 }
 
-interface ResultedOption {
-    label?: string | ReactNode;
-    value?: any;
-    selectAll?: boolean;
-    selectNone?: boolean;
-    group?: string | ReactNode;
-    divider?: boolean;
-}
-
-interface Options {
+export interface Options {
     label?: string | ReactNode;
     value?: any;
     divider?: boolean;
@@ -25,8 +17,8 @@ interface Options {
     options?: Option[];
 }
 
-const flatOptions = (options: Options[]): ResultedOption[] =>
-    options.flatMap((option) => (option.options ? [{ group: option.label }, ...option.options.map(opt => opt as ResultedOption)] : [option as ResultedOption]));
+const flatOptions = <T extends OptionValue = OptionValue>(options: Options[]): FlatSelectOption<T>[] =>
+    options.flatMap((option) => (option.options ? [{ group: option.label } as FlatSelectOption<T>, ...option.options.map(opt => opt as FlatSelectOption<T>)] : [option as FlatSelectOption<T>]));
 
 export default flatOptions;
-export type { Option, ResultedOption, Options };
+export type ResultedOption = FlatSelectOption;

packages/common/src/select/select.tsx

@@ -5,7 +5,7 @@ import { AnyObject } from "@data-driven-forms/react-form-renderer";
 import clsx from 'clsx';
 import useSelect from '../use-select/use-select';
 import deepEqual from './deep-equal';
-import { SelectOption, OptionValue, SelectValue } from '../types/shared-types';
+import { SelectOption, OptionValue, SelectValue, FlatSelectOption } from '../types/shared-types';
 
 export interface SelectProps<T = OptionValue> {
   options?: SelectOption<T>[];
@@ -26,12 +26,17 @@ export interface SelectProps<T = OptionValue> {
   selectVariant?: string;
   updatingMessage?: React.ReactNode;
   noOptionsMessage?: React.ReactNode;
+  noResultsMessage?: React.ReactNode;
   isSearchable?: boolean;
   isClearable?: boolean;
   SelectComponent?: React.ComponentType<AnyObject>;
   noValueUpdates?: boolean;
-  optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+  optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
   compareValues?: (valueA: T, valueB: T) => boolean;
+  menuIsPortal?: boolean;
+  menuPortalTarget?: Element;
+  showMoreLabel?: string;
+  showLessLabel?: string;
 }
 
 const Select = <T extends OptionValue = OptionValue>({

packages/common/src/use-select/reducer.ts

@@ -1,29 +1,29 @@
 import { AnyObject } from '@data-driven-forms/react-form-renderer';
-import { SelectOption, OptionValue } from '../types/shared-types';
+import { SelectOption, OptionValue, FlatSelectOption } from '../types/shared-types';
 
 export interface SelectState<T = OptionValue> {
   isLoading: boolean;
-  options: SelectOption<T>[];
+  options: (SelectOption<T> | FlatSelectOption<T>)[];
   promises: AnyObject;
   isInitialLoaded: boolean;
-  originalOptions?: SelectOption<T>[];
+  originalOptions?: (SelectOption<T> | FlatSelectOption<T>)[];
 }
 
 interface InitProps<T = OptionValue> {
   propsOptions: SelectOption<T>[];
-  optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+  optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
 }
 
 type ReducerAction<T = OptionValue> =
-  | { type: 'updateOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[] }
+  | { type: 'updateOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[] }
   | { type: 'startLoading' }
-  | { type: 'setOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[] }
+  | { type: 'setOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[] }
   | { type: 'initialLoaded' }
   | {
       type: 'setPromises';
       payload: AnyObject;
       options?: SelectOption<T>[];
-      optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+      optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
       compareValues?: (value1: T, value2: T) => boolean;
     };
 

packages/common/src/use-select/use-select.ts

@@ -6,11 +6,11 @@ import { AnyObject } from '@data-driven-forms/react-form-renderer';
 import useIsMounted from '../hooks/use-is-mounted';
 import reducer, { init, SelectState } from './reducer';
 import fnToString from '../utils/fn-to-string';
-import { SelectOption, OptionValue, SelectValue } from '../types/shared-types';
+import { SelectOption, OptionValue, SelectValue, FlatSelectOption } from '../types/shared-types';
 
 interface UseSelectProps<T = OptionValue> {
     loadOptions?: (inputValue?: string) => Promise<SelectOption<T>[]>;
-    optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+    optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
     options?: SelectOption<T>[];
     noValueUpdates?: boolean;
     onChange?: (value?: SelectValue<T>) => void;
@@ -27,8 +27,8 @@ const getSelectValue = <T extends OptionValue>(
   stateValue: SelectValue<T>,
   simpleValue: boolean,
   isMulti: boolean,
-  allOptions: SelectOption<T>[]
-): SelectOption<T>[] | SelectValue<T> => {
+  allOptions: (SelectOption<T> | FlatSelectOption<T>)[]
+): (SelectOption<T> | FlatSelectOption<T>)[] | SelectValue<T> => {
   let enhancedValue = stateValue;
 
   let hasSelectAll = isMulti && allOptions.find(({ selectAll }) => selectAll);
@@ -62,7 +62,7 @@ const handleSelectChange = <T extends OptionValue>(
   simpleValue: boolean,
   isMulti: boolean,
   onChange: (value?: SelectValue<T>) => void,
-  allOptions: SelectOption<T>[],
+  allOptions: (SelectOption<T> | FlatSelectOption<T>)[],
   removeSelectAll: boolean,
   removeSelectNone: boolean
 ): void => {

packages/pf4-component-mapper/.gitignore

@@ -77,6 +77,7 @@ vendor
 !src/*
 !demo/*
 !config
+!config/rspack.config.js
 !.npmignore
 !.gitignore
 !.nxignore
@@ -87,7 +88,10 @@ vendor
 !project.json
 !README.md
 !tsconfig.json
+!tsconfig.cjs.json
+!tsconfig.esm.json
 !tsconfig.spec.json
+!tsconfig.demo.json
 !jest.config.ts
 !generate-typings.js
 !rollup.config.js

packages/pf4-component-mapper/config/rspack.config.js

@@ -0,0 +1,90 @@
+//@ts-check
+
+const { defineConfig } = require('@rspack/cli');
+const { HtmlRspackPlugin, DefinePlugin, ProvidePlugin } = require('@rspack/core');
+const resolve = require('path').resolve;
+
+module.exports = defineConfig({
+  mode: 'development',
+  entry: { app: resolve('./demo/index.tsx') },
+  output: {
+    path: resolve('../dist'),
+    filename: '[name].[hash].js'
+  },
+  devtool: 'eval-source-map',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  plugins: [
+    new HtmlRspackPlugin({
+      template: './demo/index.html',
+      filename: './index.html'
+    }),
+    new DefinePlugin({
+      'process.env.NODE_ENV': '"development"',
+    }),
+    new ProvidePlugin({
+      process: 'process/browser.js'
+    })
+  ],
+  devServer: {
+    port: 3001, // Different port from renderer to avoid conflicts
+    hot: true,
+    open: true,
+  },
+  module: {
+    rules: [
+      // TypeScript files with ts-loader for proper config support
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.demo.json'
+          }
+        },
+      },
+      // JavaScript files (if any remain)
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+      },
+      // CSS/SCSS - using RSpack built-in support
+      {
+        test: /\.css$/,
+        type: 'css'
+      },
+      {
+        test: /\.(sa|sc)ss$/,
+        use: ['sass-loader'],
+        type: 'css'
+      },
+      // Assets
+      {
+        test: /\.(png|jpg|gif|svg|woff|ttf|eot)$/,
+        type: 'asset/resource'
+      },
+    ]
+  },
+  experiments: {
+    css: true,
+  }
+});