Big changes to MUI Treasury

[siriwatknp]

Hello 2024, I'm back! After a long pause, I finally believe that the long-term vision of MUI Treasury is copy-pasting/CLI.

More than a year ago, I posted an RFC of the copy-pasting/CLI approach with some proof-of-concept but never published the work due to my full-time workload. At that time, I really liked how it gave me full control of the code but I'm not really sure if it would work with other people. Luckily, shadcn/ui has proved to be right with this approach so I am really confident that it's the right way to go.

Changes

MUI Treasury will no longer provide components or styles as NPM packages, instead lets you own the source code by copy-pasting or running the CLI to pull the source code to your project. This way is a win-win because I can produce more components faster without thinking too much about the API and you can fully customize them to match your needs!

How it looks like

• Go to mui-treasury.com and pick a block that you want to use in your project
• Open a terminal at your root directory, run npx mui-treasury@latest clone $block-name (replace $block-name with the blocks you want)
• Render the block to your page

It's that simple!

⏳ Work in Progress

• Migrate layout https://next-mui-treasury.web.app/?path=/story/layout-introduction--page
• Migrate tabs https://mui-treasury.web.app/styles/tabs/
• Migrate switches https://mui-treasury.web.app/styles/switch/
• Migrate cards https://mui-treasury.web.app/components/card/
• Migrate some of buttons https://mui-treasury.web.app/styles/button/
• MIgrate checkboxes https://mui-treasury.web.app/styles/checkbox/
• Migrate menu https://mui-treasury.web.app/styles/menu/
• Migrate select https://mui-treasury.web.app/styles/select/
• Migrate text fields https://mui-treasury.web.app/styles/text-field/
• Fix links on mui.com docs
• Migrate grid https://mui-treasury.web.app/styles/grid/
• Migrate input base https://mui-treasury.web.app/styles/input-base/
• Migrate list item https://mui-treasury.web.app/styles/list-item/
• Migrate text fields https://mui-treasury.web.app/styles/text-field/
• Migrate navigation menu https://mui-treasury.web.app/styles/navigation-menu/
• Migrate nested menu https://mui-treasury.web.app/styles/nested-menu/

closes #1215, closes #1162, closes #1136

[mwillbanks]

@siriwatknp great work, really like the new approach! Looking forward to the layout migration as it's essentially the main component we utilize consistently. As you noted in the storybook there:

I created this because

• It took me a lot of time to initialize dashboard layout when I have new projects or ideas to prove and I’m sure that a lot of you are the same as me.
• Because we need to be fast to let others continue our work, we frequently write poor and a lot of code. However, we say we don’t have time to fix them. Eventually, spend all day paying technical debts.

Exactly the reason we've been really enjoying that component!

[siriwatknp]

@siriwatknp great work, really like the new approach! Looking forward to the layout migration as it's essentially the main component we utilize consistently. As you noted in the storybook there:

I created this because

• It took me a lot of time to initialize dashboard layout when I have new projects or ideas to prove and I’m sure that a lot of you are the same as me.
• Because we need to be fast to let others continue our work, we frequently write poor and a lot of code. However, we say we don’t have time to fix them. Eventually, spend all day paying technical debts.

Exactly the reason we've been really enjoying that component!

Awesome! I'm focusing on the layout migration this week.

[oliviertassinari]

I had forgotten about this MUI Treasury and hence this change opportunity, this sounds like a great idea 👍