[RFC] Mui Treasury Next!

[siriwatknp]

It's been a while since I pushed the last commit to this repo and it is time to continue! (hopefully full time in the future)

First of all, thank you everyone for trying out the libraries, open issues and send feedback to me. I believe that mui-treasury will be a great companion tool for material-ui.

Here is the things that I think the current libraries (components & styles) need improvements.

TLDR;

I am currently working on POC of the new version in this repo https://github.com/siriwatknp/mui-treasury-next

Versioning & Package

Current

Currently if you want to import some component or styles, here is how you do it.

import { TextInfo } from '@mui-treasury/components' // v1.0.0

The problem is that you only use TextInfo in your project but me or other people is working on new component or fixing some bug, once those tasks are done the production version is increased to v1.1.0 but your component is not changed, why do you need to update! it seems a small thing when we talk about one 1 component but my goal is to scale this project into thousands of components and million styles (I'm serious). At that point, the developer needs the versioning to be stable and predictable.

Next

I propose to split each component and style into its own package. With this change, you can be sure that you only updated when you need without headache surprises and you can be sure that the changes is what you expected.

// before
import { TextInfo, ...other components } from '@mui-treasury/components' // v1.0.0

// next
// only one component per package
import { TextInfo } from '@mui-treasury/component-text-info' // v1.0.0

If you only this component in your project, you can take a look at the package's change-log to see what's is the changes without scroll down in a big change-log in @mui-treasury/components

Same as styles

// current
import { useGradientAvatarStyles } from '@mui-treasury/styles/avatar/gradient';
import { useDynamicAvatarStyles } from '@mui-treasury/styles/avatar/dynamic';

// next
// only one style per package
import { useGradientAvatarStyles } from '@mui-treasury/style-avatar-gradient';
import { useDynamicAvatarStyles } from '@mui-treasury/style-avatar-dynamic';

I am so excited about the new approach (it also unlock the next improvement!) ❤️

Customisation

current

It is not possible to serve everyone's need. Currently, the simplest way to use the component or style is import via the package. But I believe that 99% (even a small component like button, input) you need to something different than what you see in mui-treasury. Let's take a look at the button, for example, what if you need this style with border-radius: 2px and some people needs bigger font size. It's impossible and I don't think it's a good idea to make the styles so dynamic for everyone. Even we can do it, no one will use it because it will be very hard to use (a lot of api & docs) and a lot of code that u don't need in your codebase. How to fix it 🤔?

Next

I have a solution! (and I think it is a good one from POC). Now, you need a similar style with a little tweak adjustment, what if there is a tool that you let you pull that style into you project and you can change anything based on your need?

introducing mui-treasury cli a small command line tool that will pull the code of that style or component into your project with just a second. here is what it looks like.

mui-treasury clone style-button-firebase

a folder will be created (can be customised) like this

|-- src
     |-- mui-treasury // new folder
	  |-- style-button-firebase
		|-- index.ts
		|-- ...production code
     |-- ...your project

From what I tried, it is amazing! this is what I have been looking for for a long time 😊

By the way, it supports both typescript and javascript project, so you can pick via cli argument or config file.

Extended Theme & Components

There are a lot of cases where I want to use primary color but lighter that the light value that material-ui provide and I don't want to use the function like fade to calculate every time because that is not how it works in real life (normally, designer would provide the color palette according to design system or the dev can just ask them to provide one for consistency)

Current

I didn't extend the theme in the current version, so the code is quite messy and not performant. However, I have found recently that material-ui support theme extension 😲.

https://material-ui.com/guides/typescript/#customization-of-theme

Next

I created a new POC package that will handle the theme extension @mui-treasury/theme-treasury

this library will have a default palette (copy from tailwind) with the same key similar to material-ui already has primary secondary success error warning info and new object called treasury

// theme structure
{
	treasury: {
		palette: { ...colors }
		...some utilities
	},
	palette: { ...material-ui palette}
	...material-ui theme
} 

the benefit of this library is that if you typescript, once you install the library you will have typed ready for you.

For components and styles, I found one tips in material-ui that if we create style like this.

import { fade } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import { ShapeProps } from "@mui-treasury/component-shape";
import { TreasuryTheme } from "@mui-treasury/theme-treasury";

export const useShapeStickerStyles = makeStyles(
  ({ palette }) => ({
    root: (props?: ShapeProps) => ({
      border: "4px solid",
      borderColor: palette.background.paper,
    }),
    text: {
      backgroundColor: palette.background.paper,
    },
  }),
  {
    name: "MuiShapeSticker",
  }
);

then in the theme you can customise your component's props as if MuiShapeSticker is a component from material-ui 🎉

with this approach, if you use the components or styles from mui-treasury, you will be able to custom props or overrides in the theme as if they are from material-ui

This is mind blown for me when I first found out 🤩

Documentation

current

I spent a lot of time creating components and setup https://mui-treasury.com which I don't think it is productive much. For me, I think I need a tool to help me on that so I can focus on building more components & styles.

Next

I will move everything in https://mui-treasury.com to Storybook because from what I tried, it support everything that I need.

• MDX
• Searching components and styles
• Custom backgrounds
• iFrame (can adjust canvas size)

But I am still not 100% sure if I have 10000 styles, is it still performant with react dynamic import (let's try it 🤗)

All the work is currently in development, even though I release some of the packages to test the developer experience.

• cli: yarn global add mui-treasury
• @mui-treasury/component-shape for icon container
• @mui-treasury/style-shape-sticker custom style for Shape component
• @mui-treasury/theme-treasury extended theme

Please, leave your comments & thoughts. My plan is to incrementally move the components & styles including layout to mui-treasury-next repo until all done and replace it.

https://mui-treasury.com will be changed from gatsby to storybook instead.

Estimated Time: ~3 months (hopefully)

[siriwatknp]

This new version should fix these issues

• Make styles easier to change #1026

[izziaraffaele]

I'm trying out the latest alpha version (20) against a fresh installation of material-ui 5 (beta.3) with next.js and I'm getting an error: "Cannot use import statement outside a module"

Here is a codesandbox minimal example to reproduce the issue https://codesandbox.io/s/suspicious-nash-q3sol?file=/package.json:201-216

[siriwatknp]

Done!