Alfa-Bank UI Library
arui-feather — это библиотека React компонентов для создания веб-интерфейсов.
Вы можете посмотреть примеры использования на нашем сайте с документацией.
Ждём тебя в команду
Команда дизайн-системы Альфа-Банка ищет разработчика интерфейсов: https://hr.alfabank.ru/vacancies/ui-dev. Присоединяйся!
Установка
arui-feather доступен как npm-пакет.
npm install arui-feather --save
Поддерживаемые браузеры
Desktop
- Chrome (две последние стабильные версии)
- Edge (две последние стабильные версии)
- Firefox (две последние стабильные версии)
- IE 10+
- Opera (две последние стабильные версии)
- Safari (две последние стабильные версии)
- Yandex (две последние стабильные версии)
Mobile
- Android 4.1+
- iOS (две последние стабильные версии)
Вёрстка
Использование в адаптивной/мобильной среде
Цветовая схема
Разработка
Необходимые внешние зависимости системы:
node 8 и npm
Шаги запуска демо:
npm inpm run demo
Запустить demo на произвольном порту:
PORT=8888 npm run demo
Использовать только для обновления нескольких компонентов. Иначе не хватает памяти.
Автоматические проверки кода
Перед каждым коммитом js код проверяется через eslint, css через stylelint.
Запуск unit-тестов npm run test.
Запуск unit-тестов для определенных компонентов TESTS=amount,calendar npm run test.
Запуск unit-тестов используя Chrome npm run test -- --browser=Chrome
Запуск линтера для css npm run lint-css.
Запуск линтера для js npm run lint-js.
Запуск тестов на мобильных устройствах
Регрессионное тестирование
Для тестирования деградаций в вёрстке используется gemini.
Тесты для каждого компонента хранятся в gemini/<component>.gemini.js.
Запуск тестов производится командой npm run gemini.
Обновление или создание новых эталонных скриншотов: npm run gemini-update.
Для запуска тестов или обновления скриншотов необходимы следующие шаги:
export SAUCE_USERNAME=alfalab.js SAUCE_ACCESS_KEY={ ключ взять у мейнтейнеров }npm run sauce-connectnpm run geminiилиnpm run gemini-update
Запуск gemini на выборочное число тестов (используется опция --grep): npm run gemini -- --grep="button, select".
Во время тестирования рендер каждого сьюта доступен по URL, например: http://localhost:8668/popup/popup_theme_alfa-on-color.popup_size_m.popup_prop-set_1
Минификация svg
Для оптимизация svg используется svgo.
npm install svgo -g
find src -name *.svg -print0, xargs -0 -L 1 svgo
Правила контрибуции
Подробнее о том, как контрибьютить в проект
Публикация
Для выпуска новой версии используйте следущие команды:
- Выпуск патч-версии 1.0.0 -> 1.0.1
npm run release-patch - Выпуск минорной версии 1.0.0 -> 1.1.0
npm run release-minor - Выпуск мажорной версии 1.0.0 -> 2.0.0
npm run release-major
Запуск этих команд автоматически сформирует changelog, сделает новый git tag,
запустит сборку и публикацию.
Deprecation policy
Deprecation публичного API должно происходить плавно, позволяя пользователям библиотеки
обновляться с наименьшими неудобствами. Deprecation происходит со следующим сценарием:
- Обновление документации для уведомления пользователей.
- Выпуск минорного релиза с deprecations.
- Дополнительное оповещение о deprecation в Slack-канал библиотеки.
До полного удаления устаревшей функциональности в мажорном релизе, должна быть выпущена как минимум
одна минорная версия для уведомления пользователей об изменениях.
Лицензия
© 2016-2019 Alfa-Bank. Код лицензирован Mozilla Public License 2.0.