agentic-ds-kit 0.1.0 → 0.2.0

package/ui/patterns/EmptyFirstRunPattern/EmptyFirstRunPattern.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { useId, useState, type FormEvent } from "react";
-import { Button } from "../../Button";
-import { ButtonGroup } from "../../ButtonGroup";
-import { Empty } from "../../Empty";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Modal } from "../../Modal";
-import { PageHeader } from "../../PageHeader";
-import type { PageHeaderProps } from "../../PageHeader";
-import { Toast } from "../../Toast";
-
-export interface EmptyFirstRunPatternProps {
-  breadcrumbs?: PageHeaderProps["breadcrumbs"];
-  onCreate?: (payload: { title: string }) => void;
-}
-
-export function EmptyFirstRunPattern({ breadcrumbs, onCreate }: EmptyFirstRunPatternProps) {
-  const uid = useId();
-  const titleId = `${uid}-title`;
-  const [open, setOpen] = useState(false);
-  const [title, setTitle] = useState("");
-  const [titleError, setTitleError] = useState<string | undefined>();
-  const [toastOpen, setToastOpen] = useState(false);
-  const [createdTitle, setCreatedTitle] = useState("");
-
-  function close() {
-    setOpen(false);
-    setTitleError(undefined);
-  }
-
-  function create() {
-    const nextTitle = title.trim();
-    if (!nextTitle) {
-      setTitleError("Enter a study name.");
-      return;
-    }
-
-    onCreate?.({ title: nextTitle });
-    setCreatedTitle(nextTitle);
-    setTitle("");
-    setTitleError(undefined);
-    setOpen(false);
-    setToastOpen(true);
-  }
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    create();
-  }
-
-  return (
-    <div className="layout-canvas layout-canvas--sticky-header">
-      <div className="layout-header">
-        <PageHeader
-          title="User research"
-          subtitle="Interview notes and findings for Sprint 24."
-          breadcrumbs={breadcrumbs}
-        />
-      </div>
-      <div className="layout-content">
-        <Empty
-          title="No studies yet"
-          description="Add the first study so launch comments have evidence."
-          icon="User"
-          outlined
-          actions={
-            <Button variant="primary" size="md" onClick={() => setOpen(true)}>
-              New study
-            </Button>
-          }
-        />
-      </div>
-      <Modal
-        open={open}
-        title="New study"
-        description="Name the study. Notes can come later."
-        size="md"
-        onClose={close}
-        footer={
-          <ButtonGroup ariaLabel="Study actions">
-            <Button variant="secondary" size="md" onClick={close}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="md" onClick={create}>
-              Create study
-            </Button>
-          </ButtonGroup>
-        }
-      >
-        <form onSubmit={handleSubmit}>
-          <Field
-            label="Title"
-            htmlFor={titleId}
-            hint="Something the team will recognize"
-            error={titleError}
-          >
-            <Input
-              id={titleId}
-              iconStart="Search"
-              placeholder="Launch interview round"
-              value={title}
-              onChange={(value) => {
-                setTitle(value);
-                if (titleError) setTitleError(undefined);
-              }}
-            />
-          </Field>
-        </form>
-      </Modal>
-      <Toast
-        open={toastOpen}
-        title="Study added"
-        description={
-          createdTitle ? `We'll keep “${createdTitle}” in User research.` : undefined
-        }
-        status="success"
-        duration={3000}
-        onClose={() => setToastOpen(false)}
-        onOpenChange={setToastOpen}
-      />
-    </div>
-  );
-}

package/ui/patterns/EmptyFirstRunPattern/index.ts

@@ -1,2 +0,0 @@
-export { EmptyFirstRunPattern } from "./EmptyFirstRunPattern";
-export type { EmptyFirstRunPatternProps } from "./EmptyFirstRunPattern";

