search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.32k stars 32.12k forks source link

[base-ui][docs] Create more examples for Base UI #36193

Open samuelsycamore opened 1 year ago

samuelsycamore commented 1 year ago

Problem

The MUI docs currently contain many scaffold examples and template projects for Material UI, but we're lacking in comparable examples for Base UI. Developers shouldn't have to deal with any initial setup steps to start building with each of our libraries using any framework.

Solution

This is an umbrella issue to keep track of the progress in expanding our collection of Base UI examples.

As a first step, I've created #36112 to establish naming conventions in the examples folder to keep things organized.

From there, I'd like to reach parity with the Material UI examples, so we should plug Base into Create React App, Next.js, Vite, etc., both in JS and TS.

Scope

The scope of this issue is limited to bare-bones scaffold projects. I also want to build more templates and fully functional starter apps, but that will be for a separate issue.

I think it makes sense to add JS and TS examples together in one PR for each framework.

Tasks

Base UI

Naming conventions

library-framework(-ts)

Library prefixes:

TypeScript examples get a -ts suffix.

✅ base-ui-nextjs-ts ❌ base-ui-nextjs-js // omit the "-js" flag since this is the default

✅ base-ui-remix ❌ mui-base-remix // needs to start with lib prefix "base-ui"

mj12albert commented 1 year ago

There could actually be more combinations between the CSS framework (e.g. Tailwind) + Base + the "application" framework (e.g. Vite) like this:

What do you think @samuelsycamore ?

samuelsycamore commented 1 year ago

Absolutely @mj12albert ! The list here is just meant as a starting point for us to reach parity with the existing Material UI examples. Definitely open to creating more as we see fit.

oliviertassinari commented 1 year ago
  1. I think that we could remove all the Gatsby examples, not worth the opportunity cost: https://npm-stat.com/charts.html?package=gatsby&from=2021-08-03&to=2023-08-03. It will be more time we can use to polish the other examples.
  2. Examples for Base UI don't make a lot of sense for me. I think having one for developers to provide bug reproduction would be fair, one for us internally to test different styling solutions would also be fair. But beyond?? For the Joy Design version of Base UI, installation steps could be enough, https://ui.shadcn.com/docs/installation/remix. I'm afraid of how much time it could take to maintaine the 3-tuple of (TypeScript/JavaScript, Framework, Styling library).
  3. We need to revamp the CDN examples, they should use ESM now, not UMD.
  4. For the Joy UI examples, I think that having Next.js App Router is enough for the bulk of the need. I don't think that it would be a major hurdle if we didn't have other at the point of the stable release. However, a big :100: to add analytics on the Material UI examples to know the actually need for each example. I'm guessing when I say only App Router.
samuelsycamore commented 1 year ago

@oliviertassinari all of that makes sense. I do think we should provide examples for Base + Tailwind + major frameworks, because there's enough of a demand for "MUI + Tailwind" that it's worth maintaining those. I'll pare down the lists here, and we can keep an eye on the Material UI analytics to see what else to prioritize (if anything).