@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/NavigationMeta/story/NavigationMeta.stories.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Label, Text} from '@gravity-ui/uikit';
-import {NavigationMeta} from '..';
-import {META_GROUPS} from './mockData';
-
-const meta: Meta<typeof NavigationMeta> = {
-    title: 'Modules/NavigationMeta',
-    component: NavigationMeta,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 560}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationMeta>;
-
-export const Default: Story = {
-    args: {
-        data: {groups: META_GROUPS, loaded: true},
-    },
-};
-
-export const Loading: Story = {
-    args: {
-        data: {groups: [], loading: true},
-    },
-};
-
-export const Empty: Story = {
-    args: {
-        data: {groups: [], loaded: true},
-    },
-};
-
-export const Error: Story = {
-    args: {
-        data: {groups: [], errorContent: 'Failed to load table metadata'},
-    },
-};
-
-export const WithExtraContent: Story = {
-    args: {
-        data: {groups: META_GROUPS, loaded: true},
-        view: {
-            extraContent: (
-                <Text color="secondary" variant="caption-2">
-                    Additional info rendered below the default groups
-                </Text>
-            ),
-        },
-    },
-};
-
-export const CustomRender: Story = {
-    args: {
-        data: {groups: META_GROUPS, loaded: true},
-        view: {
-            render: (data) => (
-                <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
-                    {data.groups
-                        .flatMap((group) => group.items)
-                        .map((item, index) => (
-                            <Label key={index}>
-                                {item.name}: {String(item.value)}
-                            </Label>
-                        ))}
-                </div>
-            ),
-        },
-    },
-};

package/src/modules/NavigationMeta/story/mockData.ts

@@ -1,22 +0,0 @@
-import type {NavigationMetaConfig} from '../../../types/navigation';
-
-export const META_GROUPS: NavigationMetaConfig['groups'] = [
-    {
-        title: 'General',
-        items: [
-            {name: 'Type', value: 'table'},
-            {name: 'ID', value: '1-2-3-abcdef'},
-            {name: 'Account', value: 'production'},
-            {name: 'Owner', value: 'robot-yt'},
-        ],
-    },
-    {
-        title: 'Storage',
-        items: [
-            {name: 'Compression', value: 'zstd_5'},
-            {name: 'Erasure codec', value: 'none'},
-            {name: 'Disk space', value: '1.2 TB'},
-            {name: 'Chunk count', value: '42'},
-        ],
-    },
-];

package/src/modules/NavigationPreview/NavigationPreview.scss

@@ -1,32 +0,0 @@
-.qp-navigation-preview {
-    --data-table-border-color: var(--g-color-line-generic);
-
-    min-width: 0;
-
-    &__error {
-        display: block;
-    }
-
-    &__table {
-        overflow-x: auto;
-    }
-
-    .data-table__row,
-    .data-table__head-row {
-        height: 40px;
-    }
-
-    .data-table__box_sticky-head_moving .data-table__head-row {
-        height: auto;
-    }
-
-    .data-table__sticky_head .data-table__head-row {
-        height: 40px;
-    }
-
-    .data-table__th,
-    .data-table__td {
-        border-width: 0 0 1px;
-        vertical-align: middle;
-    }
-}

package/src/modules/NavigationPreview/NavigationPreview.tsx

