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

package/src/components/QuotaWidget/QuotaWidget.tsx

@@ -0,0 +1,109 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Button, ButtonProps } from '@cloud-ru/ds-button';
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { quotaLocale } from '../../locale';
+import { QuotaWidgetPropsBase } from '../../types';
+import { checkIsExceeded } from '../../utils';
+import { QuotaIncreaseButton } from './QuotaIncreaseButton';
+import { QuotaMobileHeader } from './QuotaMobileHeader';
+import { QuotaWidgetContent } from './QuotaWidgetContent';
+
+export type QuotaWidgetProps = WithSupportProps<
+  QuotaWidgetPropsBase & {
+    /** Ссылка на страницу квот по проекту */
+    quotasUrl: string;
+    /** Колбек клика по ссылке на страницу квот по проекту */
+    onQuotasUrlClick?: () => void;
+    /** Свойства кнопки открытия виджета */
+    buttonProps?: Pick<ButtonProps, 'size' | 'className' | 'fullWidth' | 'label' | 'appearance' | 'disabled' | 'view'>;
+  }
+>;
+
+export function QuotaWidget({
+  quotas,
+  disableSorting,
+  loading,
+  error,
+  onRefresh,
+  projectName,
+  quotasUrl,
+  canEditQuota,
+  hideIncreaseQuotaButton,
+  onIncreaseQuotaClick,
+  onWidgetOpen,
+  onQuotasUrlClick,
+  buttonProps,
+  ...props
+}: QuotaWidgetProps) {
+  const { t } = quotaLocale.useTranslations();
+  const [isOpen, setIsOpen] = useState(false);
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+  const rootTestId = props['data-test-id'] as string | undefined;
+  const useMatrixTestIds = Boolean(rootTestId && rootTestId !== TEST_IDS.quotaWidget.root);
+  const contentTestId = useMatrixTestIds && rootTestId ? `content-${rootTestId}` : TEST_IDS.quotaWidget.content;
+  const triggerTestId = useMatrixTestIds && rootTestId ? `trigger-${rootTestId}` : TEST_IDS.quotaWidget.trigger;
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    if (open) {
+      onWidgetOpen?.();
+    }
+  };
+
+  const exhaustedCount = quotas.filter(checkIsExceeded).length;
+
+  // На мобилке лист full-height (snap `1`): шапку и кнопку выносим в pinned-слоты BottomSheet
+  // (`title` сверху, `footer` снизу), а карточки скроллятся в теле листа — как в макете.
+  const showMobileIncreaseButton = isMobile && canEditQuota && !error && !hideIncreaseQuotaButton;
+
+  return (
+    <Dropdown
+      {...props}
+      placement='bottom-end'
+      // Mobile: лист на всю высоту экрана (число `1` = full-height snap; safe-area даёт сам BottomSheet).
+      snapPoints={[1]}
+      title={isMobile ? <QuotaMobileHeader projectName={projectName} /> : undefined}
+      footer={showMobileIncreaseButton ? <QuotaIncreaseButton onClick={onIncreaseQuotaClick} /> : undefined}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      content={
+        <QuotaWidgetContent
+          quotas={quotas}
+          disableSorting={disableSorting}
+          loading={loading}
+          error={error}
+          onRefresh={onRefresh}
+          projectName={projectName}
+          quotasUrl={quotasUrl}
+          canEditQuota={canEditQuota}
+          hideIncreaseQuotaButton={hideIncreaseQuotaButton}
+          onIncreaseQuotaClick={onIncreaseQuotaClick}
+          onQuotasUrlClick={onQuotasUrlClick}
+          hideMobileHeader={isMobile}
+          hideMobileIncreaseButton={isMobile}
+          data-test-id={contentTestId}
+        />
+      }
+    >
+      <Button
+        // На мобилке триггер бордюрный (`outline` — как в макете кнопки квот),
+        // на desktop — плоский `function`. Переопределяется через `buttonProps.view`.
+        view={isMobile ? 'outline' : 'function'}
+        label={t('quotas')}
+        appearance='neutral'
+        iconPosition='after'
+        icon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+        counter={exhaustedCount > 0 ? { value: exhaustedCount, appearance: 'red' } : undefined}
+        size='m'
+        data-test-id={triggerTestId}
+        {...buttonProps}
+      />
+    </Dropdown>
+  );
+}

