Alfa-Bank UI library
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
__mocks__ test(*): jest tests Aug 13, 2018
__tests__ test(*): jest tests Aug 13, 2018
demo @ 1e75bc5 docs(*): add new description for link and calendar May 7, 2018
gemini-utils feat(*): 🚀 set fantasy design as default 🎉🎉🎉 (#282) Oct 2, 2017
gemini feat(icons): latest icons from alfa-ui-primitives 1.6.6 (#720) Sep 20, 2018
src feat(textarea): add keydown prop (#718) Sep 21, 2018
tools test(*): remove mocha tests Aug 13, 2018
.babelrc test(*): jest tests Aug 13, 2018
.editorconfig feat(*): move to open source Apr 11, 2017
.eslintignore chore(*): fix eslintignore Apr 2, 2018
.eslintrc.js fix(tests): use mocked timezone Aug 13, 2018
.eslintrc.styleguide.js docs(*): fix popup docs (#217) Aug 17, 2017
.gemini.js test(*): update gemini report config Feb 19, 2018
.gitattributes style(.gitattributes): switch off git line endings checking for ttf (#12 Apr 18, 2017
.gitignore docs(*): update demo, move it to submodule (#597) Apr 2, 2018
.gitmodules docs(*): update demo, move it to submodule (#597) Apr 2, 2018
.modernizrrc feat(*): move to open source Apr 11, 2017
.npmignore chore(*): add issue & pull request templates (#10) Apr 21, 2017
.svgo.yml feat(icons): latest optimized icons from alfa-ui-primitives 1.6.5 (#711) Aug 24, 2018
.travis.yml chore(travis.yml): change settings for travis Aug 28, 2018
AUTHORS.md chore(*): update authors (#251) Sep 14, 2017
CHANGELOG.md chore(*): patch version Sep 20, 2018
CONTRIBUTION.md chore(*): updated git commit format link (#337) Nov 3, 2017
DEPRECATION_POLICY.md feat(*): move to open source Apr 11, 2017
ISSUE_TEMPLATE.md chore(*): add issue & pull request templates (#10) Apr 21, 2017
LICENSE.txt feat(*): move to open source Apr 11, 2017
PULL_REQUEST_TEMPLATE.md chore(*): fix typo in pr template Apr 25, 2017
README.md chore(*): removing all references about greenkeeper (#701) Jul 17, 2018
README_MOBILE.md feat(calendar-input): add max-min attribute for native calendar (#429) Dec 27, 2017
appveyor.yml test(*): run tests with UTC timezone Aug 13, 2018
gulpfile.js test(*): remove mocha tests Aug 13, 2018
jest.config.js test(*): jest tests Aug 13, 2018
logo.svg docs(*): add logo to readme Apr 21, 2017
netlify.toml chore(*): daring add netlify config Sep 20, 2018
package-lock.json chore(*): patch version Sep 20, 2018
package.json chore(*): patch version Sep 20, 2018
postcss.config.js docs(*): update styleguide webpack/postcss configs Apr 3, 2018
styleguide.config.js docs(*): update styleguide config Apr 3, 2018
stylelint.config.js feat(*): move to open source Apr 11, 2017
webpack.gemini.config.js chore(*): update webpack gemini config Feb 14, 2018
yarn.lock fix(tests): use mocked timezone Aug 13, 2018

README.md

Alfa-Bank UI lightweight library

npm license travis appveyor
coveralls


arui-feather — это библиотека React компонентов для создания веб-интерфейсов.

Вы можете посмотреть примеры использования на нашем сайте с документацией.

Ждём тебя в команду

Команда дизайн-системы Альфа-Банка ищет разработчика интерфейсов: https://hr.alfabank.ru/vacancies/ui-dev. Присоединяйся!

Установка

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): npm run gemini -- --grep="button|select".

Во время тестирования рендер каждого сьюта доступен по URL, например: http://localhost:8668/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

Правила контрибуции

Подробнее о том, как контрибьютить в проект.

Оптимизация производительности компонентов

Для оптимизации производительности компонентов используется метод 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

Публикация

Для выпуска новой версии используйте следущие команды:

  • Выпуск патч-версии 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.