Alfa Bank UI lightweight library
arui-feather — это библиотека React компонентов для создания веб-интерфейсов.
Вы можете посмотреть примеры использования на нашем сайте с документацией
Установка
arui-feather доступен как npm-пакет.
npm install arui-feather --save
Поддерживаемые браузеры
Desktop
- Chrome (две последние стабильные версии)
- Edge (две последние стабильные версии)
- Firefox (две последние стабильные версии)
- IE 10+
- Opera (две последние стабильные версии)
- Safari (две последние стабильные версии)
- Yandex (две последние стабильные версии)
Mobile
- Android 4.1+
- iOS (две последние стабильные версии)
Мобильная вёрстка
Использование в адаптивной/мобильной среде
Дизайн 2017 (aka Fantasy)
Work in progress
Демо
Для использования обновлённой дизайн-системы импортируйте компоненты следующим образом:
import Input from 'arui-feather/input/fantasy'
Разработка
Необходимые внешние зависимости системы:
node
5+ и npm
(https://nodejs.org/en/).
Шаги запуска демо:
npm i
npm run demo
Запустить демо fantasy
npm run demo-fantasy
Запустить demo на произвольном порту:
PORT=8888 npm run demo
Использовать только для обновления нескольких компонентов. Иначе не хватает памяти.
Автоматические проверки кода
Перед каждым коммитом js код проверяется через eslint
, css через stylelint
.
Ручной запуск проверки кода линтерами и юнит тестами npm run quality-check
.
Запуск unit-тестов npm run test
.
Запуск unit-тестов для определенных компонентов TESTS=amount,calendar npm run test
.
Запуск unit-тестов используя Chrome npm run test -- --browsers=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-connect
npm run gemini
или npm run gemini-update
Запуск gemini
на выборочное число сьютов (используется опция --grep
c JS RegExp): SUITES='button|select' npm run gemini
.
Во время тестирования рендер каждого сьюта доступен по 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
Документация по компонентам
Документация генерируется на основе кода библиотеки и комментариев в формате jsdoc.
Перед каждым коммитом документация автоматически перегенирируется.
Референс по всем блокам
Ручной запуск перегенерации документации: npm run docs
.
Правила контрибуции
Подробнее о том, как контрибьютить в проект
Оптимизация производительности компонентов
Для оптимизации производительности компонентов используется метод
shouldComponentUpdate,
реализуемый декоратором @performance.
Пример использования:
import performance from '../performance';
@performance(true)
class Component extends React.Component {}
Использование Modernizr
Поскольку modernizr на данный момент не умеет правильно работать внутри webpack
используется скрипт для генерации webpack на основе конфигурации для него.
Настройки modernizr находятся в файле .modernizrrc
. Список доступных опций
Автоматическая перегенерация modernizr.js
не предусмотрена, в случае если вы поменяли его настройки - вам нужно
будет перегенерировать файл.
Для ручного обновления собранного Modernizr
:
npm run modernizr
Публикация
Для выпуска новой версии используйте следущие команды:
- Выпуск патч-версии 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,
запустит сборку и публикацию.
Лицензия
© 2017 Alfa Laboratory. Код лицензирован Mozilla Public License 2.0.