UI Kit дизайн-системы Consta для «Газпром нефти»
Библиотека интерфейсных компонентов на React, на которой «Газпром нефть» собирает внутренние корпоративные приложения: контролы, сложные блоки, графики, темы и хуки. Дизайн-система открыта под лицензией MIT.
Задача
Компании нужно было упростить и удешевить разработку интерфейсов, привести цифровые продукты к единому виду и унифицировать фронтенд. Требовалась библиотека компонентов, которая совпадает с макетами в Figma и подходит для любых внутренних приложений: от мониторинга оборудования до интранет-порталов и личных кабинетов.
Что сделали
- Компоненты UI Kit: от простых контролов вроде кнопок, чекбоксов и выбора цвета до сложных блоков с автокомплитом, вложениями и карточками
- Consta Charts: 14 типов графиков на базе G2Plot с тематизацией Consta, от линейных и столбчатых до радаров, спидометров и водопада
- Светлая и тёмная темы, компоненты подстраиваются под тему приложения
- Хуки и миксины для типовой логики интерфейса
- Документация с интерактивным стендом: живой пример каждого компонента, настройка свойств, код импорта, ссылки на Figma, GitHub и Codesandbox
- Статусы компонентов stable, canary и deprecated: новая версия выходит рядом со старой, и продукты переходят на неё без поломок
Результат
- На компонентах собираются внутренние корпоративные приложения «Газпром нефти»
- Дизайн-система открыта под MIT, библиотеку бесплатно используют и за пределами компании
