Визуальный редактор дашбордов мониторинга: npm-пакет на React и TypeScript со структурным редактированием, drag-and-drop, undo/redo и проверкой структуры
Заказчик развивает платформу мониторинга ИТ-инфраструктуры (проект под NDA, без названий). Дашборды платформы описываются структурой «страницы, фреймы, виджеты», и администраторы собирали их правкой текстового конфига: медленно и с ошибками.
Нужен был визуальный редактор в виде npm-пакета на React и TypeScript: он встраивается в админку как компонент, принимает дашборд, даёт править структуру мышью и возвращает его без потерь - поля, которые редактор не трогает, байт в байт. Внутри ни одного сетевого запроса, интеграция через пропсы и колбэки.
Что сделано:
- структурная канва со страницами, фреймами и семью видами раскладки, палитра виджетов, вложенные контейнеры;
- перетаскивание с живым предпросмотром, undo/redo, панель свойств и дерево структуры;
- проверка структуры с панелью проблем и переходом к месту ошибки, светлая и тёмная темы, две локали;
- редактирование без потерь закреплено fuzz-тестами на случайных конфигурациях, всего 370+ unit-тестов на Vitest;
- CI/CD на GitHub Actions: проверки как гейты и публикация версии в приватный npm-реестр по тегу. Бандл около 36 КБ JS и 10 КБ CSS в gzip.
Результат: пакет встроен в админку платформы, администраторы собирают страницы и виджеты мышью вместо правки конфига. Все этапы приняты в срок, отзыв заказчика: «Работы выполнены в срок максимально близко к ТЗ». Сотрудничество продолжается.
Стек: React 19, TypeScript (strict), Vitest, Node.js, GitHub Actions, npm.
