@gravity-ui/querieskit 1.0.1

package/src/modules/HistoryRow/HistoryRowTitle.tsx

@@ -0,0 +1,69 @@
+import React, {KeyboardEvent, useState} from 'react';
+import {QueryHistoryEditingRenderData, QueryHistoryRow} from '../../types/history';
+import {Text, TextInput} from '@gravity-ui/uikit';
+import './HistoryRow.scss';
+
+export type Props<T extends QueryHistoryRow> = {
+    item: T;
+    editing?: QueryHistoryEditingRenderData<T>;
+};
+
+export const HistoryRowTitle = <T extends QueryHistoryRow>({item, editing}: Props<T>) => {
+    const [title, setTitle] = useState(item.title);
+    const isEditing = Boolean(editing?.enabled);
+    const isTitleEmpty = !title.trim();
+
+    React.useEffect(() => {
+        setTitle(item.title);
+    }, [item.id, item.title]);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        event.stopPropagation();
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const nextTitle = title.trim();
+
+            if (!nextTitle) {
+                return;
+            }
+
+            if (nextTitle === item.title) {
+                editing?.onCancel?.(item);
+                setTitle(item.title);
+                return;
+            }
+
+            editing?.onSubmit?.(item, nextTitle);
+        }
+
+        if (event.key === 'Escape') {
+            editing?.onCancel?.(item);
+            setTitle(item.title);
+        }
+    };
+
+    if (isEditing) {
+        return (
+            <div
+                onClick={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
+            >
+                <TextInput
+                    autoFocus
+                    value={title}
+                    size="s"
+                    validationState={isTitleEmpty ? 'invalid' : undefined}
+                    onKeyDown={handleKeyDown}
+                    onUpdate={setTitle}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <Text variant="subheader-1" ellipsis>
+            {item.title}
+        </Text>
+    );
+};

package/src/modules/HistoryRow/index.ts

@@ -0,0 +1 @@
+export {HistoryRow} from './HistoryRow';

package/src/modules/HistorySearchRow/HistorySearchRow.scss

@@ -0,0 +1,13 @@
+.qp-history-search-row {
+  &__header {
+    overflow: hidden;
+  }
+
+  &__start-time {
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}

package/src/modules/HistorySearchRow/HistorySearchRow.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {HistorySearchRow} from './HistorySearchRow';
+import {QueryHistoryRow} from '../../types/history';
+
+const now = Date.now();
+const min = 60 * 1000;
+
+const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
+    id: 1,
+    title: 'Query 1',
+    query: 'SELECT *\nFROM `//home/some/table`\nWHERE status = "completed"\nLIMIT 100',
+    status: 'completed',
+    engine: 'YQL',
+    startTime: now - 5 * min,
+    endTime: now - min,
+    height: 64,
+    ...overrides,
+});
+
+const meta: Meta<typeof HistorySearchRow> = {
+    title: 'Modules/HistorySearchRow',
+    component: HistorySearchRow,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 480}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HistorySearchRow>;
+
+/** Completed query, basic view */
+export const Completed: Story = {
+    args: {
+        item: makeRow({status: 'completed'}),
+    },
+};
+
+/** Row with mode and a private (locked) query */
+export const WithModeAndPrivate: Story = {
+    args: {
+        item: makeRow({status: 'completed', mode: 'batch', isPrivate: true}),
+    },
+};

package/src/modules/HistorySearchRow/HistorySearchRow.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {
+    HistoryPrivateIcon,
+    QueryDuration,
+    QueryStatusIcon,
+    SearchRowLayout,
+} from '../../components';
+import {formatTimeCanonical} from '../../helpers/time';
+import {isFieldVisible} from '../../helpers/isFieldVisible';
+import {resolveMonacoLanguage} from './helpers/resolveMonacoLanguage';
+import './HistorySearchRow.scss';
+import cn from 'bem-cn-lite';
+
+const block = cn('qp-history-search-row');
+
+export type Props<T extends QueryHistoryRow> = {
+    item: T;
+} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+
+export const HistorySearchRow = <T extends QueryHistoryRow>({
+    item,
+    visibleFields,
+    editing,
+    comparison,
+}: Props<T>) => {
+    const {href, status, startTime, endTime, engine, mode, isPrivate, query} = item;
+
+    return (
+        <SearchRowLayout
+            query={query}
+            language={resolveMonacoLanguage(engine)}
+            href={href}
+            disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
+            className={block()}
+            header={
+                <Flex gap={2} alignItems="center" className={block('header')}>
+                    <QueryStatusIcon status={status} className={block('icon')} />
+                    {isFieldVisible(visibleFields, 'duration') && startTime && (
+                        <QueryDuration status={status} startTime={startTime} endTime={endTime} />
+                    )}
+                    {isFieldVisible(visibleFields, 'mode') && mode && (
+                        <Text color="complementary">{mode}</Text>
+                    )}
+                    {isFieldVisible(visibleFields, 'startTime') && startTime && (
+                        <Text color="complementary" className={block('start-time')}>
+                            {formatTimeCanonical(startTime)}
+                        </Text>
+                    )}
+                    {isFieldVisible(visibleFields, 'engine') && engine && (
+                        <Text color="complementary">{engine}</Text>
+                    )}
+                    {isFieldVisible(visibleFields, 'isPrivate') && (
+                        <HistoryPrivateIcon isPrivate={isPrivate} />
+                    )}
+                </Flex>
+            }
+        />
+    );
+};

