Установка всех компонентов:
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]:alfa-laboratory/core-components.git
$ cd core-components
$ yarn install
$ yarn start
Сторибук будет доступен по адресу http://localhost:9009/
Компоненты передают в функции обратного вызова два аргумента:
event: SyntheticEvent
- объект события, инициировавшего вызов.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-версию
- Собираем пакет
$ yarn build
- Переходим в папку с собранным пакетом и обновляем версию
$ cd dist
$ npm version 2.0.0-beta.0 // подставить нужную версию
- Публикуем пакет
npm publish --tag beta
На проекте подключен commitlint
для линтинга коммитов. На основании коммитов формируется CHANGELOG.MD
.
Мы придерживаемся AngularJS commit conventions.
Коммиты можно делать с помощью утилиты commitizen
:
$ git add .
$ yarn cm # запустит утилиту commitizen для создания коммита
$ git push
Компоненты поставляются в трех видах:
-
ES5
-
ES5 с css-модулями
-
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).