@checkstack/ui 1.8.0 → 1.8.1

package/stories/SectionHeader.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Activity } from "lucide-react";
+import { SectionHeader } from "../src/components/SectionHeader";
+
+const meta: Meta<typeof SectionHeader> = {
+  title: "Components/Layout/SectionHeader",
+  component: SectionHeader,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof SectionHeader>;
+
+export const Default: Story = {
+  args: {
+    title: "Recent activity",
+    description: "Last 24 hours of health-check transitions.",
+    icon: <Activity className="h-5 w-5" />,
+  },
+};

package/stories/Select.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../src/components/Select";
+
+const meta: Meta = {
+  title: "Components/Inputs/Select",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const Demo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="max-w-xs">
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick an environment" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="prod">Production</SelectItem>
+          <SelectItem value="staging">Staging</SelectItem>
+          <SelectItem value="dev">Development</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/Sheet.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../src/components/Sheet";
+
+const meta: Meta = {
+  title: "Components/Overlays/Sheet",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit system</SheetTitle>
+          <SheetDescription>
+            Slide-in side panel for secondary tasks.
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          <p className="text-sm text-muted-foreground">Form contents…</p>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const LargeSize: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Open large sheet</Button>
+      </SheetTrigger>
+      <SheetContent size="lg">
+        <SheetHeader>
+          <SheetTitle>Large sheet</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          <p className="text-sm text-muted-foreground">
+            Use <code>size=&quot;lg&quot;</code> for richer side panels.
+          </p>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/stories/Slider.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Slider } from "../src/components/Slider";
+
+const meta: Meta<typeof Slider> = {
+  title: "Components/Inputs/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+const Demo = () => {
+  const [value, setValue] = useState([60]);
+  return (
+    <div className="max-w-md space-y-3">
+      <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />
+      <p className="text-sm text-muted-foreground">Value: {value[0]}</p>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/StatusCard.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TrendingUp } from "lucide-react";
+import { StatusCard } from "../src/components/StatusCard";
+
+const meta: Meta<typeof StatusCard> = {
+  title: "Components/Display/StatusCard",
+  component: StatusCard,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusCard>;
+
+export const Default: Story = {
+  args: {
+    title: "Uptime",
+    value: "99.95%",
+    description: "Last 30 days",
+    icon: <TrendingUp className="h-5 w-5" />,
+  },
+};
+
+export const Gradient: Story = {
+  args: {
+    title: "Throughput",
+    value: "1.2k req/s",
+    icon: <TrendingUp className="h-5 w-5" />,
+    variant: "gradient",
+  },
+};

package/stories/StatusUpdateTimeline.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../src/components/Badge";
+import {
+  StatusUpdateTimeline,
+  Timeline,
+  type StatusUpdate,
+} from "../src/components/StatusUpdateTimeline";
+
+const meta: Meta = {
+  title: "Components/Display/StatusUpdateTimeline",
+};
+
+export default meta;
+type Story = StoryObj;
+
+type IncidentStatus = "investigating" | "identified" | "monitoring" | "resolved";
+
+const updates: StatusUpdate<IncidentStatus>[] = [
+  {
+    id: "1",
+    message: "We are investigating reports of elevated 5xx on /api.",
+    statusChange: "investigating",
+    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 3),
+    createdByName: "On-call",
+  },
+  {
+    id: "2",
+    message: "Identified a misconfigured rate limiter; rolling back.",
+    statusChange: "identified",
+    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2),
+    createdByName: "On-call",
+  },
+  {
+    id: "3",
+    message: "Rollback completed. Monitoring error rate.",
+    statusChange: "monitoring",
+    createdAt: new Date(Date.now() - 1000 * 60 * 60),
+    createdByName: "On-call",
+  },
+  {
+    id: "4",
+    message: "Resolved.",
+    statusChange: "resolved",
+    createdAt: new Date(Date.now() - 1000 * 60 * 30),
+    createdByName: "On-call",
+  },
+];
+
+export const Updates: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <StatusUpdateTimeline
+        updates={updates}
+        renderStatusBadge={(status) => (
+          <Badge variant={status === "resolved" ? "success" : "secondary"}>
+            {status}
+          </Badge>
+        )}
+      />
+    </div>
+  ),
+};
+
+export const GenericTimeline: Story = {
+  render: () => (
+    <div className="max-w-xl">
+      <Timeline
+        items={updates.map((u) => ({ id: u.id, date: u.createdAt, msg: u.message }))}
+        renderItem={(item) => (
+          <div className="rounded-md border border-border p-3">
+            <p className="text-sm">{item.msg}</p>
+          </div>
+        )}
+      />
+    </div>
+  ),
+};

