@checkstack/ui 0.2.3 → 0.3.0

package/src/components/DynamicForm/utils.test.ts

@@ -0,0 +1,390 @@
+import { describe, expect, it } from "bun:test";
+
+import type { JsonSchema, JsonSchemaProperty } from "./types";
+import {
+  extractDefaults,
+  getCleanDescription,
+  isValueEmpty,
+  NONE_SENTINEL,
+  parseSelectValue,
+  serializeFormData,
+  parseFormData,
+  detectEditorType,
+  type EditorType,
+} from "./utils";
+
+describe("getCleanDescription", () => {
+  it("returns undefined for empty string", () => {
+    expect(getCleanDescription("")).toBeUndefined();
+  });
+
+  it("returns undefined for undefined input", () => {
+    expect(getCleanDescription(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for 'textarea' marker only", () => {
+    expect(getCleanDescription("textarea")).toBeUndefined();
+  });
+
+  it("removes [textarea] marker from description", () => {
+    expect(getCleanDescription("[textarea] Some description")).toBe(
+      "Some description",
+    );
+  });
+
+  it("returns cleaned description without marker", () => {
+    expect(getCleanDescription("Regular description")).toBe(
+      "Regular description",
+    );
+  });
+
+  it("trims whitespace after removing marker", () => {
+    expect(getCleanDescription("  [textarea]  Description  ")).toBe(
+      "Description",
+    );
+  });
+});
+
+describe("extractDefaults", () => {
+  it("returns empty object for schema without properties", () => {
+    const schema: JsonSchema = {};
+    expect(extractDefaults(schema)).toEqual({});
+  });
+
+  it("extracts simple default values", () => {
+    const schema: JsonSchema = {
+      properties: {
+        name: { type: "string", default: "default name" },
+        count: { type: "number", default: 0 },
+        enabled: { type: "boolean", default: true },
+      },
+    };
+    expect(extractDefaults(schema)).toEqual({
+      name: "default name",
+      count: 0,
+      enabled: true,
+    });
+  });
+
+  it("defaults arrays to empty array", () => {
+    const schema: JsonSchema = {
+      properties: {
+        items: { type: "array" },
+      },
+    };
+    expect(extractDefaults(schema)).toEqual({
+      items: [],
+    });
+  });
+
+  it("recursively extracts defaults from nested objects", () => {
+    const schema: JsonSchema = {
+      properties: {
+        config: {
+          type: "object",
+          properties: {
+            setting1: { type: "string", default: "value1" },
+            setting2: { type: "number", default: 42 },
+          },
+        },
+      },
+    };
+    expect(extractDefaults(schema)).toEqual({
+      config: {
+        setting1: "value1",
+        setting2: 42,
+      },
+    });
+  });
+
+  it("ignores properties without defaults", () => {
+    const schema: JsonSchema = {
+      properties: {
+        withDefault: { type: "string", default: "has default" },
+        withoutDefault: { type: "string" },
+      },
+    };
+    expect(extractDefaults(schema)).toEqual({
+      withDefault: "has default",
+    });
+  });
+});
+
+describe("isValueEmpty", () => {
+  const stringSchema: JsonSchemaProperty = { type: "string" };
+  const numberSchema: JsonSchemaProperty = { type: "number" };
+  const arraySchema: JsonSchemaProperty = { type: "array" };
+  const objectSchema: JsonSchemaProperty = {
+    type: "object",
+    properties: {
+      requiredField: { type: "string" },
+      optionalField: { type: "string" },
+    },
+    required: ["requiredField"],
+  };
+
+  describe("primitive values", () => {
+    it("treats undefined as empty", () => {
+      expect(isValueEmpty(undefined, stringSchema)).toBe(true);
+    });
+
+    it("treats null as empty", () => {
+      expect(isValueEmpty(null, stringSchema)).toBe(true);
+    });
+
+    it("treats empty string as empty", () => {
+      expect(isValueEmpty("", stringSchema)).toBe(true);
+    });
+
+    it("treats whitespace-only string as empty", () => {
+      expect(isValueEmpty("   ", stringSchema)).toBe(true);
+    });
+
+    it("treats non-empty string as not empty", () => {
+      expect(isValueEmpty("hello", stringSchema)).toBe(false);
+    });
+
+    it("treats zero as not empty", () => {
+      expect(isValueEmpty(0, numberSchema)).toBe(false);
+    });
+
+    it("treats false as not empty", () => {
+      const boolSchema: JsonSchemaProperty = { type: "boolean" };
+      expect(isValueEmpty(false, boolSchema)).toBe(false);
+    });
+  });
+
+  describe("arrays", () => {
+    it("treats empty array as empty", () => {
+      expect(isValueEmpty([], arraySchema)).toBe(true);
+    });
+
+    it("treats non-empty array as not empty", () => {
+      expect(isValueEmpty([1, 2, 3], arraySchema)).toBe(false);
+    });
+  });
+
+  describe("objects", () => {
+    it("treats object with empty required field as empty", () => {
+      expect(isValueEmpty({ requiredField: "" }, objectSchema)).toBe(true);
+    });
+
+    it("treats object with filled required field as not empty", () => {
+      expect(isValueEmpty({ requiredField: "value" }, objectSchema)).toBe(
+        false,
+      );
+    });
+
+    it("ignores optional fields when checking emptiness", () => {
+      expect(
+        isValueEmpty(
+          { requiredField: "value", optionalField: "" },
+          objectSchema,
+        ),
+      ).toBe(false);
+    });
+
+    it("treats object with missing required field as empty", () => {
+      expect(isValueEmpty({ optionalField: "value" }, objectSchema)).toBe(true);
+    });
+  });
+});
+
+describe("NONE_SENTINEL", () => {
+  it("is a specific string constant", () => {
+    expect(NONE_SENTINEL).toBe("__none__");
+  });
+});
+
+describe("parseSelectValue", () => {
+  it("returns undefined for NONE_SENTINEL", () => {
+    expect(parseSelectValue(NONE_SENTINEL)).toBeUndefined();
+  });
+
+  it("returns undefined for '__none__' string", () => {
+    expect(parseSelectValue("__none__")).toBeUndefined();
+  });
+
+  it("returns the value as-is for regular strings", () => {
+    expect(parseSelectValue("some-role-id")).toBe("some-role-id");
+  });
+
+  it("returns empty string as-is", () => {
+    expect(parseSelectValue("")).toBe("");
+  });
+
+  it("returns whitespace as-is", () => {
+    expect(parseSelectValue("  ")).toBe("  ");
+  });
+});
+
+// =============================================================================
+// Multi-Type Editor Utility Tests
+// =============================================================================
+
+describe("serializeFormData", () => {
+  it("should serialize empty array to empty string", () => {
+    expect(serializeFormData([])).toBe("");
+  });
+
+  it("should serialize single key-value pair", () => {
+    expect(serializeFormData([{ key: "name", value: "John" }])).toBe(
+      "name=John",
+    );
+  });
+
+  it("should serialize multiple key-value pairs", () => {
+    expect(
+      serializeFormData([
+        { key: "name", value: "John" },
+        { key: "age", value: "30" },
+      ]),
+    ).toBe("name=John&age=30");
+  });
+
+  it("should URL-encode special characters", () => {
+    expect(serializeFormData([{ key: "message", value: "Hello World!" }])).toBe(
+      "message=Hello%20World!",
+    );
+  });
+
+  it("should handle empty values", () => {
+    expect(serializeFormData([{ key: "empty", value: "" }])).toBe("empty=");
+  });
+
+  it("should filter out entries with empty keys", () => {
+    expect(
+      serializeFormData([
+        { key: "", value: "ignored" },
+        { key: "valid", value: "kept" },
+      ]),
+    ).toBe("valid=kept");
+  });
+
+  it("should handle values with equals sign", () => {
+    expect(serializeFormData([{ key: "expr", value: "a=b" }])).toBe(
+      "expr=a%3Db",
+    );
+  });
+});
+
+describe("parseFormData", () => {
+  it("should parse empty string to empty array", () => {
+    expect(parseFormData("")).toEqual([]);
+  });
+
+  it("should parse whitespace-only string to empty array", () => {
+    expect(parseFormData("   ")).toEqual([]);
+  });
+
+  it("should parse single key-value pair", () => {
+    expect(parseFormData("name=John")).toEqual([
+      { key: "name", value: "John" },
+    ]);
+  });
+
+  it("should parse multiple key-value pairs", () => {
+    expect(parseFormData("name=John&age=30")).toEqual([
+      { key: "name", value: "John" },
+      { key: "age", value: "30" },
+    ]);
+  });
+
+  it("should URL-decode special characters", () => {
+    expect(parseFormData("message=Hello%20World!")).toEqual([
+      { key: "message", value: "Hello World!" },
+    ]);
+  });
+
+  it("should handle empty values", () => {
+    expect(parseFormData("empty=")).toEqual([{ key: "empty", value: "" }]);
+  });
+
+  it("should handle values with equals sign", () => {
+    expect(parseFormData("expr=a%3Db")).toEqual([
+      { key: "expr", value: "a=b" },
+    ]);
+  });
+
+  it("should handle value containing literal equals", () => {
+    expect(parseFormData("expr=a=b")).toEqual([{ key: "expr", value: "a=b" }]);
+  });
+});
+
+describe("detectEditorType", () => {
+  const allTypes: EditorType[] = ["none", "raw", "json", "formdata"];
+  const withoutNone: EditorType[] = ["raw", "json", "formdata"];
+
+  describe("empty/undefined values", () => {
+    it("should return 'none' for undefined when available", () => {
+      expect(detectEditorType(undefined, allTypes)).toBe("none");
+    });
+
+    it("should return 'raw' for undefined when 'none' not available", () => {
+      expect(detectEditorType(undefined, withoutNone)).toBe("raw");
+    });
+
+    it("should return 'none' for empty string when available", () => {
+      expect(detectEditorType("", allTypes)).toBe("none");
+    });
+
+    it("should return 'raw' for whitespace-only when 'none' not available", () => {
+      expect(detectEditorType("   ", withoutNone)).toBe("raw");
+    });
+  });
+
+  describe("JSON detection", () => {
+    it("should detect valid JSON object", () => {
+      expect(detectEditorType('{"key": "value"}', allTypes)).toBe("json");
+    });
+
+    it("should detect valid JSON array", () => {
+      expect(detectEditorType("[1, 2, 3]", allTypes)).toBe("json");
+    });
+
+    it("should not detect invalid JSON", () => {
+      expect(detectEditorType("{invalid json}", allTypes)).toBe("raw");
+    });
+
+    it("should not detect JSON when json type not available", () => {
+      expect(detectEditorType('{"key": "value"}', ["raw", "formdata"])).toBe(
+        "raw",
+      );
+    });
+  });
+
+  describe("formdata detection", () => {
+    it("should detect key=value format", () => {
+      expect(detectEditorType("name=John", allTypes)).toBe("formdata");
+    });
+
+    it("should detect multiple pairs", () => {
+      expect(detectEditorType("name=John&age=30", allTypes)).toBe("formdata");
+    });
+
+    it("should not detect formdata with newlines", () => {
+      expect(detectEditorType("name=John\nage=30", allTypes)).toBe("raw");
+    });
+
+    it("should not detect formdata when formdata type not available", () => {
+      expect(detectEditorType("name=John", ["raw", "json"])).toBe("raw");
+    });
+
+    it("should prefer json over formdata for ambiguous content", () => {
+      const jsonLikeFormdata = '{"name":"John"}';
+      expect(detectEditorType(jsonLikeFormdata, allTypes)).toBe("json");
+    });
+  });
+
+  describe("fallback behavior", () => {
+    it("should fall back to raw for plain text", () => {
+      expect(detectEditorType("Hello, world!", allTypes)).toBe("raw");
+    });
+
+    it("should fall back to first available type when raw not available", () => {
+      expect(detectEditorType("Hello, world!", ["json", "formdata"])).toBe(
+        "json",
+      );
+    });
+  });
+});

package/src/components/DynamicForm/utils.ts

@@ -1,11 +1,11 @@
-import type { JsonSchema } from "./types";
+import type { JsonSchema, JsonSchemaProperty } from "./types";
 
 /**
  * Cleans a description string by removing textarea markers.
  * Returns undefined if the description is empty or just "textarea".
  */
 export const getCleanDescription = (
-  description?: string
+  description?: string,
 ): string | undefined => {
   if (!description || description === "textarea") return;
   const cleaned = description.replace("[textarea]", "").trim();
@@ -17,7 +17,7 @@ export const getCleanDescription = (
  * Extracts default values from a JSON schema recursively.
  */
 export const extractDefaults = (
-  schema: JsonSchema
+  schema: JsonSchema,
 ): Record<string, unknown> => {
   const defaults: Record<string, unknown> = {};
 
@@ -37,3 +37,142 @@ export const extractDefaults = (
 
   return defaults;
 };
+
+/**
+ * Check if a value is considered "empty" for validation purposes.
+ * Used to determine if required fields are filled.
+ */
+export 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;
+}
+
+/** Sentinel value used to represent "None" selection in Select components */
+export const NONE_SENTINEL = "__none__";
+
+/**
+ * Converts a select value to the actual form value.
+ * Handles the "None" sentinel value by returning undefined.
+ */
+export function parseSelectValue(val: string): string | undefined {
+  return val === NONE_SENTINEL ? undefined : val;
+}
+
+// =============================================================================
+// Multi-Type Editor Utilities
+// =============================================================================
+
+import type { KeyValuePair } from "./KeyValueEditor";
+import type { EditorType } from "@checkstack/common";
+
+// Re-export for local consumers
+export type { EditorType } from "@checkstack/common";
+
+/**
+ * Serialize key-value pairs to URL-encoded string format.
+ * Example: [{ key: "a", value: "1" }] -> "a=1"
+ */
+export function serializeFormData(pairs: KeyValuePair[]): string {
+  const filtered = pairs.filter((p) => p.key.trim() !== "");
+  if (filtered.length === 0) return "";
+  return filtered
+    .map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+    .join("&");
+}
+
+/**
+ * Parse URL-encoded string to key-value pairs.
+ * Example: "a=1&b=2" -> [{ key: "a", value: "1" }, { key: "b", value: "2" }]
+ */
+export function parseFormData(str: string): KeyValuePair[] {
+  if (!str || str.trim() === "") return [];
+
+  return str.split("&").map((pair) => {
+    const [key, ...valueParts] = pair.split("=");
+    return {
+      key: decodeURIComponent(key || ""),
+      value: decodeURIComponent(valueParts.join("=") || ""),
+    };
+  });
+}
+
+/**
+ * Detect the most likely editor type from a string value.
+ * Used to auto-select the initial editor type when loading existing data.
+ */
+export function detectEditorType(
+  value: string | undefined,
+  availableTypes: EditorType[],
+): EditorType {
+  // If no value, prefer "none" if available, otherwise first type
+  if (!value || value.trim() === "") {
+    if (availableTypes.includes("none")) return "none";
+    return availableTypes[0] ?? "raw";
+  }
+
+  // Try to detect JSON
+  if (availableTypes.includes("json")) {
+    const trimmed = value.trim();
+    if (
+      (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+      (trimmed.startsWith("[") && trimmed.endsWith("]"))
+    ) {
+      try {
+        JSON.parse(value);
+        return "json";
+      } catch {
+        // Not valid JSON, continue checking
+      }
+    }
+  }
+
+  // Try to detect formdata (URL-encoded key=value pairs)
+  // Simple heuristic: contains = and optionally &, no newlines
+  if (
+    availableTypes.includes("formdata") &&
+    value.includes("=") &&
+    !value.includes("\n")
+  ) {
+    const parts = value.split("&");
+    const looksLikeFormData = parts.every((p) => p.includes("="));
+    if (looksLikeFormData) {
+      return "formdata";
+    }
+  }
+
+  // Default to raw if available
+  if (availableTypes.includes("raw")) return "raw";
+
+  // Fallback to first available type
+  return availableTypes[0] ?? "raw";
+}
+
+/**
+ * Human-readable labels for editor types
+ */
+export const EDITOR_TYPE_LABELS: Record<EditorType, string> = {
+  none: "None",
+  raw: "Plain Text",
+  json: "JSON",
+  yaml: "YAML",
+  xml: "XML",
+  markdown: "Markdown",
+  formdata: "Form Data",
+};

package/src/components/StrategyConfigCard.tsx

@@ -5,6 +5,7 @@ import { Button } from "./Button";
 import { Badge, type BadgeProps } from "./Badge";
 import { Toggle } from "./Toggle";
 import { DynamicForm } from "./DynamicForm";
+import type { OptionsResolver } from "./DynamicForm/types";
 import { DynamicIcon, type LucideIconName } from "./DynamicIcon";
 import { MarkdownBlock } from "./Markdown";
 import { cn } from "../utils";
@@ -23,6 +24,8 @@ export interface ConfigSection {
   value?: Record<string, unknown>;
   /** Called when configuration is saved */
   onSave?: (config: Record<string, unknown>) => Promise<void>;
+  /** Optional resolvers for dynamic dropdown fields (x-options-resolver) */
+  optionsResolvers?: Record<string, OptionsResolver>;
 }
 
 /**
@@ -130,7 +133,7 @@ export function StrategyConfigCard({
         initial[section.id] = true;
       }
       return initial;
-    }
+    },
   );
 
   // Determine if we're in controlled or uncontrolled mode
@@ -167,7 +170,7 @@ export function StrategyConfigCard({
 
   const handleSectionValueChange = (
     sectionId: string,
-    value: Record<string, unknown>
+    value: Record<string, unknown>,
   ) => {
     setSectionValues((prev) => ({ ...prev, [sectionId]: value }));
   };
@@ -186,7 +189,7 @@ export function StrategyConfigCard({
     <Card
       className={cn(
         "overflow-hidden transition-all",
-        localEnabled ? "border-primary/30" : "opacity-80"
+        localEnabled ? "border-primary/30" : "opacity-80",
       )}
     >
       <CardHeader className="p-4">
@@ -257,7 +260,7 @@ export function StrategyConfigCard({
                 <Power
                   className={cn(
                     "h-4 w-4 mr-1",
-                    localEnabled ? "text-green-300" : "text-muted-foreground"
+                    localEnabled ? "text-green-300" : "text-muted-foreground",
                   )}
                 />
                 {localEnabled ? "Enabled" : "Disabled"}
@@ -311,6 +314,7 @@ export function StrategyConfigCard({
                   onValidChange={(isValid) =>
                     handleSectionValidChange(section.id, isValid)
                   }
+                  optionsResolvers={section.optionsResolvers}
                 />
 
                 {section.onSave && (

package/src/index.ts

@@ -46,8 +46,8 @@ export * from "./components/DynamicIcon";
 export * from "./components/StrategyConfigCard";
 export * from "./components/Markdown";
 export * from "./components/ColorPicker";
-export * from "./components/TemplateEditor";
 export * from "./components/AnimatedCounter";
 export * from "./components/CommandPalette";
 export * from "./components/TerminalFeed";
 export * from "./components/AmbientBackground";
+export * from "./components/CodeEditor";