@gravity-ui/querieskit 1.0.3 → 1.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/modules/NavigationPreview/index.ts

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+{
+    "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

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

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

@@ -0,0 +1,9 @@
+{
+    "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

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