@cloud-ru/uikit-product-quota 0.6.4 → 0.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/QuotaButtonDropdown/QuotaDropdown.d.ts +24 -0
  3. package/dist/cjs/components/QuotaButtonDropdown/QuotaDropdown.js +36 -0
  4. package/dist/cjs/components/QuotaButtonDropdown/components/NoData.d.ts +5 -0
  5. package/dist/cjs/components/QuotaButtonDropdown/components/NoData.js +15 -0
  6. package/dist/cjs/components/QuotaButtonDropdown/components/QuotaDropdownContent.d.ts +2 -0
  7. package/dist/cjs/components/QuotaButtonDropdown/components/QuotaDropdownContent.js +24 -0
  8. package/dist/cjs/components/QuotaButtonDropdown/components/QuotaDropdownLayout.d.ts +2 -0
  9. package/dist/cjs/components/QuotaButtonDropdown/components/QuotaDropdownLayout.js +13 -0
  10. package/dist/cjs/components/QuotaButtonDropdown/components/index.d.ts +1 -0
  11. package/dist/cjs/components/QuotaButtonDropdown/components/index.js +17 -0
  12. package/dist/cjs/components/QuotaButtonDropdown/index.d.ts +2 -0
  13. package/dist/cjs/components/QuotaButtonDropdown/index.js +18 -0
  14. package/dist/cjs/components/QuotaButtonDropdown/styles.module.css +106 -0
  15. package/dist/cjs/components/QuotaCard/QuotaCard.d.ts +22 -0
  16. package/dist/cjs/components/QuotaCard/QuotaCard.js +48 -0
  17. package/dist/cjs/components/QuotaCard/components/DataRow.d.ts +9 -0
  18. package/dist/cjs/components/QuotaCard/components/DataRow.js +13 -0
  19. package/dist/cjs/components/QuotaCard/components/DataSkeleton.d.ts +1 -0
  20. package/dist/cjs/components/QuotaCard/components/DataSkeleton.js +12 -0
  21. package/dist/cjs/components/QuotaCard/components/NoData.d.ts +5 -0
  22. package/dist/cjs/components/QuotaCard/components/NoData.js +15 -0
  23. package/dist/cjs/components/QuotaCard/components/QuotaCardLayout.d.ts +10 -0
  24. package/dist/cjs/components/QuotaCard/components/QuotaCardLayout.js +27 -0
  25. package/dist/cjs/components/QuotaCard/components/index.d.ts +3 -0
  26. package/dist/cjs/components/QuotaCard/components/index.js +19 -0
  27. package/dist/cjs/components/QuotaCard/index.d.ts +1 -0
  28. package/dist/cjs/components/QuotaCard/index.js +17 -0
  29. package/dist/cjs/components/QuotaCard/styles.module.css +106 -0
  30. package/dist/cjs/components/index.d.ts +2 -0
  31. package/dist/cjs/components/index.js +18 -0
  32. package/dist/cjs/index.d.ts +2 -0
  33. package/dist/cjs/index.js +18 -0
  34. package/dist/cjs/types.d.ts +1 -0
  35. package/dist/cjs/types.js +2 -0
  36. package/dist/cjs/utils.d.ts +1 -0
  37. package/dist/cjs/utils.js +5 -0
  38. package/dist/esm/components/QuotaButtonDropdown/QuotaDropdown.d.ts +24 -0
  39. package/dist/esm/components/QuotaButtonDropdown/QuotaDropdown.js +33 -0
  40. package/dist/esm/components/QuotaButtonDropdown/components/NoData.d.ts +5 -0
  41. package/dist/esm/components/QuotaButtonDropdown/components/NoData.js +9 -0
  42. package/dist/esm/components/QuotaButtonDropdown/components/QuotaDropdownContent.d.ts +2 -0
  43. package/dist/esm/components/QuotaButtonDropdown/components/QuotaDropdownContent.js +21 -0
  44. package/dist/esm/components/QuotaButtonDropdown/components/QuotaDropdownLayout.d.ts +2 -0
  45. package/dist/esm/components/QuotaButtonDropdown/components/QuotaDropdownLayout.js +7 -0
  46. package/dist/esm/components/QuotaButtonDropdown/components/index.d.ts +1 -0
  47. package/dist/esm/components/QuotaButtonDropdown/components/index.js +1 -0
  48. package/dist/esm/components/QuotaButtonDropdown/index.d.ts +2 -0
  49. package/dist/esm/components/QuotaButtonDropdown/index.js +2 -0
  50. package/dist/esm/components/QuotaButtonDropdown/styles.module.css +106 -0
  51. package/dist/esm/components/QuotaCard/QuotaCard.d.ts +22 -0
  52. package/dist/esm/components/QuotaCard/QuotaCard.js +42 -0
  53. package/dist/esm/components/QuotaCard/components/DataRow.d.ts +9 -0
  54. package/dist/esm/components/QuotaCard/components/DataRow.js +7 -0
  55. package/dist/esm/components/QuotaCard/components/DataSkeleton.d.ts +1 -0
  56. package/dist/esm/components/QuotaCard/components/DataSkeleton.js +6 -0
  57. package/dist/esm/components/QuotaCard/components/NoData.d.ts +5 -0
  58. package/dist/esm/components/QuotaCard/components/NoData.js +9 -0
  59. package/dist/esm/components/QuotaCard/components/QuotaCardLayout.d.ts +10 -0
  60. package/dist/esm/components/QuotaCard/components/QuotaCardLayout.js +21 -0
  61. package/dist/esm/components/QuotaCard/components/index.d.ts +3 -0
  62. package/dist/esm/components/QuotaCard/components/index.js +3 -0
  63. package/dist/esm/components/QuotaCard/index.d.ts +1 -0
  64. package/dist/esm/components/QuotaCard/index.js +1 -0
  65. package/dist/esm/components/QuotaCard/styles.module.css +106 -0
  66. package/dist/esm/components/index.d.ts +2 -0
  67. package/dist/esm/components/index.js +2 -0
  68. package/dist/esm/index.d.ts +2 -0
  69. package/dist/esm/index.js +2 -0
  70. package/dist/esm/types.d.ts +1 -0
  71. package/dist/esm/types.js +1 -0
  72. package/dist/esm/utils.d.ts +1 -0
  73. package/dist/esm/utils.js +1 -0
  74. package/package.json +6 -5
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./QuotaCard"), exports);
18
+ __exportStar(require("./QuotaButtonDropdown"), exports);
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ export * from './utils';
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./components"), exports);
18
+ __exportStar(require("./utils"), exports);
@@ -0,0 +1 @@
1
+ export type QuotaUnitType = 'instances' | 'value' | 'custom';
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1 @@
1
+ export declare const checkExceeded: (available: number) => boolean;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.checkExceeded = void 0;
4
+ const checkExceeded = (available) => available <= 0;
5
+ exports.checkExceeded = checkExceeded;
@@ -0,0 +1,24 @@
1
+ import { ReactNode } from 'react';
2
+ import { ButtonDropdownProps } from '@sbercloud/uikit-product-button-predefined';
3
+ import { WithSupportProps } from '@sbercloud/uikit-product-utils';
4
+ export type QuotaDropdownProps = WithSupportProps<{
5
+ /** Заголовок */
6
+ title: string;
7
+ /** Описание */
8
+ description?: string;
9
+ /** Quota cards */
10
+ children: ReactNode;
11
+ /** Флаг наличия ошибки при загрузке квот */
12
+ dataError?: boolean;
13
+ /** Колбек кнопки повтора */
14
+ onRetry?(): void;
15
+ /** Расположение выпадающего меню */
16
+ placement?: ButtonDropdownProps['placement'];
17
+ /** Размер кнопки */
18
+ size?: ButtonDropdownProps['size'];
19
+ /** Тип макета */
20
+ layoutType?: ButtonDropdownProps['layoutType'];
21
+ /** CSS класс */
22
+ className?: string;
23
+ }>;
24
+ export declare function QuotaDropdown({ placement, layoutType, className, size, ...props }: QuotaDropdownProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,33 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { Children, isValidElement, useMemo, useState } from 'react';
14
+ import { ButtonDropdown } from '@sbercloud/uikit-product-button-predefined';
15
+ import { useLocale } from '@sbercloud/uikit-product-locale';
16
+ import { checkExceeded } from '../../utils';
17
+ import { QuotaDropdownContent } from './components';
18
+ export function QuotaDropdown(_a) {
19
+ var { placement = 'bottom-end', layoutType = 'desktop', className, size } = _a, props = __rest(_a, ["placement", "layoutType", "className", "size"]);
20
+ const [open, setOpen] = useState(false);
21
+ const { t } = useLocale('Quota');
22
+ const quotaExceededCount = useMemo(() => Children.toArray(props.children).reduce((count, child) => {
23
+ var _a, _b, _c, _d, _e, _f;
24
+ return isValidElement(child) &&
25
+ !((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.loading) &&
26
+ !((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.unlimited) &&
27
+ checkExceeded(((_d = (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.limit) !== null && _d !== void 0 ? _d : 0) - ((_f = (_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.created) !== null && _f !== void 0 ? _f : 0))
28
+ ? count + 1
29
+ : count;
30
+ }, 0), [props.children]);
31
+ const isQuotaExceededCountVisible = !props.dataError && quotaExceededCount > 0;
32
+ return (_jsx(ButtonDropdown, { open: open, placement: placement, onOpenChange: setOpen, label: t('quotas'), className: className, layoutType: layoutType, size: size, counter: isQuotaExceededCountVisible ? { appearance: 'red', value: quotaExceededCount } : undefined, content: _jsx(QuotaDropdownContent, Object.assign({}, props)) }));
33
+ }
@@ -0,0 +1,5 @@
1
+ type NoDataProps = {
2
+ onRetry?(): void;
3
+ };
4
+ export declare function NoData({ onRetry }: NoDataProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { RepeatSVG } from '@sbercloud/uikit-product-icons';
3
+ import { useLocale } from '@sbercloud/uikit-product-locale';
4
+ import { ButtonFunction } from '@snack-uikit/button';
5
+ import styles from '../styles.module.css';
6
+ export function NoData({ onRetry }) {
7
+ const { t } = useLocale('Quota');
8
+ return (_jsxs("div", { className: styles.noDataWrapper, children: [_jsx("span", { className: styles.noData, children: t('noData') }), _jsx(ButtonFunction, { size: 'm', icon: _jsx(RepeatSVG, {}), onClick: onRetry, className: styles.retryButton })] }));
9
+ }
@@ -0,0 +1,2 @@
1
+ import { QuotaDropdownProps } from '../QuotaDropdown';
2
+ export declare function QuotaDropdownContent({ onRetry, dataError, children, ...rest }: Omit<QuotaDropdownProps, 'layoutType'>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { NoData } from './NoData';
14
+ import { QuotaDropdownLayout } from './QuotaDropdownLayout';
15
+ export function QuotaDropdownContent(_a) {
16
+ var { onRetry, dataError, children } = _a, rest = __rest(_a, ["onRetry", "dataError", "children"]);
17
+ if (!dataError) {
18
+ return _jsx(QuotaDropdownLayout, Object.assign({}, rest, { children: children }));
19
+ }
20
+ return _jsx(QuotaDropdownLayout, Object.assign({}, rest, { children: _jsx(NoData, { onRetry: onRetry }) }));
21
+ }
@@ -0,0 +1,2 @@
1
+ import { QuotaDropdownProps } from '../QuotaDropdown';
2
+ export declare function QuotaDropdownLayout({ title, description, children }: Omit<QuotaDropdownProps, 'layoutType'>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Scroll } from '@snack-uikit/scroll';
3
+ import { TruncateString } from '@snack-uikit/truncate-string';
4
+ import styles from '../styles.module.css';
5
+ export function QuotaDropdownLayout({ title, description, children }) {
6
+ return (_jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.titleContainer, children: _jsx("div", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 1 }) }) }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), _jsx(Scroll, { className: styles.scroll, barHideStrategy: 'never', children: _jsx("div", { className: styles.content, children: children }) })] }));
7
+ }
@@ -0,0 +1 @@
1
+ export * from './QuotaDropdownContent';
@@ -0,0 +1 @@
1
+ export * from './QuotaDropdownContent';
@@ -0,0 +1,2 @@
1
+ export * from './QuotaDropdown';
2
+ export * from './components/QuotaDropdownContent';
@@ -0,0 +1,2 @@
1
+ export * from './QuotaDropdown';
2
+ export * from './components/QuotaDropdownContent';
@@ -0,0 +1,106 @@
1
+ .title{
2
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
3
+ font-weight:var(--sans-title-m-font-weight, Semibold);
4
+ line-height:var(--sans-title-m-line-height, 24px);
5
+ font-size:var(--sans-title-m-font-size, 16px);
6
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
7
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
8
+ color:var(--sys-neutral-text-main, #41424e);
9
+ overflow:hidden;
10
+ }
11
+
12
+ .titleContainer{
13
+ display:flex;
14
+ gap:4px;
15
+ align-items:center;
16
+ }
17
+
18
+ .wrapper{
19
+ max-width:768px;
20
+ max-height:446px;
21
+ padding:12px 0 12px 16px;
22
+ flex-direction:column;
23
+ align-items:flex-start;
24
+ display:flex;
25
+ gap:16px;
26
+ }
27
+
28
+ .description{
29
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
30
+ font-weight:var(--sans-body-s-font-weight, Regular);
31
+ line-height:var(--sans-body-s-line-height, 16px);
32
+ font-size:var(--sans-body-s-font-size, 12px);
33
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
34
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
35
+ color:var(--sys-neutral-text-support, #6d707f);
36
+ }
37
+
38
+ .content{
39
+ display:flex;
40
+ flex-wrap:wrap;
41
+ align-items:flex-start;
42
+ justify-content:flex-start;
43
+ gap:8px;
44
+ }
45
+
46
+ .header,
47
+ .scroll{
48
+ max-width:752px;
49
+ }
50
+
51
+ .scroll{
52
+ max-height:396px;
53
+ }
54
+
55
+ .scroll,
56
+ .os-scrollbar-vertical,
57
+ .os-scrollbar-unusable{
58
+ padding-right:16px;
59
+ }
60
+
61
+ @media (max-width: 816px){
62
+ .header,
63
+ .scroll{
64
+ max-width:508px;
65
+ }
66
+ .scroll{
67
+ max-height:300px;
68
+ }
69
+ }
70
+ @media (max-width: 574px){
71
+ .header,
72
+ .scroll{
73
+ max-width:256px;
74
+ }
75
+ .scroll{
76
+ max-height:240px;
77
+ }
78
+ }
79
+ .noDataWrapper{
80
+ display:flex;
81
+ flex-direction:column;
82
+ width:100%;
83
+ justify-content:center;
84
+ gap:24px;
85
+ align-items:center;
86
+ }
87
+
88
+ .noData{
89
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
90
+ font-weight:var(--sans-body-s-font-weight, Regular);
91
+ line-height:var(--sans-body-s-line-height, 16px);
92
+ font-size:var(--sans-body-s-font-size, 12px);
93
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
94
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
95
+ text-align:center;
96
+ color:var(--sys-neutral-text-support, #6d707f);
97
+ }
98
+
99
+ .retryButton svg{
100
+ transform:rotate(-360deg);
101
+ transition:transform 0.5s;
102
+ }
103
+ .retryButton:active svg{
104
+ transform:rotate(0deg);
105
+ transition-duration:0s;
106
+ }
@@ -0,0 +1,22 @@
1
+ import { WithSupportProps } from '@sbercloud/uikit-product-utils';
2
+ import { ButtonTonalProps } from '@snack-uikit/button';
3
+ type QuotaCardCommonProps = WithSupportProps<{
4
+ loading?: boolean;
5
+ title: string;
6
+ created?: number;
7
+ limit?: number;
8
+ unlimited?: boolean;
9
+ increaseLink?: Pick<ButtonTonalProps, 'target' | 'href' | 'onClick'>;
10
+ onRetry?(): void;
11
+ }>;
12
+ export type QuotaCardProps = QuotaCardCommonProps & ({
13
+ type?: 'instances' | 'value';
14
+ customUnit?: never;
15
+ customLabel?: never;
16
+ } | {
17
+ type: 'custom';
18
+ customUnit: string;
19
+ customLabel: string;
20
+ });
21
+ export declare function QuotaCard({ loading, title, limit, created, increaseLink, onRetry, unlimited, type, customUnit, customLabel, ...rest }: QuotaCardProps): import("react/jsx-runtime").JSX.Element;
22
+ export {};
@@ -0,0 +1,42 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { useMemo } from 'react';
14
+ import { CrossFilledSVG } from '@sbercloud/uikit-product-icons';
15
+ import { useLocale } from '@sbercloud/uikit-product-locale';
16
+ import { extractSupportProps } from '@sbercloud/uikit-product-utils';
17
+ import { ButtonTonal } from '@snack-uikit/button';
18
+ import { TruncateString } from '@snack-uikit/truncate-string';
19
+ import { checkExceeded } from '../../utils';
20
+ import { DataRow, NoData, QuotaCardLayout } from './components';
21
+ import styles from './styles.module.css';
22
+ export function QuotaCard(_a) {
23
+ var { loading, title, limit, created, increaseLink, onRetry, unlimited = false, type = 'instances', customUnit, customLabel } = _a, rest = __rest(_a, ["loading", "title", "limit", "created", "increaseLink", "onRetry", "unlimited", "type", "customUnit", "customLabel"]);
24
+ const available = (limit !== null && limit !== void 0 ? limit : 0) - (created !== null && created !== void 0 ? created : 0);
25
+ const exceeded = checkExceeded(available);
26
+ const { t } = useLocale('Quota');
27
+ const noData = limit === undefined || created === undefined;
28
+ const { unit, label } = useMemo(() => {
29
+ switch (type) {
30
+ case 'value':
31
+ return { unit: t('gb'), label: t('filled') };
32
+ case 'custom':
33
+ return { unit: customUnit !== null && customUnit !== void 0 ? customUnit : '', label: customLabel !== null && customLabel !== void 0 ? customLabel : '' };
34
+ default:
35
+ return { unit: t('peace'), label: t('created') };
36
+ }
37
+ }, [t, type, customUnit, customLabel]);
38
+ if (noData) {
39
+ return (_jsx(QuotaCardLayout, Object.assign({ title: title, exceeded: exceeded, loading: loading }, extractSupportProps(rest), { children: _jsx(NoData, { onRetry: onRetry }) })));
40
+ }
41
+ return (_jsxs(QuotaCardLayout, Object.assign({ title: title, exceeded: exceeded, loading: loading }, extractSupportProps(rest), { children: [_jsx(DataRow, { unit: unit, label: label, value: created, className: styles.created }), exceeded && !unlimited ? (_jsx(DataRow, { unit: unit, label: _jsxs("span", { className: styles.exceededState, children: [_jsx(CrossFilledSVG, { size: 16 }), _jsx(TruncateString, { text: t('exceeded'), maxLines: 1 })] }), value: increaseLink ? _jsx(ButtonTonal, Object.assign({ size: 'xs', label: t('increase') }, increaseLink)) : undefined, className: styles.available })) : (_jsx(DataRow, { unit: unit, label: t('available'), value: unlimited ? _jsx("span", { className: styles.text, children: t('unlimited') }) : available, className: styles.available }))] })));
42
+ }
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ type DataRowProps = {
3
+ label: ReactNode;
4
+ value: number | ReactNode;
5
+ className?: string;
6
+ unit: string;
7
+ };
8
+ export declare function DataRow({ value, label, className, unit }: DataRowProps): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import cn from 'classnames';
3
+ import { TruncateString } from '@snack-uikit/truncate-string';
4
+ import styles from '../styles.module.css';
5
+ export function DataRow({ value, label, className, unit }) {
6
+ return (_jsxs("div", { className: cn(styles.dataRow, className), children: [_jsx("span", { className: styles.text, children: typeof label === 'string' ? _jsx(TruncateString, { text: label, maxLines: 1 }) : label }), typeof value === 'number' ? (_jsxs("span", { className: styles.text, children: [value, " ", unit] })) : (value)] }));
7
+ }
@@ -0,0 +1 @@
1
+ export declare function DataSkeleton(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { SkeletonText } from '@snack-uikit/skeleton';
3
+ import styles from '../styles.module.css';
4
+ export function DataSkeleton() {
5
+ return (_jsxs("div", { className: styles.dataWrapper, children: [_jsx(SkeletonText, { lines: 1, className: styles.text }), _jsx(SkeletonText, { lines: 1, className: styles.text })] }));
6
+ }
@@ -0,0 +1,5 @@
1
+ type NoDataProps = {
2
+ onRetry?(): void;
3
+ };
4
+ export declare function NoData({ onRetry }: NoDataProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { RepeatSVG } from '@sbercloud/uikit-product-icons';
3
+ import { useLocale } from '@sbercloud/uikit-product-locale';
4
+ import { ButtonFunction } from '@snack-uikit/button';
5
+ import styles from '../styles.module.css';
6
+ export function NoData({ onRetry }) {
7
+ const { t } = useLocale('Quota');
8
+ return (_jsxs("div", { className: styles.noDataWrapper, children: [_jsx(ButtonFunction, { size: 'xs', icon: _jsx(RepeatSVG, {}), onClick: onRetry, className: styles.retryButton }), _jsx("span", { className: styles.noData, children: t('noData') })] }));
9
+ }
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { WithSupportProps } from '@sbercloud/uikit-product-utils';
3
+ type QuotaCardLayoutProps = WithSupportProps<{
4
+ loading?: boolean;
5
+ title: string;
6
+ exceeded?: boolean;
7
+ children?: ReactNode;
8
+ }>;
9
+ export declare function QuotaCardLayout({ title, exceeded, loading, children, ...rest }: QuotaCardLayoutProps): import("react/jsx-runtime").JSX.Element;
10
+ export {};
@@ -0,0 +1,21 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { extractSupportProps } from '@sbercloud/uikit-product-utils';
14
+ import { WithSkeleton } from '@snack-uikit/skeleton';
15
+ import { TruncateString } from '@snack-uikit/truncate-string';
16
+ import styles from '../styles.module.css';
17
+ import { DataSkeleton } from './DataSkeleton';
18
+ export function QuotaCardLayout(_a) {
19
+ var { title, exceeded, loading, children } = _a, rest = __rest(_a, ["title", "exceeded", "loading", "children"]);
20
+ return (_jsxs("div", Object.assign({ className: styles.quotaCard, "data-exceeded": exceeded || undefined }, extractSupportProps(rest), { children: [_jsx("div", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 1 }) }), _jsx(WithSkeleton, { loading: loading, skeleton: _jsx(DataSkeleton, {}), children: _jsx("div", { className: styles.dataWrapper, children: children }) })] })));
21
+ }
@@ -0,0 +1,3 @@
1
+ export * from './QuotaCardLayout';
2
+ export * from './NoData';
3
+ export * from './DataRow';
@@ -0,0 +1,3 @@
1
+ export * from './QuotaCardLayout';
2
+ export * from './NoData';
3
+ export * from './DataRow';
@@ -0,0 +1 @@
1
+ export * from './QuotaCard';
@@ -0,0 +1 @@
1
+ export * from './QuotaCard';
@@ -0,0 +1,106 @@
1
+ .title{
2
+ font-family:var(--sans-title-s-font-family, SB Sans Interface);
3
+ font-weight:var(--sans-title-s-font-weight, Semibold);
4
+ line-height:var(--sans-title-s-line-height, 20px);
5
+ font-size:var(--sans-title-s-font-size, 14px);
6
+ letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
7
+ paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
8
+ color:var(--sys-neutral-text-main, #41424e);
9
+ overflow:hidden;
10
+ width:100%;
11
+ }
12
+
13
+ .dataWrapper{
14
+ display:flex;
15
+ flex-direction:column;
16
+ gap:8px;
17
+ width:100%;
18
+ }
19
+
20
+ .dataRow{
21
+ display:grid;
22
+ grid-template-columns:1fr auto;
23
+ gap:4px;
24
+ width:100%;
25
+ }
26
+
27
+ .text{
28
+ font-family:var(--light-label-m-font-family, SB Sans Interface);
29
+ font-weight:var(--light-label-m-font-weight, Regular);
30
+ line-height:var(--light-label-m-line-height, 16px);
31
+ font-size:var(--light-label-m-font-size, 12px);
32
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
33
+ paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
34
+ align-content:center;
35
+ overflow:hidden;
36
+ }
37
+
38
+ .created{
39
+ color:var(--sys-neutral-text-light, #8b8e9b);
40
+ }
41
+
42
+ .available{
43
+ color:var(--sys-neutral-text-support, #6d707f);
44
+ height:24px;
45
+ }
46
+
47
+ .exceededState{
48
+ display:flex;
49
+ align-items:center;
50
+ gap:2px;
51
+ }
52
+ .exceededState svg{
53
+ color:var(--sys-red-accent-default, #cb3f3e);
54
+ }
55
+
56
+ .quotaCard{
57
+ box-sizing:border-box;
58
+ display:flex;
59
+ width:240px;
60
+ min-width:240px;
61
+ max-width:240px;
62
+ height:100px;
63
+ min-height:100px;
64
+ max-height:104px;
65
+ padding:12px;
66
+ flex-direction:column;
67
+ align-items:flex-start;
68
+ gap:8px;
69
+ border-radius:4px;
70
+ overflow:hidden;
71
+ border-style:solid;
72
+ border-width:1px;
73
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
74
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
75
+ }
76
+ .quotaCard[data-exceeded] .text .exceededState{
77
+ color:var(--sys-red-text-support, #ae514c);
78
+ }
79
+
80
+ .noDataWrapper{
81
+ display:flex;
82
+ flex-direction:column;
83
+ width:100%;
84
+ justify-content:center;
85
+ align-items:center;
86
+ }
87
+
88
+ .noData{
89
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
90
+ font-weight:var(--sans-body-s-font-weight, Regular);
91
+ line-height:var(--sans-body-s-line-height, 16px);
92
+ font-size:var(--sans-body-s-font-size, 12px);
93
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
94
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
95
+ text-align:center;
96
+ color:var(--sys-neutral-text-support, #6d707f);
97
+ }
98
+
99
+ .retryButton svg{
100
+ transform:rotate(-360deg);
101
+ transition:transform 0.5s;
102
+ }
103
+ .retryButton:active svg{
104
+ transform:rotate(0deg);
105
+ transition-duration:0s;
106
+ }
@@ -0,0 +1,2 @@
1
+ export * from './QuotaCard';
2
+ export * from './QuotaButtonDropdown';
@@ -0,0 +1,2 @@
1
+ export * from './QuotaCard';
2
+ export * from './QuotaButtonDropdown';
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ export * from './utils';
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ export * from './utils';
@@ -0,0 +1 @@
1
+ export type QuotaUnitType = 'instances' | 'value' | 'custom';
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export declare const checkExceeded: (available: number) => boolean;
@@ -0,0 +1 @@
1
+ export const checkExceeded = (available) => available <= 0;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloud-ru/uikit-product-quota",
3
3
  "title": "Quota",
4
- "version": "0.6.4",
4
+ "version": "0.6.5",
5
5
  "sideEffects": [
6
6
  "*.css",
7
7
  "*.woff",
@@ -30,15 +30,16 @@
30
30
  "name": "Akhremenko Grigorii",
31
31
  "url": "https://github.com/AGrigorii"
32
32
  },
33
+ "contributors": [],
33
34
  "license": "Apache-2.0",
34
35
  "publishConfig": {
35
36
  "access": "public"
36
37
  },
37
38
  "scripts": {},
38
39
  "dependencies": {
39
- "@cloud-ru/uikit-product-button-predefined": "0.7.4",
40
- "@cloud-ru/uikit-product-icons": "15.1.1",
41
- "@cloud-ru/uikit-product-utils": "7.0.0",
40
+ "@cloud-ru/uikit-product-button-predefined": "0.7.5",
41
+ "@cloud-ru/uikit-product-icons": "15.1.2",
42
+ "@cloud-ru/uikit-product-utils": "7.0.1",
42
43
  "@snack-uikit/button": "0.19.7",
43
44
  "@snack-uikit/scroll": "0.9.3",
44
45
  "@snack-uikit/skeleton": "0.6.2",
@@ -48,5 +49,5 @@
48
49
  "peerDependencies": {
49
50
  "@cloud-ru/uikit-product-locale": "*"
50
51
  },
51
- "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
52
+ "gitHead": "9c11b1e33e716c874534a1c162266c8591f2ed03"
52
53
  }