@@ -1,155 +0,0 @@
-import React, {useMemo} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {type Column, DataTable, FieldsSearchToolbar, QueryResultsTable} from '../../components';
-import {useVisibleColumns} from '../../helpers/useVisibleColumns';
-import type {
-    NavigationPreviewColumn,
-    NavigationPreviewConfig,
-    NavigationPreviewFormatterConfig,
-    NavigationPreviewRow,
-} from '../../types/navigation';
-import type {QueryResultColumn} from '../../types/queryResults';
-import {buildPreviewColumns} from './helpers/buildPreviewColumns';
-import {filterPreviewRows} from './helpers/filterPreviewRows';
-import i18n from './i18n';
-import './NavigationPreview.scss';
-
-const block = cn('qp-navigation-preview');
-
-export type NavigationPreviewViewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
-    NavigationPreviewFormatterConfig & {
-        tableColumns?: Array<Column<TRow>>;
-        extraColumns?: Array<Column<TRow>>;
-    };
-
-export type NavigationPreviewProps<TRow extends NavigationPreviewRow = NavigationPreviewRow> = {
-    data: NavigationPreviewConfig<TRow>;
-    view?: NavigationPreviewViewConfig<TRow>;
-    search?: string;
-    onSearchUpdate?: (value: string) => void;
-    searchPlaceholder?: string;
-    visibleColumns?: string[];
-    onVisibleColumnsChange?: (value: string[]) => void;
-    defaultVisibleColumns?: string[];
-    hideToolbar?: boolean;
-    hideFieldsSelector?: boolean;
-    className?: string;
-};
-
-function getColumnName<TRow extends NavigationPreviewRow>(column: NavigationPreviewColumn<TRow>) {
-    return typeof column === 'string' ? column : column.name;
-}
-
-function isQueryResultColumn<TRow extends NavigationPreviewRow>(
-    column: NavigationPreviewColumn<TRow>,
-): column is QueryResultColumn<TRow> {
-    return typeof column !== 'string';
-}
-
-export function NavigationPreview<TRow extends NavigationPreviewRow = NavigationPreviewRow>({
-    data,
-    view,
-    search,
-    onSearchUpdate,
-    searchPlaceholder,
-    visibleColumns,
-    onVisibleColumnsChange,
-    defaultVisibleColumns,
-    hideToolbar,
-    hideFieldsSelector,
-    className,
-}: NavigationPreviewProps<TRow>) {
-    const {columns, rows, loading, loaded, errorContent} = data;
-    const {tableColumns, extraColumns, formatterSettings, maxVisibleLines} = view ?? {};
-    const columnNames = useMemo(() => columns.map(getColumnName), [columns]);
-
-    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columnNames, {
-        value: visibleColumns,
-        onChange: onVisibleColumnsChange,
-        defaultValue: defaultVisibleColumns,
-    });
-
-    const displayedColumns = useMemo(
-        () => columns.filter((column) => activeVisibleColumns.includes(getColumnName(column))),
-        [columns, activeVisibleColumns],
-    );
-    const displayedColumnNames = useMemo(
-        () => displayedColumns.map(getColumnName),
-        [displayedColumns],
-    );
-    const typedColumns = useMemo(
-        () => displayedColumns.filter(isQueryResultColumn),
-        [displayedColumns],
-    );
-    const canUseQueryResultsTable =
-        !tableColumns && !extraColumns?.length && typedColumns.length === displayedColumns.length;
-
-    const resolvedColumns = useMemo(() => {
-        if (tableColumns) {
-            return tableColumns;
-        }
-        return [...buildPreviewColumns<TRow>(displayedColumnNames, i18n), ...(extraColumns ?? [])];
-    }, [tableColumns, extraColumns, displayedColumnNames]);
-
-    const fieldsOptions = useMemo(
-        () =>
-            columns.map((column) => ({
-                id: getColumnName(column),
-                title: typeof column === 'string' ? column : (column.header ?? column.name),
-            })),
-        [columns],
-    );
-
-    const filteredRows = useMemo(
-        () => filterPreviewRows(rows, displayedColumnNames, search),
-        [rows, displayedColumnNames, search],
-    );
-
-    if (errorContent) {
-        return (
-            <Text color="danger" className={block('error')}>
-                {errorContent}
-            </Text>
-        );
-    }
-
-    return (
-        <Flex direction="column" gap={2} className={block(null, className)}>
-            {!hideToolbar && (
-                <FieldsSearchToolbar
-                    search={search}
-                    onSearchUpdate={onSearchUpdate}
-                    searchPlaceholder={searchPlaceholder}
-                    fields={fieldsOptions}
-                    visibleFields={activeVisibleColumns}
-                    onVisibleFieldsChange={handleVisibleColumnsChange}
-                    hideFieldsSelector={hideFieldsSelector}
-                />
-            )}
-            {canUseQueryResultsTable ? (
-                <QueryResultsTable<TRow>
-                    columns={typedColumns}
-                    rows={filteredRows}
-                    loading={loading}
-                    loaded={loaded}
-                    formatterSettings={formatterSettings}
-                    maxVisibleLines={maxVisibleLines}
-                    emptyVariant={search ? 'nothing-found' : 'no-data'}
-                    displayIndices={false}
-                    className={block('table')}
-                />
-            ) : (
-                <DataTable<TRow>
-                    columns={resolvedColumns}
-                    data={filteredRows}
-                    loading={loading}
-                    loaded={loaded}
-                    emptyVariant={search ? 'nothing-found' : 'no-data'}
-                    settings={{displayIndices: false}}
-                    className={block('table')}
-                />
-            )}
-        </Flex>
-    );
-}

