@checkstack/ui 0.2.4 → 0.3.0

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -0,0 +1,465 @@
+import React from "react";
+import { Label } from "../Label";
+import { Textarea } from "../Textarea";
+import { CodeEditor, type TemplateProperty } from "../CodeEditor";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../Select";
+import { KeyValueEditor } from "./KeyValueEditor";
+import {
+  type EditorType,
+  detectEditorType,
+  serializeFormData,
+  parseFormData,
+  EDITOR_TYPE_LABELS,
+} from "./utils";
+
+export interface MultiTypeEditorFieldProps {
+  /** Unique identifier for the field */
+  id: string;
+  /** Label for the field */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Current string value */
+  value: string | undefined;
+  /** Whether the field is required */
+  isRequired?: boolean;
+  /** Available editor types */
+  editorTypes: EditorType[];
+  /** Optional template properties for autocomplete */
+  templateProperties?: TemplateProperty[];
+  /** Callback when value changes */
+  onChange: (value: string | undefined) => void;
+}
+
+/**
+ * A multi-type editor field that lets users select from different input modes.
+ * Supports raw text, JSON, form data, and "none" (disabled).
+ * When templateProperties are provided, all applicable modes get template autocomplete.
+ */
+export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
+  id,
+  label,
+  description,
+  value,
+  isRequired,
+  editorTypes,
+  templateProperties,
+  onChange,
+}) => {
+  // Detect initial editor type from value
+  const [selectedType, setSelectedType] = React.useState<EditorType>(() =>
+    detectEditorType(value, editorTypes),
+  );
+
+  // Track if this is the initial mount to avoid re-detecting on every value change
+  const isInitialMount = React.useRef(true);
+  React.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    // Don't re-detect type when value changes after initial mount
+  }, [value]);
+
+  const handleTypeChange = (newType: EditorType) => {
+    setSelectedType(newType);
+
+    // Clear value when switching to "none"
+    if (newType === "none") {
+      onChange("");
+      return;
+    }
+
+    // When switching to formdata
+    if (newType === "formdata") {
+      if (!value || value.trim() === "") {
+        // Empty value, start fresh
+        onChange("");
+        return;
+      }
+
+      // Try to convert from JSON
+      try {
+        const parsed = JSON.parse(value);
+        if (
+          typeof parsed === "object" &&
+          parsed !== null &&
+          !Array.isArray(parsed)
+        ) {
+          const pairs = Object.entries(parsed).map(([key, val]) => ({
+            key,
+            value: String(val),
+          }));
+          onChange(serializeFormData(pairs));
+          return;
+        }
+      } catch {
+        // Not JSON
+      }
+
+      // Check if already formdata-like (has = sign)
+      if (value.includes("=") && !value.includes("\n")) {
+        // Looks like formdata, keep it
+        return;
+      }
+
+      // Can't convert - clear value to start fresh
+      onChange("");
+      return;
+    }
+
+    // When switching to JSON from formdata, try to convert
+    if (newType === "json" && value && value.includes("=")) {
+      const pairs = parseFormData(value);
+      if (pairs.length > 0 && pairs.every((p) => p.key.trim() !== "")) {
+        const obj: Record<string, string> = {};
+        for (const pair of pairs) {
+          obj[pair.key] = pair.value;
+        }
+        try {
+          // eslint-disable-next-line unicorn/no-null -- JSON.stringify requires null for formatting
+          onChange(JSON.stringify(obj, null, 2));
+          return;
+        } catch {
+          // Keep current value
+        }
+      }
+    }
+  };
+
+  // Only show dropdown if there's more than one type
+  const showDropdown = editorTypes.length > 1;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <Label htmlFor={id}>
+            {label} {isRequired && "*"}
+          </Label>
+          {description && (
+            <p className="text-sm text-muted-foreground mt-0.5">
+              {description}
+            </p>
+          )}
+        </div>
+        {showDropdown && (
+          <Select value={selectedType} onValueChange={handleTypeChange}>
+            <SelectTrigger className="w-[130px] h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {editorTypes.map((type) => (
+                <SelectItem key={type} value={type}>
+                  {EDITOR_TYPE_LABELS[type]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      {/* Render appropriate editor based on selected type */}
+      {selectedType === "none" && (
+        <p className="text-sm text-muted-foreground italic py-2">
+          No content (disabled)
+        </p>
+      )}
+
+      {selectedType === "raw" && (
+        <RawEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "json" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="json"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "yaml" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="yaml"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "xml" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="xml"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "markdown" && (
+        <CodeEditor
+          id={id}
+          value={value ?? ""}
+          onChange={onChange}
+          language="markdown"
+          minHeight="150px"
+          templateProperties={templateProperties}
+        />
+      )}
+
+      {selectedType === "formdata" && (
+        <KeyValueEditor
+          id={id}
+          value={parseFormData(value ?? "")}
+          onChange={(pairs) => onChange(serializeFormData(pairs))}
+          templateProperties={templateProperties}
+        />
+      )}
+    </div>
+  );
+};
+
+/**
+ * Detect if cursor is inside an unclosed {{ template context.
+ */
+function detectRawTemplateContext(text: string, cursorPos: number) {
+  const textBefore = text.slice(0, cursorPos);
+  const lastOpenBrace = textBefore.lastIndexOf("{{");
+  const lastCloseBrace = textBefore.lastIndexOf("}}");
+
+  if (lastOpenBrace !== -1 && lastOpenBrace > lastCloseBrace) {
+    const query = textBefore.slice(lastOpenBrace + 2);
+    if (!query.includes("\n")) {
+      return { isInTemplate: true, query, startPos: lastOpenBrace };
+    }
+  }
+  return { isInTemplate: false, query: "", startPos: -1 };
+}
+
+/**
+ * Raw text editor with optional template autocomplete.
+ * Uses a simple textarea with popup autocomplete (similar to original TemplateEditor).
+ */
+const RawEditor: React.FC<{
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  templateProperties?: TemplateProperty[];
+}> = ({ id, value, onChange, templateProperties }) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [showPopup, setShowPopup] = React.useState(false);
+  const [popupPosition, setPopupPosition] = React.useState({ top: 0, left: 0 });
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [templateContext, setTemplateContext] = React.useState<{
+    query: string;
+    startPos: number;
+  }>({ query: "", startPos: -1 });
+
+  // Filter properties based on query
+  const filteredProperties = React.useMemo(() => {
+    if (!templateProperties) return [];
+    if (!templateContext.query.trim()) return templateProperties;
+    const lowerQuery = templateContext.query.toLowerCase();
+    return templateProperties.filter((prop) =>
+      prop.path.toLowerCase().includes(lowerQuery),
+    );
+  }, [templateProperties, templateContext.query]);
+
+  const calculatePopupPosition = React.useCallback(() => {
+    const textarea = textareaRef.current;
+    const container = containerRef.current;
+    if (!textarea || !container) return;
+
+    const lineHeight =
+      Number.parseInt(getComputedStyle(textarea).lineHeight) || 20;
+    const paddingTop =
+      Number.parseInt(getComputedStyle(textarea).paddingTop) || 8;
+    const cursorPos = textarea.selectionStart ?? 0;
+    const textBeforeCursor = value.slice(0, cursorPos);
+    const lines = textBeforeCursor.split("\n");
+    const currentLineIndex = lines.length - 1;
+
+    const top = paddingTop + (currentLineIndex + 1) * lineHeight;
+    const currentLine = lines[currentLineIndex] ?? "";
+    const charWidth = 8;
+    const paddingLeft =
+      Number.parseInt(getComputedStyle(textarea).paddingLeft) || 12;
+    const left = Math.min(paddingLeft + currentLine.length * charWidth, 200);
+
+    setPopupPosition({
+      top: Math.max(top, lineHeight),
+      left: Math.max(left, 0),
+    });
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+
+    if (!templateProperties || templateProperties.length === 0) return;
+
+    setTimeout(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+
+      const cursorPos = textarea.selectionStart ?? 0;
+      const context = detectRawTemplateContext(newValue, cursorPos);
+
+      if (context.isInTemplate) {
+        setTemplateContext({
+          query: context.query,
+          startPos: context.startPos,
+        });
+        setShowPopup(true);
+        setSelectedIndex(0);
+        calculatePopupPosition();
+      } else {
+        setShowPopup(false);
+      }
+    }, 0);
+  };
+
+  const insertProperty = React.useCallback(
+    (prop: TemplateProperty) => {
+      const textarea = textareaRef.current;
+      if (!textarea || templateContext.startPos === -1) return;
+
+      const template = `{{${prop.path}}}`;
+      const cursorPos = textarea.selectionStart ?? 0;
+      const newValue =
+        value.slice(0, templateContext.startPos) +
+        template +
+        value.slice(cursorPos);
+
+      onChange(newValue);
+      setShowPopup(false);
+
+      const newPosition = templateContext.startPos + template.length;
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(newPosition, newPosition);
+      }, 0);
+    },
+    [value, onChange, templateContext.startPos],
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!showPopup || filteredProperties.length === 0) return;
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        setSelectedIndex((prev) =>
+          prev < filteredProperties.length - 1 ? prev + 1 : 0,
+        );
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        setSelectedIndex((prev) =>
+          prev > 0 ? prev - 1 : filteredProperties.length - 1,
+        );
+        break;
+      }
+      case "Enter":
+      case "Tab": {
+        e.preventDefault();
+        if (filteredProperties[selectedIndex]) {
+          insertProperty(filteredProperties[selectedIndex]);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        setShowPopup(false);
+        break;
+      }
+    }
+  };
+
+  // Close popup on outside click
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setShowPopup(false);
+      }
+    };
+
+    if (showPopup) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showPopup]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <Textarea
+        ref={textareaRef}
+        id={id}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        rows={5}
+        className="font-mono text-sm"
+      />
+      {showPopup && filteredProperties.length > 0 && (
+        <div
+          className="absolute z-50 w-72 max-h-48 overflow-y-auto rounded-md border border-border bg-popover shadow-lg"
+          style={{ top: popupPosition.top, left: popupPosition.left }}
+        >
+          <div className="p-1">
+            {filteredProperties.map((prop, index) => (
+              <button
+                key={prop.path}
+                type="button"
+                onClick={() => insertProperty(prop)}
+                className={`w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs rounded-sm text-left hover:bg-accent hover:text-accent-foreground ${
+                  index === selectedIndex
+                    ? "bg-accent text-accent-foreground"
+                    : ""
+                }`}
+              >
+                <code className="font-mono truncate">{prop.path}</code>
+                <span className="text-muted-foreground shrink-0">
+                  {prop.type}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      {templateProperties && templateProperties.length > 0 && !showPopup && (
+        <p className="text-xs text-muted-foreground mt-1.5">
+          Type{" "}
+          <code className="px-1 py-0.5 bg-muted rounded text-[10px]">
+            {"{{"}
+          </code>{" "}
+          for template suggestions
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/DynamicForm/index.ts

@@ -1,6 +1,10 @@
 // Main component
 export { DynamicForm } from "./DynamicForm";
 
+// Sub-components for advanced usage
+export { MultiTypeEditorField } from "./MultiTypeEditorField";
+export { KeyValueEditor, type KeyValuePair } from "./KeyValueEditor";
+
 // Types for external consumers
 export type {
   JsonSchema,
@@ -8,4 +12,13 @@ export type {
   DynamicFormProps,
   OptionsResolver,
   ResolverOption,
+  EditorType,
 } from "./types";
+
+// Utility functions
+export {
+  serializeFormData,
+  parseFormData,
+  detectEditorType,
+  EDITOR_TYPE_LABELS,
+} from "./utils";

package/src/components/DynamicForm/types.ts

@@ -1,4 +1,8 @@
-import type { TemplateProperty } from "../TemplateEditor";
+import type { TemplateProperty } from "../CodeEditor";
+import type { EditorType } from "@checkstack/common";
+
+// Re-export types used by multi-type editor
+export type { EditorType } from "./utils";
 import type {
   JsonSchemaPropertyCore,
   JsonSchemaBase,
@@ -8,8 +12,7 @@ import type {
  * JSON Schema property with DynamicForm-specific x-* extensions for config rendering.
  * Uses the generic core type for proper recursive typing.
  */
-export interface JsonSchemaProperty
-  extends JsonSchemaPropertyCore<JsonSchemaProperty> {
+export interface JsonSchemaProperty extends JsonSchemaPropertyCore<JsonSchemaProperty> {
   // Config-specific x-* extensions
   "x-secret"?: boolean; // Field contains sensitive data
   "x-color"?: boolean; // Field is a color picker
@@ -17,6 +20,7 @@ export interface JsonSchemaProperty
   "x-depends-on"?: string[]; // Field names this field depends on (triggers refetch)
   "x-hidden"?: boolean; // Field should be hidden in form (auto-populated)
   "x-searchable"?: boolean; // Shows search input for filtering dropdown options
+  "x-editor-types"?: EditorType[]; // Available editor types for multi-type input
 }
 
 /** Option returned by an options resolver */
@@ -27,7 +31,7 @@ export interface ResolverOption {
 
 /** Function that resolves dynamic options, receives form values as context */
 export type OptionsResolver = (
-  formValues: Record<string, unknown>
+  formValues: Record<string, unknown>,
 ) => Promise<ResolverOption[]>;
 
 /**
@@ -50,8 +54,8 @@ export interface DynamicFormProps {
    */
   optionsResolvers?: Record<string, OptionsResolver>;
   /**
-   * Optional list of available template properties for template fields.
-   * Passed to TemplateEditor for autocompletion hints.
+   * Optional list of available template properties for multi-type editor fields.
+   * When provided, fields with x-editor-types get {{ autocomplete suggestions.
    */
   templateProperties?: TemplateProperty[];
 }
@@ -66,7 +70,8 @@ export interface FormFieldProps {
   formValues: Record<string, unknown>;
   optionsResolvers?: Record<string, OptionsResolver>;
   templateProperties?: TemplateProperty[];
-  onChange: (val: unknown) => void;
+  /** Callback when value changes. Omit val to clear the field. */
+  onChange: (val?: unknown) => void;
 }
 
 /** Props for the DynamicOptionsField component */
@@ -81,7 +86,8 @@ export interface DynamicOptionsFieldProps {
   searchable?: boolean;
   formValues: Record<string, unknown>;
   optionsResolvers: Record<string, OptionsResolver>;
-  onChange: (val: unknown) => void;
+  /** Callback when value changes. Omit val to clear the field. */
+  onChange: (val?: unknown) => void;
 }
 
 /** Props for the JsonField component */