@gravity-ui/querieskit 1.2.0 → 1.3.1

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

@@ -1,118 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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');
-        },
-    },
-};

package/src/components/PathEditor/PathEditor.tsx

@@ -1,380 +0,0 @@
-import React, {
-    FC,
-    type FocusEvent,
-    type KeyboardEvent,
-    type MouseEvent,
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import {Icon, Popup, Text, TextInput} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import type {
-    LoadPathSuggestions,
-    PathEditorEventPayload,
-    PathEditorSuggestion,
-    PathEditorSuggestionFilter,
-} from '../../types/pathEditor';
-import {getDefaultNavigationIcon} from '../../helpers/getDefaultNavigationIcon';
-import {
-    filterByCurrentPath,
-    getCompletedPath,
-    getLastFragment,
-    getNextSelectedIndex,
-    getPrevSelectedIndex,
-} from './helpers/suggestions';
-import i18n from './i18n';
-import './PathEditor.scss';
-
-const DEBOUNCE_MS = 300;
-const block = cn('qp-path-editor');
-
-export type PathEditorProps = {
-    className?: string;
-    placeholder?: string;
-    defaultPath?: string;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    hasClear?: boolean;
-    showErrors?: boolean;
-    customFilter?: PathEditorSuggestionFilter;
-    cluster?: string;
-    suggestions?: PathEditorSuggestion[];
-    suggestionsError?: boolean;
-    errorMessage?: string;
-    onLoadSuggestions?: LoadPathSuggestions;
-    onChange?: (path: string) => void;
-    onFocus?: (event: FocusEvent<HTMLInputElement>, payload: PathEditorEventPayload) => void;
-    onBlur?: (path: string) => void;
-    onApply?: (path: string) => void;
-    onCancel?: () => void;
-};
-
-export const PathEditor: FC<PathEditorProps> = ({
-    className,
-    placeholder = i18n('field_placeholder'),
-    defaultPath = '',
-    disabled = false,
-    autoFocus = false,
-    hasClear = false,
-    showErrors = true,
-    customFilter,
-    cluster,
-    suggestions: suggestionsFromProps,
-    suggestionsError: suggestionsErrorFromProps,
-    errorMessage: errorMessageFromProps,
-    onLoadSuggestions,
-    onChange,
-    onFocus,
-    onBlur,
-    onApply,
-    onCancel,
-}) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const selectedItemRef = useRef<HTMLDivElement>(null);
-    const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-    const requestIdRef = useRef(0);
-    const wasDisabledRef = useRef(disabled);
-    const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);
-
-    const onLoadSuggestionsRef = useRef(onLoadSuggestions);
-    onLoadSuggestionsRef.current = onLoadSuggestions;
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const customFilterRef = useRef(customFilter);
-    customFilterRef.current = customFilter;
-
-    const [path, setPath] = useState(defaultPath);
-    const [loadedSuggestions, setLoadedSuggestions] = useState<PathEditorSuggestion[]>([]);
-    const [internalError, setInternalError] = useState(false);
-    const [internalErrorMessage, setInternalErrorMessage] = useState<string>();
-    const [inputFocus, setInputFocus] = useState(false);
-    const [inputChange, setInputChange] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-    const [inputWidth, setInputWidth] = useState(0);
-
-    const suggestions = suggestionsFromProps ?? loadedSuggestions;
-    const suggestionsError = suggestionsErrorFromProps ?? internalError;
-    const errorMessage =
-        errorMessageFromProps ?? internalErrorMessage ?? i18n('message_error-default');
-
-    const actualSuggestions = useMemo(() => {
-        if (!inputFocus || !inputChange || !suggestions.length) {
-            return [];
-        }
-
-        return filterByCurrentPath(path, suggestions);
-    }, [inputFocus, inputChange, path, suggestions]);
-
-    const loadSuggestions = useCallback(
-        (nextPath: string) => {
-            const load = onLoadSuggestionsRef.current;
-            if (!load) {
-                return;
-            }
-
-            const requestId = ++requestIdRef.current;
-
-            Promise.resolve(
-                load({
-                    path: nextPath,
-                    customFilter: customFilterRef.current,
-                    cluster,
-                }),
-            )
-                .then((result) => {
-                    if (requestId !== requestIdRef.current) {
-                        return;
-                    }
-
-                    if (result) {
-                        setLoadedSuggestions(result);
-                    }
-                    setInternalError(false);
-                    setInternalErrorMessage(undefined);
-                })
-                .catch((error: unknown) => {
-                    if (requestId !== requestIdRef.current) {
-                        return;
-                    }
-
-                    setLoadedSuggestions([]);
-                    setInternalError(true);
-                    setInternalErrorMessage(error instanceof Error ? error.message : undefined);
-                });
-        },
-        [cluster],
-    );
-
-    const debounceLoading = useCallback(
-        (nextPath: string) => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-
-            debounceTimerRef.current = setTimeout(() => {
-                loadSuggestions(nextPath);
-                onChangeRef.current?.(nextPath);
-            }, DEBOUNCE_MS);
-        },
-        [loadSuggestions],
-    );
-
-    const hideSuggestions = useCallback(() => {
-        setInputFocus(false);
-        setSelectedIndex(-1);
-    }, []);
-
-    const handleInputChange = useCallback(
-        (nextPath: string) => {
-            setPath(nextPath);
-            setSelectedIndex(-1);
-            setInputChange(true);
-            setInputFocus(true);
-            debounceLoading(nextPath);
-        },
-        [debounceLoading],
-    );
-
-    const handleInputFocus = useCallback(
-        (event: FocusEvent<HTMLInputElement>) => {
-            setInputFocus(true);
-            onFocus?.(event, {path});
-        },
-        [onFocus, path],
-    );
-
-    const handleInputBlur = useCallback(() => {
-        hideSuggestions();
-        onBlur?.(path);
-    }, [hideSuggestions, onBlur, path]);
-
-    const handleEnterClick = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            event.preventDefault();
-
-            const inputPath = event.currentTarget.value;
-
-            if (selectedIndex === -1) {
-                setPath(inputPath);
-                setSelectedIndex(-1);
-                onApply?.(inputPath);
-                return;
-            }
-
-            const suggestion = actualSuggestions[selectedIndex];
-            if (suggestion) {
-                handleInputChange(getCompletedPath(suggestion));
-            }
-        },
-        [actualSuggestions, handleInputChange, onApply, selectedIndex],
-    );
-
-    const handleEscClick = useCallback(() => {
-        inputRef.current?.blur();
-        onCancel?.();
-    }, [onCancel]);
-
-    const handleTabClick = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            event.preventDefault();
-
-            if (actualSuggestions.length === 1) {
-                handleInputChange(getCompletedPath(actualSuggestions[0]));
-            } else if (actualSuggestions.length > 1) {
-                setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));
-            }
-        },
-        [actualSuggestions, handleInputChange],
-    );
-
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent<HTMLInputElement>) => {
-            switch (event.key) {
-                case 'ArrowDown':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    event.preventDefault();
-                    setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));
-                    break;
-                case 'ArrowUp':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    event.preventDefault();
-                    setSelectedIndex((current) => getPrevSelectedIndex(actualSuggestions, current));
-                    break;
-                case 'Enter':
-                    handleEnterClick(event);
-                    break;
-                case 'Escape':
-                    handleEscClick();
-                    break;
-                case 'Tab':
-                    if (!actualSuggestions.length) {
-                        break;
-                    }
-                    handleTabClick(event);
-                    break;
-            }
-        },
-        [actualSuggestions, handleEnterClick, handleEscClick, handleTabClick],
-    );
-
-    useEffect(() => {
-        if (path) {
-            loadSuggestions(path);
-        }
-
-        return () => {
-            requestIdRef.current += 1;
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (wasDisabledRef.current && !disabled) {
-            inputRef.current?.focus();
-        }
-        wasDisabledRef.current = disabled;
-    }, [disabled]);
-
-    useLayoutEffect(() => {
-        if (inputFocus && rootElement) {
-            setInputWidth(rootElement.offsetWidth);
-        }
-    }, [inputFocus, path, rootElement]);
-
-    useLayoutEffect(() => {
-        selectedItemRef.current?.scrollIntoView({block: 'nearest'});
-    }, [selectedIndex]);
-
-    const isPopupVisible = Boolean(
-        (actualSuggestions.length || (suggestionsError && showErrors)) && inputFocus,
-    );
-
-    return (
-        <div className={block(null, className)} ref={setRootElement}>
-            <TextInput
-                onKeyDown={handleKeyDown}
-                onUpdate={handleInputChange}
-                onFocus={handleInputFocus}
-                onBlur={handleInputBlur}
-                placeholder={placeholder}
-                hasClear={hasClear}
-                autoFocus={autoFocus}
-                disabled={disabled}
-                controlRef={inputRef}
-                value={path}
-            />
-            <Popup
-                className={block('popup')}
-                placement="bottom-start"
-                onOpenChange={(open) => {
-                    if (!open) {
-                        hideSuggestions();
-                    }
-                }}
-                anchorElement={rootElement}
-                open={isPopupVisible}
-                offset={{mainAxis: 0, crossAxis: 0}}
-                disableEscapeKeyDown
-                disableFocusOut
-            >
-                <div
-                    className={block('items')}
-                    style={{width: inputWidth || undefined}}
-                    role="listbox"
-                >
-                    {suggestionsError && showErrors ? (
-                        <Text className={block('item', {error: true})} color="danger">
-                            {errorMessage}
-                        </Text>
-                    ) : (
-                        actualSuggestions.map((item, index) => {
-                            const completedPath = getCompletedPath(item);
-                            const isSelected = index === selectedIndex;
-                            const lastFragment = getLastFragment(item.path);
-
-                            const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {
-                                handleInputChange(completedPath);
-                                event.preventDefault();
-                            };
-
-                            return (
-                                <div
-                                    key={item.path}
-                                    ref={isSelected ? selectedItemRef : undefined}
-                                    onMouseDown={handleMouseDown}
-                                    className={block('item', {selected: isSelected})}
-                                    role="option"
-                                    aria-selected={isSelected}
-                                >
-                                    {item.icon ?? (
-                                        <Icon
-                                            data={getDefaultNavigationIcon(
-                                                item.kind,
-                                                item.targetPathBroken,
-                                            )}
-                                            size={16}
-                                        />
-                                    )}
-                                    <span className={block('item-path')}>
-                                        {lastFragment ? `\u2026/${lastFragment}` : item.path}
-                                    </span>
-                                </div>
-                            );
-                        })
-                    )}
-                </div>
-            </Popup>
-        </div>
-    );
-};

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

