@cloud-ru/ds-uikit-product-quota 1.0.0

package/src/components/QuotaWidgetMini/QuotaWidgetMini.tsx

@@ -0,0 +1,93 @@
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { Button } from '@cloud-ru/ds-button';
+import { Counter } from '@cloud-ru/ds-counter';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+
+import { TEST_IDS } from '../../constants';
+import { QuotaCardsGrid } from '../../helperComponents/QuotaCardsGrid';
+import { quotaLocale } from '../../locale';
+import { QuotaWidgetPropsBase } from '../../types';
+import { checkIsExceeded } from '../../utils';
+import styles from './styles.module.scss';
+
+export type QuotaWidgetMiniProps = WithSupportProps<
+  QuotaWidgetPropsBase & {
+    /** Флаг раскрытия аккордиона по умолчанию */
+    defaultExpanded?: boolean;
+  }
+>;
+
+const ACCORDION_ID = 'quotas-widget-accordion';
+
+export function QuotaWidgetMini({
+  quotas,
+  disableSorting,
+  loading,
+  error,
+  onRefresh,
+  projectName,
+  canEditQuota,
+  defaultExpanded,
+  hideIncreaseQuotaButton,
+  onIncreaseQuotaClick,
+  onWidgetOpen,
+  'data-test-id': dataTestId,
+  ...props
+}: QuotaWidgetMiniProps) {
+  const { t } = quotaLocale.useTranslations();
+
+  const exhaustedCount = quotas.filter(checkIsExceeded).length;
+
+  const handleExpandedChange = (expanded: string | undefined) => {
+    if (expanded) {
+      onWidgetOpen?.();
+    }
+  };
+
+  return (
+    <div data-test-id={dataTestId ?? TEST_IDS.quotaWidgetMini.root}>
+      <Accordion
+        {...props}
+        expandedDefault={defaultExpanded ? ACCORDION_ID : undefined}
+        onExpandedChange={handleExpandedChange}
+      >
+        <Accordion.CollapseBlockSecondary
+          id={ACCORDION_ID}
+          className={styles.collapse}
+          data-test-id={TEST_IDS.quotaWidgetMini.trigger}
+          title={t('quotas')}
+          afterTitle={
+            !error && !loading && exhaustedCount > 0 ? (
+              <Counter value={exhaustedCount} size='xs' appearance='red' />
+            ) : undefined
+          }
+          subTitle={<TruncateString maxLines={1} text={projectName} />}
+        >
+          <div className={styles.body} data-test-id={TEST_IDS.quotaWidgetMini.content}>
+            <QuotaCardsGrid
+              isAccordion
+              quotas={quotas}
+              disableSorting={disableSorting}
+              loading={loading}
+              error={error}
+              onRefresh={onRefresh}
+            />
+
+            {!error && canEditQuota && !hideIncreaseQuotaButton && (
+              <Button
+                className={styles.button}
+                fullWidth
+                view='outline'
+                appearance='neutral'
+                label={t('increaseQuota')}
+                size='m'
+                onClick={onIncreaseQuotaClick}
+              />
+            )}
+          </div>
+        </Accordion.CollapseBlockSecondary>
+      </Accordion>
+    </div>
+  );
+}

package/src/components/QuotaWidgetMini/index.ts

@@ -0,0 +1 @@
+export * from './QuotaWidgetMini';

package/src/components/QuotaWidgetMini/styles.module.scss