package/src/modules/NavigationPreview/helpers/buildPreviewColumns.tsx

@@ -1,11 +0,0 @@
-import type {Column} from '../../../components';
-import {buildColumnsFromKeys} from '../../../helpers/buildColumnsFromKeys';
-import type {NavigationPreviewRow} from '../../../types/navigation';
-import type previewI18n from '../i18n';
-
-export function buildPreviewColumns<TRow extends NavigationPreviewRow>(
-    columns: string[],
-    i18n: typeof previewI18n,
-): Array<Column<TRow>> {
-    return buildColumnsFromKeys<TRow>(columns, i18n('value_empty'));
-}

package/src/modules/NavigationPreview/helpers/filterPreviewRows.ts

@@ -1,29 +0,0 @@
-import type {NavigationPreviewRow} from '../../../types/navigation';
-
-const stringifyCell = (value: unknown): string => {
-    if (value === undefined || value === null) {
-        return '';
-    }
-    if (typeof value === 'string') {
-        return value;
-    }
-    if (typeof value === 'number' || typeof value === 'boolean') {
-        return String(value);
-    }
-    return '';
-};
-
-export function filterPreviewRows<TRow extends NavigationPreviewRow>(
-    rows: TRow[],
-    columns: string[],
-    search?: string,
-): TRow[] {
-    const query = search?.trim().toLowerCase();
-    if (!query) {
-        return rows;
-    }
-
-    return rows.filter((row) =>
-        columns.some((column) => stringifyCell(row[column]).toLowerCase().includes(query)),
-    );
-}

package/src/modules/NavigationPreview/i18n/dicts.ts

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

package/src/modules/NavigationPreview/i18n/en.json

@@ -1,3 +0,0 @@
-{
-    "value_empty": "—"
-}

package/src/modules/NavigationPreview/i18n/index.ts

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

package/src/modules/NavigationPreview/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-    "value_empty": "—"
-}

package/src/modules/NavigationPreview/index.ts

@@ -1,4 +0,0 @@
-export {NavigationPreview} from './NavigationPreview';
-export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
-export {buildPreviewColumns} from './helpers/buildPreviewColumns';
-export {filterPreviewRows} from './helpers/filterPreviewRows';

package/src/modules/NavigationPreview/story/NavigationPreview.stories.tsx

