Migrate OT-UI-APPS codebase to Typescript

[carcruz]

As the OpenTargets development team, we want to refactor our UI code base to Typescript because of the following:

• Early spotted bugs
• Readability
• Rich IDE support
• Cross-platform and cross-browser compatibility
• Codebase longevity

To complete this significant refactor, we kindly invite open-source contributors to collaborate with small-scoped pull requests to files and components.

Background

We are currently building our UIs and components using standard Javascript, but the lack of unit testing and type definitions is causing various issues in handling unexpected data. This is a constant issue across releases that requires, in some cases, side fixes.

Tasks

• [x] Update Vite bundle configuration to support typescript (it should also handle JavaScript files since we do the refactor).
• [ ] Refactor UI shared packages (https://github.com/opentargets/ot-ui-apps/tree/main/packages)
• [ ] Refactor Platform packages (https://github.com/opentargets/ot-ui-apps/tree/main/apps/platform/src/components)
• [ ] Refactor Platform pages
• [ ] Refactor Platform helpers and config files
• [ ] Refactor Genetics packages (https://github.com/opentargets/ot-ui-apps/tree/main/apps/genetics/src/components)
• [ ] Refactor Genetics pages
• [ ] Refactor Genetics helpers and config files

Reference links

• Why Typescript: https://www.typescriptlang.org/why-create-typescript
• Typescript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
• React Typescript cheatsheet: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

[riyavsinha]

Hi, I'm interested in helping this task move forward on the genetics side especially. Within the genetics app, what is the difference between src/components and src/ot-ui-components? For example, there is a Link component in both of them.

[riyavsinha]

@carcruz Could you explain the distinction between src/components and src/ot-ui-components? also between OtTable.jsx and OtTableRF.jsx?