@checkstack/ui 1.11.0 → 1.12.0

package/src/components/Sheet.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
+import { PortalContainerContext } from "./portalContainer";
 
 const Sheet = DialogPrimitive.Root;
 const SheetTrigger = DialogPrimitive.Trigger;
@@ -56,11 +57,23 @@ const SheetContent = React.forwardRef<
   SheetContentProps
 >(({ className, children, size, ...props }, ref) => {
   const { isLowPower } = usePerformance();
+  // Expose the content element so popovers/comboboxes rendered inside the
+  // sheet portal INTO it — otherwise the modal scroll-lock blocks their
+  // internal scrolling (a popover portaled to body is outside the dialog).
+  const [content, setContent] = React.useState<HTMLDivElement | null>(null);
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setContent(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
   return (
     <SheetPortal>
       <SheetOverlay />
       <DialogPrimitive.Content
-        ref={ref}
+        ref={setRefs}
         className={cn(
           sheetContentVariants({ size }),
           "inset-y-0 right-0 h-full",
@@ -70,11 +83,13 @@ const SheetContent = React.forwardRef<
         )}
         {...props}
       >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        <PortalContainerContext.Provider value={content}>
+          {children}
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </PortalContainerContext.Provider>
       </DialogPrimitive.Content>
     </SheetPortal>
   );

package/src/components/TimeOfDayInput.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import { Clock } from "lucide-react";
+
+const padZero = (value: number): string => String(value).padStart(2, "0");
+const filterNumeric = (value: string): string => value.replaceAll(/[^0-9]/g, "");
+
+export interface TimeOfDayInputProps {
+  /** `"HH:mm"` (24h) or undefined when unset. */
+  value: string | undefined;
+  onChange: (next: string | undefined) => void;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/** Split a `"HH:mm"` string into its fields, tolerating partial input. */
+function split(value: string | undefined): { hour: string; minute: string } {
+  if (!value) return { hour: "", minute: "" };
+  const [h = "", m = ""] = value.split(":");
+  return { hour: h, minute: m };
+}
+
+/**
+ * 24h time-of-day (HH:MM) input. Two numeric fields mirroring the time
+ * section of {@link DateTimePicker}. Emits a `"HH:mm"` string (or
+ * undefined when either field is empty), the exact shape the automation
+ * `time` condition's `after` / `before` accept - so it round-trips
+ * losslessly through YAML.
+ *
+ * Plain inputs, no animations - no `usePerformance` gating needed.
+ */
+export const TimeOfDayInput: React.FC<TimeOfDayInputProps> = ({
+  value,
+  onChange,
+  disabled,
+  id,
+  className,
+}) => {
+  const [fields, setFields] = useState(() => split(value));
+  const isInternalChange = React.useRef(false);
+
+  // Sync from external value changes (not our own edits).
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    setFields(split(value));
+  }, [value]);
+
+  const emit = (next: { hour: string; minute: string }) => {
+    isInternalChange.current = true;
+    const cleared: string | undefined = undefined;
+    if (next.hour === "" || next.minute === "") {
+      onChange(cleared);
+      return;
+    }
+    onChange(`${padZero(Number(next.hour))}:${padZero(Number(next.minute))}`);
+  };
+
+  const handleChange = (field: "hour" | "minute", raw: string) => {
+    const filtered = filterNumeric(raw).slice(0, 2);
+    const next = { ...fields, [field]: filtered };
+    setFields(next);
+    emit(next);
+  };
+
+  const handleBlur = (field: "hour" | "minute") => {
+    const raw = fields[field];
+    if (raw === "") return;
+    const n = Number(raw);
+    const max = field === "hour" ? 23 : 59;
+    const clamped = padZero(Math.min(Math.max(n, 0), max));
+    if (clamped !== raw) {
+      const next = { ...fields, [field]: clamped };
+      setFields(next);
+      emit(next);
+    }
+  };
+
+  return (
+    <div
+      className={`inline-flex items-center border rounded-lg bg-background px-2 py-1 ${
+        className ?? ""
+      }`}
+    >
+      <Clock className="h-4 w-4 text-muted-foreground mr-2" />
+      <input
+        id={id}
+        type="text"
+        inputMode="numeric"
+        value={fields.hour}
+        onChange={(event) => handleChange("hour", event.target.value)}
+        onBlur={() => handleBlur("hour")}
+        placeholder="HH"
+        aria-label="Hour"
+        className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
+        maxLength={2}
+        disabled={disabled}
+      />
+      <span className="text-muted-foreground">:</span>
+      <input
+        type="text"
+        inputMode="numeric"
+        value={fields.minute}
+        onChange={(event) => handleChange("minute", event.target.value)}
+        onBlur={() => handleBlur("minute")}
+        placeholder="MM"
+        aria-label="Minute"
+        className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
+        maxLength={2}
+        disabled={disabled}
+      />
+    </div>
+  );
+};

package/src/components/comboboxInteraction.ts

@@ -0,0 +1,39 @@
+/**
+ * Marker attribute placed on a combobox's anchor `<input>` so a Radix
+ * `PopoverContent`'s dismissable layer can recognize an interaction that
+ * originated on the anchor itself.
+ *
+ * Radix treats the anchor as "outside" the floating content, so the very
+ * click/focus that opens the list also fires `onPointerDownOutside` /
+ * `onFocusOutside` and dismisses it on the same frame (the "opens then
+ * immediately closes" flicker). Guarding those handlers against anchor-origin
+ * events keeps the list open.
+ *
+ * Usage (see `PackageNameCombobox` / `SecretEnvEditor`):
+ *   1. Spread {@link comboboxAnchorProps} onto the anchor `<input>`.
+ *   2. On `PopoverContent`, in both `onPointerDownOutside` and
+ *      `onFocusOutside`, call `event.preventDefault()` when
+ *      {@link isAnchorInteraction} matches the event target.
+ *   3. Prevent `onCloseAutoFocus` default.
+ *   4. Option buttons use `onMouseDown` + `preventDefault` so a click selects
+ *      before the input blurs.
+ *
+ * Lives in `@checkstack/ui` so every combobox (across plugins) shares one
+ * implementation.
+ */
+export const COMBOBOX_ANCHOR_ATTR = "data-combobox-anchor";
+
+/** Props to spread onto the anchor `<input>` so {@link isAnchorInteraction} can match it. */
+export const comboboxAnchorProps: Record<string, string> = {
+  [COMBOBOX_ANCHOR_ATTR]: "",
+};
+
+/**
+ * Whether an event target is (or is inside) a combobox anchor input. Pure +
+ * DOM-only so it is unit-testable without a React render. Tolerates a null
+ * target and non-Element targets (returns false).
+ */
+export function isAnchorInteraction(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof Element)) return false;
+  return target.closest(`[${COMBOBOX_ANCHOR_ATTR}]`) !== null;
+}

