@checkstack/ui 1.7.1 → 1.8.1

package/src/components/LinksEditor.tsx

@@ -0,0 +1,156 @@
+import { useState } from "react";
+import { ExternalLink, Plus, Trash2 } from "lucide-react";
+import { Button } from "./Button";
+import { Input } from "./Input";
+import { Label } from "./Label";
+
+export interface HotLink {
+  id: string;
+  label: string | null;
+  url: string;
+}
+
+export interface LinksEditorProps<T extends HotLink> {
+  /** Currently attached links. */
+  links: T[];
+  /** Whether the current user is allowed to add/remove links. */
+  canManage?: boolean;
+  /** Called when the user submits a new link. Should resolve when persisted. */
+  onAdd: (props: { label?: string; url: string }) => Promise<void> | void;
+  /** Called when the user removes a link. */
+  onRemove: (link: T) => Promise<void> | void;
+  /** Whether an add or remove mutation is currently in flight. */
+  busy?: boolean;
+  /** Heading shown above the list. Defaults to "Hotlinks". */
+  title?: string;
+  /** Help text under the heading. */
+  description?: string;
+}
+
+/**
+ * Inline editor for a list of free-form URL "hotlinks" (e.g. Jira tickets,
+ * dashboards, runbooks). Used by the incident, maintenance, and catalog
+ * plugins — the parent owns the data + mutation wiring; this component is
+ * pure presentation.
+ */
+export function LinksEditor<T extends HotLink>({
+  links,
+  canManage = true,
+  onAdd,
+  onRemove,
+  busy,
+  title = "Hotlinks",
+  description,
+}: LinksEditorProps<T>) {
+  const [label, setLabel] = useState("");
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState<string | undefined>();
+
+  const handleAdd = async () => {
+    const trimmedUrl = url.trim();
+    if (!trimmedUrl) {
+      setError("URL is required");
+      return;
+    }
+    try {
+      // Triggers a synchronous URL parse error early so users get a clear
+      // message instead of waiting for the server validation roundtrip.
+      new URL(trimmedUrl);
+    } catch {
+      setError("Must be a valid URL (include http:// or https://)");
+      return;
+    }
+    setError(undefined);
+    await onAdd({ label: label.trim() || undefined, url: trimmedUrl });
+    setLabel("");
+    setUrl("");
+  };
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <Label>{title}</Label>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+
+      {links.length > 0 ? (
+        <div className="border rounded-lg divide-y">
+          {links.map((link) => (
+            <div
+              key={link.id}
+              className="flex items-center justify-between p-3 gap-2"
+            >
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <ExternalLink className="h-4 w-4 text-muted-foreground shrink-0" />
+                <div className="min-w-0">
+                  <a
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-primary hover:underline truncate block"
+                  >
+                    {link.label ?? link.url}
+                  </a>
+                  {link.label && (
+                    <span className="text-xs text-muted-foreground truncate block">
+                      {link.url}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {canManage && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => void onRemove(link)}
+                  disabled={busy}
+                  aria-label="Remove link"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">No links attached</p>
+      )}
+
+      {canManage && (
+        <div className="border rounded-lg p-4 space-y-3">
+          <div className="grid sm:grid-cols-[1fr_2fr] gap-3">
+            <div className="space-y-1">
+              <Label htmlFor="hotlink-label">Label (optional)</Label>
+              <Input
+                id="hotlink-label"
+                placeholder="e.g. Jira ticket"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="hotlink-url">URL</Label>
+              <Input
+                id="hotlink-url"
+                placeholder="https://example.com/..."
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+              />
+            </div>
+          </div>
+          {error && <p className="text-xs text-destructive">{error}</p>}
+          <Button
+            onClick={() => void handleAdd()}
+            disabled={!url.trim() || busy}
+            size="sm"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            Add Link
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/UserMenu.tsx

@@ -94,7 +94,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
             <SheetHeader className="px-4 py-3 border-b border-border">
               <SheetTitle className="text-base">Menu</SheetTitle>
             </SheetHeader>
-            <div className="flex-1 overflow-y-auto p-2 grid grid-cols-1 gap-2">
+            <div className="flex-1 min-h-0 overflow-y-auto p-2 flex flex-col gap-1 [&>*]:shrink-0">
               {userInfo}
               <DropdownMenuSeparator />
               {children}

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./components/Toggle";
 export * from "./components/Checkbox";
 export * from "./components/Alert";
 export * from "./components/InfoBanner";
+export * from "./components/InstanceScopeBanner";
 export * from "./components/DynamicForm";
 export * from "./components/PageLayout";
 export * from "./components/PluginConfigForm";
@@ -43,6 +44,7 @@ export * from "./components/DateTimePicker";
 export * from "./components/DateRangeFilter";
 export * from "./components/BackLink";
 export * from "./components/StatusUpdateTimeline";
+export * from "./components/LinksEditor";
 export * from "./components/Slider";
 export * from "./components/DynamicIcon";
 export * from "./components/StrategyConfigCard";

package/stories/AccessDenied.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccessDenied } from "../src/components/AccessDenied";
+
+const meta: Meta<typeof AccessDenied> = {
+  title: "Components/Feedback/AccessDenied",
+  component: AccessDenied,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessDenied>;
+
+export const Default: Story = {};
+
+export const CustomMessage: Story = {
+  args: { message: "You need 'catalog.manage' to view this page." },
+};

package/stories/AccessGate.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccessGate } from "../src/components/AccessGate";
+
+const allowed = () => ({ loading: false, allowed: true });
+const denied = () => ({ loading: false, allowed: false });
+const loading = () => ({ loading: true, allowed: false });
+
+const meta: Meta<typeof AccessGate> = {
+  title: "Components/Feedback/AccessGate",
+  component: AccessGate,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessGate>;
+
+export const Allowed: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: allowed,
+    children: <p className="text-sm">Gated content visible.</p>,
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: denied,
+    children: <p className="text-sm">You should not see this.</p>,
+  },
+};
+
+export const ShowDenied: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: denied,
+    showDenied: true,
+    deniedMessage: "Demo access denied.",
+    children: <p>Hidden</p>,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: loading,
+    children: <p>Resolves once access loads.</p>,
+  },
+};

package/stories/Accordion.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../src/components/Accordion";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Display/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Single: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>What is a health check?</AccordionTrigger>
+        <AccordionContent>
+          A periodic probe that asserts a system property and reports a status.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>What is a strategy?</AccordionTrigger>
+        <AccordionContent>
+          A pluggable provider that defines how a check is executed.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>What is a satellite?</AccordionTrigger>
+        <AccordionContent>
+          A standalone agent that runs checks from a remote network location.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>Section one</AccordionTrigger>
+        <AccordionContent>Content one.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Section two</AccordionTrigger>
+        <AccordionContent>Content two.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/stories/Alert.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import {
+  Alert,
+  AlertContent,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "../src/components/Alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "success", "warning", "error", "info"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: { variant: "default" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <Info className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>
+          This is an informational alert for plugin developers.
+        </AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Success: Story = {
+  args: { variant: "success" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <CircleCheck className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Saved</AlertTitle>
+        <AlertDescription>Plugin configuration was saved.</AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Warning: Story = {
+  args: { variant: "warning" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <TriangleAlert className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>
+          The satellite token will expire in 24 hours.
+        </AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Error: Story = {
+  args: { variant: "error" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <CircleAlert className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Something went wrong</AlertTitle>
+        <AlertDescription>The health check failed to start.</AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};

package/stories/AmbientBackground.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AmbientBackground } from "../src/components/AmbientBackground";
+
+const meta: Meta<typeof AmbientBackground> = {
+  title: "Components/Layout/AmbientBackground",
+  component: AmbientBackground,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AmbientBackground>;
+
+export const Default: Story = {
+  render: () => (
+    <AmbientBackground>
+      <div className="max-w-3xl mx-auto py-24 px-6">
+        <h1 className="text-4xl font-bold tracking-tight">Inverse glow grid</h1>
+        <p className="mt-4 text-muted-foreground">
+          Aurora blobs and a grid mask, with automatic graceful degradation when{" "}
+          <code>usePerformance().isLowPower</code> is true.
+        </p>
+      </div>
+    </AmbientBackground>
+  ),
+};

package/stories/AnimatedCounter.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { AnimatedCounter } from "../src/components/AnimatedCounter";
+
+const meta: Meta<typeof AnimatedCounter> = {
+  title: "Components/Display/AnimatedCounter",
+  component: AnimatedCounter,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedCounter>;
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    const id = setInterval(
+      () => setValue((v) => (v >= 1000 ? 0 : v + Math.floor(Math.random() * 200))),
+      1500,
+    );
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div className="text-4xl font-bold">
+      <AnimatedCounter value={value} />
+    </div>
+  );
+};
+
+export const TickingUp: Story = {
+  render: () => <Demo />,
+};
+
+export const StaticValue: Story = {
+  args: { value: 1042 },
+  render: (args) => (
+    <span className="text-3xl font-bold">
+      <AnimatedCounter {...args} />
+    </span>
+  ),
+};

package/stories/AnimatedNumber.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { AnimatedNumber } from "../src/components/AnimatedNumber";
+
+const meta: Meta<typeof AnimatedNumber> = {
+  title: "Components/Display/AnimatedNumber",
+  component: AnimatedNumber,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedNumber>;
+
+const Demo = () => {
+  const [value, setValue] = useState(99.95);
+  useEffect(() => {
+    const id = setInterval(
+      () => setValue(95 + Math.random() * 5),
+      1500,
+    );
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div className="text-3xl font-bold text-success tabular-nums">
+      <AnimatedNumber value={value} suffix="%" decimals={2} />
+    </div>
+  );
+};
+
+export const Uptime: Story = { render: () => <Demo /> };
+
+export const NA: Story = {
+  args: { value: undefined },
+  render: (args) => (
+    <span className="text-2xl font-bold">
+      <AnimatedNumber {...args} />
+    </span>
+  ),
+};

package/stories/BackLink.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BackLink } from "../src/components/BackLink";
+
+const meta: Meta<typeof BackLink> = {
+  title: "Components/Navigation/BackLink",
+  component: BackLink,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof BackLink>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => {
+      /* navigate back */
+    },
+  },
+};
+
+export const CustomLabel: Story = {
+  args: {
+    children: "Back to systems",
+    onClick: () => {
+      /* navigate back */
+    },
+  },
+};
+
+export const AsLink: Story = {
+  args: { to: "/catalog" },
+};

package/stories/Badge.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../src/components/Badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Display/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+    },
+  },
+  args: {
+    children: "Badge",
+    variant: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+};

package/stories/Button.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Inputs/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost", "destructive", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    children: "Click me",
+    variant: "primary",
+    size: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = { args: { variant: "secondary" } };
+
+export const Outline: Story = { args: { variant: "outline" } };
+
+export const Ghost: Story = { args: { variant: "ghost" } };
+
+export const Destructive: Story = { args: { variant: "destructive" } };
+
+export const Link: Story = { args: { variant: "link" } };
+
+export const AllSizes: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Button {...args} size="sm">
+        Small
+      </Button>
+      <Button {...args} size="default">
+        Default
+      </Button>
+      <Button {...args} size="lg">
+        Large
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = { args: { disabled: true } };

package/stories/Card.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../src/components/Card";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Display/Card",
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Basic: Story = {
+  render: () => (
+    <Card className="max-w-md">
+      <CardHeader>
+        <CardTitle>HTTP Health Check</CardTitle>
+        <CardDescription>Probe a public endpoint every 60 seconds.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          A card is the standard container for plugin panels.
+        </p>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Save</Button>
+      </CardFooter>
+    </Card>
+  ),
+};