@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/widgets/SavedQueries/SavedQueries.stories.tsx

@@ -1,192 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Text} from '@gravity-ui/uikit';
-import {action} from 'storybook/actions';
-import {
-    QueryListFieldKey,
-    QueryListFilterConfig,
-    QueryListItem,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import {SavedQueries} from './SavedQueries';
-
-const QUERY = `SELECT
-    session_id,
-    COUNT(*) AS sessions_count
-FROM visits
-GROUP BY session_id;`;
-
-const BASE_ITEMS: QueryListItem<SavedQuery>[] = [
-    {
-        id: 1,
-        title: 'New Query',
-        savedAt: '2026-04-29T12:00:00.000Z',
-        engine: 'SQL',
-        author: 'Anna Petrova',
-        query: QUERY,
-        height: 52,
-    },
-    {
-        id: 2,
-        title: 'Daily conversion report',
-        savedAt: '2026-04-29T11:00:00.000Z',
-        engine: 'YQL',
-        author: 'Pavel Sidorov',
-        query: QUERY,
-        height: 52,
-    },
-    {
-        id: 3,
-        title: 'Product funnel',
-        savedAt: '2026-04-28T09:00:00.000Z',
-        engine: 'SQL',
-        author: 'Maria Volkova',
-        query: 'SELECT 1;',
-        height: 52,
-    },
-];
-
-const filterFields: QueryListFilterConfig['fields'] = [
-    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
-    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
-    {
-        id: 'engine',
-        type: 'checkboxGroup',
-        title: 'Engine',
-        initialValue: [],
-        items: [
-            {id: 'yql', title: 'YQL'},
-            {id: 'sql', title: 'SQL'},
-        ],
-    },
-];
-
-const fields: QueryListVisibleFieldsConfig<SavedQuery>['fields'] = [
-    {id: 'savedAt', title: 'Saved date'},
-    {id: 'engine', title: 'Engine'},
-    {id: 'author', title: 'Author'},
-];
-
-const meta: Meta<typeof SavedQueries> = {
-    title: 'Widgets/SavedQueries',
-    component: SavedQueries,
-    tags: ['autodocs'],
-    parameters: {layout: 'padded'},
-};
-
-export default meta;
-type Story = StoryObj<typeof SavedQueries>;
-
-const SavedQueriesStory = () => {
-    const [items, setItems] = useState(BASE_ITEMS);
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-    const [visibleFields, setVisibleFields] = useState<QueryListFieldKey<SavedQuery>[]>([
-        'savedAt',
-        'engine',
-        'author',
-    ]);
-    const [comparedRowIds, setComparedRowIds] = useState<number[]>([]);
-    const [editingRowId, setEditingRowId] = useState<number>();
-
-    const filteredItems = useMemo(() => {
-        if (!search.value) return items;
-
-        const value = search.value.toLowerCase();
-        return items.filter((item) => {
-            if ('header' in item) return false;
-
-            return search.fullSearch
-                ? item.title.toLowerCase().includes(value) ||
-                      item.query?.toLowerCase().includes(value)
-                : item.title.toLowerCase().includes(value);
-        });
-    }, [items, search]);
-
-    const updateTitle = (item: SavedQuery, title: string) => {
-        setItems((currentItems) =>
-            currentItems.map((currentItem) =>
-                'id' in currentItem && currentItem.id === item.id
-                    ? {...currentItem, title}
-                    : currentItem,
-            ),
-        );
-        setEditingRowId(undefined);
-    };
-
-    return (
-        <div style={{width: 360, height: 560}}>
-            <SavedQueries
-                items={filteredItems}
-                search={{...search, hasClear: true, onUpdate: setSearch}}
-                filter={{
-                    fields: filterFields,
-                    onApply: action('onFilterApply'),
-                    onReset: action('onFilterReset'),
-                }}
-                visibleFields={{value: visibleFields, fields, onChange: setVisibleFields}}
-                editing={{
-                    rowId: editingRowId,
-                    onSubmit: updateTitle,
-                    onCancel: () => setEditingRowId(undefined),
-                }}
-                comparison={{
-                    enabled: Boolean(comparedRowIds.length),
-                    comparedRowIds,
-                    onChange: (item, selected) => {
-                        setComparedRowIds((currentIds) =>
-                            selected
-                                ? [...currentIds.filter((id) => id !== item.id).slice(-1), item.id]
-                                : currentIds.filter((id) => id !== item.id),
-                        );
-                    },
-                    onCancel: () => setComparedRowIds([]),
-                    onCompare: () => action('onCompare')(comparedRowIds),
-                }}
-                getRowActions={(item) => [
-                    {text: 'Copy to', onClick: () => action('onCopyTo')(item)},
-                    {text: 'Show operations', onClick: () => action('onShowOperations')(item)},
-                    {text: 'Edit', onClick: () => setEditingRowId(item.id)},
-                    {
-                        text: 'Compare with baseline',
-                        onClick: () => setComparedRowIds([item.id]),
-                    },
-                    {text: 'Delete', theme: 'danger', onClick: () => action('onDelete')(item)},
-                ]}
-            />
-        </div>
-    );
-};
-
-type ExtendedSavedQuery = SavedQuery & {team: string};
-
-const CustomAuthorStory = () => {
-    const items: QueryListItem<ExtendedSavedQuery>[] = BASE_ITEMS.map((item) =>
-        'header' in item ? item : {...item, team: 'Analytics'},
-    );
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-
-    return (
-        <div style={{width: 360, height: 280}}>
-            <SavedQueries
-                items={items}
-                search={{...search, hasClear: true, onUpdate: setSearch}}
-                renderAuthor={(item) => <Text color="complementary">{item.team}</Text>}
-            />
-        </div>
-    );
-};
-
-const EmptyStory = () => {
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-
-    return (
-        <div style={{width: 360, height: 280}}>
-            <SavedQueries items={[]} search={{...search, hasClear: true, onUpdate: setSearch}} />
-        </div>
-    );
-};
-
-export const Default: Story = {render: () => <SavedQueriesStory />};
-export const CustomAuthor: Story = {render: () => <CustomAuthorStory />};
-export const Empty: Story = {render: () => <EmptyStory />};

package/src/widgets/SavedQueries/SavedQueries.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {QueriesList} from '../../modules';
-import {
-    QueryListComparisonConfig,
-    QueryListEditingConfig,
-    QueryListFilterConfig,
-    QueryListItem,
-    QueryListRowAction,
-    QueryListRowRenderData,
-    QueryListSearchConfig,
-    QueryListVisibleFieldsConfig,
-} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-import i18n from './i18n';
-import {SavedQueryRowContent} from './SavedQueryRowContent';
-import './SavedQueries.scss';
-
-export type SavedQueriesProps<T extends SavedQuery = SavedQuery> = {
-    className?: string;
-    title?: string;
-    logo?: React.ReactNode;
-    search: QueryListSearchConfig;
-    filter?: QueryListFilterConfig;
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    editing?: QueryListEditingConfig<T>;
-    comparison?: QueryListComparisonConfig<T>;
-    visibleFields?: QueryListVisibleFieldsConfig<T>;
-    renderAuthor?: (item: T) => React.ReactNode;
-    renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;
-    getRowActions?: (item: T) => QueryListRowAction<T>[];
-    onListItemClick?: (item: QueryListItem<T>) => void;
-};
-
-const block = cn('qp-saved-queries');
-
-export const SavedQueries = <T extends SavedQuery>({
-    title,
-    logo,
-    search,
-    filter,
-    items,
-    selectedRowId,
-    editing,
-    comparison,
-    visibleFields,
-    renderAuthor,
-    renderRowItem,
-    getRowActions,
-    onListItemClick,
-    className,
-}: SavedQueriesProps<T>) => {
-    return (
-        <QueriesList
-            className={block(null, className)}
-            title={title || i18n('title_saved')}
-            logo={logo}
-            search={search}
-            filter={filter}
-            items={items}
-            selectedRowId={selectedRowId}
-            visibleFields={visibleFields}
-            editing={editing}
-            comparison={comparison}
-            getRowActions={getRowActions}
-            renderRow={(data) =>
-                renderRowItem ? (
-                    renderRowItem(data)
-                ) : (
-                    <SavedQueryRowContent {...data} renderAuthor={renderAuthor} />
-                )
-            }
-            onListItemClick={onListItemClick}
-        />
-    );
-};

package/src/widgets/SavedQueries/SavedQueryRowContent.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import {HistoryGroupHeader} from '../../components';
-import {SavedQueryRow, SavedQuerySearchRow} from '../../modules';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {SavedQuery} from '../../types/savedQueries';
-
-type Props<T extends SavedQuery> = QueryListRowRenderData<T> & {
-    renderAuthor?: (item: T) => React.ReactNode;
-};
-
-export const SavedQueryRowContent = <T extends SavedQuery>({
-    item,
-    variant,
-    renderAuthor,
-    ...data
-}: Props<T>) => {
-    if ('header' in item) {
-        return <HistoryGroupHeader title={item.header} />;
-    }
-
-    return variant === 'search' ? (
-        <SavedQuerySearchRow {...data} item={item} renderAuthor={renderAuthor} />
-    ) : (
-        <SavedQueryRow {...data} item={item} renderAuthor={renderAuthor} />
-    );
-};

package/src/widgets/SavedQueries/i18n/dicts.ts

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

package/src/widgets/SavedQueries/i18n/en.json

@@ -1,3 +0,0 @@
-{
-    "title_saved": "Saved"
-}

package/src/widgets/SavedQueries/i18n/index.ts

@@ -1,4 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-import dicts from './dicts';
-
-export default addI18Keysets('qp:saved-queries', dicts);

package/src/widgets/SavedQueries/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-    "title_saved": "Сохранённые"
-}

