@checkstack/ui 1.10.0 → 1.11.0

package/src/components/TemplateInput.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { CodeEditor, type TemplateProperty } from "./CodeEditor";
+import { TemplateValueInput } from "./TemplateValueInput";
+
+/**
+ * Edit mode for a `TemplateInput`. Drives both the rendered widget and
+ * the language passed to the underlying Monaco editor in code modes.
+ *
+ *  - `text` — single-line `<Input>` with `{{` autocomplete
+ *    (`TemplateValueInput`). Cheapest, no Monaco bundle.
+ *  - `code` — full Monaco TypeScript editor. Use for inline scripts.
+ *  - `bash` — Monaco shell editor with optional `shellEnvVars`.
+ *  - `json` / `yaml` — Monaco editor in the matching language. Use for
+ *    structured config bodies that may interpolate `{{ }}`.
+ */
+export type TemplateInputMode = "text" | "code" | "bash" | "json" | "yaml";
+
+export interface TemplateInputProps {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  mode?: TemplateInputMode;
+  placeholder?: string;
+  /**
+   * Template properties surfaced after the user types `{{`. Required for
+   * the picker to do anything; omit to disable autocomplete entirely.
+   */
+  templateProperties?: TemplateProperty[];
+  /** Optional TS declarations injected into Monaco (code mode only). */
+  typeDefinitions?: string;
+  /** Optional shell env-var hints (bash mode only). */
+  shellEnvVars?: Array<{ name: string; description?: string; example?: string }>;
+  /** Min height for code-mode editors. */
+  minHeight?: string;
+  /** Forwarded to the input/editor. */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * High-level template editor. Picks the right underlying widget for the
+ * given `mode` and forwards the standard template-property + type-decl
+ * props through to it.
+ *
+ *  - `mode === "text"` (the default) renders a single-line
+ *    `TemplateValueInput` — the same picker the key/value editor uses.
+ *  - Any code mode delegates to `CodeEditor`, which already runs the
+ *    same `{{` autocomplete inside Monaco plus the shell `$` env-var
+ *    completion provider.
+ *
+ * Wrapping both in one component lets the automation editor render a
+ * single field that switches editor flavour as the user changes the
+ * action's `x-editor-types` annotation, without each action having to
+ * choose its own widget.
+ */
+export const TemplateInput: React.FC<TemplateInputProps> = ({
+  id,
+  value,
+  onChange,
+  mode = "text",
+  placeholder,
+  templateProperties,
+  typeDefinitions,
+  shellEnvVars,
+  minHeight,
+  disabled,
+  className,
+}) => {
+  if (mode === "text") {
+    return (
+      <TemplateValueInput
+        id={id}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        templateProperties={templateProperties}
+        disabled={disabled}
+        className={className}
+      />
+    );
+  }
+
+  const language =
+    mode === "code"
+      ? "typescript"
+      : mode === "bash"
+        ? "shell"
+        : mode;
+
+  return (
+    <CodeEditor
+      id={id}
+      value={value}
+      onChange={onChange}
+      language={language}
+      templateProperties={templateProperties}
+      typeDefinitions={typeDefinitions}
+      shellEnvVars={shellEnvVars}
+      minHeight={minHeight}
+      placeholder={placeholder}
+      readOnly={disabled}
+    />
+  );
+};

package/src/components/TemplateInputToggle.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Code2, X } from "lucide-react";
+import { TemplateValueInput } from "./TemplateValueInput";
+import type { TemplateProperty } from "./CodeEditor";
+
+export interface TemplateInputToggleProps {
+  /**
+   * The typed editor to render when the user has NOT switched to
+   * template mode — typically a `<Input type="number">`, `<Select>`,
+   * `<DateTimePicker>`, etc.
+   *
+   * Render-prop instead of a `ReactNode` so the toggle can wire focus /
+   * disabled state through without imposing a shape on the caller.
+   */
+  renderTyped: (props: { disabled: boolean }) => React.ReactNode;
+  /** Current value (always a string — typed editors serialise to one). */
+  value: string;
+  /** Called whenever the value changes, regardless of mode. */
+  onChange: (value: string) => void;
+  /**
+   * Whether the toggle starts in template mode. The toggle is
+   * uncontrolled by default; pass `templateMode` + `onTemplateModeChange`
+   * to control it externally.
+   */
+  defaultTemplateMode?: boolean;
+  templateMode?: boolean;
+  onTemplateModeChange?: (templateMode: boolean) => void;
+  /** Template properties for the picker (template mode only). */
+  templateProperties?: TemplateProperty[];
+  /** Placeholder shown in template mode. */
+  templatePlaceholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Wraps a typed input with a small "fx" button that flips the field
+ * into template-input mode. Used in the automation editor wherever an
+ * action config field accepts either a typed literal _or_ a template
+ * — number-of-seconds, dropdown choices, dates — so the operator can
+ * say "this is dynamic at runtime" without changing the schema.
+ *
+ * Behaviour:
+ *
+ *   - Default mode renders `renderTyped()`.
+ *   - Clicking the "fx" pill switches to a `TemplateValueInput` and
+ *     focuses it. The pill turns into an "X" button.
+ *   - Clicking the "X" switches back. The value is preserved across
+ *     toggles — the operator only loses it if they explicitly clear
+ *     the field.
+ *
+ * If the current value starts with `{{`, the toggle infers template
+ * mode automatically when uncontrolled. This handles round-tripping
+ * a previously-saved automation that interpolated this field.
+ */
+export const TemplateInputToggle: React.FC<TemplateInputToggleProps> = ({
+  renderTyped,
+  value,
+  onChange,
+  defaultTemplateMode,
+  templateMode,
+  onTemplateModeChange,
+  templateProperties,
+  templatePlaceholder,
+  disabled,
+  className,
+}) => {
+  const inferredTemplate = value.trim().startsWith("{{");
+  const [internalTemplateMode, setInternalTemplateMode] = React.useState(
+    defaultTemplateMode ?? inferredTemplate,
+  );
+  const isTemplate = templateMode ?? internalTemplateMode;
+  const setIsTemplate = (next: boolean) => {
+    if (templateMode === undefined) setInternalTemplateMode(next);
+    onTemplateModeChange?.(next);
+  };
+
+  return (
+    <div className={`flex items-center gap-1 ${className ?? ""}`.trim()}>
+      <div className="flex-1">
+        {isTemplate ? (
+          <TemplateValueInput
+            value={value}
+            onChange={onChange}
+            placeholder={templatePlaceholder ?? "{{ trigger.payload.value }}"}
+            templateProperties={templateProperties}
+            disabled={disabled}
+            autoFocus
+          />
+        ) : (
+          renderTyped({ disabled: Boolean(disabled) })
+        )}
+      </div>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setIsTemplate(!isTemplate)}
+        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded border border-border bg-card text-xs font-mono text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+        aria-label={isTemplate ? "Switch back to typed input" : "Switch to template"}
+        title={isTemplate ? "Switch back to typed input" : "Switch to template"}
+      >
+        {isTemplate ? <X className="h-3 w-3" /> : (
+          <span className="flex items-center gap-0.5">
+            <Code2 className="h-3 w-3" />
+            <span>fx</span>
+          </span>
+        )}
+      </button>
+    </div>
+  );
+};

