@gravity-ui/querieskit 1.0.4 → 1.1.0

package/src/components/LazyList/LazyList.tsx

@@ -0,0 +1,97 @@
+import React, {useMemo} from 'react';
+import {List} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';
+import {ListSpinner} from '../ListSpinner';
+import './LazyList.scss';
+
+const block = cn('qp-lazy-list');
+
+const SENTINEL_ROW_HEIGHT = 1;
+
+type SentinelRow = {__sentinel: true};
+type LazyListRow<T> = T | SentinelRow;
+
+const isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>
+    Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);
+
+export type LazyListProps<T extends object> = {
+    items: T[];
+    itemHeight: (item: T) => number;
+    renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    onItemClick?: (item: T, index: number) => void;
+    selectedItemIndex?: T[keyof T] | number;
+    filterable?: boolean;
+    loading?: boolean;
+    error?: React.ReactNode;
+    emptyContent?: React.ReactNode;
+    isEmpty?: boolean;
+    className?: string;
+};
+
+export const LazyList = <T extends object>({
+    items,
+    itemHeight,
+    renderItem,
+    hasMore,
+    onLoadMore,
+    onItemClick,
+    selectedItemIndex,
+    filterable = false,
+    loading,
+    error,
+    emptyContent,
+    isEmpty,
+    className,
+}: LazyListProps<T>) => {
+    const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);
+
+    const rows: LazyListRow<T>[] = useMemo(
+        () => (hasMore ? [...items, {__sentinel: true}] : items),
+        [items, hasMore],
+    );
+
+    const getRowHeight = (row: LazyListRow<T>) =>
+        isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);
+
+    if (error) {
+        return <React.Fragment>{error}</React.Fragment>;
+    }
+
+    const empty = isEmpty ?? !items.length;
+
+    if (loading && empty) {
+        return <ListSpinner className={block('spinner', className)} />;
+    }
+
+    if (empty) {
+        return <React.Fragment>{emptyContent}</React.Fragment>;
+    }
+
+    return (
+        <List<LazyListRow<T>>
+            className={block(null, className)}
+            filterable={filterable}
+            items={rows}
+            itemHeight={getRowHeight}
+            itemsHeight={(listRows) =>
+                listRows.reduce((total, row) => total + getRowHeight(row), 0)
+            }
+            renderItem={(row, isActive, index) =>
+                isSentinelRow(row) ? (
+                    <div ref={sentinelRef} className={block('sentinel')} />
+                ) : (
+                    renderItem(row, isActive, index)
+                )
+            }
+            selectedItemIndex={selectedItemIndex as never}
+            onItemClick={(row, index) => {
+                if (!isSentinelRow(row)) {
+                    onItemClick?.(row, index);
+                }
+            }}
+        />
+    );
+};

package/src/components/LazyList/index.ts

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

package/src/components/ListSpinner/ListSpinner.scss

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

package/src/components/ListSpinner/ListSpinner.tsx

@@ -0,0 +1,18 @@
+import React, {FC} from 'react';
+import {Flex, Spin} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import './ListSpinner.scss';
+
+const block = cn('qp-list-spinner');
+
+export type ListSpinnerProps = {
+    className?: string;
+};
+
+export const ListSpinner: FC<ListSpinnerProps> = ({className}) => {
+    return (
+        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
+            <Spin size="m" />
+        </Flex>
+    );
+};

package/src/components/ListSpinner/index.ts

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

package/src/components/NavigationActionButtons/NavigationActionButtons.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {Button, Flex} from '@gravity-ui/uikit';
+import type {NavigationAction} from '../../types/navigation';
+
+export type NavigationActionButtonsProps<TArg> = {
+    actions?: Array<NavigationAction<TArg>>;
+    arg: TArg;
+    className?: string;
+    buttonClassName?: string;
+};
+
+export function NavigationActionButtons<TArg>({
+    actions,
+    arg,
+    className,
+    buttonClassName,
+}: NavigationActionButtonsProps<TArg>) {
+    const visibleActions = actions?.filter((action) => !action.hidden) ?? [];
+
+    if (visibleActions.length === 0) {
+        return null;
+    }
+
+    return (
+        <Flex gap={1} shrink={0} className={className}>
+            {visibleActions.map((action) => (
+                <Button
+                    key={action.id}
+                    view="flat"
+                    size="s"
+                    disabled={action.disabled}
+                    title={action.title}
+                    aria-label={action.title}
+                    qa={action.qa}
+                    className={buttonClassName}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        action.onClick(arg);
+                    }}
+                >
+                    {action.content}
+                </Button>
+            ))}
+        </Flex>
+    );
+}

package/src/components/NavigationActionButtons/index.ts

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

package/src/components/NavigationItemRow/NavigationItemRow.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from 'react';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {NavigationItem} from '../../types/navigation';
+import {getDefaultNavigationIcon} from '../../helpers/getDefaultNavigationIcon';
+
+const block = cn('qp-navigation-item-row');
+
+export type NavigationItemRowProps = {
+    item: NavigationItem;
+};
+
+export const NavigationItemRow: FC<NavigationItemRowProps> = ({item}) => {
+    return (
+        <Flex gap={2} alignItems="center" className={block({disabled: item.disabled})}>
+            {item.icon ?? (
+                <Icon data={getDefaultNavigationIcon(item.kind, item.targetPathBroken)} size={16} />
+            )}
+            <Text
+                className={block('title')}
+                color={item.disabled ? 'secondary' : undefined}
+                ellipsis
+            >
+                {item.title}
+            </Text>
+        </Flex>
+    );
+};

