Giter Site home page Giter Site logo

wkich / core-components Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alfa-laboratory/core-components

0.0 1.0 0.0 125.58 MB

Alfa-Bank UI library

Home Page: https://digital.alfabank.ru

JavaScript 4.37% CSS 28.93% TypeScript 66.24% Shell 0.36% HTML 0.06% Handlebars 0.04%

core-components's Introduction

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

Commitizen friendly

Cторибук с документацией и песочницей.

Установка

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

yarn add @alfalab/core-components

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

yarn add @alfalab/core-components-button

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

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

Темизация

  1. Создайте у себя на проекте css файл с темой, например, theme.css:

    :root {
        --border-radius: 12px;
    }
    
  2. Подключите файл с темой:

  • Если вы используете нативные css-переменные, то просто подключите файл к проекту.

  • Если вы используете arui-scripts, то добавьте в package.json:

    "aruiScripts": {
        "componentsTheme": "./node_modules/@alfalab/core-components-themes/click.css"
    }
    
  • В другом случае - используйте postcss-custom-properties, указав в importFrom путь к файлу с темой.

Подробнее о темизации

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

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

Desktop

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

Mobile

  • Android 5+
  • iOS

Разработка

$ git clone [email protected]: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/dist/cssm';
// или
import { Button } from '@alfalab/core-components/button/cssm';

Импорт ES2020:

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

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

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

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

PRs Welcome

Мейнтейнеры

core-components's People

Contributors

aleksey-ilin avatar artess999 avatar aso1datov avatar dmitrsavk avatar etroynov avatar fenkoalex avatar goncharovroman avatar ibelyaev avatar lisovskyr avatar luchanso avatar natalyaz avatar praiz avatar raylyanway avatar reme3d2y avatar semantic-release-bot avatar siebensieben avatar sitesfaction avatar xchaikax avatar

Watchers

 avatar

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.