@checkstack/ui 0.0.2

package/src/components/DynamicForm/JsonField.tsx

@@ -0,0 +1,98 @@
+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 type { JsonFieldProps } from "./types";
+
+const ajv = new Ajv({ allErrors: true, strict: false });
+addFormats(ajv);
+
+/**
+ * A JSON editor field with syntax highlighting and schema validation.
+ */
+export const JsonField: React.FC<JsonFieldProps> = ({
+  id,
+  value,
+  propSchema,
+  onChange,
+}) => {
+  const [internalValue, setInternalValue] = React.useState(
+    JSON.stringify(value || {}, undefined, 2)
+  );
+  const [error, setError] = React.useState<string | undefined>();
+  const lastPropValue = React.useRef(value);
+
+  const validateFn = React.useMemo(() => {
+    try {
+      return ajv.compile(propSchema);
+    } catch {
+      return;
+    }
+  }, [propSchema]);
+
+  // Sync internal value ONLY when external value changes from outside
+  React.useEffect(() => {
+    const valueString = JSON.stringify(value);
+    const lastValueString = JSON.stringify(lastPropValue.current);
+
+    if (valueString !== lastValueString) {
+      setInternalValue(JSON.stringify(value || {}, undefined, 2));
+      lastPropValue.current = value;
+      setError(undefined);
+    }
+  }, [value]);
+
+  const validate = (val: string) => {
+    try {
+      const parsed = JSON.parse(val);
+      if (!validateFn) {
+        setError(undefined);
+        return parsed;
+      }
+
+      const valid = validateFn(parsed);
+      if (!valid) {
+        setError(
+          validateFn.errors
+            ?.map((e) => `${e.instancePath} ${e.message}`)
+            .join(", ")
+        );
+        return false;
+      }
+      setError(undefined);
+      return parsed;
+    } catch (error_: unknown) {
+      setError(`Invalid JSON: ${(error_ as Error).message}`);
+      return false;
+    }
+  };
+
+  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>
+      {error && <p className="text-xs text-destructive font-medium">{error}</p>}
+    </div>
+  );
+};

package/src/components/DynamicForm/index.ts

@@ -0,0 +1,11 @@
+// Main component
+export { DynamicForm } from "./DynamicForm";
+
+// Types for external consumers
+export type {
+  JsonSchema,
+  JsonSchemaProperty,
+  DynamicFormProps,
+  OptionsResolver,
+  ResolverOption,
+} from "./types";

package/src/components/DynamicForm/types.ts

@@ -0,0 +1,95 @@
+import type { TemplateProperty } from "../TemplateEditor";
+
+export interface JsonSchemaProperty {
+  type?: string;
+  description?: string;
+  enum?: string[];
+  const?: string | number | boolean; // For discriminator values
+  properties?: Record<string, JsonSchemaProperty>;
+  items?: JsonSchemaProperty;
+  required?: string[];
+  additionalProperties?: boolean | JsonSchemaProperty;
+  format?: string;
+  default?: unknown;
+  oneOf?: JsonSchemaProperty[]; // Discriminated union variants
+  anyOf?: JsonSchemaProperty[]; // Union variants
+  "x-secret"?: boolean; // Custom metadata for secret fields
+  "x-color"?: boolean; // Custom metadata for color fields
+  "x-options-resolver"?: string; // Name of a resolver function for dynamic options
+  "x-depends-on"?: string[]; // Field names this field depends on (triggers refetch when they change)
+  "x-hidden"?: boolean; // Field should be hidden in form (auto-populated)
+  "x-searchable"?: boolean; // Shows a search input for filtering dropdown options
+}
+
+/** Option returned by an options resolver */
+export interface ResolverOption {
+  value: string;
+  label: string;
+}
+
+/** Function that resolves dynamic options, receives form values as context */
+export type OptionsResolver = (
+  formValues: Record<string, unknown>
+) => Promise<ResolverOption[]>;
+
+export interface JsonSchema {
+  properties?: Record<string, JsonSchemaProperty>;
+  required?: string[];
+}
+
+export interface DynamicFormProps {
+  schema: JsonSchema;
+  value: Record<string, unknown>;
+  onChange: (value: Record<string, unknown>) => void;
+  /**
+   * Optional callback when form validity changes.
+   * Reports true if all required fields are filled.
+   */
+  onValidChange?: (isValid: boolean) => void;
+  /**
+   * Optional map of resolver names to functions that fetch dynamic options.
+   * Referenced by x-options-resolver in schema properties.
+   */
+  optionsResolvers?: Record<string, OptionsResolver>;
+  /**
+   * Optional list of available template properties for template fields.
+   * Passed to TemplateEditor for autocompletion hints.
+   */
+  templateProperties?: TemplateProperty[];
+}
+
+/** Props for the FormField component */
+export interface FormFieldProps {
+  id: string;
+  label: string;
+  propSchema: JsonSchemaProperty;
+  value: unknown;
+  isRequired?: boolean;
+  formValues: Record<string, unknown>;
+  optionsResolvers?: Record<string, OptionsResolver>;
+  templateProperties?: TemplateProperty[];
+  onChange: (val: unknown) => void;
+}
+
+/** Props for the DynamicOptionsField component */
+export interface DynamicOptionsFieldProps {
+  id: string;
+  label: string;
+  description?: string;
+  value: unknown;
+  isRequired?: boolean;
+  resolverName: string;
+  dependsOn?: string[];
+  searchable?: boolean;
+  formValues: Record<string, unknown>;
+  optionsResolvers: Record<string, OptionsResolver>;
+  onChange: (val: unknown) => void;
+}
+
+/** Props for the JsonField component */
+export interface JsonFieldProps {
+  id: string;
+  value: Record<string, unknown>;
+  propSchema: JsonSchemaProperty;
+  onChange: (val: Record<string, unknown>) => void;
+}

