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

[hbjORbj]

Hmm, okay. I reviewed it for now. Thanks.

[varunmulay22]

@hbjORbj still unable to tag or edit your comment from above. You may expect a few more PR's till EOI 😅

[sai6855]

@varunmulay22 before working on component, can you mention here, which component you started working on so that others can pick another component

[varunmulay22]

@sai6855 You do the same too please. I am picking up switch radio, modal and menu next

[sai6855]

@varunmulay22 okay, I'll pick checkbox,list, select

[hbjORbj]

Thanks, both of you! Don't worry, once you create a PR, I will paste the URL.

[hbjORbj]

@varunmulay22 Are you working on Radio as well?

[sai6855]

@varunmulay22 if you are not working on radio, i can pick it up

[varunmulay22]

Hey @sai6855 @hbjORbj I'm a little hands down with work today. Feel free to pick radio up Sai.

[sai6855]

Thanks a lot, I'll start radio once list is done

[sai6855]

@hbjORbj #36382 pr is ready for review

[sai6855]

@hbjORbj PR for radio (#36406)

[theVedanta]

@hbjORbj #36405 PR for Radio is ready to review

[theVedanta]

@hbjORbj PR for radio (#36406)

Hey! I'm sorry I did not know you had started working on radio.

[sai6855]

Hi , yeah I mentioned same in this comment #36367 (comment). You probably might have missed it, Maybe you can work on this issue #35933?

[theVedanta]

Yeah I’m sorry I missed it, thank for that recommendation!
Also can you check my PR and tell me whats wrong with the checks? It says labels are missing for some reason… cant seem to figure that out

[sai6855]

Yeah I’m sorry I missed it, thank for that recommendation! Also can you check my PR and tell me whats wrong with the checks? It says labels are missing for some reason… cant seem to figure that out

You need not be worried about labels, only maintainers can add labels. Once they add labels ci check will pass

[hbjORbj]

Reviewed and approved your PR for the Radio. Thanks! @sai6855
Thanks for the initiative as well! @theVedanta

[varunmulay22]

@hbjORbj 3 PR's are ready for review

[hbjORbj]

This is now complete! Thanks for the contributions <3