ydb-embedded-ui 4.33.0 → 5.0.0

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,136 +1,78 @@
-import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Link as UIKitLink } from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
 import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
 import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
-import {ClipboardButton} from '../ClipboardButton';
+import { ClipboardButton } from '../ClipboardButton';
 import './EntityStatus.scss';
-
 const icons = {
     BLUE: circleInfoIcon,
     YELLOW: circleExclamationIcon,
     ORANGE: triangleExclamationIcon,
     RED: circleTimesIcon,
 };
-
 const b = cn('entity-status');
-
 class EntityStatus extends React.Component {
-    static propTypes = {
-        status: PropTypes.string,
-        name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        onNameMouseEnter: PropTypes.func,
-        onNameMouseLeave: PropTypes.func,
-        path: PropTypes.string,
-        size: PropTypes.string,
-        label: PropTypes.string,
-        iconPath: PropTypes.string,
-        hasClipboardButton: PropTypes.bool,
-        clipboardButtonAlwaysVisible: PropTypes.bool,
-        showStatus: PropTypes.bool,
-        externalLink: PropTypes.bool,
-        className: PropTypes.string,
-        mode: PropTypes.oneOf(['color', 'icons']),
-        withLeftTrim: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        status: 'gray',
-        text: '',
-        size: 's',
-        label: '',
-        showStatus: true,
-        externalLink: false,
-        mode: 'color',
-        withLeftTrim: false,
-        clipboardButtonAlwaysVisible: false,
-    };
     renderIcon() {
-        const {status, size, showStatus, mode} = this.props;
-
+        const { status, size, showStatus, mode } = this.props;
         if (!showStatus) {
             return null;
         }
-
-        const modifiers = {state: status.toLowerCase(), size};
-
+        const modifiers = { state: status.toLowerCase(), size };
         if (mode === 'icons' && icons[status]) {
-            return <Icon className={b('status-icon', modifiers)} data={icons[status]} />;
+            return _jsx(Icon, { className: b('status-icon', modifiers), data: icons[status] });
         }
-
-        return <div className={b('status-color', modifiers)} />;
+        return _jsx("div", { className: b('status-color', modifiers) });
     }
     renderStatusLink() {
-        const {iconPath} = this.props;
-
-        return (
-            <UIKitLink target="_blank" href={iconPath}>
-                {this.renderIcon()}
-            </UIKitLink>
-        );
+        const { iconPath } = this.props;
+        return (_jsx(UIKitLink, Object.assign({ target: "_blank", href: iconPath }, { children: this.renderIcon() })));
     }
     renderLink() {
-        const {externalLink, name, path, onNameMouseEnter, onNameMouseLeave} = this.props;
-
+        const { externalLink, name, path, onNameMouseEnter, onNameMouseLeave } = this.props;
         if (externalLink) {
-            return (
-                <UIKitLink className={b('name')} href={path}>
-                    {name}
-                </UIKitLink>
-            );
+            return (_jsx(UIKitLink, Object.assign({ className: b('name'), href: path }, { children: name })));
         }
-
-        return path ? (
-            <Link
-                className={b('name')}
-                to={path}
-                onMouseEnter={onNameMouseEnter}
-                onMouseLeave={onNameMouseLeave}
-            >
-                {name}
-            </Link>
-        ) : (
-            name && (
-                <span
-                    className={b('name')}
-                    onMouseEnter={onNameMouseEnter}
-                    onMouseLeave={onNameMouseLeave}
-                >
-                    {name}
-                </span>
-            )
-        );
+        return path ? (_jsx(Link, Object.assign({ className: b('name'), to: path, onMouseEnter: onNameMouseEnter, onMouseLeave: onNameMouseLeave }, { children: name }))) : (name && (_jsx("span", Object.assign({ className: b('name'), onMouseEnter: onNameMouseEnter, onMouseLeave: onNameMouseLeave }, { children: name }))));
     }
     render() {
-        const {name, label, iconPath, hasClipboardButton, className, size, status} = this.props;
-
-        return (
-            <div className={b(null, className)} title={name}>
-                {iconPath ? this.renderStatusLink() : this.renderIcon()}
-                {label && (
-                    <span title={label} className={b('label', {size, state: status.toLowerCase()})}>
-                        {label}
-                    </span>
-                )}
-                <span className={b('link', {'with-left-trim': this.props.withLeftTrim})}>
-                    {this.renderLink()}
-                </span>
-                {hasClipboardButton && (
-                    <ClipboardButton
-                        text={name}
-                        size="s"
-                        className={b('clipboard-button', {
-                            visible: this.props.clipboardButtonAlwaysVisible,
-                        })}
-                    />
-                )}
-            </div>
-        );
+        const { name, label, iconPath, hasClipboardButton, className, size, status } = this.props;
+        return (_jsxs("div", Object.assign({ className: b(null, className), title: name }, { children: [iconPath ? this.renderStatusLink() : this.renderIcon(), label && (_jsx("span", Object.assign({ title: label, className: b('label', { size, state: status.toLowerCase() }) }, { children: label }))), _jsx("span", Object.assign({ className: b('link', { 'with-left-trim': this.props.withLeftTrim }) }, { children: this.renderLink() })), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
+                        visible: this.props.clipboardButtonAlwaysVisible,
+                    }) }))] })));
     }
 }
