alfa-laboratory / core-components

Alfa-Bank UI library
https://digital.alfabank.ru
138 stars 44 forks source link

Библиотека React компонентов для создания веб-интерфейсов

[![Release](https://github.com/alfa-laboratory/core-components/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/alfa-laboratory/core-components/actions/workflows/npm-publish.yml) [![Tests](https://github.com/alfa-laboratory/core-components/actions/workflows/build.yml/badge.svg)](https://github.com/alfa-laboratory/core-components/actions/workflows/build.yml) [![Coverage Status](https://coveralls.io/repos/github/alfa-laboratory/core-components/badge.svg)](https://coveralls.io/github/alfa-laboratory/core-components) [![Demo build](https://github.com/alfa-laboratory/core-components/actions/workflows/main.yml/badge.svg)](https://github.com/alfa-laboratory/core-components/actions/workflows/main.yml) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [Cторибук](https://alfa-laboratory.github.io/core-components/) с документацией и песочницей.

Установка

Установка всех компонентов:

yarn add @alfalab/core-components

Каждый компонент публикуется отдельным пакетом, поэтому вы можете подключить только нужный, не устанавливая библиотеку целиком:

yarn add @alfalab/core-components-button

Использование

import { Button } from '@alfalab/core-components/button';

Темизация

Гайд по настройке темизации

Поддерживаемые браузеры

Мы поддерживаем две последние стабильные версии всех популярных браузеров. Исключение — IE11+ и Android 5+ (Mobile Chrome).

Desktop

Mobile

Разработка

$ git clone git@github.com:alfa-laboratory/core-components.git
$ cd core-components
$ yarn install
$ yarn start

Сторибук будет доступен по адресу http://localhost:9009/

Сигнатуры коллбэков

Компоненты передают в функции обратного вызова два аргумента:

  1. event: SyntheticEvent - объект события, инициировавшего вызов.
  2. payload: {} - объект с дополнительными данными. Например { amount: 5000 }

Импорт компонентов внутри компонентов

Так как у нас монорепозиторий, то все пакеты должны быть независимы. Если при разработке компонента вам потребовался другой компонент, то его нужно добавить как зависимость. Пример можно посмотреть в Тултипе. Также нужно добавить пару опций в tsconfig.json:

{
    "compilerOptions": {
        "paths": {
            "@alfalab/core-components-popover": ["../popover/src"] // для корректоной сборки rollup
        }
    },
    "references": [{ "path": "../popover" }] // для корректной работы IDE
}

Релизы

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

$ yarn pub:patch # соберет и выпустит patch-версию
$ yarn pub:minor # соберет и выпустит minor-версию
$ yarn pub:major # соберет и выпустит major-версию

Как выпустить бета-версию:

  1. Собираем пакет
$ yarn build
  1. Переходим в папку с собранным пакетом и обновляем версию
$ cd dist
$ npm version 2.0.0-beta.0 // подставить нужную версию
  1. Публикуем пакет
npm publish --tag beta

Коммиты

На проекте подключен commitlint для линтинга коммитов. На основании коммитов формируется CHANGELOG.MD. Мы придерживаемся AngularJS commit conventions. Коммиты можно делать с помощью утилиты commitizen:

$ git add .
$ yarn cm # запустит утилиту commitizen для создания коммита
$ git push

Сборка компонентов

Компоненты поставляются в трех видах:

  1. ES5

  2. ES5 с css-модулями

  3. ES2020

Импорт ES5:

import { Button } from '@alfalab/core-components/button';
// или
import { Button } from '@alfalab/core-components-button';

Импорт ES5 с css-модулями:

import { Button } from '@alfalab/core-components/button/cssm';
// или
import { Button } from '@alfalab/core-components-button/dist/cssm';

Импорт ES2020:

import { Button } from '@alfalab/core-components/button/modern';
// или
import { Button } from '@alfalab/core-components-button/dist/modern';

Правила контрибьютинга

Мы открыты к любым предложениям по развитию библиотеки. Отправляйте свои идеи и вопросы через pull requests или issues.

PRs Welcome

Мейнтейнеры