@checkstack/ui 0.0.2

package/src/components/Dialog.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogContentVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-auto",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        default: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl",
+        full: "max-w-[90vw]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogContentVariants> {}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogContentVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,96 @@
+import React, { useRef, useEffect } from "react";
+import { cn } from "../utils";
+
+export const DropdownMenu: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return <div className="relative inline-block text-left">{children}</div>;
+};
+
+export const DropdownMenuTrigger: React.FC<{
+  children: React.ReactNode;
+  asChild?: boolean;
+  onClick?: () => void;
+}> = ({ children, onClick }) => {
+  return (
+    <div onClick={onClick} className="cursor-pointer">
+      {children}
+    </div>
+  );
+};
+
+export const DropdownMenuContent: React.FC<{
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}> = ({ children, isOpen, onClose, className }) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return <React.Fragment />;
+
+  return (
+    <div
+      ref={contentRef}
+      className={cn(
+        "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100] animate-in fade-in zoom-in-95 duration-100",
+        className
+      )}
+    >
+      <div className="py-1" role="none">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const DropdownMenuItem: React.FC<{
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  icon?: React.ReactNode;
+}> = ({ children, onClick, className, icon }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex items-center w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+        className
+      )}
+      role="menuitem"
+    >
+      {icon && <span className="mr-3 text-muted-foreground">{icon}</span>}
+      {children}
+    </button>
+  );
+};
+
+export const DropdownMenuSeparator: React.FC = () => (
+  <div className="my-1 h-px bg-border" />
+);
+
+export const DropdownMenuLabel: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+    {children}
+  </div>
+);

