@checkstack/ui 1.8.0 → 1.8.2

package/stories/PluginConfigForm.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  PluginConfigForm,
+  type PluginOption,
+} from "../src/components/PluginConfigForm";
+
+const meta: Meta = {
+  title: "Components/Forms/PluginConfigForm",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const plugins: PluginOption[] = [
+  {
+    id: "http-probe",
+    displayName: "HTTP Probe",
+    description: "Probes a public HTTP endpoint and asserts a 2xx response.",
+    configSchema: {
+      type: "object",
+      required: ["url"],
+      properties: {
+        url: { type: "string", title: "URL", format: "uri" },
+        timeoutMs: { type: "number", title: "Timeout (ms)", default: 5000 },
+      },
+    },
+  },
+  {
+    id: "tcp-probe",
+    displayName: "TCP Probe",
+    description: "Opens a TCP connection to verify the port is reachable.",
+    configSchema: {
+      type: "object",
+      required: ["host", "port"],
+      properties: {
+        host: { type: "string", title: "Host" },
+        port: { type: "number", title: "Port" },
+      },
+    },
+  },
+];
+
+const Demo = () => {
+  const [pluginId, setPluginId] = useState("http-probe");
+  const [config, setConfig] = useState<Record<string, unknown>>({});
+  return (
+    <div className="max-w-xl">
+      <PluginConfigForm
+        label="Strategy"
+        plugins={plugins}
+        selectedPluginId={pluginId}
+        onPluginChange={(id) => {
+          setPluginId(id);
+          setConfig({});
+        }}
+        config={config}
+        onConfigChange={setConfig}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/Popover.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../src/components/Popover";
+
+const meta: Meta = {
+  title: "Components/Overlays/Popover",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-4">
+        <h4 className="font-medium leading-none mb-2">Filter</h4>
+        <p className="text-sm text-muted-foreground">
+          Use this for filter chips, info hovers, or quick edits.
+        </p>
+      </PopoverContent>
+    </Popover>
+  ),
+};

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 /> };