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/).
Шаги запуска демо:
npm i
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
на выборочное число тестов (используется опция --set
): npm run gemini -- --set=button
.
Во время тестирования рендер каждого сьюта доступен по 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
Подробнее о том, как контрибьютить в проект.
Для оптимизации производительности компонентов используется метод 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, запустит сборку и публикацию.
© 2016-2018 Alfa-Bank. Код лицензирован Mozilla Public License 2.0.