@@ -1,123 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Icon, Label} from '@gravity-ui/uikit';
-import LockIcon from '@gravity-ui/icons/svgs/lock.svg';
-import {NavigationPreview} from '..';
-import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
-import {PREVIEW_COLUMNS, PREVIEW_ROWS} from './mockData';
-
-const meta: Meta<typeof NavigationPreview> = {
-    title: 'Modules/NavigationPreview',
-    component: NavigationPreview,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 560}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationPreview>;
-
-export const Default: Story = {
-    args: {
-        data: {columns: PREVIEW_COLUMNS, rows: PREVIEW_ROWS, loaded: true},
-    },
-};
-
-const ControlledStory = () => {
-    const [search, setSearch] = useState('');
-    const [visibleColumns, setVisibleColumns] = useState<string[]>(['id', 'title', 'status']);
-
-    return (
-        <NavigationPreview
-            data={{columns: PREVIEW_COLUMNS, rows: PREVIEW_ROWS, loaded: true}}
-            search={search}
-            onSearchUpdate={setSearch}
-            visibleColumns={visibleColumns}
-            onVisibleColumnsChange={setVisibleColumns}
-        />
-    );
-};
-
-export const ControlledSearchAndColumns: Story = {
-    render: () => <ControlledStory />,
-};
-
-export const Loading: Story = {
-    args: {
-        data: {columns: [], rows: [], loading: true},
-    },
-};
-
-export const Empty: Story = {
-    args: {
-        data: {columns: PREVIEW_COLUMNS, rows: [], loaded: true},
-    },
-};
-
-export const Error: Story = {
-    args: {
-        data: {columns: [], rows: [], errorContent: 'Failed to load table preview'},
-    },
-};
-
-const TYPED_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
-    {name: 'id', type: ['DataType', 'Uint64']},
-    {name: 'tags', type: ['ListType', ['DataType', 'Utf8']]},
-    {
-        name: 'details',
-        type: [
-            'StructType',
-            [
-                ['name', ['DataType', 'Utf8']],
-                ['score', ['DataType', 'Double']],
-            ],
-        ],
-    },
-];
-
-const TYPED_ROWS: NavigationPreviewRow[] = [
-    {id: 1, tags: ['primary', 'preview'], details: ['Result', 42.5]},
-];
-
-export const TypedValues: Story = {
-    args: {
-        data: {columns: TYPED_COLUMNS, rows: TYPED_ROWS, loaded: true},
-    },
-};
-
-type CustomRow = NavigationPreviewRow & {lock?: string};
-
-const CUSTOM_ROWS: CustomRow[] = PREVIEW_ROWS.map((row, index) => ({
-    ...row,
-    lock: index % 2 === 0 ? 'shared' : undefined,
-}));
-
-export const CustomColumns: Story = {
-    args: {
-        data: {columns: PREVIEW_COLUMNS, rows: CUSTOM_ROWS, loaded: true},
-        view: {
-            extraColumns: [
-                {
-                    name: 'lock',
-                    header: 'Lock',
-                    render: ({row}) =>
-                        (row as CustomRow).lock ? (
-                            <Label icon={<Icon data={LockIcon} size={12} />}>
-                                {(row as CustomRow).lock}
-                            </Label>
-                        ) : (
-                            '—'
-                        ),
-                },
-            ],
-        },
-    },
-};

package/src/modules/NavigationPreview/story/mockData.ts

