[code-infra] Ease playground creation

[oliviertassinari]

I initially tried https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md#trying-changes-on-the-playground but it didn't work. It then took me some time to figure out how to get a working playground.

Maybe this can help?

Off-topic. Tailwind CSS doesn't load on the playground. I believe we should configure it.

[mj12albert]

I feel like it would be easier to just move playground.template.tsx to ../(private)/playground and manually duplicate/copy it when you want to make a new playground
In the Material UI repo I've used the playground script once (maybe twice?) and after that I just made new ones by duplicating something already tehre

[michaldudak]

👍 I agree, I never used the script. The main problem I currently see with the playgrounds is how deeply nested they are in the directory tree.

[mj12albert]

how deeply nested they are in the directory tree

Now that you mention this, what I've been doing a lot (manually in the terminal) is copying some demo in /(public) to the playground dir, and replacing the style import with import styles from '../../(public)/(content)/react/components/slider/demos/hero/css-modules/index.module.css'; (repeatedly from my clipboard history 😅)

Maybe you all are doing something similar as well? If so maybe a script could help, e.g. take the path to a demo and copy that demo to the playground, optionally rewrite the path to styles or copy the css file as well: pnpm create-playground slider/demos/hero (or menu/demos/checkbox-items etc)

[michaldudak]

Yeah, I see how this could be useful. If it also opened the created playground in vscode, it would be nearly perfect :)