@gravity-ui/querieskit 1.0.3 → 1.1.0

package/src/components/Dashboard/Dashboard.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+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',
+    },
+};

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import BaseDataTable, {
+    DataTableProps as BaseDataTableProps,
+    Column,
+} from '@gravity-ui/react-data-table';
+import cn from 'bem-cn-lite';
+
+import {EmptyContent, EmptyContentVariant} from '../EmptyContent';
+
+import './DataTable.scss';
+
+export type {Column};
+
+const block = cn('qp-data-table');
+
+const SKELETON_ROWS_COUNT = 4;
+
+export type DataTableProps<T> = {
+    loading?: boolean;
+    loaded?: boolean;
+    className?: string;
+    emptyVariant?: EmptyContentVariant;
+} & Omit<BaseDataTableProps<T>, 'theme'>;
+
+function renderEmptyCell(key: string, align?: Column<unknown>['align']) {
+    return (
+        <td key={key} className={block('td', {empty: true})}>
+            <div className={block('content', {empty: true, align})}>
+                <div className={block('no-data-placeholder')} />
+            </div>
+        </td>
+    );
+}
+
+function renderLoadingSkeleton<T>(columns: Array<Column<T>>, displayIndices: boolean) {
+    return Array.from({length: SKELETON_ROWS_COUNT}, (_, index) => (
+        <tr key={index} className={block('tr', {empty: true})}>
+            {displayIndices && renderEmptyCell('__index')}
+            {columns.map((column) => renderEmptyCell(column.name, column.align))}
+        </tr>
+    ));
+}
+
+export function DataTable<T>(props: DataTableProps<T>) {
+    const {
+        loading,
+        loaded,
+        className,
+        emptyVariant = 'no-data',
+        columns,
+        data,
+        settings,
+        ...rest
+    } = props;
+
+    const isEmpty = loaded && data.length === 0;
+    const displayIndices = settings?.displayIndices !== false;
+
+    const renderEmptyRow = () => {
+        if (loading && !loaded) {
+            return renderLoadingSkeleton(columns, displayIndices);
+        }
+
+        return null;
+    };
+
+    return (
+        <div className={block(null, className)}>
+            <BaseDataTable
+                {...rest}
+                columns={columns}
+                data={data}
+                settings={settings}
+                theme="yandex-cloud"
+                emptyDataMessage=""
+                renderEmptyRow={renderEmptyRow}
+            />
+            {isEmpty && <EmptyContent variant={emptyVariant} className={block('empty')} />}
+        </div>
+    );
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1 @@
+export {DataTable, type DataTableProps, type Column} from './DataTable';

package/src/components/EmptyContent/EmptyContent.scss

@@ -0,0 +1,3 @@
+.qp-empty-content {
+  height: 100%;
+}

package/src/components/EmptyContent/EmptyContent.tsx

@@ -0,0 +1,57 @@
+import React, {FC} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {Folder, NoSearchResults} from '@gravity-ui/illustrations';
+import cn from 'bem-cn-lite';
+import i18n from './i18n';
+import './EmptyContent.scss';
+
+const block = cn('qp-empty-content');
+
+export type EmptyContentVariant = 'no-files' | 'no-clusters' | 'nothing-found' | 'no-data';
+
+export type EmptyContentProps = {
+    variant: EmptyContentVariant;
+    className?: string;
+};
+
+type EmptyContentConfig = {
+    icon: FC<{height?: number}>;
+    title: string;
+    description?: string;
+};
+
+const CONTENT_BY_VARIANT: Record<EmptyContentVariant, EmptyContentConfig> = {
+    'no-files': {
+        icon: Folder,
+        title: i18n('title_no-files'),
+    },
+    'no-clusters': {
+        icon: Folder,
+        title: i18n('title_no-clusters'),
+    },
+    'nothing-found': {
+        icon: NoSearchResults,
+        title: i18n('title_nothing-found'),
+        description: i18n('context_try-change-filters'),
+    },
+    'no-data': {
+        icon: Folder,
+        title: i18n('title_no-data'),
+    },
+};
+
+export const EmptyContent: FC<EmptyContentProps> = ({variant, className}) => {
+    const {icon: Icon, title, description} = CONTENT_BY_VARIANT[variant];
+
+    return (
+        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
+            <Flex direction="column" gap={5}>
+                <Icon height={100} />
+                <Flex direction="column" alignItems="center" gap={1}>
+                    <Text variant="subheader-1">{title}</Text>
+                    {description && <Text>{description}</Text>}
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+};

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

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

package/{build/esm/components/HistoryListEmpty → src/components/EmptyContent}/i18n/en.json

@@ -1,4 +1,7 @@
 {
     "title_nothing-found": "Nothing found",
+    "title_no-files": "No files",
+    "title_no-clusters": "No clusters",
+    "title_no-data": "No data",
     "context_try-change-filters": "Try to change filters"
 }

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

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

package/src/components/{HistoryListEmpty → EmptyContent}/i18n/ru.json

@@ -1,4 +1,7 @@
 {
     "title_nothing-found": "Ничего не найдено",
+    "title_no-files": "Нет файлов",
+    "title_no-clusters": "Нет кластеров",
+    "title_no-data": "Нет данных",
     "context_try-change-filters": "Попробуйте изменить фильтры"
 }

package/src/components/EmptyContent/index.ts

@@ -0,0 +1 @@
+export {EmptyContent, type EmptyContentProps, type EmptyContentVariant} from './EmptyContent';

package/src/components/FieldsSearchToolbar/FieldsSearchToolbar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {FieldsSelector, type FieldsSelectorOption} from '../FieldsSelector';
+import {SearchWithButtons} from '../SearchWithButtons';
+
+export type FieldsSearchToolbarProps<K extends string = string> = {
+    search?: string;
+    onSearchUpdate?: (value: string) => void;
+    searchPlaceholder?: string;
+    fields: FieldsSelectorOption<K>[];
+    visibleFields: K[];
+    onVisibleFieldsChange: (value: K[]) => void;
+    hideFieldsSelector?: boolean;
+    className?: string;
+};
+
+export function FieldsSearchToolbar<K extends string = string>({
+    search,
+    onSearchUpdate,
+    searchPlaceholder,
+    fields,
+    visibleFields,
+    onVisibleFieldsChange,
+    hideFieldsSelector,
+    className,
+}: FieldsSearchToolbarProps<K>) {
+    const showFieldsSelector = !hideFieldsSelector && fields.length > 0;
+
+    return (
+        <SearchWithButtons
+            value={search}
+            placeholder={searchPlaceholder}
+            onUpdate={onSearchUpdate}
+            className={className}
+            endButtons={
+                showFieldsSelector
+                    ? [
+                          <FieldsSelector<K>
+                              key="fields-selector"
+                              fields={fields}
+                              value={visibleFields}
+                              onChange={onVisibleFieldsChange}
+                          />,
+                      ]
+                    : undefined
+            }
+        />
+    );
+}

package/src/components/FieldsSearchToolbar/index.ts

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

package/src/components/FieldsSelector/index.ts

@@ -1 +1,2 @@
 export {FieldsSelector} from './FieldsSelector';
+export type {FieldsSelectorOption, FieldsSelectorProps} from './FieldsSelector';

package/src/components/LazyList/LazyList.scss

@@ -0,0 +1,13 @@
+.qp-lazy-list {
+  .g-list__item_selected:hover {
+    background-color: var(--g-color-base-selection-hover);
+  }
+}
+
+.qp-lazy-list__sentinel {
+  height: 1px;
+}
+
+.qp-lazy-list__spinner {
+  height: 100%;
+}