package/ui/patterns/InboxPattern/InboxPattern.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Avatar } from "../../Avatar";
-import { Badge } from "../../Badge";
-import { Button } from "../../Button";
-import { Cell } from "../../Cell";
-import { Empty } from "../../Empty";
-import { PageHeader } from "../../PageHeader";
-import type { PageHeaderProps } from "../../PageHeader";
-import { Scoreboard } from "../../Scoreboard";
-import { Section } from "../../Section";
-import { Table } from "../../Table";
-import { Tabs } from "../../Tabs";
-import { Toast } from "../../Toast";
-import { filterMessages, INBOX, type InboxMessage } from "./inbox-data";
-import { InboxReplyDrawer } from "./InboxReplyDrawer";
-import styles from "./InboxPattern.module.css";
-
-const COLUMNS = [
-  { key: "from", header: "From", emphasis: true },
-  { key: "subject", header: "Subject" },
-  { key: "kind", header: "Type" },
-  { key: "when", header: "When" },
-  { key: "open", header: "" },
-];
-
-function InboxTable({
-  messages,
-  onOpen,
-}: {
-  messages: InboxMessage[];
-  onOpen: (id: string) => void;
-}) {
-  return (
-    <Table
-      caption="Inbox"
-      size="sm"
-      emptyLabel="No messages in this filter."
-      columns={COLUMNS}
-      rows={messages.map((item) => ({
-        from: <Cell type="avatar" size="sm" name={item.from} src={item.fromSrc} label={item.from} />,
-        subject: item.subject,
-        kind: <Badge tone={item.kindTone} size="sm">{item.kind}</Badge>,
-        when: item.when,
-        open: (
-          <Button variant="tertiary" size="sm" onClick={() => onOpen(item.id)}>
-            Open
-          </Button>
-        ),
-      }))}
-    />
-  );
-}
-
-export interface InboxPatternProps {
-  breadcrumbs?: PageHeaderProps["breadcrumbs"];
-}
-
-export function InboxPattern({ breadcrumbs }: InboxPatternProps) {
-  const [messages, setMessages] = useState(INBOX);
-  const [tab, setTab] = useState("all");
-  const [selectedId, setSelectedId] = useState<string | null>(INBOX[0]?.id ?? null);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [toastOpen, setToastOpen] = useState(false);
-
-  const selected = messages.find((item) => item.id === selectedId) ?? null;
-  const unread = messages.filter((item) => item.unread).length;
-
-  useEffect(() => {
-    const next = filterMessages(messages, tab);
-    if (selectedId && next.some((item) => item.id === selectedId)) return;
-    setSelectedId(next[0]?.id ?? null);
-    setDrawerOpen(false);
-  }, [selectedId, tab, messages]);
-
-  function archive(id: string) {
-    setMessages((current) => current.filter((item) => item.id !== id));
-    setDrawerOpen(false);
-  }
-
-  function openMessage(id: string) {
-    setSelectedId(id);
-    setDrawerOpen(true);
-  }
-
-  function sendReply() {
-    if (!selected) return;
-    setMessages((current) =>
-      current.map((item) => (item.id === selected.id ? { ...item, unread: false } : item)),
-    );
-    setToastOpen(true);
-  }
-
-  return (
-    <div className="layout-canvas layout-canvas--sticky-header">
-      <div className="layout-header">
-        <PageHeader
-          title="Inbox"
-          subtitle="Replies, mentions, and requests waiting on you."
-          breadcrumbs={breadcrumbs}
-        />
-      </div>
-      <div className="layout-content">
-        <Section title="At a glance">
-          <Scoreboard
-            className="layout-metrics layout-metrics--fixed-4"
-            aria-label="Inbox this week"
-            items={[
-              { label: "Unread", value: String(unread), delta: `+${unread}`, trend: "up" as const, hint: "need a look", size: "lg" as const, badge: "Live", badgeTone: "danger" as const },
-              { label: "Mentions", value: String(messages.filter((item) => item.kind === "Mention").length), delta: "+1", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "You", badgeTone: "brand" as const },
-              { label: "Requests", value: String(messages.filter((item) => item.kind === "Request").length), delta: "+2", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "Review", badgeTone: "warning" as const },
-              { label: "Open", value: String(messages.length), delta: "0", trend: "flat" as const, hint: "in inbox", size: "lg" as const, badge: "Sprint", badgeTone: "info" as const },
-            ]}
-          />
-        </Section>
-        <Section title="Messages" description={`${unread} unread`}>
-          <Tabs
-            ariaLabel="Inbox type"
-            variant="line"
-            size="md"
-            value={tab}
-            onChange={setTab}
-            items={[
-              { id: "all", label: "All", content: <InboxTable messages={filterMessages(messages, "all")} onOpen={openMessage} /> },
-              { id: "unread", label: "Unread", content: <InboxTable messages={filterMessages(messages, "unread")} onOpen={openMessage} /> },
-              { id: "mentions", label: "Mentions", content: <InboxTable messages={filterMessages(messages, "mentions")} onOpen={openMessage} /> },
-              { id: "requests", label: "Requests", content: <InboxTable messages={filterMessages(messages, "requests")} onOpen={openMessage} /> },
-            ]}
-          />
-        </Section>
-        <Section
-          title={selected?.subject ?? "Message"}
-          description={selected ? `${selected.from} · ${selected.when}` : "Select a row"}
-          actions={
-            selected ? (
-              <>
-                <Button variant="secondary" size="sm" onClick={() => archive(selected.id)}>
-                  Archive
-                </Button>
-                <Button
-                  variant={drawerOpen ? "secondary" : "primary"}
-                  size="sm"
-                  onClick={() => openMessage(selected.id)}
-                >
-                  Reply
-                </Button>
-              </>
-            ) : undefined
-          }
-        >
-          {selected ? (
-            <div className={styles.detail}>
-              <div className={styles.meta}>
-                <Avatar name={selected.from} src={selected.fromSrc} size="md" />
-                <div className={styles.copy}>
-                  <p className={styles.label}>From</p>
-                  <p className={styles.value}>{selected.from}</p>
-                </div>
-                <Badge tone={selected.kindTone}>{selected.kind}</Badge>
-              </div>
-              <p className={styles.body}>{selected.body}</p>
-            </div>
-          ) : (
-            <Empty
-              title="No message selected"
-              description="Open a row to read it here."
-              icon="Mail"
-              outlined
-            />
-          )}
-        </Section>
-      </div>
-      <InboxReplyDrawer
-        key={selected?.id ?? "none"}
-        message={selected}
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-        onSend={sendReply}
-      />
-      <Toast
-        open={toastOpen}
-        title="Reply sent"
-        description="It will show up in the thread."
-        status="success"
-        duration={3000}
-        onClose={() => setToastOpen(false)}
-        onOpenChange={setToastOpen}
-      />
-    </div>
-  );
-}

