@gravity-ui/querieskit 1.2.0 → 1.3.1

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

@@ -1,112 +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 {NavigationSchema} from '..';
-import type {NavigationSchemaColumn} from '../../../types/navigation';
-import {SCHEMA_COLUMNS} from './mockData';
-
-const meta: Meta<typeof NavigationSchema> = {
-    title: 'Modules/NavigationSchema',
-    component: NavigationSchema,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 480}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationSchema>;
-
-export const Default: Story = {
-    args: {
-        data: {columns: SCHEMA_COLUMNS, loaded: true},
-    },
-};
-
-export const Loading: Story = {
-    args: {
-        data: {columns: [], loading: true},
-    },
-};
-
-export const Empty: Story = {
-    args: {
-        data: {columns: [], loaded: true},
-    },
-};
-
-const NothingFoundStory = () => {
-    const [search, setSearch] = useState('no-such-field');
-
-    return (
-        <NavigationSchema
-            data={{columns: SCHEMA_COLUMNS, loaded: true}}
-            search={search}
-            onSearchUpdate={setSearch}
-        />
-    );
-};
-
-export const NothingFound: Story = {render: () => <NothingFoundStory />};
-
-const ControlledVisibleColumnsStory = () => {
-    const [search, setSearch] = useState('');
-    const [visibleColumns, setVisibleColumns] = useState<string[]>(['name', 'type']);
-
-    return (
-        <NavigationSchema
-            data={{columns: SCHEMA_COLUMNS, loaded: true}}
-            search={search}
-            onSearchUpdate={setSearch}
-            visibleColumns={visibleColumns}
-            onVisibleColumnsChange={setVisibleColumns}
-        />
-    );
-};
-
-export const ControlledVisibleColumns: Story = {
-    render: () => <ControlledVisibleColumnsStory />,
-};
-
-export const Error: Story = {
-    args: {
-        data: {columns: [], errorContent: 'Failed to load table schema'},
-    },
-};
-
-type CustomColumn = NavigationSchemaColumn & {lock?: string};
-
-const CUSTOM_COLUMNS: CustomColumn[] = SCHEMA_COLUMNS.map((column, index) => ({
-    ...column,
-    lock: index % 2 === 0 ? 'shared' : undefined,
-}));
-
-export const CustomColumns: Story = {
-    args: {
-        data: {columns: CUSTOM_COLUMNS, loaded: true},
-        view: {
-            extraColumns: [
-                {
-                    name: 'lock',
-                    header: 'Lock',
-                    render: ({row}) =>
-                        (row as CustomColumn).lock ? (
-                            <Label icon={<Icon data={LockIcon} size={12} />}>
-                                {(row as CustomColumn).lock}
-                            </Label>
-                        ) : (
-                            '—'
-                        ),
-                },
-            ],
-        },
-    },
-};

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

@@ -1,9 +0,0 @@
-import type {NavigationSchemaColumn} from '../../../types/navigation';
-
-export const SCHEMA_COLUMNS: NavigationSchemaColumn[] = [
-    {name: 'id', type: 'int64', sortOrder: 'ascending', required: true},
-    {name: 'created_at', type: 'string', sortOrder: 'descending', required: true},
-    {name: 'title', type: 'string', required: true},
-    {name: 'status', type: 'string'},
-    {name: 'payload', type: 'any'},
-];

package/src/modules/NavigationView/NavigationView.scss

