@gravity-ui/querieskit 1.0.4 → 1.1.0

package/src/components/AddChartButton/AddChartButton.tsx

@@ -0,0 +1,139 @@
+import React, {type ReactNode, useMemo, useState} from 'react';
+import {
+    ChartAreaStacked,
+    ChartBar,
+    ChartColumn,
+    ChartLine,
+    ChartPie,
+    Circles5Random,
+    Plus,
+    SquareBars,
+} from '@gravity-ui/icons';
+import {
+    Button,
+    type ButtonButtonProps,
+    DropdownMenu,
+    type DropdownMenuProps,
+    Icon,
+    type IconData,
+} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import './AddChartButton.scss';
+
+const block = cn('qp-add-chart-button');
+
+export type AddChartButtonOption<TValue extends string = string> = {
+    value: TValue;
+    text: ReactNode;
+    icon?: IconData;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+
+export type DefaultAddChartButtonValue =
+    'Area' | 'BarX' | 'BarY' | 'Line' | 'Pie' | 'Scatter' | 'Waterfall';
+
+export const DEFAULT_ADD_CHART_BUTTON_OPTIONS: readonly AddChartButtonOption<DefaultAddChartButtonValue>[] =
+    [
+        {value: 'Area', text: 'Area', icon: ChartAreaStacked},
+        {value: 'BarX', text: 'BarX', icon: ChartBar},
+        {value: 'BarY', text: 'BarY', icon: ChartColumn},
+        {value: 'Line', text: 'Line', icon: ChartLine},
+        {value: 'Pie', text: 'Pie', icon: ChartPie},
+        {value: 'Scatter', text: 'Scatter', icon: Circles5Random},
+        {value: 'Waterfall', text: 'Waterfall', icon: SquareBars},
+    ];
+
+type SwitcherButtonProps = Omit<
+    ButtonButtonProps,
+    'children' | 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'selected' | 'size' | 'view'
+>;
+
+type MenuProps = NonNullable<DropdownMenuProps<unknown>['menuProps']>;
+type PopupProps = NonNullable<DropdownMenuProps<unknown>['popupProps']>;
+
+export type AddChartButtonProps<TValue extends string = DefaultAddChartButtonValue> = {
+    text?: ReactNode;
+    options?: readonly AddChartButtonOption<TValue>[];
+    onSelect: (value: TValue) => void;
+    open?: boolean;
+    onOpenToggle?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    buttonProps?: SwitcherButtonProps;
+    menuProps?: MenuProps;
+    popupProps?: PopupProps;
+};
+
+export const AddChartButton = <TValue extends string = DefaultAddChartButtonValue>({
+    text = 'Add chart',
+    options = DEFAULT_ADD_CHART_BUTTON_OPTIONS as readonly AddChartButtonOption<TValue>[],
+    onSelect,
+    open,
+    onOpenToggle,
+    disabled,
+    className,
+    buttonProps,
+    menuProps,
+    popupProps,
+}: AddChartButtonProps<TValue>) => {
+    const [innerOpen, setInnerOpen] = useState(false);
+    const isOpen = open ?? innerOpen;
+
+    const items = useMemo(
+        () =>
+            options.map(({value, text: optionText, icon, disabled: optionDisabled, hidden}) => ({
+                text: optionText,
+                iconStart: icon && <Icon data={icon} size={16} className={block('option-icon')} />,
+                disabled: optionDisabled,
+                hidden,
+                action: () => onSelect(value),
+            })),
+        [onSelect, options],
+    );
+
+    const handleOpenToggle: React.Dispatch<React.SetStateAction<boolean>> = (nextOpen) => {
+        const nextValue = typeof nextOpen === 'function' ? nextOpen(isOpen) : nextOpen;
+
+        if (open === undefined) {
+            setInnerOpen(nextValue);
+        }
+
+        onOpenToggle?.(nextValue);
+    };
+
+    return (
+        <DropdownMenu
+            items={items}
+            open={isOpen}
+            onOpenToggle={handleOpenToggle}
+            disabled={disabled}
+            size="s"
+            switcherWrapperClassName={block(null, className)}
+            renderSwitcher={(switcherProps) => (
+                <Button
+                    {...buttonProps}
+                    {...switcherProps}
+                    type={buttonProps?.type ?? 'button'}
+                    view="flat-action"
+                    size="m"
+                    selected={isOpen}
+                    disabled={disabled}
+                    aria-haspopup="menu"
+                    aria-expanded={isOpen}
+                    className={block('button')}
+                >
+                    <Icon data={Plus} size={16} />
+                    {text}
+                </Button>
+            )}
+            menuProps={{
+                ...menuProps,
+                size: menuProps?.size ?? 's',
+                className: block('menu', menuProps?.className),
+            }}
+            popupProps={{placement: 'bottom-start', ...popupProps}}
+        />
+    );
+};

package/src/components/AddChartButton/index.ts

@@ -0,0 +1,6 @@
+export {AddChartButton, DEFAULT_ADD_CHART_BUTTON_OPTIONS} from './AddChartButton';
+export type {
+    AddChartButtonOption,
+    AddChartButtonProps,
+    DefaultAddChartButtonValue,
+} from './AddChartButton';

package/src/components/Breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,25 @@
+.qp-breadcrumbs {
+    $self: &;
+
+    min-width: 0;
+
+    &__list {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__path-editor {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__edit-button {
+        display: none;
+    }
+
+    &:hover {
+        #{$self}__edit-button {
+            display: block;
+        }
+    }
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,114 @@
+import React, {FC, useState} from 'react';
+import {Button, Flex, Breadcrumbs as GravityBreadcrumbs, Icon, Text} from '@gravity-ui/uikit';
+import FolderTreeIcon from '@gravity-ui/icons/svgs/folder-tree.svg';
+import PencilIcon from '@gravity-ui/icons/svgs/pencil.svg';
+import cn from 'bem-cn-lite';
+import {parsePathSegments} from './helpers/parsePathSegments';
+import {NavigationLocation} from '../../types/navigation';
+import type {LoadPathSuggestions} from '../../types/pathEditor';
+import {PathEditor} from '../PathEditor';
+import i18n from './i18n';
+import './Breadcrumbs.scss';
+
+export type BreadcrumbsProps = {
+    location: NavigationLocation;
+    hideResetButton?: boolean;
+    className?: string;
+    onUpdate: (location: NavigationLocation) => void;
+    onLoadSuggestions?: LoadPathSuggestions;
+};
+
+const block = cn('qp-breadcrumbs');
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({
+    location,
+    hideResetButton,
+    onUpdate,
+    onLoadSuggestions,
+    className,
+}) => {
+    const [edit, setEdit] = useState(false);
+
+    const {cluster, path} = location;
+    const ROOT_PATH = undefined;
+    const items = cluster ? [{path: ROOT_PATH, title: cluster}, ...parsePathSegments(path)] : [];
+
+    const handleReset = () => {
+        onUpdate({cluster: undefined, path: undefined});
+    };
+
+    const handleCancelEdit = () => {
+        setEdit(false);
+    };
+
+    const handleOnSubmit = (nextPath: string) => {
+        const normalizedPath = nextPath.endsWith('/') ? nextPath.slice(0, -1) : nextPath;
+        onUpdate({cluster, path: normalizedPath || undefined});
+        setEdit(false);
+    };
+
+    if (edit) {
+        return (
+            <Flex grow minWidth={0} className={block(null, className)}>
+                <PathEditor
+                    className={block('path-editor')}
+                    defaultPath={path ?? ''}
+                    autoFocus
+                    cluster={cluster}
+                    onLoadSuggestions={onLoadSuggestions}
+                    onApply={handleOnSubmit}
+                    onCancel={handleCancelEdit}
+                    onBlur={handleCancelEdit}
+                    onFocus={(event) => event.currentTarget.select()}
+                />
+            </Flex>
+        );
+    }
+
+    return (
+        <Flex gap={1} alignItems="center" grow minWidth={0} className={block(null, className)}>
+            {!hideResetButton && (
+                <Button view="flat" onClick={handleReset} aria-label={i18n('action_reset')}>
+                    <Icon data={FolderTreeIcon} size={16} />
+                </Button>
+            )}
+            {items.length > 0 ? (
+                <Flex
+                    alignItems="center"
+                    minWidth={0}
+                    overflow="hidden"
+                    gap={items.length > 1 ? undefined : 1}
+                >
+                    <Text color="secondary">/</Text>
+                    <GravityBreadcrumbs showRoot className={block('list')} maxItems={3}>
+                        {items.map((item, index) => {
+                            const isLast = index === items.length - 1;
+
+                            return (
+                                <GravityBreadcrumbs.Item
+                                    key={item.path ?? 'root'}
+                                    disabled={isLast}
+                                    onClick={
+                                        isLast
+                                            ? undefined
+                                            : () => onUpdate({cluster, path: item.path})
+                                    }
+                                >
+                                    {item.title}
+                                </GravityBreadcrumbs.Item>
+                            );
+                        })}
+                    </GravityBreadcrumbs>
+                    <Button
+                        view="flat"
+                        className={block('edit-button')}
+                        onClick={() => setEdit(true)}
+                        aria-label={i18n('action_edit-path')}
+                    >
+                        <Icon data={PencilIcon} size={16} />
+                    </Button>
+                </Flex>
+            ) : null}
+        </Flex>
+    );
+};

package/src/components/Breadcrumbs/helpers/parsePathSegments.ts

@@ -0,0 +1,16 @@
+export type BreadcrumbSegment = {
+    path: string;
+    title: string;
+};
+
+export function parsePathSegments(path: string | undefined): BreadcrumbSegment[] {
+    if (!path) return [];
+
+    const parts = path.trim().split('/').filter(Boolean);
+
+    let pathAcc = '';
+    return parts.map((segment) => {
+        pathAcc += `/${segment}`;
+        return {path: pathAcc, title: segment};
+    });
+}

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

@@ -0,0 +1,4 @@
+{
+  "action_reset": "Reset navigation",
+  "action_edit-path": "Edit path"
+}

package/src/components/{HistoryListEmpty → Breadcrumbs}/i18n/index.ts

@@ -2,4 +2,4 @@ import {addI18Keysets} from '../../../i18n';
 
 import dicts from './dicts';
 
-export default addI18Keysets('qp:history-list-empty', dicts);
+export default addI18Keysets('qp:breadcrumbs', dicts);

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

@@ -0,0 +1,4 @@
+{
+  "action_reset": "Сбросить навигацию",
+  "action_edit-path": "Редактировать путь"
+}

package/src/components/Breadcrumbs/index.ts

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

package/src/components/Chart/Chart.scss

@@ -0,0 +1,40 @@
+.qp-chart {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--g-color-base-background);
+
+    &_fullscreen {
+        width: 100vw;
+        height: 100vh;
+        z-index: var(--z-index-overlay, 1000);
+        position: fixed;
+        inset: 0;
+    }
+
+    &__controls {
+        position: absolute;
+        z-index: 1;
+        inset-block-start: var(--g-spacing-2);
+        inset-inline-end: var(--g-spacing-2);
+        display: flex;
+        gap: var(--g-spacing-1);
+        background: var(--g-color-base-background);
+        border-radius: var(--g-border-radius-m);
+    }
+
+    @media (hover: hover) {
+        &__controls_visibility_hover {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &:hover &__controls_visibility_hover,
+        &:focus-within &__controls_visibility_hover {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+}

package/src/components/Chart/Chart.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import type {ChartData} from '@gravity-ui/charts';
+import {Copy, TrashBin} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+import {action} from 'storybook/actions';
+
+import {Chart} from './Chart';
+
+const data: ChartData = {
+    title: {text: 'Query duration'},
+    xAxis: {type: 'category', categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
+    series: {
+        data: [
+            {
+                type: 'line',
+                name: 'Duration',
+                data: [
+                    {x: 0, y: 12},
+                    {x: 1, y: 18},
+                    {x: 2, y: 10},
+                    {x: 3, y: 24},
+                    {x: 4, y: 16},
+                ],
+            },
+        ],
+    },
+};
+
+const meta: Meta<typeof Chart> = {
+    title: 'Components/Chart',
+    component: Chart,
+    tags: ['autodocs'],
+    parameters: {layout: 'padded'},
+    args: {
+        data,
+        controlsVisibility: 'always',
+        onPencilEdit: action('onPencilEdit'),
+        actions: [
+            {
+                text: 'Duplicate',
+                icon: <Icon data={Copy} size={16} />,
+                onClick: action('duplicate'),
+            },
+            {
+                text: 'Delete',
+                icon: <Icon data={TrashBin} size={16} />,
+                onClick: action('delete'),
+            },
+        ],
+    },
+    render: (args) => (
+        <div style={{height: 400}}>
+            <Chart {...args} />
+        </div>
+    ),
+};
+
+export default meta;
+type Story = StoryObj<typeof Chart>;
+
+export const Default: Story = {};
+
+export const ControlsOnHover: Story = {
+    args: {
+        controlsVisibility: 'hover',
+    },
+};
+
+export const WithoutOptionalActions: Story = {
+    args: {
+        actions: undefined,
+        onPencilEdit: undefined,
+    },
+};

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,120 @@
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {
+    type ChartRef,
+    Chart as GravityChart,
+    type ChartProps as GravityChartProps,
+} from '@gravity-ui/charts';
+import {ChevronsCollapseUpRight, ChevronsExpandUpRight, Ellipsis, Pencil} from '@gravity-ui/icons';
+import {Button, DropdownMenu, type DropdownMenuItem, Icon, Portal} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import i18n from './i18n';
+
+import './Chart.scss';
+
+const block = cn('qp-chart');
+
+export type ChartAction = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+};
+
+export type ChartProps = GravityChartProps & {
+    actions?: readonly ChartAction[];
+    onPencilEdit?: () => void;
+    controlsVisibility?: 'always' | 'hover';
+    className?: string;
+};
+
+export const Chart = React.forwardRef<ChartRef, ChartProps>(function ChartComponent(
+    {actions, onPencilEdit, controlsVisibility = 'always', className, ...chartProps},
+    ref,
+) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    const handleFullscreenToggle = useCallback(() => {
+        setIsFullscreen((value) => !value);
+    }, []);
+
+    const menuItems = useMemo(
+        () =>
+            actions?.map<DropdownMenuItem>(({text, icon, hidden, disabled, onClick}) => ({
+                text,
+                iconStart: icon,
+                hidden,
+                disabled,
+                action: onClick,
+            })),
+        [actions],
+    );
+    const hasVisibleActions = actions?.some(({hidden}) => !hidden) ?? false;
+    const fullscreenLabel = isFullscreen
+        ? i18n('action_exit-fullscreen')
+        : i18n('action_enter-fullscreen');
+
+    return (
+        <Portal container={containerRef.current?.ownerDocument.body} disablePortal={!isFullscreen}>
+            <div ref={containerRef} className={block({fullscreen: isFullscreen}, className)}>
+                <div className={block('controls', {visibility: controlsVisibility})}>
+                    <Button
+                        type="button"
+                        view="flat-secondary"
+                        size="s"
+                        aria-label={fullscreenLabel}
+                        title={fullscreenLabel}
+                        onClick={handleFullscreenToggle}
+                    >
+                        <Icon
+                            data={isFullscreen ? ChevronsCollapseUpRight : ChevronsExpandUpRight}
+                            size={16}
+                        />
+                    </Button>
+
+                    {onPencilEdit && (
+                        <Button
+                            type="button"
+                            view="flat-secondary"
+                            size="s"
+                            aria-label={i18n('action_edit-chart')}
+                            title={i18n('action_edit-chart')}
+                            onClick={onPencilEdit}
+                        >
+                            <Icon data={Pencil} size={16} />
+                        </Button>
+                    )}
+
+                    {hasVisibleActions && (
+                        <DropdownMenu
+                            items={menuItems}
+                            size="s"
+                            popupProps={{
+                                container: isFullscreen
+                                    ? containerRef.current?.ownerDocument.body
+                                    : undefined,
+                            }}
+                            renderSwitcher={(switcherProps) => (
+                                <Button
+                                    {...switcherProps}
+                                    type="button"
+                                    view="flat"
+                                    size="s"
+                                    aria-label={i18n('action_open-chart-menu')}
+                                    title={i18n('action_open-chart-menu')}
+                                    aria-haspopup="menu"
+                                >
+                                    <Icon data={Ellipsis} size={16} />
+                                </Button>
+                            )}
+                        />
+                    )}
+                </div>
+
+                <GravityChart {...chartProps} ref={ref} />
+            </div>
+        </Portal>
+    );
+});

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

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

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

@@ -0,0 +1,6 @@
+{
+  "action_enter-fullscreen": "Enter fullscreen",
+  "action_exit-fullscreen": "Exit fullscreen",
+  "action_edit-chart": "Edit chart",
+  "action_open-chart-menu": "Open chart menu"
+}

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

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

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

@@ -0,0 +1,6 @@
+{
+  "action_enter-fullscreen": "Развернуть на весь экран",
+  "action_exit-fullscreen": "Выйти из полноэкранного режима",
+  "action_edit-chart": "Редактировать график",
+  "action_open-chart-menu": "Открыть меню графика"
+}

package/src/components/Chart/index.ts

@@ -0,0 +1,2 @@
+export {Chart} from './Chart';
+export type {ChartAction, ChartProps} from './Chart';

package/src/components/ChartEditorForm/ChartEditorForm.scss

@@ -0,0 +1,20 @@
+.qp-chart-editor-form {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    overflow-y: auto;
+
+    &__title {
+        margin: 0;
+    }
+
+    &__fields {
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
+    &__actions {
+        margin-top: auto;
+    }
+}