@vectara/vectara-ui 18.0.1 → 18.1.0

package/lib/components/form/codeEditor/CodeEditor.d.ts

@@ -1,3 +1,4 @@
+import * as monacoTypes from "monaco-editor/esm/vs/editor/editor.api";
 import { generateTokensProvider } from "./generateTokensProvider";
 export type CodeEditorColorConfig = {
     token: string;
@@ -24,11 +25,18 @@ interface Props {
     isReadOnly?: boolean;
     height?: string;
     resizable?: boolean;
+    /**
+     * Provides autocomplete suggestions. The provider is invoked on trigger characters and on Ctrl+Space,
+     * and additionally as the user types when `quickSuggestions` is enabled.
+     */
+    completionItemProvider?: monacoTypes.languages.CompletionItemProvider;
+    /** When true, suggestions appear as the user types. Defaults to false to match the previous behavior. */
+    quickSuggestions?: boolean;
     "data-testid"?: string;
 }
 /**
  * Generic (to console) code editor that wraps React Monaco Editor.
  * As the need arises, this component can accept props to customize the internal Monaco editor options.
  */
-export declare const VuiCodeEditor: ({ language, TokensProvider, onChange, placeholder, onError, colorConfig, value, defaultValue, error, isReadOnly, height, resizable, "data-testid": testId }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiCodeEditor: ({ language: languageProp, TokensProvider, onChange, placeholder, onError, colorConfig, value, defaultValue, error, isReadOnly, height, resizable, completionItemProvider, quickSuggestions, "data-testid": testId }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/form/codeEditor/CodeEditor.js

@@ -1,17 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Editor from "@monaco-editor/react";
 import * as monacoTypes from "monaco-editor/esm/vs/editor/editor.api";
-import { useRef } from "react";
+import { useEffect, useId, useRef } from "react";
+import { VuiText } from "../../typography/Text";
+import { VuiTextColor } from "../../typography/TextColor";
+import { VuiSpacer } from "../../spacer/Spacer";
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent);
+// Mac vs Linux/Windows
+const SUGGEST_SHORTCUT_LABEL = isMac ? "⌃ Space" : "Ctrl + Space";
 /**
  * Generic (to console) code editor that wraps React Monaco Editor.
  * As the need arises, this component can accept props to customize the internal Monaco editor options.
  */
-export const VuiCodeEditor = ({ language, TokensProvider, onChange, placeholder, onError = (errors) => {
+export const VuiCodeEditor = ({ language: languageProp, TokensProvider, onChange, placeholder, onError = (errors) => {
     /*noop*/
-}, colorConfig, value, defaultValue, error, isReadOnly, height = "300px", resizable = false, "data-testid": testId }) => {
+}, colorConfig, value, defaultValue, error, isReadOnly, height = "300px", resizable = false, completionItemProvider, quickSuggestions = false, "data-testid": testId }) => {
+    const instanceId = useId().replace(/:/g, "");
+    const language = `${languageProp}-${instanceId}`;
     const tokensProvider = TokensProvider ? new TokensProvider() : null;
     const monacoRef = useRef(null);
     const modelRef = useRef(null);
+    const completionProviderRef = useRef(completionItemProvider);
+    useEffect(() => {
+        completionProviderRef.current = completionItemProvider;
+    }, [completionItemProvider]);
     if (modelRef.current && monacoRef.current) {
         if (error) {
             const markers = [
@@ -36,6 +48,13 @@ export const VuiCodeEditor = ({ language, TokensProvider, onChange, placeholder,
         if (tokensProvider) {
             monaco.languages.setTokensProvider(language, tokensProvider);
         }
+        if (completionProviderRef.current) {
+            monaco.languages.registerCompletionItemProvider(language, {
+                triggerCharacters: completionProviderRef.current.triggerCharacters,
+                provideCompletionItems: (model, position, context, token) => { var _a, _b; return (_b = (_a = completionProviderRef.current) === null || _a === void 0 ? void 0 : _a.provideCompletionItems(model, position, context, token)) !== null && _b !== void 0 ? _b : { suggestions: [] }; },
+                resolveCompletionItem: (item, token) => { var _a, _b, _c; return (_c = (_b = (_a = completionProviderRef.current) === null || _a === void 0 ? void 0 : _a.resolveCompletionItem) === null || _b === void 0 ? void 0 : _b.call(_a, item, token)) !== null && _c !== void 0 ? _c : item; }
+            });
+        }
         monaco.editor.defineTheme("vectaraEditor", {
             base: "vs",
             inherit: true,
@@ -58,41 +77,41 @@ export const VuiCodeEditor = ({ language, TokensProvider, onChange, placeholder,
         monaco.editor.onDidCreateModel((model) => (modelRef.current = model));
     };
     const shouldShowPlaceholder = placeholder && (!value || value.trim() === "") && (!defaultValue || defaultValue.trim() === "");
-    return (_jsxs("div", Object.assign({ className: "vuiCodeEditor", "data-testid": testId, style: resizable ? { minHeight: height, height, resize: "vertical", overflow: "auto" } : undefined }, { children: [shouldShowPlaceholder && (_jsx("div", Object.assign({ className: "vuiCodeEditor-placeholder", "aria-hidden": "true" }, { children: placeholder }))), _jsx(Editor, { beforeMount: init, height: resizable ? "100%" : height, width: "100%", defaultLanguage: language, defaultValue: defaultValue, value: value, onChange: onChange, onValidate: (markers) => {
-                    const errors = markers.reduce((acc, marker) => {
-                        if (marker.severity === monacoTypes.MarkerSeverity.Error) {
-                            acc.push({
-                                startLine: marker.startLineNumber,
-                                endLine: marker.endLineNumber,
-                                startColumn: marker.startColumn,
-                                endColumn: marker.endColumn,
-                                message: marker.message
-                            });
-                        }
-                        return acc;
-                    }, []);
-                    if (errors.length) {
-                        onError(errors);
-                    }
-                }, theme: "vectaraEditor", options: {
-                    readOnly: isReadOnly,
-                    fontSize: 12,
-                    automaticLayout: true,
-                    renderLineHighlight: "none",
-                    lineNumbers: "off",
-                    glyphMargin: false,
-                    folding: false,
-                    lineDecorationsWidth: 2,
-                    fixedOverflowWidgets: true,
-                    quickSuggestions: {
-                        comments: false,
-                        strings: false,
-                        other: false
-                    },
-                    suggestOnTriggerCharacters: true,
-                    minimap: {
-                        enabled: false
-                    },
-                    wordWrap: "on"
-                } })] })));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "vuiCodeEditor", "data-testid": testId, style: resizable ? { minHeight: height, height, resize: "vertical", overflow: "auto" } : undefined }, { children: [shouldShowPlaceholder && (_jsx("div", Object.assign({ className: "vuiCodeEditor-placeholder", "aria-hidden": "true" }, { children: placeholder }))), _jsx(Editor, { beforeMount: init, height: resizable ? "100%" : height, width: "100%", defaultLanguage: language, defaultValue: defaultValue, value: value, onChange: onChange, onValidate: (markers) => {
+                            const errors = markers.reduce((acc, marker) => {
+                                if (marker.severity === monacoTypes.MarkerSeverity.Error) {
+                                    acc.push({
+                                        startLine: marker.startLineNumber,
+                                        endLine: marker.endLineNumber,
+                                        startColumn: marker.startColumn,
+                                        endColumn: marker.endColumn,
+                                        message: marker.message
+                                    });
+                                }
+                                return acc;
+                            }, []);
+                            if (errors.length) {
+                                onError(errors);
+                            }
+                        }, theme: "vectaraEditor", options: {
+                            readOnly: isReadOnly,
+                            fontSize: 12,
+                            automaticLayout: true,
+                            renderLineHighlight: "none",
+                            lineNumbers: "off",
+                            glyphMargin: false,
+                            folding: false,
+                            lineDecorationsWidth: 2,
+                            fixedOverflowWidgets: true,
+                            quickSuggestions: {
+                                comments: false,
+                                strings: false,
+                                other: quickSuggestions
+                            },
+                            suggestOnTriggerCharacters: true,
+                            minimap: {
+                                enabled: false
+                            },
+                            wordWrap: "on"
+                        } })] })), completionItemProvider && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsx("p", { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [_jsx("kbd", { children: SUGGEST_SHORTCUT_LABEL }), " shows suggestions."] })) }) }))] }))] }));
 };

