[docs] Update all demos of the docs to include "use client" when needed

[oliviertassinari]

Summary 💡

The nominal user experience for a developer starting with Material UI is the following:

1. Start with an example https://mui.com/material-ui/getting-started/example-projects/

https://analytics.google.com/analytics/web/#/analysis/p353089763/edit/IBVRQAiCT2mrgZwzpg9fFQ

2. 28% are going with Next.js App router
3. Install it, use the first template.
4. Go to https://mui.com/material-ui/react-select/#basic-select copy the first demo
5. ❌

So I think we should update all the demos in the docs to have "use client" where needed.

Examples 🌈

• https://mui.com/base-ui/react-modal/#system-UseModal.tsx

• https://ui.shadcn.com/docs/components/switch#form

Motivation 🔦

Better DX

Benchmarks

• https://flowbite-react.com/docs/components/button-group

[mnajdova]

This makes sense to me. @mj12albert we should likely extend the rsc:build cmd to apply the changes on the docs demos too.

[oliviertassinari]

I don't know about rsc:build. We already have docs:typescript:formatted that goes over the demos. I think it could make more sense to rename this script so that we can only have one script & one pass on each demo file, it could run faster. In the future, I could very well see automatic style engine change happening in that script as well.

rsc:build the name of this script is strange. This is not a build phase script. Maybe rsc:append? It would make a lot more sense to me.

Now, I do think that both scripts should share the same logic, even if they don't handle the same files.

rsc:build blindly applying "use client" is OK as a v0 but not as a v1, we need to support full server components as well, see 🔽

Otherwise, the idea of automating makes a ton of sense. I think it should at least add "use client" if there are non-compatible hooks used. I'm not sure we will be able to automatically detect non-serializable props, so we might not be able to remove "use client" automatically.

[oliviertassinari]

To get a better sense of the relevance of this issue, I did a quick analysis on the downloads https://www.notion.so/mui-org/Monthly-meeting-2023-09-12-b55ca5b7944a4658822de0356a596f6c?pvs=4#b4af5477544d47d4bea7239aadacca70. I feel that it makes sense to add the "use client" at the expense of those who don't need them as it doesn't feel we focus enough on Next.js integration.

If we really have developers using Vite, CRA who push back, I think we could create a setting to automatically remove them: