feat: rewrite to typescript

.eslintrc.js

@@ -39,6 +39,41 @@ const config = {
                 'import/no-extraneous-dependencies': 'error',
             },
         },
+        // TypeScript overrides for migrated components
+        {
+            files: ['**/*.ts', '**/*.tsx'],
+            parser: '@typescript-eslint/parser',
+            parserOptions: {
+                ecmaVersion: 2018,
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+            },
+            plugins: ['@typescript-eslint'],
+            extends: ['plugin:@typescript-eslint/recommended'],
+            settings: {
+                'import/resolver': {
+                    typescript: {
+                        project: './tsconfig.json',
+                    },
+                },
+            },
+            rules: {
+                // Disable JS-only rules that conflict with TS
+                'react/prop-types': 'off',
+                'no-unused-vars': 'off',
+                '@typescript-eslint/no-unused-vars': [
+                    'error',
+                    { argsIgnorePattern: '^_' },
+                ],
+                // Keep consistent with existing code style
+                '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

@@ -0,0 +1,114 @@
+# dhis2/ui — Incremental TypeScript Migration Strategy
+
+## Overview
+
+This document describes the approach for incrementally migrating `@dhis2/ui` components from JavaScript to TypeScript, one component at a time, without breaking the rest of the library.
+
+## 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.
+
+## How to Migrate a Component
+
+### 1. Add a `tsconfig.json` to the component
+
+```json
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "./src"
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "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
+
+### 3. Update `d2.config.js` entry point
+
+```js
+module.exports = {
+    type: 'lib',
+    entryPoints: {
+        lib: 'src/index.ts', // was src/index.js
+    },
+}
+```
+
+### 4. Update `package.json` build script
+
+```json
+"build": "d2-app-scripts build && node ../../scripts/post-build-rename.js"
+```
+
+### 5. Delete old `.js` source files
+
+Remove the original `.js` files that were converted (keep stories/features as JS).
+
+### 6. Run the feedback pipeline
+
+```bash
+node scripts/ts-check.js <component-name>       # check one component
+node scripts/ts-check.js --all                   # check all migrated components
+node scripts/ts-check.js <component-name> --fix  # auto-fix lint + format
+```
+
+### 7. Verify the build
+
+```bash
+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           |
+
+## Dev Dependencies Added
+
+-   `typescript` ~5.4.5
+-   `@typescript-eslint/parser` ^6
+-   `@typescript-eslint/eslint-plugin` ^6
+-   `eslint-import-resolver-typescript` ^3
+
+## Migration Order Recommendation
+
+Start with leaf components (no internal deps) and work up:
+
+1. **Simple leaf**: `divider`, `cover`, `center`, `required`, `help`, `legend`, `label`
+2. **Small with sub-components**: `tag`, `chip`, `card`, `box`, `status-icon`, `user-avatar`, `logo`
+3. **Medium**: `loader`, `notice-box`, `alert`, `tooltip`, `popover`, `popper`
+4. **Complex**: `button`, `checkbox`, `radio`, `switch`, `input`, `text-area`, `file-input`
+5. **Field wrappers**: `field`
+6. **Composite**: `select`, `menu`, `tab`, `table`, `pagination`, `modal`, `calendar`
+7. **Large/complex**: `header-bar`, `organisation-unit-tree`, `transfer`, `sharing-dialog`, `selector-bar`
+8. **Collections**: `collections/ui`, `collections/forms`
+
+## 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).

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/d2.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     type: 'lib',
     entryPoints: {
-        lib: 'src/index.js',
+        lib: 'src/index.ts',
     },
 }

components/alert/package.json

@@ -23,7 +23,8 @@
     },
     "scripts": {
         "start": "storybook dev -c ../../storybook/config --port 5000",
-        "build": "d2-app-scripts build",
+        "build": "d2-app-scripts build && node ../../scripts/post-build-rename.js",
+        "typecheck": "tsc --noEmit",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {

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

@@ -0,0 +1,36 @@
+import { spacers } from '@dhis2/ui-constants'
+import React, { Component } from 'react'
+
+export interface ActionProps {
+    dataTest: string
+    hide: (event: React.MouseEvent<HTMLSpanElement>) => void
+    label: string
+    onClick: (event: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+class Action extends Component<ActionProps> {
+    onClick = (event: React.MouseEvent<HTMLSpanElement>) => {
+        this.props.onClick(event)
+        this.props.hide(event)
+    }
+
+    render() {
+        return (
+            <span onClick={this.onClick} data-test={this.props.dataTest}>
+                {this.props.label}
+                <style jsx>{`
+                    span {
+                        margin-inline-end: ${spacers.dp12};
+                        text-decoration: underline;
+                        white-space: nowrap;
+                    }
+                    span:hover {
+                        cursor: pointer;
+                    }
+                `}</style>
+            </span>
+        )
+    }
+}
+
+export { Action }

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

@@ -0,0 +1,41 @@
+import { spacers } from '@dhis2/ui-constants'
+import React from 'react'
+import { Action } from './action.tsx'
+
+export interface AlertBarAction {
+    label: string
+    onClick: (event: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+interface ActionsProps {
+    dataTest: string
+    hide: (event: React.MouseEvent<HTMLSpanElement>) => void
+    actions?: AlertBarAction[]
+}
+
+const Actions = ({ actions, hide, dataTest }: ActionsProps) => {
+    if (!actions) {
+        return null
+    }
+
+    return (
+        <div>
+            {actions.map((action) => (
+                <Action
+                    key={action.label}
+                    {...action}
+                    hide={hide}
+                    dataTest={`${dataTest}-action`}
+                />
+            ))}
+            <style jsx>{`
+                div {
+                    margin-inline-start: ${spacers.dp48};
+                    margin-inline-end: -${spacers.dp12};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+export { Actions }

components/alert/src/alert-bar/alert-bar.e2e.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { AlertBar } from './index.js'
+import { AlertBar } from './index.ts'
 
 window.onHidden = window.Cypress && window.Cypress.cy.stub()