package/src/widgets/SavedQueries/index.ts

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

package/src/widgets/TutorialsHistory/TutorialRowContent.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {QueryListRowRenderData} from '../../types/queryList';
-import {TutorialHistoryRow} from '../../types/tutorial';
-import {HistoryGroupHeader} from '../../components';
-import {TutorialRow, TutorialSearchRow} from '../../modules';
-
-export const TutorialRowContent = <T extends TutorialHistoryRow>({
-    item,
-    variant,
-}: QueryListRowRenderData<T>) => {
-    if ('header' in item) {
-        return <HistoryGroupHeader title={item.header} />;
-    }
-
-    return variant === 'search' ? <TutorialSearchRow item={item} /> : <TutorialRow item={item} />;
-};

package/src/widgets/TutorialsHistory/TutorialsHistory.scss

@@ -1,3 +0,0 @@
-.qp-tutorials-history {
-  height: 100%;
-}

package/src/widgets/TutorialsHistory/TutorialsHistory.stories.tsx

@@ -1,135 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {TutorialsHistory} from './TutorialsHistory';
-import {QueryListFilterConfig, QueryListItem} from '../../types/queryList';
-import {TutorialHistoryRow} from '../../types/tutorial';
-import {action} from 'storybook/actions';
-
-const QUERY = `use test;
-
-SELECT
-    "test_session" AS session_id,
-    "test_task" AS task_id,
-    SUBSTRING("test", 1, 1) AS truncated_char`;
-
-const filterFields: QueryListFilterConfig['fields'] = [
-    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
-    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
-    {
-        id: 'dialect',
-        type: 'checkboxGroup',
-        title: 'Dialect',
-        initialValue: [],
-        items: [
-            {id: 'yql', title: 'YQL'},
-            {id: 'sql', title: 'SQL'},
-        ],
-    },
-];
-
-const logFilterApply = action('onFilterApply');
-const logFilterReset = action('onFilterReset');
-
-const BASE_ITEMS: QueryListItem<TutorialHistoryRow>[] = [
-    {
-        id: 1,
-        title: 'Getting started with YQL',
-        query: QUERY,
-        height: 28,
-    },
-    {
-        id: 2,
-        title: 'Working with tables',
-        query: QUERY,
-        height: 28,
-    },
-    {
-        id: 3,
-        title: 'Window functions',
-        query: QUERY,
-        height: 28,
-    },
-];
-
-const meta: Meta<typeof TutorialsHistory> = {
-    title: 'Widgets/TutorialsHistory',
-    component: TutorialsHistory,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof TutorialsHistory>;
-
-const DefaultStory = () => {
-    const [items, setItems] = useState([...BASE_ITEMS]);
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-
-    const handleOnSearch = (data: {value: string; fullSearch: boolean}) => {
-        setSearch(data);
-
-        if (!data.value) {
-            setItems(BASE_ITEMS);
-            return;
-        }
-
-        const newItems = BASE_ITEMS.filter((item) => {
-            if (!('id' in item)) return false;
-
-            const title = item.title.toLowerCase();
-            const query = item.query?.toLowerCase();
-            const searchValue = data.value.toLowerCase();
-
-            if (data.fullSearch) {
-                return title.includes(searchValue) || query?.includes(searchValue);
-            }
-
-            return title.includes(searchValue);
-        });
-        setItems(newItems);
-    };
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <TutorialsHistory
-                title="Tutorials"
-                items={items}
-                filter={{
-                    fields: filterFields,
-                    onApply: logFilterApply,
-                    onReset: logFilterReset('reset'),
-                }}
-                search={{
-                    value: search.value,
-                    fullSearch: search.fullSearch,
-                    hasClear: true,
-                    onUpdate: handleOnSearch,
-                }}
-            />
-        </div>
-    );
-};
-
-const EmptyStory = () => {
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-
-    return (
-        <div style={{width: 300, height: 500}}>
-            <TutorialsHistory
-                title="Tutorials"
-                items={[]}
-                search={{
-                    value: search.value,
-                    fullSearch: search.fullSearch,
-                    hasClear: true,
-                    onUpdate: setSearch,
-                }}
-            />
-        </div>
-    );
-};
-
-export const Default: Story = {render: () => <DefaultStory />};
-export const Empty: Story = {render: () => <EmptyStory />};

