Alfa-Bank UI lightweight library

npm license travis appveyor
coveralls


arui-feather — это библиотека React компонентов для создания веб-интерфейсов.

Вы можете посмотреть примеры использования на нашем сайте с документацией.

Ждём тебя в команду

Команда дизайн-системы Альфа-Банка ищет разработчика интерфейсов: https://hr.alfabank.ru/vacancies/ui-dev. Присоединяйся!

Установка

arui-feather доступен как npm-пакет.

npm install arui-feather --save

Поддерживаемые браузеры

Desktop

Mobile

Вёрстка

Использование в адаптивной/мобильной среде.

Разработка

Необходимые внешние зависимости системы:

node 8 и npm

Шаги запуска демо:

  1. npm i
  2. npm 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.

Для запуска тестов или обновления скриншотов необходимы следующие шаги:

Запуск 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

Правила контрибуции

Подробнее о том, как контрибьютить в проект.

Оптимизация производительности компонентов

Для оптимизации производительности компонентов используется метод 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

Публикация

Для выпуска новой версии используйте следущие команды:

Запуск этих команд автоматически сформирует changelog, сделает новый git tag, запустит сборку и публикацию.

Deprecation policy

Deprecation публичного API должно происходить плавно, позволяя пользователям библиотеки обновляться с наименьшими неудобствами. Deprecation происходит со следующим сценарием:

  1. Обновление документации для уведомления пользователей.
  2. Выпуск минорного релиза с deprecations.
  3. Дополнительное оповещение о deprecation в Slack-канал библиотеки.

До полного удаления устаревшей функциональности в мажорном релизе, должна быть выпущена как минимум одна минорная версия для уведомления пользователей об изменениях.

Лицензия

© 2016-2019 Alfa-Bank. Код лицензирован Mozilla Public License 2.0.