[docs-infra] Add CodeSandbox/Stackblitz to the rest of the templates

[siriwatknp]

Preview:

• Dashboard
• Marketing page
• Checkout
• Sign in side
• Sign up
• Blog

Follow up PR from #43604

• Mostly deleting duplicated theme files in each template (switch to use the shared theme)
  🫣
• Fixed minor CSS after switching to shared TemplateFrame
• Refactor theme.palette.* to use theme.vars.palette.*

---

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

[mui-bot]

Netlify deploy preview

• docs/data/material/getting-started/templates/blog/README.md
• docs/data/material/getting-started/templates/checkout/README.md
• docs/data/material/getting-started/templates/dashboard/README.md
• docs/data/material/getting-started/templates/marketing-page/README.md
• docs/data/material/getting-started/templates/sign-in-side/README.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against bc9e2c2

[zanivan]

@siriwatknp, these are the issues I found during my initial review. I won't dive too deep into visual tweaks for the templates, like the box-shadow on the marketing page appbar, since that's not the focus of this PR. I've kept the feedback primarily focused on layout and interaction issues based on TemplateFrame:

• There's an issue on the mobile layout of the Marketing-page, Sign-in, and Checkout templates:
  

• The AppBar on Blog template is not centralized:

• The drawer in the Blog/Marketing page template is placed behind the TemplateFrame:

• The same issue happens in the mobile drawer of Checkout template:

• There's a vertical scroll in the Checkout template:

Screen.Recording.2024-09-11.at.08.57.18.mov

• There's an arrow icon behind the color mode select (same as in this comment):

[siriwatknp]

Updates:

1. Make the theme selector smaller in mobile viewport

2. Addressed all of the comments

[DiegoAndai]

Question

Mostly deleting duplicated theme files in each template (switch to use the shared theme)

I thought the idea was to have duplicate theme files so each template would have all the code. This way users can clone one template without having to navigate to the shared theme. Is this no longer the case? @zanivan

Some issues found

1. Checkout mobile dark mode

2. Blog images not showing up

3. Stackblitx only: Sessions graph width not working as expected

Screen.Recording.2024-09-12.at.09.42.37.mov

[zanivan]

I thought the idea was to have duplicate theme files so each template would have all the code. This way users can clone one template without having to navigate to the shared theme. Is this no longer the case? @zanivan

This was the idea, as the only way users could get the templates before was by copying the folder from the project. However, integrating with CodeSandbox/StackBlitz solves this issue, since @siriwatknp packaged the shared theme within the template files when opened on either platform

[zanivan]

Some bugs/issues I noticed while reviewing it again:

• The TemplateFrame toolbar sometimes gets stuck when scrolling the dashboard template:

• The AppBar from Blog and Marketing-page templates is not centralized:

• There's an issue in all templates in both StackBlitz and CodeSandbox regarding the dark/light theme:

---

Just a disclaimer, there are other small UI improvements since we changed the way the TemplateFrame works, and some other adjustments, that can be addressed in a future PR.

[DiegoAndai]

This was the idea, as the only way users could get the templates before was by copying the folder from the project. However, integrating with CodeSandbox/StackBlitz solves this issue, since @siriwatknp packaged the shared theme within the template files when opened on either platform

This makes sense. I'll leave it up to you to decide. I think we could be a bit more cautious: We have this new and improved way to use the templates with the sandboxes, and we should promote it, but it might not be best to "remove" the old way right away. There's no rush; we can wait and see how users react to this new system, and if it sticks, we can remove the old one (duplicated themes).

If you decide to remove the duplicated files, then let's also remove the copying mechanism and CI check, which were added here: #43220

[zanivan]

We have this new and improved way to use the templates with the sandboxes, and we should promote it, but it might not be best to "remove" the old way right away. There's no rush; we can wait and see how users react to this new system, and if it sticks, we can remove the old one (duplicated themes).

No strong opinion on this. Maybe we can wait until the feature to copy the theme to the clipboard is ready before removing the theme folders from the templates

[siriwatknp]

I think we could be a bit more cautious: We have this new and improved way to use the templates with the sandboxes, and we should promote it, but it might not be best to "remove" the old way right away

Thanks for pointing out. Let me clarify the removal of the duplicate theme. Using the shared-theme import has more benefits in several ways:

• Better DX, updating the shared theme immediately update all the templates, no longer need to run the script every time you change the code. Also, when new template is added, you don't need to remember to update the script.
• Reduced complexity, no script, no CI check. Faster feedback loop, if you forget to run the script, you need to wait for more 15-20 minutes until the CIs are green.
• Almost 20k lines are removed, the repo size is already huge (> 120MB). If we could optimize it, we should do it.
• The duplicated theme is not required to make the CodeSandbox/Stackblitz works.

With all the above reasons, I don't see why we should keep the duplicated theme.

[siriwatknp]

• There's an issue in all templates in both StackBlitz and CodeSandbox regarding the dark/light theme:

This is a regression from #43632 due to <StyledEngineProvider injectFirst>. I'm investigating.

[siriwatknp]

• The AppBar from Blog and Marketing-page templates is not centralized:

Can you explain what not centralized?

[siriwatknp]

@zanivan @DiegoAndai The dark mode bug that you see will be fixed by #43739.

[zanivan]

Can you explain what not centralized?

I don't know exactly if it's the AppBar or if it's the content, but there's a difference on the left/right alignment:

[DiegoAndai]

With all the above reasons, I don't see why we should keep the duplicated theme.

I understand the reasons, and I fully agree that we should do it at some point 👍🏼 my question was, "Are we ready to remove the previous DX?". @zanivan and @siriwatknp agree that we should, so let's do it.

Then my point becomes that we need to:

1. Update/remove the usage instructions on each template folder: https://github.com/mui/material-ui/tree/v6.1.0/docs/data/material/getting-started/templates/dashboard#usage, as not all files will be available in the templates' folders.
2. Remove https://github.com/mui/material-ui/blob/master/docs/scripts/updateTemplatesTheme.ts
3. Remove https://github.com/mui/material-ui/blob/master/package.json#L42

[siriwatknp]

1. Update/remove the usage instructions on each template folder

Good point, did not know they exists.

Update all the readme to include copying shared-theme and remove the script. Waiting for #43739 to be released.

[siriwatknp]

@zanivan I could not see the difference. Is it the dashboard template?

[zanivan]

@zanivan I could not see the difference. Is it the dashboard template?

@siriwatknp It's happening on Marketing-page and Blog, and I found the reason: It's because my scroll bar is set to always visible, and this ends up causing the layout shift

[siriwatknp]

@zanivan I could not see the difference. Is it the dashboard template?

@siriwatknp It's happening on Marketing-page and Blog, and I found the reason: It's because my scroll bar is set to always visible, and this ends up causing the layout shift

Got it. The way I see to improve it is to switch the header to position sticky but I think it should be done outside of this PR.