arui-feather

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/).

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

1. npm i
2. npm run demo

Запустить demo на произвольном порту:

PORT=8888 npm run demo

Запустить demo для отдельных компонентов:

COMPONENTS="calendar-input, popup" npm run demo

Запустить demo с автоматичесим обновлением содержимого страницы при изменении компонента:

COMPONENTS="calendar-input, popup" HOT_LOADER=1 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.

В схеме тестирования участвует сервис Sauce Labs, для доступа к нему необходимо указать переменные окружения: SAUCE_USERNAME=alfalab.js SAUCE_ACCESS_KEY={ ключ взять у мейнтейнеров }.

Обновление или создание новых эталонных скриншотов: npm run gemini-update.

Запуск gemini на выборочное число сьютов (используется опция --grep c JS RegExp): SUITES='button|select' npm run gemini.

Во время тестирования рендер каждого сьюта доступен по URL, например: http://localhost:8888/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, запустит сборку и публикацию.

Благодарности

Мы используем BrowserStack для тестирования наших интерфейсов.

Лицензия

© 2017 Alfa Laboratory. Код лицензирован Mozilla Public License 2.0.

Changelog

8.1.5 (2017-07-12)

Bug Fixes

• select.css: unused var (3728019)

<a name="8.1.4"></a>