RFC: Core Components

Approved by:

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

• Proposal
  • Definition of a Core Component
  • View Component Insights
• Pros and Cons
  • Pros
  • Cons
• POC
• How it would look like?

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