@checkstack/ui 1.9.0 → 1.11.0

package/src/components/QueryErrorState.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { AlertCircle } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import {
+  Alert,
+  AlertContent,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "./Alert";
+import { Button } from "./Button";
+
+interface QueryErrorStateProps {
+  /**
+   * The error captured from a failed query (e.g. TanStack Query's `error`).
+   * Funnelled through {@link extractErrorMessage} so callers don't have to
+   * narrow the type at every call site.
+   */
+  error: unknown;
+  /**
+   * Invoked when the user clicks the "Retry" button. Wire this to the
+   * underlying `refetch()` of the failing query.
+   */
+  onRetry: () => void;
+  /**
+   * Optional resource name to personalise the headline, e.g.
+   * `resource="checks"` -> "Could not load checks".
+   */
+  resource?: string;
+}
+
+/**
+ * QueryErrorState - canonical inline error UI for failed list / detail
+ * queries. Renders an `error`-variant {@link Alert} with the extracted
+ * error message and a Retry button.
+ */
+export const QueryErrorState: React.FC<QueryErrorStateProps> = ({
+  error,
+  onRetry,
+  resource,
+}) => {
+  const message = extractErrorMessage(error);
+  const title = resource ? `Could not load ${resource}` : "Something went wrong";
+
+  return (
+    <Alert variant="error">
+      <AlertIcon>
+        <AlertCircle className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{message}</AlertDescription>
+      </AlertContent>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onRetry}
+        className="shrink-0"
+      >
+        Retry
+      </Button>
+    </Alert>
+  );
+};

package/src/components/ResponsiveTable.tsx

@@ -0,0 +1,92 @@
+/**
+ * ResponsiveTable - dual-layout primitive for tabular data that must
+ * degrade gracefully on narrow viewports.
+ *
+ * # API decision
+ *
+ * The original plan considered a context-driven `priority` prop on a
+ * special `ResponsiveTableHead` so cells could declare which columns
+ * disappear on mobile. Implementing that without `any` requires either
+ * (a) cloning every `TableCell` child to inject a context-derived
+ * `data-priority` attribute, or (b) maintaining a parallel index of
+ * `TableHead` children to wire their priorities into the cells by
+ * position. Both shapes leak the matching responsibility into the
+ * primitive and produce gnarly typings around the `Table*` re-exports.
+ *
+ * Instead this file ships the simpler, fully type-safe fallback:
+ *
+ *   - `<ResponsiveTable>` - a wrapper that renders its children inside
+ *     the standard {@link Table} layout on `sm` viewports and up, and
+ *     hides them on smaller screens.
+ *   - `<MobileCardList>` - a sibling wrapper consumers render alongside
+ *     the table. It is only visible below `sm`, so callers compose the
+ *     two side-by-side and decide per-row what the mobile presentation
+ *     looks like (typically a stacked card with high-priority fields).
+ *
+ * The two wrappers use Tailwind's `hidden sm:block` / `sm:hidden`
+ * utilities, so they swap purely in CSS - no JS media-query gating, no
+ * SSR/CSR mismatch risk, and consumers keep full control over which
+ * fields surface on mobile.
+ *
+ * Re-export the standard `Table*` primitives from `@checkstack/ui` for
+ * the desktop branch; do NOT use `<table>` markup inside
+ * `<MobileCardList>`.
+ */
+import React from "react";
+import { cn } from "../utils";
+
+interface ResponsiveTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The desktop tabular layout. Compose with the existing `Table`,
+   * `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`
+   * primitives.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Desktop branch of the dual-layout pattern. Hidden below the `sm`
+ * breakpoint; render a {@link MobileCardList} alongside it to cover
+ * narrow viewports.
+ */
+export const ResponsiveTable = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveTableProps
+>(({ children, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("hidden sm:block", className)}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+ResponsiveTable.displayName = "ResponsiveTable";
+
+interface MobileCardListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The stacked, card-shaped layout for narrow viewports. One item per
+   * row; consumers decide which fields are surfaced.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Mobile branch of the dual-layout pattern. Visible only below the `sm`
+ * breakpoint. Pairs with {@link ResponsiveTable}.
+ */
+export const MobileCardList = React.forwardRef<
+  HTMLDivElement,
+  MobileCardListProps
+>(({ children, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-2 sm:hidden", className)}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+MobileCardList.displayName = "MobileCardList";

package/src/components/Skeleton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Override the default sizing / shape. The component already renders a
+   * muted background; pass dimensions via classes like `h-4 w-32 rounded`.
+   */
+  className?: string;
+}
+
+/**
+ * Skeleton - a pulsing placeholder block for loading states.
+ *
+ * Honours {@link usePerformance}: when `isLowPower` is true the pulse
+ * animation is dropped, leaving a static `bg-muted` block so low-power
+ * devices aren't forced through an infinite animation loop.
+ */
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, ...props }, ref) => {
+    const { isLowPower } = usePerformance();
+
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(
+          "rounded-md bg-muted",
+          !isLowPower && "animate-pulse",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = "Skeleton";

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);
+  });
+});