@@ -1,40 +0,0 @@
-import type {PathEditorSuggestion} from '../../../types/pathEditor';
-
-export function filterByCurrentPath(
-    currentPath: string,
-    suggestions: PathEditorSuggestion[],
-): PathEditorSuggestion[] {
-    const path = currentPath.toLowerCase();
-
-    return suggestions.filter((child) => {
-        const hasPartOfPath = child.path.toLowerCase().startsWith(path);
-        const isShowCurrentChild = child.path.toLowerCase() !== path || child.kind === 'folder';
-
-        return hasPartOfPath && isShowCurrentChild;
-    });
-}
-
-export function getNextSelectedIndex(suggestions: PathEditorSuggestion[], selectedIndex: number) {
-    if (selectedIndex === -1 || selectedIndex === suggestions.length - 1) {
-        return 0;
-    }
-
-    return selectedIndex + 1;
-}
-
-export function getPrevSelectedIndex(suggestions: PathEditorSuggestion[], selectedIndex: number) {
-    if (selectedIndex === -1 || selectedIndex === 0) {
-        return suggestions.length - 1;
-    }
-
-    return selectedIndex - 1;
-}
-
-export function getCompletedPath(suggestion: PathEditorSuggestion) {
-    return suggestion.kind === 'folder' ? `${suggestion.path}/` : suggestion.path;
-}
-
-export function getLastFragment(path: string): string | undefined {
-    const segments = path.split('/').filter(Boolean);
-    return segments[segments.length - 1];
-}

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

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

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

