@gravity-ui/querieskit 1.2.0 → 1.3.1

package/src/modules/RowsList/RowsList.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListItem,
-    QueryListRow,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListRowVariant,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {EmptyContent, LazyList} 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 QueryListRow> = {
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    rowVariant?: QueryListRowVariant;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
-    showFiltersHint?: boolean;
-    className?: string;
-    onItemClick?: (item: QueryListItem<T>, index: number) => void;
-};
-
-export const RowsList = <T extends QueryListRow>({
-    items,
-    selectedRowId,
-    rowVariant = 'default',
-    visibleFields,
-    editing,
-    comparison,
-    getRowActions,
-    renderRow,
-    showFiltersHint,
-    className,
-    onItemClick,
-}: RowsListProps<T>) => {
-    const getItemHeight = (item: QueryListItem<T>) =>
-        rowVariant === 'search' && !('header' in item) ? SEARCH_ROW_HEIGHT : item.height;
-    const selectedItemIndex =
-        selectedRowId === undefined
-            ? undefined
-            : items.findIndex((item) => !('header' in item) && item.id === selectedRowId);
-
-    const handleItemClick = (item: QueryListItem<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 (
-            <EmptyContent
-                variant={showFiltersHint ? 'nothing-found' : 'no-files'}
-                className={className}
-            />
-        );
-    }
-
-    return (
-        <LazyList<QueryListItem<T>>
-            className={block(null, className)}
-            items={items}
-            itemHeight={getItemHeight}
-            renderItem={(item, isActive, index) =>
-                renderRow(
-                    prepareRowData({
-                        item,
-                        isActive,
-                        index,
-                        variant: rowVariant,
-                        visibleFields,
-                        editing,
-                        comparison,
-                        getRowActions,
-                    }),
-                )
-            }
-            selectedItemIndex={selectedItemIndex}
-            onItemClick={handleItemClick}
-        />
-    );
-};

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

@@ -1,61 +0,0 @@
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListItem,
-    QueryListRow,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListRowVariant,
-    QueryListVisibleFieldsConfig,
-} from '../../../types/queryList';
-
-type Props<T extends QueryListRow> = {
-    item: QueryListItem<T>;
-    isActive: boolean;
-    index: number;
-    variant: QueryListRowVariant;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-};
-
-export const prepareRowData = <T extends QueryListRow>({
-    item,
-    isActive,
-    index,
-    variant,
-    visibleFields,
-    editing,
-    comparison,
-    getRowActions,
-}: Props<T>): QueryListRowRenderData<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

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

package/src/modules/SavedQueryRow/SavedQueryRow.scss

@@ -1,20 +0,0 @@
-.qp-saved-query-row {
-  height: 100%;
-
-  &_compared {
-    background-color: var(--g-color-base-utility-light);
-  }
-
-  &__content {
-    min-width: 0;
-  }
-
-  &__header {
-    height: 20px;
-    min-width: 0;
-  }
-
-  &__metadata {
-    min-width: 0;
-  }
-}

