@checkstack/ui 1.9.0 → 1.11.0

package/stories/QueryErrorState.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QueryErrorState } from "../src/components/QueryErrorState";
+
+const meta: Meta<typeof QueryErrorState> = {
+  title: "Components/Feedback/QueryErrorState",
+  component: QueryErrorState,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryErrorState>;
+
+export const Default: Story = {
+  args: {
+    error: new Error("Failed to reach the backend at /api/health-checks"),
+    onRetry: () => {
+      // Storybook noop - wires up to a real refetch() in the app
+      console.log("retry clicked");
+    },
+  },
+};
+
+export const WithResource: Story = {
+  args: {
+    error: new Error("Network request failed (504)"),
+    resource: "checks",
+    onRetry: () => {
+      console.log("retry clicked");
+    },
+  },
+};
+
+export const NonErrorPayload: Story = {
+  args: {
+    error: null,
+    onRetry: () => {
+      console.log("retry clicked");
+    },
+  },
+};

package/stories/ResponsiveTable.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../src/components/Badge";
+import {
+  MobileCardList,
+  ResponsiveTable,
+} from "../src/components/ResponsiveTable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../src/components/Table";
+
+const meta: Meta = {
+  title: "Components/Data/ResponsiveTable",
+};
+
+export default meta;
+type Story = StoryObj;
+
+interface Row {
+  name: string;
+  strategy: string;
+  status: "healthy" | "degraded" | "down";
+  latency: string;
+}
+
+const rows: Row[] = [
+  { name: "api.checkstack.io", strategy: "HTTP probe", status: "healthy", latency: "42 ms" },
+  { name: "db-primary", strategy: "TCP probe", status: "degraded", latency: "340 ms" },
+  { name: "cache", strategy: "HTTP probe", status: "down", latency: "—" },
+];
+
+const variantFor = (status: Row["status"]) => {
+  if (status === "healthy") return "success" as const;
+  if (status === "degraded") return "warning" as const;
+  return "destructive" as const;
+};
+
+export const DualLayout: Story = {
+  render: () => (
+    <div className="w-full">
+      <ResponsiveTable>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Strategy</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Latency</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.name}>
+                <TableCell>{row.name}</TableCell>
+                <TableCell>{row.strategy}</TableCell>
+                <TableCell>
+                  <Badge variant={variantFor(row.status)}>{row.status}</Badge>
+                </TableCell>
+                <TableCell className="text-right">{row.latency}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ResponsiveTable>
+
+      <MobileCardList>
+        {rows.map((row) => (
+          <div
+            key={row.name}
+            className="rounded-md border border-border bg-card p-3 flex flex-col gap-1"
+          >
+            <div className="flex items-center justify-between">
+              <span className="font-medium">{row.name}</span>
+              <Badge variant={variantFor(row.status)}>{row.status}</Badge>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {row.strategy} · {row.latency}
+            </div>
+          </div>
+        ))}
+      </MobileCardList>
+
+      <p className="text-xs text-muted-foreground mt-4">
+        Resize the viewport: the table appears on <code>sm</code> and up, the
+        stacked card list shows on smaller screens.
+      </p>
+    </div>
+  ),
+};

package/stories/Skeleton.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "../src/components/Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Feedback/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {
+    className: "h-4 w-48",
+  },
+};
+
+export const TextBlock: Story = {
+  render: () => (
+    <div className="space-y-2 max-w-md">
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+    </div>
+  ),
+};
+
+export const ListRow: Story = {
+  render: () => (
+    <div className="flex items-center gap-3 max-w-md">
+      <Skeleton className="h-10 w-10 rounded-full" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-3 w-1/3" />
+      </div>
+    </div>
+  ),
+};
+
+export const CardGrid: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-3 max-w-xl">
+      {Array.from({ length: 4 }, (_, index) => (
+        <div key={index} className="rounded-md border border-border p-4 space-y-3">
+          <Skeleton className="h-5 w-2/3" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+        </div>
+      ))}
+    </div>
+  ),
+};

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import { useToast } from "../src/components/ToastProvider";
+import { toastError, toastSuccess } from "../src/utils/toastTemplates";
+
+const meta: Meta = {
+  title: "Foundations/toastTemplates",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const Demo = () => {
+  const toast = useToast();
+
+  return (
+    <div className="space-y-3 max-w-md">
+      <p className="text-sm text-muted-foreground">
+        Fire the canonical success / error toasts. The error helper
+        prefixes the action and truncates long messages to 100 characters.
+      </p>
+
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={() => toastSuccess(toast, "Check created")}>
+          Fire success
+        </Button>
+
+        <Button
+          variant="destructive"
+          onClick={() =>
+            toastError(
+              toast,
+              "Failed to create check",
+              new Error("Backend unreachable"),
+            )
+          }
+        >
+          Fire error
+        </Button>
+
+        <Button
+          variant="outline"
+          onClick={() =>
+            toastError(
+              toast,
+              "Failed to import config",
+              new Error(
+                "Validation failed: " + "x".repeat(300),
+              ),
+            )
+          }
+        >
+          Fire truncated error
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const Helpers: Story = { render: () => <Demo /> };