@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/blocks/profile/__tests__/profile-card-block.test.tsx

@@ -1,94 +1,101 @@
-import { describe, expect, mock, test } from "bun:test";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 
-import { act } from "@testing-library/react";
+import { act } from "@testing-library/react"
 
-import { AnimatedSidebarPanelContext } from "@/components/blocks/shell/utils";
-import { ProfileCardBlock } from "../profile-card-block";
-import { useProfileCardActions, useProfileCardState } from "../use-profile-card-state";
-import type { ProfileCardActions, ProfileCardState } from "../type";
+import { AnimatedSidebarPanelContext } from "@/components/blocks/shell/utils"
+import { ProfileCardBlock } from "../profile-card-block"
+import {
+  useProfileCardActions,
+  useProfileCardState,
+} from "../use-profile-card-state"
+import type { ProfileCardActions, ProfileCardState } from "../type"
 
-const USER = { name: "Jenny Hamilton", username: "@jennycodes" };
+const USER = { name: "Jenny Hamilton", username: "@jennycodes" }
 
 describe("ProfileCardBlock", () => {
   test("names the trigger after the identity it shows", () => {
-    render(<ProfileCardBlock user={USER} />);
+    render(<ProfileCardBlock user={USER} />)
 
     const trigger = screen.getByRole("button", {
       name: "Jenny Hamilton @jennycodes, account menu",
-    });
-    expect(trigger.textContent).toContain("Jenny Hamilton");
-    expect(trigger.textContent).toContain("@jennycodes");
-  });
+    })
+    expect(trigger.textContent).toContain("Jenny Hamilton")
+    expect(trigger.textContent).toContain("@jennycodes")
+  })
 
   test("falls back to initials derived from the name", () => {
-    render(<ProfileCardBlock user={{ name: "Jenny Hamilton" }} />);
-    expect(screen.getByText("JH")).toBeDefined();
-  });
+    render(<ProfileCardBlock user={{ name: "Jenny Hamilton" }} />)
+    expect(screen.getByText("JH")).toBeDefined()
+  })
 
   test("opens the default menu with a destructive sign-out", async () => {
-    const user = userEvent.setup();
-    render(<ProfileCardBlock user={USER} />);
+    const user = userEvent.setup()
+    render(<ProfileCardBlock user={USER} />)
 
-    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"))
 
-    expect(await screen.findByRole("menuitem", { name: "Profile" })).toBeDefined();
-    expect(screen.getByRole("menuitem", { name: "Settings" })).toBeDefined();
-    expect(screen.getByRole("menuitem", { name: "Teams" })).toBeDefined();
-    expect(screen.getByRole("menuitem", { name: "Invite" })).toBeDefined();
+    expect(
+      await screen.findByRole("menuitem", { name: "Profile" })
+    ).toBeDefined()
+    expect(screen.getByRole("menuitem", { name: "Settings" })).toBeDefined()
+    expect(screen.getByRole("menuitem", { name: "Teams" })).toBeDefined()
+    expect(screen.getByRole("menuitem", { name: "Invite" })).toBeDefined()
     expect(
       screen
         .getByRole("menuitem", { name: "Log out" })
-        .getAttribute("data-variant"),
-    ).toBe("destructive");
-  });
+        .getAttribute("data-variant")
+    ).toBe("destructive")
+  })
 
   test("opens from the keyboard", async () => {
-    const user = userEvent.setup();
-    render(<ProfileCardBlock user={USER} />);
+    const user = userEvent.setup()
+    render(<ProfileCardBlock user={USER} />)
 
-    await user.tab();
-    await user.keyboard("{Enter}");
+    await user.tab()
+    await user.keyboard("{Enter}")
 
-    expect(await screen.findByRole("menuitem", { name: "Profile" })).toBeDefined();
-  });
+    expect(
+      await screen.findByRole("menuitem", { name: "Profile" })
+    ).toBeDefined()
+  })
 
   test("fires the handler behind the selected item", async () => {
-    const user = userEvent.setup();
-    const onSelect = mock(() => {});
+    const user = userEvent.setup()
+    const onSelect = mock(() => {})
     render(
       <ProfileCardBlock
         items={[{ id: "settings", label: "Settings", onSelect }]}
         user={USER}
-      />,
-    );
+      />
+    )
 
-    await user.click(screen.getByRole("button"));
-    await user.click(await screen.findByRole("menuitem", { name: "Settings" }));
+    await user.click(screen.getByRole("button"))
+    await user.click(await screen.findByRole("menuitem", { name: "Settings" }))
 
-    expect(onSelect).toHaveBeenCalled();
-  });
+    expect(onSelect).toHaveBeenCalled()
+  })
 
   test("items replace the default menu", async () => {
-    const user = userEvent.setup();
+    const user = userEvent.setup()
     render(
       <ProfileCardBlock
         items={[{ id: "switch", label: "Switch team" }]}
         user={USER}
-      />,
-    );
+      />
+    )
 
-    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"))
 
     expect(
-      await screen.findByRole("menuitem", { name: "Switch team" }),
-    ).toBeDefined();
-    expect(screen.queryByRole("menuitem", { name: "Log out" })).toBeNull();
-  });
+      await screen.findByRole("menuitem", { name: "Switch team" })
+    ).toBeDefined()
+    expect(screen.queryByRole("menuitem", { name: "Log out" })).toBeNull()
+  })
 
   test("labels name the group they head, up to the next separator", async () => {
-    const user = userEvent.setup();
+    const user = userEvent.setup()
     render(
       <ProfileCardBlock
         items={[
@@ -98,22 +105,24 @@ describe("ProfileCardBlock", () => {
           { id: "sign-out", label: "Log out", variant: "destructive" },
         ]}
         user={USER}
-      />,
-    );
+      />
+    )
 
-    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"))
 
-    const named = await screen.findByRole("group", { name: "Workspace" });
-    expect(named.querySelectorAll('[data-slot="menu-item"]')).toHaveLength(1);
-    expect(screen.getAllByRole("group")).toHaveLength(2);
+    const named = await screen.findByRole("group", { name: "Workspace" })
+    expect(named.querySelectorAll('[data-slot="menu-item"]')).toHaveLength(1)
+    expect(screen.getAllByRole("group")).toHaveLength(2)
     expect(
-      screen.getByRole("menuitem", { name: "Log out" }).getAttribute("data-variant"),
-    ).toBe("destructive");
-  });
+      screen
+        .getByRole("menuitem", { name: "Log out" })
+        .getAttribute("data-variant")
+    ).toBe("destructive")
+  })
 
   test("reports a rejected action through onError", async () => {
-    const user = userEvent.setup();
-    const onError = mock(() => {});
+    const user = userEvent.setup()
+    const onError = mock(() => {})
     render(
       <ProfileCardBlock
         items={[
@@ -121,94 +130,109 @@ describe("ProfileCardBlock", () => {
             id: "sign-out",
             label: "Log out",
             onSelect: async () => {
-              throw new Error("Session already ended.");
+              throw new Error("Session already ended.")
             },
           },
         ]}
         onError={onError}
         user={USER}
-      />,
-    );
+      />
+    )
 
-    await user.click(screen.getByRole("button"));
-    await user.click(await screen.findByRole("menuitem", { name: "Log out" }));
+    await user.click(screen.getByRole("button"))
+    await user.click(await screen.findByRole("menuitem", { name: "Log out" }))
 
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(onError).toHaveBeenCalled();
-  });
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(onError).toHaveBeenCalled()
+  })
   test("variant=collapsed folds to the avatar but keeps the accessible name", () => {
-    const { rerender } = render(<ProfileCardBlock user={USER} variant="collapsed" />);
+    const { rerender } = render(
+      <ProfileCardBlock user={USER} variant="collapsed" />
+    )
 
     const trigger = screen.getByRole("button", {
       name: "Jenny Hamilton @jennycodes, account menu",
-    });
-    expect(trigger.hasAttribute("data-collapsed")).toBe(true);
+    })
+    expect(trigger.hasAttribute("data-collapsed")).toBe(true)
     // Hover names the tile the way the rail's menu buttons do.
