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