QuotaWidgetMini

Сворачиваемый блок на базе Accordion: заголовок «Квоты» с counter’ом исчерпанных квот и названием проекта в подзаголовке, внутри — вертикальный список карточек QuotaWidgetCard и кнопка «Увеличить квоты». Портал не используется — контент раскрывается в потоке документа.

Когда использовать

• Сайдбары и узкие панели, где список квот должен раскрываться на месте, без overlay.

• Mobile / adaptive layout’ы — аккордеон не требует позиционирования портала.

• Шапка широкой страницы с раскрытием по клику:

  • используйте QuotaWidget.

• ✅ Используйте defaultExpanded, если квоты — ключевой контент экрана и должны быть видны сразу.

• ❌ Контролировать раскрытие снаружи — аккордеон uncontrolled, публичного controlled-API нет.

Анатомия

Заголовок

Accordion.CollapseBlockSecondary: title «Квоты», после него Counter appearance='critical' с числом исчерпанных квот (скрыт при loading / error), в подзаголовке — projectName с truncate.

Содержимое

• Вертикальный список QuotaWidgetCard; исчерпанные квоты поднимаются в начало (disableSorting отключает).
• loading — skeleton-карточки; error — блок ошибки с кнопкой повтора (onRefresh).
• Кнопка «Увеличить квоты» (canEditQuota, onIncreaseQuotaClick, скрывается hideIncreaseQuotaButton).

Установка

pnpm add @cloud-ru/ds-uikit-product-quota

import { QuotaWidgetMini } from '@cloud-ru/ds-uikit-product-quota'

Примеры использования

Раскрыт по умолчанию

import { QuotaItem, QuotaWidgetMini } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTAS: QuotaItem[] = [
  { name: 'SSD', limit: 1000, usage: 1000, remains: 0, unitDisplayName: 'GB' },
  { name: 'RAM', limit: 256, usage: 230, remains: 26, unitDisplayName: 'GB' },
  { name: 'vCPU', limit: 100, usage: 42, remains: 58, unitDisplayName: 'cores' },
];

export function QuotaWidgetMiniExpanded() {
  const [loading, setLoading] = useState(false);

  const reload = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 800);
  };

  return (
    <QuotaWidgetMini
      quotas={QUOTAS}
      projectName='ml-platform-production'
      canEditQuota={false}
      defaultExpanded
      loading={loading}
      error={false}
      onRefresh={reload}
    />
  );
}

Props

Types

QuotaWidgetMiniProps

QuotaItem

Storybook

Figma

Смотри также

• QuotaWidget — выпадающий вариант для шапки страницы.
• QuotaWidgetCard — карточка одной квоты.
• Accordion — нижележащий примитив раскрытия.