Creating a React UI component library
Heinonen, Jaro (2025)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025112830630
https://urn.fi/URN:NBN:fi:amk-2025112830630
Tiivistelmä
The aim of this thesis was to develop a user interface component library based on React technology. The work originated from the need to maintain visual consistency and reduce redundancy across multiple front-end applications. The goal was to create a centralized source for user interface elements to improve maintainability and accelerate future development.
The library was implemented using React and TypeScript, with Tailwind CSS applied for scalable styling. Storybook served as the main tool for component isolation and testing, including accessibility verification. Comprehensive technical documentation and user guidelines were compiled in GitLab Wiki, which served as the central repository supporting the library’s implementation and ongoing development.
The outcome was a functional and extensible component library published through a private package registry. The project demonstrated that a unified component library can streamline development and enhance software quality. Käyttöliittymäkomponenttikirjastot ovat keskeinen osa modernia verkkosovelluskehitystä, sillä ne auttavat yhtenäistämään käyttöliittymien ilmettä ja nopeuttamaan kehitystyötä. Tämän opinnäytetyön tavoitteena oli kehittää React-teknologiaan perustuva käyttöliittymäkomponenttikirjasto. Työn lähtökohtana oli organisaation käyttöliittymien visuaalinen epäyhtenäisyys. Tavoitteena oli kehittää React-pohjainen komponenttikirjasto tämän ongelman ratkaisemiseksi. Ratkaisuna oli luoda käyttöliittymäelementeille keskitetty lähde, joka helpottaa ylläpitoa ja nopeuttaa jatkokehitystä.
Kirjasto toteutettiin React- ja TypeScript-teknologioilla, ja tyylien määrittelyssä käytettiin Tailwind CSS -kehystä. Storybook toimi keskeisenä työkaluna komponenttien eristämiseen, testaamiseen ja saavutettavuuden varmistamiseen. Kaikki dokumentaatio ja käyttäjäohjeet koottiin GitLab Wikiin, joka toimi keskitettynä lähteenä kirjaston käyttöönoton ja jatkuvan kehityksen tukena.
Tuloksena syntyi toimiva ja laajennettavissa oleva komponenttikirjasto, joka julkaistiin yksityisen pakettirekisterin kautta. Työ osoitti, että yhtenäinen komponenttikirjasto tehostaa kehitystyötä ja parantaa ohjelmistojen laatua.
The library was implemented using React and TypeScript, with Tailwind CSS applied for scalable styling. Storybook served as the main tool for component isolation and testing, including accessibility verification. Comprehensive technical documentation and user guidelines were compiled in GitLab Wiki, which served as the central repository supporting the library’s implementation and ongoing development.
The outcome was a functional and extensible component library published through a private package registry. The project demonstrated that a unified component library can streamline development and enhance software quality.
Kirjasto toteutettiin React- ja TypeScript-teknologioilla, ja tyylien määrittelyssä käytettiin Tailwind CSS -kehystä. Storybook toimi keskeisenä työkaluna komponenttien eristämiseen, testaamiseen ja saavutettavuuden varmistamiseen. Kaikki dokumentaatio ja käyttäjäohjeet koottiin GitLab Wikiin, joka toimi keskitettynä lähteenä kirjaston käyttöönoton ja jatkuvan kehityksen tukena.
Tuloksena syntyi toimiva ja laajennettavissa oleva komponenttikirjasto, joka julkaistiin yksityisen pakettirekisterin kautta. Työ osoitti, että yhtenäinen komponenttikirjasto tehostaa kehitystyötä ja parantaa ohjelmistojen laatua.