@gravity-ui/querieskit 1.2.0 → 1.3.1

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

@@ -1,248 +0,0 @@
-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 />};

package/src/components/Dashboard/Dashboard.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import type {Config} from '@gravity-ui/dashkit';
-import type {DashboardProps} from './types';
-import {Flex} from '@gravity-ui/uikit';
-import {DRAG_HANDLE_CLASSNAME, DashPlate} from './internal/DashPlate';
-import {DashboardProvider} from './internal/DashboardProvider';
-import {DashKit} from '@gravity-ui/dashkit';
-import {useDashboardConfig} from './hooks/useDashboardConfig';
-import cn from 'bem-cn-lite';
-
-import './Dashboard.scss';
-
-const block = cn('qp-dashboard');
-const DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';
-
-DashKit.reloadPlugins({
-    type: DASHBOARD_PLUGIN_TYPE,
-    renderer: DashPlate,
-    defaultLayout: {minW: 1, minH: 1},
-});
-
-export const Dashboard = ({
-    items,
-    defaultLayout,
-    grid: customerGridState,
-    focusable = false,
-    className,
-    onLayoutChange,
-}: DashboardProps) => {
-    const {config, gridGroups} = useDashboardConfig(items, customerGridState, defaultLayout);
-
-    const handleChange = ({config: nextConfig}: {config: Config}) => {
-        onLayoutChange?.(nextConfig.layout);
-    };
-
-    return (
-        <Flex width="100%" height="100%" className={block(null, className)}>
-            <DashboardProvider items={items}>
-                <DashKit
-                    config={config}
-                    groups={gridGroups}
-                    editMode
-                    noOverlay
-                    draggableHandleClassName={DRAG_HANDLE_CLASSNAME}
-                    focusable={focusable}
-                    onChange={handleChange}
-                />
-            </DashboardProvider>
-        </Flex>
-    );
-};

package/src/components/Dashboard/helpers/createDefaultLayout.ts

@@ -1,43 +0,0 @@
-import type {DashboardRenderItem} from '../types';
-import type {ConfigLayout} from '@gravity-ui/dashkit';
-
-const DEFAULT_ITEM_HEIGHT = 4;
-
-export const createDefaultLayout = (
-    items: DashboardRenderItem[],
-    columns: number,
-): ConfigLayout[] => {
-    const itemCount = items.length;
-
-    const width = Math.min(Math.ceil(columns / 2), columns);
-    const height = DEFAULT_ITEM_HEIGHT;
-
-    const itemsPerRow = Math.max(Math.floor(columns / width), 1);
-
-    return Array.from({length: itemCount}, (_, index) => ({
-        i: items[index].id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: height,
-    }));
-};
-
-export const createDefaultLayoutForItem = (
-    item: DashboardRenderItem,
-    columns: number,
-    index: number,
-) => {
-    const width = Math.min(Math.ceil(columns / 2), columns);
-    const height = DEFAULT_ITEM_HEIGHT;
-
-    const itemsPerRow = Math.max(Math.floor(columns / width), 1);
-
-    return {
-        i: item.id,
-        x: (index % itemsPerRow) * width,
-        y: Math.floor(index / itemsPerRow) * height,
-        w: width,
-        h: DEFAULT_ITEM_HEIGHT,
-    };
-};

package/src/components/Dashboard/hooks/useDashboardConfig.ts

