@protolabsai/ui 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
   "dependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@protolabsai/design": "0.2.0"
+    "@protolabsai/design": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/Data.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Badge, ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./index";
+
+const meta: Meta = { title: "Components/Data" };
+export default meta;
+type Story = StoryObj;
+
+const ROWS = [
+  { agent: "streaming-router", status: "success", calls: 1284, p95: "180ms" },
+  { agent: "voice-intake", status: "warning", calls: 642, p95: "910ms" },
+  { agent: "polyglot-bridge", status: "error", calls: 17, p95: "—" },
+  { agent: "corpus-indexer", status: "info", calls: 3021, p95: "44ms" },
+] as const;
+
+export const DataTable: Story = {
+  render: () => {
+    function Demo() {
+      const [selected, setSelected] = useState("streaming-router");
+      return (
+        <Table>
+          <THead>
+            <Tr>
+              <Th>agent</Th>
+              <Th>status</Th>
+              <Th>calls</Th>
+              <Th>p95</Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {ROWS.map((r) => (
+              <Tr key={r.agent} selected={r.agent === selected} onClick={() => setSelected(r.agent)}>
+                <Td style={{ fontFamily: "var(--pl-font-mono)" }}>{r.agent}</Td>
+                <Td>
+                  <Badge status={r.status}>{r.status}</Badge>
+                </Td>
+                <Td>{r.calls.toLocaleString()}</Td>
+                <Td>{r.p95}</Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const StatusDots: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 12 }}>
+      <StatusDot status="success" pulse label="connected" />
+      <StatusDot status="warning" label="degraded" />
+      <StatusDot status="error" pulse label="offline" />
+      <StatusDot status="info" label="review" />
+      <StatusDot label="idle" />
+    </div>
+  ),
+};
+
+export const Spinners: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
+      <Spinner size={12} />
+      <Spinner size={16} />
+      <Spinner size={24} />
+      <Spinner size={32} />
+    </div>
+  ),
+};
+
+export const Scroll: Story = {
+  render: () => (
+    <ScrollArea style={{ height: 160, maxWidth: 360, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 12 }}>
+      <div style={{ display: "grid", gap: 8 }}>
+        {Array.from({ length: 24 }, (_, i) => (
+          <div key={i} style={{ fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)" }}>
+            event #{i + 1} — dispatched
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

package/src/Forms.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Checkbox, Field, Input, Select, Switch, Textarea } from "./index";
+
+const meta: Meta = { title: "Components/Forms" };
+export default meta;
+type Story = StoryObj;
+
+export const Inputs: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 16, maxWidth: 360 }}>
+      <Field label="Inline field (label + input)" value="streaming-router" />
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Standalone Input
+        </span>
+        <Input placeholder="e.g. claude-opus-4-8" />
+      </label>
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Select
+        </span>
+        <Select defaultValue="a2a">
+          <option value="in-process">in-process</option>
+          <option value="a2a">remote A2A</option>
+          <option value="fn">function handler</option>
+        </Select>
+      </label>
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Textarea
+        </span>
+        <Textarea placeholder="System prompt…" />
+      </label>
+      <Input placeholder="disabled" disabled />
+    </div>
+  ),
+};
+
+export const Toggles: Story = {
+  render: () => {
+    function Demo() {
+      const [stream, setStream] = useState(true);
+      const [trace, setTrace] = useState(false);
+      const [a, setA] = useState(true);
+      const [b, setB] = useState(false);
+      return (
+        <div style={{ display: "grid", gap: 16 }}>
+          <Switch checked={stream} onCheckedChange={setStream} label="Stream responses" />
+          <Switch checked={trace} onCheckedChange={setTrace} label="Verbose tracing" />
+          <Switch checked={false} disabled label="Locked (disabled)" />
+          <Checkbox checked={a} onCheckedChange={setA} label="Capture corpus pair" />
+          <Checkbox checked={b} onCheckedChange={setB} label="Pin to latest model" />
+          <Checkbox checked disabled label="Required (disabled)" />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Foundations.stories.tsx

@@ -5,8 +5,8 @@ export default meta;
 type Story = StoryObj;
 
 const COLORS: Array<[string, string]> = [
-  ["Brand violet", "--pl-color-brand-violet"],
-  ["Violet light", "--pl-color-brand-violet-light"],
+  ["Brand lavender", "--pl-color-brand-lavender"],
+  ["Lavender light", "--pl-color-brand-lavender-light"],
   ["Indigo", "--pl-color-brand-indigo"],
   ["Indigo bright", "--pl-color-brand-indigo-bright"],
   ["Ground", "--pl-color-bg"],
@@ -58,7 +58,7 @@ export const Geometry: Story = {
     <div style={{ display: "flex", gap: 16, alignItems: "flex-end", color: "var(--pl-color-fg-muted)", fontFamily: "var(--pl-font-mono)", fontSize: 11 }}>
       {["1", "2", "3", "4", "6", "8", "12"].map((s) => (
         <div key={s} style={{ textAlign: "center" }}>
-          <div style={{ width: `var(--pl-space-${s})`, height: `var(--pl-space-${s})`, background: "var(--pl-color-brand-violet)", borderRadius: "var(--pl-radius)" }} />
+          <div style={{ width: `var(--pl-space-${s})`, height: `var(--pl-space-${s})`, background: "var(--pl-color-brand-lavender)", borderRadius: "var(--pl-radius)" }} />
           <div style={{ marginTop: 6 }}>space-{s}</div>
         </div>
       ))}

package/src/Overlays.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Button,
+  ConfirmDialog,
+  Dialog,
+  Drawer,
+  Field,
+  Tooltip,
+  ToastProvider,
+  useToast,
+} from "./index";
+
+const meta: Meta = { title: "Components/Overlays" };
+export default meta;
+type Story = StoryObj;
+
+export const Modal: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <Button variant="primary" onClick={() => setOpen(true)}>
+            Open dialog
+          </Button>
+          <Dialog
+            open={open}
+            onClose={() => setOpen(false)}
+            title="Rename workflow"
+            footer={
+              <>
+                <Button onClick={() => setOpen(false)}>Cancel</Button>
+                <Button variant="primary" onClick={() => setOpen(false)}>
+                  Save
+                </Button>
+              </>
+            }
+          >
+            <Field label="Name" value="streaming-router" />
+            <p style={{ marginTop: 12 }}>Esc, the × button, or a backdrop click all close it. Focus is trapped inside.</p>
+          </Dialog>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Confirm: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false);
+      const [deleted, setDeleted] = useState(false);
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>Delete agent…</Button>
+          {deleted && <span style={{ marginLeft: 12, fontFamily: "var(--pl-font-mono)", fontSize: 12 }}>deleted.</span>}
+          <ConfirmDialog
+            open={open}
+            title="Delete this agent?"
+            destructive
+            confirmLabel="Delete"
+            onConfirm={() => {
+              setDeleted(true);
+              setOpen(false);
+            }}
+            onClose={() => setOpen(false)}
+          >
+            This removes the agent and its run history. This cannot be undone.
+          </ConfirmDialog>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const SidePanel: Story = {
+  render: () => {
+    function Demo() {
+      const [side, setSide] = useState<"left" | "right" | null>(null);
+      return (
+        <div style={{ display: "flex", gap: 8 }}>
+          <Button onClick={() => setSide("left")}>Open left</Button>
+          <Button onClick={() => setSide("right")}>Open right</Button>
+          <Drawer open={side != null} side={side ?? "right"} title="Event detail" onClose={() => setSide(null)}>
+            <p>Slides in from the {side}. Same dismiss + focus-trap behavior as Dialog.</p>
+          </Drawer>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Toasts: Story = {
+  render: () => {
+    function Trigger() {
+      const toast = useToast();
+      return (
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          <Button onClick={() => toast({ message: "Saved." })}>neutral</Button>
+          <Button onClick={() => toast({ tone: "success", title: "deployed", message: "Image is live on the studio stack." })}>
+            success
+          </Button>
+          <Button onClick={() => toast({ tone: "warning", title: "heads up", message: "main is protected — open a PR." })}>
+            warning
+          </Button>
+          <Button onClick={() => toast({ tone: "error", title: "failed", message: "Build red on the sixth attempt.", duration: 8000 })}>
+            error
+          </Button>
+        </div>
+      );
+    }
+    return (
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>
+    );
+  },
+};
+
+export const Tooltips: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 40, padding: 60, justifyContent: "center" }}>
+      <Tooltip label="on top">
+        <Button>top</Button>
+      </Tooltip>
+      <Tooltip label="on the bottom" side="bottom">
+        <Button>bottom</Button>
+      </Tooltip>
+      <Tooltip label="to the left" side="left">
+        <Button>left</Button>
+      </Tooltip>
+      <Tooltip label="to the right" side="right">
+        <Button>right</Button>
+      </Tooltip>
+    </div>
+  ),
+};