ui-kit-ce

18

Описание

Библиотека типовых UI компонентов, такие как: поля ввода, кнопки, меню, переключатели - все те элементы, что позволяют пользователям взаимодействовать с web-приложением.

Языки

  • TypeScript87%
  • MDX12,5%
  • JavaScript0,4%
  • Остальные0,1%
2 года назад
2 месяца назад
месяц назад
2 года назад
2 года назад
2 года назад
месяц назад
2 года назад
2 года назад
2 года назад
месяц назад
2 года назад
2 года назад
2 года назад
2 года назад
2 года назад
README.md

@v-uik

lerna

Расширяемое, темизируемое и кастомизируемое решение для ваших проектов.

Запуск витрины storybook

Установка зависимостей:

Перед установкой лучше выполнить

git pull origin $BRANCH
, чтобы получить свежие изменения

Запуск витрины
`yarn run showroom`

При успешной сборке, в браузере, который установлен по умолчанию, автоматически откроется вкладка с содержимым витрины, написанной с использованием

storybook
.

Как использовать @v-uik/theme для компонентов

При разработке компонентов, в их стилях используются токены пакета

@v-uik/theme
, которые определяют форму, шрифт, цвет и тому подобное, проще говоря все то, что может настроить пользователь.

Дизайнеры также используют нашу систему токенов, так что придумывать, какой токен где использовать не придется, достаточно посмотреть макет.

Для определения токенов цвета необходимо использовать наборы

comp
(компонентный слой) и
sys
(системный слой). Важно!!! Наборы цветовых токенов
colourway
и
color
, считаются устаревшими, и будут в скором времени удалены.

Тестирование

Каждый пакет покрывается необходимым, достаточным набором тестов, чтобы считать, что компонент работает правильно, как задумано дизайнерами и разработчиками. Для этого мы используем 2 типа тестов:

  • unit-тесты для проверки свойств и состояний компонентов. Для написания данного типа тестов используется фреймворк jest
  • e2e-тесты для проверки внешнего вида компонентов и сложных сценариев. Для написания данного типа тестов используется фреймворк playwright

Полный гайд по написанию и запуску тестов вы можете посмотреть в документе TESTING.md.