package/src/modules/HistorySearchRow/helpers/resolveMonacoLanguage.ts

@@ -0,0 +1,19 @@
+import {MonacoLanguage} from '../../../components';
+
+export const resolveMonacoLanguage = (engine?: string) => {
+    const normalized = engine?.toLowerCase();
+    switch (normalized) {
+        case 'chyt': {
+            return MonacoLanguage.CHYT;
+        }
+        case 'spyt': {
+            return MonacoLanguage.SPYT;
+        }
+        case 'ytql': {
+            return MonacoLanguage.YTQL;
+        }
+        default: {
+            return MonacoLanguage.YQL;
+        }
+    }
+};

package/src/modules/HistorySearchRow/index.ts

@@ -0,0 +1 @@
+export {HistorySearchRow} from './HistorySearchRow';

package/src/modules/RowsList/RowsList.scss

@@ -0,0 +1,5 @@
+.qp-rows-list {
+  .g-list__item_selected:hover {
+    background-color: var(--g-color-base-selection-hover);
+  }
+}

package/src/modules/RowsList/RowsList.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {List} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import {
+    BaseHistoryRow,
+    QueryHistoryComparisonConfig,
+    QueryHistoryEditingConfig,
+    QueryHistoryItem,
+    QueryHistoryRowAction,
+    QueryHistoryRowRenderData,
+    QueryHistoryRowVariant,
+    QueryHistoryVisibleFieldsConfig,
+} from '../../types/history';
+import {HistoryListEmpty} from '../../components';
+import {prepareRowData} from './helpers/prepareRowData';
+import {SEARCH_ROW_HEIGHT} from '../../constants/row';
+import './RowsList.scss';
+
+const block = cn('qp-rows-list');
+
+export type RowsListProps<T extends BaseHistoryRow> = {
+    items: QueryHistoryItem<T>[];
+    selectedRowId?: T['id'];
+    rowVariant?: QueryHistoryRowVariant;
+    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
+    editing?: QueryHistoryEditingConfig<T>;
+    comparison?: QueryHistoryComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
+    renderRow: (data: QueryHistoryRowRenderData<T>) => React.ReactNode;
+    showFiltersHint?: boolean;
+    className?: string;
+    onItemClick?: (item: QueryHistoryItem<T>, index: number) => void;
+};
+
+export const RowsList = <T extends BaseHistoryRow>({
+    items,
+    selectedRowId,
+    rowVariant = 'default',
+    visibleFields,
+    editing,
+    comparison,
+    getRowActions,
+    renderRow,
+    showFiltersHint,
+    className,
+    onItemClick,
+}: RowsListProps<T>) => {
+    const getItemHeight = (item: QueryHistoryItem<T>) =>
+        rowVariant === 'search' && !('header' in item) ? SEARCH_ROW_HEIGHT : item.height;
+
+    const handleItemClick = (item: QueryHistoryItem<T>, index: number) => {
+        if ('header' in item || !comparison?.enabled) {
+            onItemClick?.(item, index);
+            return;
+        }
+
+        const selected = comparison.comparedRowIds.includes(item.id);
+        comparison.onChange(item, !selected);
+    };
+
+    if (!items.length) {
+        return <HistoryListEmpty showFiltersHint={showFiltersHint} className={className} />;
+    }
+
+    return (
+        <List
+            className={block(null, className)}
+            filterable={false}
+            items={items}
+            itemHeight={getItemHeight}
+            itemsHeight={(listItems) =>
+                listItems.reduce((totalHeight, item) => totalHeight + getItemHeight(item), 0)
+            }
+            renderItem={(item, isActive, index) =>
+                renderRow(
+                    prepareRowData({
+                        item,
+                        isActive,
+                        index,
+                        variant: rowVariant,
+                        visibleFields,
+                        editing,
+                        comparison,
+                        getRowActions,
+                    }),
+                )
+            }
+            selectedItemIndex={selectedRowId}
+            onItemClick={handleItemClick}
+        />
+    );
+};