-
+EntityStatus.propTypes = {
+    status: PropTypes.string,
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onNameMouseEnter: PropTypes.func,
+    onNameMouseLeave: PropTypes.func,
+    path: PropTypes.string,
+    size: PropTypes.string,
+    label: PropTypes.string,
+    iconPath: PropTypes.string,
+    hasClipboardButton: PropTypes.bool,
+    clipboardButtonAlwaysVisible: PropTypes.bool,
+    showStatus: PropTypes.bool,
+    externalLink: PropTypes.bool,
+    className: PropTypes.string,
+    mode: PropTypes.oneOf(['color', 'icons']),
+    withLeftTrim: PropTypes.bool,
+};
+EntityStatus.defaultProps = {
+    status: 'gray',
+    text: '',
+    size: 's',
+    label: '',
+    showStatus: true,
+    externalLink: false,
+    mode: 'color',
+    withLeftTrim: false,
+    clipboardButtonAlwaysVisible: false,
+};
 export default EntityStatus;

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import './ErrorBoundary.scss';
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    useRetry?: boolean;
+    onReportProblem?: (error?: Error) => void;
+}
+export declare const ErrorBoundary: ({ children, useRetry, onReportProblem }: ErrorBoundaryProps) => JSX.Element;
+export {};

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorBoundary as ErrorBoundaryBase } from 'react-error-boundary';
+import cn from 'bem-cn-lite';
+import { Button, Disclosure } from '@gravity-ui/uikit';
+import { registerError } from '../../utils/registerError';
+import { Illustration } from '../Illustration';
+import i18n from './i18n';
+import './ErrorBoundary.scss';
+const b = cn('ydb-error-boundary');
+export const ErrorBoundary = ({ children, useRetry = true, onReportProblem }) => {
+    return (_jsx(ErrorBoundaryBase, Object.assign({ onError: (error, info) => {
+            registerError(error, info.componentStack, 'error-boundary');
+        }, fallbackRender: ({ error, resetErrorBoundary }) => {
+            return (_jsxs("div", Object.assign({ className: b(null) }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+        } }, { children: children })));
+};

package/dist/components/ErrorBoundary/i18n/en.json

@@ -1,7 +1,7 @@
 {
-  "error-title": "Something went wrong",
-  "error-description": "We have something broken, but don't worry, it won't last long",
-  "show-details": "Show details",
-  "report-problem": "Report a problem",
-  "button-reset": "Try again"
+    "error-title": "Something went wrong",
+    "error-description": "We have something broken, but don't worry, it won't last long",
+    "show-details": "Show details",
+    "report-problem": "Report a problem",
+    "button-reset": "Try again"
 }

package/dist/components/ErrorBoundary/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/components/ErrorBoundary/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-error-boundary';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

package/dist/components/ErrorBoundary/i18n/ru.json

@@ -1,7 +1,7 @@
 {
-  "error-title": "Что-то пошло не так",
-  "error-description": "У нас что-то сломалось, но не переживайте, это ненадолго",
-  "show-details": "Показать детали",
-  "report-problem": "Сообщить о проблеме",
-  "button-reset": "Попробовать снова"
+    "error-title": "Что-то пошло не так",
+    "error-description": "У нас что-то сломалось, но не переживайте, это ненадолго",
+    "show-details": "Показать детали",
+    "report-problem": "Сообщить о проблеме",
+    "button-reset": "Попробовать снова"
 }

package/dist/components/Errors/403/AccessDenied.d.ts

@@ -0,0 +1,7 @@
+import { type EmptyStateProps } from '../../EmptyState';
+interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
+    title?: string;
+    description?: string;
+}
+export declare const AccessDenied: ({ title, description, ...restProps }: AccessDeniedProps) => JSX.Element;
+export {};

package/dist/components/Errors/403/AccessDenied.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from '../../EmptyState';
+import { Illustration } from '../../Illustration';
+import i18n from '../i18n';
+export const AccessDenied = (_a) => {
+    var { title, description } = _a, restProps = __rest(_a, ["title", "description"]);
+    return (_jsx(EmptyState, Object.assign({ image: _jsx(Illustration, { name: "403" }), title: title || i18n('403.title'), description: description || i18n('403.description') }, restProps)));
+};

package/dist/components/Errors/403/index.js

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

package/dist/components/Errors/ResponseError/ResponseError.d.ts

@@ -0,0 +1,8 @@
+import type { IResponseError } from '../../../types/api/error';
+interface ResponseErrorProps {
+    error?: IResponseError;
+    className?: string;
+    defaultMessage?: string;
+}
+export declare const ResponseError: ({ error, className, defaultMessage, }: ResponseErrorProps) => JSX.Element;
+export {};

package/dist/components/Errors/ResponseError/ResponseError.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import i18n from '../i18n';
+export const ResponseError = ({ error, className, defaultMessage = i18n('responseError.defaultMessage'), }) => {
+    return _jsx("div", Object.assign({ className: `error ${className}` }, { children: (error === null || error === void 0 ? void 0 : error.statusText) || defaultMessage }));
+};

package/dist/components/Errors/ResponseError/index.js

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

package/dist/components/Errors/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "403.title": "Access denied",
-  "403.description": "You don’t have the necessary roles to view this page.",
-  "responseError.defaultMessage": "Response error"
+    "403.title": "Access denied",
+    "403.description": "You don’t have the necessary roles to view this page.",
+    "responseError.defaultMessage": "Response error"
 }

package/dist/components/Errors/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/components/Errors/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-errors-access-denied';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

package/dist/components/Errors/i18n/ru.json

@@ -1,5 +1,5 @@
 {
-  "403.title": "Доступ запрещен",
-  "403.description": "У вас недостаточно прав для просмотра данной страницы.",
-  "responseError.defaultMessage": "Ошибка запроса"
+    "403.title": "Доступ запрещен",
+    "403.description": "У вас недостаточно прав для просмотра данной страницы.",
+    "responseError.defaultMessage": "Ошибка запроса"
 }

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.d.ts

@@ -0,0 +1,7 @@
+import './ExternalLinkWithIcon.scss';
+interface ExternalLinkWithIconProps {
+    title: string;
+    url: string;
+}
+export declare const ExternalLinkWithIcon: ({ title, url }: ExternalLinkWithIconProps) => JSX.Element;
+export {};

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Link } from '@gravity-ui/uikit';
+import { Icon } from '../Icon/Icon';
+import './ExternalLinkWithIcon.scss';
+const b = block('ydb-external-link-with-icon');
+export const ExternalLinkWithIcon = ({ title, url }) => {
+    return (_jsxs(Link, Object.assign({ href: url, target: "_blank", className: b() }, { children: [title, '\u00a0', _jsx(Icon, { name: "external", viewBox: '0 0 16 16', width: 16, height: 16 })] })));
+};

