@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/DataTable/DataTable.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import BaseDataTable, {
-    DataTableProps as BaseDataTableProps,
-    Column,
-} from '@gravity-ui/react-data-table';
-import {Skeleton} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import {EmptyContent, EmptyContentVariant} from '../EmptyContent';
-
-import './DataTable.scss';
-
-export type {Column};
-
-const block = cn('qp-data-table');
-
-const SKELETON_ROWS_COUNT = 4;
-
-export type DataTableProps<T> = {
-    loading?: boolean;
-    loaded?: boolean;
-    className?: string;
-    emptyVariant?: EmptyContentVariant;
-} & Omit<BaseDataTableProps<T>, 'theme'>;
-
-function getSkeletonWidth(rowIndex: number, columnIndex: number) {
-    const widths = [72, 120, 180, 96];
-
-    return widths[(rowIndex + columnIndex) % widths.length];
-}
-
-function renderEmptyCell(
-    key: string,
-    rowIndex: number,
-    columnIndex: number,
-    align?: Column<unknown>['align'],
-) {
-    return (
-        <td key={key} className={block('td', {empty: true})}>
-            <div className={block('content', {empty: true, align})}>
-                <Skeleton variant="text" width={getSkeletonWidth(rowIndex, columnIndex)} />
-            </div>
-        </td>
-    );
-}
-
-function renderLoadingSkeleton<T>(columns: Array<Column<T>>, displayIndices: boolean) {
-    return Array.from({length: SKELETON_ROWS_COUNT}, (_, index) => (
-        <tr key={index} className={block('tr', {empty: true})}>
-            {displayIndices && renderEmptyCell('__index', index, 0)}
-            {columns.map((column, columnIndex) =>
-                renderEmptyCell(
-                    column.name,
-                    index,
-                    columnIndex + Number(displayIndices),
-                    column.align,
-                ),
-            )}
-        </tr>
-    ));
-}
-
-export function DataTable<T>(props: DataTableProps<T>) {
-    const {
-        loading,
-        loaded,
-        className,
-        emptyVariant = 'no-data',
-        columns,
-        data,
-        settings,
-        ...rest
-    } = props;
-
-    const isEmpty = loaded && data.length === 0;
-    const displayIndices = settings?.displayIndices !== false;
-
-    const renderEmptyRow = () => {
-        if (loading && !loaded) {
-            return renderLoadingSkeleton(columns, displayIndices);
-        }
-
-        return null;
-    };
-
-    return (
-        <div className={block(null, className)}>
-            <BaseDataTable
-                {...rest}
-                columns={columns}
-                data={data}
-                settings={settings}
-                theme="yandex-cloud"
-                emptyDataMessage=""
-                renderEmptyRow={renderEmptyRow}
-            />
-            {isEmpty && <EmptyContent variant={emptyVariant} className={block('empty')} />}
-        </div>
-    );
-}

package/src/components/DataTable/index.ts

@@ -1 +0,0 @@
-export {DataTable, type DataTableProps, type Column} from './DataTable';

package/src/components/EditableRowTitle/EditableRowTitle.tsx

@@ -1,67 +0,0 @@
-import React, {KeyboardEvent, useEffect, useState} from 'react';
-import {Text, TextInput} from '@gravity-ui/uikit';
-import {QueryListEditingRenderData, QueryListRow} from '../../types/queryList';
-
-export type EditableRowTitleProps<T extends QueryListRow = QueryListRow> = {
-    item: T;
-    editing?: QueryListEditingRenderData<T>;
-};
-
-export const EditableRowTitle = <T extends QueryListRow>({
-    item,
-    editing,
-}: EditableRowTitleProps<T>) => {
-    const [title, setTitle] = useState(item.title);
-    const isEditing = Boolean(editing?.enabled);
-    const isTitleEmpty = !title.trim();
-
-    useEffect(() => {
-        setTitle(item.title);
-    }, [item.id, item.title]);
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-        event.stopPropagation();
-
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const nextTitle = title.trim();
-
-            if (!nextTitle) {
-                return;
-            }
-
-            if (nextTitle === item.title) {
-                editing?.onCancel?.(item);
-                setTitle(item.title);
-                return;
-            }
-
-            editing?.onSubmit?.(item, nextTitle);
-        }
-
-        if (event.key === 'Escape') {
-            editing?.onCancel?.(item);
-            setTitle(item.title);
-        }
-    };
-
-    if (isEditing) {
-        return (
-            <div
-                onClick={(event) => event.stopPropagation()}
-                onMouseDown={(event) => event.stopPropagation()}
-            >
-                <TextInput
-                    autoFocus
-                    value={title}
-                    size="s"
-                    validationState={isTitleEmpty ? 'invalid' : undefined}
-                    onKeyDown={handleKeyDown}
-                    onUpdate={setTitle}
-                />
-            </div>
-        );
-    }
-
-    return <Text ellipsis>{item.title}</Text>;
-};

