lvshv / core-components Goto Github PK

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

yarn add @alfalab/core-components

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

yarn add @alfalab/core-components-button

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

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

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

• Chrome
• Yandex
• Firefox
• Edge
• IE 11+
• Safari

• Android 5+
• iOS

$ git clone [email protected]:core-ds/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
}

Для версионирования и публикации пакетов используется инструмент Changesets. Если PR затрагивает функциональность одного из пакетов, то он должен включать в себя набор изменений. Набор изменений представляет собой файл формата md, который находится внутри директории .changeset и содержит описание сделанных изменений.

Файл с набором изменений можно сгенерировать двумя способами:

• с помощью CLI команды yarn changeset add. После ввода команды будет предложено выбрать пакет, в котором было произведено изменение, тип релиза (major, minor, patch) и ввести описание изменения.
• с помощью changeset bot. В этом случае на странице с pull request-ом будет отображено сообщение с баннером 'No Changeset' и ниже ссылка для создания набора изменений - Click here if you're a maintainer who wants to add a changeset to this PR. По клику на нее генерируется и открывается на редактирование md-файл. В нем нужно ввести понятное описание сделанных изменений на русском языке, а также добавить или удалить названия пакетов (только в случае если бот неверно их определил).

Описание изменения может состоять из нескольких строк в формате md, при этом нужно учитывать, что форматируется только первая строка (добавляется дефис "-", если его не было), вторая и последующие строки попадут в CHANGELOG так, как вы их запишете.

Для запуска bash скриптов на OS Windows необходимо сперва установить WSL (как это сделать можно почитать тут). Далее в PowerShell или CMD ввести команду bash, после чего уже запускать npm команды, использующие bash скрипты.

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

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

1. Собираем пакет

$ yarn build

2. Переходим в папку с собранным пакетом и обновляем версию

$ cd dist
$ npm version 2.0.0-beta.0 // подставить нужную версию

3. Публикуем пакет

npm publish --tag beta

Также можно воспользоваться экшеном "Beta release". Для этого нужно перейти во вкладку Actions на Github, выбрать workflow "Beta release", указать ветку, из которой будет выпущена бетка, а также версию выпускаемого пакета.

На проекте подключен 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.

• Уважаем тех, кто видит проблему и кидает PR.
• Не знаете что делать – можно брать любую задачу без Assignee, назначив её на себя.
• Знаете что делать и есть возможность – кидайте PR.
• Знаете что делать, но нет времени – добавьте задачу (issue).

• Александр Яценко
• Владимир Гевак
• Евгений Купава
• Валерия Чуричева
• Евгений Сергеев