@checkstack/ui 0.2.4 → 0.3.0

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

@@ -0,0 +1,205 @@
+import { yaml } from "@codemirror/lang-yaml";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// 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
+});
+const yamlStringMark = Decoration.mark({
+  attributes: { style: "color: hsl(142.1, 76.2%, 36.3%)" },
+});
+const yamlNumberMark = Decoration.mark({
+  attributes: { style: "color: hsl(217.2, 91.2%, 59.8%)" },
+});
+const yamlBoolMark = Decoration.mark({
+  attributes: { style: "color: hsl(280, 65%, 60%)" },
+});
+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.
+ */
+function buildYamlDecorations(doc: string): DecorationRange[] {
+  const ranges: DecorationRange[] = [];
+
+  // Match templates first (highest priority)
+  const templateRegex = /\{\{[\w.[\]]*\}\}/g;
+  let match;
+  while ((match = templateRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: templateMark,
+    });
+  }
+
+  // Match YAML keys (word followed by colon)
+  const keyRegex = /^(\s*)([\w-]+):/gm;
+  while ((match = keyRegex.exec(doc)) !== null) {
+    const keyStart = match.index + match[1].length;
+    const keyEnd = keyStart + match[2].length;
+    ranges.push({
+      from: keyStart,
+      to: keyEnd,
+      decoration: yamlKeyMark,
+    });
+  }
+
+  // Match quoted strings
+  const stringRegex = /(["'])(?:(?!\1)[^\\]|\\.)*\1/g;
+  while ((match = stringRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: yamlStringMark,
+    });
+  }
+
+  // Match numbers (standalone)
+  const numberRegex = /(?<=:\s+)-?\d+\.?\d*(?:\s|$)/g;
+  while ((match = numberRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].trim().length,
+      decoration: yamlNumberMark,
+    });
+  }
+
+  // Match booleans
+  const boolRegex = /(?<=:\s+)(true|false|yes|no|on|off)(?:\s|$)/gi;
+  while ((match = boolRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[1].length,
+      decoration: yamlBoolMark,
+    });
+  }
+
+  // Sort by position
+  ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+
+  // Remove overlaps (templates take priority)
+  const filtered: DecorationRange[] = [];
+  for (const range of ranges) {
+    const overlaps = filtered.some(
+      (existing) =>
+        (range.from >= existing.from && range.from < existing.to) ||
+        (range.to > existing.from && range.to <= existing.to),
+    );
+    if (!overlaps) {
+      filtered.push(range);
+    }
+  }
+
+  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;
+}
+
+/**
+ * YAML language support for CodeEditor with template expression handling.
+ */
+export const yamlLanguageSupport: LanguageSupport = {
+  extension: yaml(),
+  buildDecorations: buildYamlDecorations,
+  isValidTemplatePosition: isValidYamlTemplatePosition,
+  calculateIndentation: calculateYamlIndentation,
+};

package/src/components/DynamicForm/DynamicForm.tsx

@@ -2,32 +2,10 @@ import React from "react";
 
 import { EmptyState } from "../../index";
 
-import type { DynamicFormProps, JsonSchemaProperty } from "./types";
-import { extractDefaults } from "./utils";
+import type { DynamicFormProps } from "./types";
+import { extractDefaults, isValueEmpty } from "./utils";
 import { FormField } from "./FormField";
 