package/src/components/EditableRowTitle/index.ts

@@ -1,2 +0,0 @@
-export {EditableRowTitle} from './EditableRowTitle';
-export type {EditableRowTitleProps} from './EditableRowTitle';

package/src/components/EmptyContent/EmptyContent.scss

@@ -1,3 +0,0 @@
-.qp-empty-content {
-  height: 100%;
-}

package/src/components/EmptyContent/EmptyContent.tsx

@@ -1,57 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {Folder, NoSearchResults} from '@gravity-ui/illustrations';
-import cn from 'bem-cn-lite';
-import i18n from './i18n';
-import './EmptyContent.scss';
-
-const block = cn('qp-empty-content');
-
-export type EmptyContentVariant = 'no-files' | 'no-clusters' | 'nothing-found' | 'no-data';
-
-export type EmptyContentProps = {
-    variant: EmptyContentVariant;
-    className?: string;
-};
-
-type EmptyContentConfig = {
-    icon: FC<{height?: number}>;
-    title: string;
-    description?: string;
-};
-
-const CONTENT_BY_VARIANT: Record<EmptyContentVariant, EmptyContentConfig> = {
-    'no-files': {
-        icon: Folder,
-        title: i18n('title_no-files'),
-    },
-    'no-clusters': {
-        icon: Folder,
-        title: i18n('title_no-clusters'),
-    },
-    'nothing-found': {
-        icon: NoSearchResults,
-        title: i18n('title_nothing-found'),
-        description: i18n('context_try-change-filters'),
-    },
-    'no-data': {
-        icon: Folder,
-        title: i18n('title_no-data'),
-    },
-};
-
-export const EmptyContent: FC<EmptyContentProps> = ({variant, className}) => {
-    const {icon: Icon, title, description} = CONTENT_BY_VARIANT[variant];
-
-    return (
-        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
-            <Flex direction="column" gap={5}>
-                <Icon height={100} />
-                <Flex direction="column" alignItems="center" gap={1}>
-                    <Text variant="subheader-1">{title}</Text>
-                    {description && <Text>{description}</Text>}
-                </Flex>
-            </Flex>
-        </Flex>
-    );
-};

package/src/components/EmptyContent/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/components/EmptyContent/i18n/en.json

@@ -1,7 +0,0 @@
-{
-    "title_nothing-found": "Nothing found",
-    "title_no-files": "No files",
-    "title_no-clusters": "No clusters",
-    "title_no-data": "No data",
-    "context_try-change-filters": "Try to change filters"
-}

package/src/components/EmptyContent/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:empty-content', dicts);

package/src/components/EmptyContent/i18n/ru.json

@@ -1,7 +0,0 @@
-{
-    "title_nothing-found": "Ничего не найдено",
-    "title_no-files": "Нет файлов",
-    "title_no-clusters": "Нет кластеров",
-    "title_no-data": "Нет данных",
-    "context_try-change-filters": "Попробуйте изменить фильтры"
-}

package/src/components/EmptyContent/index.ts

@@ -1 +0,0 @@
-export {EmptyContent, type EmptyContentProps, type EmptyContentVariant} from './EmptyContent';