package/stories/StrategyConfigCard.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  StrategyConfigCard,
+  type StrategyConfigCardData,
+} from "../src/components/StrategyConfigCard";
+
+const meta: Meta<typeof StrategyConfigCard> = {
+  title: "Components/Forms/StrategyConfigCard",
+  component: StrategyConfigCard,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof StrategyConfigCard>;
+
+const strategy: StrategyConfigCardData = {
+  id: "http-probe",
+  displayName: "HTTP Probe",
+  description: "Probe a public HTTP endpoint and assert a 2xx response.",
+  icon: "Globe",
+  enabled: true,
+};
+
+const Demo = () => {
+  const [enabled, setEnabled] = useState(true);
+  const [config, setConfig] = useState<Record<string, unknown>>({
+    url: "https://example.com/health",
+    timeoutMs: 5000,
+  });
+  return (
+    <div className="max-w-2xl">
+      <StrategyConfigCard
+        strategy={{ ...strategy, enabled }}
+        onToggle={async (_, next) => setEnabled(next)}
+        configSections={[
+          {
+            id: "main",
+            title: "Configuration",
+            value: config,
+            schema: {
+              type: "object",
+              required: ["url"],
+              properties: {
+                url: { type: "string", title: "URL", format: "uri" },
+                timeoutMs: { type: "number", title: "Timeout (ms)", default: 5000 },
+              },
+            },
+            onSave: async (next) => setConfig(next),
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/SubscribeButton.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { SubscribeButton } from "../src/components/SubscribeButton";
+
+const meta: Meta<typeof SubscribeButton> = {
+  title: "Components/Inputs/SubscribeButton",
+  component: SubscribeButton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof SubscribeButton>;
+
+const Demo = ({ size }: { size: "default" | "sm" | "lg" | "icon" }) => {
+  const [subscribed, setSubscribed] = useState(false);
+  return (
+    <SubscribeButton
+      isSubscribed={subscribed}
+      size={size}
+      onSubscribe={() => setSubscribed(true)}
+      onUnsubscribe={() => setSubscribed(false)}
+    />
+  );
+};
+
+export const IconButton: Story = { render: () => <Demo size="icon" /> };
+export const Default: Story = { render: () => <Demo size="default" /> };

package/stories/Table.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../src/components/Badge";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../src/components/Table";
+
+const meta: Meta = {
+  title: "Components/Data/Table",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <Table>
+        <TableCaption>Recent health checks</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Strategy</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="text-right">Latency</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>api.checkstack.io</TableCell>
+            <TableCell>HTTP probe</TableCell>
+            <TableCell><Badge variant="success">Healthy</Badge></TableCell>
+            <TableCell className="text-right">42 ms</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>db-primary</TableCell>
+            <TableCell>TCP probe</TableCell>
+            <TableCell><Badge variant="warning">Degraded</Badge></TableCell>
+            <TableCell className="text-right">340 ms</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>cache</TableCell>
+            <TableCell>HTTP probe</TableCell>
+            <TableCell><Badge variant="destructive">Down</Badge></TableCell>
+            <TableCell className="text-right">—</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};

package/stories/Tabs.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TabPanel, Tabs, type TabItem } from "../src/components/Tabs";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Navigation/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const items: TabItem[] = [
+  { id: "overview", label: "Overview" },
+  { id: "history", label: "History" },
+  { id: "config", label: "Configuration" },
+];
+
+const InteractiveTabs = () => {
+  const [active, setActive] = useState("overview");
+  return (
+    <div className="space-y-4">
+      <Tabs items={items} activeTab={active} onTabChange={setActive} />
+      <TabPanel tabId="overview" activeTab={active}>
+        <p className="text-sm text-muted-foreground">Overview content.</p>
+      </TabPanel>
+      <TabPanel tabId="history" activeTab={active}>
+        <p className="text-sm text-muted-foreground">History content.</p>
+      </TabPanel>
+      <TabPanel tabId="config" activeTab={active}>
+        <p className="text-sm text-muted-foreground">Configuration content.</p>
+      </TabPanel>
+    </div>
+  );
+};
+
+export const Basic: Story = {
+  render: () => <InteractiveTabs />,
+};

package/stories/TerminalFeed.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TerminalFeed, type TerminalEntry } from "../src/components/TerminalFeed";
+
+const meta: Meta<typeof TerminalFeed> = {
+  title: "Components/Display/TerminalFeed",
+  component: TerminalFeed,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TerminalFeed>;
+
+const entries: TerminalEntry[] = [
+  {
+    id: "1",
+    timestamp: new Date(),
+    content: "Probe started for api.checkstack.io",
+    variant: "info",
+  },
+  {
+    id: "2",
+    timestamp: new Date(),
+    content: "200 OK in 42ms",
+    variant: "success",
+  },
+  {
+    id: "3",
+    timestamp: new Date(),
+    content: "Latency exceeds SLO threshold",
+    variant: "warning",
+    suffix: "p99 > 300ms",
+  },
+  {
+    id: "4",
+    timestamp: new Date(),
+    content: "Probe failed: connection refused",
+    variant: "error",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    entries,
+    title: "Probe activity",
+    maxHeight: "300px",
+  },
+};

package/stories/Textarea.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "../src/components/Label";
+import { Textarea } from "../src/components/Textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Inputs/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: { placeholder: "Describe what changed…", rows: 4 },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="space-y-2 max-w-md">
+      <Label htmlFor="notes">Notes</Label>
+      <Textarea id="notes" rows={5} placeholder="Optional context…" />
+    </div>
+  ),
+};

package/stories/ThemeProvider.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import { useTheme } from "../src/components/ThemeProvider";
+
+const meta: Meta = {
+  title: "Foundations/ThemeProvider",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const Demo = () => {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  return (
+    <div className="space-y-3">
+      <p className="text-sm">
+        Theme: <strong>{theme}</strong> (resolved: {resolvedTheme})
+      </p>
+      <div className="flex gap-2">
+        <Button variant={theme === "light" ? "primary" : "outline"} onClick={() => setTheme("light")}>
+          Light
+        </Button>
+        <Button variant={theme === "dark" ? "primary" : "outline"} onClick={() => setTheme("dark")}>
+          Dark
+        </Button>
+        <Button variant={theme === "system" ? "primary" : "outline"} onClick={() => setTheme("system")}>
+          System
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        The host frontend wraps the app in <code>ThemeProvider</code>; plugins
+        inherit it for free.
+      </p>
+    </div>
+  );
+};
+
+export const Switcher: Story = { render: () => <Demo /> };

package/stories/Toast.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import { useToast } from "../src/components/ToastProvider";
+
+const meta: Meta = {
+  title: "Components/Feedback/Toast",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const Demo = () => {
+  const toast = useToast();
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button onClick={() => toast.success("Saved successfully.")}>
+        Success
+      </Button>
+      <Button variant="outline" onClick={() => toast.info("Reload to see updates.")}>
+        Info
+      </Button>
+      <Button variant="outline" onClick={() => toast.warning("Token expires in 24h.")}>
+        Warning
+      </Button>
+      <Button variant="destructive" onClick={() => toast.error("Probe failed.")}>
+        Error
+      </Button>
+    </div>
+  );
+};
+
+export const Triggers: Story = { render: () => <Demo /> };

package/stories/Toggle.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Toggle } from "../src/components/Toggle";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Components/Inputs/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+const InteractiveToggle = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="flex items-center gap-3">
+      <Toggle
+        checked={checked}
+        onCheckedChange={setChecked}
+        aria-label="Enable feature"
+      />
+      <span className="text-sm">{checked ? "Enabled" : "Disabled"}</span>
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveToggle />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Toggle
+      checked
+      disabled
+      onCheckedChange={() => {
+        /* readonly */
+      }}
+      aria-label="Read-only toggle"
+    />
+  ),
+};

package/stories/Tooltip.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "../src/components/Tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Overlays/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Hover: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <span className="text-sm">Probe interval</span>
+      <Tooltip content="How frequently this check runs against its target." />
+    </div>
+  ),
+};

package/stories/UserMenu.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LogOut, Settings } from "lucide-react";
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "../src/components/Menu";
+import { UserMenu } from "../src/components/UserMenu";
+
+const meta: Meta<typeof UserMenu> = {
+  title: "Components/Navigation/UserMenu",
+  component: UserMenu,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof UserMenu>;
+
+export const Default: Story = {
+  args: {
+    user: { name: "Nico", email: "nico@example.com" },
+  },
+  render: (args) => (
+    <UserMenu {...args}>
+      <DropdownMenuLabel>{args.user.email}</DropdownMenuLabel>
+      <DropdownMenuItem icon={<Settings className="h-4 w-4" />}>
+        Settings
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem icon={<LogOut className="h-4 w-4" />}>
+        Sign out
+      </DropdownMenuItem>
+    </UserMenu>
+  ),
+};