@gravity-ui/querieskit 1.2.0 → 1.3.1

package/src/components/DataTable/DataTable.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import BaseDataTable, {
-    DataTableProps as BaseDataTableProps,
-    Column,
-} from '@gravity-ui/react-data-table';
-import cn from 'bem-cn-lite';
-
-import {EmptyContent, EmptyContentVariant} from '../EmptyContent';
-
-import './DataTable.scss';
-
-export type {Column};
-
-const block = cn('qp-data-table');
-
-const SKELETON_ROWS_COUNT = 4;
-
-export type DataTableProps<T> = {
-    loading?: boolean;
-    loaded?: boolean;
-    className?: string;
-    emptyVariant?: EmptyContentVariant;
-} & Omit<BaseDataTableProps<T>, 'theme'>;
-
-function renderEmptyCell(key: string, align?: Column<unknown>['align']) {
-    return (
-        <td key={key} className={block('td', {empty: true})}>
-            <div className={block('content', {empty: true, align})}>
-                <div className={block('no-data-placeholder')} />
-            </div>
-        </td>
-    );
-}
-
-function renderLoadingSkeleton<T>(columns: Array<Column<T>>, displayIndices: boolean) {
-    return Array.from({length: SKELETON_ROWS_COUNT}, (_, index) => (
-        <tr key={index} className={block('tr', {empty: true})}>
-            {displayIndices && renderEmptyCell('__index')}
-            {columns.map((column) => renderEmptyCell(column.name, column.align))}
-        </tr>
-    ));
-}
-
-export function DataTable<T>(props: DataTableProps<T>) {
-    const {
-        loading,
-        loaded,
-        className,
-        emptyVariant = 'no-data',
-        columns,
-        data,
-        settings,
-        ...rest
-    } = props;
-
-    const isEmpty = loaded && data.length === 0;
-    const displayIndices = settings?.displayIndices !== false;
-
-    const renderEmptyRow = () => {
-        if (loading && !loaded) {
-            return renderLoadingSkeleton(columns, displayIndices);
-        }
-
-        return null;
-    };
-
-    return (
-        <div className={block(null, className)}>
-            <BaseDataTable
-                {...rest}
-                columns={columns}
-                data={data}
-                settings={settings}
-                theme="yandex-cloud"
-                emptyDataMessage=""
-                renderEmptyRow={renderEmptyRow}
-            />
-            {isEmpty && <EmptyContent variant={emptyVariant} className={block('empty')} />}
-        </div>
-    );
-}

package/src/components/DataTable/index.ts

@@ -1 +0,0 @@
-export {DataTable, type DataTableProps, type Column} from './DataTable';

package/src/components/EditableRowTitle/EditableRowTitle.tsx

@@ -1,67 +0,0 @@
-import React, {KeyboardEvent, useEffect, useState} from 'react';
-import {Text, TextInput} from '@gravity-ui/uikit';
-import {QueryListEditingRenderData, QueryListRow} from '../../types/queryList';
-
-export type EditableRowTitleProps<T extends QueryListRow = QueryListRow> = {
-    item: T;
-    editing?: QueryListEditingRenderData<T>;
-};
-
-export const EditableRowTitle = <T extends QueryListRow>({
-    item,
-    editing,
-}: EditableRowTitleProps<T>) => {
-    const [title, setTitle] = useState(item.title);
-    const isEditing = Boolean(editing?.enabled);
-    const isTitleEmpty = !title.trim();
-
-    useEffect(() => {
-        setTitle(item.title);
-    }, [item.id, item.title]);
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-        event.stopPropagation();
-
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const nextTitle = title.trim();
-
-            if (!nextTitle) {
-                return;
-            }
-
-            if (nextTitle === item.title) {
-                editing?.onCancel?.(item);
-                setTitle(item.title);
-                return;
-            }
-
-            editing?.onSubmit?.(item, nextTitle);
-        }
-
-        if (event.key === 'Escape') {
-            editing?.onCancel?.(item);
-            setTitle(item.title);
-        }
-    };
-
-    if (isEditing) {
-        return (
-            <div
-                onClick={(event) => event.stopPropagation()}
-                onMouseDown={(event) => event.stopPropagation()}
-            >
-                <TextInput
-                    autoFocus
-                    value={title}
-                    size="s"
-                    validationState={isTitleEmpty ? 'invalid' : undefined}
-                    onKeyDown={handleKeyDown}
-                    onUpdate={setTitle}
-                />
-            </div>
-        );
-    }
-
-    return <Text ellipsis>{item.title}</Text>;
-};

package/src/components/EditableRowTitle/index.ts

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

package/src/components/EmptyContent/EmptyContent.scss

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

package/src/components/EmptyContent/EmptyContent.tsx