@@ -1,44 +0,0 @@
-.qp-navigation-view {
-  --data-table-border-color: var(--g-color-line-generic);
-
-  min-width: 0;
-
-  &__error {
-    display: block;
-  }
-
-  &__skeleton-row {
-    height: 24px;
-  }
-
-  &__empty {
-    height: 100%;
-  }
-
-  &__section {
-    width: 100%;
-  }
-
-  &__action {
-    color: var(--g-color-text-secondary);
-  }
-
-  &__summary {
-    width: 100%;
-  }
-
-  &__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/NavigationView/NavigationView.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {type Column, EmptyContent, SkeletonRows} from '../../components';
-import type {NavigationViewConfig, NavigationViewRow} from '../../types/navigation';
-import {NavigationViewSectionItem} from './internal/NavigationViewSectionItem';
-import './NavigationView.scss';
-
-const block = cn('qp-navigation-view');
-
-export type NavigationViewViewConfig<TRow extends NavigationViewRow = NavigationViewRow> = {
-    tableColumns?: Array<Column<TRow>>;
-    extraColumns?: Array<Column<TRow>>;
-};
-
-export type NavigationViewProps<TRow extends NavigationViewRow = NavigationViewRow> = {
-    data: NavigationViewConfig<TRow>;
-    view?: NavigationViewViewConfig<TRow>;
-    className?: string;
-};
-
-export function NavigationView<TRow extends NavigationViewRow = NavigationViewRow>({
-    data,
-    view,
-    className,
-}: NavigationViewProps<TRow>) {
-    const {sections, loading, loaded, errorContent} = data;
-    const {tableColumns, extraColumns} = view ?? {};
-
-    if (errorContent) {
-        return (
-            <Text color="danger" className={block('error')}>
-                {errorContent}
-            </Text>
-        );
-    }
-
-    if (loading && !loaded) {
-        return (
-            <SkeletonRows className={block(null, className)} rowClassName={block('skeleton-row')} />
-        );
-    }
-
-    if (sections.length === 0) {
-        return <EmptyContent variant="no-data" className={block('empty')} />;
-    }
-
-    return (
-        <Flex direction="column" gap={2} className={block(null, className)}>
-            {sections.map((section) => (
-                <NavigationViewSectionItem<TRow>
-                    key={section.id}
-                    section={section}
-                    tableColumns={tableColumns}
-                    extraColumns={extraColumns}
-                />
-            ))}
-        </Flex>
-    );
-}

package/src/modules/NavigationView/helpers/buildViewColumns.tsx

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

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

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

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

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

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

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

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

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

package/src/modules/NavigationView/index.ts

@@ -1,3 +0,0 @@
-export {NavigationView} from './NavigationView';
-export type {NavigationViewProps, NavigationViewViewConfig} from './NavigationView';
-export {buildViewColumns} from './helpers/buildViewColumns';

package/src/modules/NavigationView/internal/NavigationViewSectionItem.tsx

@@ -1,70 +0,0 @@
-import React, {useMemo} from 'react';
-import {Disclosure, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {type Column, DataTable, NavigationActionButtons} from '../../../components';
-import type {NavigationViewRow, NavigationViewSection} from '../../../types/navigation';
-import {buildViewColumns} from '../helpers/buildViewColumns';
-import i18n from '../i18n';
-
-const block = cn('qp-navigation-view');
-
-export type NavigationViewSectionItemProps<TRow extends NavigationViewRow = NavigationViewRow> = {
-    section: NavigationViewSection<TRow>;
-    tableColumns?: Array<Column<TRow>>;
-    extraColumns?: Array<Column<TRow>>;
-};
-
-export function NavigationViewSectionItem<TRow extends NavigationViewRow = NavigationViewRow>({
-    section,
-    tableColumns,
-    extraColumns,
-}: NavigationViewSectionItemProps<TRow>) {
-    const resolvedColumns = useMemo(() => {
-        if (tableColumns) {
-            return tableColumns;
-        }
-        return [...buildViewColumns<TRow>(section.columns, i18n), ...(extraColumns ?? [])];
-    }, [tableColumns, extraColumns, section.columns]);
-
-    return (
-        <Disclosure
-            summary={section.title}
-            expanded={section.expanded}
-            defaultExpanded={section.defaultExpanded}
-            onUpdate={section.onExpandedChange}
-            className={block('section')}
-        >
-            <Disclosure.Summary>
-                {(_props, defaultButton) => (
-                    <Flex
-                        gap={2}
-                        justifyContent="flex-start"
-                        alignItems="center"
-                        className={block('summary')}
-                    >
-                        <Flex minWidth={0}>{defaultButton}</Flex>
-                        <NavigationActionButtons
-                            actions={section.actions}
-                            arg={section}
-                            buttonClassName={block('action')}
-                        />
-                    </Flex>
-                )}
-            </Disclosure.Summary>
-            <Disclosure.Details>
-                {section.errorContent ? (
-                    <Text color="danger">{section.errorContent}</Text>
-                ) : (
-                    <DataTable<TRow>
-                        columns={resolvedColumns}
-                        data={section.rows}
-                        loading={section.loading}
-                        loaded={section.loaded}
-                        settings={{displayIndices: false}}
-                        className={block('table')}
-                    />
-                )}
-            </Disclosure.Details>
-        </Disclosure>
-    );
-}

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

@@ -1,110 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Icon} from '@gravity-ui/uikit';
-import ArrowUpRightFromSquareIcon from '@gravity-ui/icons/svgs/arrow-up-right-from-square.svg';
-import CodeIcon from '@gravity-ui/icons/svgs/code.svg';
-import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
-import PlayIcon from '@gravity-ui/icons/svgs/play.svg';
-import {action} from 'storybook/actions';
-import {NavigationView} from '..';
-import type {NavigationViewSection} from '../../../types/navigation';
-import {VIEW_SECTIONS} from './mockData';
-
-const meta: Meta<typeof NavigationView> = {
-    title: 'Modules/NavigationView',
-    component: NavigationView,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 640}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<typeof NavigationView>;
-
-export const Default: Story = {
-    args: {
-        data: {sections: VIEW_SECTIONS, loaded: true},
-    },
-};
-
-export const Loading: Story = {
-    args: {
-        data: {sections: [], loading: true},
-    },
-};
-
-export const Empty: Story = {
-    args: {
-        data: {sections: [], loaded: true},
-    },
-};
-
-export const Error: Story = {
-    args: {
-        data: {sections: [], errorContent: 'Failed to load view'},
-    },
-};
-
-const SECTIONS_WITH_ACTIONS: NavigationViewSection[] = VIEW_SECTIONS.map((section) => ({
-    ...section,
-    actions: [
-        {
-            id: 'export',
-            title: 'Export',
-            content: <Icon data={ArrowUpRightFromSquareIcon} size={14} />,
-            onClick: (s) => action('exportClick')(s.id),
-        },
-        {
-            id: 'code',
-            title: 'Show code',
-            content: <Icon data={CodeIcon} size={14} />,
-            onClick: (s) => action('codeClick')(s.id),
-        },
-        {
-            id: 'run',
-            title: 'Run',
-            content: <Icon data={PlayIcon} size={14} />,
-            onClick: (s) => action('runClick')(s.id),
-        },
-        {
-            id: 'settings',
-            title: 'Settings',
-            content: <Icon data={GearIcon} size={14} />,
-            onClick: (s) => action('settingsClick')(s.id),
-        },
-    ],
-}));
-
-export const WithActions: Story = {
-    args: {
-        data: {sections: SECTIONS_WITH_ACTIONS, loaded: true},
-    },
-};
-
-const ControlledExpandStory = () => {
-    const [expandedId, setExpandedId] = useState<string>('general');
-
-    const sections: NavigationViewSection[] = VIEW_SECTIONS.map((section) => ({
-        ...section,
-        expanded: section.id === expandedId,
-        defaultExpanded: undefined,
-        onExpandedChange: (expanded) => {
-            action('onExpandedChange')(section.id, expanded);
-            setExpandedId(expanded ? section.id : '');
-        },
-    }));
-
-    return <NavigationView data={{sections, loaded: true}} />;
-};
-
-export const ControlledExpand: Story = {
-    render: () => <ControlledExpandStory />,
-};

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

@@ -1,35 +0,0 @@
-import type {NavigationViewSection} from '../../../types/navigation';
-
-export const VIEW_COLUMNS = ['Name and Title', 'Type', 'Datacatalog description'];
-
-export const makeViewRows = (count: number) =>
-    Array.from({length: count}, (_, index) => ({
-        'Name and Title': `field_${index + 1}`,
-        Type: index % 2 === 0 ? 'string' : 'int64',
-        'Datacatalog description': index % 3 === 0 ? 'Primary identifier' : '',
-    }));
-
-export const VIEW_SECTIONS: NavigationViewSection[] = [
-    {
-        id: 'general',
-        title: 'General',
-        columns: VIEW_COLUMNS,
-        rows: makeViewRows(4),
-        loaded: true,
-        defaultExpanded: true,
-    },
-    {
-        id: 'attributes',
-        title: 'Attributes',
-        columns: VIEW_COLUMNS,
-        rows: makeViewRows(3),
-        loaded: true,
-    },
-    {
-        id: 'computed',
-        title: 'Computed fields',
-        columns: VIEW_COLUMNS,
-        rows: [],
-        loaded: true,
-    },
-];

package/src/modules/QueriesList/QueriesList.scss

@@ -1,10 +0,0 @@
-.qp-queries-list {
-  height: 100%;
-
-  &__comparison-actions {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-}

package/src/modules/QueriesList/QueriesList.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {FieldsSelector} from '../../components';
-import {getListKey} from '../../helpers/getListKey';
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListFilterConfig,
-    QueryListItem,
-    QueryListRow,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListSearchConfig,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {HistoryComparisonActions} from '../HistoryComparisonActions';
-import {HistoryHeader} from '../HistoryHeader';
-import {HistoryLayout} from '../HistoryLayout';
-import {RowsList} from '../RowsList';
-import './QueriesList.scss';
-
-const block = cn('qp-queries-list');
-
-export type QueriesListProps<T extends QueryListRow> = {
-    className?: string;
-    title: React.ReactNode;
-    logo?: React.ReactNode;
-    search: QueryListSearchConfig;
-    filter?: QueryListFilterConfig;
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
-    onListItemClick?: (item: QueryListItem<T>) => void;
-};
-
-export const QueriesList = <T extends QueryListRow>({
-    title,
-    logo,
-    search,
-    filter,
-    items,
-    selectedRowId,
-    editing,
-    comparison,
-    visibleFields,
-    getRowActions,
-    renderRow,
-    onListItemClick,
-    className,
-}: QueriesListProps<T>) => {
-    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
-    const rowVariant = showSearchResults ? 'search' : 'default';
-
-    return (
-        <HistoryLayout
-            className={block(null, className)}
-            title={title}
-            logo={logo}
-            actions={visibleFields && <FieldsSelector {...visibleFields} />}
-            header={
-                <HistoryHeader
-                    className={block('header')}
-                    search={search.value}
-                    fullSearch={search.fullSearch}
-                    hasClear={search.hasClear}
-                    filter={filter}
-                    onUpdate={search.onUpdate}
-                />
-            }
-            footer={
-                comparison && (
-                    <HistoryComparisonActions
-                        comparison={comparison}
-                        className={block('comparison-actions')}
-                    />
-                )
-            }
-        >
-            <RowsList
-                key={getListKey(items, rowVariant)}
-                items={items}
-                rowVariant={rowVariant}
-                selectedRowId={selectedRowId}
-                visibleFields={visibleFields}
-                editing={editing}
-                comparison={comparison}
-                getRowActions={getRowActions}
-                renderRow={renderRow}
-                showFiltersHint={Boolean(filter)}
-                onItemClick={onListItemClick}
-            />
-        </HistoryLayout>
-    );
-};

package/src/modules/QueriesList/index.ts

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

package/src/modules/RowsList/RowsList.scss

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