package/ui/patterns/InboxPattern/InboxReplyDrawer.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { useId, useState, type FormEvent } from "react";
-import { Button } from "../../Button";
-import { Drawer } from "../../Drawer";
-import { Field } from "../../Field";
-import { FieldSet } from "../../FieldSet";
-import { Input } from "../../Input";
-import { Textarea } from "../../Textarea";
-import type { InboxMessage } from "./inbox-data";
-
-export function InboxReplyDrawer({
-  message,
-  open,
-  onClose,
-  onSend,
-}: {
-  message: InboxMessage | null;
-  open: boolean;
-  onClose: () => void;
-  onSend: () => void;
-}) {
-  const baseId = useId();
-  const toId = `${baseId}-to`;
-  const subjectId = `${baseId}-subject`;
-  const replyId = `${baseId}-reply`;
-  const [error, setError] = useState<string | undefined>();
-
-  function close() {
-    setError(undefined);
-    onClose();
-  }
-
-  function send() {
-    const reply = (document.getElementById(replyId) as HTMLTextAreaElement | null)?.value.trim() ?? "";
-    if (!reply) {
-      setError("Write a reply before sending.");
-      return;
-    }
-    onSend();
-    setError(undefined);
-    onClose();
-  }
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    send();
-  }
-
-  return (
-    <Drawer
-      open={open && Boolean(message)}
-      title={message ? `Reply to ${message.from}` : "Reply"}
-      description={message?.subject}
-      onClose={close}
-      footer={
-        message ? (
-          <>
-            <Button variant="primary" block onClick={send}>
-              Send reply
-            </Button>
-            <Button variant="secondary" block onClick={close}>
-              Cancel
-            </Button>
-          </>
-        ) : null
-      }
-    >
-      {message ? (
-        <form onSubmit={handleSubmit}>
-          <FieldSet key={message.id} legend="Reply" description="This goes back to the thread.">
-            <Field label="To" htmlFor={toId}>
-              <Input id={toId} name="to" defaultValue={message.from} />
-            </Field>
-            <Field label="Subject" htmlFor={subjectId}>
-              <Input id={subjectId} name="subject" defaultValue={`Re: ${message.subject}`} />
-            </Field>
-            <Field
-              label="Message"
-              htmlFor={replyId}
-              hint="Keep it short. They already have the thread."
-              error={error}
-            >
-              <Textarea
-                id={replyId}
-                name="reply"
-                rows={6}
-                placeholder="Write a reply..."
-                error={Boolean(error)}
-              />
-            </Field>
-          </FieldSet>
-        </form>
-      ) : null}
-    </Drawer>
-  );
-}

