fix: resolve CI failures in TypeScript migration (#47)

- Fix prettier formatting for all migrated .tsx/.ts files
- Fix ESLint errors: remove unused eslint-disable directives, replace any types
- Fix dropdown-button test: update modal import from .js to .tsx
- Fix simple-single-select-field: restore missing labelId prop on Field
- Fix table-header-cell/table-data-cell tests: expect Number() for colSpan/rowSpan
- Fix organisation-unit-tree tests: replace obsolete prop-types tests with TS-compatible tests
- Fix broken story imports: update .js/.tsx references to match renamed files
- Fix scripts/ts-check.js formatting

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Eirik <eirik.haugstulen@gmail.com>

Author: devin-ai-integration[bot]

.eslintrc.js

@@ -49,9 +49,7 @@ const config = {
                 ecmaFeatures: { jsx: true },
             },
             plugins: ['@typescript-eslint'],
-            extends: [
-                'plugin:@typescript-eslint/recommended',
-            ],
+            extends: ['plugin:@typescript-eslint/recommended'],
             settings: {
                 'import/resolver': {
                     typescript: {
@@ -63,9 +61,15 @@ const config = {
                 // Disable JS-only rules that conflict with TS
                 'react/prop-types': 'off',
                 'no-unused-vars': 'off',
-                '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+                '@typescript-eslint/no-unused-vars': [
+                    'error',
+                    { argsIgnorePattern: '^_' },
+                ],
                 // Keep consistent with existing code style
-                'react/no-unknown-property': ['error', { ignore: ['jsx', 'global'] }],
+                'react/no-unknown-property': [
+                    'error',
+                    { ignore: ['jsx', 'global'] },
+                ],
                 // Allow .js extension imports in TS files (Babel resolves .tsx -> .js)
                 'import/extensions': 'off',
             },

MIGRATION_GUIDE.md

@@ -6,11 +6,11 @@ This document describes the approach for incrementally migrating `@dhis2/ui` com
 
 ## Key Findings
 
-- **Build system**: `d2-app-scripts build` uses Babel with `@babel/preset-typescript` already included — it can compile `.ts`/`.tsx` out of the box.
-- **styled-jsx**: Ships TypeScript definitions that augment React's `StyleHTMLAttributes` with `jsx` and `global` props. Works in `.tsx` files with the `"types": ["styled-jsx"]` tsconfig option.
-- **Existing types**: Each component has hand-written `.d.ts` files in a `types/` directory. After migration, these can be auto-generated from source via `tsc --declaration`.
-- **ESLint**: The project uses `@dhis2/cli-style` (ESLint 7.x). TypeScript linting works via `@typescript-eslint/parser` v6 + `@typescript-eslint/eslint-plugin` v6.
-- **One quirk**: `d2-app-scripts build` doesn't rename `.tsx` → `.js` in build output. A `post-build-rename.js` script handles this.
+-   **Build system**: `d2-app-scripts build` uses Babel with `@babel/preset-typescript` already included — it can compile `.ts`/`.tsx` out of the box.
+-   **styled-jsx**: Ships TypeScript definitions that augment React's `StyleHTMLAttributes` with `jsx` and `global` props. Works in `.tsx` files with the `"types": ["styled-jsx"]` tsconfig option.
+-   **Existing types**: Each component has hand-written `.d.ts` files in a `types/` directory. After migration, these can be auto-generated from source via `tsc --declaration`.
+-   **ESLint**: The project uses `@dhis2/cli-style` (ESLint 7.x). TypeScript linting works via `@typescript-eslint/parser` v6 + `@typescript-eslint/eslint-plugin` v6.
+-   **One quirk**: `d2-app-scripts build` doesn't rename `.tsx` → `.js` in build output. A `post-build-rename.js` script handles this.
 
 ## How to Migrate a Component
 
@@ -23,26 +23,32 @@ This document describes the approach for incrementally migrating `@dhis2/ui` com
         "rootDir": "./src"
     },
     "include": ["src/**/*.ts", "src/**/*.tsx"],
-    "exclude": ["node_modules", "build", "**/*.stories.*", "**/*.test.*", "**/*.e2e.*"]
+    "exclude": [
+        "node_modules",
+        "build",
+        "**/*.stories.*",
+        "**/*.test.*",
+        "**/*.e2e.*"
+    ]
 }
 ```
 
 ### 2. Convert source files from `.js` → `.tsx` (or `.ts`)
 
-- Replace `PropTypes` with TypeScript interfaces
-- Remove `prop-types` and `@dhis2/prop-types` imports
-- Add explicit types for props, state, and function parameters
-- Keep `styled-jsx` usage as-is (it works in `.tsx`)
-- Keep import paths using `.js` extensions (Babel + Node resolve these to `.tsx`)
-- Leave `.stories.js` and `.feature` test files as JavaScript
+-   Replace `PropTypes` with TypeScript interfaces
+-   Remove `prop-types` and `@dhis2/prop-types` imports
+-   Add explicit types for props, state, and function parameters
+-   Keep `styled-jsx` usage as-is (it works in `.tsx`)
+-   Keep import paths using `.js` extensions (Babel + Node resolve these to `.tsx`)
+-   Leave `.stories.js` and `.feature` test files as JavaScript
 
 ### 3. Update `d2.config.js` entry point
 
 ```js
 module.exports = {
     type: 'lib',
     entryPoints: {
-        lib: 'src/index.ts',  // was src/index.js
+        lib: 'src/index.ts', // was src/index.js
     },
 }
 ```
@@ -73,20 +79,20 @@ cd components/<name> && yarn build
 
 ## Files Added/Modified
 
-| File | Purpose |
-|------|---------|
-| `tsconfig.json` (root) | Base TypeScript config for the whole repo |
-| `components/<name>/tsconfig.json` | Per-component TS config extending root |
-| `.eslintrc.js` | Added TypeScript override block for `.ts`/`.tsx` files |
-| `scripts/ts-check.js` | Unified feedback pipeline (tsc + eslint + prettier) |
-| `scripts/post-build-rename.js` | Renames `.tsx`/`.ts` → `.js` in build output |
+| File                              | Purpose                                                |
+| --------------------------------- | ------------------------------------------------------ |
+| `tsconfig.json` (root)            | Base TypeScript config for the whole repo              |
+| `components/<name>/tsconfig.json` | Per-component TS config extending root                 |
+| `.eslintrc.js`                    | Added TypeScript override block for `.ts`/`.tsx` files |
+| `scripts/ts-check.js`             | Unified feedback pipeline (tsc + eslint + prettier)    |
+| `scripts/post-build-rename.js`    | Renames `.tsx`/`.ts` → `.js` in build output           |
 
 ## Dev Dependencies Added
 
-- `typescript` ~5.4.5
-- `@typescript-eslint/parser` ^6
-- `@typescript-eslint/eslint-plugin` ^6
-- `eslint-import-resolver-typescript` ^3
+-   `typescript` ~5.4.5
+-   `@typescript-eslint/parser` ^6
+-   `@typescript-eslint/eslint-plugin` ^6
+-   `eslint-import-resolver-typescript` ^3
 
 ## Migration Order Recommendation
 
@@ -103,6 +109,6 @@ Start with leaf components (no internal deps) and work up:
 
 ## Notes
 
-- Stories and E2E feature files can stay as `.js` — they don't need to be migrated immediately.
-- The `types/index.d.ts` hand-written files can eventually be replaced by auto-generated declarations from `tsc --declaration`.
-- The `import/extensions` ESLint rule is disabled for `.ts`/`.tsx` files because the codebase convention is to import with `.js` extensions (which Babel resolves to the actual `.tsx` files).
+-   Stories and E2E feature files can stay as `.js` — they don't need to be migrated immediately.
+-   The `types/index.d.ts` hand-written files can eventually be replaced by auto-generated declarations from `tsc --declaration`.
+-   The `import/extensions` ESLint rule is disabled for `.ts`/`.tsx` files because the codebase convention is to import with `.js` extensions (which Babel resolves to the actual `.tsx` files).

collections/forms/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-01-12T11:22:32.560Z\n"
-"PO-Revision-Date: 2026-01-12T11:22:32.562Z\n"
+"POT-Creation-Date: 2026-04-13T21:27:29.445Z\n"
+"PO-Revision-Date: 2026-04-13T21:27:29.445Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

components/alert/src/alert-bar/alert-bar.tsx

@@ -98,7 +98,8 @@ const AlertBar = ({
     const pauseDisplayTimeout = () => {
         if (shouldAutoHide) {
             clearAllTimeouts()
-            const elapsedTime = Date.now() - (displayStartTime.current as number)
+            const elapsedTime =
+                Date.now() - (displayStartTime.current as number)
             displayTimeRemaining.current =
                 (displayTimeRemaining.current as number) - elapsedTime
         }

components/alert/src/alert-bar/icon.tsx

@@ -47,7 +47,14 @@ interface IconProps {
     warning?: boolean
 }
 
-const Icon = ({ icon, success, warning, critical, info, dataTest }: IconProps) => {
+const Icon = ({
+    icon,
+    success,
+    warning,
+    critical,
+    info,
+    dataTest,
+}: IconProps) => {
     if (icon === false) {
         return null
     }

components/alert/tsconfig.json

@@ -4,5 +4,11 @@
         "rootDir": "./src"
     },
     "include": ["src/**/*.ts", "src/**/*.tsx"],
-    "exclude": ["node_modules", "build", "**/*.stories.*", "**/*.test.*", "**/*.e2e.*"]
+    "exclude": [
+        "node_modules",
+        "build",
+        "**/*.stories.*",
+        "**/*.test.*",
+        "**/*.e2e.*"
+    ]
 }

components/box/tsconfig.json

@@ -4,5 +4,11 @@
         "rootDir": "./src"
     },
     "include": ["src/**/*.ts", "src/**/*.tsx"],
-    "exclude": ["node_modules", "build", "**/*.stories.*", "**/*.test.*", "**/*.e2e.*"]
+    "exclude": [
+        "node_modules",
+        "build",
+        "**/*.stories.*",
+        "**/*.test.*",
+        "**/*.e2e.*"
+    ]
 }

components/button/src/button/button.tsx

@@ -62,16 +62,28 @@ export interface ButtonProps {
      * Callback to trigger on de-focus (blur).
      * Called with same args as `onClick`
      */
-    onBlur?: (payload: ButtonCallbackPayload, event: React.FocusEvent<HTMLButtonElement>) => void
+    onBlur?: (
+        payload: ButtonCallbackPayload,
+        event: React.FocusEvent<HTMLButtonElement>
+    ) => void
     /**
      * Callback to trigger on click.
      * Called with args `({ value, name }, event)`
      */
-    onClick?: (payload: ButtonCallbackPayload, event: React.MouseEvent<HTMLButtonElement>) => void
+    onClick?: (
+        payload: ButtonCallbackPayload,
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => void
     /** Callback to trigger on focus. Called with same args as `onClick` */
-    onFocus?: (payload: ButtonCallbackPayload, event: React.FocusEvent<HTMLButtonElement>) => void
+    onFocus?: (
+        payload: ButtonCallbackPayload,
+        event: React.FocusEvent<HTMLButtonElement>
+    ) => void
     /** Callback to trigger on key-down. Called with same args as `onClick` */
-    onKeyDown?: (payload: ButtonCallbackPayload, event: React.KeyboardEvent<HTMLButtonElement>) => void
+    onKeyDown?: (
+        payload: ButtonCallbackPayload,
+        event: React.KeyboardEvent<HTMLButtonElement>
+    ) => void
     [key: string]: unknown
 }
 
@@ -107,7 +119,10 @@ export const Button = ({
         }
     }, [initialFocus, ref.current])
 
-    const { 'aria-label': ariaLabel, title } = otherProps as Record<string, unknown>
+    const { 'aria-label': ariaLabel, title } = otherProps as Record<
+        string,
+        unknown
+    >
 
     if (!children && !title && !ariaLabel) {
         console.debug(

components/button/src/dropdown-button/__tests__/dropdown-button.test.js

@@ -4,7 +4,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react'
 import { mount } from 'enzyme'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
-import { Modal } from '../../../../modal/src/modal/modal.js'
+import { Modal } from '../../../../modal/src/modal/modal.tsx'
 import { Button } from '../../index.ts'
 import { DropdownButton } from '../dropdown-button.tsx'
 

components/button/src/dropdown-button/dropdown-button.tsx

@@ -103,14 +103,20 @@ export interface DropdownButtonProps {
      * Called with signature `({ name: string, value: string, open: bool }, event)`
      * Is required when using the `open` prop to override the internal state.
      */
-    onClick?: (payload: DropdownButtonCallbackPayload, event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent) => void
+    onClick?: (
+        payload: DropdownButtonCallbackPayload,
+        event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent
+    ) => void
 }
 
 interface DropdownButtonState {
     open: boolean
 }
 
-class DropdownButton extends Component<DropdownButtonProps, DropdownButtonState> {
+class DropdownButton extends Component<
+    DropdownButtonProps,
+    DropdownButtonState
+> {
     state: DropdownButtonState = {
         open: false,
     }
@@ -137,7 +143,10 @@ class DropdownButton extends Component<DropdownButtonProps, DropdownButtonState>
         }
     }
 
-    onClickHandler = ({ name, value }: { name?: string; value?: string }, event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent) => {
+    onClickHandler = (
+        { name, value }: { name?: string; value?: string },
+        event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent
+    ) => {
         const handleClick = (open: boolean) => {
             if (this.props.onClick) {
                 this.props.onClick(
@@ -210,7 +219,14 @@ class DropdownButton extends Component<DropdownButtonProps, DropdownButtonState>
                 </Button>
 
                 {open && (
-                    <Layer onBackdropClick={(_payload, event) => this.onClickHandler({}, event as unknown as React.SyntheticEvent)}>
+                    <Layer
+                        onBackdropClick={(_payload, event) =>
+                            this.onClickHandler(
+                                {},
+                                event as unknown as React.SyntheticEvent
+                            )
+                        }
+                    >
                         <Popper
                             dataTest={`${dataTest}-popper`}
                             placement="bottom-start"