Tochkak-ui NPM

TochkaK-UI library

tochkak-ui - это библиотека React компонентов, используемая в проектах Kinoplan.tech. Примеры доступны на сайте.

Установка

npm install --save-dev tochkak-ui

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

Для импортирования компонентов в проект (например, Arrow):

import Arrow from 'tochkak-ui/lib/Arrow';

Для использования стилей проекта (например, cashbox):

import 'tochkak-ui/lib/styles/cashbox.css'

Структура проекта

build/ - Статическая версия стайлгайда пакета, публикуемая на официальном сайте.
lib/ - Собранный билд пакета, публикуемый в npm.
src/ - Исходники проекта
- сomponents/ - Папки с компонентами.
  - Имя компонента/ - Папка с исходным кодом компонента. Импорт компонента из папки осуществляется через его index.js.
- styles/ - Папки со стилями проектов.
  - Имя проекта/ - Стили каждого проекта находятся в своей директории.
webpack/ - Скрипты и данные, необходимые для сборки пакета.

Разработка

Для разработки компонентов выполните команду

npm run styleguide

После этого react-styleguidist запустится в dev-режиме и будет доступен по адресу http://localhost:6060. В dev-режиме доступны source-map компонентов. Примеры использования доступны на developers.google.com.

Анализ сборки

В случае серьезных изменений полезно посмотреть на результат сборки через удобнейший пакет: webpack-bundle-analyzer.

Для этого выполните сборку пакета, а затем запустите сервер анализатора:

npm run build && npm run analyze

Публикация

Для того чтобы Ваши изменения были опубликованы, сделайте следующее:

Внесите изменения в отдельную ветку и создайте Pull Request в master.
Соберите лайки
Обновите версию пакета согласно NPM Semantic Versioning: npm version [patch | minor | major].
Слейте PR.
Переключитесь на master и выполните git pull.
Опубликуйте пакет: npm publish

Внешние ссылки

design.kinoplan.io - официальный сайт, на котором представлена актуальная библиотека компонентов с примерами использования.