package/dist/components/FormattedBytes/FormattedBytes.d.ts

@@ -0,0 +1,4 @@
+import { FormatBytesArgs } from '../../utils/bytesParsers';
+declare type FormattedBytesProps = FormatBytesArgs;
+export declare const FormattedBytes: ({ value, withSpeedLabel, ...params }: FormattedBytesProps) => JSX.Element;
+export {};

package/dist/components/FormattedBytes/FormattedBytes.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatBytes } from '../../utils/bytesParsers';
+export const FormattedBytes = (_a) => {
+    var { value, withSpeedLabel } = _a, params = __rest(_a, ["value", "withSpeedLabel"]);
+    const formatted = formatBytes(Object.assign({ value, withSpeedLabel }, params));
+    const bytes = formatBytes({ value, withSpeedLabel, size: 'b' });
+    return _jsx("span", Object.assign({ title: bytes }, { children: formatted }));
+};

package/dist/components/FormattedBytes/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FormatBytesArgs } from '../../utils/bytesParsers';
+export declare const toFormattedSize: (value: number | string | undefined, params?: Omit<FormatBytesArgs, "value"> | undefined) => JSX.Element | null;

package/dist/components/FormattedBytes/utils.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormattedBytes } from './FormattedBytes';
+export const toFormattedSize = (value, params) => {
+    if (!value) {
+        return null;
+    }
+    return _jsx(FormattedBytes, Object.assign({ value: value, significantDigits: 2 }, params));
+};