@@ -1,57 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {Folder, NoSearchResults} from '@gravity-ui/illustrations';
-import cn from 'bem-cn-lite';
-import i18n from './i18n';
-import './EmptyContent.scss';
-
-const block = cn('qp-empty-content');
-
-export type EmptyContentVariant = 'no-files' | 'no-clusters' | 'nothing-found' | 'no-data';
-
-export type EmptyContentProps = {
-    variant: EmptyContentVariant;
-    className?: string;
-};
-
-type EmptyContentConfig = {
-    icon: FC<{height?: number}>;
-    title: string;
-    description?: string;
-};
-
-const CONTENT_BY_VARIANT: Record<EmptyContentVariant, EmptyContentConfig> = {
-    'no-files': {
-        icon: Folder,
-        title: i18n('title_no-files'),
-    },
-    'no-clusters': {
-        icon: Folder,
-        title: i18n('title_no-clusters'),
-    },
-    'nothing-found': {
-        icon: NoSearchResults,
-        title: i18n('title_nothing-found'),
-        description: i18n('context_try-change-filters'),
-    },
-    'no-data': {
-        icon: Folder,
-        title: i18n('title_no-data'),
-    },
-};
-
-export const EmptyContent: FC<EmptyContentProps> = ({variant, className}) => {
-    const {icon: Icon, title, description} = CONTENT_BY_VARIANT[variant];
-
-    return (
-        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
-            <Flex direction="column" gap={5}>
-                <Icon height={100} />
-                <Flex direction="column" alignItems="center" gap={1}>
-                    <Text variant="subheader-1">{title}</Text>
-                    {description && <Text>{description}</Text>}
-                </Flex>
-            </Flex>
-        </Flex>
-    );
-};

package/src/components/EmptyContent/i18n/dicts.ts

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

package/src/components/EmptyContent/i18n/en.json

@@ -1,7 +0,0 @@
-{
-    "title_nothing-found": "Nothing found",
-    "title_no-files": "No files",
-    "title_no-clusters": "No clusters",
-    "title_no-data": "No data",
-    "context_try-change-filters": "Try to change filters"
-}

package/src/components/EmptyContent/i18n/index.ts

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

package/src/components/EmptyContent/i18n/ru.json

@@ -1,7 +0,0 @@
-{
-    "title_nothing-found": "Ничего не найдено",
-    "title_no-files": "Нет файлов",
-    "title_no-clusters": "Нет кластеров",
-    "title_no-data": "Нет данных",
-    "context_try-change-filters": "Попробуйте изменить фильтры"
-}

package/src/components/EmptyContent/index.ts

@@ -1 +0,0 @@
-export {EmptyContent, type EmptyContentProps, type EmptyContentVariant} from './EmptyContent';

package/src/components/FieldsSearchToolbar/FieldsSearchToolbar.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import {FieldsSelector, type FieldsSelectorOption} from '../FieldsSelector';
-import {SearchWithButtons} from '../SearchWithButtons';
-
-export type FieldsSearchToolbarProps<K extends string = string> = {
-    search?: string;
-    onSearchUpdate?: (value: string) => void;
-    searchPlaceholder?: string;
-    fields: FieldsSelectorOption<K>[];
-    visibleFields: K[];
-    onVisibleFieldsChange: (value: K[]) => void;
-    hideFieldsSelector?: boolean;
-    className?: string;
-};
-
-export function FieldsSearchToolbar<K extends string = string>({
-    search,
-    onSearchUpdate,
-    searchPlaceholder,
-    fields,
-    visibleFields,
-    onVisibleFieldsChange,
-    hideFieldsSelector,
-    className,
-}: FieldsSearchToolbarProps<K>) {
-    const showFieldsSelector = !hideFieldsSelector && fields.length > 0;
-
-    return (
-        <SearchWithButtons
-            value={search}
-            placeholder={searchPlaceholder}
-            onUpdate={onSearchUpdate}
-            className={className}
-            endButtons={
-                showFieldsSelector
-                    ? [
-                          <FieldsSelector<K>
-                              key="fields-selector"
-                              fields={fields}
-                              value={visibleFields}
-                              onChange={onVisibleFieldsChange}
-                          />,
-                      ]
-                    : undefined
-            }
-        />
-    );
-}

package/src/components/FieldsSearchToolbar/index.ts

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

package/src/components/FieldsSelector/FieldsSelector.scss

@@ -1,18 +0,0 @@
-.qp-fields-selector {
-  padding: 8px 16px;
-
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    //width: 16px;
-    //height: 16px;
-    flex-shrink: 0;
-    cursor: pointer;
-    color: var(--g-color-base-generic-medium);
-
-    &_checked {
-      color: var(--g-color-base-brand);
-    }
-  }
-}

package/src/components/FieldsSelector/FieldsSelector.stories.tsx

