arui-feather
Advanced tools
arui-feather — это библиотека React компонентов для создания веб-интерфейсов.
Вы можете посмотреть примеры использования на нашем сайте с документацией
arui-feather доступен как npm-пакет.
npm install arui-feather --save
Desktop
Mobile
Использование в адаптивной/мобильной среде
Work in progress
Для использования обновлённой дизайн-системы импортируйте компоненты следующим образом:
import Input from 'arui-feather/input/fantasy'
Необходимые внешние зависимости системы:
node 5+ и npm (https://nodejs.org/en/).
Шаги запуска демо:
npm inpm run demoЗапустить демо fantasy
npm run demo:fantasy
Запустить 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.
В схеме тестирования участвует сервис 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 используется 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
Для выпуска новой версии используйте следущие команды:
npm run release-patchnpm run release-minornpm run release-majorЗапуск этих команд автоматически сформирует changelog, сделает новый git tag, запустит сборку и публикацию.
Мы используем BrowserStack для тестирования наших интерфейсов.
© 2017 Alfa Laboratory. Код лицензирован Mozilla Public License 2.0.
FAQs
Alfa-Bank UI lightweight library
The npm package arui-feather receives a total of 253 weekly downloads. As such, arui-feather popularity was classified as not popular.
We found that arui-feather demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 19 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.