@@ -1,63 +0,0 @@
-import {useMemo} from 'react';
-import {createDefaultLayout} from '../helpers/createDefaultLayout';
-import type {DashboardProps, DashboardRenderItem} from '../types';
-import type {Config, ConfigLayout, DashKitGroup, ReactGridLayoutProps} from '@gravity-ui/dashkit';
-
-export const DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';
-
-export const DEFAULT_COLUMNS = 4;
-
-export const DEFAULT_GRID: DashboardProps['grid'] = {
-    cols: DEFAULT_COLUMNS,
-    rowHeight: 64,
-    gap: 8,
-    compactType: 'vertical',
-};
-
-export const useDashboardConfig = (
-    items: DashboardRenderItem[],
-    customerGridState?: ReactGridLayoutProps,
-    defaultLayout?: ConfigLayout[],
-) => {
-    const gridProps: ReactGridLayoutProps = useMemo(() => {
-        const gap = customerGridState?.gap ?? DEFAULT_GRID.gap;
-
-        return {
-            containerPadding: [0, 0],
-            margin: typeof gap === 'number' ? [gap, gap] : gap,
-            ...DEFAULT_GRID,
-            ...customerGridState,
-        };
-    }, [customerGridState]);
-
-    const gridGroups = useMemo<DashKitGroup[]>(
-        () => [{gridProperties: () => gridProps}],
-        [gridProps],
-    );
-
-    const cols = gridProps.cols;
-
-    const layout = useMemo(
-        () => defaultLayout ?? createDefaultLayout(items, cols),
-        [defaultLayout, items, cols],
-    );
-
-    const config: Config = useMemo(
-        () => ({
-            salt: 'querieskit-dashboard',
-            counter: 0,
-            aliases: {},
-            connections: [],
-            items: items.map(({id}) => ({
-                id,
-                type: DASHBOARD_PLUGIN_TYPE,
-                namespace: 'default',
-                data: {},
-            })),
-            layout,
-        }),
-        [layout, items],
-    );
-
-    return {config, gridGroups};
-};

package/src/components/Dashboard/index.ts

@@ -1,2 +0,0 @@
-export {Dashboard} from './Dashboard';
-export type {DashboardItemAppearance, DashboardProps} from './types';

package/src/components/Dashboard/internal/DashPlate.scss

@@ -1,23 +0,0 @@
-.qp-dashplate {
-    &__item {
-        background: var(--g-color-base-background);
-        border: 1px solid var(--g-color-line-generic);
-        border-radius: var(--g-border-radius-m);
-    }
-
-    &__drag-icon {
-        position: absolute;
-        z-index: 1;
-        inset: 0 0 auto;
-        width: 100%;
-        color: var(--g-color-text-secondary);
-        text-align: center;
-        cursor: grab;
-        opacity: 0;
-    }
-
-    &__item:hover &__drag-icon,
-    &__item:focus-within &__drag-icon {
-        opacity: 1;
-    }
-}

package/src/components/Dashboard/internal/DashPlate.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import {GripHorizontal} from '@gravity-ui/icons';
-import {Flex, Icon} from '@gravity-ui/uikit';
-import type {PluginWidgetProps} from '@gravity-ui/dashkit';
-import {useDashboardContext} from './DashboardProvider';
-import cn from 'bem-cn-lite';
-import './DashPlate.scss';
-
-const block = cn('qp-dashplate');
-
-export const DRAG_HANDLE_CLASSNAME = 'DRAG_HANDLE_CLASSNAME';
-
-export const DashPlate = ({id}: PluginWidgetProps) => {
-    const {getItem} = useDashboardContext();
-    const item = getItem(id);
-
-    if (!item) return null;
-
-    return (
-        <Flex
-            direction="column"
-            position="relative"
-            width="100%"
-            height="100%"
-            overflow="hidden"
-            spacing={{p: 4}}
-            className={block('item')}
-        >
-            <Icon data={GripHorizontal} className={block('drag-icon', DRAG_HANDLE_CLASSNAME)} />
-            <Flex width="100%" height="100%" overflow="hidden" className={block('content')}>
-                {item.content}
-            </Flex>
-        </Flex>
-    );
-};

package/src/components/Dashboard/internal/DashboardProvider.tsx