-    expect(trigger.getAttribute("title")).toBe("Jenny Hamilton @jennycodes");
+    expect(trigger.getAttribute("title")).toBe("Jenny Hamilton @jennycodes")
     // The avatar stays; the identity lines fold (hidden, not removed — that
     // is what lets the fold animate back open).
-    expect(screen.getByText("JH")).toBeDefined();
-    const identity = trigger.querySelector('[data-slot="profile-card-identity"]');
-    expect(identity?.getAttribute("aria-hidden")).toBe("true");
-    expect(identity?.textContent).toContain("Jenny Hamilton");
+    expect(screen.getByText("JH")).toBeDefined()
+    const identity = trigger.querySelector(
+      '[data-slot="profile-card-identity"]'
+    )
+    expect(identity?.getAttribute("aria-hidden")).toBe("true")
+    expect(identity?.textContent).toContain("Jenny Hamilton")
     // Full-width h-10 row, like the tree rail's tiles: avatar centred on
     // the rail's own centre line, no inset.
-    expect(trigger.className).toContain("justify-center");
-    expect(trigger.className).toContain("h-10");
-    expect(trigger.className).toContain("w-full");
-    expect(trigger.className).toContain("p-0");
+    expect(trigger.className).toContain("justify-center")
+    expect(trigger.className).toContain("h-10")
+    expect(trigger.className).toContain("w-full")
+    expect(trigger.className).toContain("p-0")
 
