( + component: React.ComponentClass
> | React.SFC
>, +) + +// After +function withForm
( + component: React.ComponentClass
> | React.FC
>,
+)
+```
+
+**Run codemod:**
+```bash
+cd frontend
+npx types-react-codemod@latest preset-18 src
+```
+
+### Step 1.2: TypeScript 5 Upgrade
+
+**Changes to `frontend/package.json`:**
+```json
+{
+ "devDependencies": {
+ "typescript": "^5.7.0"
+ }
+}
+```
+
+**Update `frontend/tsconfig.json`:**
+```json
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "moduleResolution": "bundler"
+ }
+}
+```
+
+### Step 1.3: antd 4 Upgrade
+
+**Changes to `frontend/package.json`:**
+```json
+{
+ "dependencies": {
+ "antd": "^4.24.15",
+ "@ant-design/icons": "^4.8.0"
+ }
+}
+```
+
+**Install:**
+```bash
+cd frontend
+npm install antd@^4.24.15 @ant-design/icons@^4.8.0
+```
+
+**Run codemod:**
+```bash
+npx -p @ant-design/codemod-v4 antd4-codemod src
+```
+
+**Manual Icon Migration (4 files):**
+
+File: `frontend/src/shared/components/FileUploadInput/index.tsx`
+```typescript
+// Before
+import { Icon } from 'antd'
+
( + component: React.FC
>, +) { + return Form.create
>({ + mapPropsToFields({ data }) { ... } + })(component) +} + +// After (antd 4) +import { Form, FormInstance } from 'antd' + +// New approach: Use render prop or context instead of HOC +// Option A: Refactor forms to use Form.useForm() directly +// Option B: Create a compatible wrapper component + +// Recommended: Gradual migration - keep withForm as wrapper +// but update internal implementation +function withForm
() { + return function ( + Component: React.FC
> + ): React.FC
> { + const WrappedComponent: React.FC
> = (props) => { + const [form] = Form.useForm() + + React.useEffect(() => { + if (props.data) { + form.setFieldsValue(props.data as any) + } + }, [props.data]) + + return ( +
+ ) + } + return WrappedComponent + } +} +``` + +**Individual Form Component Updates:** + +Each form using `getFieldDecorator` needs update: + +```typescript +// Before (antd 3) +{getFieldDecorator('fieldName', { + rules: [{ required: true, message: 'Required' }] +})( + +)} + +// After (antd 4) +
-
Click or drag file to this area to upload .xlsx file
diff --git a/frontend/src/scenes/PAS/components/PASForm/components/InputMutations/MutationsTable.d.ts b/frontend/src/scenes/PAS/components/PASForm/components/InputMutations/MutationsTable.d.ts new file mode 100644 index 0000000..7fc7d4b --- /dev/null +++ b/frontend/src/scenes/PAS/components/PASForm/components/InputMutations/MutationsTable.d.ts @@ -0,0 +1,9 @@ +import { ComponentType } from 'react' + +interface MutationsTableProps { + mutations: any[] + onChange?: (newMutations: any) => void +} + +declare const MutationsTable: ComponentType