package/src/widgets/TutorialsHistory/TutorialsHistory.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import {HistoryHeader, HistoryLayout, RowsList} from '../../modules';
-import i18n from './i18n';
-import {QueryListFilterConfig, QueryListItem, QueryListSearchConfig} from '../../types/queryList';
-import {TutorialHistoryRow} from '../../types/tutorial';
-import {getListKey} from '../../helpers/getListKey';
-import {TutorialRowContent} from './TutorialRowContent';
-import cn from 'bem-cn-lite';
-import './TutorialsHistory.scss';
-
-export type TutorialsHistoryProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
-    className?: string;
-    title?: string;
-    logo?: React.ReactNode;
-    search: QueryListSearchConfig;
-    filter?: QueryListFilterConfig;
-    items: QueryListItem<T>[];
-    selectedRowId?: T['id'];
-    onListItemClick?: (item: QueryListItem<T>) => void;
-};
-
-const block = cn('qp-tutorials-history');
-
-export const TutorialsHistory = <T extends TutorialHistoryRow>({
-    title,
-    logo,
-    search,
-    filter,
-    items,
-    selectedRowId,
-    onListItemClick,
-    className,
-}: TutorialsHistoryProps<T>) => {
-    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
-    const rowVariant = showSearchResults ? 'search' : 'default';
-
-    return (
-        <HistoryLayout
-            className={block(null, className)}
-            title={title || i18n('title_tutorials')}
-            logo={logo}
-            header={
-                <HistoryHeader
-                    search={search.value}
-                    fullSearch={search.fullSearch}
-                    hasClear={search.hasClear}
-                    filter={filter}
-                    onUpdate={search.onUpdate}
-                />
-            }
-        >
-            <RowsList
-                key={getListKey(items, rowVariant)}
-                items={items}
-                rowVariant={rowVariant}
-                selectedRowId={selectedRowId}
-                renderRow={(data) => <TutorialRowContent {...data} />}
-                showFiltersHint={Boolean(filter)}
-                onItemClick={onListItemClick}
-            />
-        </HistoryLayout>
-    );
-};

