@gravity-ui/querieskit 1.2.0 → 1.3.1

package/src/components/QueryDuration/index.ts

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

package/src/components/QueryDuration/useQueryDuration.ts

@@ -1,34 +0,0 @@
-import {useEffect, useState} from 'react';
-import {QueryStatus} from '../../types/history';
-import {CompletedQueryStates} from '../../constants/query';
-import {durationDates} from '../../helpers/time';
-
-export const useQueryDuration = (
-    state: QueryStatus,
-    startTime?: string | number,
-    endTime?: string | number,
-) => {
-    const [duration, setDuration] = useState(durationDates(startTime, endTime));
-
-    useEffect(() => {
-        if (state === 'draft' || !startTime) {
-            setDuration('--:--');
-            return;
-        }
-        if (CompletedQueryStates.includes(state)) {
-            setDuration(endTime ? durationDates(startTime, endTime) : '--:--');
-            return;
-        }
-        setDuration(durationDates(startTime, endTime));
-        if (endTime) {
-            return;
-        }
-        const timer = setInterval(() => setDuration(durationDates(startTime, endTime)), 1000);
-
-        return () => {
-            clearInterval(timer);
-        };
-    }, [state, startTime, endTime]);
-
-    return duration;
-};

package/src/components/QueryStatusIcon/QueryStatusIcon.scss

@@ -1,17 +0,0 @@
-.qp-query-status-icon {
-  &_completed {
-    color: var(--g-color-text-positive-heavy);
-  }
-
-  &_failed {
-    color: var(--g-color-text-danger);
-  }
-
-  &_running {
-    color: var(--g-color-base-brand);
-  }
-
-  &_draft, &_aborted {
-    color: var(--g-color-text-secondary);
-  }
-}

