[RFC] BaseUI tutorial

[mj12albert]

Part of #32979

What's the problem? 🤔

• Base does not have a tutorial of similar depth and complexity as the Joy tutorial
• We got feedback about the current Tailwind based tutorial being impractical
  • For Tailwind integration, there could be more emphasis on the setup and the actual demo could be much simpler (e.g. just a button)

What are the requirements? ❓

• Can be implemented using only Base components or only Base hooks
• A more practical/realistic example than a music player
• No light/dark mode, it relies on the styling solution and not Base itself
• Looks good in both light and dark mode of the docs site

Options? 💡

1 - Credit card input

Sandbox: https://deploy-preview-36699--material-ui.netlify.app/base/getting-started/tutorial/#credit-card-input

Reference: (Stripe Elements)

2 - Steam Deck settings UI

Sandbox: https://deploy-preview-36699--material-ui.netlify.app/base/getting-started/tutorial/#steam-deck-settings

Reference:

3 - Login form just like JoyUI

Didn't make a sandbox for this one. Whereas the JoyUI tutorial has a focus on key features specific to Joy (e.g. global variants, color scheme), we could shift the focus on Base's features, e.g. show the login form with 3 different styling solutions, or implement the form using only unstyled components or only hooks

Maybe we could replicate a well known design e.g. the Github login form

Reference:

[mj12albert]

Right now I'm leaning more towards #2 even though it was kind of a last minute idea (actually more of a discovery), it makes use of 3 different Base components but overall isn't too complex.

#1 is a little flashier but I realized there's no pure hook equivalent of FormControl, and it requires a bit of extraneous code cluttering up the demo (svgs, some verbose credit card regexes)

[samuelsycamore]

Thanks for taking this on @mj12albert!! I love 2. I think it would be nice to have 3 as well, so users could compare/contrast Joy vs. Base. Actually it would be great to have them all, sooner or later :)

[danilo-leal]

Yeah, appreciate you doing this @mj12albert! I agree with y'all that 2 seems like the best but I kinda see a progression in complexity here (1 → 3 → 2) which makes me think if we couldn't have them all but oriented per levels of difficulty ⎯ e.g. "here's a beginner-level tutorial building something with Base UI"; "here's an intermediate-level..."; etc.

[mj12albert]

Continued in mui/base-ui#21 !