Re-usable Components Library

[AdsonCicilioti]

Hi,

I'm looking for a tool that allows me to create reusable components. At first in React.
An important premise would be the possibility of using pre-compiled styles but also changing them at runtime.
And another very important thing would be the cleaning of unused styles, because a big challenge of Component Libs with pre-compiled styles is that they already bring a complete Bundle of all library components. Leading to the need for some kind of Wrapper Provider that scans which components were used in the application or page.

I know that these are early questions and concerns and the responsibility of the build of the application that will use this Component Lib, but beforehand I bring this question that I would also like to know if Morfeo covers it and how or what strategy would be more appropriate.

I got to Morfeo due to this apparent promise of being a tool to build a Design System / UI Components Library, so that's why I come here because I didn't find anything in the Documentation that makes this path possible.

[andreaSimonePorceddu]

Hi @AdsonCicilioti,

During the last months, morfeo have been significant changes, and all the requirements that you are looking for are now in the box:

• Morfeo create pure CSS styles at build time, but it even allows possible to have run-time changes
• Morfeo produce the minimum CSS possible
• Morfeo allows building a very customized theme system
• You can create your primitives component styles in the theme to keep your ar ap as consistent as possible
• Morfeo has a web extension for Chrome that allows you to preview your components directly in the browser

Unfortunately, most of those improvements have just been completed, and we need time to update the documentation. We are preparing a new website to document all new features from morfeo.

[AdsonCicilioti]

Cool!

Knowing this regardless of the new documentation I will explore the code. But if you point me through which function or file to look at that would be great.

Thanks for the feedback.

I also saw that Morfeo compares to the Styled System which is also an excellent tool for this purpose and which I am also considering using in my design system. But Morfeo looks much more promising to me. Congratulations!

[andreaSimonePorceddu]

Thank you very much for your interest in morfeo. Also, we think that Morfeo, with the new implementations, will be a perfect solution for styling from small to large projects; we need to upload the latest documentation as soon as possible.

About your answer, the next app https://github.com/morfeojs/morfeo/tree/main/examples/next uses the morfeo build-time configuration. Looking at the next.config.js, you can see that withMorfeo is imported and wrapping the app. Also, in the tsconfig.json.

Then, in this specific case, as a theme and primitive component libraries, we are using the @morfeo/preset-default library that contains a ready-to-use theme. You can see that the function initPreset() is called in tsConfig.json.

You can manually start your theme like the initPreset do. Look at this file: https://github.com/morfeojs/morfeo/blob/main/packages/preset-default/src/index.ts

You can find more info about the theme spec here https://morfeo.dev/docs/ThemeSpecification/overview
Specifically, here, you can see how to add components directly to your theme https://morfeo.dev/docs/ThemeSpecification/components

In general, the next project https://github.com/morfeojs/morfeo/tree/main/examples/next, also contains the implementation of some components that you can use as a sample.

Keep in mind that morfeo is still in evolution. Please take a look at the issues where we have some of the proposals we are implementing right now.

[AdsonCicilioti]

OK. But all examples and approaches always refer to creating components within the application itself.
In the new documentation, will they cover any examples of a package of independent, reusable components (ui library) built with Morfeo?

[mauroerta]

Hello @AdsonCicilioti,
we think that one of the most common use cases for morfeo will be a reusable component library, so we will surely document how to properly set an npm package for this purpose and/or provide an example project.

As @andreaSimonePorceddu said, we're working on making Morfeo a build-time solution, this approach is working but it's in alpha stage so I'd not recommend you to jump on it now - but if you don't want to wait or you don't care about the build time optimization you can already build a component library using morfeo at runtime.

I don't see any real difference between using morfeo directly on a project or making a UI library and then using this library inside the project instead of morfeo - may I ask you what are your doubts about it? Or do you already try and faced some issues?

Anyway, In case you need support, please just send any questions here in this discussion and I'll be more than happy to help you 🙏

Thanks for your interest in this project - any feedback is welcome ❤️

[AdsonCicilioti]

Thanks @mauroerta !

Eu ainda não testei o Morfeo. Mas certemente irei depois destas notícias. Vou ver como se sai em Runtime até que uma implementação build-time esteja pronta.

[andreaSimonePorceddu]

@AdsonCicilioti You can also find the the issue about the docs update here #707

[AdsonCicilioti]

I miss at least one example of how to create props for a React component, for example, based on variants and/or media-queries.

Here was the only prop example they used but based on two static choices.

Despite being an apprentice, I manage to generate types based on Themas/Slices objects, but I'm afraid I'm missing something or not following the correct path to do this.

I'm really looking forward to new documentation.