arui-feather

Alfa Bank UI lightweight library

Как запустить?

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

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.

Обновление или создание новых эталонных скриншотов: 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

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

Desktop

• Chrome (две последние стабильные версии)
• Edge (две последние стабильные версии)
• Firefox (две последние стабильные версии)
• IE 10+
• Opera (две последние стабильные версии)
• Safari (две последние стабильные версии)
• Yandex (две последние стабильные версии)

Mobile

• Android 4.1+
• iOS (две последние стабильные версии)

Мобильная вёрстка

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

Лицензия

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

Changelog

4.1.0 (2017-04-20)

Bug Fixes

• form-field: radio/checkbox group in form-field case (#4) (01ec77c)
• input: fix input min-width with width='available' prop (#8) (60bc94b)
• input-autocomplete: default size (5a38aed)

Features

• scroll-to: set default duration to 0 (#6) (7631de3)

<a name="4.0.1"></a>