package/dist/components/FullNodeViewer/FullNodeViewer.d.ts

@@ -0,0 +1,8 @@
+import type { TSystemStateInfo } from '../../types/api/nodes';
+import './FullNodeViewer.scss';
+interface FullNodeViewerProps {
+    node: TSystemStateInfo | undefined;
+    className?: string;
+}
+export declare const FullNodeViewer: ({ node, className }: FullNodeViewerProps) => JSX.Element;
+export {};

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { LOAD_AVERAGE_TIME_INTERVALS } from '../../utils/constants';
+import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
+import InfoViewer from '../InfoViewer/InfoViewer';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
+import { PoolUsage } from '../PoolUsage/PoolUsage';
+import './FullNodeViewer.scss';
+const b = cn('full-node-viewer');
+export const FullNodeViewer = ({ node, className }) => {
+    var _a, _b, _c, _d;
+    const endpointsInfo = (_a = node === null || node === void 0 ? void 0 : node.Endpoints) === null || _a === void 0 ? void 0 : _a.map(({ Name, Address }) => ({
+        label: Name,
+        value: Address,
+    }));
+    const commonInfo = [];
+    // Do not add DB field for static nodes (they have no Tenants)
+    if ((_b = node === null || node === void 0 ? void 0 : node.Tenants) === null || _b === void 0 ? void 0 : _b.length) {
+        commonInfo.push({ label: 'Database', value: node.Tenants[0] });
+    }
+    commonInfo.push({ label: 'Version', value: node === null || node === void 0 ? void 0 : node.Version }, { label: 'Uptime', value: calcUptime(node === null || node === void 0 ? void 0 : node.StartTime) }, { label: 'DC', value: node === null || node === void 0 ? void 0 : node.DataCenterDescription }, { label: 'Rack', value: node === null || node === void 0 ? void 0 : node.Rack });
+    const averageInfo = (_c = node === null || node === void 0 ? void 0 : node.LoadAverage) === null || _c === void 0 ? void 0 : _c.map((load, loadIndex) => ({
+        label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
+        value: (_jsx(ProgressViewer, { value: load, percents: true, colorizeProgress: true, capacity: 100 })),
+    }));
+    return (_jsx("div", Object.assign({ className: `${b()} ${className}` }, { children: node ? (_jsxs("div", Object.assign({ className: b('common-info') }, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: b('section-title') }, { children: "Pools" })), _jsx("div", Object.assign({ className: b('section', { pools: true }) }, { children: (_d = node === null || node === void 0 ? void 0 : node.PoolStats) === null || _d === void 0 ? void 0 : _d.map((pool, poolIndex) => (_jsx(PoolUsage, { data: pool }, poolIndex))) }))] }), endpointsInfo && endpointsInfo.length && (_jsx(InfoViewer, { title: "Endpoints", className: b('section'), info: endpointsInfo })), _jsx(InfoViewer, { title: "Common info", className: b('section'), info: commonInfo }), _jsx(InfoViewer, { title: "Load average", className: b('section', { average: true }), info: averageInfo })] }))) : (_jsx("div", Object.assign({ className: "error" }, { children: "no data" }))) })));
+};

