@cloud-ru/uikit-product-quota 0.6.4

package/src/components/QuotaCard/components/QuotaCardLayout.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { WithSkeleton } from '@snack-uikit/skeleton';
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import styles from '../styles.module.scss';
+import { DataSkeleton } from './DataSkeleton';
+
+type QuotaCardLayoutProps = WithSupportProps<{
+  loading?: boolean;
+  title: string;
+  exceeded?: boolean;
+  children?: ReactNode;
+}>;
+
+export function QuotaCardLayout({ title, exceeded, loading, children, ...rest }: QuotaCardLayoutProps) {
+  return (
+    <div className={styles.quotaCard} data-exceeded={exceeded || undefined} {...extractSupportProps(rest)}>
+      <div className={styles.title}>
+        <TruncateString text={title} maxLines={1} />
+      </div>
+
+      <WithSkeleton loading={loading} skeleton={<DataSkeleton />}>
+        <div className={styles.dataWrapper}>{children}</div>
+      </WithSkeleton>
+    </div>
+  );
+}

package/src/components/QuotaCard/components/index.ts

@@ -0,0 +1,3 @@
+export * from './QuotaCardLayout';
+export * from './NoData';
+export * from './DataRow';

package/src/components/QuotaCard/index.ts

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

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

@@ -0,0 +1,109 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.title {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-s);
+
+  color: styles-theme-variables.$sys-neutral-text-main;
+
+  overflow: hidden;
+
+  width: 100%;
+}
+
+.dataWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.dataRow {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+  width: 100%;
+}
+
+.text {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$light-label-m);
+
+  align-content: center;
+  overflow: hidden;
+}
+
+.created {
+  color: styles-theme-variables.$sys-neutral-text-light;
+}
+
+.available {
+  color: styles-theme-variables.$sys-neutral-text-support;
+  height: 24px;
+}
+
+.exceededState {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  svg {
+    color: styles-theme-variables.$sys-red-accent-default;
+  }
+}
+
+.quotaCard {
+  box-sizing: border-box;
+  display: flex;
+  width: 240px;
+  min-width: 240px;
+  max-width: 240px;
+  height: 100px;
+  min-height: 100px;
+  max-height: 104px;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+
+  border-radius: 4px;
+  overflow: hidden;
+
+  border-style: solid;
+  border-width: 1px;
+  border-color: styles-theme-variables.$sys-neutral-decor-default;
+
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+
+  &[data-exceeded] {
+    .text .exceededState {
+      color: styles-theme-variables.$sys-red-text-support;
+    }
+  }
+}
+
+.noDataWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.noData {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+  text-align: center;
+  color: styles-theme-variables.$sys-neutral-text-support;
+}
+
+.retryButton {
+  svg {
+    transform: rotate(-360deg);
+    transition: transform 0.5s;
+  }
+
+  &:active {
+    svg {
+      transform: rotate(0deg);
+      transition-duration: 0s;
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './QuotaCard';
+export * from './QuotaButtonDropdown';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils';

package/src/types.ts

@@ -0,0 +1 @@
+export type QuotaUnitType = 'instances' | 'value' | 'custom';

package/src/utils.ts

@@ -0,0 +1 @@
+export const checkExceeded = (available: number) => available <= 0;