package/src/components/portalContainer.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+/**
+ * The DOM element a floating layer (e.g. a {@link PopoverContent}) should
+ * portal INTO when it is rendered inside a modal Sheet/Dialog.
+ *
+ * Radix modal dialogs lock body scroll via `react-remove-scroll`, which
+ * prevents wheel/touch scrolling on anything portaled to `document.body`
+ * (i.e. outside the dialog's DOM subtree). A Popover whose list overflows
+ * therefore can't scroll while a Sheet/Dialog is open. Portaling the Popover
+ * INTO the dialog content keeps it inside the allowed-scroll subtree, so its
+ * inner `overflow-y-auto` works again. Radix positions popovers with
+ * `position: fixed`, so the container has no effect on placement or clipping.
+ *
+ * `null` (the default, outside any Sheet/Dialog) means portal to `body` as
+ * usual.
+ */
+export const PortalContainerContext = React.createContext<HTMLElement | null>(
+  null,
+);
+
+/** Read the nearest Sheet/Dialog content element to portal a popover into. */
+export const usePortalContainer = (): HTMLElement | null =>
+  React.useContext(PortalContainerContext);

package/src/index.ts

@@ -41,6 +41,8 @@ export * from "./components/Pagination";
 export * from "./components/PaginatedList";
 export * from "./hooks/usePagination";
 export * from "./components/DateTimePicker";
+export * from "./components/DurationInput";
+export * from "./components/TimeOfDayInput";
 export * from "./components/DateRangeFilter";
 export * from "./components/BackLink";
 export * from "./components/StatusUpdateTimeline";
@@ -61,12 +63,14 @@ export * from "./components/VariablePicker";
 export * from "./components/TemplateInput";
 export * from "./components/TemplateInputToggle";
 export * from "./components/ActionCard";
+export * from "./components/ScriptTestPanel";
 export * from "./components/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";
 export * from "./components/MetricTile";
 export * from "./components/Sheet";
 export * from "./components/Popover";
+export * from "./components/comboboxInteraction";
 export * from "./hooks/useIsMobile";
 export * from "./hooks/useInitOnceForKey";
 export * from "./components/ListEmptyState";

package/stories/ActionCard.stories.tsx

@@ -60,3 +60,63 @@ export const MinimalNoToggle: Story = {
     </div>
   ),
 };
+
+/**
+ * Home-Assistant-style collapsed summary row. Passing `onOpenSheet` makes the
+ * card a non-expanding summary: clicking the header opens the item's full
+ * config in a side sheet (wired up by the host) instead of expanding inline.
+ * `summary` renders a compact one-line hint under the title, and `actions`
+ * adds a three-dot overflow menu (Duplicate / Disable / Delete).
+ */
+const CollapsedSummaryDemo = () => {
+  const [enabled, setEnabled] = useState(true);
+  return (
+    <div className="w-[680px] space-y-2 p-4">
+      <ActionCard
+        id="notify-1"
+        title="Notify User"
+        category="Notification"
+        icon="Bell"
+        summary="notify_user → on-call engineer"
+        enabled={enabled}
+        onOpenSheet={() => alert("Open config sheet")}
+        actions={[
+          {
+            label: enabled ? "Disable" : "Enable",
+            icon: enabled ? "PowerOff" : "Power",
+            onClick: () => setEnabled((value) => !value),
+          },
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+      <ActionCard
+        id="choose-1"
+        title="Choose (if / else)"
+        category="Choose"
+        icon="GitBranch"
+        summary="2 branches + else"
+        onOpenSheet={() => alert("Open config sheet")}
+        errors={["choose.0.when: condition is required"]}
+        actions={[
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const CollapsedSummary: Story = {
+  render: () => <CollapsedSummaryDemo />,
+};

package/stories/CodeEditor.stories.tsx

@@ -14,9 +14,11 @@ type Story = StoryObj<typeof CodeEditor>;
 const Demo = ({
   language,
   initial,
+  minHeight = "280px",
 }: {
-  language: "json" | "yaml" | "javascript";
+  language: "json" | "yaml" | "javascript" | "typescript" | "shell";
   initial: string;
+  minHeight?: string;
 }) => {
   const [value, setValue] = useState(initial);
   return (
@@ -24,7 +26,7 @@ const Demo = ({
       value={value}
       onChange={setValue}
       language={language}
-      minHeight="280px"
+      minHeight={minHeight}
     />
   );
 };
@@ -65,3 +67,46 @@ export default async function check({ fetch }) {
     />
   ),
 };
+
+/**
+ * The top-right "Expand editor" affordance opens the same editor in a large
+ * full-screen overlay. The inline editor here is deliberately short so the
+ * value of expanding a long script is obvious; both editors share the same
+ * value, so edits made in the overlay persist after closing it.
+ */
+export const Popout: Story = {
+  render: () => (
+    <Demo
+      language="typescript"
+      minHeight="120px"
+      initial={`// A longer script - click the expand icon (top-right) to edit it in a
+// comfortable full-screen overlay. Edits sync back to the inline editor.
+import { setTimeout as sleep } from "node:timers/promises";
+
+export default async function run({ context }) {
+  for (let attempt = 1; attempt <= 5; attempt += 1) {
+    const res = await fetch(context.url);
+    if (res.ok) {
+      return { ok: true, attempt };
+    }
+    await sleep(1000 * attempt);
+  }
+  return { ok: false };
+}`}
+    />
+  ),
+};
+
+/** Shell scripts get a "Edit script - Shell" overlay title. */
+export const Shell: Story = {
+  render: () => (
+    <Demo
+      language="shell"
+      minHeight="120px"
+      initial={`#!/usr/bin/env bash
+set -euo pipefail
+
+curl -fsS "$TARGET_URL" > /dev/null && echo "up" || echo "down"`}
+    />
+  ),
+};

package/stories/DurationInput.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DurationInput,
+  type DurationValue,
+} from "../src/components/DurationInput";
+import { Label } from "../src/components/Label";
+
+const meta: Meta<typeof DurationInput> = {
+  title: "Components/Inputs/DurationInput",
+  component: DurationInput,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DurationInput>;
+
+const Demo = ({
+  initial,
+  defaultUnit,
+}: {
+  initial?: DurationValue;
+  defaultUnit?: "seconds" | "minutes" | "hours";
+}) => {
+  const [value, setValue] = useState<DurationValue | undefined>(initial);
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Fire only if state holds for</Label>
+      <DurationInput
+        value={value}
+        onChange={setValue}
+        defaultUnit={defaultUnit}
+      />
+      <pre className="text-xs text-muted-foreground">
+        {JSON.stringify(value ?? null)}
+      </pre>
+    </div>
+  );
+};
+
+export const Empty: Story = { render: () => <Demo /> };
+
+export const Minutes: Story = {
+  render: () => <Demo initial={{ minutes: 30 }} />,
+};
+
+export const Hours: Story = {
+  render: () => <Demo initial={{ hours: 2 }} />,
+};
+
+export const SecondsDefault: Story = {
+  render: () => <Demo defaultUnit="seconds" />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <DurationInput value={{ minutes: 10 }} onChange={() => {}} disabled />
+  ),
+};

package/stories/ScriptTestPanel.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import {
+  ScriptTestPanel,
+  ContextSampleEditor,
+  type ScriptTestPanelResult,
+} from "../src/components/ScriptTestPanel";
+
+const meta: Meta<typeof ScriptTestPanel> = {
+  title: "Components/Editors/ScriptTestPanel",
+  component: ScriptTestPanel,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ScriptTestPanel>;
+
+function delay<T>(value: T, ms = 400): Promise<T> {
+  return new Promise((resolve) => setTimeout(() => resolve(value), ms));
+}
+
+const successResult: ScriptTestPanelResult = {
+  result: { id: "INC-42", ok: true },
+  stdout: "Resolved incident INC-42\nDone.",
+  stderr: "",
+  durationMs: 128,
+  timedOut: false,
+};
+
+const shellSuccessResult: ScriptTestPanelResult = {
+  stdout: "INC-42",
+  stderr: "",
+  exitCode: 0,
+  durationMs: 42,
+  timedOut: false,
+};
+
+const failureResult: ScriptTestPanelResult = {
+  stdout: "",
+  stderr: "TypeError: Cannot read properties of undefined (reading 'id')",
+  durationMs: 31,
+  timedOut: false,
+  error: "Cannot read properties of undefined (reading 'id')",
+};
+
+export const CollapsedByDefault: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <ScriptTestPanel onRun={() => delay(successResult)} />
+    </div>
+  ),
+};
+
+export const TypeScriptSuccess: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <ScriptTestPanel onRun={() => delay(successResult)} defaultOpen />
+    </div>
+  ),
+};
+
+export const ShellSuccess: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <ScriptTestPanel onRun={() => delay(shellSuccessResult)} defaultOpen />
+    </div>
+  ),
+};
+
+export const Failure: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <ScriptTestPanel onRun={() => delay(failureResult)} defaultOpen />
+    </div>
+  ),
+};
+
+export const WithSampleContextEditor: Story = {
+  render: () => {
+    const Wrapper: React.FC = () => {
+      const [context, setContext] = React.useState(
+        '{\n  "trigger": {\n    "event": "incident.created",\n    "payload": { "id": "INC-42" }\n  }\n}',
+      );
+      return (
+        <div className="max-w-xl">
+          <ScriptTestPanel
+            onRun={() => delay(successResult)}
+            defaultOpen
+            contextEditor={
+              <ContextSampleEditor value={context} onChange={setContext} />
+            }
+          />
+        </div>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <ScriptTestPanel onRun={() => delay(successResult)} defaultOpen disabled />
+    </div>
+  ),
+};

package/stories/SecretEnvEditor.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { SecretEnvEditor } from "../src/components/DynamicForm/SecretEnvEditor";
+import { Label } from "../src/components/Label";
+
+const meta: Meta<typeof SecretEnvEditor> = {
+  title: "Components/Inputs/SecretEnvEditor",
+  component: SecretEnvEditor,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof SecretEnvEditor>;
+
+const Demo = ({
+  initial,
+  secretNames,
+}: {
+  initial?: Record<string, string>;
+  secretNames?: string[];
+}) => {
+  const [value, setValue] = useState<Record<string, string>>(initial ?? {});
+  return (
+    <div className="max-w-xl space-y-2">
+      <Label>Secret environment variables</Label>
+      <SecretEnvEditor
+        id="demo-secret-env"
+        value={value}
+        onChange={setValue}
+        secretNames={secretNames}
+      />
+      <pre className="text-xs text-muted-foreground">
+        {JSON.stringify(value, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+/** Empty editor with secret-name suggestions available. */
+export const Empty: Story = {
+  render: () => (
+    <Demo secretNames={["jira_token", "db_password", "smtp_api_key"]} />
+  ),
+};
+
+/** Pre-populated mapping; the stored value is the `${{ secrets.NAME }}` template. */
+export const WithValues: Story = {
+  render: () => (
+    <Demo
+      initial={{
+        API_TOKEN: "${{ secrets.jira_token }}",
+        DB_PASSWORD: "${{ secrets.db_password }}",
+      }}
+      secretNames={["jira_token", "db_password", "smtp_api_key"]}
+    />
+  ),
+};
+
+/** No name suggestions available — the secret field is a plain free-text
+ *  combobox and no existence warning is shown (the list is unknown). */
+export const NoSuggestions: Story = {
+  render: () => <Demo initial={{ TOKEN: "${{ secrets.some_secret }}" }} />,
+};
+
+/**
+ * A row references a secret that the loaded list doesn't contain — the row
+ * shows a non-blocking warning (red border + message). The secret may have
+ * been deleted/renamed or be created later, so the value still round-trips.
+ */
+export const UnknownSecret: Story = {
+  render: () => (
+    <Demo
+      initial={{
+        API_TOKEN: "${{ secrets.jira_token }}",
+        GHOST: "${{ secrets.deleted_secret }}",
+      }}
+      secretNames={["jira_token", "db_password"]}
+    />
+  ),
+};

package/stories/TimeOfDayInput.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TimeOfDayInput } from "../src/components/TimeOfDayInput";
+import { Label } from "../src/components/Label";
+
+const meta: Meta<typeof TimeOfDayInput> = {
+  title: "Components/Inputs/TimeOfDayInput",
+  component: TimeOfDayInput,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeOfDayInput>;
+
+const Demo = ({ initial }: { initial?: string }) => {
+  const [value, setValue] = useState<string | undefined>(initial);
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>On-call window starts at</Label>
+      <TimeOfDayInput value={value} onChange={setValue} />
+      <pre className="text-xs text-muted-foreground">
+        {JSON.stringify(value ?? null)}
+      </pre>
+    </div>
+  );
+};
+
+export const Empty: Story = { render: () => <Demo /> };
+
+export const Set: Story = { render: () => <Demo initial="22:00" /> };
+
+export const Disabled: Story = {
+  render: () => <TimeOfDayInput value="09:30" onChange={() => {}} disabled />,
+};

package/tsconfig.json

@@ -3,6 +3,7 @@
   "include": [
     "src",
     "src/components/CodeEditor/generated/stdlib-types.json",
+    "src/components/CodeEditor/generated/builtin-modules.json",
     "scripts"
   ],
   "references": [