@@ -1,14 +0,0 @@
-import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
-
-export const PREVIEW_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
-    {name: 'id', type: ['DataType', 'Int32']},
-    {name: 'created_at', type: ['DataType', 'Utf8']},
-    {name: 'title', type: ['DataType', 'Utf8']},
-    {name: 'status', type: ['DataType', 'Utf8']},
-];
-
-export const PREVIEW_ROWS: NavigationPreviewRow[] = [
-    {id: 1, created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
-    {id: 2, created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
-    {id: 3, created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
-];

package/src/modules/NavigationSchema/NavigationSchema.scss

@@ -1,24 +0,0 @@
-.qp-navigation-schema {
-  --data-table-border-color: var(--g-color-line-generic);
-
-  min-width: 0;
-
-  &__error {
-    display: block;
-  }
-
-  &__table {
-    overflow-x: auto;
-  }
-
-  .data-table__row,
-  .data-table__head {
-    height: 40px;
-  }
-
-  .data-table__th,
-  .data-table__td {
-    border-width: 0 0 1px;
-    vertical-align: middle;
-  }
-}

package/src/modules/NavigationSchema/NavigationSchema.tsx

@@ -1,118 +0,0 @@
-import React, {useMemo} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {type Column, DataTable, FieldsSearchToolbar} from '../../components';
-import {useVisibleColumns} from '../../helpers/useVisibleColumns';
-import type {NavigationSchemaColumn, NavigationSchemaConfig} from '../../types/navigation';
-import {buildSchemaColumns} from './helpers/buildSchemaColumns';
-import {filterSchema} from './helpers/filterSchema';
-import i18n from './i18n';
-import './NavigationSchema.scss';
-
-const block = cn('qp-navigation-schema');
-
-export type NavigationSchemaViewConfig<
-    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,
-> = {
-    tableColumns?: Array<Column<TColumn>>;
-    extraColumns?: Array<Column<TColumn>>;
-};
-
-export type NavigationSchemaProps<TColumn extends NavigationSchemaColumn = NavigationSchemaColumn> =
-    {
-        data: NavigationSchemaConfig<TColumn>;
-        view?: NavigationSchemaViewConfig<TColumn>;
-        search?: string;
-        onSearchUpdate?: (value: string) => void;
-        searchPlaceholder?: string;
-        visibleColumns?: string[];
-        onVisibleColumnsChange?: (value: string[]) => void;
-        defaultVisibleColumns?: string[];
-        hideToolbar?: boolean;
-        hideFieldsSelector?: boolean;
-        className?: string;
-    };
-
-export function NavigationSchema<TColumn extends NavigationSchemaColumn = NavigationSchemaColumn>({
-    data,
-    view,
-    search,
-    onSearchUpdate,
-    searchPlaceholder,
-    visibleColumns,
-    onVisibleColumnsChange,
-    defaultVisibleColumns,
-    hideToolbar,
-    hideFieldsSelector,
-    className,
-}: NavigationSchemaProps<TColumn>) {
-    const {columns, loading, loaded, errorContent} = data;
-    const {tableColumns, extraColumns} = view ?? {};
-
-    const resolvedColumns = useMemo(() => {
-        if (tableColumns) {
-            return tableColumns;
-        }
-        return [...buildSchemaColumns<TColumn>(i18n), ...(extraColumns ?? [])];
-    }, [tableColumns, extraColumns]);
-
-    const allColumnNames = useMemo(
-        () => resolvedColumns.map((column) => column.name),
-        [resolvedColumns],
-    );
-
-    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(allColumnNames, {
-        value: visibleColumns,
-        onChange: onVisibleColumnsChange,
-        defaultValue: defaultVisibleColumns,
-    });
-
-    const displayedColumns = useMemo(
-        () => resolvedColumns.filter((column) => activeVisibleColumns.includes(column.name)),
-        [resolvedColumns, activeVisibleColumns],
-    );
-
-    const fieldsOptions = useMemo(
-        () =>
-            resolvedColumns.map((column) => ({
-                id: column.name,
-                title: column.header ?? column.name,
-            })),
-        [resolvedColumns],
-    );
-
-    const rows = useMemo(() => filterSchema(columns, search), [columns, search]);
-
-    if (errorContent) {
-        return (
-            <Text color="danger" className={block('error')}>
-                {errorContent}
-            </Text>
-        );
-    }
-
-    return (
-        <Flex direction="column" gap={2} className={block(null, className)}>
-            {!hideToolbar && (
-                <FieldsSearchToolbar
-                    search={search}
-                    onSearchUpdate={onSearchUpdate}
-                    searchPlaceholder={searchPlaceholder}
-                    fields={fieldsOptions}
-                    visibleFields={activeVisibleColumns}
-                    onVisibleFieldsChange={handleVisibleColumnsChange}
-                    hideFieldsSelector={hideFieldsSelector}
-                />
-            )}
-            <DataTable<TColumn>
-                columns={displayedColumns}
-                data={rows}
-                loading={loading}
-                loaded={loaded}
-                emptyVariant={search ? 'nothing-found' : 'no-data'}
-                settings={{displayIndices: false}}
-                className={block('table')}
-            />
-        </Flex>
-    );
-}