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

Публикация

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

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

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

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