New Svelte component library

Technology

The library is built using Tailwind CSS, and Svelte .

Motivation

There were a few motivating factors behind the decision to create this library:

• Consistency — the need for a consistent design across Immich websites was a major factor. Especially as we started to publish micro sites, such as:
  • https://buy.immich.app/
  • https://my.immich.app/
  • https://get.immich.app/
• Decoupling — a lof of code in the Immich web application was tightly coupled to specific usages. Pulling the components into a separate library forced me to assess and design their interfaces in a more general purpose & resuable manner.
• Incremental adoption — with the components being in a separate library, I am able to incrementally migrate code from the main application to the library as components become available and stable. This has made it much more manageable to migrate the codebase over time.
• Standardization — the components in the new library are able to more easily follow and adhere to common patterns and interfaces, like the current Size, Color, and Variant properties.

Future work

There is still a lot of work to do with regard to the library. There are a few key components missing still, like a Calendar/Date Picker component, and a few more form fields. Also, there is a pretty big gap when it comes to tests.