@checkstack/ui 0.3.0 → 0.4.0

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

@@ -2,6 +2,12 @@ import { xml } from "@codemirror/lang-xml";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
+
 // Decoration marks for XML syntax highlighting using inline styles
 const xmlTagMark = Decoration.mark({
   attributes: { style: "color: hsl(280, 65%, 60%)" },
@@ -16,60 +22,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid XML template position.
- * Templates can appear in:
- * 1. Text content between tags: <tag>|</tag>
- * 2. Attribute values: <tag attr="|">
- * @internal Exported for testing
- */
-export function isValidXmlTemplatePosition(text: string): boolean {
-  // Check if we're inside an attribute value (inside quotes after =)
-  let inTag = false;
-  let inAttrValue = false;
-  let quoteChar = "";
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-
-    if (!inTag && char === "<" && text[i + 1] !== "/") {
-      inTag = true;
-      inAttrValue = false;
-    } else if (inTag && char === ">") {
-      inTag = false;
-      inAttrValue = false;
-    } else if (inTag && !inAttrValue && char === "=") {
-      // Next should be a quote
-      const nextChar = text[i + 1];
-      if (nextChar === '"' || nextChar === "'") {
-        quoteChar = nextChar;
-        inAttrValue = true;
-        i++; // Skip the quote
-      }
-    } else if (inAttrValue && char === quoteChar) {
-      inAttrValue = false;
-      quoteChar = "";
-    }
-  }
-
-  // Valid if inside attribute value
-  if (inAttrValue) {
-    return true;
-  }
-
-  // Valid if between tags (text content position)
-  // Check if we're after a closing > and not inside an opening <
-  const lastOpenTag = text.lastIndexOf("<");
-  const lastCloseTag = text.lastIndexOf(">");
-
-  // If last > is after last <, we're in text content
-  if (lastCloseTag > lastOpenTag) {
-    return true;
-  }
-
-  return false;
-}
-
 /**
  * Build XML + template decorations.
  */
@@ -147,41 +99,11 @@ function buildXmlDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for XML, properly handling template expressions.
- * @internal Exported for testing
- */
-export function calculateXmlIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  let depth = 0;
-
-  // Match all opening and closing tags
-  const tagRegex = /<\/?[\w:-]+[^>]*\/?>/g;
-  let match;
-
-  while ((match = tagRegex.exec(textBefore)) !== null) {
-    const tag = match[0];
-
-    // Self-closing tag: <tag />
-    if (tag.endsWith("/>")) {
-      // No depth change
-      continue;
-    }
-
-    // Closing tag: </tag>
-    if (tag.startsWith("</")) {
-      depth = Math.max(0, depth - 1);
-      continue;
-    }
-
-    // Opening tag: <tag> or <tag attr="value">
-    depth++;
-  }
-
-  return depth * indentUnit;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
 
 /**
  * XML language support for CodeEditor with template expression handling.

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

@@ -0,0 +1,101 @@
+/**
+ * Pure utility functions for YAML 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 YAML template position.
+ * In YAML, templates can appear as values after "key: ".
+ * @internal Exported for testing
+ */
+export function isValidYamlTemplatePosition(text: string): boolean {
+  // Find the current line
+  const lastNewline = text.lastIndexOf("\n");
+  const currentLine = text.slice(lastNewline + 1);
+
+  // Valid positions in YAML:
+  // 1. After a colon and space (value position): "key: |"
+  // 2. Inside a quoted string: 'key: "hello|'
+  // 3. In a list item position: "- |"
+
+  // Check if we're inside a quoted string
+  const singleQuotes = (currentLine.match(/'/g) || []).length;
+  const doubleQuotes = (currentLine.match(/"/g) || []).length;
+  if (singleQuotes % 2 === 1 || doubleQuotes % 2 === 1) {
+    return true;
+  }
+
+  // Check if we're after "key: " (value position)
+  const colonMatch = currentLine.match(/^\s*[\w-]+:\s+/);
+  if (colonMatch) {
+    return true;
+  }
+
+  // Check if we're in a list item position "- "
+  const listMatch = currentLine.match(/^\s*-\s+/);
+  if (listMatch) {
+    return true;
+  }
+
+  // Check if we're after ": " anywhere in the line
+  if (currentLine.includes(": ")) {
+    const afterColon = currentLine.split(": ").slice(1).join(": ");
+    // If we're in the value part (after colon)
+    if (afterColon.length > 0 || currentLine.endsWith(": ")) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Calculate indentation for YAML, properly handling template expressions.
+ * YAML uses indentation-based structure.
+ * @internal Exported for testing
+ */
+export function calculateYamlIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  const lines = textBefore.split("\n");
+  if (lines.length === 0) return 0;
+
+  // Get the last line (the one we're currently on after Enter)
+  const currentLine = lines.at(-1);
+
+  // If current line is empty or whitespace, look at previous line
+  if (currentLine?.trim().length === 0 && lines.length > 1) {
+    // Find the last non-empty line
+    for (let i = lines.length - 2; i >= 0; i--) {
+      const line = lines[i];
+      if (line.trim().length === 0) continue;
+
+      // Count leading spaces
+      const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+
+      // If line ends with ":" it's a key that starts a new block
+      if (line.trimEnd().endsWith(":")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // If line starts with "- " it's a list item
+      if (line.trim().startsWith("-")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // Otherwise, maintain current indentation
+      return leadingSpaces;
+    }
+  }
+
+  // For non-empty current line, find previous non-empty for context
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+    return leadingSpaces;
+  }
+
+  return 0;
+}

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

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "bun:test";
 
-import { isValidYamlTemplatePosition, calculateYamlIndentation } from "./yaml";
+import {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
 
 describe("isValidYamlTemplatePosition", () => {
   describe("value positions", () => {

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

@@ -2,6 +2,12 @@ import { yaml } from "@codemirror/lang-yaml";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
+
 // Decoration marks for YAML syntax highlighting using inline styles
 const yamlKeyMark = Decoration.mark({
   attributes: { style: "color: hsl(210, 100%, 75%)" }, // Bright blue for better visibility
@@ -19,52 +25,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid YAML template position.
- * In YAML, templates can appear as values after "key: ".
- * @internal Exported for testing
- */
-export function isValidYamlTemplatePosition(text: string): boolean {
-  // Find the current line
-  const lastNewline = text.lastIndexOf("\n");
-  const currentLine = text.slice(lastNewline + 1);
-
-  // Valid positions in YAML:
-  // 1. After a colon and space (value position): "key: |"
-  // 2. Inside a quoted string: 'key: "hello|'
-  // 3. In a list item position: "- |"
-
-  // Check if we're inside a quoted string
-  const singleQuotes = (currentLine.match(/'/g) || []).length;
-  const doubleQuotes = (currentLine.match(/"/g) || []).length;
-  if (singleQuotes % 2 === 1 || doubleQuotes % 2 === 1) {
-    return true;
-  }
-
-  // Check if we're after "key: " (value position)
-  const colonMatch = currentLine.match(/^\s*[\w-]+:\s+/);
-  if (colonMatch) {
-    return true;
-  }
-
-  // Check if we're in a list item position "- "
-  const listMatch = currentLine.match(/^\s*-\s+/);
-  if (listMatch) {
-    return true;
-  }
-
-  // Check if we're after ": " anywhere in the line
-  if (currentLine.includes(": ")) {
-    const afterColon = currentLine.split(": ").slice(1).join(": ");
-    // If we're in the value part (after colon)
-    if (afterColon.length > 0 || currentLine.endsWith(": ")) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
 /**
  * Build YAML + template decorations.
  */
@@ -143,56 +103,11 @@ function buildYamlDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for YAML, properly handling template expressions.
- * YAML uses indentation-based structure.
- * @internal Exported for testing
- */
-export function calculateYamlIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  const lines = textBefore.split("\n");
-  if (lines.length === 0) return 0;
-
-  // Get the last line (the one we're currently on after Enter)
-  const currentLine = lines.at(-1);
-
-  // If current line is empty or whitespace, look at previous line
-  if (currentLine?.trim().length === 0 && lines.length > 1) {
-    // Find the last non-empty line
-    for (let i = lines.length - 2; i >= 0; i--) {
-      const line = lines[i];
-      if (line.trim().length === 0) continue;
-
-      // Count leading spaces
-      const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
-
-      // If line ends with ":" it's a key that starts a new block
-      if (line.trimEnd().endsWith(":")) {
-        return leadingSpaces + indentUnit;
-      }
-
-      // If line starts with "- " it's a list item
-      if (line.trim().startsWith("-")) {
-        return leadingSpaces + indentUnit;
-      }
-
-      // Otherwise, maintain current indentation
-      return leadingSpaces;
-    }
-  }
-
-  // For non-empty current line, find previous non-empty for context
-  for (let i = lines.length - 1; i >= 0; i--) {
-    const line = lines[i];
-    if (line.trim().length === 0) continue;
-    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
-    return leadingSpaces;
-  }
-
-  return 0;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
 
 /**
  * YAML language support for CodeEditor with template expression handling.

package/src/components/DateRangeFilter.tsx

@@ -89,8 +89,8 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
                 activePreset === preset.id && !showCustom
                   ? "primary"
                   : preset.id === "custom" && showCustom
-                  ? "primary"
-                  : "outline"
+                    ? "primary"
+                    : "outline"
               }
               size="sm"
               onClick={() => handlePresetClick(preset.id)}
@@ -106,13 +106,21 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
           <span className="text-sm text-muted-foreground">From:</span>
           <DateTimePicker
             value={value.startDate}
-            onChange={(startDate) => onChange({ ...value, startDate })}
+            onChange={(startDate) => {
+              if (startDate) {
+                onChange({ ...value, startDate });
+              }
+            }}
             maxDate={value.endDate}
           />
           <span className="text-sm text-muted-foreground">To:</span>
           <DateTimePicker
             value={value.endDate}
-            onChange={(endDate) => onChange({ ...value, endDate })}
+            onChange={(endDate) => {
+              if (endDate) {
+                onChange({ ...value, endDate });
+              }
+            }}
             minDate={value.startDate}
             maxDate={new Date()}
           />