arui-feather
Alfa Bank UI lightweight library
Как запустить?
Необходимые внешние зависимости системы:
node 5+ и npm (https://nodejs.org/en/).
Шаги запуска демо:
npm inpm 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
Поддерживаемые браузеры
Desktop
- Chrome (две последние стабильные версии)
- Edge (две последние стабильные версии)
- Firefox (две последние стабильные версии)
- IE 10+
- Opera (две последние стабильные версии)
- Safari (две последние стабильные версии)
- Yandex (две последние стабильные версии)
Mobile
- Android 4.1+
- iOS (две последние стабильные версии)
Мобильная вёрстка
Использование в адаптивной/мобильной среде
Лицензия
© 2017 Alfa Laboratory. Код лицензирован Mozilla Public License 2.0.