@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/ErrorTree/internal/ErrorTreeNode.tsx

@@ -1,178 +0,0 @@
-import React, {useState} from 'react';
-import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg';
-import ChevronUpIcon from '@gravity-ui/icons/svgs/chevron-up.svg';
-import CircleInfoIcon from '@gravity-ui/icons/svgs/circle-info.svg';
-import SquareExclamationIcon from '@gravity-ui/icons/svgs/square-exclamation.svg';
-import TriangleExclamationIcon from '@gravity-ui/icons/svgs/triangle-exclamation.svg';
-import ArrowUpIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
-import {Button, Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
-import {formatAttributes} from '../helpers/formatAttributes';
-import i18n from '../i18n';
-import {ErrorTreeChildren} from './ErrorTreeChildren';
-
-import './ErrorTreeNode.scss';
-
-const block = cn('qp-error-tree');
-
-const SEVERITY_ICONS = {
-    error: TriangleExclamationIcon,
-    warning: SquareExclamationIcon,
-    info: CircleInfoIcon,
-};
-
-type ErrorTreeNodeProps = Pick<
-    ErrorTreeProps,
-    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
-> & {
-    className?: string;
-    item: ErrorTreeItem;
-    level: number;
-    defaultNodeExpanded: boolean;
-    renderChildren?: (className: string) => React.ReactNode;
-    onShowParent?: () => void;
-};
-
-export function ErrorTreeNode({
-    className,
-    item,
-    level,
-    defaultExpanded = true,
-    defaultInfoExpanded = false,
-    defaultNodeExpanded,
-    renderAttributes,
-    onPositionClick,
-    renderChildren,
-    onShowParent,
-}: ErrorTreeNodeProps) {
-    const [attributesExpanded, setAttributesExpanded] = useState(false);
-    const children = item.children ?? [];
-    const hasChildren = children.length > 0;
-    const hasAttributes = item.attributes !== undefined;
-    const position = item.position;
-    const hasCode = item.code !== undefined;
-    const formattedAttributes = hasAttributes ? formatAttributes(item.attributes) : null;
-
-    let attributesContent: React.ReactNode = null;
-
-    if (hasAttributes) {
-        if (renderAttributes) {
-            attributesContent = renderAttributes(item.attributes as Record<string, unknown>, item);
-        } else if (formattedAttributes === null) {
-            attributesContent = (
-                <Text color="secondary">{i18n('context_attributes-unavailable')}</Text>
-            );
-        } else {
-            attributesContent = (
-                <pre className={block('attributes-content')}>{formattedAttributes}</pre>
-            );
-        }
-    }
-
-    const line = (
-        <Flex alignItems="center" gap={2} className={block('line')}>
-            {onShowParent && (
-                <Button
-                    view="flat-secondary"
-                    size="s"
-                    title={i18n('action_show-parent')}
-                    aria-label={i18n('action_show-parent')}
-                    className={block('show-parent')}
-                    onClick={onShowParent}
-                >
-                    <Icon data={ArrowUpIcon} size={16} />
-                </Button>
-            )}
-            <Icon
-                data={SEVERITY_ICONS[item.severity]}
-                size={16}
-                className={block('severity-icon', {[item.severity]: true})}
-            />
-            {hasAttributes && (
-                <Button
-                    view="flat-secondary"
-                    size="s"
-                    className={block('attributes-button')}
-                    onClick={() => setAttributesExpanded((expanded) => !expanded)}
-                >
-                    {i18n('field_attributes')}
-                    <Icon data={attributesExpanded ? ChevronUpIcon : ChevronDownIcon} size={16} />
-                </Button>
-            )}
-            {position && (
-                <span className={block('position')}>{`${position.row}:${position.column}`}</span>
-            )}
-            {position && onPositionClick ? (
-                <Button
-                    view="flat-secondary"
-                    size="s"
-                    className={block('message-button')}
-                    title={item.message}
-                    onClick={() => onPositionClick(item, position)}
-                >
-                    {item.message}
-                </Button>
-            ) : (
-                <span className={block('message')} title={item.message}>
-                    {item.message}
-                </span>
-            )}
-            {hasCode && (
-                <span className={block('code')}>{`${i18n('field_code')}: ${item.code}`}</span>
-            )}
-        </Flex>
-    );
-
-    const details = (
-        <>
-            {attributesExpanded && <div className={block('attributes')}>{attributesContent}</div>}
-            {hasChildren && (
-                <>
-                    {renderChildren ? (
-                        renderChildren(block('children'))
-                    ) : (
-                        <ErrorTreeChildren
-                            className={block('children')}
-                            items={children}
-                            level={level + 1}
-                            defaultExpanded={defaultExpanded}
-                            defaultInfoExpanded={defaultInfoExpanded}
-                            renderAttributes={renderAttributes}
-                            onPositionClick={onPositionClick}
-                        />
-                    )}
-                </>
-            )}
-        </>
-    );
-
-    if (!hasChildren) {
-        return (
-            <div className={block('node', className)}>
-                <Flex alignItems="center" gap={1} className={block('summary')}>
-                    <span className={block('expand-placeholder')} />
-                    {line}
-                </Flex>
-                {attributesExpanded && (
-                    <div className={block('attributes')}>{attributesContent}</div>
-                )}
-            </div>
-        );
-    }
-
-    return (
-        <Disclosure defaultExpanded={defaultNodeExpanded} className={block('node', className)}>
-            <Disclosure.Summary>
-                {(_props, defaultButton) => (
-                    <Flex alignItems="center" gap={1} className={block('summary')}>
-                        <span className={block('expand-button')}>{defaultButton}</span>
-                        {line}
-                    </Flex>
-                )}
-            </Disclosure.Summary>
-            <Disclosure.Details>{details}</Disclosure.Details>
-        </Disclosure>
-    );
-}

package/src/components/ErrorTree/internal/IntermediateMessages.scss

@@ -1,13 +0,0 @@
-.qp-error-tree {
-    &__intermediate {
-        margin-block-end: var(--g-spacing-2);
-    }
-
-    &__intermediate-summary {
-        min-inline-size: 0;
-    }
-
-    &__intermediate-details {
-        padding-inline-start: var(--g-spacing-7);
-    }
-}

package/src/components/ErrorTree/internal/IntermediateMessages.tsx

@@ -1,127 +0,0 @@
-import React, {useCallback, useMemo, useState} from 'react';
-import {Button, Disclosure, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import type {ErrorTreeItem, ErrorTreeProps} from '../../../types/errorTree';
-import {getIntermediateChain} from '../helpers/getIntermediateChain';
-import i18n from '../i18n';
-import {ErrorTreeNode} from './ErrorTreeNode';
-
-import './IntermediateMessages.scss';
-
-const block = cn('qp-error-tree');
-
-type IntermediateMessagesProps = Pick<
-    ErrorTreeProps,
-    'defaultExpanded' | 'defaultInfoExpanded' | 'renderAttributes' | 'onPositionClick'
-> & {
-    item: ErrorTreeItem;
-    level: number;
-};
-
-export function IntermediateMessages({
-    item,
-    level,
-    defaultExpanded = true,
-    defaultInfoExpanded = false,
-    renderAttributes,
-    onPositionClick,
-}: IntermediateMessagesProps) {
-    const {hiddenItems, terminalItem} = useMemo(() => getIntermediateChain(item), [item]);
-    const nodeDefaultExpanded =
-        terminalItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
-    const [revealedParents, setRevealedParents] = useState(0);
-    const [expanded, setExpanded] = useState(nodeDefaultExpanded);
-    const [showAllVersion, setShowAllVersion] = useState(0);
-    const isCompact = hiddenItems.length > 1;
-
-    const renderChain = useCallback(
-        (itemIndex: number, className?: string): React.ReactNode => {
-            const currentItem =
-                itemIndex < hiddenItems.length ? hiddenItems[itemIndex] : terminalItem;
-            const hasHiddenParent = itemIndex > 0;
-            const hasNextItem = itemIndex < hiddenItems.length;
-            const currentDefaultExpanded =
-                currentItem.severity === 'info' ? defaultInfoExpanded : defaultExpanded;
-
-            return (
-                <ErrorTreeNode
-                    key={`${currentItem.id}-${showAllVersion}`}
-                    className={className}
-                    item={currentItem}
-                    level={level + itemIndex}
-                    defaultNodeExpanded={showAllVersion > 0 || currentDefaultExpanded}
-                    defaultExpanded={defaultExpanded}
-                    defaultInfoExpanded={defaultInfoExpanded}
-                    renderAttributes={renderAttributes}
-                    onPositionClick={onPositionClick}
-                    onShowParent={
-                        hasHiddenParent ? () => setRevealedParents((value) => value + 1) : undefined
-                    }
-                    renderChildren={
-                        hasNextItem
-                            ? (childClassName) => renderChain(itemIndex + 1, childClassName)
-                            : undefined
-                    }
-                />
-            );
-        },
-        [
-            defaultExpanded,
-            defaultInfoExpanded,
-            hiddenItems,
-            level,
-            onPositionClick,
-            renderAttributes,
-            showAllVersion,
-            terminalItem,
-        ],
-    );
-
-    if (!isCompact) {
-        return (
-            <ErrorTreeNode
-                item={item}
-                level={level}
-                defaultNodeExpanded={
-                    item.severity === 'info' ? defaultInfoExpanded : defaultExpanded
-                }
-                defaultExpanded={defaultExpanded}
-                defaultInfoExpanded={defaultInfoExpanded}
-                renderAttributes={renderAttributes}
-                onPositionClick={onPositionClick}
-            />
-        );
-    }
-
-    const firstVisibleItemIndex = Math.max(hiddenItems.length - revealedParents, 0);
-
-    return (
-        <Disclosure expanded={expanded} onUpdate={setExpanded} className={block('intermediate')}>
-            <Disclosure.Summary>
-                {(_props, defaultButton) => (
-                    <Flex alignItems="center" gap={2} className={block('intermediate-summary')}>
-                        {defaultButton}
-                        <Text color="secondary">
-                            {i18n('context_intermediate-messages', {count: hiddenItems.length})}
-                        </Text>
-                        <Button
-                            view="flat-secondary"
-                            size="s"
-                            onClick={() => {
-                                setExpanded(true);
-                                setRevealedParents(hiddenItems.length);
-                                setShowAllVersion((version) => version + 1);
-                            }}
-                        >
-                            {i18n('action_show-all')}
-                        </Button>
-                    </Flex>
-                )}
-            </Disclosure.Summary>
-            <Disclosure.Details>
-                {renderChain(firstVisibleItemIndex, block('intermediate-details'))}
-            </Disclosure.Details>
-        </Disclosure>
-    );
-}

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'),
-    },
-};