@gravity-ui/querieskit 1.0.1

package/src/components/HistoryListEmpty/HistoryListEmpty.tsx

@@ -0,0 +1,27 @@
+import React, {FC} from 'react';
+import {Flex, Text} from '@gravity-ui/uikit';
+import {NoSearchResults} from '@gravity-ui/illustrations';
+import cn from 'bem-cn-lite';
+import i18n from './i18n';
+import './HistoryListEmpty.scss';
+
+const block = cn('qp-history-list-empty');
+
+export type HistoryListEmptyProps = {
+    showFiltersHint?: boolean;
+    className?: string;
+};
+
+export const HistoryListEmpty: FC<HistoryListEmptyProps> = ({showFiltersHint, className}) => {
+    return (
+        <Flex alignItems="center" justifyContent="center" className={block(null, className)}>
+            <Flex direction="column" gap={6}>
+                <NoSearchResults height={100} />
+                <Flex direction="column" alignItems="center" gap={1}>
+                    <Text variant="subheader-1">{i18n('title_nothing-found')}</Text>
+                    {showFiltersHint && <Text>{i18n('context_try-change-filters')}</Text>}
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+};

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

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

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

@@ -0,0 +1,4 @@
+{
+    "title_nothing-found": "Nothing found",
+    "context_try-change-filters": "Try to change filters"
+}

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

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

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

@@ -0,0 +1,4 @@
+{
+    "title_nothing-found": "Ничего не найдено",
+    "context_try-change-filters": "Попробуйте изменить фильтры"
+}

package/src/components/HistoryListEmpty/index.ts

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

package/src/components/HistoryPrivateIcon/HistoryPrivateIcon.scss

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

package/src/components/HistoryPrivateIcon/HistoryPrivateIcon.tsx

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

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

package/src/components/MonacoEditor/MonacoEditor.tsx

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

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

@@ -0,0 +1,11 @@
+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';

package/src/components/MonacoEditor/monaco-yql-languages/_.contribution.ts

@@ -0,0 +1,193 @@
+import {
+    type CancellationToken,
+    Emitter,
+    type IEvent,
+    type Position,
+    type editor,
+    languages,
+} from 'monaco-editor';
+
+interface ILang extends languages.ILanguageExtensionPoint {
+    loader: () => Promise<ILangImpl>;
+}
+
+interface ILangImpl {
+    conf: languages.LanguageConfiguration;
+    language: languages.IMonarchLanguage;
+    provideSuggestionsFunction?: (
+        model: editor.ITextModel,
+        monacoCursorPosition: Position,
+        _context: languages.CompletionContext,
+        _token: CancellationToken,
+    ) =>
+        | {suggestions: languages.CompletionItem[]}
+        | Promise<{suggestions: languages.CompletionItem[]}>;
+    provideInlineSuggestionsFunction?: (
+        model: editor.ITextModel,
+        monacoCursorPosition: Position,
+        _context: languages.InlineCompletionContext,
+        _token: CancellationToken,
+    ) => Promise<{items: languages.InlineCompletion[]}>;
+}
+
+const languageDefinitions: {[languageId: string]: ILang} = {};
+const lazyLanguageLoaders: {[languageId: string]: LazyLanguageLoader} = {};
+
+class LazyLanguageLoader {
+    public static getOrCreate(languageId: string): LazyLanguageLoader {
+        if (!lazyLanguageLoaders[languageId]) {
+            lazyLanguageLoaders[languageId] = new LazyLanguageLoader(languageId);
+        }
+        return lazyLanguageLoaders[languageId];
+    }
+
+    private readonly _languageId: string;
+    private _loadingTriggered: boolean;
+    private _lazyLoadPromise: Promise<ILangImpl>;
+    private _lazyLoadPromiseResolve!: (value: ILangImpl) => void;
+    private _lazyLoadPromiseReject!: (err: unknown) => void;
+
+    constructor(languageId: string) {
+        this._languageId = languageId;
+        this._loadingTriggered = false;
+        this._lazyLoadPromise = new Promise((resolve, reject) => {
+            this._lazyLoadPromiseResolve = resolve;
+            this._lazyLoadPromiseReject = reject;
+        });
+    }
+
+    public whenLoaded(): Promise<ILangImpl> {
+        return this._lazyLoadPromise;
+    }
+
+    public load(): Promise<ILangImpl> {
+        if (!this._loadingTriggered) {
+            this._loadingTriggered = true;
+            languageDefinitions[this._languageId].loader().then(
+                (mod) => this._lazyLoadPromiseResolve(mod),
+                (err) => this._lazyLoadPromiseReject(err),
+            );
+        }
+        return this._lazyLoadPromise;
+    }
+}
+
+export function registerLanguage(def: ILang): void {
+    const languageId = def.id;
+
+    languageDefinitions[languageId] = def;
+    languages.register(def);
+
+    const lazyLanguageLoader = LazyLanguageLoader.getOrCreate(languageId);
+    languages.setMonarchTokensProvider(
+        languageId,
+        lazyLanguageLoader.whenLoaded().then((mod) => mod.language),
+    );
+    languages.onLanguage(languageId, () => {
+        lazyLanguageLoader.load().then((mod) => {
+            languages.setLanguageConfiguration(languageId, mod.conf);
+        });
+    });
+    lazyLanguageLoader.whenLoaded().then((mod) => {
+        if (mod.provideSuggestionsFunction) {
+            languages.registerCompletionItemProvider(languageId, {
+                triggerCharacters: ['`', ':', '/', '', ' '],
+                provideCompletionItems: mod.provideSuggestionsFunction,
+            });
+        }
+        if (mod.provideInlineSuggestionsFunction) {
+            languages.registerInlineCompletionsProvider(languageId, {
+                provideInlineCompletions: mod.provideInlineSuggestionsFunction,
+                disposeInlineCompletions: () => {},
+            });
+        }
+    });
+}
+
+export interface ModeConfiguration {
+    readonly completionItems?: boolean;
+    readonly hovers?: boolean;
+    readonly documentSymbols?: boolean;
+    readonly definitions?: boolean;
+    readonly references?: boolean;
+    readonly documentHighlights?: boolean;
+    readonly rename?: boolean;
+    readonly colors?: boolean;
+    readonly foldingRanges?: boolean;
+    readonly diagnostics?: boolean;
+    readonly selectionRanges?: boolean;
+}
+
+export interface DiagnosticsOptions {
+    readonly validate?: boolean;
+}
+
+export interface LanguageServiceDefaults {
+    readonly languageId: string;
+    readonly onDidChange: IEvent<LanguageServiceDefaults>;
+    readonly diagnosticsOptions: DiagnosticsOptions;
+    readonly modeConfiguration: ModeConfiguration;
+    setDiagnosticsOptions(options: DiagnosticsOptions): void;
+    setModeConfiguration(modeConfiguration: ModeConfiguration): void;
+}
+
+export class LanguageServiceDefaultsImpl implements LanguageServiceDefaults {
+    private _onDidChange = new Emitter<LanguageServiceDefaults>();
+    private _diagnosticsOptions!: DiagnosticsOptions;
+    private _modeConfiguration!: ModeConfiguration;
+    private _languageId: string;
+
+    constructor(
+        languageId: string,
+        diagnosticsOptions: DiagnosticsOptions,
+        modeConfiguration: ModeConfiguration,
+    ) {
+        this._languageId = languageId;
+        this.setDiagnosticsOptions(diagnosticsOptions);
+        this.setModeConfiguration(modeConfiguration);
+    }
+
+    public get onDidChange(): IEvent<LanguageServiceDefaults> {
+        return this._onDidChange.event;
+    }
+
+    public get languageId(): string {
+        return this._languageId;
+    }
+
+    public get modeConfiguration(): ModeConfiguration {
+        return this._modeConfiguration;
+    }
+
+    public get diagnosticsOptions(): DiagnosticsOptions {
+        return this._diagnosticsOptions;
+    }
+
+    public setDiagnosticsOptions(options: DiagnosticsOptions): void {
+        this._diagnosticsOptions = options || Object.create(null);
+        this._onDidChange.fire(this);
+    }
+
+    public setModeConfiguration(modeConfiguration: ModeConfiguration): void {
+        this._modeConfiguration = modeConfiguration || Object.create(null);
+        this._onDidChange.fire(this);
+    }
+}
+
+export const modeConfigurationDefault: Required<ModeConfiguration> = {
+    completionItems: true,
+    hovers: true,
+    documentSymbols: true,
+    definitions: true,
+    references: true,
+    documentHighlights: true,
+    rename: true,
+    colors: true,
+    foldingRanges: true,
+    diagnostics: true,
+    selectionRanges: true,
+};
+
+export const diagnosticDefault: Required<DiagnosticsOptions> = {
+    validate: true,
+};

package/src/components/MonacoEditor/monaco-yql-languages/clickhouse/clickhouse.contribution.ts

@@ -0,0 +1,14 @@
+import {registerLanguage} from '../_.contribution';
+import {MonacoLanguage} from '../constants';
+
+registerLanguage({
+    id: MonacoLanguage.CHYT,
+    extensions: [],
+    loader: async () => {
+        const lang = await import('./clickhouse');
+        return {
+            conf: lang.conf,
+            language: lang.language,
+        };
+    },
+});

package/src/components/MonacoEditor/monaco-yql-languages/clickhouse/clickhouse.keywords.ts

@@ -0,0 +1,146 @@
+export const keywords = [
+    'AND',
+    'ANY',
+    'AS',
+    'ASC',
+    'ATTACH',
+    'BETWEEN',
+    'CASE',
+    'CAST',
+    'CREATE',
+    'CROSS',
+    'DATABASE',
+    'DATABASES',
+    'DEFAULT',
+    'DELETE',
+    'DESC',
+    'DESCRIBE',
+    'DETACH',
+    'DISTINCT',
+    'DROP',
+    'ELSE',
+    'END',
+    'FOREIGN',
+    'FROM',
+    'GRANT',
+    'HAVING',
+    'IF',
+    'INNER',
+    'INSERT',
+    'JOIN',
+    'KEY',
+    'LEFT',
+    'NATURAL',
+    'NOT',
+    'OFFSET',
+    'ON',
+    'OPTIMIZE',
+    'OR',
+    'OUTER',
+    'PREWHERE',
+    'PRIMARY',
+    'PROCESSLIST',
+    'REFERENCES',
+    'RIGHT',
+    'SELECT',
+    'SHOW',
+    'TABLE',
+    'THEN',
+    'TO',
+    'TOTALS',
+    'TYPE',
+    'UNION',
+    'UPDATE',
+    'USE',
+    'WHEN',
+    'WHERE',
+    'WITH',
+];
+
+export const constants = ['true', 'false', 'NULL'];
+
+export const functionsCaseSensitive = [
+    'arrayJoin',
+    'count',
+    'sum',
+    'avg',
+    'min',
+    'max',
+    'uniq',
+    'groupArray',
+    'toString',
+    'toDate',
+    'toDateTime',
+    'formatDateTime',
+    'now',
+    'today',
+    'if',
+    'multiIf',
+    'coalesce',
+    'dictGet',
+];
+
+export const functionsCaseInsensitive = [
+    'abs',
+    'avg',
+    'cast',
+    'coalesce',
+    'concat',
+    'count',
+    'if',
+    'length',
+    'lower',
+    'max',
+    'min',
+    'now',
+    'substring',
+    'sum',
+    'upper',
+];
+
+export const tableFunctions = [
+    'cluster',
+    'file',
+    'numbers',
+    'remote',
+    'url',
+    'values',
+    'view',
+    'ytSubquery',
+];
+
+export const tableEngines = ['Buffer', 'Memory', 'YtTable'];
+
+export const dataTypeFamiliesCaseSensitive = [
+    'Array',
+    'Date',
+    'DateTime',
+    'Float32',
+    'Float64',
+    'Int8',
+    'Int16',
+    'Int32',
+    'Int64',
+    'Map',
+    'Nullable',
+    'String',
+    'UInt8',
+    'UInt16',
+    'UInt32',
+    'UInt64',
+    'UUID',
+];
+
+export const dataTypeFamiliesCaseInsensitive = [
+    'BIGINT',
+    'BOOLEAN',
+    'DATE',
+    'DATETIME',
+    'DOUBLE',
+    'FLOAT',
+    'INT',
+    'INTEGER',
+    'STRING',
+    'TEXT',
+    'TIMESTAMP',
+];