package/src/components/QueryStatusIcon/QueryStatusIcon.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {QueryStatusIcon} from './QueryStatusIcon';
-
-const meta: Meta<typeof QueryStatusIcon> = {
-    title: 'Components/QueryStatusIcon',
-    component: QueryStatusIcon,
-    tags: ['autodocs'],
-    argTypes: {
-        status: {
-            control: 'select',
-            options: ['completed', 'failed', 'aborted', 'draft', 'running'],
-        },
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof QueryStatusIcon>;
-
-export const Completed: Story = {
-    args: {status: 'completed'},
-};
-
-export const Failed: Story = {
-    args: {status: 'failed'},
-};
-
-export const Aborted: Story = {
-    args: {status: 'aborted'},
-};
-
-export const Draft: Story = {
-    args: {status: 'draft'},
-};
-
-export const Running: Story = {
-    args: {status: 'running'},
-};
-
-export const AllStatuses: Story = {
-    render: () => (
-        <div style={{display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap'}}>
-            <QueryStatusIcon status="completed" />
-            <QueryStatusIcon status="failed" />
-            <QueryStatusIcon status="aborted" />
-            <QueryStatusIcon status="draft" />
-            <QueryStatusIcon status="running" />
-        </div>
-    ),
-};

package/src/components/QueryStatusIcon/QueryStatusIcon.tsx

@@ -1,37 +0,0 @@
-import React, {FC} from 'react';
-import {Icon, IconData, Spin} from '@gravity-ui/uikit';
-import CircleCheckIcon from '@gravity-ui/icons/svgs/circle-check.svg';
-import CircleExclamationIcon from '@gravity-ui/icons/svgs/circle-exclamation.svg';
-import FileIcon from '@gravity-ui/icons/svgs/file.svg';
-import CircleStopIcon from '@gravity-ui/icons/svgs/circle-stop.svg';
-import CirclePlayIcon from '@gravity-ui/icons/svgs/circle-play.svg';
-import {QueryStatus} from '../../types/history';
-import cn from 'bem-cn-lite';
-import './QueryStatusIcon.scss';
-import {ProgressQueryStatuses} from '../../constants/query';
-
-type Props = {
-    status: QueryStatus;
-    className?: string;
-};
-
-const STATUS_ICONS: Record<QueryStatus, IconData> = {
-    completed: CircleCheckIcon,
-    failed: CircleExclamationIcon,
-    draft: FileIcon,
-    aborted: CircleStopIcon,
-    running: CirclePlayIcon,
-};
-
-const block = cn('qp-query-status-icon');
-
-export const QueryStatusIcon: FC<Props> = ({status, className}) => {
-    if (ProgressQueryStatuses.includes(status)) {
-        return <Spin size="xs" />;
-    }
-
-    const statusIcon = STATUS_ICONS[status];
-    if (!statusIcon) return <>{status}</>;
-
-    return <Icon data={statusIcon} size={16} className={block({[status]: true}, className)} />;
-};

package/src/components/QueryStatusIcon/index.ts

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

package/src/components/RowActionsMenu/RowActionsMenu.tsx

@@ -1,47 +0,0 @@
-import React, {MouseEvent, useMemo} from 'react';
-import {Button, DropdownMenu, DropdownMenuItem, Icon} from '@gravity-ui/uikit';
-import EllipsisIcon from '@gravity-ui/icons/svgs/ellipsis.svg';
-import {QueryListRow, QueryListRowAction} from '../../types/queryList';
-
-export type RowActionsMenuProps<T extends QueryListRow = QueryListRow> = {
-    item: T;
-    actions?: QueryListRowAction<T>[];
-};
-
-export const RowActionsMenu = <T extends QueryListRow>({item, actions}: RowActionsMenuProps<T>) => {
-    const items = useMemo(() => {
-        return actions?.map<DropdownMenuItem>(({icon, text, theme, hidden, disabled, onClick}) => {
-            return {
-                text,
-                theme,
-                hidden,
-                disabled,
-                iconStart: icon,
-                action: () => {
-                    onClick(item);
-                },
-            };
-        });
-    }, [actions, item]);
-
-    if (!actions?.length) return null;
-
-    const handleClick = (event: MouseEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-
-    return (
-        <div onClick={handleClick}>
-            <DropdownMenu
-                size="s"
-                renderSwitcher={(props) => (
-                    <Button {...props} size="xs">
-                        <Icon data={EllipsisIcon} size={12} />
-                    </Button>
-                )}
-                items={items}
-            />
-        </div>
-    );
-};

package/src/components/RowActionsMenu/index.ts

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

package/src/components/RowLink/RowLink.scss

@@ -1,8 +0,0 @@
-.qp-row-link {
-  width: 100%;
-  padding: 4px 16px;
-  box-sizing: border-box;
-  text-decoration: none;
-  color: var(--g-color-text-primary);
-  cursor: pointer;
-}

package/src/components/RowLink/RowLink.tsx

@@ -1,23 +0,0 @@
-import React, {FC, ReactNode} from 'react';
-import cn from 'bem-cn-lite';
-import './RowLink.scss';
-
-const block = cn('qp-row-link');
-
-export type RowLinkProps = {
-    href?: string;
-    disabled?: boolean;
-    className?: string;
-    children: ReactNode;
-};
-
-export const RowLink: FC<RowLinkProps> = ({href, disabled, className, children}) => {
-    const isLink = Boolean(href) && !disabled;
-    const Wrap = isLink ? 'a' : 'div';
-
-    return (
-        <Wrap href={isLink ? href : undefined} className={block(null, className)}>
-            {children}
-        </Wrap>
-    );
-};

package/src/components/RowLink/index.ts

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

package/src/components/SearchRowLayout/SearchRowLayout.scss

@@ -1,18 +0,0 @@
-$search-row-height: 110px;
-$search-row-vertical-padding: 4px;
-$search-row-header-height: 20px;
-$search-row-gap: 8px;
-
-.qp-search-row-layout {
-  height: $search-row-height;
-
-  &__content {
-    height: 100%;
-  }
-
-  &__monaco {
-    height: $search-row-height - 2 * $search-row-vertical-padding - $search-row-header-height -
-      $search-row-gap;
-    border: 1px solid var(--g-color-line-generic-accent);
-  }
-}

package/src/components/SearchRowLayout/SearchRowLayout.tsx

@@ -1,45 +0,0 @@
-import React, {FC, ReactNode} from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {MonacoEditor} from '../MonacoEditor';
-import {RowLink} from '../RowLink';
-import {fitQueryToVisibleLines} from './helpers/fitQueryToVisibleLines';
-import {MONACO_CONFIG} from './helpers/monacoConfig';
-import './SearchRowLayout.scss';
-
-const block = cn('qp-search-row-layout');
-
-export type SearchRowLayoutProps = {
-    header: ReactNode;
-    query?: string;
-    language: string;
-    href?: string;
-    disabled?: boolean;
-    className?: string;
-};
-
-export const SearchRowLayout: FC<SearchRowLayoutProps> = ({
-    header,
-    query,
-    language,
-    href,
-    disabled,
-    className,
-}) => {
-    return (
-        <RowLink href={href} disabled={disabled} className={block(null, className)}>
-            <Flex direction="column" gap={2} className={block('content')}>
-                <Flex gap={2} alignItems="center">
-                    {header}
-                </Flex>
-                <MonacoEditor
-                    value={fitQueryToVisibleLines(query)}
-                    language={language}
-                    readOnly
-                    monacoConfig={MONACO_CONFIG}
-                    className={block('monaco')}
-                />
-            </Flex>
-        </RowLink>
-    );
-};

package/src/components/SearchRowLayout/helpers/fitQueryToVisibleLines.ts

@@ -1,10 +0,0 @@
-const MONACO_VISIBLE_LINES = 4;
-
-export const fitQueryToVisibleLines = (query = '') => {
-    const lines = query.split(/\r\n|\r|\n/).slice(0, MONACO_VISIBLE_LINES);
-    while (lines.length < MONACO_VISIBLE_LINES) {
-        lines.push('');
-    }
-
-    return lines.join('\n');
-};

package/src/components/SearchRowLayout/helpers/monacoConfig.ts

@@ -1,25 +0,0 @@
-import type {MonacoEditorConfig} from '../../MonacoEditor';
-
-const MONACO_LINE_HEIGHT = 18;
-
-export const MONACO_CONFIG: MonacoEditorConfig = {
-    contextmenu: false,
-    fontSize: 12,
-    lineHeight: MONACO_LINE_HEIGHT,
-    renderWhitespace: 'boundary',
-    minimap: {
-        enabled: false,
-    },
-    wordWrap: 'off',
-    scrollBeyondLastLine: false,
-    overviewRulerLanes: 0,
-    lineNumbersMinChars: 2,
-    glyphMargin: false,
-    scrollbar: {
-        vertical: 'hidden',
-        verticalHasArrows: false,
-        horizontal: 'auto',
-        useShadows: false,
-        alwaysConsumeMouseWheel: false,
-    },
-};

package/src/components/SearchRowLayout/index.ts

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

package/src/components/SearchWithButtons/SearchWithButtons.scss

@@ -1,10 +0,0 @@
-.qp-search-with-buttons {
-  &__input {
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  &__inner-buttons {
-    margin-right: 4px;
-  }
-}

package/src/components/SearchWithButtons/SearchWithButtons.stories.tsx

@@ -1,107 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Button, Icon} from '@gravity-ui/uikit';
-import ChevronsExpandHorizontalIcon from '@gravity-ui/icons/svgs/chevrons-expand-horizontal.svg';
-import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
-import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
-import {SearchWithButtons} from './SearchWithButtons';
-
-const meta: Meta<typeof SearchWithButtons> = {
-    title: 'Components/SearchWithButtons',
-    component: SearchWithButtons,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof SearchWithButtons>;
-
-const PlainStory = () => {
-    const [value, setValue] = useState('');
-
-    return (
-        <SearchWithButtons value={value} placeholder="Search" hasClear={true} onUpdate={setValue} />
-    );
-};
-
-const WithInnerButtonStory = () => {
-    const [value, setValue] = useState('');
-    const [active, setActive] = useState(false);
-
-    return (
-        <SearchWithButtons
-            value={value}
-            placeholder="Search"
-            hasClear={true}
-            onUpdate={setValue}
-            innerButtons={[
-                <Button
-                    key="full-search"
-                    size="xs"
-                    view={active ? 'action' : undefined}
-                    onClick={() => setActive(!active)}
-                >
-                    <Icon data={ChevronsExpandHorizontalIcon} size={12} />
-                </Button>,
-            ]}
-        />
-    );
-};
-
-const WithEndButtonsStory = () => {
-    const [value, setValue] = useState('');
-
-    return (
-        <SearchWithButtons
-            value={value}
-            placeholder="Search"
-            hasClear={true}
-            onUpdate={setValue}
-            endButtons={[
-                <Button key="filter">
-                    <Icon data={FunnelIcon} size={16} />
-                </Button>,
-                <Button key="settings">
-                    <Icon data={GearIcon} size={16} />
-                </Button>,
-            ]}
-        />
-    );
-};
-
-const WithBothSlotsStory = () => {
-    const [value, setValue] = useState('');
-
-    return (
-        <SearchWithButtons
-            value={value}
-            placeholder="Search"
-            hasClear={true}
-            onUpdate={setValue}
-            innerButtons={[
-                <Button key="full-search" size="xs">
-                    <Icon data={ChevronsExpandHorizontalIcon} size={12} />
-                </Button>,
-            ]}
-            endButtons={[
-                <Button key="filter">
-                    <Icon data={FunnelIcon} size={16} />
-                </Button>,
-            ]}
-        />
-    );
-};
-
-/** Just the search input, without any buttons */
-export const Default: Story = {render: () => <PlainStory />};
-
-/** A toggle button rendered inside the input */
-export const WithInnerButton: Story = {render: () => <WithInnerButtonStory />};
-
-/** Several buttons rendered after the input */
-export const WithEndButtons: Story = {render: () => <WithEndButtonsStory />};
-
-/** Both slots are filled at the same time */
-export const WithBothSlots: Story = {render: () => <WithBothSlotsStory />};

package/src/components/SearchWithButtons/SearchWithButtons.tsx

@@ -1,56 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, TextInput} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './SearchWithButtons.scss';
-
-export type SearchWithButtonsProps = {
-    value?: string;
-    placeholder?: string;
-    hasClear?: boolean;
-    innerButtons?: React.ReactNode[];
-    endButtons?: React.ReactNode[];
-    onUpdate?: (value: string) => void;
-    className?: string;
-};
-
-const block = cn('qp-search-with-buttons');
-
-const renderButtons = (buttons: React.ReactNode[]) =>
-    buttons.map((button, index) => <React.Fragment key={index}>{button}</React.Fragment>);
-
-export const SearchWithButtons: FC<SearchWithButtonsProps> = ({
-    value,
-    placeholder,
-    hasClear,
-    innerButtons,
-    endButtons,
-    onUpdate,
-    className,
-}) => {
-    const hasInnerButtons = Boolean(innerButtons?.length);
-    const hasEndButtons = Boolean(endButtons?.length);
-
-    return (
-        <Flex gap={1} className={block(null, className)}>
-            <TextInput
-                className={block('input')}
-                value={value}
-                placeholder={placeholder}
-                hasClear={hasClear}
-                onUpdate={onUpdate}
-                endContent={
-                    hasInnerButtons ? (
-                        <Flex gap={1} className={block('inner-buttons')}>
-                            {renderButtons(innerButtons as React.ReactNode[])}
-                        </Flex>
-                    ) : undefined
-                }
-            />
-            {hasEndButtons && (
-                <Flex gap={1} className={block('end-buttons')}>
-                    {renderButtons(endButtons as React.ReactNode[])}
-                </Flex>
-            )}
-        </Flex>
-    );
-};

package/src/components/SearchWithButtons/index.ts

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

package/src/components/SimpleForm/CheckboxGroupField.tsx

@@ -1,53 +0,0 @@
-import React, {FC} from 'react';
-import {Checkbox, Flex, Text} from '@gravity-ui/uikit';
-
-type CheckboxGroupItem = {id: string; title?: string};
-
-type CheckboxGroupFieldProps = {
-    value: string[];
-    items: CheckboxGroupItem[];
-    title?: string;
-    onChange: (value: string[]) => void;
-};
-
-export const CheckboxGroupField: FC<CheckboxGroupFieldProps> = ({
-    value = [],
-    items,
-    title,
-    onChange,
-}) => {
-    const handleChange = (id: string, isChacked: boolean) => {
-        const result = isChacked ? [...value, id] : value.filter((i) => i !== id);
-        onChange(result);
-    };
-
-    return (
-        <Flex direction="column" gap={4}>
-            <Text variant="body-1">{title}</Text>
-            <Flex gap={4}>
-                {items.map((item) => {
-                    const {id, title} = item;
-                    const checked = value.includes(id);
-
-                    return (
-                        <Checkbox
-                            key={id}
-                            checked={checked}
-                            onUpdate={(isChacked) => {
-                                handleChange(id, isChacked);
-                            }}
-                        >
-                            {title}
-                        </Checkbox>
-                    );
-                })}
-            </Flex>
-        </Flex>
-    );
-};
-
-declare module '../../types/forms' {
-    interface FormFieldPropsRegistry {
-        checkboxGroup: CheckboxGroupFieldProps;
-    }
-}

package/src/components/SimpleForm/RangeDatePickerField.tsx

@@ -1,50 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import {DatePicker, RangeValue} from '@gravity-ui/date-components';
-import {DateTime} from '@gravity-ui/date-utils';
-
-type DateValue = DateTime | null;
-
-export type RangeDatePickerFieldProps = {
-    value: RangeValue<DateValue>;
-    title?: string;
-    onChange: (value: RangeValue<DateValue>) => void;
-};
-
-const DATE_FORMAT = 'YYYY-MM-DD';
-
-export const RangeDatePickerField: FC<RangeDatePickerFieldProps> = ({value, title, onChange}) => {
-    const handleStartChange = (newValue: DateValue) => {
-        onChange({...value, start: newValue});
-    };
-
-    const handleEndChange = (newValue: DateValue) => {
-        onChange({...value, end: newValue});
-    };
-
-    return (
-        <Flex direction="column" gap={2}>
-            {title && <Text variant="body-1">{title}</Text>}
-            <Flex gap={2}>
-                <DatePicker
-                    value={value?.start ?? null}
-                    onUpdate={handleStartChange}
-                    format={DATE_FORMAT}
-                    maxValue={value?.end ?? undefined}
-                />
-                <DatePicker
-                    value={value?.end ?? null}
-                    onUpdate={handleEndChange}
-                    format={DATE_FORMAT}
-                    minValue={value?.start ?? undefined}
-                />
-            </Flex>
-        </Flex>
-    );
-};
-
-declare module '../../types/forms' {
-    interface FormFieldPropsRegistry {
-        rangeDatePicker: RangeDatePickerFieldProps;
-    }
-}

package/src/components/SimpleForm/SelectField.tsx

@@ -1,24 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Select, SelectProps, Text} from '@gravity-ui/uikit';
-
-export type SelectFieldProps = {
-    value: SelectProps['value'];
-    options: SelectProps['options'];
-    title?: string;
-    onChange: (value: string[]) => void;
-};
-
-export const SelectField: FC<SelectFieldProps> = ({value, options, title, onChange}) => {
-    return (
-        <Flex direction="column" gap={2}>
-            <Text>{title}</Text>
-            <Select value={value} options={options} onUpdate={onChange} />
-        </Flex>
-    );
-};
-
-declare module '../../types/forms' {
-    interface FormFieldPropsRegistry {
-        select: SelectFieldProps;
-    }
-}