@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/HistoryFilter/HistoryFilter.tsx

@@ -1,64 +0,0 @@
-import React, {FC, useRef, useState} from 'react';
-import {Button, Flex, Icon, Popup} from '@gravity-ui/uikit';
-import FunnelIcon from '@gravity-ui/icons/svgs/funnel.svg';
-import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
-import {useToggle} from '../../helpers/useToggle';
-import {QueryListFilterConfig} from '../../types/queryList';
-import cn from 'bem-cn-lite';
-import {SimpleForm} from '../SimpleForm';
-import i18n from './i18n';
-import './HistoryFilter.scss';
-
-const block = cn('qp-history-filter');
-
-export const HistoryFilter: FC<QueryListFilterConfig> = ({
-    fields = [],
-    values,
-    initialValues,
-    isChanged,
-    onApply,
-    onReset,
-}) => {
-    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
-    const [open, toggleOpen] = useToggle(false);
-    const valuesRef = useRef<Record<string, any>>(values ?? initialValues ?? {});
-
-    return (
-        <>
-            <Button
-                ref={setButtonElement}
-                onClick={toggleOpen}
-                view={isChanged ? 'action' : 'normal'}
-            >
-                <Icon data={FunnelIcon} size={16} />
-            </Button>
-            <Popup
-                anchorElement={buttonElement}
-                open={open}
-                onOpenChange={toggleOpen}
-                className={block()}
-                placement="bottom-start"
-            >
-                <div className={block('container')}>
-                    <SimpleForm
-                        fields={fields}
-                        values={values}
-                        initialValues={initialValues}
-                        onValuesChange={(nextValues) => {
-                            valuesRef.current = nextValues;
-                        }}
-                    />
-                </div>
-                <Flex gap={3} className={block('container')}>
-                    <Button view="action" onClick={() => onApply?.(valuesRef.current)}>
-                        {i18n('action_apply')}
-                    </Button>
-                    <Button onClick={onReset}>
-                        <Icon data={ArrowRotateLeftIcon} size={16} />
-                        {i18n('action_reset')}
-                    </Button>
-                </Flex>
-            </Popup>
-        </>
-    );
-};

package/src/components/HistoryFilter/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/components/HistoryFilter/i18n/en.json

@@ -1,4 +0,0 @@
-{
-    "action_apply": "Apply",
-    "action_reset": "Reset"
-}

package/src/components/HistoryFilter/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:queries-filter', dicts);

package/src/components/HistoryFilter/i18n/ru.json

@@ -1,4 +0,0 @@
-{
-    "action_apply": "Применить",
-    "action_reset": "Сбросить"
-}

package/src/components/HistoryFilter/index.ts

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

package/src/components/HistoryGroupHeader/HistoryGroupHeader.scss

@@ -1,7 +0,0 @@
-.qp-history-list-header {
-  display: flex;
-  align-items: center;
-  height: 30px;
-  width: 100%;
-  padding: 4px 16px;
-}

package/src/components/HistoryGroupHeader/HistoryGroupHeader.tsx

