@fc-components/monaco-editor 0.1.16 → 0.1.18

package/dist/promql/completion/DataProvider.d.ts

@@ -9,6 +9,7 @@ export declare class DataProvider {
     private readonly errorHandler?;
     private readonly httpMethod;
     private readonly apiPrefix;
+    private enableRequests;
     private readonly customRequest;
     metrics: string[];
     labelKeys: string[];
@@ -23,8 +24,8 @@ export declare class DataProvider {
     fetchLabels: (selector: string) => Promise<string[]>;
     fetchLabelValues: (labelName: string, selector: string) => Promise<string[]>;
     getAllMetricNames(): string[];
-    start: () => Promise<void[]>;
-    loadMetricsMetadata(): Promise<void>;
+    start: () => Promise<PromMetricsMetadata[]>;
+    loadMetricsMetadata(): Promise<PromMetricsMetadata>;
     metricNamesToMetrics(metricNames: string[]): Metric[];
     private setInputInRange;
     private enableAutocompleteSuggestionsUpdate;

package/dist/promql/index.d.ts

@@ -8,6 +8,7 @@ interface PromQLEditorProps {
     placeholder?: string;
     enableAutocomplete?: boolean;
     durationVariablesCompletion?: boolean;
+    enableRequests?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
     interpolateString?: (query: string) => string;

package/dist/promql/types.d.ts

@@ -27,5 +27,6 @@ export interface DataProviderParams {
     httpMethod?: 'POST' | 'GET';
     apiPrefix?: string;
     httpErrorHandler?: (error: any) => void;
+    enableRequests?: boolean;
 }
 export {};

package/dist/sql/completion/getCompletionProvider.d.ts

@@ -0,0 +1,4 @@
+import * as monaco from 'monaco-editor';
+export declare const getSqlCompletionProvider: () => {
+    provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position, _context: monaco.languages.CompletionContext, _token: monaco.CancellationToken): monaco.languages.ProviderResult<monaco.languages.CompletionList>;
+};

package/dist/sql/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+interface SqlEditorProps {
+    size?: 'small' | 'middle' | 'large';
+    theme?: 'light' | 'dark';
+    value?: string;
+    placeholder?: string;
+    enableAutocomplete?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+}
+export default function SqlEditor(props: SqlEditorProps): React.JSX.Element;
+export {};

package/dist/sql/sql.d.ts

@@ -0,0 +1,85 @@
+export declare const languageConfiguration: {
+    wordPattern: RegExp;
+    comments: {
+        lineComment: string;
+        blockComment: [string, string];
+    };
+    brackets: any;
+    autoClosingPairs: any;
+    surroundingPairs: any;
+    folding: {
+        offSide: boolean;
+    };
+};
+export declare const language: {
+    defaultToken: string;
+    tokenPostfix: string;
+    ignoreCase: boolean;
+    brackets: {
+        open: string;
+        close: string;
+        token: string;
+    }[];
+    keywords: string[];
+    operators: string[];
+    builtinFunctions: string[];
+    escapes: RegExp;
+    digits: RegExp;
+    octaldigits: RegExp;
+    hexdigits: RegExp;
+    regexpctl: RegExp;
+    regexpattern: RegExp;
+    tokenizer: {
+        root: ((string | RegExp)[] | {
+            include: string;
+        } | (RegExp | {
+            cases: {
+                '@builtinFunctions': string;
+                '@default': string;
+            };
+        })[] | (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[])[];
+        whitespace: (string | RegExp)[][];
+        comments: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        comment: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        'pseudo-columns': (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[][];
+        builtinVariables: (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[][];
+        numbers: (string | RegExp)[][];
+        strings: (RegExp | {
+            token: string;
+            next: string;
+        })[][];
+        string: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        string_double: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        string_backtick: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+    };
+};

package/dist/sql/types.d.ts

@@ -0,0 +1,8 @@
+export interface SqlEditorMarker {
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+    message: string;
+    severity: 'Error' | 'Warning' | 'Information';
+}

package/dist/sql/validation.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export declare const validateSql: (sql: string) => Omit<monaco.editor.IMarker, 'owner' | 'resource'>[];

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.16",
+  "version": "0.1.18",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/index.tsx

@@ -1,5 +1,7 @@
 import promql from './promql';
 import yaml from './yaml';
+import sql from './sql';
 
 export { promql as PromQLMonacoEditor };
 export { yaml as YamlMonacoEditor };
+export { sql as SqlMonacoEditor };

package/src/promql/completion/DataProvider.ts

@@ -26,6 +26,7 @@ export class DataProvider {
   private readonly errorHandler?: (error: any) => void;
   private readonly httpMethod: 'POST' | 'GET' = 'GET';
   private readonly apiPrefix: string = '/api/v1';
+  private enableRequests: boolean = true;
   private readonly customRequest: CustomRequest = (input: RequestInfo, init?: RequestInit): Promise<Response> => fetch(input, init);
   metrics: string[];
   labelKeys: string[];
@@ -56,6 +57,11 @@ export class DataProvider {
       this.apiPrefix = params.apiPrefix;
     }
 
+    // control whether DataProvider should actually send network requests
+    if (typeof params.enableRequests !== 'undefined') {
+      this.enableRequests = !!params.enableRequests;
+    }
+
     this.metrics = [];
     this.labelKeys = [];
   }
@@ -113,6 +119,9 @@ export class DataProvider {
   }
 
   fetchSeries = async (selector: string, withLimit?: string): Promise<Record<string, string | undefined>[]> => {
+    if (!this.enableRequests) {
+      return [] as Record<string, string | undefined>[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/series`;
@@ -138,6 +147,9 @@ export class DataProvider {
   };
 
   fetchLabels = async (selector: string): Promise<string[]> => {
+    if (!this.enableRequests) {
+      return [] as string[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/labels`;
@@ -164,6 +176,9 @@ export class DataProvider {
   };
 
   fetchLabelValues = async (labelName: string, selector: string): Promise<string[]> => {
+    if (!this.enableRequests) {
+      return [] as string[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/label/${labelName}/values`;
@@ -198,7 +213,11 @@ export class DataProvider {
     ]);
   };
 
-  async loadMetricsMetadata() {
+  async loadMetricsMetadata(): Promise<PromMetricsMetadata> {
+    if (!this.enableRequests) {
+      this.metricsMetadata = {} as PromMetricsMetadata;
+      return this.metricsMetadata;
+    }
     const request = this.buildRequest(`${this.apiPrefix}/metadata`, new URLSearchParams({}));
     this.metricsMetadata = await this.request<PromMetricsMetadata>(request.uri, {
       method: this.httpMethod,
@@ -206,6 +225,8 @@ export class DataProvider {
     }).catch(() => {
       return {} as PromMetricsMetadata;
     });
+
+    return this.metricsMetadata || ({} as PromMetricsMetadata);
   }
 
   metricNamesToMetrics(metricNames: string[]): Metric[] {

package/src/promql/index.tsx

@@ -20,6 +20,8 @@ interface PromQLEditorProps {
   placeholder?: string;
   enableAutocomplete?: boolean;
   durationVariablesCompletion?: boolean;
+  // When false, DataProvider will not send network requests. Default: true
+  enableRequests?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   interpolateString?: (query: string) => string;
@@ -92,6 +94,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     placeholder,
     interpolateString,
     enableAutocomplete = true,
+    enableRequests = true,
     readOnly = false,
     disabled = false,
     onChange,
@@ -266,6 +269,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         httpMethod: props.httpMethod,
         apiPrefix: props.apiPrefix,
         httpErrorHandler: props.httpErrorHandler,
+        enableRequests: enableRequests,
       });
       dataProviderRef.current = dataProvider;
       dataProvider.start();
@@ -331,6 +335,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     props.httpMethod,
     props.apiPrefix,
     placeholder,
+    enableRequests,
   ]);
 
   return (

package/src/promql/types.ts

@@ -33,4 +33,6 @@ export interface DataProviderParams {
   httpMethod?: 'POST' | 'GET';
   apiPrefix?: string;
   httpErrorHandler?: (error: any) => void;
+  // When false, DataProvider will not send any network requests.
+  enableRequests?: boolean;
 }

package/src/sql/README.md

@@ -0,0 +1,140 @@
+# SQL Editor
+
+这是一个基于 Monaco Editor 和 `monaco-sql-languages` 的 SQL 编辑器组件。
+
+## 功能特性
+
+- ✨ 完整的 SQL 语法高亮
+- 🎯 智能代码补全（关键字、函数等）
+- ✅ SQL 语法验证（括号、引号匹配等）
+- 🎨 支持浅色和深色主题
+- 📏 支持不同尺寸（small, middle, large）
+- ♿ 只读和禁用模式
+- 🎹 快捷键支持（Ctrl+Enter 执行）
+
+## 使用方法
+
+### 基本用法
+
+```tsx
+import { SqlMonacoEditor } from '@fc-components/monaco-editor';
+
+function MyComponent() {
+  const [sql, setSql] = React.useState('SELECT * FROM users;');
+
+  return (
+    <div style={{ height: '400px' }}>
+      <SqlMonacoEditor value={sql} onChange={setSql} placeholder='Enter SQL query...' />
+    </div>
+  );
+}
+```
+
+### 完整示例
+
+```tsx
+import React, { useState } from 'react';
+import { SqlMonacoEditor } from '@fc-components/monaco-editor';
+
+function SqlQueryBuilder() {
+  const [sql, setSql] = useState('');
+  const [result, setResult] = useState<any>(null);
+
+  const handleChange = (value: string) => {
+    setSql(value);
+  };
+
+  const handleExecute = (value: string) => {
+    console.log('执行 SQL:', value);
+    // 发送到后端执行
+  };
+
+  const handleBlur = (value: string) => {
+    console.log('SQL 失焦:', value);
+  };
+
+  return (
+    <div>
+      <div style={{ height: '300px', border: '1px solid #ccc', marginBottom: '20px' }}>
+        <SqlMonacoEditor
+          size='large'
+          theme='light'
+          value={sql}
+          placeholder='输入 SQL 查询...'
+          enableAutocomplete={true}
+          onChange={handleChange}
+          onEnter={handleExecute}
+          onBlur={handleBlur}
+        />
+      </div>
+      {result && (
+        <div>
+          <h3>查询结果:</h3>
+          <pre>{JSON.stringify(result, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SqlQueryBuilder;
+```
+
+## Props
+
+| 参数                 | 类型                           | 默认值   | 说明                   |
+| -------------------- | ------------------------------ | -------- | ---------------------- |
+| `size`               | 'small' \| 'middle' \| 'large' | 'middle' | 编辑器尺寸             |
+| `theme`              | 'light' \| 'dark'              | 'light'  | 主题                   |
+| `value`              | string                         | ''       | 编辑器内容             |
+| `placeholder`        | string                         | -        | 占位符文本             |
+| `enableAutocomplete` | boolean                        | true     | 启用代码补全           |
+| `readOnly`           | boolean                        | false    | 只读模式               |
+| `disabled`           | boolean                        | false    | 禁用编辑               |
+| `onChange`           | (value: string) => void        | -        | 内容变化回调           |
+| `onEnter`            | (value: string) => void        | -        | Ctrl+Enter 时触发      |
+| `onBlur`             | (value: string) => void        | -        | 编辑器失焦时触发       |
+| `editorDidMount`     | (editor) => void               | -        | 编辑器挂载完成后的回调 |
+
+## 快捷键
+
+- **Ctrl+Enter** 或 **Cmd+Enter**: 触发 `onEnter` 事件（通常用于执行查询）
+- **Ctrl+Z** 或 **Cmd+Z**: 撤销
+- **Ctrl+Y** 或 **Cmd+Y**: 重做
+- **Ctrl+F** 或 **Cmd+F**: 查找
+- **Ctrl+H** 或 **Cmd+H**: 查找替换
+- **Ctrl+L**: 选中当前行
+
+## 支持的 SQL 关键字
+
+包括 SELECT, FROM, WHERE, JOIN, GROUP BY, ORDER BY, INSERT, UPDATE, DELETE, CREATE, DROP 等。
+
+## 支持的 SQL 函数
+
+- 聚合函数: COUNT, SUM, AVG, MIN, MAX
+- 字符串函数: UPPER, LOWER, LENGTH, SUBSTRING, TRIM, CONCAT
+- 数值函数: ROUND, ABS
+- 日期函数: DATE, NOW, YEAR, MONTH, DAY
+- 其他函数: COALESCE, NULLIF, IFNULL
+
+## 验证
+
+编辑器会自动检测以下 SQL 语法问题：
+
+- 未闭合的单引号、双引号和反引号
+- 未匹配的括号
+- 其他基本的语法问题
+
+## 主题定制
+
+如需自定义主题，可以添加 CSS 规则覆盖默认样式：
+
+```css
+.sql-light {
+  /* 浅色主题样式 */
+}
+
+.sql-dark {
+  /* 深色主题样式 */
+}
+```

package/src/sql/completion/getCompletionProvider.ts

@@ -0,0 +1,125 @@
+import * as monaco from 'monaco-editor';
+
+const SQL_KEYWORDS = [
+  'SELECT',
+  'FROM',
+  'WHERE',
+  'AND',
+  'OR',
+  'NOT',
+  'JOIN',
+  'INNER',
+  'LEFT',
+  'RIGHT',
+  'FULL',
+  'OUTER',
+  'ON',
+  'ORDER',
+  'BY',
+  'GROUP',
+  'HAVING',
+  'LIMIT',
+  'OFFSET',
+  'INSERT',
+  'INTO',
+  'VALUES',
+  'UPDATE',
+  'SET',
+  'DELETE',
+  'CREATE',
+  'TABLE',
+  'ALTER',
+  'DROP',
+  'PRIMARY',
+  'KEY',
+  'FOREIGN',
+  'CONSTRAINT',
+  'UNIQUE',
+  'INDEX',
+  'VIEW',
+  'DATABASE',
+  'SCHEMA',
+  'AS',
+  'DISTINCT',
+  'CASE',
+  'WHEN',
+  'THEN',
+  'ELSE',
+  'END',
+  'CAST',
+  'BETWEEN',
+  'IN',
+  'LIKE',
+  'IS',
+  'NULL',
+  'TRUE',
+  'FALSE',
+  'WITH',
+  'UNION',
+  'EXCEPT',
+  'INTERSECT',
+  'ASC',
+  'DESC',
+  'ALL',
+  'ANY',
+  'EXISTS',
+  'CROSS',
+];
+
+const SQL_FUNCTIONS = [
+  { name: 'COUNT', signature: 'COUNT(expression)', description: 'Returns the number of rows' },
+  { name: 'SUM', signature: 'SUM(expression)', description: 'Returns the sum of values' },
+  { name: 'AVG', signature: 'AVG(expression)', description: 'Returns the average value' },
+  { name: 'MIN', signature: 'MIN(expression)', description: 'Returns the minimum value' },
+  { name: 'MAX', signature: 'MAX(expression)', description: 'Returns the maximum value' },
+  { name: 'UPPER', signature: 'UPPER(string)', description: 'Converts string to uppercase' },
+  { name: 'LOWER', signature: 'LOWER(string)', description: 'Converts string to lowercase' },
+  { name: 'LENGTH', signature: 'LENGTH(string)', description: 'Returns the length of string' },
+  { name: 'SUBSTRING', signature: 'SUBSTRING(string, start, length)', description: 'Extracts substring' },
+  { name: 'TRIM', signature: 'TRIM(string)', description: 'Removes leading and trailing spaces' },
+  { name: 'ROUND', signature: 'ROUND(number, decimals)', description: 'Rounds a number' },
+  { name: 'ABS', signature: 'ABS(number)', description: 'Returns absolute value' },
+  { name: 'COALESCE', signature: 'COALESCE(value1, value2, ...)', description: 'Returns first non-null value' },
+  { name: 'NULLIF', signature: 'NULLIF(value1, value2)', description: 'Returns null if two values are equal' },
+  { name: 'IFNULL', signature: 'IFNULL(value, default)', description: 'Returns alternative if null' },
+  { name: 'CONCAT', signature: 'CONCAT(string1, string2, ...)', description: 'Concatenates strings' },
+  { name: 'DATE', signature: 'DATE(date)', description: 'Extracts date part' },
+  { name: 'NOW', signature: 'NOW()', description: 'Returns current date and time' },
+];
+
+export const getSqlCompletionProvider = () => {
+  return {
+    provideCompletionItems(
+      model: monaco.editor.ITextModel,
+      position: monaco.Position,
+      _context: monaco.languages.CompletionContext,
+      _token: monaco.CancellationToken,
+    ): monaco.languages.ProviderResult<monaco.languages.CompletionList> {
+      const word = model.getWordUntilPosition(position);
+      const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
+
+      const suggestions: monaco.languages.CompletionItem[] = [
+        ...SQL_KEYWORDS.map((keyword) => ({
+          label: keyword,
+          kind: monaco.languages.CompletionItemKind.Keyword,
+          insertText: keyword,
+          range: range,
+          sortText: '1' + keyword,
+        })),
+        ...SQL_FUNCTIONS.map((func) => ({
+          label: func.name,
+          kind: monaco.languages.CompletionItemKind.Function,
+          insertText: func.name,
+          detail: func.signature,
+          documentation: func.description,
+          range: range,
+          sortText: '2' + func.name,
+        })),
+      ];
+
+      return {
+        suggestions: suggestions,
+      };
+    },
+  };
+};