@gravity-ui/querieskit 1.0.3 → 1.1.0

package/src/components/PathEditor/PathEditor.tsx

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

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

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

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

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

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

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

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

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

package/src/components/PathEditor/index.ts

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

package/src/components/SearchWithButtons/SearchWithButtons.scss

@@ -0,0 +1,10 @@
+.qp-search-with-buttons {
+  &__input {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &__inner-buttons {
+    margin-right: 4px;
+  }
+}

package/src/components/SearchWithButtons/SearchWithButtons.stories.tsx

@@ -0,0 +1,107 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button, Icon} from '@gravity-ui/uikit';
+import ChevronsExpandHorizontalIcon from '@gravity-ui/icons/svgs/chevrons-expand-horizontal.svg';
+import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
+import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
+import {SearchWithButtons} from './SearchWithButtons';
+
+const meta: Meta<typeof SearchWithButtons> = {
+    title: 'Components/SearchWithButtons',
+    component: SearchWithButtons,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchWithButtons>;
+
+const PlainStory = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <SearchWithButtons value={value} placeholder="Search" hasClear={true} onUpdate={setValue} />
+    );
+};
+
+const WithInnerButtonStory = () => {
+    const [value, setValue] = useState('');
+    const [active, setActive] = useState(false);
+
+    return (
+        <SearchWithButtons
+            value={value}
+            placeholder="Search"
+            hasClear={true}
+            onUpdate={setValue}
+            innerButtons={[
+                <Button
+                    key="full-search"
+                    size="xs"
+                    view={active ? 'action' : undefined}
+                    onClick={() => setActive(!active)}
+                >
+                    <Icon data={ChevronsExpandHorizontalIcon} size={12} />
+                </Button>,
+            ]}
+        />
+    );
+};
+
+const WithEndButtonsStory = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <SearchWithButtons
+            value={value}
+            placeholder="Search"
+            hasClear={true}
+            onUpdate={setValue}
+            endButtons={[
+                <Button key="filter">
+                    <Icon data={FunnelIcon} size={16} />
+                </Button>,
+                <Button key="settings">
+                    <Icon data={GearIcon} size={16} />
+                </Button>,
+            ]}
+        />
+    );
+};
+
+const WithBothSlotsStory = () => {
+    const [value, setValue] = useState('');
+
+    return (
+        <SearchWithButtons
+            value={value}
+            placeholder="Search"
+            hasClear={true}
+            onUpdate={setValue}
+            innerButtons={[
+                <Button key="full-search" size="xs">
+                    <Icon data={ChevronsExpandHorizontalIcon} size={12} />
+                </Button>,
+            ]}
+            endButtons={[
+                <Button key="filter">
+                    <Icon data={FunnelIcon} size={16} />
+                </Button>,
+            ]}
+        />
+    );
+};
+
+/** Just the search input, without any buttons */
+export const Default: Story = {render: () => <PlainStory />};
+
+/** A toggle button rendered inside the input */
+export const WithInnerButton: Story = {render: () => <WithInnerButtonStory />};
+
+/** Several buttons rendered after the input */
+export const WithEndButtons: Story = {render: () => <WithEndButtonsStory />};
+
+/** Both slots are filled at the same time */
+export const WithBothSlots: Story = {render: () => <WithBothSlotsStory />};

package/src/components/SearchWithButtons/SearchWithButtons.tsx

@@ -0,0 +1,56 @@
+import React, {FC} from 'react';
+import {Flex, TextInput} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import './SearchWithButtons.scss';
+
+export type SearchWithButtonsProps = {
+    value?: string;
+    placeholder?: string;
+    hasClear?: boolean;
+    innerButtons?: React.ReactNode[];
+    endButtons?: React.ReactNode[];
+    onUpdate?: (value: string) => void;
+    className?: string;
+};
+
+const block = cn('qp-search-with-buttons');
+
+const renderButtons = (buttons: React.ReactNode[]) =>
+    buttons.map((button, index) => <React.Fragment key={index}>{button}</React.Fragment>);
+
+export const SearchWithButtons: FC<SearchWithButtonsProps> = ({
+    value,
+    placeholder,
+    hasClear,
+    innerButtons,
+    endButtons,
+    onUpdate,
+    className,
+}) => {
+    const hasInnerButtons = Boolean(innerButtons?.length);
+    const hasEndButtons = Boolean(endButtons?.length);
+
+    return (
+        <Flex gap={1} className={block(null, className)}>
+            <TextInput
+                className={block('input')}
+                value={value}
+                placeholder={placeholder}
+                hasClear={hasClear}
+                onUpdate={onUpdate}
+                endContent={
+                    hasInnerButtons ? (
+                        <Flex gap={1} className={block('inner-buttons')}>
+                            {renderButtons(innerButtons as React.ReactNode[])}
+                        </Flex>
+                    ) : undefined
+                }
+            />
+            {hasEndButtons && (
+                <Flex gap={1} className={block('end-buttons')}>
+                    {renderButtons(endButtons as React.ReactNode[])}
+                </Flex>
+            )}
+        </Flex>
+    );
+};

package/src/components/SearchWithButtons/index.ts

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

package/src/components/SkeletonRows/SkeletonRows.tsx

@@ -0,0 +1,24 @@
+import React, {FC} from 'react';
+import {Flex, Skeleton} from '@gravity-ui/uikit';
+
+export type SkeletonRowsProps = {
+    count?: number;
+    className?: string;
+    rowClassName?: string;
+};
+
+const DEFAULT_ROWS_COUNT = 4;
+
+export const SkeletonRows: FC<SkeletonRowsProps> = ({
+    count = DEFAULT_ROWS_COUNT,
+    className,
+    rowClassName,
+}) => {
+    return (
+        <Flex direction="column" gap={2} className={className}>
+            {Array.from({length: count}, (_, index) => (
+                <Skeleton key={index} className={rowClassName} />
+            ))}
+        </Flex>
+    );
+};

package/src/components/SkeletonRows/index.ts

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