HN Explorer

Ask HN: Where can I find higher-level UI components?

4 points by miguelrochefort ↗ HN
There exists a lot of high-quality UI component libraries such as MUI, Bootstrap, ANT, Grommet, Chakra, Semantic UI, etc. These components typically map to primitive types:

    boolean -> checkbox / toggle button / visibility
    integer -> numeric input / slider
    enum -> drop down menu / radio buttons
    string -> text field
    date -> date picker
    array -> list view
    matrix -> table view
    bitmap -> image
    async promise -> loading indicator
    side effect -> button
But what about higher-level types, classes, and schemas? Where can I find UI components that map to a person, a place, an event, a product, a transaction, a movie, an album, a book, an article, or a comment? Shouldn't higher-level UI components exist for popular ontologies such as Schema.org? It seems absurd to manually reimplement these templates in every project, yet I can't seem to find any comprehensive library of such components.

Have I been searching in the wrong place or do such higher-level UI component libraries actually don't exist?

4 comments

[ 6.6 ms ] story [ 18.0 ms ] thread
PaulHoule
Aren't these idiosyncratic?

For instance an online bookstore might have the following kinds of "person":

   an administrative user
   a customer
   an author
   a person who a book is about
   a contact at a vendor
the same is true for some other application just the list of "classes" and essential attributes of those classes is different.
miguelrochefort
You make an excellent point, and it's important to understand that these higher-level templates need not be static, immutable, canonical representations of instances of classes but rather models informing when and how its parts should be presented.

I think the same question applies to lower-level UI components. Don't primitive fields also rely on their context to properly behave and present themselves? For example, text is rendered differently based on language, location, screen size, accessibility settings, and time of day. Likewise, text fields behave differently whether they represent a person's name, an email address, a phone number, a credit card number, or a password.

Similarly, a person template should also adapt to its context and the intent of the user to properly select an appropriate presentation. For example, if a list of authors is filtered to only show American authors, then it might not make sense for item templates to redundantly show the author's nationality. Whether this task can be sufficiently automated to be practical without AGI is still an open question which I'm attempting to resolve.

PaulHoule
Send me an email, I am very interested in model driven UI as you describe.
miguelrochefort
The closest attempt at creating a directory of standard platform-agnostic UI templates I could find is this repository [0] associated with the Adaptive Cards project [1]. Unfortunately, it only contains a handful of templates.

In practice, Google's Rich Results [2] seem to provide the most extensive set of templates aligned with Schema.org, but documentation is limited and they're not open source. Similarly, Wikipedia features thousands of high-quality infobox templates [3], but they're not readily usable outside of Wikipedia and might have limited utility in non-encyclopedic contexts.

[0] https://github.com/microsoft/adaptivecards-templates

[1] https://adaptivecards.io

[2] https://developers.google.com/search/docs/advanced/structure...

[3] https://en.wikipedia.org/wiki/Wikipedia:List_of_infoboxes