@gravity-ui/querieskit 1.3.0 → 1.3.1

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

package/src/components/SimpleForm/SimpleForm.stories.tsx

@@ -1,115 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {FormField, SimpleForm} from './SimpleForm';
-
-const meta: Meta<typeof SimpleForm> = {
-    title: 'Components/SimpleForm',
-    component: SimpleForm,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof SimpleForm>;
-
-const fields: FormField[] = [
-    {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'},
-        ],
-    },
-    {
-        id: 'author',
-        type: 'select',
-        title: 'Author',
-        initialValue: [],
-        options: [
-            {value: 'alice', content: 'Alice'},
-            {value: 'bob', content: 'Bob'},
-        ],
-    },
-];
-
-/** Basic set of form fields (uncontrolled mode with default values from each field's initialValue) */
-export const Default: Story = {
-    args: {
-        fields,
-        onValuesChange: (values) => console.info('onValuesChange', values),
-    },
-};
-
-/** Form with explicit initial values (initialValues), overriding fields' initialValue */
-export const WithInitialValues: Story = {
-    args: {
-        fields,
-        initialValues: {onlyMine: false, dialect: ['sql']},
-        onValuesChange: (values) => console.info('onValuesChange', values),
-    },
-};
-
-/** Controlled mode: values are fully managed from outside via values */
-export const Controlled: Story = {
-    args: {
-        fields,
-        values: {onlyMine: true, dialect: ['yql', 'sql']},
-        onValuesChange: (values) => console.info('onValuesChange', values),
-    },
-};
-
-/** Only a single switch field */
-export const SwitchOnly: Story = {
-    args: {
-        fields: [{id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true}],
-    },
-};
-
-/** Only a date range picker */
-export const RangeDatePickerOnly: Story = {
-    args: {
-        fields: [{id: 'range', type: 'rangeDatePicker', title: 'Period'}],
-    },
-};
-
-/** Only a checkbox group */
-export const CheckboxGroupOnly: Story = {
-    args: {
-        fields: [
-            {
-                id: 'dialect',
-                type: 'checkboxGroup',
-                title: 'Dialect',
-                initialValue: ['yql'],
-                items: [
-                    {id: 'yql', title: 'YQL'},
-                    {id: 'sql', title: 'SQL'},
-                ],
-            },
-        ],
-    },
-};
-
-/** Only a select field */
-export const SelectOnly: Story = {
-    args: {
-        fields: [
-            {
-                id: 'author',
-                type: 'select',
-                title: 'Author',
-                initialValue: ['alice'],
-                options: [
-                    {value: 'alice', content: 'Alice'},
-                    {value: 'bob', content: 'Bob'},
-                ],
-            },
-        ],
-    },
-};

package/src/components/SimpleForm/SimpleForm.tsx

@@ -1,65 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import {RegisteredFormFields} from '../../types/forms';
-import {getControl, getInitialValues, registerFormControl} from './helpers';
-import {SwitchField} from './SwitchField';
-import {RangeDatePickerField} from './RangeDatePickerField';
-import {Flex} from '@gravity-ui/uikit';
-import {CheckboxGroupField} from './CheckboxGroupField';
-import {SelectField} from './SelectField';
-
-export type FormField = RegisteredFormFields;
-
-type FormValues = Record<string, any>;
-
-type Props = {
-    fields: FormField[];
-    values?: FormValues;
-    initialValues?: FormValues;
-    onValuesChange?: (values: FormValues) => void;
-};
-
-export const SimpleForm: React.FC<Props> = ({fields, values, initialValues, onValuesChange}) => {
-    const isControlled = values !== undefined;
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initial = useMemo(() => getInitialValues(fields, initialValues), []);
-    const [internalValues, setInternalValues] = useState<FormValues>(initial);
-
-    const currentValues = isControlled ? values : internalValues;
-
-    const handleFieldChange = (name: string, value: unknown) => {
-        const nextValues = {...currentValues, [name]: value};
-
-        if (!isControlled) {
-            setInternalValues(nextValues);
-        }
-
-        onValuesChange?.(nextValues);
-    };
-
-    return (
-        <Flex direction="column" gap={4}>
-            {fields.map((field) => {
-                const FieldComponent = getControl(field.type);
-
-                const {id, type: _type, title, initialValue: _initialValue, ...extraProps} = field;
-
-                return (
-                    <FieldComponent
-                        key={id}
-                        title={title}
-                        value={currentValues[id]}
-                        onChange={(value: unknown) => handleFieldChange(id, value)}
-                        {...extraProps}
-                    />
-                );
-            })}
-        </Flex>
-    );
-};
-
-// base fields
-registerFormControl('switch', SwitchField);
-registerFormControl('rangeDatePicker', RangeDatePickerField);
-registerFormControl('checkboxGroup', CheckboxGroupField);
-registerFormControl('select', SelectField);