@@ -1,4 +0,0 @@
-{
-  "message_error-default": "Oops, something went wrong",
-  "field_placeholder": "Enter the path..."
-}

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

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

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

@@ -1,4 +0,0 @@
-{
-  "message_error-default": "Что-то пошло не так",
-  "field_placeholder": "Введите путь..."
-}

package/src/components/PathEditor/index.ts

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

package/src/components/QueryDuration/QueryDuration.scss

@@ -1,6 +0,0 @@
-.qp-query-duration {
-  .g-label__text {
-    display: flex;
-    justify-content: center;
-  }
-}

package/src/components/QueryDuration/QueryDuration.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueryDuration} from './QueryDuration';
-
-const now = Date.now();
-const fiveMinutesAgo = now - 5 * 60 * 1000;
-const oneHourAgo = now - 60 * 60 * 1000;
-
-const meta: Meta<typeof QueryDuration> = {
-    title: 'Components/QueryDuration',
-    component: QueryDuration,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryDuration>;
-
-/** Live timer: endTime not provided — counter ticks every second */
-export const Default: Story = {
-    args: {
-        status: 'running',
-        startTime: fiveMinutesAgo,
-    },
-};
-
-/** All variants side by side: Running updates in real time, Draft is static */
-export const AllStatuses: Story = {
-    render: () => (
-        <div style={{display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center'}}>
-            {/* Static */}
-            <QueryDuration status="completed" startTime={fiveMinutesAgo} endTime={now} />
-            <QueryDuration status="failed" startTime={oneHourAgo} endTime={now} />
-            <QueryDuration status="aborted" startTime={fiveMinutesAgo} endTime={now} />
-            {/* Live timer */}
-            <QueryDuration status="running" startTime={fiveMinutesAgo} />
-            {/* Always --:-- */}
-            <QueryDuration status="draft" startTime={now} />
-        </div>
-    ),
-};

package/src/components/QueryDuration/QueryDuration.tsx

@@ -1,21 +0,0 @@
-import React, {FC} from 'react';
-import {QueryStatus} from '../../types/history';
-import {Label} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './QueryDuration.scss';
-import {useQueryDuration} from './useQueryDuration';
-
-type Props = {
-    startTime?: string | number;
-    endTime?: string | number;
-    status: QueryStatus;
-    className?: string;
-};
-
-const block = cn('qp-query-duration');
-
-export const QueryDuration: FC<Props> = ({startTime, endTime, status, className}) => {
-    const duration = useQueryDuration(status, startTime, endTime);
-
-    return <Label className={block(null, className)}>{duration}</Label>;
-};