@@ -1,37 +0,0 @@
-import React, {createContext, useContext, useMemo} from 'react';
-import type {DashboardRenderItem} from '../types';
-
-type DashboardContextValue = {
-    items: DashboardRenderItem[];
-    getItem: (id: string) => DashboardRenderItem | undefined;
-};
-
-const DashboardContext = createContext<DashboardContextValue | null>(null);
-
-type DashboardProviderProps = {
-    items: DashboardRenderItem[];
-    children: React.ReactNode;
-};
-
-export const DashboardProvider = ({items, children}: DashboardProviderProps) => {
-    const contextValue = useMemo<DashboardContextValue>(() => {
-        const itemsById = new Map(items.map((item) => [item.id, item]));
-
-        return {
-            items,
-            getItem: (id: string) => itemsById.get(id),
-        };
-    }, [items]);
-
-    return <DashboardContext.Provider value={contextValue}>{children}</DashboardContext.Provider>;
-};
-
-export const useDashboardContext = () => {
-    const context = useContext(DashboardContext);
-
-    if (!context) {
-        throw new Error('useDashboardContext must be used within a DashboardProvider');
-    }
-
-    return context;
-};

package/src/components/Dashboard/types.ts

@@ -1,21 +0,0 @@
-import type {ReactNode} from 'react';
-import type {ConfigLayout, ReactGridLayoutProps} from '@gravity-ui/dashkit';
-
-export type DashboardItemAppearance = 'card' | 'plain';
-
-export type DashboardRenderItem = {
-    id: string;
-    content: ReactNode;
-};
-
-export type DashboardProps = {
-    items: DashboardRenderItem[];
-    defaultLayout?: ConfigLayout[];
-    grid?: ReactGridLayoutProps;
-    focusable?: boolean;
-    className?: string;
-
-    onLayoutChange?: (layout: ConfigLayout[]) => void;
-    onItemFocus?: (item: ReactNode, index: number) => void;
-    onItemBlur?: (item: ReactNode, index: number) => void;
-};

package/src/components/DataTable/DataTable.scss

@@ -1,35 +0,0 @@
-.qp-data-table {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &__empty {
-    flex: 1;
-  }
-
-  &__tr_empty {
-    .qp-data-table__td_empty {
-      border-bottom: 1px solid var(--g-color-line-generic);
-    }
-  }
-
-  &__content_empty {
-    display: flex;
-
-    &.qp-data-table__content_align_right {
-      justify-content: flex-end;
-    }
-
-    &.qp-data-table__content_align_center {
-      justify-content: center;
-    }
-  }
-
-  &__no-data-placeholder {
-    width: 100%;
-    max-width: 120px;
-    height: var(--g-text-body-1-line-height);
-    border-radius: 4px;
-    background-color: var(--g-color-base-generic);
-  }
-}

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,65 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {DataTable} from './DataTable';
-import type {Column} from './DataTable';
-
-type Row = {
-    id: number;
-    name: string;
-    status: string;
-    size: number;
-};
-
-const columns: Array<Column<Row>> = [
-    {name: 'id', header: 'ID', width: 60},
-    {name: 'name', header: 'Name'},
-    {name: 'status', header: 'Status'},
-    {name: 'size', header: 'Size', align: 'right'},
-];
-
-const data: Row[] = [
-    {id: 1, name: 'orders.csv', status: 'ready', size: 1024},
-    {id: 2, name: 'users.json', status: 'ready', size: 2048},
-    {id: 3, name: 'events.parquet', status: 'processing', size: 4096},
-];
-
-const meta: Meta<typeof DataTable> = {
-    title: 'Components/DataTable',
-    component: DataTable,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTable<Row>>;
-
-export const Default: Story = {
-    args: {
-        columns,
-        data,
-        loaded: true,
-    },
-};
-
-export const Loading: Story = {
-    args: {
-        columns,
-        data: [],
-        loading: true,
-    },
-};
-
-export const Empty: Story = {
-    args: {
-        columns,
-        data: [],
-        loaded: true,
-    },
-};
-
-export const EmptyNothingFound: Story = {
-    args: {
-        columns,
-        data: [],
-        loaded: true,
-        emptyVariant: 'nothing-found',
-    },
-};