Proof of concept themable component library: with Storybook and Atomic Design
Östman, Anna; Åkerfelt, Felicia (2025)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025061021985
https://urn.fi/URN:NBN:fi:amk-2025061021985
Tiivistelmä
This work, commissioned by Crosskey Banking Solutions, aims to explore the Atomic Design methodology with a focus on reusable UI components. The goal is to create a proof-of-concept Angular-based component library featuring components at the atomic and molecular levels, along with a Storybook instance serving as centralized documentation. The component library is intended to function as a shared resource for various customer solutions.
The work is based on two research questions: “How can a shared component library focused on reusability be implemented to accommodate the customization needs of different customers?” and “What are the benefits of using Atomic Design in this type of project?” These questions have been explored through practical implementation and theoretical analysis.
The result is a themable component library with an optional base styling that can be customized using CSS variables. The findings demonstrate that it is entirely possible to create a shared component library to meet different customers' customization needs. A longer study is recommended to evaluate the long-term benefits of Atomic Design. Detta arbete, beställt av Crosskey Banking Solutions, syftar till att utforska metodologin Atomic Design med fokus på återanvändbara UI-komponenter. Målet är att skapa ett proof-of-concept Angular-baserat komponentbibliotek med komponenter på atom- och molekylnivå, samt en Storybook instans som fungerar som centraliserad dokumentation. Komponentbibliotektet avses fungera som en gemensam resurs för olika kundlösningar.
Arbetet utgår ifrån två frågeställningar; “Hur kan ett delat komponentbibliotek med fokus på återanvändbarhet implementeras för att tillgodose olika kunders anpassningsbehov?” och “Vilka fördelar innebär användningen av Atomic Design i denna typ av projekt?” Frågorna har undersökts genom praktisk implementation och teoretisk analys.
Resultatet är ett tema-anpassningsbart komponentbibliotek med en valbar basstyling som kan anpassas genom CSS-variabler. Resultatet visar att det är fullt möjligt att skapa ett delat komponentbibliotek för att tillgodose olika kunders anpassningsbehov. En längre studie rekommenderas för att utvärdera de långsiktiga fördelarna med Atomic Design.
The work is based on two research questions: “How can a shared component library focused on reusability be implemented to accommodate the customization needs of different customers?” and “What are the benefits of using Atomic Design in this type of project?” These questions have been explored through practical implementation and theoretical analysis.
The result is a themable component library with an optional base styling that can be customized using CSS variables. The findings demonstrate that it is entirely possible to create a shared component library to meet different customers' customization needs. A longer study is recommended to evaluate the long-term benefits of Atomic Design.
Arbetet utgår ifrån två frågeställningar; “Hur kan ett delat komponentbibliotek med fokus på återanvändbarhet implementeras för att tillgodose olika kunders anpassningsbehov?” och “Vilka fördelar innebär användningen av Atomic Design i denna typ av projekt?” Frågorna har undersökts genom praktisk implementation och teoretisk analys.
Resultatet är ett tema-anpassningsbart komponentbibliotek med en valbar basstyling som kan anpassas genom CSS-variabler. Resultatet visar att det är fullt möjligt att skapa ett delat komponentbibliotek för att tillgodose olika kunders anpassningsbehov. En längre studie rekommenderas för att utvärdera de långsiktiga fördelarna med Atomic Design.