Code Monkey home page Code Monkey logo

arui-feather's Introduction

Alfa-Bank UI 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 8 и npm

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

  1. npm i
  2. npm run demo

Запустить demo на произвольном порту:

PORT=8888 npm run demo

Использовать только для обновления нескольких компонентов. Иначе не хватает памяти.

Автоматические проверки кода

Перед каждым коммитом js код проверяется через eslint, css через stylelint.

Запуск unit-тестов npm run test.

Запуск unit-тестов для определенных компонентов TESTS=amount,calendar npm run test.

Запуск unit-тестов используя Chrome npm run test -- --browser=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 {}

Публикация

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

  • Выпуск патч-версии 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, запустит сборку и публикацию.

Deprecation policy

Deprecation публичного API должно происходить плавно, позволяя пользователям библиотеки обновляться с наименьшими неудобствами. Deprecation происходит со следующим сценарием:

  1. Обновление документации для уведомления пользователей.
  2. Выпуск минорного релиза с deprecations.
  3. Дополнительное оповещение о deprecation в Slack-канал библиотеки.

До полного удаления устаревшей функциональности в мажорном релизе, должна быть выпущена как минимум одна минорная версия для уведомления пользователей об изменениях.

Лицензия

© 2016-2019 Alfa-Bank. Код лицензирован Mozilla Public License 2.0.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.