package/ui/patterns/InboxPattern/inbox-data.ts

@@ -1,101 +0,0 @@
-import type { BadgeTone } from "../../Badge";
-
-export type InboxKind = "Comment" | "Mention" | "Request" | "Status" | "Alert";
-
-export interface InboxMessage {
-  id: string;
-  from: string;
-  fromSrc?: string;
-  subject: string;
-  body: string;
-  kind: InboxKind;
-  kindTone: BadgeTone;
-  when: string;
-  unread: boolean;
-}
-
-export const INBOX: InboxMessage[] = [
-  {
-    id: "maya-comment",
-    from: "Maya Chen",
-    fromSrc: "/faces/maya-chen.jpg",
-    subject: "Comments on Launch brief",
-    body: "Two notes on positioning. Close them before the freeze so copy can lock.",
-    kind: "Comment",
-    kindTone: "info",
-    when: "2h ago",
-    unread: true,
-  },
-  {
-    id: "qa-alert",
-    from: "Unassigned",
-    subject: "QA checklist is still blocked",
-    body: "No owner for 2 days. Assign someone before Thursday's review.",
-    kind: "Alert",
-    kindTone: "danger",
-    when: "4h ago",
-    unread: true,
-  },
-  {
-    id: "alex-reply",
-    from: "Alex Rivera",
-    fromSrc: "/faces/alex-rivera.jpg",
-    subject: "Replied on Support macros",
-    body: "Refund and delay macros are drafted. Escalation paths still need a pass.",
-    kind: "Comment",
-    kindTone: "info",
-    when: "5h ago",
-    unread: true,
-  },
-  {
-    id: "maya-mention",
-    from: "Maya Chen",
-    fromSrc: "/faces/maya-chen.jpg",
-    subject: "Mentioned you in Launch brief",
-    body: "Can you confirm the hero line before legal looks at the brief?",
-    kind: "Mention",
-    kindTone: "brand",
-    when: "Yesterday",
-    unread: true,
-  },
-  {
-    id: "jordan-status",
-    from: "Jordan Lee",
-    fromSrc: "/faces/jordan-lee.jpg",
-    subject: "Release notes moved to Ready",
-    body: "Changelog is drafted. Confirm the known-issues list before we tag.",
-    kind: "Status",
-    kindTone: "success",
-    when: "Yesterday",
-    unread: true,
-  },
-  {
-    id: "iris-request",
-    from: "Iris Okafor",
-    fromSrc: "/faces/iris-okafor.jpg",
-    subject: "Review User research",
-    body: "Five interviews are in. Need a read on the onboarding friction before Friday.",
-    kind: "Request",
-    kindTone: "warning",
-    when: "Mon",
-    unread: true,
-  },
-  {
-    id: "noah-request",
-    from: "Noah Williams",
-    fromSrc: "/faces/noah-williams.jpg",
-    subject: "Legal sign-off on QA",
-    body: "The last two device passes are still open. Legal will not sign until they close.",
-    kind: "Request",
-    kindTone: "warning",
-    when: "Mon",
-    unread: true,
-  },
-];
-
-export function filterMessages(messages: InboxMessage[], tab: string): InboxMessage[] {
-  if (tab === "unread") return messages.filter((item) => item.unread);
-  if (tab === "mentions") return messages.filter((item) => item.kind === "Mention");
-  if (tab === "requests") return messages.filter((item) => item.kind === "Request");
-  return messages;
-}

package/ui/patterns/InboxPattern/index.ts

@@ -1,2 +0,0 @@
-export { InboxPattern } from "./InboxPattern";
-export type { InboxPatternProps } from "./InboxPattern";

package/ui/patterns/InviteMembersPattern/InviteMembersPattern.tsx

