Merge pull request #1553 from data-driven-forms/migrate-mui

Migrate mui package to TS

Author: Hyperkid123

.eslintrc.json

@@ -22,7 +22,7 @@
     "arguments": true
   },
   "plugins": ["react", "jest"],
-  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"],
+  "extends": ["eslint-config-react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"],
   "env": {
     "es6": true,
     "browser": true,

package-lock.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/**/* packages/pf4-component-mapper/src/**/* packages/pf4-component-mapper/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/**/* packages/mui-component-mapper/src/**/* packages/mui-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"
@@ -60,7 +60,6 @@
     "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
-    "@babel/eslint-parser": "^7.28.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.4.1",
     "babel-plugin-transform-imports": "^2.0.0",

package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {},
   "dependencies": {
-    "@data-driven-forms/react-form-renderer": "^4.1.8",
+    "@data-driven-forms/react-form-renderer": "^4.1.10",
     "clsx": "^1.0.4",
     "lodash": "^4.17.23"
   },

packages/common/package.json

@@ -5,8 +5,8 @@ import { useFormApi, FormSpy, AnyObject } from '@data-driven-forms/react-form-re
 interface FormTemplateRenderProps extends AnyObject {
   formFields: React.ReactNode[];
   schema: {
-    title?: string;
-    description?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     label?: string;
   };
 }

packages/common/src/form-template/form-template.tsx

@@ -37,6 +37,9 @@ export interface SelectProps<T = OptionValue> {
   menuPortalTarget?: Element;
   showMoreLabel?: string;
   showLessLabel?: string;
+  // Allow any additional props to be passed through to SelectComponent
+  // Different mappers may need different props for their SelectComponent implementations
+  [key: string]: any;
 }
 
 const Select = <T extends OptionValue = OptionValue>({

packages/common/src/select/select.tsx

@@ -1,3 +1,4 @@
+import { KeyboardEvent } from 'react';
 import selectNext, { NextStep } from './select-next';
 import { AnyObject } from '@data-driven-forms/react-form-renderer';
 

packages/common/src/wizard/enter-handler.ts

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect } from 'react';
+import React, { useReducer, useEffect, KeyboardEventHandler, KeyboardEvent } from 'react';
 import { useFormApi, WizardContext, AnyObject, Field } from '@data-driven-forms/react-form-renderer';
 
 import get from 'lodash/get';

packages/common/src/wizard/wizard.tsx

@@ -0,0 +1,27 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["**/*.html", "**/*.css", "**/*.scss"],
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module",
+        "ecmaFeatures": {
+          "jsx": true
+        },
+        "project": ["packages/mui-component-mapper/tsconfig.json", "packages/mui-component-mapper/tsconfig.demo.json"]
+      },
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "error",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-use-before-define": ["error", { "functions": false }],
+        "no-use-before-define": "off",
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+        "react/prop-types": "off",
+        "react/no-unused-prop-types": "off"
+      }
+    }
+  ]
+}

packages/mui-component-mapper/.eslintrc.json

@@ -88,12 +88,16 @@ vendor
 !README.md
 !tsconfig.json
 !tsconfig.spec.json
+!tsconfig.demo.json
+!tsconfig.cjs.json
+!tsconfig.esm.json
 !jest.config.ts
 !generate-typings.js
 !rollup.config.js
 !generate-componen-examples.js
 !firebae.json
 !firebaseFunctions.js
 !scripts/
+!.eslintrc.json
 
 .DS_STORE