-    rerender(<ProfileCardBlock user={USER} variant="expanded" />);
-    expect(trigger.hasAttribute("data-collapsed")).toBe(false);
-    expect(trigger.getAttribute("title")).toBeNull();
-    expect(identity?.getAttribute("aria-hidden")).toBeNull();
-  });
+    rerender(<ProfileCardBlock user={USER} variant="expanded" />)
+    expect(trigger.hasAttribute("data-collapsed")).toBe(false)
+    expect(trigger.getAttribute("title")).toBeNull()
+    expect(identity?.getAttribute("aria-hidden")).toBeNull()
+  })
 
   test("variant=collapsed still opens the menu", async () => {
-    const user = userEvent.setup();
-    render(<ProfileCardBlock user={USER} variant="collapsed" />);
-    await user.click(screen.getByRole("button"));
-    expect(await screen.findByRole("menuitem", { name: "Log out" })).toBeDefined();
-  });
+    const user = userEvent.setup()
+    render(<ProfileCardBlock user={USER} variant="collapsed" />)
+    await user.click(screen.getByRole("button"))
+    expect(
+      await screen.findByRole("menuitem", { name: "Log out" })
+    ).toBeDefined()
+  })
 
   test("follows the enclosing AnimatedPanel unless variant is set", () => {
-    const panel = { collapsed: true, collapsible: "icon", side: "left" } as const;
+    const panel = {
+      collapsed: true,
+      collapsible: "icon",
+      side: "left",
+    } as const
     const { rerender } = render(
       <AnimatedSidebarPanelContext.Provider value={panel}>
         <ProfileCardBlock user={USER} />
-      </AnimatedSidebarPanelContext.Provider>,
-    );
-    const trigger = screen.getByRole("button");
-    expect(trigger.hasAttribute("data-collapsed")).toBe(true);
+      </AnimatedSidebarPanelContext.Provider>
+    )
+    const trigger = screen.getByRole("button")
+    expect(trigger.hasAttribute("data-collapsed")).toBe(true)
 
     // An explicit prop wins over the panel.
     rerender(
       <AnimatedSidebarPanelContext.Provider value={panel}>
         <ProfileCardBlock user={USER} variant="expanded" />
-      </AnimatedSidebarPanelContext.Provider>,
-    );
-    expect(trigger.hasAttribute("data-collapsed")).toBe(false);
-
-  });
+      </AnimatedSidebarPanelContext.Provider>
+    )
+    expect(trigger.hasAttribute("data-collapsed")).toBe(false)
+  })
 
   test("outside any panel an unnamed card starts expanded", () => {
-    render(<ProfileCardBlock user={USER} />);
-    expect(screen.getByRole("button").hasAttribute("data-collapsed")).toBe(false);
-    expect(screen.getByRole("button").getAttribute("data-variant")).toBe("expanded");
-  });
+    render(<ProfileCardBlock user={USER} />)
+    expect(screen.getByRole("button").hasAttribute("data-collapsed")).toBe(
+      false
+    )
+    expect(screen.getByRole("button").getAttribute("data-variant")).toBe(
+      "expanded"
+    )
+  })
 
   test("defaultVariant seeds an uncontrolled card", () => {
-    render(<ProfileCardBlock defaultVariant="collapsed" user={USER} />);
-    expect(screen.getByRole("button").getAttribute("data-variant")).toBe("collapsed");
-  });
+    render(<ProfileCardBlock defaultVariant="collapsed" user={USER} />)
+    expect(screen.getByRole("button").getAttribute("data-variant")).toBe(
+      "collapsed"
+    )
+  })
   test("data-variant mirrors the fold and onVariantChange reports store-driven changes", () => {
-    const onVariantChange = mock(() => {});
-    let actions!: ProfileCardActions;
-    let state!: ProfileCardState;
+    const onVariantChange = mock(() => {})
+    let actions!: ProfileCardActions
+    let state!: ProfileCardState
     function Probe() {
-      actions = useProfileCardActions("account");
-      state = useProfileCardState("account");
-      return null;
+      actions = useProfileCardActions("account")
+      state = useProfileCardState("account")
+      return null
     }
     render(
       <>
@@ -218,30 +242,30 @@ describe("ProfileCardBlock", () => {
           user={USER}
         />
         <Probe />
-      </>,
-    );
-    const trigger = screen.getByRole("button");
-    expect(trigger.getAttribute("data-variant")).toBe("expanded");
-    expect(state.variant).toBe("expanded");
+      </>
+    )
+    const trigger = screen.getByRole("button")
+    expect(trigger.getAttribute("data-variant")).toBe("expanded")
+    expect(state.variant).toBe("expanded")
 
     // Driven from outside by id — no controller, no ref.
-    act(() => actions.collapse());
-    expect(trigger.getAttribute("data-variant")).toBe("collapsed");
-    expect(state.variant).toBe("collapsed");
-    expect(onVariantChange).toHaveBeenCalledWith("collapsed");
+    act(() => actions.collapse())
+    expect(trigger.getAttribute("data-variant")).toBe("collapsed")
+    expect(state.variant).toBe("collapsed")
+    expect(onVariantChange).toHaveBeenCalledWith("collapsed")
 
-    act(() => actions.toggleVariant());
-    expect(trigger.getAttribute("data-variant")).toBe("expanded");
-    expect(onVariantChange).toHaveBeenLastCalledWith("expanded");
-  });
+    act(() => actions.toggleVariant())
+    expect(trigger.getAttribute("data-variant")).toBe("expanded")
+    expect(onVariantChange).toHaveBeenLastCalledWith("expanded")
+  })
 
   test("a controlled variant is never overwritten by the store", () => {
-    let actions!: ProfileCardActions;
+    let actions!: ProfileCardActions
     function Probe() {
-      actions = useProfileCardActions("locked");
-      return null;
+      actions = useProfileCardActions("locked")
+      return null
     }
-    const onVariantChange = mock(() => {});
+    const onVariantChange = mock(() => {})
     render(
       <>
         <ProfileCardBlock
@@ -251,40 +275,44 @@ describe("ProfileCardBlock", () => {
           variant="expanded"
         />
         <Probe />
-      </>,
-    );
-    act(() => actions.collapse());
+      </>
+    )
+    act(() => actions.collapse())
     // Reported, not applied — the prop is truth.
-    expect(onVariantChange).toHaveBeenCalledWith("collapsed");
-    expect(screen.getByRole("button").getAttribute("data-variant")).toBe("expanded");
-  });
+    expect(onVariantChange).toHaveBeenCalledWith("collapsed")
+    expect(screen.getByRole("button").getAttribute("data-variant")).toBe(
+      "expanded"
+    )
+  })
 
   test("openMenu / closeMenu from outside drive the menu through the store", async () => {
-    let actions!: ProfileCardActions;
+    let actions!: ProfileCardActions
     function Probe() {
-      actions = useProfileCardActions("menu");
-      return null;
+      actions = useProfileCardActions("menu")
+      return null
     }
     render(
       <>
         <ProfileCardBlock profileCardId="menu" user={USER} />
         <Probe />
-      </>,
-    );
-    act(() => actions.openMenu());
-    expect(await screen.findByRole("menuitem", { name: "Profile" })).toBeDefined();
-    act(() => actions.closeMenu());
-    await new Promise((r) => setTimeout(r, 300));
-    expect(screen.queryByRole("menuitem", { name: "Profile" })).toBeNull();
-  });
+      </>
+    )
+    act(() => actions.openMenu())
+    expect(
+      await screen.findByRole("menuitem", { name: "Profile" })
+    ).toBeDefined()
+    act(() => actions.closeMenu())
+    await new Promise((r) => setTimeout(r, 300))
+    expect(screen.queryByRole("menuitem", { name: "Profile" })).toBeNull()
+  })
 
   test("busy tracks a pending action in the store", async () => {
-    const user = userEvent.setup();
-    let resolve!: () => void;
-    let state!: ProfileCardState;
+    const user = userEvent.setup()
+    let resolve!: () => void
+    let state!: ProfileCardState
     function Probe() {
-      state = useProfileCardState("busy");
-      return null;
+      state = useProfileCardState("busy")
+      return null
     }
     render(
       <>
@@ -300,31 +328,35 @@ describe("ProfileCardBlock", () => {
           user={USER}
         />
         <Probe />
-      </>,
-    );
-    await user.click(screen.getByRole("button"));
-    await user.click(await screen.findByRole("menuitem", { name: "Slow" }));
-    expect(state.busy).toBe(true);
-    expect(state.pendingActionId).toBe("slow");
+      </>
+    )
+    await user.click(screen.getByRole("button"))
+    await user.click(await screen.findByRole("menuitem", { name: "Slow" }))
+    expect(state.busy).toBe(true)
+    expect(state.pendingActionId).toBe("slow")
     await act(async () => {
-      resolve();
-      await Promise.resolve();
-    });
-    expect(state.busy).toBe(false);
-  });
+      resolve()
+      await Promise.resolve()
+    })
+    expect(state.busy).toBe(false)
+  })
 
   test("user.presence and the presence prop reach the avatar badge", () => {
     const { rerender } = render(
-      <ProfileCardBlock user={{ ...USER, presence: "online" }} />,
-    );
-    const badge = () =>
-      document.querySelector('[data-slot="user-avatar-presence"]');
-    expect(badge()?.getAttribute("data-presence")).toBe("online");
+      <ProfileCardBlock user={{ ...USER, presence: "online" }} />
+    )
+    // The atoms avatar badge carries the status as a color class, not a
+    // data attribute (see atoms/avatar/utils statusClasses).
+    const badge = () => document.querySelector('[data-slot="avatar-badge"]')
+    expect(badge()?.classList.contains("bg-success")).toBe(true)
     rerender(
-      <ProfileCardBlock presence="offline" user={{ ...USER, presence: "online" }} />,
-    );
-    expect(badge()?.getAttribute("data-presence")).toBe("offline");
-    rerender(<ProfileCardBlock user={USER} />);
-    expect(badge()).toBeNull();
-  });
-});
+      <ProfileCardBlock
+        presence="offline"
+        user={{ ...USER, presence: "online" }}
+      />
+    )
+    expect(badge()?.classList.contains("bg-text-secondary")).toBe(true)
+    rerender(<ProfileCardBlock user={USER} />)
+    expect(badge()).toBeNull()
+  })
+})

