@checkstack/ui 1.8.0 → 1.8.1

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>
+  ),
+};

package/stories/Checkbox.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Checkbox } from "../src/components/Checkbox";
+import { Label } from "../src/components/Label";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Inputs/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+const Interactive = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox
+        id="cb"
+        checked={checked}
+        onCheckedChange={setChecked}
+      />
+      <Label htmlFor="cb">I agree</Label>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Interactive /> };
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox
+        id="cb-d"
+        checked
+        disabled
+        onChange={() => {
+          /* noop */
+        }}
+      />
+      <Label htmlFor="cb-d">Disabled (checked)</Label>
+    </div>
+  ),
+};

package/stories/CodeEditor.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { CodeEditor } from "../src/components/CodeEditor";
+
+const meta: Meta<typeof CodeEditor> = {
+  title: "Components/Inputs/CodeEditor",
+  component: CodeEditor,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+const Demo = ({
+  language,
+  initial,
+}: {
+  language: "json" | "yaml" | "javascript";
+  initial: string;
+}) => {
+  const [value, setValue] = useState(initial);
+  return (
+    <CodeEditor
+      value={value}
+      onChange={setValue}
+      language={language}
+      minHeight="280px"
+    />
+  );
+};
+
+export const Json: Story = {
+  render: () => (
+    <Demo
+      language="json"
+      initial={`{
+  "url": "https://api.example.com/health",
+  "timeoutMs": 5000
+}`}
+    />
+  ),
+};
+
+export const Yaml: Story = {
+  render: () => (
+    <Demo
+      language="yaml"
+      initial={`url: https://api.example.com/health
+timeoutMs: 5000
+assertions:
+  - status: 200`}
+    />
+  ),
+};
+
+export const JavaScript: Story = {
+  render: () => (
+    <Demo
+      language="javascript"
+      initial={`// Custom assertion
+export default async function check({ fetch }) {
+  const res = await fetch("https://example.com");
+  return res.status === 200;
+}`}
+    />
+  ),
+};

package/stories/ColorPicker.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { ColorPicker } from "../src/components/ColorPicker";
+
+const meta: Meta<typeof ColorPicker> = {
+  title: "Components/Inputs/ColorPicker",
+  component: ColorPicker,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+const Demo = () => {
+  const [color, setColor] = useState("#7c3aed");
+  return (
+    <div className="space-y-3 max-w-sm">
+      <ColorPicker value={color} onChange={setColor} />
+      <p className="text-sm text-muted-foreground">Selected: <code>{color}</code></p>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/CommandPalette.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CommandPalette } from "../src/components/CommandPalette";
+
+const meta: Meta<typeof CommandPalette> = {
+  title: "Components/Navigation/CommandPalette",
+  component: CommandPalette,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandPalette>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <CommandPalette
+        onClick={() => {
+          /* open palette */
+        }}
+      />
+    </div>
+  ),
+};
+
+export const CustomPlaceholder: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <CommandPalette
+        placeholder="Find a health check, satellite, or runbook…"
+        onClick={() => {
+          /* open palette */
+        }}
+      />
+    </div>
+  ),
+};

package/stories/ConfirmationModal.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../src/components/Button";
+import { ConfirmationModal } from "../src/components/ConfirmationModal";
+
+const meta: Meta<typeof ConfirmationModal> = {
+  title: "Components/Overlays/ConfirmationModal",
+  component: ConfirmationModal,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+
+const Demo = ({ variant }: { variant: "danger" | "warning" | "info" }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button
+        variant={variant === "danger" ? "destructive" : "primary"}
+        onClick={() => setOpen(true)}
+      >
+        Open {variant} modal
+      </Button>
+      <ConfirmationModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+        title="Delete satellite?"
+        message="This will revoke its token and delete recorded health-check history."
+        confirmText="Delete"
+        variant={variant}
+      />
+    </>
+  );
+};
+
+export const Danger: Story = { render: () => <Demo variant="danger" /> };
+export const Warning: Story = { render: () => <Demo variant="warning" /> };
+export const Info: Story = { render: () => <Demo variant="info" /> };

