search

invoke-ai / InvokeAI

Invoke is a leading creative engine for Stable Diffusion models, empowering professionals, artists, and enthusiasts to generate and create visual media using the latest AI-driven technologies. The solution offers an industry leading WebUI, and serves as the foundation for multiple commercial products.
https://invoke-ai.github.io/InvokeAI/
Apache License 2.0
23.76k stars 2.44k forks source link

Web UI: Migrate from Chakra UI to a "headless" UI library #1194

Closed psychedelicious closed 2 years ago

psychedelicious commented 2 years ago

This is mainly a discussion for @blessedcoolant and @hipsterusername and relates to the internals of the web UI.

Now that we are implementing all styling in SCSS, there are only two reasons to stick with Chakra UI for the web UI:

There is a good reason to not stick with Chakra UI - its default styling is often very tricky to override.

There are a number of mature "headless" UI libraries, which provide accessibility and functionality without any styling. In my research, the best one appears to be Radix UI.

Other popular options include react-aria and headless-ui.

Propose we, at some point, maybe-probably-definitely-not-now-but-eventually, move to Radix UI. It provides all the components we could want with accessibility and none of the default styling headache.

The migration could be done piecemeal, component by component. Perhaps I am being too enthusiastic, but I reckon it may even be painless. Appreciate input.

If we did want to use a css-in-js library for styling, Stitches appears to be an an excellent option and is commonly paired with headless UI libraries.

hipsterusername commented 2 years ago

I’m in support - I think we’re at a point in building out our component library that we’d want to “do it for the long term” now, instead of reworking things in the future.

I think something we’ll want to do is be very explicit about contributions to and usage of the component library, being explicit about usage of existing components and establishing formal style standards (stitches seems great) so that we can enable more contribution

blessedcoolant commented 2 years ago

MUI also has a headless version if I remember correctly. And it is one of the most widely used libraries. I'm okay with any library that will have long term development.

psychedelicious commented 2 years ago

I'm giving Radix UI a squizz now - needed a context menu component for a potential gallery rework and they have one (works way better than my DIY hack). Working great so far and excellent documentation.

I know MUI is one of the most popular libraries, but many does it feel clunky. Maybe its just my google-phobia.

blessedcoolant commented 2 years ago

I've tried to use Radix and MUI on a test project recently. I liked both. But I felt MUI had more options. Additionally, there's Mantine. It's open source. But I am not sure if it is headless.

psychedelicious commented 2 years ago

Mantine not headless and seems to be incomplete or at least unstable. Well, that's just from what I've read on the reactjs subreddit.

psychedelicious commented 2 years ago

The main advantage to using something like stitches over straight SCSS is we can kinda get variants for free. Still a bit of work but it handles a lot of stuff for you.

I'm unsure if scss is more approachable than css-in-js but I would guess so for most people.

Ultimately styling is going to be a subjective thing so probably whatever we choose will be fine so long as it's a well known system.

blessedcoolant commented 2 years ago

Mantine not headless and seems to be incomplete or at least unstable. Well, that's just from what I've read on the reactjs subreddit.

So our viable options are Radix and MUI. I am okay with either really. As long as they both have all the components we might ever use.

The main advantage to using something like stitches over straight SCSS is we can kinda get variants for free. Still a bit of work but it handles a lot of stuff for you.

I agree. But one of the main reasons I prefer SCSS is because it is as close to native CSS as possible while easing some of the more absurd stuff like nesting, variables and mixins. This means anyone with knowledge of base CSS can edit just CSS files without ever having to open a JS file and fear breaking something or having to learn the working of another library.

But using CSS-in-JS has its own advantages. Components will become purely independent. We'll have easier control on conditional styling. And like you pointed out, variants if we use Stitches.

Honestly, I am okay to switch from SCSS to using Stiches if we can keep things simple. Let me try out Stitches in a test project and see how I fee about it.

psychedelicious commented 2 years ago

We have decided to stick with Chakra's styling for now.