package/src/components/blocks/profile/profile-card-block.story.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { ProfileCardBlock } from "./profile-card-block"
+
+export const story = defineStory({
+  Component: ProfileCardBlock,
+  args: {
+    initial: {
+      user: { name: "Jenny Hamilton", username: "@jennycodes" },
+      defaultVariant: "expanded",
+      sound: false,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/profile/profile-card-block.tsx

@@ -17,7 +17,7 @@ import {
   LABEL_EXIT_TRANSITION,
   REDUCED_TRANSITION,
 } from "@/components/blocks/shell/utils"
-import { UserAvatar } from "@/components/user-avatar"
+import { Avatar } from "@/components/atoms/avatar"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -116,13 +116,8 @@ export interface ProfileCardBlockProps {
    * `useId` and are dropped on unmount.
    */
   profileCardId?: string
-  /**
-   * Presence badge on the avatar — overrides `user.presence`. Name the avatar
-   * with `avatarId` and `useUserAvatarActions(id).setPresence()` can flip it
-   * from a socket handler instead.
-   */
+  /** Presence badge on the avatar — overrides `user.presence`. */
   presence?: ProfileCardUser["presence"]
-  avatarId?: string
   /**
    * Emit cuelume press/release on the card and play the open/close cues.
    * Inert unless the app opts into interaction sound via `bindSounds()`.
@@ -178,7 +173,6 @@ export function ProfileCardBlock({
   onVariantChange,
   profileCardId,
   presence,
-  avatarId,
   open,
   defaultOpen,
   onOpenChange,
@@ -244,7 +238,7 @@ export function ProfileCardBlock({
               // `sm:h-10` because the base carries an `sm:h-auto` that an
               // unprefixed height would not beat.
               collapsed &&
-                "h-10 w-full shrink-0 justify-center rounded-xl p-0 sm:h-10",
+                "h-10 w-full shrink-0 justify-center rounded-md p-0 sm:h-10",
               className
             )}
             data-collapsed={collapsed ? "" : undefined}
@@ -263,14 +257,18 @@ export function ProfileCardBlock({
                 collapsed ? "w-auto gap-0" : "w-full gap-2"
               )}
             >
-              <UserAvatar
-                // Decorative: the name beside it already labels the card.
-                alt=""
-                avatarId={avatarId}
-                initials={user.initials}
-                name={user.name}
-                presence={presence ?? user.presence}
-                src={user.avatar}
+              <Avatar
+                size="default"
+                user={{
+                  // The atoms avatar derives initials from first + last name;
+                  // explicit `user.initials` win by standing in for the pair.
+                  firstName: user.initials?.[0] ?? user.name.split(/\s+/)[0],
+                  lastName:
+                    user.initials?.[1] ??
+                    user.name.split(/\s+/).slice(1).at(-1),
+                  avatarUrl: user.avatar,
+                  status: presence ?? user.presence,
+                }}
               />
               <motion.span
                 animate={{

package/src/components/blocks/profile/type.ts

@@ -1,6 +1,6 @@
 import type * as React from "react"
 
-import type { UserPresence } from "@/components/user-avatar"
+import type { AvatarStatus } from "@/components/atoms"
 
 /** The identity shown on the card. */
 export interface ProfileCardUser {
@@ -12,7 +12,7 @@ export interface ProfileCardUser {
   /** Fallback initials. Derived from `name` when omitted. */
   initials?: string
   /** Presence badge on the avatar. Omitted, no badge. */
-  presence?: UserPresence
+  presence?: AvatarStatus
 }
 
 /** An actionable row of the menu. */
@@ -45,9 +45,7 @@ export interface ProfileCardSeparator {
  * separators as its own menu group so a label actually names its section.
  */
 export type ProfileCardItem =
-  | ProfileCardAction
-  | ProfileCardLabel
-  | ProfileCardSeparator
+  ProfileCardAction | ProfileCardLabel | ProfileCardSeparator
 
 /** `expanded` shows avatar, name and handle; `collapsed` folds to the avatar
  * alone — for an icon-collapsed sidebar rail. */