@checkstack/ui 1.11.0 → 1.13.0

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader2 } from "lucide-react";
+import { Spinner } from "../src/components/Spinner";
+import { Button } from "../src/components/Button";
+import { cn } from "../src/utils";
+
+const meta: Meta<typeof Spinner> = {
+  title: "Components/Feedback/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+  args: {
+    size: "sm",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="sm" />
+        <span className="text-xs text-muted-foreground">sm (h-4 w-4)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="md" />
+        <span className="text-xs text-muted-foreground">md (h-5 w-5)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="lg" />
+        <span className="text-xs text-muted-foreground">lg (h-6 w-6)</span>
+      </div>
+    </div>
+  ),
+};
+
+export const InButton: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button disabled>
+        <Spinner size="sm" className="mr-2" />
+        Saving...
+      </Button>
+      <Button variant="outline" disabled>
+        <Spinner size="sm" className="mr-2" />
+        Loading
+      </Button>
+    </div>
+  ),
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    "aria-label": "Loading",
+  },
+};
+
+/**
+ * On low-power devices (or when the OS requests reduced motion) the spinner
+ * renders the static icon with no spin. The component handles this internally
+ * via `usePerformance().isLowPower`; this story renders the static icon
+ * directly to illustrate the result, since stories run with motion enabled.
+ */
+export const LowPowerStatic: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-4 w-4")} aria-hidden />
+        <span className="text-xs text-muted-foreground">sm (no spin)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-5 w-5")} aria-hidden />
+        <span className="text-xs text-muted-foreground">md (no spin)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-6 w-6")} aria-hidden />
+        <span className="text-xs text-muted-foreground">lg (no spin)</span>
+      </div>
+    </div>
+  ),
+};

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": [
@@ -12,6 +13,9 @@
     {
       "path": "../frontend-api"
     },
+    {
+      "path": "../template-engine"
+    },
     {
       "path": "../test-utils-frontend"
     }