Quota

Пакет @cloud-ru/ds-uikit-product-quota предоставляет три компонента для отображения квот проекта. Все три используют общую модель данных QuotaItem (name, limit, usage, remains, unitDisplayName) и общие состояния загрузки и ошибки.

  • QuotaWidget — кнопка-триггер с выпадающим списком карточек квот, для шапки продуктовых страниц.
  • QuotaWidgetMini — компактный аккордеон со списком квот, для сайдбаров и узких layout’ов.
  • QuotaWidgetCard — карточка одной квоты с прогресс-баром, tooltip-расшифровкой и состояниями loading / noData.

Карточки внутри QuotaWidget и QuotaWidgetMini — те же QuotaWidgetCard; исчерпанные квоты (remains <= 0) поднимаются в начало списка и подсчитываются в counter триггера.

Отдельно доступен QuotaWidgetContent — содержимое QuotaWidget без кнопки-триггера и выпадающего списка, для случаев, когда раскрытие даёт контейнер снаружи.

Установка

pnpm add @cloud-ru/ds-uikit-product-quota
import { QuotaWidget, QuotaWidgetMini, QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota'

Figma

Все три компонента живут на одной странице Quota файла Product UI Kit. Ссылки на конкретные узлы — на страницах компонентов.