package/src/modules/RowsList/helpers/prepareRowData.ts

@@ -0,0 +1,61 @@
+import {
+    BaseHistoryRow,
+    QueryHistoryComparisonConfig,
+    QueryHistoryEditingConfig,
+    QueryHistoryItem,
+    QueryHistoryRowAction,
+    QueryHistoryRowRenderData,
+    QueryHistoryRowVariant,
+    QueryHistoryVisibleFieldsConfig,
+} from '../../../types/history';
+
+type Props<T extends BaseHistoryRow> = {
+    item: QueryHistoryItem<T>;
+    isActive: boolean;
+    index: number;
+    variant: QueryHistoryRowVariant;
+    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
+    editing?: QueryHistoryEditingConfig<T>;
+    comparison?: QueryHistoryComparisonConfig<T>;
+    getRowActions?: (item: T) => QueryHistoryRowAction<T>[];
+};
+
+export const prepareRowData = <T extends BaseHistoryRow>({
+    item,
+    isActive,
+    index,
+    variant,
+    visibleFields,
+    editing,
+    comparison,
+    getRowActions,
+}: Props<T>): QueryHistoryRowRenderData<T> => {
+    const isRow = !('header' in item);
+    const actions = isRow && getRowActions ? getRowActions(item) : undefined;
+    const editingData =
+        isRow && editing
+            ? {
+                  enabled: editing.rowId === item.id,
+                  onSubmit: editing.onSubmit,
+                  onCancel: editing.onCancel,
+              }
+            : undefined;
+    const comparisonData =
+        isRow && comparison && comparison.enabled
+            ? {
+                  enabled: true,
+                  checked: comparison.comparedRowIds.includes(item.id),
+              }
+            : undefined;
+
+    return {
+        item,
+        index,
+        isActive,
+        variant,
+        visibleFields,
+        actions,
+        editing: editingData,
+        comparison: comparisonData,
+    };
+};

package/src/modules/RowsList/index.ts

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

package/src/modules/TutorialRow/TutorialRow.scss

@@ -0,0 +1,9 @@
+.qp-tutorial-row {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  &__content {
+    overflow: hidden;
+  }
+}

package/src/modules/TutorialRow/TutorialRow.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {TutorialRow} from './TutorialRow';
+import {TutorialHistoryRow} from '../../types/tutorial';
+
+const makeRow = (overrides: Partial<TutorialHistoryRow>): TutorialHistoryRow => ({
+    id: 1,
+    title: 'Getting started with YQL',
+    height: 28,
+    ...overrides,
+});
+
+const meta: Meta<typeof TutorialRow> = {
+    title: 'Modules/TutorialRow',
+    component: TutorialRow,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    args: {
+        item: makeRow({}),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 380}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TutorialRow>;
+
+/** Default tutorial row */
+export const Default: Story = {};
+
+/** Row with a link */
+export const WithHref: Story = {
+    args: {
+        item: makeRow({href: '#'}),
+    },
+};

package/src/modules/TutorialRow/TutorialRow.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {TutorialHistoryRow} from '../../types/tutorial';
+import {RowLink} from '../../components';
+import cn from 'bem-cn-lite';
+import './TutorialRow.scss';
+
+const block = cn('qp-tutorial-row');
+
+export type TutorialRowProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
+    item: T;
+};
+
+export const TutorialRow = <T extends TutorialHistoryRow>({item}: TutorialRowProps<T>) => {
+    const {href, id, title} = item;
+
+    return (
+        <RowLink href={href} className={block()}>
+            <Flex gap={1} alignItems="center" className={block('content')}>
+                <Text color="secondary">{id}.</Text>
+                <Text ellipsis>{title}</Text>
+            </Flex>
+        </RowLink>
+    );
+};

package/src/modules/TutorialRow/index.ts

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

package/src/modules/TutorialSearchRow/TutorialSearchRow.scss

@@ -0,0 +1,5 @@
+.qp-tutorial-search-row {
+  &__header {
+    overflow: hidden;
+  }
+}