@@ -1,148 +0,0 @@
-"use client";
-
-import { useId, useState, type FormEvent } from "react";
-import { AvatarGroup } from "../../AvatarGroup";
-import { Button } from "../../Button";
-import { ButtonGroup } from "../../ButtonGroup";
-import { Empty } from "../../Empty";
-import { Field } from "../../Field";
-import { FieldSet } from "../../FieldSet";
-import { Input } from "../../Input";
-import { Modal } from "../../Modal";
-import { PageHeader } from "../../PageHeader";
-import type { PageHeaderProps } from "../../PageHeader";
-import { RadioGroup } from "../../RadioGroup";
-import { Toast } from "../../Toast";
-
-const TEAM = [
-  { name: "Maya Chen", src: "/faces/maya-chen.jpg" },
-  { name: "Noah Williams", src: "/faces/noah-williams.jpg" },
-  { name: "Iris Okafor", src: "/faces/iris-okafor.jpg" },
-];
-
-const ROLE_OPTIONS = [
-  { value: "admin", label: "Admin" },
-  { value: "member", label: "Member" },
-  { value: "viewer", label: "Viewer" },
-];
-
-export interface InviteMembersPatternProps {
-  breadcrumbs?: PageHeaderProps["breadcrumbs"];
-  onInvite?: (payload: { email: string; role: string }) => void;
-}
-
-export function InviteMembersPattern({ breadcrumbs, onInvite }: InviteMembersPatternProps) {
-  const uid = useId();
-  const [open, setOpen] = useState(false);
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState("member");
-  const [emailError, setEmailError] = useState<string | undefined>();
-  const [toastOpen, setToastOpen] = useState(false);
-  const [sentTo, setSentTo] = useState("");
-
-  const emailId = `${uid}-email`;
-  const roleName = `${uid}-role`;
-
-  function close() {
-    setOpen(false);
-    setEmailError(undefined);
-  }
-
-  function send() {
-    const nextEmail = email.trim();
-    if (!nextEmail || !nextEmail.includes("@")) {
-      setEmailError("Enter a work email.");
-      return;
-    }
-
-    onInvite?.({ email: nextEmail, role });
-    setSentTo(nextEmail);
-    setEmail("");
-    setRole("member");
-    setEmailError(undefined);
-    setOpen(false);
-    setToastOpen(true);
-  }
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    send();
-  }
-
-  return (
-    <div className="layout-canvas layout-canvas--sticky-header">
-      <div className="layout-header">
-        <PageHeader
-          title="Invite members"
-          subtitle="Add people to this workspace so review comments have owners."
-          breadcrumbs={breadcrumbs}
-        />
-      </div>
-      <div className="layout-content">
-        <Empty
-          title="No pending invites"
-          description="Maya, Noah, and Iris are in this workspace. Three seats are open for design and QA."
-          media={<AvatarGroup ariaLabel="Current members" items={TEAM} max={3} />}
-          outlined
-          actions={
-            <Button variant="primary" size="md" onClick={() => setOpen(true)}>
-              Invite members
-            </Button>
-          }
-        />
-      </div>
-      <Modal
-        open={open}
-        title="Invite members"
-        description="Send an email invite. They join with the role you pick."
-        size="md"
-        onClose={close}
-        footer={
-          <ButtonGroup ariaLabel="Invite actions">
-            <Button variant="secondary" size="md" onClick={close}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="md" onClick={send}>
-              Send invite
-            </Button>
-          </ButtonGroup>
-        }
-      >
-        <form onSubmit={handleSubmit}>
-          <FieldSet legend="New member" description="They get access to Sprint 24 projects.">
-            <Field label="Email" htmlFor={emailId} hint="Work email they already use" error={emailError}>
-              <Input
-                id={emailId}
-                type="email"
-                iconStart="Mail"
-                placeholder="name@company.com"
-                value={email}
-                onChange={(value) => {
-                  setEmail(value);
-                  if (emailError) setEmailError(undefined);
-                }}
-              />
-            </Field>
-            <RadioGroup
-              name={roleName}
-              legend="Role"
-              orientation="horizontal"
-              options={ROLE_OPTIONS}
-              value={role}
-              onChange={setRole}
-            />
-          </FieldSet>
-        </form>
-      </Modal>
-      <Toast
-        open={toastOpen}
-        title="Invite sent"
-        description={sentTo ? `We'll email ${sentTo} a link to join this workspace.` : undefined}
-        status="success"
-        duration={3000}
-        onClose={() => setToastOpen(false)}
-        onOpenChange={setToastOpen}
-      />
-    </div>
-  );
-}

package/ui/patterns/InviteMembersPattern/index.ts

@@ -1,2 +0,0 @@
-export { InviteMembersPattern } from "./InviteMembersPattern";
-export type { InviteMembersPatternProps } from "./InviteMembersPattern";