@gravity-ui/querieskit 1.0.4 → 1.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Dashboard/Dashboard.scss

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

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

package/src/components/Dashboard/Dashboard.stories.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import {Chart, type ChartData} from '@gravity-ui/charts';
+import type {ConfigLayout} from '@gravity-ui/dashkit';
+import {Button, Flex, Text} from '@gravity-ui/uikit';
+import type {Meta, StoryObj} from '@storybook/react';
+import {action} from 'storybook/actions';
+
+import {Dashboard} from './Dashboard';
+import type {DashboardRenderItem} from './types';
+
+import './Dashboard.stories.scss';
+
+const errorsChart: ChartData = {
+    legend: {enabled: false},
+    xAxis: {type: 'linear'},
+    yAxis: [{type: 'linear', min: 0}],
+    series: {
+        data: [
+            {
+                type: 'line',
+                name: 'Errors',
+                data: [82, 76, 79, 68, 84, 61, 74, 44, 71, 59, 66, 63, 77, 72, 80, 75].map(
+                    (y, x) => ({x, y}),
+                ),
+            },
+        ],
+    },
+};
+
+const latencyChart: ChartData = {
+    legend: {enabled: false},
+    xAxis: {type: 'linear'},
+    yAxis: [{type: 'linear', min: 0}],
+    series: {
+        data: [
+            {
+                type: 'area',
+                name: 'Latency',
+                data: [42, 58, 47, 69, 52, 74, 63, 78, 68, 81, 73, 86, 79, 88, 83, 91].map(
+                    (y, x) => ({x, y}),
+                ),
+            },
+        ],
+    },
+};
+
+const baseItems: DashboardRenderItem[] = [
+    {id: 'errors', content: <Chart data={errorsChart} />},
+    {id: 'latency', content: <Chart data={latencyChart} />},
+    {
+        id: 'availability',
+        content: (
+            <Flex direction="column" gap={1}>
+                <Text variant="display-3">98.7%</Text>
+                <Text color="secondary">Availability during the last 24 hours</Text>
+            </Flex>
+        ),
+    },
+];
+
+const operationalItems: DashboardRenderItem[] = [
+    ...baseItems,
+    {
+        id: 'requests',
+        content: (
+            <Flex direction="column" gap={1}>
+                <Text variant="display-3">12.4k</Text>
+                <Text color="secondary">Requests per minute</Text>
+            </Flex>
+        ),
+    },
+];
+
+const balancedLayout: ConfigLayout[] = [
+    {i: 'errors', x: 0, y: 0, w: 2, h: 4},
+    {i: 'latency', x: 2, y: 0, w: 2, h: 4},
+    {i: 'availability', x: 0, y: 4, w: 2, h: 3},
+    {i: 'requests', x: 2, y: 4, w: 2, h: 3},
+];
+
+const overviewLayout: ConfigLayout[] = [
+    {i: 'errors', x: 0, y: 0, w: 4, h: 5},
+    {i: 'latency', x: 0, y: 5, w: 2, h: 4},
+    {i: 'availability', x: 2, y: 5, w: 1, h: 4},
+    {i: 'requests', x: 3, y: 5, w: 1, h: 4},
+];
+
+function StoryFrame({
+    title,
+    description,
+    actions,
+    children,
+    narrow = false,
+}: {
+    title: string;
+    description: string;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    narrow?: boolean;
+}) {
+    return (
+        <div className="qp-dashboard-story">
+            <Flex direction="column" gap={1} className="qp-dashboard-story__header">
+                <Flex alignItems="center" justifyContent="space-between" gap={4}>
+                    <Text variant="header-1">{title}</Text>
+                    {actions && <Flex gap={2}>{actions}</Flex>}
+                </Flex>
+                <Text color="secondary">{description}</Text>
+            </Flex>
+            <div
+                className={
+                    narrow
+                        ? 'qp-dashboard-story__dashboard qp-dashboard-story__dashboard_narrow'
+                        : 'qp-dashboard-story__dashboard'
+                }
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
+
+function DynamicItemsStory() {
+    const [items, setItems] = React.useState(baseItems);
+
+    const handleAddItem = () => {
+        setItems((currentItems) => {
+            const itemNumber = currentItems.length + 1;
+
+            return [
+                ...currentItems,
+                {
+                    id: `metric-${itemNumber}`,
+                    content: (
+                        <Flex direction="column" gap={1}>
+                            <Text variant="display-3">{itemNumber * 128}</Text>
+                            <Text color="secondary">Dynamically added metric #{itemNumber}</Text>
+                        </Flex>
+                    ),
+                },
+            ];
+        });
+    };
+
+    const handleRemoveItem = () => {
+        setItems((currentItems) => currentItems.slice(0, -1));
+    };
+
+    return (
+        <StoryFrame
+            title="Dynamic items"
+            description="Add and remove items: Dashboard creates layout entries for new stable ids automatically."
+            actions={
+                <>
+                    <Button onClick={handleAddItem}>Add metric</Button>
+                    <Button disabled={items.length === 0} onClick={handleRemoveItem}>
+                        Remove last
+                    </Button>
+                </>
+            }
+        >
+            <Dashboard items={items} onLayoutChange={action('onLayoutChange')} />
+        </StoryFrame>
+    );
+}
+
+function ControlledLayoutStory() {
+    const [layout, setLayout] = React.useState(balancedLayout);
+
+    return (
+        <StoryFrame
+            title="Controlled layout"
+            description="Switch presets, then drag or resize a card: every change is saved back to the controlled layout."
+            actions={
+                <>
+                    <Button
+                        selected={layout === balancedLayout}
+                        onClick={() => setLayout(balancedLayout)}
+                    >
+                        Balanced
+                    </Button>
+                    <Button
+                        selected={layout === overviewLayout}
+                        onClick={() => setLayout(overviewLayout)}
+                    >
+                        Overview
+                    </Button>
+                </>
+            }
+        >
+            <Dashboard
+                items={operationalItems}
+                defaultLayout={layout}
+                onLayoutChange={(nextLayout) => {
+                    setLayout(nextLayout);
+                    action('onLayoutChange')(nextLayout);
+                }}
+            />
+        </StoryFrame>
+    );
+}
+
+function NarrowGridStory() {
+    return (
+        <StoryFrame
+            narrow
+            title="Custom grid"
+            description="A one-column grid with custom row height and gap fits the same items into a narrow container."
+        >
+            <Dashboard
+                items={baseItems}
+                grid={{cols: 1, rowHeight: 56, gap: 12, compactType: 'vertical'}}
+                onLayoutChange={action('onLayoutChange')}
+            />
+        </StoryFrame>
+    );
+}
+
+const meta: Meta<typeof Dashboard> = {
+    title: 'Components/Dashboard',
+    component: Dashboard,
+    tags: ['autodocs'],
+    parameters: {layout: 'fullscreen'},
+};
+
+export default meta;
+type Story = StoryObj<typeof Dashboard>;
+
+/** A draggable and resizable dashboard with charts and arbitrary React content. */
+export const Default: Story = {
+    render: () => (
+        <StoryFrame
+            title="Service overview"
+            description="Drag cards by the handle or resize them from the corner to rearrange the dashboard."
+        >
+            <Dashboard items={baseItems} onLayoutChange={action('onLayoutChange')} />
+        </StoryFrame>
+    ),
+};
+
+/** Dashboard manages a default layout and creates positions for items added at runtime. */
+export const DynamicItems: Story = {render: () => <DynamicItemsStory />};
+
+/** The layout can be fully controlled, persisted and replaced with a preset. */
+export const ControlledLayout: Story = {render: () => <ControlledLayoutStory />};
+
+/** Grid columns, row height, gaps and compaction can be adapted to the host container. */
+export const CustomGrid: Story = {render: () => <NarrowGridStory />};