package/src/components/TemplateValueInput.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "bun:test";
+import { computePopupPlacement } from "./TemplateValueInput";
+
+/**
+ * Edge-aware placement for the template autocomplete popup. The popup is
+ * absolutely positioned under the input by default; these guard the
+ * flips that keep it inside the viewport (regression for the "dropdown
+ * overflows the window edge" bug).
+ */
+describe("computePopupPlacement", () => {
+  // A roomy 1000x800 viewport with the input near the top-left.
+  const base = {
+    inputTop: 100,
+    inputBottom: 130,
+    inputLeft: 50,
+    popupWidth: 300,
+    popupHeight: 200,
+    viewportWidth: 1000,
+    viewportHeight: 800,
+  };
+
+  it("opens down + left when there's ample room", () => {
+    const placement = computePopupPlacement(base);
+    expect(placement.openUp).toBe(false);
+    expect(placement.alignRight).toBe(false);
+  });
+
+  it("caps the height to the space below when below is tight", () => {
+    // 220px below, but the popup wants 200 — fits, so stays down and the
+    // ceiling is the available space (220 - 8 margin = 212).
+    const placement = computePopupPlacement({
+      ...base,
+      inputBottom: 580,
+      popupHeight: 200,
+    });
+    expect(placement.openUp).toBe(false);
+    expect(placement.maxHeight).toBe(212);
+  });
+
+  it("flips up when there's not enough room below and more above", () => {
+    // Input low in the viewport: only ~120px below, ~660px above.
+    const placement = computePopupPlacement({
+      ...base,
+      inputTop: 660,
+      inputBottom: 690,
+      popupHeight: 300,
+    });
+    expect(placement.openUp).toBe(true);
+    // Height capped to the 288 ceiling since there's plenty of room above.
+    expect(placement.maxHeight).toBe(288);
+  });
+
+  it("stays down when below is tight but above is even tighter", () => {
+    // Tiny viewport where neither side fits the popup; below (larger)
+    // wins, so it must not flip up.
+    const placement = computePopupPlacement({
+      ...base,
+      inputTop: 40,
+      inputBottom: 70,
+      viewportHeight: 200,
+      popupHeight: 300,
+    });
+    // spaceBelow = 200-70-8 = 122, spaceAbove = 40-8 = 32 → stay down.
+    expect(placement.openUp).toBe(false);
+    expect(placement.maxHeight).toBe(122);
+  });
+
+  it("anchors right when a left-anchored popup would overflow", () => {
+    // Input near the right edge: left(800) + width(300) = 1100 > 1000.
+    const placement = computePopupPlacement({
+      ...base,
+      inputLeft: 800,
+    });
+    expect(placement.alignRight).toBe(true);
+  });
+
+  it("keeps left anchor when the popup fits horizontally", () => {
+    const placement = computePopupPlacement({
+      ...base,
+      inputLeft: 600,
+      popupWidth: 300,
+    });
+    // 600 + 300 = 900 < 1000 - 8 → fits.
+    expect(placement.alignRight).toBe(false);
+  });
+
+  it("never reports a height below the usable floor", () => {
+    // Sandwiched input with almost no room either side.
+    const placement = computePopupPlacement({
+      ...base,
+      inputTop: 90,
+      inputBottom: 110,
+      viewportHeight: 150,
+      popupHeight: 300,
+    });
+    expect(placement.maxHeight).toBe(120);
+  });
+});