package/src/modules/TutorialSearchRow/TutorialSearchRow.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {TutorialSearchRow} from './TutorialSearchRow';
+import {TutorialHistoryRow} from '../../types/tutorial';
+
+const QUERY = `use test;
+
+SELECT
+    "test_session" AS session_id,
+    "test_task" AS task_id,
+    SUBSTRING("test", 1, 1) AS truncated_char`;
+
+const makeRow = (overrides: Partial<TutorialHistoryRow>): TutorialHistoryRow => ({
+    id: 1,
+    title: 'Getting started with YQL',
+    query: QUERY,
+    height: 110,
+    ...overrides,
+});
+
+const meta: Meta<typeof TutorialSearchRow> = {
+    title: 'Modules/TutorialSearchRow',
+    component: TutorialSearchRow,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    args: {
+        item: makeRow({}),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{width: 420}}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TutorialSearchRow>;
+
+/** Default tutorial search row */
+export const Default: Story = {};

package/src/modules/TutorialSearchRow/TutorialSearchRow.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {TutorialHistoryRow} from '../../types/tutorial';
+import {MonacoLanguage, SearchRowLayout} from '../../components';
+import './TutorialSearchRow.scss';
+import cn from 'bem-cn-lite';
+
+const block = cn('qp-tutorial-search-row');
+
+export type TutorialSearchRowProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
+    item: T;
+};
+
+export const TutorialSearchRow = <T extends TutorialHistoryRow>({
+    item,
+}: TutorialSearchRowProps<T>) => {
+    const {href, id, title, query} = item;
+
+    return (
+        <SearchRowLayout
+            query={query}
+            language={MonacoLanguage.YQL}
+            href={href}
+            className={block()}
+            header={
+                <Flex gap={2} alignItems="center" className={block('header')}>
+                    <Text color="secondary">{id}.</Text>
+                    <Text ellipsis>{title}</Text>
+                </Flex>
+            }
+        />
+    );
+};

package/src/modules/TutorialSearchRow/index.ts

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

package/src/modules/index.ts

@@ -0,0 +1,13 @@
+export {HistoryHeader} from './HistoryHeader';
+export {HistoryLayout} from './HistoryLayout';
+export type {HistoryLayoutProps} from './HistoryLayout';
+export {RowsList} from './RowsList';
+export type {RowsListProps} from './RowsList';
+export {HistoryRow} from './HistoryRow';
+export {HistoryList} from './HistoryList';
+export type {HistoryListProps} from './HistoryList';
+export {HistorySearchRow} from './HistorySearchRow';
+export {TutorialRow} from './TutorialRow';
+export type {TutorialRowProps} from './TutorialRow';
+export {TutorialSearchRow} from './TutorialSearchRow';
+export type {TutorialSearchRowProps} from './TutorialSearchRow';

package/src/types/declarations.d.ts

@@ -0,0 +1,15 @@
+declare module '*.css' {
+    const classes: {readonly [key: string]: string};
+    export default classes;
+}
+
+declare module '*.scss' {
+    const classes: {readonly [key: string]: string};
+    export default classes;
+}
+
+declare module '*.svg' {
+    import type {FC} from 'react';
+    const ReactComponent: FC<React.SVGProps<SVGSVGElement>>;
+    export default ReactComponent;
+}

package/src/types/forms.ts

@@ -0,0 +1,33 @@
+export type BaseFormField<T extends string = string, Value = any, Extra extends object = {}> = {
+    id: string;
+    type: T;
+    title?: string;
+    initialValue?: Value;
+} & Extra;
+
+/**
+ * Registry of props for registered form field types.
+ *
+ * Each field component should augment this interface via
+ * module augmentation in its own file, for example:
+ *
+ * ```ts
+ * declare module '../../types/forms' {
+ *     interface FormFieldPropsRegistry {
+ *         switch: ComponentProps<typeof SwitchField>;
+ *     }
+ * }
+ * ```
+ *
+ * This allows the `RegisteredFormFields` union to be extended
+ * automatically without modifying SimpleForm when new field types are added.
+ */
+export interface FormFieldPropsRegistry {}
+
+export type RegisteredFormFields = {
+    [K in keyof FormFieldPropsRegistry]: BaseFormField<
+        K & string,
+        FormFieldPropsRegistry[K] extends {value?: infer V} ? V : any,
+        Omit<FormFieldPropsRegistry[K], 'value' | 'onChange' | 'title'>
+    >;
+}[keyof FormFieldPropsRegistry];