@@ -0,0 +1,18 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.collapse {
+  width: 304px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-16;
+  align-items: flex-start;
+
+  width: 100%;
+}
+
+.button {
+  width: 100%;
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './QuotaWidget';
+export * from './QuotaWidgetMini';
+export * from './QuotaWidgetCard';

package/src/constants.ts

@@ -0,0 +1,17 @@
+export const TEST_IDS = {
+  quotaWidget: {
+    root: 'quota-widget',
+    trigger: 'quota-widget__trigger',
+    content: 'quota-widget__content',
+    projectHeader: 'quota-widget__project-header',
+  },
+  quotaWidgetMini: {
+    root: 'quota-widget-mini',
+    trigger: 'quota-widget-mini__trigger',
+    content: 'quota-widget-mini__content',
+  },
+  quotaWidgetCard: {
+    root: 'quota-widget-card',
+    tooltip: 'quota-widget-card__tooltip',
+  },
+} as const;

package/src/helperComponents/QuotaCardsGrid/QuotaCardsGrid.tsx

@@ -0,0 +1,54 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Scroll } from '@cloud-ru/ds-scroll';
+
+import { QuotaWidgetPropsBase } from '../../types';
+import { Grid } from './components/Grid';
+import { QuotaError } from './components/QuotaError';
+import styles from './styles.module.scss';
+
+type QuotaCardsGridProps = Pick<
+  QuotaWidgetPropsBase,
+  'quotas' | 'disableSorting' | 'loading' | 'error' | 'onRefresh'
+> & {
+  isAccordion?: boolean;
+};
+
+export function QuotaCardsGrid({
+  quotas,
+  loading,
+  error,
+  onRefresh,
+  disableSorting = false,
+  isAccordion = false,
+}: QuotaCardsGridProps) {
+  // На мобилке bottom-sheet-виджет full-height: снимаем фикс-cap высоты (`max-height`), карточки
+  // скроллятся телом листа. Для аккордеона (`QuotaWidgetMini`) это НЕ применяем — у него свой cap.
+  const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+
+  const wrapperAttributes = {
+    className: styles.wrapper,
+    'data-accordion': isAccordion,
+    'data-mobile': isMobile && !isAccordion,
+  };
+
+  const gridProps = {
+    quotas,
+    loading,
+    disableSorting,
+    isAccordion,
+  };
+
+  if (error) {
+    return (
+      <div {...wrapperAttributes}>
+        <QuotaError onRefresh={onRefresh} />
+      </div>
+    );
+  }
+
+  return (
+    <Scroll {...wrapperAttributes} size='s'>
+      <Grid {...gridProps} />
+    </Scroll>
+  );
+}

package/src/helperComponents/QuotaCardsGrid/components/Grid/Grid.tsx

@@ -0,0 +1,47 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+
+import { QuotaWidgetCard } from '../../../../components/QuotaWidgetCard';
+import { TEST_IDS } from '../../../../constants';
+import { QuotaItem, QuotaWidgetPropsBase } from '../../../../types';
+import { getPercent } from '../../../../utils/getPercent';
+import { QuotaWidgetCardsSkeleton } from './components/QuotaWidgetCardsSkeleton';
+import styles from './styles.module.scss';
+
+function sortQuotas(quotas: QuotaItem[]): QuotaItem[] {
+  return [...quotas].sort((first, second) => {
+    const percentFirst = getPercent(first);
+    const percentSecond = getPercent(second);
+
+    if (percentSecond !== percentFirst) {
+      return percentSecond - percentFirst;
+    }
+
+    return first.name.localeCompare(second.name);
+  });
+}
+
+type GridProps = Pick<QuotaWidgetPropsBase, 'quotas' | 'loading' | 'disableSorting'> & {
+  isAccordion?: boolean;
+};
+
+export function Grid({ quotas, loading, disableSorting = false, isAccordion = false }: GridProps) {
+  const sortedQuotas = disableSorting ? quotas : sortQuotas(quotas);
+
+  // На мобилке — строго одна колонка на всю ширину (BottomSheet-раскладка узкая, 2 колонки не влезают).
+  const { layoutType } = useAdaptiveLayout();
+  const isSingleColumn = (quotas.length <= 1 && !loading) || isAccordion || isMobileLayout(layoutType);
+
+  return (
+    <div className={styles.grid} data-single={isSingleColumn}>
+      <QuotaWidgetCardsSkeleton loading={loading}>
+        {sortedQuotas.map(quota => (
+          <QuotaWidgetCard
+            key={quota.name}
+            quota={quota}
+            data-test-id={`${TEST_IDS.quotaWidgetCard.root}--${quota.name}`}
+          />
+        ))}
+      </QuotaWidgetCardsSkeleton>
+    </div>
+  );
+}

