RFC: Core Components

Approved by:

Former kickoff discussion: https://trello.com/c/UYp45jP5/29-create-a-set-of-core-view-components

Proposal

Use View Components to create a set of core components to be reused across the project in order to standardize the implementation of similar objects.

Definition of a Core Component

A core component is meant to be a composition of elements that can be considered reusable for the same purpose in multiple circumstances, it doesn't matter the level of the internal complexity: it might be a single atomic element or a nested connection of multiples.

View Component Insights

A View Component has all the properties a reusable component need to have: slots to pass custom content but keep it organized in the same scaffolding shape, previews in order to have a static visual way of understanding what would be the outcome, testing that might also be done on top of previews, conditional rendering that makes it dynamically adaptable, and more (for reference see the official guide https://viewcomponent.org/guide/ or the obs internal one too https://github.com/openSUSE/open-build-service/wiki/View-Components)

Pros and Cons

Pros

• consistency: all the same category elements aligned and shaped in the same way
• unified reusable implementation
• view components tests, previews and more built-in mechanisms
• prevent overlapping between different implementation of the same things on different occurrences

Cons

• in some case it might seem to be a re-implementation of utilities and helpers they already exist, especially if the core component is an atomic one, or it might feel like an HTML element wrapping implementation (helpers like content_tag, or link_to, button_tag, etc already exist)
• hard to move and reach to a state where core components are the only implementation in place

POC

• A basic button component introduced here https://github.com/openSUSE/open-build-service/pull/15030 and an enhancement available here https://github.com/openSUSE/open-build-service/pull/15073

• A modal component: https://github.com/openSUSE/open-build-service/pull/15032

How it would look like?

Here it is an example of what would mean to get rid of different ways of generating a button, and using the button core component instead: https://github.com/openSUSE/open-build-service/pull/15074/commits/b7cf2958db7ee011104b112a22787bcf94624cc4