package/src/components/NavigationItemRow/index.ts

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

package/src/components/PathEditor/PathEditor.scss

@@ -0,0 +1,41 @@
+.qp-path-editor {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    &__items {
+        max-height: 300px;
+        overflow: hidden auto;
+        background-color: var(--g-color-base-float);
+    }
+
+    &__item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0 16px;
+        overflow: hidden;
+        line-height: 32px;
+        color: var(--g-color-text-primary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:hover,
+        &_selected {
+            background-color: var(--g-color-base-simple-hover);
+        }
+
+        &_error {
+            color: var(--g-color-text-danger);
+            cursor: default;
+        }
+    }
+
+    &__item-path {
+        margin-left: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/src/components/PathEditor/PathEditor.stories.helpers.ts

@@ -0,0 +1,118 @@
+import type {LoadPathSuggestionsParams, PathEditorSuggestion} from '../../types/pathEditor';
+import type {NavigationItemKind} from '../../types/navigation';
+
+type MockNode = {
+    name: string;
+    kind: NavigationItemKind;
+    children?: MockNode[];
+};
+
+const TREE: MockNode = {
+    name: '',
+    kind: 'folder',
+    children: [
+        {
+            name: 'home',
+            kind: 'folder',
+            children: [
+                {
+                    name: 'user',
+                    kind: 'folder',
+                    children: [
+                        {
+                            name: 'projects',
+                            kind: 'folder',
+                            children: [
+                                {name: 'favorites', kind: 'folder'},
+                                {name: 'query.sql', kind: 'file'},
+                            ],
+                        },
+                        {name: 'tmp', kind: 'folder'},
+                        {name: 'events', kind: 'table'},
+                        {name: 'events_dyn', kind: 'table'},
+                    ],
+                },
+                {
+                    name: 'my-projects',
+                    kind: 'folder',
+                    children: [
+                        {name: 'favorites', kind: 'folder'},
+                        {
+                            name: 'very',
+                            kind: 'folder',
+                            children: [
+                                {
+                                    name: 'long',
+                                    kind: 'folder',
+                                    children: [
+                                        {
+                                            name: 'nested',
+                                            kind: 'folder',
+                                            children: [
+                                                {
+                                                    name: 'directory',
+                                                    kind: 'folder',
+                                                    children: [{name: 'structure', kind: 'folder'}],
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {name: 'tmp', kind: 'folder'},
+        {name: 'sys', kind: 'unknown'},
+    ],
+};
+
+function getParentPath(path: string): string {
+    if (!path || path === '/') {
+        return '/';
+    }
+
+    const normalized = path.endsWith('/') ? path.slice(0, -1) : path;
+    const index = normalized.lastIndexOf('/');
+    return index <= 0 ? '/' : normalized.slice(0, index);
+}
+
+function findNode(path: string): MockNode | undefined {
+    if (path === '/' || path === '') {
+        return TREE;
+    }
+
+    const parts = path.split('/').filter(Boolean);
+    let current: MockNode | undefined = TREE;
+
+    for (const part of parts) {
+        current = current.children?.find((child) => child.name === part);
+        if (!current) {
+            return undefined;
+        }
+    }
+
+    return current;
+}
+
+export async function mockLoadPathSuggestions({
+    path,
+}: LoadPathSuggestionsParams): Promise<PathEditorSuggestion[]> {
+    await new Promise((resolve) => setTimeout(resolve, 150));
+
+    const parentPath = getParentPath(path);
+    const parent = findNode(parentPath);
+    const children = parent?.children ?? [];
+    const prefix = parentPath === '/' ? '' : parentPath;
+
+    return children
+        .map((child) => ({
+            parentPath,
+            childPath: `/${child.name}`,
+            path: `${prefix}/${child.name}`,
+            kind: child.kind,
+        }))
+        .sort((a, b) => a.childPath.localeCompare(b.childPath));
+}

package/src/components/PathEditor/PathEditor.stories.tsx

@@ -0,0 +1,57 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {action} from 'storybook/actions';
+import {PathEditor} from './PathEditor';
+import {mockLoadPathSuggestions} from './PathEditor.stories.helpers';
+
+const meta: Meta<typeof PathEditor> = {
+    title: 'Components/PathEditor',
+    component: PathEditor,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof PathEditor>;
+
+export const Default: Story = {
+    args: {
+        defaultPath: '/home/user',
+        autoFocus: true,
+        onLoadSuggestions: mockLoadPathSuggestions,
+        onChange: action('onChange'),
+        onApply: action('onApply'),
+        onCancel: action('onCancel'),
+        onBlur: action('onBlur'),
+    },
+};
+
+export const WithClear: Story = {
+    args: {
+        defaultPath: '/home/user/projects',
+        hasClear: true,
+        onLoadSuggestions: mockLoadPathSuggestions,
+        onApply: action('onApply'),
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        defaultPath: '/home/user',
+        disabled: true,
+        onLoadSuggestions: mockLoadPathSuggestions,
+    },
+};
+
+export const SuggestionsError: Story = {
+    args: {
+        defaultPath: '/home/user',
+        autoFocus: true,
+        suggestionsError: true,
+        errorMessage: 'Failed to load suggestions',
+        onLoadSuggestions: async () => {
+            throw new Error('Failed to load suggestions');
+        },
+    },
+};