package/lib/components/typography/_text.scss

@@ -70,6 +70,15 @@ $textRhythm: $sizeM;
     background-color: transparent;
   }
 
+  kbd {
+    background-color: var(--vui-color-light-shade);
+    border: 1px solid var(--vui-color-border-medium);
+    border-radius: $sizeXxs;
+    padding: 0 $sizeXxs;
+    font-family: var(--vui-font-family-monospace);
+    font-size: 0.9em;
+  }
+
   // Inline styles when nested in text-like elements.
   strong,
   b,

package/lib/styles/index.css

@@ -6132,6 +6132,14 @@ h2.react-datepicker__current-month {
   padding: 0;
   background-color: transparent;
 }
+.vuiText kbd {
+  background-color: var(--vui-color-light-shade);
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: 4px;
+  padding: 0 4px;
+  font-family: var(--vui-font-family-monospace);
+  font-size: 0.9em;
+}
 .vuiText strong > pre,
 .vuiText strong > code,
 .vuiText b > pre,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "18.0.1",
+  "version": "18.1.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/codeEditor/CodeEditor.tsx

@@ -1,23 +1,74 @@
 import { useState } from "react";
-import { VuiCodeEditor } from "../../../lib";
+import * as monacoTypes from "monaco-editor/esm/vs/editor/editor.api";
+import { VuiCodeEditor, VuiSpacer } from "../../../lib";
 
 const placeholder = `{
   "team": "engineering"
 }`;
 
