@gravity-ui/querieskit 1.2.0 → 1.3.1

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

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

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

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

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

@@ -1,6 +0,0 @@
-{
-  "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

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

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

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

package/src/components/Chart/index.ts

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

package/src/components/ChartEditorForm/ChartEditorForm.scss

@@ -1,20 +0,0 @@
-.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;
-    }
-}

package/src/components/ChartEditorForm/ChartEditorForm.stories.tsx

@@ -1,88 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import type {ChartEditorFormValues} from './types';
-import {ChartEditorForm} from './ChartEditorForm';
-
-const meta: Meta<typeof ChartEditorForm> = {
-    title: 'Components/ChartEditorForm',
-    component: ChartEditorForm,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof ChartEditorForm>;
-
-const DefaultChartEditor = () => {
-    const [formValues, setFormValues] = useState({});
-
-    return (
-        <ChartEditorForm
-            axisVariants={['category', 'datetime', 'linear', 'logarithmic']}
-            formValues={formValues}
-            onFormValuesChange={setFormValues}
-        />
-    );
-};
-
-export const Default: Story = {
-    render: () => <DefaultChartEditor />,
-};
-
-const DefaultValuesChartEditor = () => {
-    const [formValues, setFormValues] = useState<ChartEditorFormValues>({
-        xTitle: 'Time',
-        yTitle: 'Count',
-        showLegend: true,
-        axisType: 'category',
-    });
-
-    return (
-        <ChartEditorForm
-            axisVariants={['category', 'datetime', 'linear', 'logarithmic']}
-            formValues={formValues}
-            onFormValuesChange={setFormValues}
-        />
-    );
-};
-
-export const WithFilledValues: Story = {
-    render: () => <DefaultValuesChartEditor />,
-};
-
-export const CustomLabels: Story = {
-    render: () => (
-        <ChartEditorForm
-            formValues={{}}
-            labels={{
-                formTitle: 'Add line chart',
-                data: 'Chart type',
-                x: 'X axis field',
-                axisType: 'X axis scale',
-                chartTitle: 'Title',
-                xTitle: 'X label',
-                yTitle: 'Y label',
-                showLegend: 'Display legend',
-                cancelLabel: 'Discard',
-                submitLabel: 'Save chart',
-            }}
-        />
-    ),
-};
-
-export const Disabled: Story = {
-    render: () => (
-        <ChartEditorForm
-            disabled
-            formValues={{
-                axisType: 'linear',
-                chartTitle: 'Disabled chart',
-                xTitle: 'X',
-                yTitle: 'Y',
-                showLegend: true,
-            }}
-        />
-    ),
-};

package/src/components/ChartEditorForm/ChartEditorForm.tsx

@@ -1,120 +0,0 @@
-import React, {useMemo} from 'react';
-import type {ChartEditorFormProps, ChartEditorFormValues} from './types';
-import {Button, Flex, Select, Switch, Text, TextInput} from '@gravity-ui/uikit';
-import {Field} from './internal/Field';
-import {resolveLabels} from './helpers/resolveLabels';
-import {ChartAxisType} from '@gravity-ui/charts';
-import cn from 'bem-cn-lite';
-import './ChartEditorForm.scss';
-
-const block = cn('qp-chart-editor-form');
-
-export function ChartEditorForm({
-    dataIds,
-    axisVariants,
-    labels,
-    className,
-    formValues,
-    onFormValuesChange,
-    disabled,
-    onCancel,
-    onSubmit,
-}: ChartEditorFormProps) {
-    const updateFormValues = (patch: Partial<ChartEditorFormValues>) => {
-        onFormValuesChange?.({...formValues, ...patch});
-    };
-
-    const axisOptions = useMemo(
-        () => axisVariants?.map((axisType) => ({value: axisType, children: axisType})),
-        [axisVariants],
-    );
-
-    const dataIdsOptions = useMemo(
-        () => dataIds?.map((dataId) => ({value: dataId, children: dataId})),
-        [dataIds],
-    );
-
-    const resolvedLables = resolveLabels(labels);
-
-    const needShowDataIdsSelector = dataIdsOptions?.length && dataIdsOptions?.length > 1;
-
-    return (
-        <Flex as="aside" direction="column" gap={3} className={block(null, className)}>
-            <Text as="h2" variant="subheader-2" className={block('title')}>
-                {resolvedLables.formTitle}
-            </Text>
-
-            <Flex direction="column" gap={3} className={block('fields')}>
-                {needShowDataIdsSelector && (
-                    <Field label={resolvedLables.data}>
-                        <Select
-                            multiple
-                            aria-label={resolvedLables.data}
-                            options={dataIdsOptions}
-                            value={formValues.dataIds}
-                            onUpdate={(pathDataIds) => updateFormValues({dataIds: pathDataIds})}
-                            disabled={disabled}
-                            width="max"
-                        />
-                    </Field>
-                )}
-
-                <Field label={resolvedLables.axisType}>
-                    <Select<ChartAxisType>
-                        aria-label={resolvedLables.axisType}
-                        options={axisOptions}
-                        value={formValues.axisType ? [formValues.axisType] : []}
-                        onUpdate={(axisType) =>
-                            updateFormValues({axisType: axisType[0] as ChartAxisType})
-                        }
-                        disabled={disabled}
-                        width="max"
-                    />
-                </Field>
-
-                <Field label={resolvedLables.chartTitle}>
-                    <TextInput
-                        aria-label={resolvedLables.chartTitle}
-                        value={formValues.chartTitle}
-                        onUpdate={(chartTitle) => updateFormValues({chartTitle})}
-                        disabled={disabled}
-                    />
-                </Field>
-
-                <Field label={resolvedLables.xTitle}>
-                    <TextInput
-                        aria-label={resolvedLables.xTitle}
-                        value={formValues.xTitle}
-                        onUpdate={(xTitle) => updateFormValues({xTitle})}
-                        disabled={disabled}
-                    />
-                </Field>
-
-                <Field label={resolvedLables.yTitle}>
-                    <TextInput
-                        aria-label={resolvedLables.yTitle}
-                        value={formValues.yTitle}
-                        onUpdate={(yTitle) => updateFormValues({yTitle})}
-                        disabled={disabled}
-                    />
-                </Field>
-
-                <Switch
-                    checked={Boolean(formValues.showLegend)}
-                    onUpdate={(showLegend) => updateFormValues({showLegend})}
-                    disabled={disabled}
-                    content={resolvedLables.showLegend}
-                />
-            </Flex>
-
-            <Flex gap={2} justifyContent="flex-end" className={block('actions')}>
-                <Button view="flat" onClick={onCancel} disabled={disabled}>
-                    {resolvedLables.cancel}
-                </Button>
-                <Button view="action" onClick={onSubmit} disabled={disabled}>
-                    {resolvedLables.submit}
-                </Button>
-            </Flex>
-        </Flex>
-    );
-}

package/src/components/ChartEditorForm/helpers/resolveLabels.ts

@@ -1,17 +0,0 @@
-import i18n from '../i18n';
-import type {ChartEditorLabels} from '../types';
-
-export const resolveLabels = (labels: ChartEditorLabels = {}) => {
-    return {
-        data: labels.data ?? i18n('field_data'),
-        x: labels.x ?? i18n('field_x'),
-        axisType: labels.axisType ?? i18n('field_axis-type'),
-        chartTitle: labels.chartTitle ?? i18n('field_chart-title'),
-        xTitle: labels.xTitle ?? i18n('field_x-title'),
-        yTitle: labels.yTitle ?? i18n('field_y-title'),
-        showLegend: labels.showLegend ?? i18n('field_show-legend'),
-        formTitle: labels.formTitle ?? i18n('title_form'),
-        cancel: labels.cancelLabel ?? i18n('button_cancel'),
-        submit: labels.submitLabel ?? i18n('button_submit'),
-    };
-};

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

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

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

@@ -1,12 +0,0 @@
-{
-  "title_form": "Add chart",
-  "field_data": "Data",
-  "field_x": "X",
-  "field_axis-type": "Axis type",
-  "field_chart-title": "Chart title",
-  "field_x-title": "X title",
-  "field_y-title": "Y title",
-  "field_show-legend": "Show legend",
-  "button_cancel": "Cancel",
-  "button_submit": "Add chart"
-}

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

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

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

@@ -1,12 +0,0 @@
-{
-  "title_form": "Добавить график",
-  "field_data": "Данные",
-  "field_x": "X",
-  "field_axis-type": "Тип оси",
-  "field_chart-title": "Заголовок графика",
-  "field_x-title": "Заголовок X",
-  "field_y-title": "Заголовок Y",
-  "field_show-legend": "Показывать легенду",
-  "button_cancel": "Отменить",
-  "button_submit": "Добавить график"
-}

package/src/components/ChartEditorForm/index.ts

@@ -1,7 +0,0 @@
-export {ChartEditorForm} from './ChartEditorForm';
-export type {
-    ChartEditorFormProps,
-    ChartEditorFormValues,
-    ChartEditorLabels,
-    ChartEditorOption,
-} from './types';

package/src/components/ChartEditorForm/internal/Field.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-
-export const Field = ({label, children}: {label: React.ReactNode; children: React.ReactNode}) => (
-    <Flex direction="column" gap={1}>
-        <Text variant="body-1" color="secondary">
-            {label}
-        </Text>
-        {children}
-    </Flex>
-);

package/src/components/ChartEditorForm/types.ts

@@ -1,44 +0,0 @@
-import type {ReactNode} from 'react';
-import type {ChartAxisType} from '@gravity-ui/charts';
-
-export type ChartEditorOption<TValue extends string = string> = {
-    value: TValue;
-    content: ReactNode;
-    disabled?: boolean;
-};
-
-export type ChartEditorFormValues = Partial<{
-    dataIds: string[];
-    axisType: ChartAxisType;
-    axisCategories: string[];
-    chartTitle: string;
-    xTitle: string;
-    yTitle: string;
-    showLegend: boolean;
-}>;
-
-export type ChartEditorLabels = Partial<{
-    formTitle: string;
-    data: string;
-    x: string;
-    axisType: string;
-    chartTitle: string;
-    xTitle: string;
-    yTitle: string;
-    showLegend: string;
-    empty: string;
-    cancelLabel: string;
-    submitLabel: string;
-}>;
-
-export type ChartEditorFormProps = {
-    dataIds?: string[];
-    axisVariants?: ChartAxisType[];
-    formValues: ChartEditorFormValues;
-    labels?: ChartEditorLabels;
-    disabled?: boolean;
-    className?: string;
-    onFormValuesChange?: (values: ChartEditorFormValues) => void;
-    onCancel?: () => void;
-    onSubmit?: () => void;
-};

package/src/components/ClusterRow/ClusterRow.tsx

@@ -1,34 +0,0 @@
-import React, {FC} from 'react';
-import {Avatar, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {NavigationCluster} from '../../types/navigation';
-
-const block = cn('qp-cluster-row');
-
-export type ClusterRowProps = {
-    cluster: NavigationCluster;
-};
-
-export const ClusterRow: FC<ClusterRowProps> = ({
-    cluster: {icon, title, color, backgroundColor, description},
-}) => {
-    return (
-        <Flex gap={2} alignItems="center" className={block()}>
-            {icon ?? (
-                <Avatar
-                    text={title}
-                    shape="square"
-                    size="2xs"
-                    backgroundColor={backgroundColor}
-                    color={color}
-                />
-            )}
-            <Text className={block('title')} ellipsis>
-                {title}
-            </Text>
-            <Text color="secondary" ellipsis>
-                {description}
-            </Text>
-        </Flex>
-    );
-};

package/src/components/ClusterRow/index.ts

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

package/src/components/Dashboard/Dashboard.scss

@@ -1,4 +0,0 @@
-.qp-dashboard {
-    --dashkit-grid-item-border-radius: var(--g-border-radius-m);
-    --dashkit-placeholder-color: var(--g-color-base-brand);
-}

package/src/components/Dashboard/Dashboard.stories.scss

@@ -1,18 +0,0 @@
-.qp-dashboard-story {
-    min-height: 100vh;
-    box-sizing: border-box;
-    padding: var(--g-spacing-4);
-    background: var(--g-color-base-background);
-
-    &__header {
-        margin-bottom: var(--g-spacing-4);
-    }
-
-    &__dashboard {
-        width: 100%;
-
-        &_narrow {
-            max-width: 520px;
-        }
-    }
-}