package/src/components/QuotaWidget/QuotaWidgetContent.tsx

@@ -0,0 +1,91 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+
+import { TEST_IDS } from '../../constants';
+import { QuotaCardsGrid } from '../../helperComponents/QuotaCardsGrid';
+import { QuotaWidgetPropsBase } from '../../types';
+import { ProjectHeader } from './components/ProjectHeader';
+import { QuotaIncreaseButton } from './QuotaIncreaseButton';
+import { QuotaMobileHeader } from './QuotaMobileHeader';
+import styles from './styles.module.scss';
+
+export type QuotaWidgetContentProps = WithSupportProps<
+  QuotaWidgetPropsBase & {
+    /** Ссылка на страницу квот по проекту */
+    quotasUrl: string;
+    /** Колбек клика по ссылке на страницу квот по проекту */
+    onQuotasUrlClick?: () => void;
+    /**
+     * Не рендерить мобильную шапку (её выносят в pinned-`title` контейнера, напр. BottomSheet).
+     * На desktop не влияет.
+     */
+    hideMobileHeader?: boolean;
+    /**
+     * Не рендерить мобильную кнопку расширения (её выносят в pinned-`footer` контейнера).
+     * На desktop не влияет.
+     */
+    hideMobileIncreaseButton?: boolean;
+  }
+>;
+
+/**
+ * Голый контент квота-виджета: шапка проекта + карточки + кнопка расширения — без триггера,
+ * дропдауна и аккордеона. Используется внутри `QuotaWidget` (в дропдауне/BottomSheet) и напрямую,
+ * когда контейнер-раскрытие даёт кто-то снаружи (напр. `sideBlock` формы уже открывает BottomSheet).
+ *
+ * На full-height BottomSheet шапка/кнопка уезжают в pinned-слоты `title`/`footer` (см. `QuotaWidget`),
+ * а сюда остаются только карточки — тогда `hideMobileHeader`/`hideMobileIncreaseButton` = true.
+ */
+export function QuotaWidgetContent({
+  quotas,
+  disableSorting,
+  loading,
+  error,
+  onRefresh,
+  projectName,
+  quotasUrl,
+  canEditQuota,
+  hideIncreaseQuotaButton,
+  onIncreaseQuotaClick,
+  onQuotasUrlClick,
+  hideMobileHeader = false,
+  hideMobileIncreaseButton = false,
+  ...props
+}: QuotaWidgetContentProps) {
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+  const contentTestId = props['data-test-id'] ?? TEST_IDS.quotaWidget.content;
+
+  const showMobileIncreaseButton =
+    isMobile && !hideMobileIncreaseButton && canEditQuota && !error && !hideIncreaseQuotaButton;
+
+  return (
+    <div className={styles.content} data-mobile={isMobile} data-test-id={contentTestId}>
+      {isMobile ? (
+        // Мобильная шапка (макет): «Квоты» + имя проекта, без пиктограммы/ссылки/подзаголовка «Остаток…».
+        !hideMobileHeader && <QuotaMobileHeader projectName={projectName} />
+      ) : (
+        // Desktop-popover: полная шапка проекта (с пиктограммой, ссылкой и кнопкой расширения).
+        <ProjectHeader
+          projectName={projectName}
+          quotasUrl={quotasUrl}
+          canEditQuota={canEditQuota}
+          error={error}
+          onIncreaseQuotaClick={onIncreaseQuotaClick}
+          hideIncreaseQuotaButton={hideIncreaseQuotaButton}
+          onQuotasUrlClick={onQuotasUrlClick}
+        />
+      )}
+
+      <QuotaCardsGrid
+        quotas={quotas}
+        disableSorting={disableSorting}
+        loading={loading}
+        error={error}
+        onRefresh={onRefresh}
+      />
+
+      {showMobileIncreaseButton && <QuotaIncreaseButton onClick={onIncreaseQuotaClick} />}
+    </div>
+  );
+}

