Build TypeScript demos for all Joy components

[hbjORbj]

We need your help!

Some Joy components do not have TypeScript versions of demos but only JavaScript demos. We need the community's help to ensure that all Joy components have TypeScript demos.

Contribution guides

1. Pick a component in the “Ready to be picked up” section
2. Go to docs/data/joy/components/${component} directory.
3. For the demos that do not have matching typescript (.tsx) versions, create typescript files with the same name. For example, docs/data/joy/components/Checkbox has CheckboxColors.js while it doesn't have CheckboxColors.tsx. Create CheckboxColors.tsx.

Warning ⚠️: For ${Component}Variables.js and ${Component}Usage.js, we DO NOT need typescript versions.

5. In the typescript file, copy/paste the code from its matching JavaScript demo, and turn it into type-safe code. For example, you can type the states, refs or the arguments of functions inside the demo. In some demos, the TypeScript version can be exactly the same as the JavaScript version. This is fine.
6. Run yarn docs:typescript:formatted and yarn prettier.
7. Verify that it works
   1. Run yarn docs:dev.
   2. go to URL /joy-ui/react-{component}/ (e.g., /joy-ui/react-checkbox) and check the demos (it should look the same).
   3. For every demo, both the "js" and "ts" toggle buttons at the left-top of the source code must be enabled as shown in the screenshot below.

8. Open a PR, put the URL to the the end of the component below (so that everyone knows it has been taken) and check the box.
9. Tag @mui/core to review

If you come across any issue or are unsure of the changes, feel free to open a PR and describe the problem + tag @mui/core for help.

Example PR

#36366

List of components

Ready to be picked up

• Checkbox [docs][joy] Build TS versions for Checkbox component demos #36381
• Divider [docs][joy] Add typescript demos for Divider #36374
• Select [docs][joy] Build TS versions for Select component demos #36380
• Switch [docs][joy] Build TS versions for Switch component demos #36379
• List [docs][joy] Build TS versions for List component demos #36382
• Typography [docs][joy] Build TS versions for Typography component demos #36378
• Textarea [docs][joy] Build TS versions for Textarea component demos #36371
• Radio [docs][joy] Build TS versions for Radio component demos #36406
• Modal [docs][joy] Build TS versions for Modal component demos #36385
• Menu [docs][joy] Build TS versions for Menu component demos #36383

[varunmulay22]

@hbjORbj may I kindly pick this up? Thanks

[hbjORbj]

@varunmulay22 Would you take a component and create a PR for that :) ? If you finish with that component, then you can create another one. As explained in the description above, after creating a PR, please paste the URL next to the component and check the box in the description.

[varunmulay22]

Sure this works for me thanks a ton

[varunmulay22]

@hbjORbj I did push changes for the TextArea component here but I'm unable to tag @mui/core. Are you sure this is the tag we should be using thanks again

Edit: Looks like an access issue for me. I cannot edit your comment from above also. Can you help please :)

[hbjORbj]

That's odd. I am not sure about that. Maybe because you are a first-time contributor? I requested a review from the core team on your behalf and added your PR URL as well.

[varunmulay22]

that's awesome Benny! much appreciated 😄

[sai6855]

@hbjORbj PR for divider #36374 , also even i'm unable to tag @mui-core