package/src/components/DynamicForm/utils.ts

@@ -0,0 +1,39 @@
+import type { JsonSchema } 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
+): string | undefined => {
+  if (!description || description === "textarea") return;
+  const cleaned = description.replace("[textarea]", "").trim();
+  if (!cleaned) return;
+  return cleaned;
+};
+
+/**
+ * Extracts default values from a JSON schema recursively.
+ */
+export const extractDefaults = (
+  schema: JsonSchema
+): Record<string, unknown> => {
+  const defaults: Record<string, unknown> = {};
+
+  if (!schema.properties) return defaults;
+
+  for (const [key, propSchema] of Object.entries(schema.properties)) {
+    if (propSchema.default !== undefined) {
+      defaults[key] = propSchema.default;
+    } else if (propSchema.type === "object" && propSchema.properties) {
+      // Recursively extract defaults for nested objects
+      defaults[key] = extractDefaults(propSchema as JsonSchema);
+    } else if (propSchema.type === "array") {
+      // Arrays default to empty array
+      defaults[key] = [];
+    }
+  }
+
+  return defaults;
+};

package/src/components/DynamicIcon.tsx

@@ -0,0 +1,45 @@
+import { icons, type LucideIcon } from "lucide-react";
+import { Settings } from "lucide-react";
+import type { LucideIconName } from "@checkstack/common";
+
+// Re-export the type for convenience
+export type { LucideIconName } from "@checkstack/common";
+
+/**
+ * Props for the DynamicIcon component
+ */
+export interface DynamicIconProps {
+  /** Lucide icon name in PascalCase (e.g., 'AlertCircle', 'HeartPulse') */
+  name?: LucideIconName;
+  /** CSS class name to apply to the icon */
+  className?: string;
+  /** Fallback icon if name is not provided */
+  fallback?: LucideIcon;
+}
+
+/**
+ * Dynamically renders a Lucide icon by name.
+ * Falls back to Settings icon if the icon name is not provided.
+ *
+ * @example
+ * <DynamicIcon name="AlertCircle" />
+ * <DynamicIcon name="HeartPulse" className="h-6 w-6" />
+ */
+export function DynamicIcon({
+  name,
+  className = "h-5 w-5",
+  fallback: FallbackIcon = Settings,
+}: DynamicIconProps) {
+  if (!name) {
+    return <FallbackIcon className={className} />;
+  }
+
+  const Icon = icons[name];
+
+  // Fallback if icon name doesn't exist in lucide-react
+  if (!Icon) {
+    return <FallbackIcon className={className} />;
+  }
+
+  return <Icon className={className} />;
+}

package/src/components/EditableText.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useRef, useEffect } from "react";
+import { cn } from "../utils";
+import { Input } from "./Input";
+import { Button } from "./Button";
+import { Check, X } from "lucide-react";
+
+export interface EditableTextProps {
+  value: string;
+  onSave: (newValue: string) => Promise<void> | void;
+  className?: string;
+  inputClassName?: string;
+  placeholder?: string;
+  validate?: (value: string) => boolean;
+  disabled?: boolean;
+}
+
+export const EditableText: React.FC<EditableTextProps> = ({
+  value,
+  onSave,
+  className,
+  inputClassName,
+  placeholder,
+  validate,
+  disabled = false,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [isSaving, setIsSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleEdit = () => {
+    setEditValue(value);
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  const handleSave = async () => {
+    const trimmedValue = editValue.trim();
+
+    if (!trimmedValue) {
+      return;
+    }
+
+    if (validate && !validate(trimmedValue)) {
+      return;
+    }
+
+    if (trimmedValue === value) {
+      setIsEditing(false);
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await onSave(trimmedValue);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to save:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        <Input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setEditValue(e.target.value)
+          }
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={isSaving}
+          className={cn("flex-1", inputClassName)}
+        />
+        <Button
+          variant="ghost"
+          className="h-8 w-8 p-0 text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-950/20"
+          onClick={handleSave}
+          disabled={isSaving || !editValue.trim()}
+          type="button"
+        >
+          <Check className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground hover:bg-accent"
+          onClick={handleCancel}
+          disabled={isSaving}
+          type="button"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "cursor-pointer hover:underline hover:decoration-dashed hover:decoration-1 hover:underline-offset-4 transition-all",
+        disabled && "cursor-default hover:no-underline opacity-50",
+        className
+      )}
+      onClick={disabled ? undefined : handleEdit}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          handleEdit();
+        }
+      }}
+    >
+      {value}
+    </div>
+  );
+};