package/src/components/QuotaWidget/components/ProjectHeader/ProjectHeader.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@cloud-ru/ds-button';
+import { QuotaSVG } from '@cloud-ru/ds-icons/interface/product';
+import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
+
+import { TEST_IDS } from '../../../../constants';
+import { quotaLocale } from '../../../../locale';
+import { QuotaWidgetPropsBase } from '../../../../types';
+import styles from './styles.module.scss';
+
+type ProjectHeaderProps = Pick<
+  QuotaWidgetPropsBase,
+  'projectName' | 'canEditQuota' | 'error' | 'hideIncreaseQuotaButton' | 'onIncreaseQuotaClick'
+> & {
+  quotasUrl: string;
+  onQuotasUrlClick?: () => void;
+};
+
+const RUSSIAN_CHARS_REGEXP = /[А-Яа-яЁё]/;
+
+export function ProjectHeader({
+  projectName,
+  quotasUrl,
+  canEditQuota,
+  error,
+  onIncreaseQuotaClick,
+  hideIncreaseQuotaButton,
+  onQuotasUrlClick,
+}: ProjectHeaderProps) {
+  const { t } = quotaLocale.useTranslations();
+
+  const widgetTitle = RUSSIAN_CHARS_REGEXP.test(projectName) ? 'widgetTitle.quotes' : 'widgetTitle.noQuotes';
+
+  return (
+    <div className={styles.header} data-test-id={TEST_IDS.quotaWidget.projectHeader}>
+      <div className={styles.projectWrapper}>
+        <TitleClickable
+          className={styles.titleLink}
+          title={t(widgetTitle, { project: projectName })}
+          href={quotasUrl}
+          target='_blank'
+          icon={<QuotaSVG />}
+          onClick={onQuotasUrlClick}
+        />
+
+        <p className={styles.subtitle}>{t('widgetSubtitle')}</p>
+      </div>
+
+      {canEditQuota && !error && !hideIncreaseQuotaButton && (
+        <Button
+          view='outline'
+          appearance='neutral'
+          label={t('increaseQuota')}
+          size='m'
+          onClick={onIncreaseQuotaClick}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/QuotaWidget/components/ProjectHeader/index.ts

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

package/src/components/QuotaWidget/components/ProjectHeader/styles.module.scss

@@ -0,0 +1,29 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.header {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  width: 100%;
+}
+
+.projectWrapper {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+
+  min-width: 0;
+}
+
+.titleLink {
+  gap: base.$sn-primitive-dimension-8;
+}
+
+.subtitle {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 's');
+
+  width: 100%;
+  margin: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}

package/src/components/QuotaWidget/index.ts

@@ -0,0 +1,2 @@
+export * from './QuotaWidget';
+export * from './QuotaWidgetContent';

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

@@ -0,0 +1,52 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-16;
+  align-items: flex-start;
+
+  width: 620px;
+  min-width: 620px;
+  padding: base.$sn-primitive-dimension-12 base.$sn-primitive-dimension-16;
+
+  /* Mobile: dropdown раскрывается в BottomSheet на всю ширину экрана — фиксированные 620px дают
+     горизонтальный overflow, поэтому тянемся по контейнеру. Padding убираем: body-инсет уже даёт
+     контейнер (BottomSheet / ModalCustom), собственный padding был бы двойным. */
+  &[data-mobile='true'] {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+  }
+}
+
+/* Кнопка «Увеличить квоту» внизу BottomSheet на мобилке — на всю ширину. */
+.increaseButton {
+  width: 100%;
+}
+
+/* Мобильная шапка (макет): заголовок + имя проекта, слева, без пиктограмм/ссылок. */
+.mobileHeader {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-2;
+  align-items: flex-start;
+
+  width: 100%;
+}
+
+.mobileTitle {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'title', 'l');
+
+  margin: 0;
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.mobileSubtitle {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 'm');
+
+  width: 100%;
+  margin: 0;
+  color: base.$sn-theme-color-available-version-textSecondary;
+}

package/src/components/QuotaWidgetCard/QuotaWidgetCard.tsx

@@ -0,0 +1,127 @@
+import { Button } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { ProgressBar } from '@cloud-ru/ds-progress-bar';
+import { SkeletonText } from '@cloud-ru/ds-skeleton';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+
+import { quotaLocale } from '../../locale';
+import { QuotaItem } from '../../types';
+import { checkIsExceeded, formatNumber, getPercent } from '../../utils';
+import { QuotaTooltip } from './components/QuotaTooltip';
+import styles from './styles.module.scss';
+
+export type QuotaWidgetCardProps = WithSupportProps<{
+  /** Отображаемая квота */
+  quota: QuotaItem;
+  /** Состояние «не удалось загрузить данные» (Figma: noData=true) */
+  noData?: boolean;
+  /** Состояние загрузки (Figma: loading=true) */
+  loading?: boolean;
+  /** Колбек кнопки «Обновить» в состоянии noData */
+  onRefresh?: () => void;
+}>;
+
+const QUOTA_USAGE_PROGRESS = {
+  HIGH: 90,
+  MEDIUM: 70,
+} as const;
+
+function getProgressAppearance(percent: number) {
+  if (percent >= QUOTA_USAGE_PROGRESS.HIGH) {
+    return 'red';
+  }
+  if (percent >= QUOTA_USAGE_PROGRESS.MEDIUM) {
+    return 'yellow';
+  }
+  return 'green';
+}
+
+export function QuotaWidgetCard({ quota, noData = false, loading = false, onRefresh, ...props }: QuotaWidgetCardProps) {
+  const { t } = quotaLocale.useTranslations();
+
+  if (noData) {
+    return (
+      <div className={styles.card} data-no-data {...props}>
+        <InfoBlock
+          size='s'
+          align='vertical'
+          title={quota.name}
+          content={t('errorText')}
+          footer={
+            onRefresh ? (
+              <Button
+                view='simple'
+                appearance='neutral'
+                size='s'
+                label={t('errorButton')}
+                icon={<UpdateSVG size={16} />}
+                iconPosition='after'
+                onClick={onRefresh}
+              />
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className={styles.card} data-loading {...props}>
+        <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>
+    );
+  }
+
+  const percent = getPercent(quota);
+
+  const rows = [
+    {
+      label: t('cardAvailable'),
+      value: quota.limit,
+    },
+    {
+      label: t('cardRemaining'),
+      value: quota.remains,
+    },
+  ];
+
+  return (
+    <Tooltip triggerClassName={styles.tooltip} hoverDelayOpen={500} tip={<QuotaTooltip quota={quota} />}>
+      <div className={styles.card} data-exhausted={checkIsExceeded(quota)} {...props}>
+        <div className={styles.header}>
+          <Typography variant='body' size='m' className={styles.title}>
+            <TruncateString maxLines={2} text={quota.name} />
+          </Typography>
+
+          <span className={styles.percent}>{Math.round(percent)}%</span>
+        </div>
+
+        <ProgressBar
+          className={styles.progressBar}
+          progress={percent}
+          size='xs'
+          appearance={getProgressAppearance(percent)}
+        />
+
+        <div className={styles.info}>
+          {rows.map(row => (
+            <div className={styles.row} key={row.label}>
+              <span className={styles.label}>{row.label}</span>
+
+              <span className={styles.value}>
+                {formatNumber(row.value)} <span className={styles.unit}>{quota.unitDisplayName}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Tooltip>
+  );
+}

package/src/components/QuotaWidgetCard/components/QuotaTooltip/QuotaTooltip.tsx

@@ -0,0 +1,48 @@
+import { APPEARANCE, Divider } from '@cloud-ru/ds-divider';
+import { Typography } from '@cloud-ru/ds-typography';
+
+import { TEST_IDS } from '../../../../constants';
+import { quotaLocale } from '../../../../locale';
+import { QuotaItem } from '../../../../types';
+import { checkIsExceeded, formatNumber } from '../../../../utils';
+import styles from './styles.module.scss';
+
+type QuotaTooltipProps = {
+  quota: QuotaItem;
+};
+
+export function QuotaTooltip({ quota }: QuotaTooltipProps) {
+  const { t } = quotaLocale.useTranslations();
+
+  const rows = [
+    { label: t('tooltipAvailable'), value: quota.limit },
+    { label: t('tooltipUsed'), value: quota.usage },
+    { label: t('tooltipRemaining'), value: quota.remains },
+  ];
+
+  const exhaustedHint = `${t('tooltipExhaustedHint.first')} ${t('tooltipExhaustedHint.second')}`;
+
+  return (
+    <div className={styles.content} data-test-id={TEST_IDS.quotaWidgetCard.tooltip}>
+      <div className={styles.lists}>
+        {rows.map(row => (
+          <div className={styles.row} key={row.label}>
+            <span className={styles.rowLabel}>{row.label}</span>
+            <span className={styles.rowValue}>
+              {formatNumber(row.value)} {quota.unitDisplayName}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {checkIsExceeded(quota) && (
+        <>
+          <Divider appearance={APPEARANCE.InvertNeutral} />
+          <Typography variant='body' size='m'>
+            {exhaustedHint}
+          </Typography>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/QuotaWidgetCard/components/QuotaTooltip/index.ts

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

package/src/components/QuotaWidgetCard/components/QuotaTooltip/styles.module.scss

@@ -0,0 +1,30 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.content {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-4;
+  align-items: stretch;
+}
+
+.lists {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-4;
+}
+
+.row {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rowLabel,
+.rowValue {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 'm');
+}
+
+.rowValue {
+  text-align: right;
+}

package/src/components/QuotaWidgetCard/index.ts

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

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

@@ -0,0 +1,97 @@
+@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;
+
+/* Обёртка триггера тултипа — грид-элемент вместо самой карточки, поэтому она обязана
+   отдавать карточке всю ширину трека, а не сжиматься по контенту. */
+.tooltip {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* figma-selected-block: quotaCard root (node 2921:16397) */
+.card {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-4;
+
+  box-sizing: border-box;
+
+  /* Ширину карточки задаёт трек грида: desktop 2 колонки, mobile 1 колонка — на всю ширину.
+     Своей ширины у карточки нет, только нижняя граница (в Figma-мастере карточка 288px).
+     `min()` снимает эту границу, когда контейнер уже неё, — узкий лист не переполняется. */
+  min-width: min(256px, 100%);
+  max-width: 100%;
+  padding: base.$sn-primitive-dimension-8;
+  border-radius: card.$sn-card-anatomy-radius-s-container-borderRadius;
+
+  background-color: base.$sn-theme-color-neutral-decorTransparent;
+  backdrop-filter: blur(calc(base.$sn-acrylic-blurBackground1Level / 2));
+
+  &[data-exhausted='true'] {
+    background-color: base.simple-var(base.$sn-theme, 'color', 'red', 'background');
+  }
+}
+
+/* figma-selected-block: title row */
+.header {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.title {
+  flex: 1 1 0;
+  min-width: 0;
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.percent {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 'm');
+
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.progressBar {
+  width: 100%;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-2;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.label {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 's');
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.value {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 'l');
+
+  color: base.$sn-theme-color-available-version-textMain;
+  white-space: nowrap;
+}
+
+.unit {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 'l');
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+}