package/src/components/SimpleForm/SwitchField.tsx

@@ -1,23 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Switch, Text} from '@gravity-ui/uikit';
-
-export type SwitchFieldProps = {
-    value: boolean;
-    title?: string;
-    onChange: (value: boolean) => void;
-};
-
-export const SwitchField: FC<SwitchFieldProps> = ({title, value, onChange}) => {
-    return (
-        <Flex gap={2}>
-            <Switch checked={value} onUpdate={onChange} />
-            {title && <Text variant="body-1">{title}</Text>}
-        </Flex>
-    );
-};
-
-declare module '../../types/forms' {
-    interface FormFieldPropsRegistry {
-        switch: SwitchFieldProps;
-    }
-}

package/src/components/SimpleForm/helpers/controlsRegistry.ts

@@ -1,24 +0,0 @@
-import {ComponentType} from 'react';
-
-const controls = new Map<string, ComponentType<any>>();
-
-export function registerFormControl<K extends string, P extends {value?: any; onChange?: any}>(
-    controlId: K,
-    controlComponent: ComponentType<P>,
-) {
-    if (controls.has(controlId)) {
-        console.warn(`Control '${controlId}' is already registered in SimpleForm!`);
-    }
-
-    controls.set(controlId, controlComponent);
-}
-
-export function getControl(type: string) {
-    const Control = controls.get(type);
-
-    if (!Control) {
-        throw new Error(`Control '${type}' is not registered in SimpleForm!`);
-    }
-
-    return Control;
-}

package/src/components/SimpleForm/helpers/getInitialValues.ts

@@ -1,10 +0,0 @@
-import {FormField} from '../SimpleForm';
-
-type FormValues = Record<string, any>;
-
-export function getInitialValues(fields: FormField[], initialValues?: FormValues): FormValues {
-    return {
-        ...Object.fromEntries(fields.map((field) => [field.id, field.initialValue])),
-        ...initialValues,
-    };
-}

package/src/components/SimpleForm/helpers/index.ts

@@ -1,2 +0,0 @@
-export {registerFormControl, getControl} from './controlsRegistry';
-export {getInitialValues} from './getInitialValues';

package/src/components/SimpleForm/index.ts

@@ -1,7 +0,0 @@
-export {SimpleForm} from './SimpleForm';
-export type {FormField} from './SimpleForm';
-export {SwitchField} from './SwitchField';
-export type {SwitchFieldProps} from './SwitchField';
-export {RangeDatePickerField} from './RangeDatePickerField';
-export type {RangeDatePickerFieldProps} from './RangeDatePickerField';
-export {registerFormControl} from './helpers';

package/src/components/SkeletonRows/SkeletonRows.tsx

@@ -1,24 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Skeleton} from '@gravity-ui/uikit';
-
-export type SkeletonRowsProps = {
-    count?: number;
-    className?: string;
-    rowClassName?: string;
-};
-
-const DEFAULT_ROWS_COUNT = 4;
-
-export const SkeletonRows: FC<SkeletonRowsProps> = ({
-    count = DEFAULT_ROWS_COUNT,
-    className,
-    rowClassName,
-}) => {
-    return (
-        <Flex direction="column" gap={2} className={className}>
-            {Array.from({length: count}, (_, index) => (
-                <Skeleton key={index} className={rowClassName} />
-            ))}
-        </Flex>
-    );
-};

package/src/components/SkeletonRows/index.ts

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

package/src/components/index.ts

