timbl
commented
2 years ago This all makes a lot of sense. I don't want to lose this vanilla JS implementation of solid-ui, why not build a material-UI based implementation of the form system? Then people could design large chunks of (in time more or less all) their apps using the forms language, and then roll out implementations based on any app. There is another implementation in the inrupt SDK work which is based on React... the more the better on different platforms.
Writing a UI framework is difficult. I tried it myself for a couple of years (for our Argu platform), and though the control it gave me was awesome, in the long run it was quite costly. The truly difficult part is finding the right abstraction - especially when it comes to theming functionality. Since Solid is all about giving the user an extremely high level of control, we need a theming strategy.
One UI library has a particularly powerful and well-thought way of creating themes: Material-UI. It's docs explain nicely how it works. In short, it uses CSS-in-JS to enable data (props) dependent UI changes and a theme abstraction that enables theme nesting. It also offers logic to deal with server side rendering, which is always nice.
We could create a material-ui theme for Solid, with purple accents. We can let users change their theme as well. We might specify a "solid:themePreference" shape that sets a (minimal) set of parameters, such as heading font, rounded corners, drop shadows, night theme, etc.
The design of material-ui (or at least, the default theme) seems to look a lot like design.inrupt.com. It uses cards with drop shadows, colored checkboxes, similar toggle buttons, the 'pills' tag abstraction, similar label+input form designs, the three button menu icon...
What also helps, is that Material-ui is a really popular repo, which means that it works really well on a lot of browsers, and has proper accessibility setttings. It's dateTime pickers, for example, work like a charm with a keyboard.
It has a really nice alert ('snackbar') abstraction, it's forms look & feel great, the dropdown menus and dialogs are awesome, the tables are wonderful...
It's quite a large dependency (425kb minified, 101kb gzipped), but I think it is worth it, since it could save us a ton of time during development. It also might help to make the Solid UX more consistent, if we would nudge solid component developers to use this (e.g. by including it in a boilerplate). If we use JS Modules, we can prevent duplicate loading and save bandwith.