package/src/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/QuotaCardsSkeleton.tsx

@@ -0,0 +1,24 @@
+import { SkeletonText } from '@cloud-ru/ds-skeleton';
+import { PropsWithChildren } from 'react';
+
+import styles from './styles.module.scss';
+
+type QuotaWidgetCardsSkeletonProps = PropsWithChildren<{
+  loading: boolean;
+}>;
+
+const SKELETON_COUNT = 6;
+
+export function QuotaWidgetCardsSkeleton({ loading, children }: QuotaWidgetCardsSkeletonProps) {
+  if (loading) {
+    return [...Array(SKELETON_COUNT)].map((_, index) => (
+      <div className={styles.card} key={index}>
+        <SkeletonText loading lines={1} variant='body' size='m' />
+        <SkeletonText loading lines={1} variant='body' size='m' />
+        <SkeletonText loading lines={1} variant='body' size='l' />
+      </div>
+    ));
+  }
+
+  return children;
+}

package/src/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/index.ts

@@ -0,0 +1 @@
+export * from './QuotaCardsSkeleton';

package/src/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/styles.module.scss

@@ -0,0 +1,15 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/card.module' as card;
+
+.card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-4;
+
+  min-width: 0;
+  padding: base.$sn-primitive-dimension-8;
+  border-radius: card.$sn-card-anatomy-radius-s-container-borderRadius;
+
+  background-color: base.$sn-theme-color-neutral-decorTransparent;
+}

package/src/helperComponents/QuotaCardsGrid/components/Grid/index.ts

@@ -0,0 +1 @@
+export * from './Grid';

package/src/helperComponents/QuotaCardsGrid/components/Grid/styles.module.scss