package/src/modules/SavedQueryRow/SavedQueryRow.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {Avatar, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {EditableRowTitle, RowActionsMenu, RowLink} from '../../components';
-import {formatDateCanonical} from '../../helpers/time';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import './SavedQueryRow.scss';
-
-const block = cn('qp-saved-query-row');
-
-export type SavedQueryRowProps<T extends SavedQuery = SavedQuery> = {
-    item: T;
-    renderAuthor?: (item: T) => React.ReactNode;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-export const SavedQueryRow = <T extends SavedQuery>({
-    item,
-    actions,
-    isActive,
-    comparison,
-    editing,
-    visibleFields,
-    renderAuthor,
-}: SavedQueryRowProps<T>) => {
-    const {author, engine, href, savedAt} = item;
-    const isEditing = Boolean(editing?.enabled);
-    const isComparisonMode = Boolean(comparison?.enabled);
-    const isChecked = Boolean(comparison?.checked);
-    const showMenu = isActive && Boolean(actions?.length) && !isComparisonMode;
-    const isFieldVisible = (field: string) =>
-        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
-    const authorContent =
-        renderAuthor?.(item) ??
-        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
-
-    return (
-        <RowLink
-            href={href}
-            disabled={isEditing || isComparisonMode}
-            className={block({compared: isChecked})}
-        >
-            <Flex direction="column" gap={1} className={block('content')}>
-                <Flex justifyContent="space-between" className={block('header')}>
-                    <EditableRowTitle item={item} editing={editing} />
-                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
-                </Flex>
-                <Flex gap={2} alignItems="center" className={block('metadata')}>
-                    {isFieldVisible('savedAt') && savedAt && (
-                        <Text color="complementary">{formatDateCanonical(savedAt)}</Text>
-                    )}
-                    {isFieldVisible('engine') && engine && (
-                        <Text color="complementary">{engine}</Text>
-                    )}
-                    {isFieldVisible('author') && authorContent}
-                </Flex>
-            </Flex>
-        </RowLink>
-    );
-};

package/src/modules/SavedQueryRow/index.ts

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

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.scss

@@ -1,15 +0,0 @@
-.qp-saved-query-search-row {
-  &__header {
-    min-width: 0;
-    width: 100%;
-  }
-
-  &__title {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__fixed-metadata {
-    flex-shrink: 0;
-  }
-}

package/src/modules/SavedQuerySearchRow/SavedQuerySearchRow.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import {Avatar, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {MonacoLanguage, SearchRowLayout} from '../../components';
-import {formatDateCanonical} from '../../helpers/time';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import './SavedQuerySearchRow.scss';
-
-const block = cn('qp-saved-query-search-row');
-
-export type SavedQuerySearchRowProps<T extends SavedQuery = SavedQuery> = {
-    item: T;
-    renderAuthor?: (item: T) => React.ReactNode;
-} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
-
-export const SavedQuerySearchRow = <T extends SavedQuery>({
-    item,
-    comparison,
-    editing,
-    visibleFields,
-    renderAuthor,
-}: SavedQuerySearchRowProps<T>) => {
-    const {author, engine, href, query, savedAt} = item;
-    const authorContent =
-        renderAuthor?.(item) ??
-        (author ? <Avatar size="3xs" text={author} title={author} /> : null);
-    const isFieldVisible = (field: string) =>
-        visibleFields === undefined || (visibleFields.value as string[]).includes(field);
-
-    return (
-        <SearchRowLayout
-            query={query}
-            language={MonacoLanguage.YQL}
-            href={href}
-            disabled={Boolean(editing?.enabled) || Boolean(comparison?.enabled)}
-            className={block()}
-            header={
-                <Flex gap={2} alignItems="center" className={block('header')}>
-                    <Text variant="subheader-1" ellipsis className={block('title')}>
-                        {item.title}
-                    </Text>
-                    {isFieldVisible('savedAt') && savedAt && (
-                        <Text color="complementary" className={block('fixed-metadata')}>
-                            {formatDateCanonical(savedAt)}
-                        </Text>
-                    )}
-                    {isFieldVisible('engine') && engine && (
-                        <Text color="complementary" className={block('fixed-metadata')}>
-                            {engine}
-                        </Text>
-                    )}
-                    {isFieldVisible('author') && authorContent}
-                </Flex>
-            }
-        />
-    );
-};

package/src/modules/SavedQuerySearchRow/index.ts

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

package/src/modules/TutorialRow/TutorialRow.scss

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

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

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

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

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

package/src/modules/TutorialSearchRow/TutorialSearchRow.scss

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

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

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

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

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

package/src/modules/index.ts

@@ -1,36 +0,0 @@
-export {HistoryHeader} from './HistoryHeader';
-export {HistoryLayout} from './HistoryLayout';
-export {HistoryComparisonActions} from './HistoryComparisonActions';
-export type {HistoryComparisonActionsProps} from './HistoryComparisonActions';
-export {NavigationHeader} from './NavigationHeader';
-export type {NavigationHeaderProps} from './NavigationHeader';
-export type {HistoryLayoutProps} from './HistoryLayout';
-export {RowsList} from './RowsList';
-export type {RowsListProps} from './RowsList';
-export {QueriesList} from './QueriesList';
-export type {QueriesListProps} from './QueriesList';
-export {HistoryRow} from './HistoryRow';
-export {HistorySearchRow} from './HistorySearchRow';
-export {SavedQueryRow} from './SavedQueryRow';
-export type {SavedQueryRowProps} from './SavedQueryRow';
-export {SavedQuerySearchRow} from './SavedQuerySearchRow';
-export type {SavedQuerySearchRowProps} from './SavedQuerySearchRow';
-export * from './ChartEditor';
-export {TutorialRow} from './TutorialRow';
-export type {TutorialRowProps} from './TutorialRow';
-export {TutorialSearchRow} from './TutorialSearchRow';
-export type {TutorialSearchRowProps} from './TutorialSearchRow';
-export {ClustersList} from './ClustersList';
-export type {ClustersListProps} from './ClustersList';
-export {NavigationItemsList} from './NavigationItemsList';
-export type {NavigationItemsListProps} from './NavigationItemsList';
-export {NavigationDetail} from './NavigationDetail';
-export type {NavigationDetailProps} from './NavigationDetail';
-export {NavigationSchema, buildSchemaColumns, filterSchema} from './NavigationSchema';
-export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
-export {NavigationPreview, buildPreviewColumns, filterPreviewRows} from './NavigationPreview';
-export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
-export {NavigationMeta, buildMetaGroups} from './NavigationMeta';
-export type {NavigationMetaProps, NavigationMetaViewConfig} from './NavigationMeta';
-export {NavigationView, buildViewColumns} from './NavigationView';
-export type {NavigationViewProps, NavigationViewViewConfig} from './NavigationView';

package/src/types/declarations.d.ts

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

@@ -1,33 +0,0 @@
-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];

package/src/types/history.ts

@@ -1,12 +0,0 @@
-import {QueryListRow, QueryTimestamp} from './queryList';
-
-export type QueryStatus = 'completed' | 'failed' | 'aborted' | 'draft' | 'running';
-
-export type QueryHistoryRow = QueryListRow & {
-    startTime?: QueryTimestamp;
-    endTime?: QueryTimestamp;
-    engine?: string;
-    mode?: string;
-    isPrivate?: boolean;
-    status: QueryStatus;
-};