+const FIELDS = ["doc.title", "doc.author", "doc.date", "doc.tags"];
+const OPERATORS = ["=", "!=", ">", "<", "LIKE", "AND", "OR"];
+
+const completionItemProvider: monacoTypes.languages.CompletionItemProvider = {
+  triggerCharacters: ["."],
+  provideCompletionItems: (model, position) => {
+    const word = model.getWordUntilPosition(position);
+    const range = {
+      startLineNumber: position.lineNumber,
+      endLineNumber: position.lineNumber,
+      startColumn: word.startColumn,
+      endColumn: word.endColumn
+    };
+
+    const suggestions: Array<monacoTypes.languages.CompletionItem> = [
+      ...FIELDS.map((field) => ({
+        label: field,
+        kind: monacoTypes.languages.CompletionItemKind.Field,
+        insertText: field,
+        range
+      })),
+      ...OPERATORS.map((operator) => ({
+        label: operator,
+        kind: monacoTypes.languages.CompletionItemKind.Operator,
+        insertText: operator,
+        range
+      }))
+    ];
+
+    return { suggestions };
+  }
+};
+
 export const CodeEditor = () => {
   const [value, setValue] = useState<string>("");
+  const [filter, setFilter] = useState<string>("");
 
   return (
-    <VuiCodeEditor
-      resizable
-      language="json"
-      onChange={(newValue?: string) => {
-        setValue(newValue ?? "");
-      }}
-      placeholder={placeholder}
-      value={value}
-      data-testid="codeEditor"
-    />
+    <>
+      <VuiCodeEditor
+        resizable
+        language="json"
+        onChange={(newValue?: string) => {
+          setValue(newValue ?? "");
+        }}
+        placeholder={placeholder}
+        value={value}
+        data-testid="codeEditor"
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiCodeEditor
+        language="filter"
+        onChange={(newValue?: string) => {
+          setFilter(newValue ?? "");
+        }}
+        placeholder='doc.title LIKE "%intro%"'
+        value={filter}
+        completionItemProvider={completionItemProvider}
+        quickSuggestions
+        data-testid="filterEditor"
+      />
+    </>
   );
 };