@@ -1,71 +0,0 @@
-export {DataTable} from './DataTable';
-export type {DataTableProps, Column} from './DataTable';
-export {QueryResultsTable, formatQueryResultType} from './QueryResultsTable';
-export type {QueryResultsTableProps} from './QueryResultsTable';
-export {QueryStatusIcon} from './QueryStatusIcon';
-export {QueryDuration} from './QueryDuration';
-export {LazyList} from './LazyList';
-export type {LazyListProps} from './LazyList';
-export {ListSpinner} from './ListSpinner';
-export type {ListSpinnerProps} from './ListSpinner';
-export {Breadcrumbs} from './Breadcrumbs';
-export type {BreadcrumbsProps} from './Breadcrumbs';
-export {PathEditor} from './PathEditor';
-export type {PathEditorProps} from './PathEditor';
-export {HistoryFilter} from './HistoryFilter';
-export {HistoryPrivateIcon} from './HistoryPrivateIcon';
-export {FieldsSelector} from './FieldsSelector';
-export type {FieldsSelectorOption, FieldsSelectorProps} from './FieldsSelector';
-export {EditableRowTitle} from './EditableRowTitle';
-export type {EditableRowTitleProps} from './EditableRowTitle';
-export {RowActionsMenu} from './RowActionsMenu';
-export type {RowActionsMenuProps} from './RowActionsMenu';
-export {FieldsSearchToolbar} from './FieldsSearchToolbar';
-export type {FieldsSearchToolbarProps} from './FieldsSearchToolbar';
-export {HistoryGroupHeader} from './HistoryGroupHeader';
-export {EmptyContent} from './EmptyContent';
-export type {EmptyContentProps, EmptyContentVariant} from './EmptyContent';
-export {ClusterRow} from './ClusterRow';
-export type {ClusterRowProps} from './ClusterRow';
-export {NavigationItemRow} from './NavigationItemRow';
-export type {NavigationItemRowProps} from './NavigationItemRow';
-export {NavigationActionButtons} from './NavigationActionButtons';
-export type {NavigationActionButtonsProps} from './NavigationActionButtons';
-export {SkeletonRows} from './SkeletonRows';
-export type {SkeletonRowsProps} from './SkeletonRows';
-export {RowLink} from './RowLink';
-export type {RowLinkProps} from './RowLink';
-export {SearchRowLayout} from './SearchRowLayout';
-export type {SearchRowLayoutProps} from './SearchRowLayout';
-export {SearchWithButtons} from './SearchWithButtons';
-export type {SearchWithButtonsProps} from './SearchWithButtons';
-export {MonacoEditor} from './MonacoEditor';
-export type {MonacoEditorConfig} from './MonacoEditor';
-export {AddChartButton, DEFAULT_ADD_CHART_BUTTON_OPTIONS} from './AddChartButton';
-export type {
-    AddChartButtonOption,
-    AddChartButtonProps,
-    DefaultAddChartButtonValue,
-} from './AddChartButton';
-export {ChartEditorForm} from './ChartEditorForm';
-export type {
-    ChartEditorFormProps,
-    ChartEditorFormValues,
-    ChartEditorLabels,
-    ChartEditorOption,
-} from './ChartEditorForm';
-export * from './Dashboard';
-export {Chart} from './Chart';
-export type {ChartAction, ChartProps} from './Chart';
-export {ErrorTree} from './ErrorTree';
-export {
-    MonacoLanguage,
-    YT_DARK_HC_MONACO_THEME,
-    YT_DARK_MONACO_THEME,
-    YT_LIGHT_HC_MONACO_THEME,
-    YT_LIGHT_MONACO_THEME,
-    MONACO_THEME_BY_UI,
-} from './MonacoEditor';
-export type {MonacoThemeName} from './MonacoEditor';
-export * from './AttachmentList';
-export * from './AttachmentListPlaceholder';

package/src/constants/query.ts

@@ -1,10 +0,0 @@
-import {QueryStatus} from '../types/history';
-
-export const CompletedQueryStates: Partial<QueryStatus>[] = [
-    'draft',
-    'aborted',
-    'completed',
-    'failed',
-];
-
-export const ProgressQueryStatuses: Partial<QueryStatus>[] = ['running'];

package/src/constants/row.ts

@@ -1,2 +0,0 @@
-export const SEARCH_ROW_HEIGHT = 110;
-export const NAVIGATION_ROW_HEIGHT = 32;