@gravity-ui/querieskit 1.3.0 → 1.3.1

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';

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%;
-  }
-}