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 (две последние стабильные версии)

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

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

node 5+ и npm (https://nodejs.org/en/).

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

1. npm i
2. npm run demo

Запустить 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 используется 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 на данный момент не умеет правильно работать внутри 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.