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

package/dist/esm/locale/index.js

@@ -0,0 +1,47 @@
+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: 'Обновить',
+    },
+});
+/** locale компонента Quota: `quotaLocale.useTranslations()` в коде, `quotaLocale.extend(...)` в сервисе. */
+export const quotaLocale = defineLocale('@cloud-ru/ds-uikit-product-quota', QUOTA_MESSAGES);

package/dist/esm/style.css

@@ -0,0 +1,260 @@
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  width:100%;
+}
+
+.projectWrapper{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:0;
+}
+
+.titleLink{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.subtitle{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  width:100%;
+  margin:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+@charset "UTF-8";
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:flex-start;
+  width:620px;
+  min-width:620px;
+  padding:var(--sn-primitive-dimension-12, 12px) var(--sn-primitive-dimension-16, 16px);
+}
+.content[data-mobile=true]{
+  width:100%;
+  min-width:0;
+  height:100%;
+  padding:0;
+}
+.increaseButton{
+  width:100%;
+}
+.mobileHeader{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:flex-start;
+  width:100%;
+}
+
+.mobileTitle{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+  margin:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.mobileSubtitle{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  width:100%;
+  margin:0;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:stretch;
+}
+
+.lists{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+}
+
+.row{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+}
+
+.rowLabel,
+.rowValue{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+
+.rowValue{
+  text-align:right;
+}
+@charset "UTF-8";
+.tooltip{
+  display:flex;
+  width:100%;
+  max-width:100%;
+}
+.card{
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
+  min-width:min(256px, 100%);
+  max-width:100%;
+  padding:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-card-anatomy-radius-s-container-borderRadius, var(--sn-brand-anatomy-radius-card-s, var(--sn-primitive-dimension-2, 2px)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.card[data-exhausted=true]{
+  background-color:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-end;
+  justify-content:space-between;
+  width:100%;
+}
+
+.title{
+  flex:1 1 0;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.percent{
+  font-family:var(--sn-thin-label-m-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-m-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-m, var(--sn-brand-font-fontWeight-light-thin-label-m, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-thin-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-thin-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.progressBar{
+  width:100%;
+}
+
+.info{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  width:100%;
+}
+
+.row{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+}
+
+.label{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.value{
+  font-family:var(--sn-thin-label-l-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-l-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-l, var(--sn-brand-font-fontWeight-light-thin-label-l, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-thin-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-thin-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  white-space:nowrap;
+}
+
+.unit{
+  font-family:var(--sn-thin-label-l-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-l-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-l, var(--sn-brand-font-fontWeight-light-thin-label-l, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-thin-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-thin-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.collapse{
+  width:304px;
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:flex-start;
+  width:100%;
+}
+
+.button{
+  width:100%;
+}
+.card{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  min-width:0;
+  padding:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-card-anatomy-radius-s-container-borderRadius, var(--sn-brand-anatomy-radius-card-s, var(--sn-primitive-dimension-2, 2px)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.grid{
+  display:grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
+  width:100%;
+}
+.grid[data-single=true]{
+  grid-template-columns:minmax(0, 1fr);
+}
+@charset "UTF-8";
+.wrapper{
+  width:100%;
+  height:auto;
+  max-height:382px;
+}
+.wrapper[data-accordion=true]{
+  max-height:400px;
+}
+.wrapper{
+}
+.wrapper[data-mobile=true]{
+  flex:1 1 auto;
+  min-height:0;
+  max-height:none;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,34 @@
+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/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/checkIsExceeded.d.ts

@@ -0,0 +1,2 @@
+import { QuotaItem } from '../types.js';
+export declare const checkIsExceeded: (quota: QuotaItem) => boolean;

package/dist/esm/utils/checkIsExceeded.js

@@ -0,0 +1 @@
+export const checkIsExceeded = (quota) => quota.remains <= 0;

package/dist/esm/utils/formatNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatNumber(value: number): string;

package/dist/esm/utils/formatNumber.js

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

package/dist/esm/utils/getPercent.d.ts

@@ -0,0 +1,2 @@
+import { QuotaItem } from '../types.js';
+export declare function getPercent(quota: QuotaItem): number;

package/dist/esm/utils/getPercent.js

@@ -0,0 +1,6 @@
+export function getPercent(quota) {
+    if (quota.limit === 0) {
+        return 100;
+    }
+    return (quota.usage / quota.limit) * 100;
+}

package/dist/esm/utils/index.d.ts

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

package/dist/esm/utils/index.js

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