@@ -0,0 +1,12 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-4;
+  width: 100%;
+
+  &[data-single='true'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/src/helperComponents/QuotaCardsGrid/components/QuotaError/QuotaError.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@cloud-ru/ds-button';
+import { CrossSVG, UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+
+import { quotaLocale } from '../../../../locale';
+
+type QuotaErrorProps = {
+  onRefresh: () => void;
+};
+
+export function QuotaError({ onRefresh }: QuotaErrorProps) {
+  const { t } = quotaLocale.useTranslations();
+
+  return (
+    <InfoBlock
+      size='m'
+      align='vertical'
+      content={t('errorText')}
+      icon={{ icon: CrossSVG, appearance: 'neutral', background: true }}
+      footer={
+        <Button
+          appearance='neutral'
+          size='m'
+          label={t('errorButton')}
+          icon={<UpdateSVG size={24} />}
+          onClick={onRefresh}
+        />
+      }
+    />
+  );
+}

package/src/helperComponents/QuotaCardsGrid/components/QuotaError/index.ts

@@ -0,0 +1 @@
+export * from './QuotaError';

package/src/helperComponents/QuotaCardsGrid/index.ts

@@ -0,0 +1 @@
+export * from './QuotaCardsGrid';

package/src/helperComponents/QuotaCardsGrid/styles.module.scss

@@ -0,0 +1,16 @@
+.wrapper {
+  width: 100%;
+  height: auto;
+  max-height: 382px;
+
+  &[data-accordion='true'] {
+    max-height: 400px;
+  }
+
+  /* Mobile (full-height BottomSheet): без фикс-cap — карточки заполняют тело листа и скроллятся им. */
+  &[data-mobile='true'] {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './utils';
+export * from './locale';

package/src/locale/index.ts

@@ -0,0 +1,51 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const QUOTA_MESSAGES = defineMessages({
+  'en-GB': {
+    quotas: 'Quotas',
+    widgetTitle: {
+      withoutProject: 'Project quotas',
+      quotes: 'Project quotas «{{project}}»',
+      noQuotes: 'Project quotas {{project}}',
+    },
+    widgetSubtitle: 'Current quota balance',
+    increaseQuota: 'Increase quota',
+    cardAvailable: 'Available',
+    cardRemaining: 'Remaining',
+    tooltipAvailable: 'Available',
+    tooltipUsed: 'Used',
+    tooltipRemaining: 'Remaining',
+    tooltipExhaustedHint: {
+      first: 'Quota exhausted.',
+      second: 'To increase the quota, contact the quota or organization administrator.',
+    },
+    errorText: 'Failed to load data',
+    errorButton: 'Refresh',
+  },
+  'ru-RU': {
+    quotas: 'Квоты',
+    widgetTitle: {
+      withoutProject: 'Квоты проекта',
+      quotes: 'Квоты проекта «{{project}}»',
+      noQuotes: 'Квоты проекта {{project}}',
+    },
+    widgetSubtitle: 'Остаток по квотам на текущий момент',
+    increaseQuota: 'Увеличить квоту',
+    cardAvailable: 'Доступно',
+    cardRemaining: 'Остаток',
+    tooltipAvailable: 'Доступно',
+    tooltipUsed: 'Использовано',
+    tooltipRemaining: 'Остаток',
+    tooltipExhaustedHint: {
+      first: 'Квота исчерпана.',
+      second: 'Чтобы увеличить квоту, обратитесь к администратору квот или организации.',
+    },
+    errorText: 'Не удалось загрузить данные',
+    errorButton: 'Обновить',
+  },
+});
+
+export type QuotaMessages = (typeof QUOTA_MESSAGES)['en-GB'];
+
+/** locale компонента Quota: `quotaLocale.useTranslations()` в коде, `quotaLocale.extend(...)` в сервисе. */
+export const quotaLocale = defineLocale('@cloud-ru/ds-uikit-product-quota', QUOTA_MESSAGES);

package/src/types.ts

@@ -0,0 +1,35 @@
+export type QuotaItem = {
+  /** Название квоты */
+  name: string;
+  /** Лимит квоты */
+  limit: number;
+  /** Потребление квоты */
+  usage: number;
+  /** Остаток квоты */
+  remains: number;
+  /** Единица измерения квоты */
+  unitDisplayName: string;
+};
+
+export type QuotaWidgetPropsBase = {
+  /** Список квот для отображения */
+  quotas: QuotaItem[];
+  /** Флаг отключения сортировки квот */
+  disableSorting?: boolean;
+  /** Флаг загрузки квот */
+  loading: boolean;
+  /** Флаг ошибки при загрузке квот */
+  error: boolean;
+  /** Колбек на обновление списка квот при ошибке */
+  onRefresh: () => void;
+  /** Название проекта, по которому отображаются квоты */
+  projectName: string;
+  /** Флаг наличия прав на редактирование квот */
+  canEditQuota: boolean;
+  /** Флаг скрытия кнопки увеличения квоты */
+  hideIncreaseQuotaButton?: boolean;
+  /** Колбек нажатия на кнопку увеличения квот */
+  onIncreaseQuotaClick?: () => void;
+  /** Колбек открытия виджета квот */
+  onWidgetOpen?: () => void;
+};

package/src/utils/checkIsExceeded.ts

@@ -0,0 +1,3 @@
+import { QuotaItem } from '../types';
+
+export const checkIsExceeded = (quota: QuotaItem) => quota.remains <= 0;

package/src/utils/formatNumber.ts

@@ -0,0 +1,3 @@
+export function formatNumber(value: number) {
+  return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}

package/src/utils/getPercent.ts

@@ -0,0 +1,9 @@
+import { QuotaItem } from '../types';
+
+export function getPercent(quota: QuotaItem): number {
+  if (quota.limit === 0) {
+    return 100;
+  }
+
+  return (quota.usage / quota.limit) * 100;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './checkIsExceeded';
+export * from './formatNumber';
+export * from './getPercent';