[docs] Migrate DefaultTheme demo to Typescript

[rogerclotet]

Add Typescript Demo (#14897) for DefaultTheme.

• I have followed (at least) the PR section of the contributing guide.

[rogerclotet]

Not sure how to "fix" this, it's transpiled like this because I'm using the Theme type in Props, and that's correct, but now the javascript code is pretty much unreadable.

[merceyz]

You need to tell it to not resolve props with the name theme, same as what was done with classes
https://github.com/mui-org/material-ui/blob/0168a6d2ecb7c684dd12a7ea8e5cf210f6ee4944/docs/scripts/formattedTSDemos.js#L91-L93

[rogerclotet]

Thank you! That will be very useful in the future.

[mui-pr-bot]

No bundle size changes comparing 78db8a0...82cd50b

Generated by 🚫 dangerJS against 82cd50b

[oliviertassinari]

@rogerclotet Hey, thank you for taking the time to work on this issue! However, I don't think that it was needed. The sources of the demo are not visible ("hideEditButton": true). Now, it could help in the future if we migrate everything to TypeScript :).

@eps1lon Do you think that we should accept the changes? I'm happy either way.

[rogerclotet]

@oliviertassinari I looked for a somehow easy to migrate component from the list in #14897 for my first contribution, since I'm not experienced and I want to start contributing a bit more. I don't mind if this is closed, just make sure the issue is properly updated to indicate this component migration is not necessary.

Regarding hideEditButton, it doesn't seem to affect your ability to see the source code in the demo. You can see it by yourself here. I think it's still useful to see code about withStyles and withTheme in Typescript, since it's a bit tricky to figure out if you're not familiar with it.

[oliviertassinari]

@rogerclotet You are right. Thank you for pointing that out. I have updated the related issue to remove the demos that have the "see source" button hidden. I have confused hideEditButton and hideHeader. I think that the demo should have hideHeader set instead. I have assumed it was already the case.

What do you think of changing the flag of the demo? As for the TypeScript version of it, if it was simple to migrate. I think that we should keep the JavaScript one. The source should be optimize for the speed of iteration of the contributors. It's probably faster to work with the JavaScript version.

[oliviertassinari]

Thanks for your interest in contributing 🤗. We only have a few demos left to migrate. If you could manage to get them all, it would be awesome 💪.

[rogerclotet]

Seems fair, it wasn't too hard to migrate, and the transpiled code is a mess. I will close this PR and open a new one adding the hideHeader flag as you suggested.

I will also start migrating other demos, I will try to find some more useful ones next time 😉

Thank you for your feedback!

[rogerclotet]

Opened a new PR: #16937