@gravity-ui/querieskit 1.2.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,24 +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 {
-    height: 40px;
-  }
-
-  .data-table__th,
-  .data-table__td {
-    border-width: 0 0 1px;
-    vertical-align: middle;
-  }
-}

package/src/modules/NavigationPreview/NavigationPreview.tsx

@@ -1,110 +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 {NavigationPreviewConfig, NavigationPreviewRow} from '../../types/navigation';
-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> =
-    {
-        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;
-};
-
-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} = view ?? {};
-
-    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columns, {
-        value: visibleColumns,
-        onChange: onVisibleColumnsChange,
-        defaultValue: defaultVisibleColumns,
-    });
-
-    const displayedColumnNames = useMemo(
-        () => columns.filter((column) => activeVisibleColumns.includes(column)),
-        [columns, activeVisibleColumns],
-    );
-
-    const resolvedColumns = useMemo(() => {
-        if (tableColumns) {
-            return tableColumns;
-        }
-        return [...buildPreviewColumns<TRow>(displayedColumnNames, i18n), ...(extraColumns ?? [])];
-    }, [tableColumns, extraColumns, displayedColumnNames]);
-
-    const fieldsOptions = useMemo(
-        () => columns.map((column) => ({id: column, title: column})),
-        [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}
-                />
-            )}
-            <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,98 +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 {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'},
-    },
-};
-
-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,9 +0,0 @@
-import type {NavigationPreviewRow} from '../../../types/navigation';
-
-export const PREVIEW_COLUMNS = ['id', 'created_at', 'title', 'status'];
-
-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>
-    );
-}

package/src/modules/NavigationSchema/helpers/buildSchemaColumns.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import {Flex, Icon, Text} from '@gravity-ui/uikit';
-import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
-import ArrowDownIcon from '@gravity-ui/icons/svgs/arrow-down.svg';
-import CheckIcon from '@gravity-ui/icons/svgs/check.svg';
-import type {Column} from '../../../components';
-import type {NavigationSchemaColumn, NavigationSchemaSortOrder} from '../../../types/navigation';
-import type schemaI18n from '../i18n';
-
-const SORT_ICONS: Record<NavigationSchemaSortOrder, typeof ArrowUpIcon> = {
-    ascending: ArrowUpIcon,
-    descending: ArrowDownIcon,
-};
-
-export function buildSchemaColumns<TColumn extends NavigationSchemaColumn>(
-    i18n: typeof schemaI18n,
-): Array<Column<TColumn>> {
-    return [
-        {
-            name: 'name',
-            header: i18n('title_column-name'),
-            render: ({row}) => (
-                <Flex inline gap={1} alignItems="center">
-                    <Text>{row.name}</Text>
-                    {row.sortOrder && <Icon data={SORT_ICONS[row.sortOrder]} size={14} />}
-                </Flex>
-            ),
-        },
-        {
-            name: 'type',
-            header: i18n('title_column-type'),
-            render: ({row}) => row.type ?? i18n('value_empty'),
-        },
-        {
-            name: 'sortOrder',
-            header: i18n('title_column-sort-order'),
-            render: ({row}) =>
-                row.sortOrder
-                    ? i18n(
-                          row.sortOrder === 'ascending'
-                              ? 'value_sort-ascending'
-                              : 'value_sort-descending',
-                      )
-                    : i18n('value_empty'),
-        },
-        {
-            name: 'required',
-            header: i18n('title_column-required'),
-            align: 'center',
-            render: ({row}) =>
-                row.required ? <Icon data={CheckIcon} size={16} /> : i18n('value_empty'),
-        },
-    ];
-}

package/src/modules/NavigationSchema/helpers/filterSchema.ts

@@ -1,18 +0,0 @@
-import type {NavigationSchemaColumn} from '../../../types/navigation';
-
-export function filterSchema<TColumn extends NavigationSchemaColumn>(
-    columns: TColumn[],
-    search?: string,
-): TColumn[] {
-    const query = search?.trim().toLowerCase();
-    if (!query) {
-        return columns;
-    }
-
-    return columns.filter((column) => {
-        return (
-            column.name.toLowerCase().includes(query) ||
-            (column.type?.toLowerCase().includes(query) ?? false)
-        );
-    });
-}

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

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

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

@@ -1,9 +0,0 @@
-{
-    "title_column-name": "Name",
-    "title_column-type": "Type",
-    "title_column-sort-order": "Sort order",
-    "title_column-required": "Required",
-    "value_sort-ascending": "Ascending",
-    "value_sort-descending": "Descending",
-    "value_empty": "—"
-}

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

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

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

@@ -1,9 +0,0 @@
-{
-    "title_column-name": "Имя",
-    "title_column-type": "Тип",
-    "title_column-sort-order": "Сортировка",
-    "title_column-required": "Обязательное",
-    "value_sort-ascending": "По возрастанию",
-    "value_sort-descending": "По убыванию",
-    "value_empty": "—"
-}

package/src/modules/NavigationSchema/index.ts

@@ -1,4 +0,0 @@
-export {NavigationSchema} from './NavigationSchema';
-export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
-export {buildSchemaColumns} from './helpers/buildSchemaColumns';
-export {filterSchema} from './helpers/filterSchema';