@gravity-ui/querieskit 1.0.1

package/src/components/SearchRowLayout/SearchRowLayout.tsx

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,25 @@
+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

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

package/src/components/SimpleForm/CheckboxGroupField.tsx

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/src/components/SimpleForm/index.ts

@@ -0,0 +1,7 @@
+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/index.ts

@@ -0,0 +1,23 @@
+export {QueryStatusIcon} from './QueryStatusIcon';
+export {QueryDuration} from './QueryDuration';
+export {HistoryFilter} from './HistoryFilter';
+export {HistoryPrivateIcon} from './HistoryPrivateIcon';
+export {FieldsSelector} from './FieldsSelector';
+export {HistoryGroupHeader} from './HistoryGroupHeader';
+export {HistoryListEmpty} from './HistoryListEmpty';
+export type {HistoryListEmptyProps} from './HistoryListEmpty';
+export {RowLink} from './RowLink';
+export type {RowLinkProps} from './RowLink';
+export {SearchRowLayout} from './SearchRowLayout';
+export type {SearchRowLayoutProps} from './SearchRowLayout';
+export {MonacoEditor} from './MonacoEditor';
+export type {MonacoEditorConfig} from './MonacoEditor';
+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';

package/src/constants/query.ts

@@ -0,0 +1,10 @@
+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

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

package/src/helpers/getListKey.ts

@@ -0,0 +1,12 @@
+import {BaseHistoryRow, QueryHistoryItem, QueryHistoryRowVariant} from '../types/history';
+
+export const getListKey = <T extends BaseHistoryRow>(
+    items: QueryHistoryItem<T>[],
+    variant: QueryHistoryRowVariant,
+): string => {
+    const itemsKey = items
+        .map((item) => ('header' in item ? `h:${item.header}` : `r:${item.id}`))
+        .join(',');
+
+    return `${variant}:${itemsKey}`;
+};

package/src/helpers/isFieldVisible.ts

@@ -0,0 +1,19 @@
+import {QueryHistoryFieldKey, QueryHistoryRow} from '../types/history';
+
+/**
+ * A field is visible either when no `visibleFields` config is provided
+ * (the consumer doesn't opt into the feature — everything is shown), or when
+ * the field key is explicitly included in `visibleFields.value`.
+ *
+ * `visibleFields` is accepted loosely as `{value: string[]}` (rather than the
+ * generic `QueryHistoryVisibleFieldsConfig<T>`) so this helper works for any
+ * `T extends QueryHistoryRow` without fighting TS variance on generic key
+ * unions; `field` still uses `QueryHistoryFieldKey<QueryHistoryRow>` to keep
+ * typo-protection for the built-in fields checked by the row renderers.
+ */
+export const isFieldVisible = (
+    visibleFields: {value: string[]} | undefined,
+    field: QueryHistoryFieldKey<QueryHistoryRow>,
+): boolean => {
+    return visibleFields === undefined || visibleFields.value.includes(field);
+};

package/src/helpers/time.ts

@@ -0,0 +1,25 @@
+import {DateTime, dateTime, dateTimeParse} from '@gravity-ui/date-utils';
+
+type Date = DateTime | string | number | undefined;
+
+export const formatTime = (date: Date) => {
+    return dateTimeParse(date)?.format('HH:mm');
+};
+
+export const durationDates = (date1: Date, date2: Date) => {
+    if (!date1 && !date2) return '--:--';
+
+    const start = dateTimeParse(date1) || dateTime();
+    const end = dateTimeParse(date2) || dateTime();
+    const diff = end?.diff(start);
+
+    return dateTimeParse(diff)?.format('HH:mm');
+};
+
+export const formatTimeCanonical = (ts: Date) => {
+    return dateTimeParse(ts)?.format('DD.MM.YYYY, HH:mm');
+};
+
+export const getTimestampFromDate = (date: Date) => {
+    return dateTimeParse(date)?.valueOf();
+};

package/src/helpers/useToggle.ts

@@ -0,0 +1,11 @@
+import {useCallback, useState} from 'react';
+
+export const useToggle = (initialValue = false): [boolean, () => void] => {
+    const [value, setValue] = useState(initialValue);
+
+    const toggle = useCallback(() => {
+        setValue((current) => !current);
+    }, []);
+
+    return [value, toggle];
+};

package/src/i18n/index.ts

@@ -0,0 +1,26 @@
+import {I18N, KeyData, KeysData} from '@gravity-ui/i18n';
+
+export type AppLang = 'en' | 'ru';
+
+export const i18n = new I18N({lang: 'en', fallbackLang: 'en'});
+
+export function setLang(lang: string) {
+    i18n.setLang(lang);
+}
+
+export function addI18Keysets<const T extends KeysData, const Name extends `qp:${string}`>(
+    componentName: Name,
+    data: Partial<Record<AppLang, T>>,
+) {
+    Object.entries(data).forEach(([lang, keys]) => i18n.registerKeyset(lang, componentName, keys));
+
+    type TKey = Extract<keyof T, string>;
+    const t = i18n.keyset<TKey>(componentName);
+
+    return t as typeof t & {
+        /**
+         * Keyset data is used only for type inference, the value is always undefined.
+         */
+        keysetData: {[Key in Name]: Record<TKey, KeyData>};
+    };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './modules';
+export * from './widgets';
+export * from './types/history';
+export * from './types/tutorial';

package/src/modules/HistoryHeader/HistoryHeader.stories.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {HistoryHeader} from './HistoryHeader';
+
+const meta: Meta<typeof HistoryHeader> = {
+    title: 'Modules/HistoryHeader',
+    component: HistoryHeader,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryHeader>;
+
+const DefaultStory = () => {
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    return (
+        <HistoryHeader
+            search={search.value}
+            fullSearch={search.fullSearch}
+            hasClear={true}
+            onUpdate={setSearch}
+        />
+    );
+};
+
+const FullSearchStory = () => {
+    const [search, setSearch] = useState({value: 'users', fullSearch: true});
+
+    return (
+        <HistoryHeader
+            search={search.value}
+            fullSearch={search.fullSearch}
+            hasClear={true}
+            onUpdate={setSearch}
+        />
+    );
+};
+
+/** Empty header with a search field */
+export const Default: Story = {render: () => <DefaultStory />};
+
+/** Full-text search is active (button is highlighted) */
+export const FullSearchActive: Story = {render: () => <FullSearchStory />};