Codey

Appearance

Report a problem:

Problems can be reported via Microsoft Teams in your team channel within the "IT - Codey" team.

Please include the following information:

Report type:
Docs problem report a bug instead →
Path:
/vnext/contributing/adr/records/004__extend-the-component-library-with-primevue.html
Message:

DESCRIBE THE PROBLEM BEFORE SUBMITTING TO CODEY

Extend The Component Library with PrimeVue ​

Status: Approved

Decision Date: 21/11/2022

Scope: codey-components

Context ​

Pain points: ​

  • Currently 7 components rely on different third party libraries. This requires to dive in these frameworks/libs for upgrade/maintenance and potential enhancements.
  • With the upgrade to Vue3 we noticed that all external components require an update or migration of the external library used for that component.
  • The v-calendar component (used for our calendar), did not receive an update to Vue3 and seems to be unmaintained (551 issues & 51 open PRs). Because of this we find this component needs to be replaced.
  • Current components styles are embedded and partially overwritten. Because they are embedded, the codey-style lib also has dependencies on vue libraries. This feels unhealthy for a style library and creates maintenance issues when it comes to upgrade/updates.

Why PrimeVue ​

  • PrimeVue is currently used for new back-office applications, its a logical choice to go forward with the this library.
  • PrimeVue is backed by a company, it gives a better confidence that it will be maintained in the long run.
  • Theming through css needs to be possible to support codey-style theme's (my family), which is one of primeVue strong points as it is their business model.
  • codey-style won't need primevue as dependency as theming within prime is purely css class based.

Decision ​

I decided to go with PrimeVue to extend the codey-components and extend codey-style to provide theming for the selected PrimeVue components.

We will re-export the components that we tend to use and not wrap them with our own flavour. This allows direct reference to the prime docs and easy upgrades of the used components.

Consequences ​

  • Theming overrides will need to be added to style PrimeVue components within the Codey look and feel.
  • PrimeVue has it's own flavor limiting what you can customize.
  • Technically the PrimeVue/config will need to be installed using vue.use. This should be incorporated by the component library and part of the setup process.

Alternatives ​

  • ZagJs: A style and framework agnostic component libary driven by state machine.
    • This library is still in beta at the time of writing. This makes it harder to justify this choice regarding the Front-end approach for whole Xerius.
    • The component we need to replace (calendar) is not present in this library
  • Chakra UI Vue: Modular and accessible component library
    • The component we need to replace (calendar) is not present in this library