package/src/components/EmptyState.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Card, CardContent } from "./Card";
+import { cn } from "../utils";
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  title,
+  description,
+  icon,
+  className,
+  ...props
+}) => {
+  return (
+    <Card
+      className={cn("border-dashed border-2 bg-muted/30", className)}
+      {...props}
+    >
+      <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+        {icon && <div className="text-muted-foreground/40 mb-4">{icon}</div>}
+        <p className="text-foreground font-medium">{title}</p>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/HealthBadge.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
+import { cn } from "../utils";
+
+export type HealthStatus = "healthy" | "degraded" | "unhealthy";
+
+interface HealthBadgeProps {
+  status: HealthStatus;
+  variant?: "compact" | "full";
+  showIcon?: boolean;
+  className?: string;
+}
+
+const statusConfig = {
+  healthy: {
+    icon: CheckCircle2,
+    label: "Healthy",
+    className: "bg-success/10 text-success border-success/30",
+    iconClassName: "text-success",
+  },
+  degraded: {
+    icon: AlertTriangle,
+    label: "Degraded",
+    className: "bg-warning/10 text-warning border-warning/30",
+    iconClassName: "text-warning",
+  },
+  unhealthy: {
+    icon: XCircle,
+    label: "Unhealthy",
+    className: "bg-destructive/10 text-destructive border-destructive/30",
+    iconClassName: "text-destructive",
+  },
+} as const;
+
+export const HealthBadge: React.FC<HealthBadgeProps> = ({
+  status,
+  variant = "full",
+  showIcon = true,
+  className,
+}) => {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const isCompact = variant === "compact";
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
+        config.className,
+        className
+      )}
+    >
+      {showIcon && <Icon className={cn("h-3.5 w-3.5", config.iconClassName)} />}
+      {!isCompact && <span>{config.label}</span>}
+    </span>
+  );
+};

package/src/components/InfoBanner.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const infoBannerVariants = cva(
+  "relative w-full rounded-lg border px-3 py-2.5 text-sm",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted/30 border-border/50 text-muted-foreground",
+        info: "bg-info/5 border-info/20 text-info",
+        warning: "bg-warning/5 border-warning/20 text-warning",
+        success: "bg-success/5 border-success/20 text-success",
+        error: "bg-destructive/5 border-destructive/20 text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface InfoBannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof infoBannerVariants> {
+  children: React.ReactNode;
+}
+
+export const InfoBanner = React.forwardRef<HTMLDivElement, InfoBannerProps>(
+  ({ className, variant, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        className={infoBannerVariants({ variant, className })}
+        {...props}
+      >
+        <div className="flex gap-2.5 items-start">{children}</div>
+      </div>
+    );
+  }
+);
+
+InfoBanner.displayName = "InfoBanner";
+
+export const InfoBannerIcon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex-shrink-0 mt-0.5 opacity-70 ${className || ""}`}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+InfoBannerIcon.displayName = "InfoBannerIcon";
+
+export const InfoBannerContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex-1 space-y-0.5 ${className || ""}`}
+    {...props}
+  />
+));
+
+InfoBannerContent.displayName = "InfoBannerContent";
+
+export const InfoBannerTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h6
+    ref={ref}
+    className={`font-medium text-sm leading-tight ${className || ""}`}
+    {...props}
+  />
+));
+
+InfoBannerTitle.displayName = "InfoBannerTitle";
+
+export const InfoBannerDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`text-sm leading-relaxed opacity-90 ${className || ""}`}
+    {...props}
+  />
+));
+
+InfoBannerDescription.displayName = "InfoBannerDescription";

package/src/components/Input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";

package/src/components/Label.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { cn } from "../utils";
+
+interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: "sm" | "md" | "lg";
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = "md",
+  className,
+  ...props
+}) => {
+  const sizeClasses = {
+    sm: "w-4 h-4 border-2",
+    md: "w-8 h-8 border-4",
+    lg: "w-12 h-12 border-4",
+  };
+
+  return (
+    <div className={cn("flex justify-center py-12", className)} {...props}>
+      <div
+        className={cn(
+          "border-indigo-200 border-t-indigo-500 rounded-full animate-spin",
+          sizeClasses[size]
+        )}
+      />
+    </div>
+  );
+};