@@ -1,18 +0,0 @@
-import React, {FC} from 'react';
-import {Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './HistoryGroupHeader.scss';
-
-type Props = {
-    title: string;
-};
-
-const block = cn('qp-history-list-header');
-
-export const HistoryGroupHeader: FC<Props> = ({title}) => {
-    return (
-        <Text as="div" color="secondary" className={block()}>
-            {title}
-        </Text>
-    );
-};

package/src/components/HistoryGroupHeader/index.ts

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

package/src/components/HistoryPrivateIcon/HistoryPrivateIcon.scss

@@ -1,7 +0,0 @@
-.qp-history-private-icon {
-  color: var(--g-color-text-complementary);
-
-  &_open {
-    color: var(--g-color-text-positive-heavy);
-  }
-}

package/src/components/HistoryPrivateIcon/HistoryPrivateIcon.tsx

@@ -1,22 +0,0 @@
-import React, {FC} from 'react';
-import {Icon} from '@gravity-ui/uikit';
-import LockIcon from '@gravity-ui/icons/svgs/lock.svg';
-import LockOpenIcon from '@gravity-ui/icons/svgs/lock-open.svg';
-import './HistoryPrivateIcon.scss';
-import cn from 'bem-cn-lite';
-
-type Props = {
-    isPrivate?: boolean;
-};
-
-const block = cn('qp-history-private-icon');
-
-export const HistoryPrivateIcon: FC<Props> = ({isPrivate}) => {
-    return (
-        <Icon
-            data={isPrivate ? LockIcon : LockOpenIcon}
-            size={16}
-            className={block({open: !isPrivate})}
-        />
-    );
-};

package/src/components/HistoryPrivateIcon/index.ts

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

package/src/components/Icons/LogoCPlusPlus.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-export const LogoCPlusPlus = () => {
-    return (
-        <svg
-            width="15"
-            height="13"
-            viewBox="0 0 15 13"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M5.40812 7.43123V4.93123C5.40812 4.51702 5.74391 4.18123 6.15812 4.18123C6.57234 4.18123 6.90812 4.51702 6.90812 4.93123V7.43123C6.90812 7.84545 6.57234 8.18123 6.15812 8.18123C5.74391 8.18123 5.40812 7.84545 5.40812 7.43123Z"
-                fill="black"
-            />
-            <path
-                d="M4.90812 5.43123H7.40812C7.82234 5.43123 8.15812 5.76702 8.15812 6.18123C8.15812 6.59545 7.82234 6.93123 7.40812 6.93123H4.90812C4.49391 6.93123 4.15812 6.59545 4.15812 6.18123C4.15812 5.76702 4.49391 5.43123 4.90812 5.43123Z"
-                fill="black"
-            />
-            <path
-                d="M11.0146 8.18123V4.18123C11.0146 3.76702 11.3504 3.43123 11.7646 3.43123C12.1788 3.43123 12.5146 3.76702 12.5146 4.18123V8.18123C12.5146 8.59545 12.1788 8.93123 11.7646 8.93123C11.3504 8.93123 11.0146 8.59545 11.0146 8.18123Z"
-                fill="black"
-            />
-            <path
-                d="M9.76458 5.43123L13.7646 5.43123C14.1788 5.43123 14.5146 5.76702 14.5146 6.18123C14.5146 6.59545 14.1788 6.93123 13.7646 6.93123L9.76458 6.93123C9.35036 6.93123 9.01458 6.59545 9.01458 6.18123C9.01458 5.76702 9.35036 5.43123 9.76458 5.43123Z"
-                fill="black"
-            />
-            <path
-                d="M9.09349 2.44504C8.38789 1.91768 7.54953 1.59693 6.67212 1.51861C5.79464 1.44033 4.91236 1.60751 4.12448 2.00167C3.33664 2.39583 2.67372 3.00143 2.21021 3.75057C1.74675 4.49969 1.50109 5.36305 1.50001 6.24394C1.49894 7.12491 1.74267 7.98906 2.20437 8.73935C2.66606 9.4896 3.32736 10.0969 4.11423 10.4929C4.90112 10.889 5.78281 11.0585 6.66046 10.9823C7.53807 10.9062 8.37721 10.5872 9.08412 10.0616C9.41651 9.81441 9.88663 9.88339 10.1338 10.2158C10.3809 10.5482 10.3115 11.018 9.9792 11.2652C9.04903 11.9568 7.9447 12.376 6.7899 12.4762C5.63512 12.5764 4.47526 12.3534 3.4399 11.8323C2.40454 11.3112 1.53425 10.5126 0.92677 9.52547C0.319272 8.53824 -0.00140641 7.40122 4.63663e-06 6.24205C0.00144048 5.08294 0.324902 3.94699 0.934769 2.96129C1.54467 1.97554 2.41702 1.17894 3.45369 0.660306C4.49033 0.141726 5.65084 -0.0782676 6.80537 0.0247355C7.95989 0.127767 9.06304 0.549624 9.99149 1.24355C10.3233 1.49152 10.3912 1.96151 10.1432 2.29329C9.89526 2.62508 9.42527 2.69302 9.09349 2.44504Z"
-                fill="black"
-            />
-        </svg>
-    );
-};

package/src/components/Icons/index.ts

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

package/src/components/LazyList/LazyList.scss

@@ -1,13 +0,0 @@
-.qp-lazy-list {
-  .g-list__item_selected:hover {
-    background-color: var(--g-color-base-selection-hover);
-  }
-
-  &__sentinel {
-    height: 1px;
-  }
-
-  &__spinner {
-    height: 100%;
-  }
-}

package/src/components/LazyList/LazyList.tsx

@@ -1,97 +0,0 @@
-import React, {useMemo} from 'react';
-import {List} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import {useLoadMoreSentinel} from '../../helpers/useLoadMoreSentinel';
-import {ListSpinner} from '../ListSpinner';
-import './LazyList.scss';
-
-const block = cn('qp-lazy-list');
-
-const SENTINEL_ROW_HEIGHT = 1;
-
-type SentinelRow = {__sentinel: true};
-type LazyListRow<T> = T | SentinelRow;
-
-const isSentinelRow = <T,>(row: LazyListRow<T>): row is SentinelRow =>
-    Boolean(row) && typeof row === 'object' && '__sentinel' in (row as object);
-
-export type LazyListProps<T extends object> = {
-    items: T[];
-    itemHeight: (item: T) => number;
-    renderItem: (item: T, isActive: boolean, index: number) => React.ReactNode;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
-    onItemClick?: (item: T, index: number) => void;
-    selectedItemIndex?: T[keyof T] | number;
-    filterable?: boolean;
-    loading?: boolean;
-    error?: React.ReactNode;
-    emptyContent?: React.ReactNode;
-    isEmpty?: boolean;
-    className?: string;
-};
-
-export const LazyList = <T extends object>({
-    items,
-    itemHeight,
-    renderItem,
-    hasMore,
-    onLoadMore,
-    onItemClick,
-    selectedItemIndex,
-    filterable = false,
-    loading,
-    error,
-    emptyContent,
-    isEmpty,
-    className,
-}: LazyListProps<T>) => {
-    const sentinelRef = useLoadMoreSentinel(hasMore, onLoadMore);
-
-    const rows: LazyListRow<T>[] = useMemo(
-        () => (hasMore ? [...items, {__sentinel: true}] : items),
-        [items, hasMore],
-    );
-
-    const getRowHeight = (row: LazyListRow<T>) =>
-        isSentinelRow(row) ? SENTINEL_ROW_HEIGHT : itemHeight(row);
-
-    if (error) {
-        return <React.Fragment>{error}</React.Fragment>;
-    }
-
-    const empty = isEmpty ?? !items.length;
-
-    if (loading && empty) {
-        return <ListSpinner className={block('spinner', className)} />;
-    }
-
-    if (empty) {
-        return <React.Fragment>{emptyContent}</React.Fragment>;
-    }
-
-    return (
-        <List<LazyListRow<T>>
-            className={block(null, className)}
-            filterable={filterable}
-            items={rows}
-            itemHeight={getRowHeight}
-            itemsHeight={(listRows) =>
-                listRows.reduce((total, row) => total + getRowHeight(row), 0)
-            }
-            renderItem={(row, isActive, index) =>
-                isSentinelRow(row) ? (
-                    <div ref={sentinelRef} className={block('sentinel')} />
-                ) : (
-                    renderItem(row, isActive, index)
-                )
-            }
-            selectedItemIndex={selectedItemIndex as never}
-            onItemClick={(row, index) => {
-                if (!isSentinelRow(row)) {
-                    onItemClick?.(row, index);
-                }
-            }}
-        />
-    );
-};

package/src/components/LazyList/index.ts

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

package/src/components/ListSpinner/ListSpinner.scss

@@ -1,3 +0,0 @@
-.qp-list-spinner {
-    height: 100%;
-}

package/src/components/ListSpinner/ListSpinner.tsx

@@ -1,18 +0,0 @@
-import React, {FC} from 'react';
-import {Flex, Spin} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import './ListSpinner.scss';
-
-const block = cn('qp-list-spinner');
-
-export type ListSpinnerProps = {
-    className?: string;
-};
-
-export const ListSpinner: FC<ListSpinnerProps> = ({className}) => {
-    return (
-        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
-            <Spin size="m" />
-        </Flex>
-    );
-};

package/src/components/ListSpinner/index.ts

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

package/src/components/MonacoEditor/MonacoEditor.tsx

@@ -1,112 +0,0 @@
-import React, {FC, useEffect, useRef} from 'react';
-// @ts-ignore monaco-editor ships its own types but the default resolution
-// doesn't pick them up for this deep import path in this project setup.
-import * as monaco from 'monaco-editor/editor/editor.api';
-import './monaco-yql-languages/monaco.contribution';
-import {MONACO_THEME_BY_UI, MonacoThemeName, YT_LIGHT_MONACO_THEME} from './MonacoEditorThemes';
-
-export type MonacoEditorConfig = Omit<monaco.editor.IStandaloneEditorConstructionOptions, 'theme'>;
-
-type Props = {
-    value: string;
-    readOnly?: boolean;
-    language?: string;
-    theme?: string;
-    onClick?: (e: monaco.editor.IEditorMouseEvent) => void;
-    monacoConfig?: MonacoEditorConfig;
-    className?: string;
-};
-
-const resolveTheme = (theme?: string): MonacoThemeName => {
-    if (!theme) {
-        return YT_LIGHT_MONACO_THEME;
-    }
-    return (MONACO_THEME_BY_UI[theme] ?? theme) as MonacoThemeName;
-};
-
-export const MonacoEditor: FC<Props> = ({
-    value,
-    language,
-    theme,
-    readOnly,
-    onClick,
-    monacoConfig,
-    className,
-}) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-    const modelRef = useRef<monaco.editor.ITextModel | null>(null);
-    // Keeps the latest `onClick` without re-subscribing the mouse listener
-    // on every render (avoids stale closures without extra effect churn).
-    const onClickRef = useRef(onClick);
-    onClickRef.current = onClick;
-
-    // Create the editor + model once per mount, dispose both on unmount.
-    useEffect(() => {
-        if (!containerRef.current) return undefined;
-
-        const model = monaco.editor.createModel(value, language);
-        modelRef.current = model;
-
-        const editorInstance = monaco.editor.create(containerRef.current, {
-            model,
-            renderLineHighlight: 'none',
-            colorDecorators: true,
-            automaticLayout: true,
-            readOnly,
-            minimap: {
-                enabled: false,
-            },
-            lineNumbers: 'on',
-            suggestOnTriggerCharacters: true,
-            wordBasedSuggestions: 'off',
-            theme: resolveTheme(theme),
-            ...monacoConfig,
-        });
-        editorRef.current = editorInstance;
-
-        const mouseDownSubscription = editorInstance.onMouseDown((e) => {
-            onClickRef.current?.(e);
-        });
-
-        return () => {
-            mouseDownSubscription.dispose();
-            editorInstance.dispose();
-            model.dispose();
-            editorRef.current = null;
-            modelRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    // Keep the model text in sync with the `value` prop after the initial mount.
-    useEffect(() => {
-        const model = modelRef.current;
-        if (model && model.getValue() !== value) {
-            model.setValue(value);
-        }
-    }, [value]);
-
-    // Keep the model language in sync with the `language` prop.
-    useEffect(() => {
-        const model = modelRef.current;
-        if (model && language !== undefined) {
-            monaco.editor.setModelLanguage(model, language);
-        }
-    }, [language]);
-
-    // Keep the editor theme in sync with the `theme` prop.
-    useEffect(() => {
-        monaco.editor.setTheme(resolveTheme(theme));
-    }, [theme]);
-
-    // Re-apply options (e.g. `readOnly`, `monacoConfig`) when they change.
-    useEffect(() => {
-        editorRef.current?.updateOptions({
-            readOnly,
-            ...monacoConfig,
-        });
-    }, [readOnly, monacoConfig]);
-
-    return <div ref={containerRef} className={className}></div>;
-};

package/src/components/MonacoEditor/MonacoEditorThemes.tsx

@@ -1,73 +0,0 @@
-// @ts-ignore monaco-editor ships its own types but the default resolution
-// doesn't pick them up for this deep import path in this project setup.
-import * as monaco from 'monaco-editor/editor/editor.api';
-
-const lightRules = [
-    {token: 'string.tablepath', foreground: '3e999f'},
-    {token: 'path', foreground: '3e999f', fontStyle: 'underline'},
-    {token: 'string.sql', foreground: 'a31515'},
-];
-
-export const YT_LIGHT_MONACO_THEME = 'yt-light';
-monaco.editor.defineTheme(YT_LIGHT_MONACO_THEME, {
-    base: 'vs',
-    inherit: true,
-    rules: lightRules,
-    colors: {
-        'editorLineNumber.foreground': '#000000b3',
-        'editor.lineHighlightBackground': '#0000000a',
-        'editorGutter.background': '#0000000a',
-    },
-});
-
-export const YT_LIGHT_HC_MONACO_THEME = 'yt-light-hc';
-monaco.editor.defineTheme(YT_LIGHT_HC_MONACO_THEME, {
-    base: 'hc-light',
-    inherit: true,
-    rules: lightRules,
-    colors: {},
-});
-
-const darkRules = [
-    {token: 'string.tablepath', foreground: '3e999f'},
-    {token: 'path', foreground: '3e999f', fontStyle: 'underline'},
-    {token: 'string.sql', foreground: 'ce9178'},
-];
-
-export const YT_DARK_MONACO_THEME = 'yt-dark';
-monaco.editor.defineTheme(YT_DARK_MONACO_THEME, {
-    base: 'vs-dark',
-    inherit: true,
-    rules: darkRules,
-    colors: {
-        'editorLineNumber.foreground': '#ffffffb3',
-        'editor.lineHighlightBackground': '#ffffff0a',
-        'editorGutter.background': '#ffffff0a',
-        'editor.background': '#2d2c33',
-    },
-});
-
-export const YT_DARK_HC_MONACO_THEME = 'yt-dark-hc';
-monaco.editor.defineTheme(YT_DARK_HC_MONACO_THEME, {
-    base: 'hc-black',
-    inherit: true,
-    rules: darkRules,
-    colors: {},
-});
-
-export type MonacoThemeName =
-    | typeof YT_LIGHT_MONACO_THEME
-    | typeof YT_LIGHT_HC_MONACO_THEME
-    | typeof YT_DARK_MONACO_THEME
-    | typeof YT_DARK_HC_MONACO_THEME
-    | 'vs'
-    | 'vs-dark'
-    | 'hc-black'
-    | 'hc-light';
-
-export const MONACO_THEME_BY_UI: Record<string, MonacoThemeName> = {
-    dark: YT_DARK_MONACO_THEME,
-    'dark-hc': YT_DARK_HC_MONACO_THEME,
-    light: YT_LIGHT_MONACO_THEME,
-    'light-hc': YT_LIGHT_HC_MONACO_THEME,
-};

package/src/components/MonacoEditor/index.ts

@@ -1,11 +0,0 @@
-export {MonacoEditor} from './MonacoEditor';
-export type {MonacoEditorConfig} from './MonacoEditor';
-export {MonacoLanguage} from './monaco-yql-languages';
-export {
-    YT_DARK_HC_MONACO_THEME,
-    YT_DARK_MONACO_THEME,
-    YT_LIGHT_HC_MONACO_THEME,
-    YT_LIGHT_MONACO_THEME,
-    MONACO_THEME_BY_UI,
-} from './MonacoEditorThemes';
-export type {MonacoThemeName} from './MonacoEditorThemes';