Skip to content

Tracking issue: Convert components to TypeScript #3739

Open
Task
Open
Tracking issue: Convert components to TypeScript#3739
Task
Labels
good first issueA good task for a newcomer to start withhelp wantedReady to be picked up by anyone in the community
Milestone
Willow Cutoff

Description

@bradenmacdonald
bradenmacdonald
opened on Aug 13, 2025

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: #3744 #3043 #2404 and this PR with some type definitions: #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 #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:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueA good task for a newcomer to start withhelp wantedReady to be picked up by anyone in the community

    Type

    Task

    Projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions