@checkstack/ui 1.10.0 → 1.12.0

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/TemplateInputToggle.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TemplateInputToggle } from "../src/components/TemplateInputToggle";
+import { Input } from "../src/components/Input";
+
+const meta: Meta<typeof TemplateInputToggle> = {
+  title: "Components/Automation/TemplateInputToggle",
+  component: TemplateInputToggle,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wraps a typed input with an "fx" button. Click it to switch into template mode and back.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateInputToggle>;
+
+const NumberFieldDemo = () => {
+  const [value, setValue] = useState("30");
+  return (
+    <div className="w-96 p-4">
+      <TemplateInputToggle
+        value={value}
+        onChange={setValue}
+        renderTyped={({ disabled }) => (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={disabled}
+          />
+        )}
+        templateProperties={[
+          { path: "trigger.payload.timeoutSeconds", type: "number" },
+          { path: "var.delay", type: "number" },
+        ]}
+        templatePlaceholder="{{ trigger.payload.timeoutSeconds }}"
+      />
+    </div>
+  );
+};
+
+const StartsInTemplateModeDemo = () => {
+  const [value, setValue] = useState("{{ trigger.payload.timeoutSeconds }}");
+  return (
+    <div className="w-96 p-4">
+      <TemplateInputToggle
+        value={value}
+        onChange={setValue}
+        renderTyped={({ disabled }) => (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={disabled}
+          />
+        )}
+        templateProperties={[
+          { path: "trigger.payload.timeoutSeconds", type: "number" },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const NumberField: Story = {
+  render: () => <NumberFieldDemo />,
+};
+
+export const StartsInTemplateMode: Story = {
+  render: () => <StartsInTemplateModeDemo />,
+};

package/stories/TemplateValueInput.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TemplateValueInput } from "../src/components/TemplateValueInput";
+import type { TemplateProperty } from "../src/components/CodeEditor";
+
+const meta: Meta<typeof TemplateValueInput> = {
+  title: "Components/Automation/TemplateValueInput",
+  component: TemplateValueInput,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-line input with `{{` template autocomplete. Type `{{` to open the picker.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateValueInput>;
+
+const sampleProperties: TemplateProperty[] = [
+  { path: "trigger.event", type: "string", description: "Event id." },
+  { path: "trigger.payload.incidentId", type: "string" },
+  { path: "trigger.payload.title", type: "string" },
+  { path: "trigger.payload.severity", type: '"low" | "high"' },
+  { path: "var.outer", type: "string" },
+  { path: "artifact.jira.issue.key", type: "string" },
+];
+
+const WithPropertiesDemo = () => {
+  const [value, setValue] = useState("Title: ");
+  return (
+    <div className="w-96 p-4">
+      <TemplateValueInput
+        value={value}
+        onChange={setValue}
+        placeholder="Type {{ to insert a variable…"
+        templateProperties={sampleProperties}
+      />
+    </div>
+  );
+};
+
+const NoPropertiesDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="w-96 p-4">
+      <TemplateValueInput
+        value={value}
+        onChange={setValue}
+        placeholder="No template autocomplete here"
+      />
+    </div>
+  );
+};
+
+export const WithProperties: Story = {
+  render: () => <WithPropertiesDemo />,
+};
+
+export const NoProperties: Story = {
+  render: () => <NoPropertiesDemo />,
+};

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/stories/VariablePicker.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  VariablePicker,
+  type VariableNode,
+} from "../src/components/VariablePicker";
+
+const meta: Meta<typeof VariablePicker> = {
+  title: "Components/Automation/VariablePicker",
+  component: VariablePicker,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Hierarchical picker — click the trigger button to open a tree of in-scope automation variables.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VariablePicker>;
+
+const sampleScope: VariableNode[] = [
+  {
+    path: "trigger",
+    type: "object",
+    description: "Trigger that fired this run.",
+    children: [
+      {
+        path: "trigger.event",
+        type: '"incident.created" | "incident.resolved"',
+        description: "Discriminator.",
+      },
+      {
+        path: "trigger.payload",
+        type: "object",
+        children: [
+          { path: "trigger.payload.incidentId", type: "string" },
+          {
+            path: "trigger.payload.title",
+            type: "string",
+            conditionalOnTriggers: ["incident.created"],
+          },
+          {
+            path: "trigger.payload.resolvedAt",
+            type: "string",
+            conditionalOnTriggers: ["incident.resolved"],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "var",
+    templateRef: "variables",
+    type: "object",
+    description: "Operator-defined variables.",
+    children: [
+      { path: "var.outer", templateRef: "variables.outer", type: "string" },
+    ],
+  },
+  {
+    path: "artifact",
+    templateRef: "artifacts",
+    type: "object",
+    description: "Artifacts produced upstream.",
+    children: [
+      {
+        // Hyphenated/dotted artifact id → templateRef uses bracket notation
+        // so the inserted `{{ }}` text is runtime-parseable.
+        path: "artifact.integration-jira.issue",
+        templateRef: 'artifacts["integration-jira.issue"]',
+        type: "object",
+        children: [
+          {
+            path: "artifact.integration-jira.issue.key",
+            templateRef: 'artifacts["integration-jira.issue"].key',
+            type: "string",
+          },
+          {
+            path: "artifact.integration-jira.issue.url",
+            templateRef: 'artifacts["integration-jira.issue"].url',
+            type: "string",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const DefaultDemo = () => {
+  const [inserted, setInserted] = useState<string | null>(null);
+  return (
+    <div className="p-12 flex flex-col items-start gap-4">
+      <VariablePicker scope={sampleScope} onSelect={setInserted} />
+      {inserted && (
+        <p className="text-xs text-muted-foreground">
+          Inserted: <code className="font-mono">{`{{${inserted}}}`}</code>
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DefaultDemo />,
+};

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": [