@gravity-ui/querieskit 1.0.4 → 1.2.0

package/src/modules/HistoryList/HistoryList.stories.tsx

@@ -1,181 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {HistoryList} from './HistoryList';
-import {QueryHistoryItem, QueryHistoryRow} from '../../types/history';
-
-const now = Date.now();
-const min = 60 * 1000;
-
-const ITEMS: QueryHistoryItem<QueryHistoryRow>[] = [
-    {header: 'Today', height: 28},
-    {
-        id: 1,
-        title: 'Query 1',
-        status: 'completed',
-        engine: 'YQL',
-        startTime: now - 2 * min,
-        endTime: now - min,
-        height: 52,
-    },
-    {
-        id: 2,
-        title: 'Query 2',
-        status: 'failed',
-        engine: 'YQL',
-        startTime: now - 10 * min,
-        endTime: now - 9 * min,
-        height: 52,
-    },
-    {
-        id: 3,
-        title: 'Query 3',
-        status: 'running',
-        engine: 'YQL',
-        startTime: now - min,
-        height: 52,
-    },
-    {header: 'Yesterday', height: 28},
-    {
-        id: 4,
-        title: 'Query 4',
-        status: 'aborted',
-        engine: 'YQL',
-        startTime: now - 25 * 60 * min,
-        endTime: now - 24 * 60 * min,
-        height: 52,
-    },
-    {
-        id: 5,
-        title: 'Query 5',
-        status: 'draft',
-        engine: 'YQL',
-        startTime: now - 30 * 60 * min,
-        height: 52,
-    },
-];
-
-const meta: Meta<typeof HistoryList> = {
-    title: 'Modules/HistoryList',
-    component: HistoryList,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 420, height: 480}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof HistoryList>;
-
-/** Basic list with groups and all statuses */
-export const Default: Story = {
-    args: {
-        items: ITEMS,
-    },
-};
-
-/** Empty list */
-export const Empty: Story = {
-    args: {
-        items: [],
-    },
-};
-
-/** With row actions (visible on hover) */
-export const WithActions: Story = {
-    args: {
-        items: ITEMS,
-        getRowActions: (_item) => [
-            {text: 'Run again', onClick: (row) => alert(`Run: ${row.title}`)},
-            {text: 'Copy', onClick: (row) => alert(`Copy: ${row.title}`)},
-            {text: 'Delete', onClick: (row) => alert(`Delete: ${row.title}`)},
-        ],
-    },
-};
-
-/** Interactive row comparison mode */
-const WithComparisonStory = () => {
-    const [comparedRowIds, setComparedRowIds] = useState<number[]>([2]);
-
-    const handleChange = (item: QueryHistoryRow, selected: boolean) => {
-        setComparedRowIds((prev) =>
-            selected ? [...prev, item.id] : prev.filter((id) => id !== item.id),
-        );
-    };
-
-    return (
-        <div style={{width: 420, height: 480}}>
-            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
-                Compared ids: {comparedRowIds.join(', ') || 'none'}
-            </div>
-            <HistoryList
-                items={ITEMS}
-                comparison={{
-                    enabled: true,
-                    comparedRowIds,
-                    onChange: handleChange,
-                    onCancel: () => setComparedRowIds([]),
-                    onCompare: () => alert(`Compare: ${comparedRowIds.join(', ')}`),
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithComparison: Story = {render: () => <WithComparisonStory />};
-
-/** Row highlighted via selectedRowId */
-const WithSelectedRowStory = () => {
-    const [selectedRowId, setSelectedRowId] = useState<number | undefined>(1);
-
-    return (
-        <div style={{width: 420, height: 480}}>
-            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
-                Selected row id: {selectedRowId ?? 'none'}
-            </div>
-            <HistoryList
-                items={ITEMS}
-                selectedRowId={selectedRowId}
-                onItemClick={(item, index) => {
-                    if (!('header' in item)) {
-                        setSelectedRowId(index);
-                    }
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithSelectedRow: Story = {render: () => <WithSelectedRowStory />};
-
-/** Interactive row title editing mode */
-const WithEditingStory = () => {
-    const [editingRowId, setEditingRowId] = useState<number | undefined>(1);
-
-    return (
-        <div style={{width: 420, height: 480}}>
-            <div style={{marginBottom: 8, fontSize: 12, color: '#888'}}>
-                Editing row id: {editingRowId ?? 'none'} (row #1 is open for editing)
-            </div>
-            <HistoryList
-                items={ITEMS}
-                editing={{
-                    rowId: editingRowId,
-                    onSubmit: (item, title) => {
-                        alert(`Saved row ${item.id}: "${title}"`);
-                        setEditingRowId(undefined);
-                    },
-                    onCancel: () => setEditingRowId(undefined),
-                }}
-            />
-        </div>
-    );
-};
-
-export const WithEditing: Story = {render: () => <WithEditingStory />};

package/src/modules/HistoryList/HistoryList.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import {
-    QueryHistoryComparisonConfig,
-    QueryHistoryEditingConfig,
-    QueryHistoryItem,
-    QueryHistoryRow,
-    QueryHistoryRowAction,
-    QueryHistoryRowRenderData,
-    QueryHistoryRowVariant,
-    QueryHistoryVisibleFieldsConfig,
-} from '../../types/history';
-import {RowsList} from '../RowsList';
-import {HistoryRowContent} from './HistoryRowContent';
-
-export type HistoryListProps<T extends QueryHistoryRow> = {
-    selectedRowId?: T['id'];
-    items: QueryHistoryItem<T>[];
-    rowVariant?: QueryHistoryRowVariant;
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    editing?: QueryHistoryEditingConfig<T>;
-    comparison?: QueryHistoryComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
-    renderRowItem?: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
-    showFiltersHint?: boolean;
-    className?: string;
-    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
-};
-
-export const HistoryList = <T extends QueryHistoryRow>({
-    renderRowItem,
-    ...props
-}: HistoryListProps<T>) => {
-    return (
-        <RowsList
-            {...props}
-            renderRow={(data) =>
-                renderRowItem ? renderRowItem(data) : <HistoryRowContent {...data} />
-            }
-        />
-    );
-};

package/src/modules/HistoryList/index.ts

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

package/src/modules/HistoryRow/HistoryRowMenu.tsx

@@ -1,47 +0,0 @@
-import React, {MouseEvent, useMemo} from 'react';
-import {Button, DropdownMenu, DropdownMenuItem, Icon} from '@gravity-ui/uikit';
-import EllipsisIcon from '@gravity-ui/icons/svgs/ellipsis.svg';
-import {QueryHistoryRow, QueryHistoryRowAction} from '../../types/history';
-
-type Props<T extends QueryHistoryRow> = {
-    item: T;
-    actions?: QueryHistoryRowAction<T>[];
-};
-
-export const HistoryRowMenu = <T extends QueryHistoryRow>({item, actions}: Props<T>) => {
-    const items = useMemo(() => {
-        return actions?.map<DropdownMenuItem>(({icon, text, hidden, disabled, onClick}) => {
-            return {
-                text,
-                hidden,
-                disabled,
-                iconStart: icon,
-                action: () => {
-                    onClick(item);
-                },
-            };
-        });
-    }, [actions, item]);
-
-    if (!actions || !actions.length) return null;
-
-    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-    };
-
-    return (
-        <div onClick={handleClick}>
-            <DropdownMenu
-                size="s"
-                renderSwitcher={(props) => {
-                    return (
-                        <Button {...props} size="xs">
-                            <Icon data={EllipsisIcon} size={12} />
-                        </Button>
-                    );
-                }}
-                items={items}
-            />
-        </div>
-    );
-};