package/src/components/ErrorTree/ErrorTree.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Text} from '@gravity-ui/uikit';
-import {action} from 'storybook/actions';
-
-import type {ErrorTreeItem} from '../../types/errorTree';
-import {ErrorTree} from './ErrorTree';
-
-const root: ErrorTreeItem = {
-    id: 'root',
-    severity: 'error',
-    message: 'Missing value for parameter: $h',
-    code: 2,
-    attributes: {severity: 'Error', queryId: '7d1d'},
-    children: [
-        {
-            id: 'nested-error',
-            severity: 'error',
-            message: 'Missing value for parameter: $h',
-            code: 2,
-            position: {row: 1, column: 0},
-            attributes: {severity: 'Error'},
-            children: [
-                {
-                    id: 'intermediate-1',
-                    severity: 'warning',
-                    message: 'Intermediate parser message',
-                    children: [
-                        {
-                            id: 'intermediate-2',
-                            severity: 'warning',
-                            message: 'Intermediate optimizer message',
-                            children: [
-                                {
-                                    id: 'terminal-error',
-                                    severity: 'error',
-                                    message:
-                                        'At function: RemovePrefixMembers, At function: OrderedSqlProject',
-                                    code: 2,
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            id: 'warning',
-            severity: 'warning',
-            message: 'Query can be optimized further',
-            code: 0,
-            children: [
-                {
-                    id: 'info',
-                    severity: 'info',
-                    message: 'Consider adding a filter before the join',
-                    position: {row: 47, column: 6},
-                },
-            ],
-        },
-    ],
-};
-
-const meta: Meta<typeof ErrorTree> = {
-    title: 'Components/ErrorTree',
-    component: ErrorTree,
-    tags: ['autodocs'],
-    parameters: {layout: 'padded'},
-    args: {
-        root,
-        onPositionClick: action('onPositionClick'),
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof ErrorTree>;
-
-export const Default: Story = {};
-
-export const CustomAttributes: Story = {
-    args: {
-        renderAttributes: (attributes) => (
-            <Text variant="body-2">{String(attributes.severity)}</Text>
-        ),
-    },
-};
-
-export const Narrow: Story = {
-    render: (args) => (
-        <div style={{width: 420}}>
-            <ErrorTree {...args} />
-        </div>
-    ),
-};

package/src/components/ErrorTree/ErrorTree.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-
-import type {ErrorTreeProps} from '../../types/errorTree';
-import {ErrorTreeNode} from './internal/ErrorTreeNode';
-
-const block = cn('qp-error-tree');
-
-export function ErrorTree({
-    root,
-    className,
-    defaultExpanded = true,
-    defaultInfoExpanded = false,
-    renderAttributes,
-    onPositionClick,
-}: ErrorTreeProps) {
-    return (
-        <div className={block(null, className)}>
-            <ErrorTreeNode
-                item={root}
-                level={0}
-                defaultNodeExpanded={defaultExpanded}
-                defaultExpanded={defaultExpanded}
-                defaultInfoExpanded={defaultInfoExpanded}
-                renderAttributes={renderAttributes}
-                onPositionClick={onPositionClick}
-            />
-        </div>
-    );
-}

package/src/components/ErrorTree/helpers/formatAttributes.ts

@@ -1,9 +0,0 @@
-import type {ErrorTreeItem} from '../../../types/errorTree';
-
-export function formatAttributes(attributes: ErrorTreeItem['attributes']) {
-    try {
-        return JSON.stringify(attributes, null, 2);
-    } catch {
-        return null;
-    }
-}

package/src/components/ErrorTree/helpers/getIntermediateChain.ts

@@ -1,21 +0,0 @@
-import type {ErrorTreeItem} from '../../../types/errorTree';
-
-export type IntermediateChain = {
-    hiddenItems: ErrorTreeItem[];
-    terminalItem: ErrorTreeItem;
-};
-
-export function getIntermediateChain(item: ErrorTreeItem): IntermediateChain {
-    const items = [item];
-    let current = item;
-
-    while (current.children?.length === 1) {
-        current = current.children[0];
-        items.push(current);
-    }
-
-    return {
-        hiddenItems: items.slice(0, -1),
-        terminalItem: items[items.length - 1],
-    };
-}

package/src/components/ErrorTree/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/components/ErrorTree/i18n/en.json

@@ -1,11 +0,0 @@
-{
-  "field_attributes": "Attributes",
-  "field_code": "Code",
-  "action_show-all": "Show all",
-  "action_show-parent": "Show parent",
-  "context_intermediate-messages": {
-    "one": "{{count}} intermediate message",
-    "other": "{{count}} intermediate messages"
-  },
-  "context_attributes-unavailable": "Attributes cannot be displayed"
-}

package/src/components/ErrorTree/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:error-tree', dicts);

package/src/components/ErrorTree/i18n/ru.json

@@ -1,13 +0,0 @@
-{
-  "field_attributes": "Атрибуты",
-  "field_code": "Код",
-  "action_show-all": "Показать все",
-  "action_show-parent": "Показать родителя",
-  "context_intermediate-messages": {
-    "one": "{{count}} промежуточное сообщение",
-    "few": "{{count}} промежуточных сообщения",
-    "many": "{{count}} промежуточных сообщений",
-    "other": "{{count}} промежуточного сообщения"
-  },
-  "context_attributes-unavailable": "Не удалось показать атрибуты"
-}

package/src/components/ErrorTree/index.ts

@@ -1 +0,0 @@
-export {ErrorTree} from './ErrorTree';

package/src/components/ErrorTree/internal/ErrorTreeChildren.scss

@@ -1,5 +0,0 @@
-.qp-error-tree {
-    &__children {
-        padding-inline-start: var(--g-spacing-7);
-    }
-}

package/src/components/ErrorTree/internal/ErrorTreeChildren.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
-import {IntermediateMessages} from './IntermediateMessages';
-
-import './ErrorTreeChildren.scss';
-
-type ErrorTreeChildrenProps = Pick<
-    ErrorTreeProps,
-    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
-> & {
-    className?: string;
-    items: ErrorTreeItem[];
-    level: number;
-};
-
-export function ErrorTreeChildren({className, items, ...props}: ErrorTreeChildrenProps) {
-    return (
-        <div className={className}>
-            {items.map((item) => (
-                <IntermediateMessages key={item.id} item={item} {...props} />
-            ))}
-        </div>
-    );
-}

package/src/components/ErrorTree/internal/ErrorTreeNode.scss

@@ -1,95 +0,0 @@
-.qp-error-tree {
-    &__node {
-        margin-block-end: var(--g-spacing-2);
-    }
-
-    &__summary,
-    &__line {
-        min-inline-size: 0;
-    }
-
-    &__expand-button {
-        flex: 0 0 auto;
-    }
-
-    &__expand-placeholder {
-        flex: 0 0 28px;
-    }
-
-    &__line {
-        flex: 1 1 auto;
-        min-inline-size: 0;
-        padding-block: 2px;
-    }
-
-    &__severity-icon {
-        flex: 0 0 auto;
-
-        &_error {
-            color: var(--g-color-text-danger);
-        }
-
-        &_warning {
-            color: var(--g-color-text-warning);
-        }
-
-        &_info {
-            color: var(--g-color-text-info);
-        }
-    }
-
-    &__attributes-button,
-    &__show-parent {
-        flex: 0 0 auto;
-    }
-
-    &__position {
-        flex: 0 0 auto;
-        padding-block: 4px;
-        color: var(--g-color-text-secondary);
-        font-family: var(--g-font-family-monospace);
-    }
-
-    &__message,
-    &__message-button {
-        flex: 1 1 auto;
-        min-inline-size: 0;
-        overflow: hidden;
-        padding-block: 4px;
-        color: var(--g-color-text-primary);
-        font-family: var(--g-font-family-monospace);
-        font-size: var(--g-text-code-2-font-size);
-        line-height: var(--g-text-code-2-line-height);
-        text-align: start;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__message-button {
-        justify-content: flex-start;
-    }
-
-    &__code {
-        flex: 0 0 auto;
-        padding-block: 4px;
-        color: var(--g-color-text-complementary);
-    }
-
-    &__attributes {
-        margin-block-start: var(--g-spacing-1);
-        margin-inline-start: 28px;
-        overflow: auto;
-    }
-
-    &__attributes-content {
-        margin: 0;
-        padding: var(--g-spacing-2);
-        border-radius: var(--g-border-radius-s);
-        background: var(--g-color-base-generic-ultralight);
-        color: var(--g-color-text-primary);
-        font-family: var(--g-font-family-monospace);
-        font-size: var(--g-text-code-2-font-size);
-        line-height: var(--g-text-code-2-line-height);
-        white-space: pre-wrap;
-    }
-}