-/**
- * Check if a value is considered "empty" for validation purposes.
- */
-function isValueEmpty(val: unknown, propSchema: JsonSchemaProperty): boolean {
-  if (val === undefined || val === null) return true;
-  if (typeof val === "string" && val.trim() === "") return true;
-  // For arrays, check if empty
-  if (Array.isArray(val) && val.length === 0) return true;
-  // For objects (nested schemas), recursively check required fields
-  if (propSchema.type === "object" && propSchema.properties) {
-    const objVal = val as Record<string, unknown>;
-    const requiredKeys = propSchema.required ?? [];
-    for (const key of requiredKeys) {
-      const nestedPropSchema = propSchema.properties[key];
-      if (nestedPropSchema && isValueEmpty(objVal[key], nestedPropSchema)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
 /**
  * DynamicForm generates a form from a JSON Schema.
  * Supports all standard JSON Schema types plus custom extensions for

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -12,7 +12,7 @@ import {
 } from "../../index";
 
 import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
-import { getCleanDescription } from "./utils";
+import { getCleanDescription, NONE_SENTINEL } from "./utils";
 
 /**
  * Field component for dynamically resolved options.
@@ -72,7 +72,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       .catch((error_) => {
         if (!cancelled) {
           setError(
-            error_ instanceof Error ? error_.message : "Failed to load options"
+            error_ instanceof Error ? error_.message : "Failed to load options",
           );
           setLoading(false);
         }
@@ -140,24 +140,41 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
                     No matching options
                   </div>
                 ) : (
-                  filteredOptions.map((opt) => (
-                    <button
-                      key={opt.value}
-                      type="button"
-                      onClick={() => {
-                        onChange(opt.value);
-                        setOpen(false);
-                        setSearchQuery("");
-                      }}
-                      className={`w-full text-left px-3 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground ${
-                        opt.value === value
-                          ? "bg-accent text-accent-foreground"
-                          : ""
-                      }`}
-                    >
-                      {opt.label}
-                    </button>
-                  ))
+                  <>
+                    {!isRequired && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          onChange();
+                          setOpen(false);
+                          setSearchQuery("");
+                        }}
+                        className={`w-full text-left px-3 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground ${
+                          value ? "" : "bg-accent text-accent-foreground"
+                        }`}
+                      >
+                        None
+                      </button>
+                    )}
+                    {filteredOptions.map((opt) => (
+                      <button
+                        key={opt.value}
+                        type="button"
+                        onClick={() => {
+                          onChange(opt.value);
+                          setOpen(false);
+                          setSearchQuery("");
+                        }}
+                        className={`w-full text-left px-3 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground ${
+                          opt.value === value
+                            ? "bg-accent text-accent-foreground"
+                            : ""
+                        }`}
+                      >
+                        {opt.label}
+                      </button>
+                    ))}
+                  </>
                 )}
               </div>
             </div>
@@ -193,7 +210,9 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
         ) : (
           <Select
             value={(value as string) || ""}
-            onValueChange={(val) => onChange(val)}
+            onValueChange={(val) =>
+              onChange(val === NONE_SENTINEL ? undefined : val)
+            }
             disabled={options.length === 0}
           >
             <SelectTrigger id={id}>
@@ -206,6 +225,14 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
               />
             </SelectTrigger>
             <SelectContent>
+              {!isRequired && (
+                <SelectItem
+                  value={NONE_SENTINEL}
+                  className="text-muted-foreground"
+                >
+                  None
+                </SelectItem>
+              )}
               {options.map((opt) => (
                 <SelectItem key={opt.value} value={opt.value}>
                   {opt.label}

package/src/components/DynamicForm/FormField.tsx

@@ -13,13 +13,13 @@ import {
   Textarea,
   Toggle,
   ColorPicker,
-  TemplateEditor,
 } from "../../index";
 
 import type { FormFieldProps, JsonSchemaProperty } from "./types";
-import { getCleanDescription } from "./utils";
+import { getCleanDescription, NONE_SENTINEL } from "./utils";
 import { DynamicOptionsField } from "./DynamicOptionsField";
 import { JsonField } from "./JsonField";
+import { MultiTypeEditorField } from "./MultiTypeEditorField";
 
 /**
  * Recursive field renderer that handles all supported JSON Schema types.
@@ -84,12 +84,22 @@ export const FormField: React.FC<FormFieldProps> = ({
         <div className="relative">
           <Select
             value={(value as string) || (propSchema.default as string) || ""}
-            onValueChange={(val) => onChange(val)}
+            onValueChange={(val) =>
+              onChange(val === NONE_SENTINEL ? undefined : val)
+            }
           >
             <SelectTrigger id={id}>
               <SelectValue placeholder={`Select ${label}`} />
             </SelectTrigger>
             <SelectContent>
+              {!isRequired && (
+                <SelectItem
+                  value={NONE_SENTINEL}
+                  className="text-muted-foreground"
+                >
+                  None
+                </SelectItem>
+              )}
               {propSchema.enum.map((opt: string) => (
                 <SelectItem key={opt} value={opt}>
                   {opt}
@@ -104,46 +114,34 @@ export const FormField: React.FC<FormFieldProps> = ({
 
   // String
   if (propSchema.type === "string") {
+    const cleanDesc = getCleanDescription(description);
+
+    // Multi-type editor field (x-editor-types)
+    const editorTypes = propSchema["x-editor-types"];
+    if (editorTypes && editorTypes.length > 0) {
+      return (
+        <MultiTypeEditorField
+          id={id}
+          label={label}
+          description={cleanDesc}
+          value={value as string | undefined}
+          isRequired={isRequired}
+          editorTypes={editorTypes}
+          templateProperties={templateProperties}
+          onChange={onChange as (val: string | undefined) => void}
+        />
+      );
+    }
+
     const isTextarea =
       propSchema.format === "textarea" ||
       propSchema.description?.includes("[textarea]");
     const isSecret = (
       propSchema as JsonSchemaProperty & { "x-secret"?: boolean }
     )["x-secret"];
-    const cleanDesc = getCleanDescription(description);
 
-    // Textarea fields - use TemplateEditor if templateProperties available
+    // Textarea fields
     if (isTextarea) {
-      // If we have template properties, use TemplateEditor
-      if (templateProperties && templateProperties.length > 0) {
-        return (
-          <div className="space-y-2">
-            <div>
-              <Label htmlFor={id}>
-                {label} {isRequired && "*"}
-              </Label>
-              {cleanDesc && (
-                <p className="text-sm text-muted-foreground mt-0.5">
-                  {cleanDesc}
-                </p>
-              )}
-            </div>
-            <TemplateEditor
-              value={(value as string) || ""}
-              onChange={(val) => onChange(val)}
-              availableProperties={templateProperties}
-              placeholder={
-                propSchema.default
-                  ? `Default: ${String(propSchema.default)}`
-                  : "Enter template..."
-              }
-              rows={5}
-            />
-          </div>
-        );
-      }
-
-      // No template properties, fall back to regular textarea
       return (
         <div className="space-y-2">
           <div>
@@ -213,37 +211,7 @@ export const FormField: React.FC<FormFieldProps> = ({
       );
     }
 
-    // Default string input - use TemplateEditor if templateProperties available
-    // If we have template properties, use TemplateEditor with smaller rows
-    if (templateProperties && templateProperties.length > 0) {
-      return (
-        <div className="space-y-2">
-          <div>
-            <Label htmlFor={id}>
-              {label} {isRequired && "*"}
-            </Label>
-            {cleanDesc && (
-              <p className="text-sm text-muted-foreground mt-0.5">
-                {cleanDesc}
-              </p>
-            )}
-          </div>
-          <TemplateEditor
-            value={(value as string) || ""}
-            onChange={(val) => onChange(val)}
-            availableProperties={templateProperties}
-            placeholder={
-              propSchema.default
-                ? `Default: ${String(propSchema.default)}`
-                : undefined
-            }
-            rows={2}
-          />
-        </div>
-      );
-    }
-
-    // No template properties - fallback to regular Input
+    // Default string input
     return (
       <div className="space-y-2">
         <div>
@@ -291,7 +259,7 @@ export const FormField: React.FC<FormFieldProps> = ({
             onChange(
               propSchema.type === "integer"
                 ? Number.parseInt(e.target.value, 10)
-                : Number.parseFloat(e.target.value)
+                : Number.parseFloat(e.target.value),
             )
           }
         />
@@ -390,7 +358,7 @@ export const FormField: React.FC<FormFieldProps> = ({
           const newItem: Record<string, unknown> = {};
           // Find discriminator and set all properties with defaults
           for (const [propKey, propDef] of Object.entries(
-            firstVariant.properties
+            firstVariant.properties,
           )) {
             if (propDef.const !== undefined) {
               // This is the discriminator field
@@ -489,7 +457,7 @@ export const FormField: React.FC<FormFieldProps> = ({
     // Find discriminator: the field that has "const" in each variant
     let discriminatorField: string | undefined;
     for (const [fieldName, fieldSchema] of Object.entries(
-      firstVariant.properties
+      firstVariant.properties,
     )) {
       if (fieldSchema.const !== undefined) {
         discriminatorField = fieldName;
@@ -547,7 +515,7 @@ export const FormField: React.FC<FormFieldProps> = ({
                 };
                 // Set defaults for other properties
                 for (const [propKey, propDef] of Object.entries(
-                  newVariant.properties || {}
+                  newVariant.properties || {},
                 )) {
                   if (
                     propKey !== discriminatorField &&

package/src/components/DynamicForm/JsonField.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import Ajv from "ajv";
 import addFormats from "ajv-formats";
-import Editor from "react-simple-code-editor";
-// @ts-expect-error - prismjs doesn't have types for deep imports in some environments
-import { highlight, languages } from "prismjs/components/prism-core";
-import "prismjs/components/prism-json";
 
+import { CodeEditor } from "../CodeEditor";
 import type { JsonFieldProps } from "./types";
 
 const ajv = new Ajv({ allErrors: true, strict: false });
@@ -21,7 +18,7 @@ export const JsonField: React.FC<JsonFieldProps> = ({
   onChange,
 }) => {
   const [internalValue, setInternalValue] = React.useState(
-    JSON.stringify(value || {}, undefined, 2)
+    JSON.stringify(value || {}, undefined, 2),
   );
   const [error, setError] = React.useState<string | undefined>();
   const lastPropValue = React.useRef(value);
@@ -59,7 +56,7 @@ export const JsonField: React.FC<JsonFieldProps> = ({
         setError(
           validateFn.errors
             ?.map((e) => `${e.instancePath} ${e.message}`)
-            .join(", ")
+            .join(", "),
         );
         return false;
       }
@@ -71,27 +68,24 @@ export const JsonField: React.FC<JsonFieldProps> = ({
     }
   };
 
+  const handleChange = (code: string) => {
+    setInternalValue(code);
+    const parsed = validate(code);
+    if (parsed !== false) {
+      lastPropValue.current = parsed;
+      onChange(parsed);
+    }
+  };
+
   return (
     <div className="space-y-2">
-      <div className="min-h-[100px] w-full rounded-md border border-input bg-background font-mono text-sm focus-within:ring-2 focus-within:ring-ring focus-within:border-transparent transition-all overflow-hidden box-border">
-        <Editor
-          id={id}
-          value={internalValue}
-          onValueChange={(code) => {
-            setInternalValue(code);
-            const parsed = validate(code);
-            if (parsed !== false) {
-              lastPropValue.current = parsed;
-              onChange(parsed);
-            }
-          }}
-          highlight={(code) => highlight(code, languages.json)}
-          padding={10}
-          style={{
-            minHeight: "100px",
-          }}
-        />
-      </div>
+      <CodeEditor
+        id={id}
+        value={internalValue}
+        onChange={handleChange}
+        language="json"
+        minHeight="100px"
+      />
       {error && <p className="text-xs text-destructive font-medium">{error}</p>}
     </div>
   );