[base-ui][examples] Add Base UI + Next.js + Tailwind CSS example in JavaScript

[mapache-salvaje]

Part of #36193

For those who prefer not to use TypeScript, I've converted the existing example project to JS.

Eventually I'd like to see both examples updated to add some MUI branding, but we should wait for an official design before spending too much time editing these, and the updated design should be applied consistently across all examples when it happens. For now I think it's better to have anything rather than nothing.

[mui-bot]

Netlify deploy preview

https://deploy-preview-40236--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against d92b2c1

[danilo-leal]

Sweet! 🤙 Pushed a few commits there, uplifting the design a bit, but I couldn't figure out the Switch and Slider's focus state correctly. A strange dark box shadow appears on the former, even if the track is (correctly) focused, and nothing appears at all on the latter (no idea why).

Another reflection that I had is that I always see us customizing the Base UI component slightly differently depending on the place. For example, if you get all of the components used here and compare the code to their introduction demo, how we customize active, focus, and other conditional states looks different. I never really know which approach is the best/recommended, but the one from this example project feels much easier to parse. 😬

[mapache-salvaje]

Another reflection that I had is that I always see us customizing the Base UI component slightly differently depending on the place. For example, if you get all of the components used here and compare the code to their introduction demo, how we customize active, focus, and other conditional states looks different. I never really know which approach is the best/recommended, but the one from this example project feels much easier to parse. 😬

That is really good feedback. As much as we want to keep Base UI open-ended, I think it's still important that we present users with best practices or at least one consistent approach in the docs. I'd love to get @michaldudak and @mj12albert 's thoughts on it!

[michaldudak]

Having one canonical customization code and reusing it across demos would help a lot here. This is achievable when we have file tabs on the demos and can use the same customized component in multiple demos.

[siriwatknp]

@samuelsycamore @michaldudak @colmtuite Is this PR ready to be merged or is it waiting for the new APIs?

[michaldudak]

This should now live in the new Base UI repo, but I'm not keen on just moving it there, with all the API changes planned. Can we revisit this topic once we have the new API across all components in the new repo?
Let's close it here, because we don't want to add anything Base UI-related to the Core repo.