package/src/components/DynamicForm/DynamicForm.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+
+import { EmptyState } from "../../index";
+
+import type { DynamicFormProps, JsonSchemaProperty } from "./types";
+import { extractDefaults } 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
+ * secrets, colors, templates, dynamic options, and discriminated unions.
+ */
+export const DynamicForm: React.FC<DynamicFormProps> = ({
+  schema,
+  value,
+  onChange,
+  onValidChange,
+  optionsResolvers,
+  templateProperties,
+}) => {
+  // Track previous validity to avoid redundant callbacks
+  const prevValidRef = React.useRef<boolean | undefined>(undefined);
+
+  // Initialize form with default values from schema
+  React.useEffect(() => {
+    if (!schema || !schema.properties) return;
+
+    const defaults = extractDefaults(schema);
+    const merged = { ...defaults, ...value };
+
+    // Only update if there are new defaults to apply
+    if (JSON.stringify(merged) !== JSON.stringify(value)) {
+      onChange(merged);
+    }
+  }, [schema]); // Only run when schema changes
+
+  // Compute validity and report changes
+  React.useEffect(() => {
+    if (!onValidChange || !schema || !schema.properties) return;
+
+    // Check all required fields (including hidden ones like connectionId)
+    const requiredKeys = schema.required ?? [];
+    let isValid = true;
+
+    for (const key of requiredKeys) {
+      const propSchema = schema.properties[key];
+      if (!propSchema) continue;
+
+      // Skip hidden fields - they are auto-populated
+      if (propSchema["x-hidden"]) continue;
+
+      if (isValueEmpty(value[key], propSchema)) {
+        isValid = false;
+        break;
+      }
+    }
+
+    // Only call onValidChange if validity actually changed
+    if (prevValidRef.current !== isValid) {
+      prevValidRef.current = isValid;
+      onValidChange(isValid);
+    }
+  }, [schema, value, onValidChange]);
+
+  if (
+    !schema ||
+    !schema.properties ||
+    Object.keys(schema.properties).length === 0
+  ) {
+    return (
+      <EmptyState
+        title="No Configuration Required"
+        description="This component doesn't require any configuration."
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {Object.entries(schema.properties)
+        .filter(([, propSchema]) => !propSchema["x-hidden"])
+        .map(([key, propSchema]) => {
+          const isRequired = schema.required?.includes(key);
+          const label = key.charAt(0).toUpperCase() + key.slice(1);
+
+          return (
+            <FormField
+              key={key}
+              id={key}
+              label={label}
+              propSchema={propSchema}
+              value={value[key]}
+              isRequired={isRequired}
+              formValues={value}
+              optionsResolvers={optionsResolvers}
+              templateProperties={templateProperties}
+              onChange={(val) => onChange({ ...value, [key]: val })}
+            />
+          );
+        })}
+    </div>
+  );
+};

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -0,0 +1,220 @@
+import React from "react";
+import { Loader2, ChevronDown } from "lucide-react";
+
+import {
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../index";
+
+import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
+import { getCleanDescription } from "./utils";
+
+/**
+ * Field component for dynamically resolved options.
+ * Fetches options using the specified resolver and renders a Select.
+ * When searchable is true, shows a searchable dropdown with filter inside.
+ */
+export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
+  id,
+  label,
+  description,
+  value,
+  isRequired,
+  resolverName,
+  dependsOn,
+  searchable,
+  formValues,
+  optionsResolvers,
+  onChange,
+}) => {
+  const [options, setOptions] = React.useState<ResolverOption[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | undefined>();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+
+  // Use ref to store formValues to avoid re-renders when unrelated fields change
+  const formValuesRef = React.useRef(formValues);
+  formValuesRef.current = formValues;
+
+  // Build dependency values string for useEffect dependency tracking
+  // Only includes the specific fields this resolver depends on
+  const dependencyValues = React.useMemo(() => {
+    if (!dependsOn || dependsOn.length === 0) return "";
+    return dependsOn.map((key) => JSON.stringify(formValues[key])).join("|");
+  }, [dependsOn, formValues]);
+
+  React.useEffect(() => {
+    const resolver = optionsResolvers[resolverName];
+    if (!resolver) {
+      setError(`Resolver "${resolverName}" not found`);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(undefined);
+
+    // Use ref to get current form values without adding to dependencies
+    resolver(formValuesRef.current)
+      .then((result) => {
+        if (!cancelled) {
+          setOptions(result);
+          setLoading(false);
+        }
+      })
+      .catch((error_) => {
+        if (!cancelled) {
+          setError(
+            error_ instanceof Error ? error_.message : "Failed to load options"
+          );
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // Only re-fetch when resolver changes or explicit dependencies change
+  }, [resolverName, optionsResolvers, dependencyValues]);
+
+  // Filter options based on search query
+  const filteredOptions = React.useMemo(() => {
+    if (!searchable || !searchQuery.trim()) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(query));
+  }, [options, searchQuery, searchable]);
+
+  // Get the selected option label
+  const selectedLabel = React.useMemo(() => {
+    const selected = options.find((opt) => opt.value === value);
+    return selected?.label;
+  }, [options, value]);
+
+  const cleanDesc = getCleanDescription(description);
+
+  // Render searchable dropdown with search inside
+  if (searchable && !loading && !error && options.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>
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setOpen(!open)}
+            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-left ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <span className={selectedLabel ? "" : "text-muted-foreground"}>
+              {selectedLabel || `Select ${label}`}
+            </span>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+          </button>
+          {open && (
+            <div className="absolute z-[100] mt-1 w-full rounded-md border border-border bg-popover shadow-lg">
+              <div className="p-2 border-b border-border">
+                <Input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-8"
+                  autoFocus
+                />
+              </div>
+              <div className="max-h-60 overflow-y-auto p-1">
+                {filteredOptions.length === 0 ? (
+                  <div className="py-2 px-3 text-sm text-muted-foreground text-center">
+                    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>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Regular dropdown
+  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>
+      <div className="relative">
+        {loading ? (
+          <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-muted/50">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              Loading options...
+            </span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center h-10 px-3 border border-destructive rounded-md bg-destructive/10">
+            <span className="text-sm text-destructive">{error}</span>
+          </div>
+        ) : (
+          <Select
+            value={(value as string) || ""}
+            onValueChange={(val) => onChange(val)}
+            disabled={options.length === 0}
+          >
+            <SelectTrigger id={id}>
+              <SelectValue
+                placeholder={
+                  options.length === 0
+                    ? "No options available"
+                    : `Select ${label}`
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+};