epic: typescript migration

[SgtPooki]

TypeScript Migration Guidelines

Context:
We are migrating our codebase to TypeScript. This issue will remain open until the migration is fully complete. Please ensure that all new contributions follow these guidelines to maintain consistency and code quality.

File Types & Naming Conventions

• File Types:
  • Use TypeScript files only: use .tsx for React components and .ts for non-React components.
• Filename Convention:
  • Use kebab-case for filenames (lowercase only, words separated by hyphens).

Code Standards

• Component Style:
  • All components must be functional.
  • Do not use prop-types or .defaultProps as these are unnecessary in a TypeScript codebase.
• Imports:
  • All imports must include the .js extension.
• State Management & Bundles:
  • Do not use redux-bundler or redux-bundler-react.
  • Do not add new bundles; if possible, create a hook or use context instead.
• Internationalization:
  • Do not use withTransation; use useTranslation instead.

Project Configuration

• TypeScript Setup:
  • Add new TypeScript files to tsconfig.json.
  • Include any dependent files that require type checking.
  • If an existing file is too large or requires extensive changes, it can be temporarily ignored until someone can convert it properly.

Additional Guidelines for Contributors

• Linting & Formatting:
  • Follow the project’s ESLint and Prettier configurations to maintain a consistent code style.
• Testing:
  • Include unit tests & e2e tests with 100% coverage for all new code. This ensures that our code remains robust during the migration.
• Documentation:
  • Update or add documentation as necessary to reflect changes or new patterns introduced during the migration.
• Dependencies:
  • Verify that any new third-party libraries include proper TypeScript type definitions.
• Backwards Compatibility:
  • Avoid breaking changes. When updating legacy code, strive to maintain compatibility until the entire file can be migrated.
• Questions & Support:
  • If you have any questions or need clarification on migration specifics, please ping @SgtPooki.

---

Your cooperation in following these guidelines is essential for a smooth transition to a fully TypeScript codebase. Thank you for your contributions!

[badgooooor]

Hey, would love to help on in this issue. Is there any suggestion on tackling tasks and breakdown this epic to smaller task in order to make this issue easier to contribute?

[SgtPooki]

@badgooooor I honestly could use some help breaking down the tasks required here. That would be a huge help.

My process for the past was:

1. add file/folder to tsconfig.json include so types are checked (caveat that redux bundler is not typed, so this needs to be handled separately). You can also add a // @ts-check pragma to individual files and fix type errors before converting to TS
2. fix type errors, leave file added to tsconfig.json

So that eventually, we can include everything in tsconfig.json (e.g. **/*.jsx? and **/*.tsx?) and remove all the individual entries

There is a TON of potential EASY targets here:

1. ensure js files is being typechecked, fix type errors.
2. change js file to an explicit typescript file
3. remove propTypes and defaultProps (not needed when we're typechecking)
4. remove withTranslation and replace with useTranslation

Each of the above could be their own PR to keep changes small and incremental, and easy to review!

---

Migration Strategy:

1. Start with files that require the least cascading changes (aren't depended on by others)
2. Update icon generation to generate typescript icons (https://sapegin.me/blog/generating-typescript-react-components-from-svg-icons-using-svgr/)
3. Progress to basic UI components with 1-2 dependencies
4. Leave heavily depended-on files for last, especially:
   • src/i18n.js (87 dependencies)
   • src/lib/i18n.js (87 dependencies)
   • src/lib/files.js (33 dependencies)
   • src/components/modal/Modal.js (31 dependencies)
   • src/bundles/files/actions.js (22 dependencies)

This approach will minimize the risk of breaking changes during the migration process.