Проєктування та реалізація системи компонентів у Next.js із застосуванням Storybook і Tailwind

Abstract

Робота складається із вступу, трьох розділів, висновків, списку використаних джерел та додатків. Основний зміст роботи викладено на 64 сторінках і містить 11 рисунків. У додатках подано конфігураційні файли, код демонстраційної сторінки, реалізацію компонентів та Storybook-файли. Об’єктом дослідження є процес проєктування та розробки користувацьких інтерфейсів у сучасних вебзастосунках із використанням компонентного підходу. Предметом дослідження є методи, технології та програмні засоби створення UI-kit системи. Метою дослідження є проєктування та реалізація масштабованої системи UI-компонентів для вебзастосунків, яка забезпечує повторне використання інтерфейсних елементів. У першому розділі проведено аналіз сучасних підходів до розробки UI- систем компонентів, розглянуто принципи компонентного підходу та концепцію атомарного дизайну. Також здійснено огляд технологій для побудови інтерфейсних систем і проаналізовано засоби стилізації інтерфейсів. У другому розділі спроєктовано архітектуру системи компонентів, визначено поділ компонентів на базові та складні елементи, обґрунтовано структуру Next.js-проєкту та описано підхід до організації середовища документації в Storybook. У третьому розділі описано програмну реалізацію системи компонентів. Реалізовано базові компоненти Button, Input, Card і Link, а також складні компоненти Navigation, Hero, Modal і ContactForm.