package/dist/components/Fullscreen/Fullscreen.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Fullscreen.scss';
+interface FullscreenProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Fullscreen(props: FullscreenProps): JSX.Element;
+export default Fullscreen;

package/dist/components/Fullscreen/Fullscreen.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import { useDispatch } from 'react-redux';
+import { disableFullscreen } from '../../store/reducers/fullscreen';
+import { Icon } from '../Icon';
+import './Fullscreen.scss';
+const b = cn('kv-fullscreen');
+class FullscreenWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.modalRoot = null;
+        this.el = document.createElement('div');
+    }
+    componentDidMount() {
+        this.modalRoot = document.getElementById('fullscreen-root');
+        if (this.modalRoot) {
+            this.modalRoot.appendChild(this.el);
+        }
+    }
+    componentWillUnmount() {
+        if (this.modalRoot) {
+            this.modalRoot.removeChild(this.el);
+        }
+    }
+    render() {
+        return ReactDOM.createPortal(this.props.children, this.el);
+    }
+}
+function Fullscreen(props) {
+    const dispatch = useDispatch();
+    const escFunction = (event) => {
+        if (event.key === 'Escape') {
+            onDisableFullScreen();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', escFunction, false);
+        return () => {
+            document.removeEventListener('keydown', escFunction, false);
+        };
+    }, []);
+    const onDisableFullScreen = () => {
+        dispatch(disableFullscreen());
+    };
+    return (_jsx(FullscreenWrapper, { children: _jsxs("div", Object.assign({ className: b(null, props.className) }, { children: [_jsx(Button, Object.assign({ onClick: onDisableFullScreen, view: "raised", className: b('close-button') }, { children: _jsx(Icon, { name: "disableFullscreen", viewBox: '0 0 16 16 ', width: 16, height: 16 }) })), props.children] })) }));
+}
+export default Fullscreen;

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface IconProps {
+    name: string;
+    height?: number | string;
+    width?: number | string;
+    viewBox?: string;
+    className?: string;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+}
+export declare const Icon: {
+    ({ name, height, width, viewBox, className, onClick, }: IconProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon as UiKitIcon } from '@gravity-ui/uikit';
+export const Icon = ({ name, height = 16, width = 16, viewBox = '0 0 16 16', className, onClick, }) => {
+    return (_jsx(UiKitIcon
+    // @ts-expect-error
+    // Both url and id strings are required in this uikit component.
+    // However, if no url provided, component uses id, which is what we need.
+    // If it is fixed in uikit it could be safely removed
+    , { 
+        // @ts-expect-error
+        // Both url and id strings are required in this uikit component.
+        // However, if no url provided, component uses id, which is what we need.
+        // If it is fixed in uikit it could be safely removed
+        data: { id: `icon.${name}`, viewBox }, height: height, width: width, className: className, onClick: onClick }));
+};
+Icon.displayName = 'Icon';

package/dist/components/Icon/index.js

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

package/dist/components/Illustration/Illustration.d.ts

@@ -0,0 +1,6 @@
+import { ImgHTMLAttributes } from 'react';
+export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
+    name: string;
+    className?: string;
+}
+export declare const Illustration: ({ name, className, ...props }: IllustrationProps) => JSX.Element;