package/stories/DateRangeFilter.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DateRangeFilter,
+  type DateRange,
+  getDefaultDateRange,
+} from "../src/components/DateRangeFilter";
+
+const meta: Meta<typeof DateRangeFilter> = {
+  title: "Components/Inputs/DateRangeFilter",
+  component: DateRangeFilter,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DateRangeFilter>;
+
+const Demo = () => {
+  const [range, setRange] = useState<DateRange>(getDefaultDateRange());
+  return (
+    <div className="space-y-3">
+      <DateRangeFilter value={range} onChange={setRange} />
+      <p className="text-xs text-muted-foreground">
+        {range.startDate.toISOString()} → {range.endDate.toISOString()}
+      </p>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/DateTimePicker.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { DateTimePicker } from "../src/components/DateTimePicker";
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: "Components/Inputs/DateTimePicker",
+  component: DateTimePicker,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DateTimePicker>;
+
+const Demo = () => {
+  const [value, setValue] = useState<Date | undefined>(new Date());
+  return (
+    <div className="space-y-3 max-w-md">
+      <DateTimePicker value={value} onChange={setValue} />
+      <p className="text-xs text-muted-foreground">
+        {value ? value.toISOString() : "no date"}
+      </p>
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/Dialog.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../src/components/Dialog";
+
+const meta: Meta = {
+  title: "Components/Overlays/Dialog",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit display name</DialogTitle>
+          <DialogDescription>
+            Renaming a system updates how it appears across all dashboards.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4 text-sm text-muted-foreground">
+          Form contents go here.
+        </div>
+        <DialogFooter>
+          <Button variant="ghost">Cancel</Button>
+          <Button>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const LargeSize: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open large dialog</Button>
+      </DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>Large dialog</DialogTitle>
+          <DialogDescription>
+            Use <code>size=&quot;lg&quot;</code> for forms with many fields.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4 text-sm text-muted-foreground">…</div>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/stories/DynamicForm.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DynamicForm,
+  KeyValueEditor,
+  type JsonSchema,
+  type KeyValuePair,
+} from "../src/components/DynamicForm";
+
+const meta: Meta = {
+  title: "Components/Forms/DynamicForm",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const schema: JsonSchema = {
+  type: "object",
+  required: ["url", "method"],
+  properties: {
+    url: { type: "string", title: "URL", format: "uri", description: "Endpoint to probe" },
+    method: {
+      type: "string",
+      title: "Method",
+      enum: ["GET", "POST", "HEAD"],
+      default: "GET",
+    },
+    timeoutMs: {
+      type: "number",
+      title: "Timeout (ms)",
+      default: 5000,
+      minimum: 100,
+      maximum: 60_000,
+    },
+    followRedirects: {
+      type: "boolean",
+      title: "Follow redirects",
+      default: true,
+    },
+    apiKey: {
+      type: "string",
+      title: "API key",
+      "x-secret": true,
+    },
+  },
+};
+
+const Demo = () => {
+  const [value, setValue] = useState<Record<string, unknown>>({});
+  const [valid, setValid] = useState(false);
+  return (
+    <div className="max-w-xl space-y-4">
+      <DynamicForm
+        schema={schema}
+        value={value}
+        onChange={setValue}
+        onValidChange={setValid}
+      />
+      <p className="text-xs text-muted-foreground">
+        Valid: <strong>{String(valid)}</strong>
+      </p>
+      <pre className="text-xs bg-muted/50 rounded p-3 overflow-auto">
+        {JSON.stringify(value, undefined, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export const FromSchema: Story = { render: () => <Demo /> };
+
+const KvDemo = () => {
+  const [pairs, setPairs] = useState<KeyValuePair[]>([
+    { key: "Authorization", value: "Bearer ***" },
+    { key: "X-Trace-Id", value: "abc-123" },
+  ]);
+  return (
+    <div className="max-w-xl">
+      <KeyValueEditor id="headers" value={pairs} onChange={setPairs} />
+    </div>
+  );
+};
+
+export const KeyValue: Story = { render: () => <KvDemo /> };

package/stories/DynamicIcon.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DynamicIcon } from "../src/components/DynamicIcon";
+
+const meta: Meta<typeof DynamicIcon> = {
+  title: "Components/Display/DynamicIcon",
+  component: DynamicIcon,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DynamicIcon>;
+
+export const Named: Story = {
+  args: { name: "HeartPulse", className: "h-8 w-8 text-primary" },
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <DynamicIcon name={undefined} className="h-6 w-6" />
+      <span className="text-sm text-muted-foreground">
+        Falls back to <code>Settings</code> when no name is given.
+      </span>
+    </div>
+  ),
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <div className="grid grid-cols-6 gap-4">
+      {[
+        "AlertCircle",
+        "Activity",
+        "Bell",
+        "Cloud",
+        "Database",
+        "Heart",
+        "ShieldCheck",
+        "Server",
+        "Terminal",
+        "Settings",
+        "Wrench",
+        "Zap",
+      ].map((name) => (
+        <div key={name} className="flex flex-col items-center gap-2 text-xs">
+          <DynamicIcon name={name as never} className="h-6 w-6" />
+          <span className="text-muted-foreground">{name}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/stories/EditableText.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { EditableText } from "../src/components/EditableText";
+
+const meta: Meta<typeof EditableText> = {
+  title: "Components/Inputs/EditableText",
+  component: EditableText,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EditableText>;
+
+const Demo = () => {
+  const [value, setValue] = useState("My system");
+  return (
+    <div className="max-w-sm">
+      <EditableText
+        value={value}
+        onSave={async (next) => {
+          await new Promise((r) => setTimeout(r, 300));
+          setValue(next);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };

package/stories/Feedback.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Inbox } from "lucide-react";
+import { Button } from "../src/components/Button";
+import { EmptyState } from "../src/components/EmptyState";
+import { HealthBadge } from "../src/components/HealthBadge";
+import { LoadingSpinner } from "../src/components/LoadingSpinner";
+
+const meta: Meta = {
+  title: "Components/Feedback/Status & Empty",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const HealthBadges: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <HealthBadge status="healthy" />
+      <HealthBadge status="degraded" />
+      <HealthBadge status="unhealthy" />
+      <HealthBadge status="healthy" variant="compact" />
+    </div>
+  ),
+};
+
+export const Spinner: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <LoadingSpinner />
+      <span className="text-sm text-muted-foreground">Loading…</span>
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <EmptyState
+      title="No health checks yet"
+      description="Plugins can register checks at runtime. Create one to see it here."
+      icon={<Inbox className="h-10 w-10" />}
+      actions={<Button>Create check</Button>}
+    />
+  ),
+};

package/stories/IDELayout.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { File, Folder } from "lucide-react";
+import {
+  IDELayout,
+  IDETreeNode,
+  IDETreeSection,
+  type ValidationIssue,
+} from "../src/components/IDELayout";
+
+const meta: Meta = {
+  title: "Components/Layout/IDELayout",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const issues: ValidationIssue[] = [
+  { nodeId: "node-2", message: "URL is required" },
+];
+
+const Demo = () => {
+  const [selected, setSelected] = useState("node-1");
+  return (
+    <IDELayout
+      issues={issues}
+      onIssueClick={setSelected}
+      tree={
+        <div className="py-2">
+          <IDETreeSection label="Check items" />
+          <IDETreeNode
+            nodeId="node-1"
+            label="api.checkstack.io"
+            icon={File}
+            selected={selected === "node-1"}
+            onClick={() => setSelected("node-1")}
+            issues={issues}
+          />
+          <IDETreeNode
+            nodeId="node-2"
+            label="db.primary"
+            icon={File}
+            selected={selected === "node-2"}
+            onClick={() => setSelected("node-2")}
+            issues={issues}
+          />
+          <IDETreeSection label="Permissions" />
+          <IDETreeNode
+            nodeId="node-3"
+            label="readers"
+            icon={Folder}
+            selected={selected === "node-3"}
+            onClick={() => setSelected("node-3")}
+          />
+        </div>
+      }
+      panel={
+        <div className="p-6">
+          <h3 className="font-semibold">Editing: {selected}</h3>
+          <p className="text-sm text-muted-foreground mt-2">
+            The right panel renders whatever editor is appropriate for the
+            selected tree node.
+          </p>
+        </div>
+      }
+    />
+  );
+};
+
+export const Default: Story = { render: () => <Demo /> };