@@ -1,48 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {action} from 'storybook/actions';
-import {FieldsSelector} from './FieldsSelector';
-
-const meta: Meta<typeof FieldsSelector> = {
-    title: 'Components/FieldsSelector',
-    component: FieldsSelector,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    argTypes: {
-        onChange: {action: true},
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof FieldsSelector>;
-
-const fields = [
-    {id: 'id', title: 'Id'},
-    {id: 'title', title: 'Title'},
-    {id: 'author', title: 'Author'},
-    {id: 'status', title: 'Status'},
-    {id: 'createdAt', title: 'Created at'},
-    {id: 'updatedAt', title: 'Updated at'},
-];
-
-const logOnChange = action('onChange');
-
-/** Fully controlled example: selected fields persist between openings of the popup */
-export const Controlled: Story = {
-    render: function ControlledFieldsSelector() {
-        const [values, setValues] = useState<string[]>(['id', 'status']);
-
-        return (
-            <FieldsSelector
-                fields={fields}
-                value={values}
-                onChange={(newValue) => {
-                    logOnChange(newValue);
-                    setValues(newValue);
-                }}
-            />
-        );
-    },
-};

package/src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,92 +0,0 @@
-import React, {ReactNode, useState} from 'react';
-import {Button, Flex, Icon, Popup, Text} from '@gravity-ui/uikit';
-import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
-import CheckIcon from '@gravity-ui/icons/svgs/check.svg';
-import {useToggle} from '../../helpers/useToggle';
-import i18n from './i18n';
-import './FieldsSelector.scss';
-import cn from 'bem-cn-lite';
-
-export type FieldsSelectorOption<K extends string = string> = {
-    id: K;
-    title: ReactNode;
-};
-
-export type FieldsSelectorProps<K extends string = string> = {
-    fields: FieldsSelectorOption<K>[];
-    value: K[];
-    onChange: (value: K[]) => void;
-    buttonLabel?: string;
-};
-
-const block = cn('qp-fields-selector');
-
-export const FieldsSelector = <K extends string = string>({
-    fields,
-    value,
-    onChange,
-    buttonLabel = i18n('action_configure-visible-fields'),
-}: FieldsSelectorProps<K>) => {
-    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
-    const [open, toggleOpen] = useToggle(false);
-
-    const handleOnChange = (field: K, isChecked: boolean) => {
-        const newValue = isChecked ? [...value, field] : value.filter((key) => key !== field);
-        onChange(newValue);
-    };
-
-    return (
-        <>
-            <Button ref={setButtonElement} onClick={toggleOpen} aria-label={buttonLabel}>
-                <Icon data={GearIcon} size={16} />
-            </Button>
-            <Popup
-                anchorElement={buttonElement}
-                placement="right-start"
-                open={open}
-                onOpenChange={toggleOpen}
-                className={block()}
-            >
-                <Flex direction="column" alignItems="flex-start" gap={1}>
-                    {fields.map((field) => {
-                        const isChecked = value.includes(field.id);
-                        const checkboxLabel =
-                            typeof field.title === 'string' ? field.title : undefined;
-
-                        return (
-                            <Flex
-                                key={field.id}
-                                gap={3}
-                                alignItems="center"
-                                role="checkbox"
-                                aria-checked={isChecked}
-                                aria-label={checkboxLabel}
-                                tabIndex={0}
-                                className={block('checkbox', {checked: isChecked})}
-                                onClick={() => {
-                                    handleOnChange(field.id, !isChecked);
-                                }}
-                                onKeyDown={(event) => {
-                                    if (event.key === 'Enter' || event.key === ' ') {
-                                        event.preventDefault();
-                                        handleOnChange(field.id, !isChecked);
-                                    }
-                                }}
-                            >
-                                <Icon
-                                    data={CheckIcon}
-                                    size={16}
-                                    className={block('checkbox-icon')}
-                                />
-
-                                <Text variant="body-1" color="primary">
-                                    {field.title}
-                                </Text>
-                            </Flex>
-                        );
-                    })}
-                </Flex>
-            </Popup>
-        </>
-    );
-};

package/src/components/FieldsSelector/i18n/dicts.ts

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

package/src/components/FieldsSelector/i18n/en.json

@@ -1,3 +0,0 @@
-{
-    "action_configure-visible-fields": "Configure visible fields"
-}

package/src/components/FieldsSelector/i18n/index.ts

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

package/src/components/FieldsSelector/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-    "action_configure-visible-fields": "Настроить видимые поля"
-}

package/src/components/FieldsSelector/index.ts

@@ -1,2 +0,0 @@
-export {FieldsSelector} from './FieldsSelector';
-export type {FieldsSelectorOption, FieldsSelectorProps} from './FieldsSelector';

package/src/components/HistoryFilter/HistoryFilter.scss

@@ -1,5 +0,0 @@
-.qp-history-filter {
-  &__container {
-    padding: 20px;
-  }
-}

package/src/components/HistoryFilter/HistoryFilter.stories.tsx

@@ -1,69 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {FormField} from '../SimpleForm';
-import {HistoryFilter} from './HistoryFilter';
-
-const meta: Meta<typeof HistoryFilter> = {
-    title: 'Components/HistoryFilter',
-    component: HistoryFilter,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof HistoryFilter>;
-
-const fields: FormField[] = [
-    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
-    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
-    {
-        id: 'checkobxGroup',
-        type: 'checkboxGroup',
-        title: 'Dialect',
-        initialValue: [],
-        items: [
-            {id: 'yql', title: 'YQL'},
-            {id: 'sql', title: 'SQL'},
-        ],
-    },
-];
-
-/** Basic filter with a set of fields and Apply/Reset handlers */
-export const Default: Story = {
-    args: {
-        fields,
-        onApply: (values) => alert(JSON.stringify(values)),
-        onReset: () => alert('Reset'),
-    },
-};
-
-/** Filter with a "changed" state — the popup toggle button is highlighted (view="action") */
-export const Changed: Story = {
-    args: {
-        fields,
-        isChanged: true,
-        onApply: (values) => alert(JSON.stringify(values)),
-        onReset: () => alert('Reset'),
-    },
-};
-
-/** Filter in controlled mode with provided values */
-export const Controlled: Story = {
-    args: {
-        fields,
-        values: {onlyMine: false},
-        onApply: (values) => alert(JSON.stringify(values)),
-        onReset: () => alert('Reset'),
-    },
-};
-
-/** Filter with initial values (uncontrolled mode) */
-export const WithInitialValues: Story = {
-    args: {
-        fields,
-        initialValues: {onlyMine: true},
-        onApply: (values) => alert(JSON.stringify(values)),
-        onReset: () => alert('Reset'),
-    },
-};

package/src/components/HistoryFilter/HistoryFilter.tsx

@@ -1,64 +0,0 @@
-import React, {FC, useRef, useState} from 'react';
-import {Button, Flex, Icon, Popup} from '@gravity-ui/uikit';
-import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
-import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
-import {useToggle} from '../../helpers/useToggle';
-import {QueryListFilterConfig} from '../../types/queryList';
-import cn from 'bem-cn-lite';
-import {SimpleForm} from '../SimpleForm';
-import i18n from './i18n';
-import './HistoryFilter.scss';
-
-const block = cn('qp-history-filter');
-
-export const HistoryFilter: FC<QueryListFilterConfig> = ({
-    fields = [],
-    values,
-    initialValues,
-    isChanged,
-    onApply,
-    onReset,
-}) => {
-    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
-    const [open, toggleOpen] = useToggle(false);
-    const valuesRef = useRef<Record<string, any>>(values ?? initialValues ?? {});
-
-    return (
-        <>
-            <Button
-                ref={setButtonElement}
-                onClick={toggleOpen}
-                view={isChanged ? 'action' : 'normal'}
-            >
-                <Icon data={FunnelIcon} size={16} />
-            </Button>
-            <Popup
-                anchorElement={buttonElement}
-                open={open}
-                onOpenChange={toggleOpen}
-                className={block()}
-                placement="bottom-start"
-            >
-                <div className={block('container')}>
-                    <SimpleForm
-                        fields={fields}
-                        values={values}
-                        initialValues={initialValues}
-                        onValuesChange={(nextValues) => {
-                            valuesRef.current = nextValues;
-                        }}
-                    />
-                </div>
-                <Flex gap={3} className={block('container')}>
-                    <Button view="action" onClick={() => onApply?.(valuesRef.current)}>
-                        {i18n('action_apply')}
-                    </Button>
-                    <Button onClick={onReset}>
-                        <Icon data={ArrowRotateLeftIcon} size={16} />
-                        {i18n('action_reset')}
-                    </Button>
-                </Flex>
-            </Popup>
-        </>
-    );
-};

package/src/components/HistoryFilter/i18n/dicts.ts

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

package/src/components/HistoryFilter/i18n/en.json

@@ -1,4 +0,0 @@
-{
-    "action_apply": "Apply",
-    "action_reset": "Reset"
-}

package/src/components/HistoryFilter/i18n/index.ts

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

package/src/components/HistoryFilter/i18n/ru.json

@@ -1,4 +0,0 @@
-{
-    "action_apply": "Применить",
-    "action_reset": "Сбросить"
-}

package/src/components/HistoryFilter/index.ts

@@ -1 +0,0 @@
-export {HistoryFilter} from './HistoryFilter';

package/src/components/HistoryGroupHeader/HistoryGroupHeader.scss

@@ -1,7 +0,0 @@
-.qp-history-list-header {
-  display: flex;
-  align-items: center;
-  height: 30px;
-  width: 100%;
-  padding: 4px 16px;
-}