@checkstack/ui 0.5.3 → 1.0.0

package/src/components/CodeEditor/templateUtils.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "bun:test";
+import { detectOpenTemplate, detectAutoClosedBraces } from "./templateUtils";
+
+describe("detectOpenTemplate", () => {
+  it("returns isInTemplate=false when no open template", () => {
+    const content = '{"foo": "bar"}';
+    const result = detectOpenTemplate({ content, cursorOffset: 10 });
+    expect(result.isInTemplate).toBe(false);
+  });
+
+  it("returns isInTemplate=false when template is closed", () => {
+    const content = '{"foo": "{{test}}"}';
+    const result = detectOpenTemplate({ content, cursorOffset: 18 });
+    expect(result.isInTemplate).toBe(false);
+  });
+
+  it("returns isInTemplate=true when inside open template", () => {
+    const content = '{"foo": "{{payl';
+    const result = detectOpenTemplate({
+      content,
+      cursorOffset: content.length,
+    });
+    expect(result.isInTemplate).toBe(true);
+    expect(result.query).toBe("payl");
+  });
+
+  it("returns correct startOffset", () => {
+    const content = '{"foo": "{{test';
+    const result = detectOpenTemplate({
+      content,
+      cursorOffset: content.length,
+    });
+    expect(result.startOffset).toBe(9);
+  });
+
+  it("returns correct line number and column", () => {
+    const content = `{
+  "foo": "{{test`;
+    const result = detectOpenTemplate({
+      content,
+      cursorOffset: content.length,
+    });
+    expect(result.lineNumber).toBe(2);
+    expect(result.startColumn).toBe(11);
+  });
+
+  it("handles cursor right after {{", () => {
+    const content = '{"foo": "{{';
+    const result = detectOpenTemplate({
+      content,
+      cursorOffset: content.length,
+    });
+    expect(result.isInTemplate).toBe(true);
+    expect(result.query).toBe("");
+  });
+
+  it("returns isInTemplate=false when cursor is after closed and before new open", () => {
+    const content = '{"a": "{{done}}", "b": "';
+    const result = detectOpenTemplate({
+      content,
+      cursorOffset: content.length,
+    });
+    expect(result.isInTemplate).toBe(false);
+  });
+});
+
+describe("detectAutoClosedBraces", () => {
+  it("returns 0 when no braces after cursor", () => {
+    const content = '{"foo": "{{test}}"}';
+    const result = detectAutoClosedBraces({ content, cursorOffset: 9 });
+    expect(result).toBe(0);
+  });
+
+  it("returns 2 when }} follows cursor", () => {
+    const content = '{"foo": "{{test}}"}';
+    // Cursor is after "test" but before }}
+    const result = detectAutoClosedBraces({ content, cursorOffset: 15 });
+    expect(result).toBe(2);
+  });
+
+  it("returns 1 when single } follows cursor", () => {
+    const content = '{"foo": "{{test}"}';
+    // Only one } after test
+    const result = detectAutoClosedBraces({ content, cursorOffset: 15 });
+    expect(result).toBe(1);
+  });
+});

package/src/components/CodeEditor/templateUtils.ts

@@ -0,0 +1,81 @@
+/**
+ * Template utilities for Monaco Editor
+ * Handles detection and position tracking of {{...}} template syntax
+ */
+
+/**
+ * Information about an unclosed template at the cursor
+ */
+export interface OpenTemplateContext {
+  /** Whether we're inside an unclosed {{ */
+  isInTemplate: boolean;
+  /** The text typed after {{ */
+  query: string;
+  /** The offset where {{ starts */
+  startOffset: number;
+  /** The line number where {{ is (1-indexed) */
+  lineNumber: number;
+  /** The column where {{ starts (1-indexed) */
+  startColumn: number;
+}
+
+/**
+ * Detect if cursor is inside an unclosed {{ template context
+ */
+export function detectOpenTemplate({
+  content,
+  cursorOffset,
+}: {
+  content: string;
+  cursorOffset: number;
+}): OpenTemplateContext {
+  const textBefore = content.slice(0, cursorOffset);
+  const lastOpen = textBefore.lastIndexOf("{{");
+  const lastClose = textBefore.lastIndexOf("}}");
+
+  if (lastOpen === -1 || lastOpen <= lastClose) {
+    return {
+      isInTemplate: false,
+      query: "",
+      startOffset: -1,
+      lineNumber: 0,
+      startColumn: 0,
+    };
+  }
+
+  const query = textBefore.slice(lastOpen + 2);
+
+  // Calculate line number and column
+  const beforeTemplate = content.slice(0, lastOpen);
+  const lines = beforeTemplate.split("\n");
+  const lineNumber = lines.length;
+  const startColumn = (lines.at(-1)?.length ?? 0) + 1;
+
+  return {
+    isInTemplate: true,
+    query,
+    startOffset: lastOpen,
+    lineNumber,
+    startColumn,
+  };
+}
+
+/**
+ * Check if there are auto-closed braces after the cursor
+ */
+export function detectAutoClosedBraces({
+  content,
+  cursorOffset,
+}: {
+  content: string;
+  cursorOffset: number;
+}): number {
+  const textAfter = content.slice(cursorOffset);
+  if (textAfter.startsWith("}}")) {
+    return 2;
+  }
+  if (textAfter.startsWith("}")) {
+    return 1;
+  }
+  return 0;
+}

