openedx / openedx/paragon

Tracking issue: Convert components to TypeScript

Open
#3,739 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue help wanted
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

The following components don't yet have type information, and should be converted from .jsx to .tsx files. The props documentation should be moved from the propTypes data to the TypeScript Props interface. See this example. The defaultProps should be removed and any defaults (other than undefined) should be specified as function parameters.

This will eliminate our usage of deprecated APIs (propTypes, defaultProps), clear the way for upgrading to React 19, allow developers using Paragon to catch errors much more easily (i.e. at build time), and eliminate console warnings about defaultProps still being used.

Related issues: https://github.com/openedx/paragon/issues/3744 https://github.com/openedx/paragon/issues/3043 https://github.com/openedx/paragon/issues/2404 and this PR with some type definitions: https://github.com/openedx/paragon/pull/2566

Details and advice

The following codemods may be helpful in automating this work: propTypes -> TS codemod, defaultProps codemod

Be sure to update src/index.ts as part of each PR, to remove the // @ts-ignore directive and to move the component from the "things that don't have types" section to the "things that have types" section (preserve alphabetical order).

Please prefer smaller PRs with just 1-3 components per PR, to help keep review effort reasonable.

Image Focus in particular on checking the props documentation in the docs site (npm run start) to ensure that our gatsby docs generator is correctly pulling in the right documentation for each property that the component accepts.

When you open a PR, a new "deploy preview" site will be created that makes it easy to compare the docs page with your changes to the previous version published at https://paragon-openedx.netlify.app/


🤔 Note that components using forwardRef require a very specific syntax in order for the props documentation to be detected correctly:

❌ Won't work (props documentation will be missing) ✅ Works (props will be documented)
Image Image

For components that extend Bootstrap components, it's unfortunately necessary to re-declare all of the props from the Bootstrap component, or else they won't appear in the documentation on our docs site. If the props are standard HTML props like role or onClick though, you don't need to document them separately - see https://github.com/openedx/paragon/pull/3742 for an example.

List of components

Because there are a lot of components here, I haven't created subtasks for each of these yet. Also, these have been sorted by usage so we can convert the most important ones first:

Not sure if these are worth converting, or deprecating? They are not used in any Open edX MFEs, but may be used outside of Open edX?

Undocumented passthrough components (very easy to convert - just rename the .jsx to .tsx)

Other things:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Choose one unchecked component and start by comparing its JSX implementation with the example in pull request 3714. Update src/index.ts as described, then run npm run start and inspect the component's props documentation. Done means converting one to three components and verifying their generated documentation against the deploy preview.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.