package/dist/components/Illustration/Illustration.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import cn from 'bem-cn-lite';
+import { useThemeValue } from '@gravity-ui/uikit';
+const store = {
+    light: {
+        403: () => import('../../assets/illustrations/light/403.svg'),
+        thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/light/error.svg'),
+    },
+    dark: {
+        403: () => import('../../assets/illustrations/dark/403.svg'),
+        thumbsUp: () => import('../../assets/illustrations/dark/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/dark/error.svg'),
+    },
+};
+const b = cn('kv-illustration');
+export const Illustration = (_a) => {
+    var { name, className } = _a, props = __rest(_a, ["name", "className"]);
+    const theme = useThemeValue();
+    const [src, setSrc] = useState('');
+    const srcGetter = store[theme] && store[theme][name];
+    useEffect(() => {
+        if (typeof srcGetter === 'function') {
+            srcGetter()
+                .then((svg) => setSrc(svg.default))
+                .catch((e) => {
+                console.error(e);
+                setSrc('');
+            });
+        }
+    }, [srcGetter]);
+    return _jsx("img", Object.assign({ alt: name, src: src, className: b(null, className) }, props));
+};

package/dist/components/Illustration/index.js

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

package/dist/components/InfoViewer/InfoViewer.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './InfoViewer.scss';
+export interface InfoViewerItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface InfoViewerProps {
+    title?: string;
+    info?: InfoViewerItem[];
+    dots?: boolean;
+    size?: 's';
+    className?: string;
+    multilineLabels?: boolean;
+    renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => ReactNode;
+}
+declare const InfoViewer: ({ title, info, dots, size, className, multilineLabels, renderEmptyState, }: InfoViewerProps) => JSX.Element;
+export default InfoViewer;

package/dist/components/InfoViewer/InfoViewer.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import './InfoViewer.scss';
+const b = cn('info-viewer');
+const InfoViewer = ({ title, info, dots = true, size, className, multilineLabels, renderEmptyState, }) => {
+    if ((!info || !info.length) && renderEmptyState) {
+        return _jsx(_Fragment, { children: renderEmptyState({ title, size }) });
+    }
+    return (_jsxs("div", Object.assign({ className: b({ size }, className) }, { children: [title && _jsx("div", Object.assign({ className: b('title') }, { children: title })), info && info.length > 0 ? (_jsx("div", Object.assign({ className: b('items') }, { children: info.map((data, infoIndex) => (_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsxs("div", Object.assign({ className: b('label') }, { children: [_jsx("div", Object.assign({ className: b('label-text', { multiline: multilineLabels }) }, { children: data.label })), dots && _jsx("div", { className: b('dots') })] })), _jsx("div", Object.assign({ className: b('value') }, { children: data.value }))] }), infoIndex))) }))) : (_jsxs(_Fragment, { children: ["No ", title, " data"] }))] })));
+};
+export default InfoViewer;

package/dist/components/InfoViewer/formatters/cdcStream.d.ts

@@ -0,0 +1,5 @@
+import { TCdcStreamDescription } from '../../../types/api/schema';
+export declare const formatCdcStreamItem: <Key extends keyof TCdcStreamDescription>(label: Key, value: TCdcStreamDescription[Key]) => {
+    label: string;
+    value: import("react").ReactNode;
+};