Начало

Что это

Зачем фреймворк, из чего состоит и почему раздаётся двумя способами.

PathLogs UI вырос из трекера задач: доска, диаграмма Ганта, командная палитра и десяток примитивов писались под конкретный продукт, а потом выяснилось, что половина из этого нужна в каждом следующем проекте. Фреймворк — это та половина, вынутая из приложения и очищенная от домена.

Зачем

Библиотек компонентов много, и ещё одна кнопка миру не нужна. Здесь ценность в другом — в вещах, которые обычно пишут заново в каждом проекте и каждый раз спотыкаются об одни и те же грабли:

прокрутка протяжкой, которая не ломает клик и уступает нативному drag&drop;
канбан с оптимистичным состоянием, которое не откатывается при быстрых переносах подряд;
выпадающее меню, которое не уносит с собой диалог, открытый из него же;
Markdown от пользователей, в котором невозможен сырой HTML и javascript:-ссылка.

Каждая такая мелочь стоила отладки, и рядом с ней в коде лежит комментарий, объясняющий, что было бы иначе.

Два способа доставки

Фреймворк раздаётся двумя способами, и это не компромисс, а разделение по природе кода.

npm-пакеты

Токены, хуки, примитивы

Их правят редко, а обновлять хочется одной командой. Версионирование здесь помогает.

CLI-реестр

Доска, Гант, фильтры

Тяжёлые виджеты почти всегда требуют правок под конкретный домен. Держать их за стеной версионирования — значит вынуждать обходить её пропсами.

Из чего состоит

terminal

@toimetdev/pathlogs-tokens   CSS-переменные, темы, работа с цветом
@toimetdev/pathlogs-hooks    протяжка, хоткеи, SSE, опрос, тема
@toimetdev/pathlogs-core     диалоги, меню, тултипы, палитра, Markdown
@toimetdev/pathlogs-ui       CLI: копирует виджеты в проект

Пакеты компонентов несут собственный CSS и не требуют Tailwind. Виджеты реестра, наоборот, размечены Tailwind — они попадают в ваш проект, где он уже настроен.

Принципы

Компонент не знает о домене. Что показать — решает renderCard, что сделать — колбэк. Одна и та же доска обслуживает задачи, заявки и кандидатов.
Логика отделена от разметки. Всё, что можно проверить без DOM, живёт в отдельном модуле и покрыто тестами: порядок карточек, критический путь, разбор Markdown, математика инерции.
Цвет не единственный носитель смысла. Рядом со статусом всегда есть текст, у приоритета — шкала, а не только оттенок.
Комментарий объясняет «почему». Если решение неочевидно, рядом написано, что было бы иначе.

Дальше — установка: пакеты, стили и скрипт темы.