package/src/widgets/TutorialsHistory/i18n/dicts.ts

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

package/src/widgets/TutorialsHistory/i18n/en.json

@@ -1,3 +0,0 @@
-{
-    "title_tutorials": "Tutorials"
-}

package/src/widgets/TutorialsHistory/i18n/index.ts

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

package/src/widgets/TutorialsHistory/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-    "title_tutorials": "Туториалы"
-}

package/src/widgets/TutorialsHistory/index.ts

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

package/src/widgets/index.ts

@@ -1,20 +0,0 @@
-export {QueriesHistory} from './QueriesHistory';
-export type {QueriesHistoryProps} from './QueriesHistory';
-export {SavedQueries} from './SavedQueries';
-export type {SavedQueriesProps} from './SavedQueries';
-export {DashboardCharts} from './DashboardCharts';
-export {TutorialsHistory} from './TutorialsHistory';
-export type {TutorialsHistoryProps} from './TutorialsHistory';
-export {QueryResults} from './QueryResults';
-export type {QueryResultsProps} from './QueryResults';
-export {
-    QueriesNavigation,
-    createTableDetailConfig,
-    createNavigationDetailResolver,
-} from './QueriesNavigation';
-export type {
-    QueriesNavigationProps,
-    CreateTableDetailConfigOptions,
-    NavigationPreviewResolver,
-    NavigationSchemaResolver,
-} from './QueriesNavigation';

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-    "extends": "@gravity-ui/tsconfig/tsconfig.json",
-    "compilerOptions": {
-        "outDir": "./build/",
-        "rootDir": "src",
-        "target": "es2020",
-        "module": "ESNext",
-        "moduleResolution": "bundler",
-        "noEmitOnError": true,
-        "allowJs": true,
-        "esModuleInterop": true,
-        "experimentalDecorators": true,
-        "typeRoots": ["./node_modules/@types"],
-        "skipLibCheck": true,
-        "jsx": "react",
-        "declaration": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "build"]
-}

package/tsconfig.publish.json

@@ -1,11 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        "outDir": "build/esm",
-        "declaration": true,
-        "emitDeclarationOnly": true,
-        "noEmit": false
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "build", "**/*.visual.test.tsx"]
-}