@gravity-ui/querieskit 1.2.0 → 1.3.1

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,66 +0,0 @@
-export {DataTable} from './DataTable';
-export type {DataTableProps, Column} from './DataTable';
-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 {
-    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

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

package/src/helpers/buildColumnsFromKeys.ts

@@ -1,17 +0,0 @@
-import type {ReactNode} from 'react';
-import type {Column} from '../components';
-import {isEmptyValue} from './isEmptyValue';
-
-export function buildColumnsFromKeys<TRow extends Record<string, unknown>>(
-    columns: string[],
-    emptyText: string,
-): Array<Column<TRow>> {
-    return columns.map((column) => ({
-        name: column,
-        header: column,
-        render: ({row}) => {
-            const value = row[column];
-            return isEmptyValue(value) ? emptyText : (value as ReactNode);
-        },
-    }));
-}

package/src/helpers/getDefaultNavigationIcon.ts

@@ -1,33 +0,0 @@
-import type {IconData} from '@gravity-ui/uikit';
-import BanIcon from '@gravity-ui/icons/svgs/ban.svg';
-import EyeSlashIcon from '@gravity-ui/icons/svgs/eye-slash.svg';
-import FileTextIcon from '@gravity-ui/icons/svgs/file-text.svg';
-import FolderIcon from '@gravity-ui/icons/svgs/folder.svg';
-import LayoutHeaderCellsLargeIcon from '@gravity-ui/icons/svgs/layout-header-cells-large.svg';
-import LinkIcon from '@gravity-ui/icons/svgs/link.svg';
-import LinkSlashIcon from '@gravity-ui/icons/svgs/link-slash.svg';
-import type {NavigationItemKind} from '../types/navigation';
-
-export function getDefaultNavigationIcon(
-    kind: NavigationItemKind = 'unknown',
-    targetPathBroken?: boolean,
-): IconData {
-    if (kind === 'link' && targetPathBroken) {
-        return LinkSlashIcon;
-    }
-
-    switch (kind) {
-        case 'folder':
-            return FolderIcon;
-        case 'file':
-            return FileTextIcon;
-        case 'table':
-            return LayoutHeaderCellsLargeIcon;
-        case 'link':
-            return LinkIcon;
-        case 'unknown':
-            return EyeSlashIcon;
-        default:
-            return BanIcon;
-    }
-}

package/src/helpers/getListKey.ts

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

package/src/helpers/getParentPath.ts

@@ -1,10 +0,0 @@
-export function getParentPath(path: string): string | undefined {
-    const trimmed = path.replace(/\/+$/, '');
-    const lastSlashIndex = trimmed.lastIndexOf('/');
-
-    if (lastSlashIndex <= 0) {
-        return trimmed.startsWith('/') ? '/' : undefined;
-    }
-
-    return trimmed.slice(0, lastSlashIndex);
-}

package/src/helpers/isEmptyValue.ts

@@ -1,2 +0,0 @@
-export const isEmptyValue = (value: unknown): boolean =>
-    value === undefined || value === null || value === '';

package/src/helpers/isFieldVisible.ts

@@ -1,20 +0,0 @@
-import {QueryListFieldKey} from '../types/queryList';
-import {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 `QueryListVisibleFieldsConfig<T>`) so this helper works for any
- * `T extends QueryHistoryRow` without fighting TS variance on generic key
- * unions; `field` still uses `QueryListFieldKey<QueryHistoryRow>` to keep
- * typo-protection for the built-in fields checked by the row renderers.
- */
-export const isFieldVisible = (
-    visibleFields: {value: string[]} | undefined,
-    field: QueryListFieldKey<QueryHistoryRow>,
-): boolean => {
-    return visibleFields === undefined || visibleFields.value.includes(field);
-};

package/src/helpers/time.ts

@@ -1,29 +0,0 @@
-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 formatDateCanonical = (ts: Date) => {
-    return dateTimeParse(ts)?.format('DD.MM.YYYY');
-};
-
-export const getTimestampFromDate = (date: Date) => {
-    return dateTimeParse(date)?.valueOf();
-};

package/src/helpers/useLoadMoreSentinel.ts

@@ -1,31 +0,0 @@
-import {useCallback, useEffect, useRef} from 'react';
-
-export function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void) {
-    const observerRef = useRef<IntersectionObserver | null>(null);
-    const hasMoreRef = useRef(hasMore);
-    hasMoreRef.current = hasMore;
-    const onLoadMoreRef = useRef(onLoadMore);
-    onLoadMoreRef.current = onLoadMore;
-
-    useEffect(() => {
-        return () => {
-            observerRef.current?.disconnect();
-        };
-    }, []);
-
-    return useCallback((node: HTMLElement | null) => {
-        observerRef.current?.disconnect();
-
-        if (!node) {
-            return;
-        }
-
-        observerRef.current = new IntersectionObserver((entries) => {
-            if (entries.some((entry) => entry.isIntersecting) && hasMoreRef.current) {
-                onLoadMoreRef.current?.();
-            }
-        });
-
-        observerRef.current.observe(node);
-    }, []);
-}

package/src/helpers/useToggle.ts

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

@@ -1,26 +0,0 @@
-import {useState} from 'react';
-
-export type UseVisibleColumnsOptions = {
-    value?: string[];
-    onChange?: (value: string[]) => void;
-    defaultValue?: string[];
-};
-
-export function useVisibleColumns(
-    allColumns: string[],
-    {value, onChange, defaultValue}: UseVisibleColumnsOptions,
-): [string[], (value: string[]) => void] {
-    const isControlled = value !== undefined;
-    const [state, setState] = useState<string[]>(() => defaultValue ?? allColumns);
-
-    const activeColumns = isControlled ? value : state;
-
-    const handleChange = (next: string[]) => {
-        if (!isControlled) {
-            setState(next);
-        }
-        onChange?.(next);
-    };
-
-    return [activeColumns, handleChange];
-}

package/src/i18n/index.ts

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

@@ -1,9 +0,0 @@
-export * from './components';
-export * from './modules';
-export * from './widgets';
-export * from './types/queryList';
-export * from './types/history';
-export type {SavedQuery} from './types/savedQueries';
-export * from './types/tutorial';
-export * from './types/navigation';
-export * from './types/pathEditor';

package/src/modules/ChartEditor/ChartEditor.scss

@@ -1,12 +0,0 @@
-.qp-chart-editor {
-    background: var(--g-color-base-background);
-
-    &__preview {
-        flex: 1 1 auto;
-    }
-
-    &__panel {
-        min-width: 320px;
-        border-left: 1px solid var(--g-color-line-generic);
-    }
-}