package/src/components/DynamicForm/FormField.tsx

@@ -349,7 +349,18 @@ export const FormField: React.FC<FormFieldProps> = ({
     if (!itemSchema) return <></>;
 
     // Helper to create initial value for new array items
-    const createNewItem = (): Record<string, unknown> => {
+    const createNewItem = (): unknown => {
+      // Handle primitive types
+      if (itemSchema.type === "string") {
+        return itemSchema.default ?? "";
+      }
+      if (itemSchema.type === "number" || itemSchema.type === "integer") {
+        return itemSchema.default ?? 0;
+      }
+      if (itemSchema.type === "boolean") {
+        return itemSchema.default ?? false;
+      }
+
       // Check if itemSchema is a discriminated union
       const variants = itemSchema.oneOf || itemSchema.anyOf;
       if (variants && variants.length > 0) {
@@ -391,12 +402,7 @@ export const FormField: React.FC<FormFieldProps> = ({
             type="button"
             variant="outline"
             size="sm"
-            onClick={() =>
-              onChange([
-                ...(items as Record<string, unknown>[]),
-                createNewItem(),
-              ])
-            }
+            onClick={() => onChange([...items, createNewItem()])}
             className="h-8 gap-1 transition-all hover:bg-accent hover:text-accent-foreground"
           >
             <Plus className="h-4 w-4" />

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -233,6 +233,39 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           templateProperties={templateProperties}
         />
       )}
+
+      {selectedType === "javascript" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="javascript"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "typescript" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="typescript"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "shell" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="shell"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
     </div>
   );
 };

package/src/components/DynamicForm/utils.ts

@@ -175,4 +175,7 @@ export const EDITOR_TYPE_LABELS: Record<EditorType, string> = {
   xml: "XML",
   markdown: "Markdown",
   formdata: "Form Data",
+  javascript: "JavaScript",
+  typescript: "TypeScript",
+  shell: "Shell",
 };

package/src/components/CodeEditor/languageSupport/enterBehavior.test.ts

@@ -1,173 +0,0 @@
-import { describe, expect, it } from "bun:test";
-
-import { isBetweenBrackets } from "./enterBehavior";
-
-describe("isBetweenBrackets", () => {
-  // ============================================================================
-  // Curly braces
-  // ============================================================================
-  describe("curly braces", () => {
-    it("returns true for empty object {|}", () => {
-      expect(isBetweenBrackets("{", "}")).toBe(true);
-    });
-
-    it("returns false when content before closing brace", () => {
-      // Last char is "1", not "{"
-      expect(isBetweenBrackets('{"a": 1', "}")).toBe(false);
-    });
-
-    it("returns false when only opening brace before", () => {
-      expect(isBetweenBrackets("{", "x")).toBe(false);
-    });
-
-    it("returns false when only closing brace after", () => {
-      expect(isBetweenBrackets("x", "}")).toBe(false);
-    });
-
-    it("returns false for nested opening {|{", () => {
-      expect(isBetweenBrackets("{", "{")).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // Square brackets
-  // ============================================================================
-  describe("square brackets", () => {
-    it("returns true for empty array [|]", () => {
-      expect(isBetweenBrackets("[", "]")).toBe(true);
-    });
-
-    it("returns false when content before closing bracket", () => {
-      // Last char is "2", not "["
-      expect(isBetweenBrackets("[1, 2", "]")).toBe(false);
-    });
-
-    it("returns false when only opening bracket before", () => {
-      expect(isBetweenBrackets("[", "x")).toBe(false);
-    });
-
-    it("returns false when only closing bracket after", () => {
-      expect(isBetweenBrackets("x", "]")).toBe(false);
-    });
-
-    it("returns false for nested opening [|[", () => {
-      expect(isBetweenBrackets("[", "[")).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // XML/HTML tags
-  // ============================================================================
-  describe("XML/HTML tags", () => {
-    it("returns true for empty tag <div>|</div>", () => {
-      expect(isBetweenBrackets("<div>", "</div>")).toBe(true);
-    });
-
-    it('returns true for tag with attributes <div class="x">|</div>', () => {
-      expect(isBetweenBrackets('<div class="x">', "</div>")).toBe(true);
-    });
-
-    it("returns true for nested tags <outer><inner>|</inner>", () => {
-      expect(isBetweenBrackets("<outer><inner>", "</inner>")).toBe(true);
-    });
-
-    it("returns true for self-named closing tag <a>|</a>", () => {
-      expect(isBetweenBrackets("<a>", "</a>")).toBe(true);
-    });
-
-    it("returns false for adjacent opening tags <a>|<b>", () => {
-      expect(isBetweenBrackets("<a>", "<b>")).toBe(false);
-    });
-
-    it("returns false for text after tag <div>|text", () => {
-      expect(isBetweenBrackets("<div>", "text")).toBe(false);
-    });
-
-    it("returns false for self-closing tag <br/>|", () => {
-      expect(isBetweenBrackets("<br/>", "")).toBe(false);
-    });
-
-    it("returns false for comment after tag <div>|<!--", () => {
-      expect(isBetweenBrackets("<div>", "<!--")).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // Edge cases
-  // ============================================================================
-  describe("edge cases", () => {
-    it("returns false for empty strings", () => {
-      expect(isBetweenBrackets("", "")).toBe(false);
-    });
-
-    it("returns false for whitespace only", () => {
-      expect(isBetweenBrackets("  ", "  ")).toBe(false);
-    });
-
-    it("returns false for newlines", () => {
-      expect(isBetweenBrackets("{\n", "\n}")).toBe(false);
-    });
-
-    it("returns true for template braces {{|}}", () => {
-      // { followed by } - pattern matches even though it's part of template
-      expect(isBetweenBrackets("{{", "}}")).toBe(true);
-    });
-
-    it("handles single character inputs", () => {
-      expect(isBetweenBrackets("a", "b")).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // Real-world scenarios
-  // ============================================================================
-  describe("real-world scenarios", () => {
-    it("JSON: empty object literal", () => {
-      expect(isBetweenBrackets('{"name": ', "}")).toBe(false); // Not at the boundary
-    });
-
-    it("JSON: cursor right after opening brace", () => {
-      expect(isBetweenBrackets("{", '  "name": "value"}')).toBe(false); // Has content
-    });
-
-    it("XML: HTML doctype before tag", () => {
-      expect(isBetweenBrackets("<!DOCTYPE html><html>", "</html>")).toBe(true);
-    });
-
-    it("XML: after text content in tag", () => {
-      expect(isBetweenBrackets("<p>Hello", "</p>")).toBe(false); // "o" != ">"
-    });
-
-    it("YAML: no brackets involved", () => {
-      expect(isBetweenBrackets("key:", "")).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // Regression tests
-  // ============================================================================
-  describe("regression: autocomplete interaction", () => {
-    /**
-     * REGRESSION TEST (documented, requires DOM testing)
-     *
-     * Issue: When autocomplete popup is showing, pressing Enter should select
-     * the completion item, NOT insert a newline.
-     *
-     * Fix: In CodeEditor.tsx, the custom Enter keymap checks `completionStatus(state)`
-     * and returns `false` when autocomplete is "active", allowing the autocomplete
-     * extension to handle the Enter key.
-     *
-     * This cannot be unit tested without a full CodeMirror DOM integration.
-     * Manual verification steps:
-     * 1. Type "{{" in the editor with template properties configured
-     * 2. Autocomplete popup should appear
-     * 3. Press Enter to select a template
-     * 4. Template should be inserted (NOT a newline)
-     */
-    it("documents the autocomplete Enter key requirement", () => {
-      // This test exists purely as documentation
-      // The actual fix is in CodeEditor.tsx: completionStatus(state) check
-      expect(true).toBe(true);
-    });
-  });
-});

package/src/components/CodeEditor/languageSupport/enterBehavior.ts

@@ -1,35 +0,0 @@
-/**
- * Utilities for CodeEditor Enter key behavior.
- * Extracted for testability.
- */
-
-/**
- * Check if the cursor position is between matching brackets or tags.
- * Used to determine if Enter should "split" the brackets/tags.
- *
- * @param textBefore - Text before the cursor position
- * @param textAfter - Text after the cursor position
- * @returns true if cursor is between matching brackets/tags
- *
- * @example
- * // Returns true for:
- * // {|} - cursor between curly braces
- * // [|] - cursor between square brackets
- * // <tag>|</tag> - cursor between opening and closing tags
- */
-export function isBetweenBrackets(
-  textBefore: string,
-  textAfter: string,
-): boolean {
-  const charBefore = textBefore.slice(-1);
-  const charAfter = textAfter.charAt(0);
-
-  return (
-    // Curly braces: {|}
-    (charBefore === "{" && charAfter === "}") ||
-    // Square brackets: [|]
-    (charBefore === "[" && charAfter === "]") ||
-    // XML/HTML tags: <tag>|</tag>
-    (charBefore === ">" && charAfter === "<" && textAfter.startsWith("</"))
-  );
-}

package/src/components/CodeEditor/languageSupport/index.ts

@@ -1,22 +0,0 @@
-export type { LanguageSupport, DecorationRange } from "./types";
-export {
-  jsonLanguageSupport,
-  isValidJsonTemplatePosition,
-  calculateJsonIndentation,
-} from "./json";
-export {
-  yamlLanguageSupport,
-  isValidYamlTemplatePosition,
-  calculateYamlIndentation,
-} from "./yaml";
-export {
-  xmlLanguageSupport,
-  isValidXmlTemplatePosition,
-  calculateXmlIndentation,
-} from "./xml";
-export {
-  markdownLanguageSupport,
-  isValidMarkdownTemplatePosition,
-  calculateMarkdownIndentation,
-} from "./markdown";
-export { isBetweenBrackets } from "./enterBehavior";

package/src/components/CodeEditor/languageSupport/json-utils.ts

@@ -1,117 +0,0 @@
-/**
- * Pure utility functions for JSON parsing that don't depend on CodeMirror.
- * These are extracted to allow testing without triggering CodeMirror's module loading.
- */
-
-/**
- * Check if cursor is in a valid JSON template position.
- * Returns true if:
- * 1. Inside a string value (for string templates like "{{payload.name}}")
- * 2. In a value position after a colon but outside quotes (for number templates like {{payload.count}})
- * 3. Inside an array element position
- *
- * @internal Exported for testing
- */
-export function isValidJsonTemplatePosition(text: string): boolean {
-  let insideString = false;
-  let inValuePosition = false;
-  // Stack to track object/array nesting: 'o' for object, 'a' for array
-  const nestingStack: ("o" | "a")[] = [];
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    const prevChar = i > 0 ? text[i - 1] : "";
-
-    if (char === '"' && prevChar !== "\\") {
-      insideString = !insideString;
-    } else if (!insideString) {
-      switch (char) {
-        case ":": {
-          inValuePosition = true;
-          break;
-        }
-        case ",": {
-          // After comma: in arrays we stay in value position, in objects we go to key position
-          const currentContext = nestingStack.at(-1);
-          inValuePosition = currentContext === "a";
-          break;
-        }
-        case "{": {
-          // Start of object - next is a key position, not a value
-          nestingStack.push("o");
-          inValuePosition = false;
-          break;
-        }
-        case "[": {
-          // Start of array - next is a value position
-          nestingStack.push("a");
-          inValuePosition = true;
-          break;
-        }
-        case "}": {
-          nestingStack.pop();
-          inValuePosition = false;
-          break;
-        }
-        case "]": {
-          nestingStack.pop();
-          inValuePosition = false;
-          break;
-        }
-      }
-    }
-  }
-
-  // Valid if inside a string OR in a value position (for bare number templates)
-  return insideString || inValuePosition;
-}
-
-/**
- * Calculate indentation for JSON, properly handling template expressions.
- * Counts structural { and [ while ignoring {{ template braces.
- * @internal Exported for testing
- */
-export function calculateJsonIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  let depth = 0;
-  let insideString = false;
-  let i = 0;
-
-  while (i < textBefore.length) {
-    const char = textBefore[i];
-    const nextChar = i < textBefore.length - 1 ? textBefore[i + 1] : "";
-    const prevChar = i > 0 ? textBefore[i - 1] : "";
-
-    // Handle string boundaries
-    if (char === '"' && prevChar !== "\\") {
-      insideString = !insideString;
-      i++;
-      continue;
-    }
-
-    if (!insideString) {
-      // Skip template braces {{ and }}
-      if (char === "{" && nextChar === "{") {
-        i += 2;
-        continue;
-      }
-      if (char === "}" && nextChar === "}") {
-        i += 2;
-        continue;
-      }
-
-      // Count structural braces
-      if (char === "{" || char === "[") {
-        depth++;
-      } else if (char === "}" || char === "]") {
-        depth = Math.max(0, depth - 1);
-      }
-    }
-
-    i++;
-  }
-
-  return depth * indentUnit;
-}