@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.0

package/src/patterns/Sidebar/Account.tsx

@@ -0,0 +1,193 @@
+import { type ReactNode } from "react";
+import { SidebarIcon } from "../../icons";
+import { DropdownMenu, DropdownMenuItem, IconButton, Tooltip } from "../../primitives";
+import { cn } from "../../utils/cn";
+import { accountAvatar, accountAvatar24 } from "./figma-assets";
+import { FIGMA_ACCOUNT_NAME } from "./figma-demo-content";
+import {
+  sidebarSectionContent,
+  sidebarSectionIconClass,
+  sidebarSectionLabelClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
+  sidebarSurfaceHover,
+  sidebarQuaternaryIconButton,
+  sidebarRowInteractiveHover,
+} from "./sidebar-styles";
+
+export type AccountMenuItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  destructive?: boolean;
+  onSelect: () => void;
+};
+
+export type AccountProps = {
+  name?: string;
+  avatarSrc?: string;
+  collapsed?: boolean;
+  /** Storybook / subcomponent grid forced state. */
+  state?: "idle" | "hover";
+  /** Composed sidebar: true when pointer is over collapsed sidebar (shipping-ai pattern). */
+  sidebarHovered?: boolean;
+  presentation?: boolean;
+  menuItems?: AccountMenuItem[];
+  onToggleCollapsed?: () => void;
+  className?: string;
+};
+
+const defaultMenuItems: AccountMenuItem[] = [
+  { id: "settings", label: "Settings", onSelect: () => undefined },
+  { id: "logout", label: "Log out", destructive: true, onSelect: () => undefined },
+];
+
+const AccountAvatar = ({ src, className }: { src: string; className?: string }) => (
+  <img src={src} alt="" className={cn("size-full object-cover", className)} />
+);
+
+const AccountRow = ({
+  name,
+  avatarSrc,
+  collapsed,
+  state,
+  sidebarHovered = false,
+  onToggleCollapsed,
+  className,
+}: Pick<
+  AccountProps,
+  | "name"
+  | "avatarSrc"
+  | "collapsed"
+  | "state"
+  | "sidebarHovered"
+  | "onToggleCollapsed"
+  | "className"
+>) => {
+  const showExpandIcon = collapsed && (sidebarHovered || state === "hover");
+
+  if (showExpandIcon) {
+    return (
+      <div
+        className={cn(sidebarSectionShellCollapsed, sidebarSurfaceHover, className)}
+        data-collapsed={collapsed}
+        data-state="hover"
+      >
+        <IconButton
+          hierarchy="quaternary"
+          size="small"
+          aria-label="Expand sidebar"
+          className={cn("size-6 p-1", sidebarQuaternaryIconButton)}
+          onClick={onToggleCollapsed}
+        >
+          <SidebarIcon size="small" />
+        </IconButton>
+      </div>
+    );
+  }
+
+  if (collapsed) {
+    return (
+      <div
+        className={cn(
+          sidebarSectionShellCollapsed,
+          state === "idle" && sidebarRowInteractiveHover,
+          className,
+        )}
+        data-collapsed={collapsed}
+        data-state={state}
+      >
+        <span className="size-6 shrink-0 overflow-hidden rounded-2xl">
+          <AccountAvatar src={avatarSrc ?? accountAvatar24} />
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("flex h-9 w-full items-center gap-1 pr-2", className)}
+      data-collapsed={collapsed}
+      data-state={state}
+    >
+      <div
+        className={cn(
+          sidebarSectionShell,
+          "min-w-0 flex-1",
+          state === "hover" && sidebarSurfaceHover,
+          state === "idle" && sidebarRowInteractiveHover,
+        )}
+      >
+        <div className={sidebarSectionContent}>
+          <span className={cn(sidebarSectionIconClass, "size-4 overflow-hidden rounded-full")}>
+            <AccountAvatar src={avatarSrc ?? accountAvatar} />
+          </span>
+          <span className={sidebarSectionLabelClass}>{name}</span>
+        </div>
+      </div>
+      <IconButton
+        hierarchy="quaternary"
+        size="small"
+        aria-label="Collapse sidebar"
+        className={cn("size-6 shrink-0 p-1", sidebarQuaternaryIconButton)}
+        onClick={onToggleCollapsed}
+      >
+        <SidebarIcon size="small" />
+      </IconButton>
+    </div>
+  );
+};
+
+export const Account = ({
+  name = FIGMA_ACCOUNT_NAME,
+  avatarSrc,
+  collapsed = false,
+  state = "idle",
+  sidebarHovered = false,
+  presentation = false,
+  menuItems = defaultMenuItems,
+  onToggleCollapsed,
+  className,
+}: AccountProps) => {
+  const row = (
+    <AccountRow
+      name={name}
+      avatarSrc={avatarSrc}
+      collapsed={collapsed}
+      state={state}
+      sidebarHovered={sidebarHovered}
+      onToggleCollapsed={onToggleCollapsed}
+      className={className}
+    />
+  );
+
+  if (presentation) return row;
+
+  if (collapsed && !sidebarHovered && state !== "hover") {
+    return (
+      <Tooltip content={name} side="right" className="w-full">
+        {row}
+      </Tooltip>
+    );
+  }
+
+  if (collapsed) return row;
+
+  return (
+    <DropdownMenu side="top" align="start" trigger={row}>
+      {menuItems.map((item) => (
+        <DropdownMenuItem
+          key={item.id}
+          className={cn(item.destructive && "text-red-500 hover:bg-red-50 hover:text-red-700")}
+          onSelect={(event) => {
+            event.preventDefault();
+            item.onSelect();
+          }}
+        >
+          {item.icon && <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>}
+          {item.label}
+        </DropdownMenuItem>
+      ))}
+    </DropdownMenu>
+  );
+};

package/src/patterns/Sidebar/ActivityNavGroup.tsx

@@ -0,0 +1,71 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { ActivityIcon, ChatIcon, ChatProIcon, StatusIcon } from "../../icons";
+import { Count } from "../../primitives";
+import { cn } from "../../utils/cn";
+import { FIGMA_ACTIVITY_ENTRIES, type FigmaActivityIcon } from "./figma-demo-content";
+import { sidebarGroupGap } from "./sidebar-styles";
+import { SidebarEntry, type SidebarEntryMenuItem } from "./SidebarEntry";
+import { SidebarLink } from "./SidebarLink";
+import type { Chief } from "./Switcher";
+
+export type ActivityNavGroupProps = {
+  href: string;
+  chief: Chief;
+  empty?: boolean;
+  label?: string;
+  icon?: ReactNode;
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  entryMenuItems?: SidebarEntryMenuItem[];
+};
+
+const activityEntryIcon = (icon: FigmaActivityIcon) => {
+  if (icon === "status") return <StatusIcon size="small" />;
+  if (icon === "statusClosed") return <StatusIcon size="small" variant="closed" />;
+  if (icon === "chatPro") return <ChatProIcon size="small" />;
+  return <ChatIcon size="small" />;
+};
+
+export const ActivityNavGroup = ({
+  href,
+  chief,
+  empty = false,
+  label = "Activity",
+  icon = <ActivityIcon size="small" className="text-display-on-light-tertiary" />,
+  className,
+  onNavigate,
+  entryMenuItems,
+}: ActivityNavGroupProps) => (
+  <div
+    className={cn("flex w-full max-w-[248px] flex-col", sidebarGroupGap, className)}
+    data-chief={chief}
+    data-empty={empty}
+  >
+    <SidebarLink href={href} label={label} icon={icon} onNavigate={onNavigate} />
+
+    {!empty &&
+      FIGMA_ACTIVITY_ENTRIES.map((entry) => (
+        <SidebarEntry
+          key={entry.id}
+          href={entry.href}
+          label={entry.label}
+          icon={activityEntryIcon(entry.icon)}
+          badge={
+            entry.count ? (
+              <Count
+                value={entry.count}
+                className="min-h-5 min-w-5 bg-red-600 px-0.5 py-0.5 text-[13px] font-medium leading-4 tracking-[0.02em] text-white"
+              />
+            ) : undefined
+          }
+          menuItems={entryMenuItems}
+        />
+      ))}
+
+    {!empty && <SidebarEntry href={href} label="Show all" onNavigate={onNavigate} />}
+  </div>
+);
+
+/** @deprecated Use ActivityNavGroup */
+export const Activity = ActivityNavGroup;
+export type ActivityProps = ActivityNavGroupProps;

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -0,0 +1,106 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { ChevronIcon, ShipIcon } from "../../icons";
+import { Count, IconButton } from "../../primitives";
+import { cn } from "../../utils/cn";
+import { FIGMA_SHIP_ENTRIES } from "./figma-demo-content";
+import { sidebarGroupGap, sidebarQuaternaryIconButton } from "./sidebar-styles";
+import { SidebarEntry, type SidebarEntryMenuItem } from "./SidebarEntry";
+import { SidebarLink } from "./SidebarLink";
+
+export type Ship = {
+  id: string;
+  name: string;
+  href?: string;
+  count?: number;
+};
+
+export type CollapsibleNavGroupProps = {
+  href: string;
+  label?: string;
+  icon?: ReactNode;
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  ships?: Ship[];
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  entryMenuItems?: SidebarEntryMenuItem[];
+};
+
+export const CollapsibleNavGroup = ({
+  href,
+  label = "Ships",
+  icon = <ShipIcon size="small" className="text-display-on-light-primary" />,
+  expanded,
+  onExpandedChange,
+  ships = FIGMA_SHIP_ENTRIES,
+  className,
+  onNavigate,
+  entryMenuItems,
+}: CollapsibleNavGroupProps) => (
+  <div
+    className={cn("flex w-full max-w-[264px] flex-col", sidebarGroupGap, className)}
+    data-expanded={expanded}
+  >
+    <SidebarLink
+      href={href}
+      label={label}
+      icon={icon}
+      tall
+      onNavigate={onNavigate}
+      trailing={
+        <IconButton
+          hierarchy="quaternary"
+          size="small"
+          aria-expanded={expanded}
+          aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+          className={cn("size-6 shrink-0 p-1", sidebarQuaternaryIconButton)}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onExpandedChange(!expanded);
+          }}
+        >
+          <ChevronIcon
+            direction="right"
+            className={cn(
+              "size-4 transition-transform duration-200 ease-in-out",
+              expanded && "rotate-90",
+            )}
+          />
+        </IconButton>
+      }
+    />
+
+    <div
+      className={cn(
+        "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
+        expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+      )}
+    >
+      <div className={cn("flex min-h-0 flex-col overflow-hidden", sidebarGroupGap)}>
+        {ships.map((ship) => (
+          <SidebarEntry
+            key={ship.id}
+            href={ship.href ?? `#${ship.id}`}
+            label={ship.name}
+            icon={<ShipIcon size="small" className="text-display-on-light-primary" />}
+            badge={
+              ship.count ? (
+                <Count
+                  value={ship.count}
+                  className="min-h-5 min-w-5 bg-red-600 px-0.5 py-0.5 text-[13px] font-medium leading-4 tracking-[0.02em] text-white"
+                />
+              ) : undefined
+            }
+            menuItems={entryMenuItems}
+          />
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+/** @deprecated Use CollapsibleNavGroup */
+export const Ships = CollapsibleNavGroup;
+export type ShipsProps = CollapsibleNavGroupProps;
+export type ShipsState = "collapsed" | "expanded";

package/src/patterns/Sidebar/Indicator.tsx

@@ -0,0 +1,14 @@
+import { Logo } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "./Switcher";
+
+export type IndicatorProps = {
+  chief: Chief;
+  className?: string;
+};
+
+export const Indicator = ({ chief, className }: IndicatorProps) => (
+  <div className={cn("size-6 shrink-0", className)} aria-label={`Active chief: ${chief}`}>
+    <Logo chief={chief} className="size-6" />
+  </div>
+);

package/src/patterns/Sidebar/NewChat.tsx

@@ -0,0 +1,71 @@
+import { type MouseEvent } from "react";
+import { AddIcon } from "../../icons";
+import { Tooltip } from "../../primitives";
+import { cn } from "../../utils/cn";
+import {
+  sidebarNewChatIconHover,
+  sidebarNewChatInteractiveHover,
+} from "./sidebar-styles";
+
+export type NewChatProps = {
+  href?: string;
+  collapsed?: boolean;
+  state?: "idle" | "hover";
+  className?: string;
+  presentation?: boolean;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+export const NewChat = ({
+  href = "#new-chat",
+  collapsed = false,
+  state = "idle",
+  presentation = false,
+  className,
+  onNavigate,
+}: NewChatProps) => {
+  const isForcedHover = state === "hover";
+
+  const link = (
+    <a
+      href={href}
+      aria-label="New chat"
+      onClick={onNavigate}
+      className={cn(
+        "box-border flex w-full flex-col rounded-control p-2 text-display-on-light-primary",
+        collapsed && "items-center justify-center",
+        state === "idle" && sidebarNewChatInteractiveHover,
+        isForcedHover && "bg-action-primary-hover text-action-primary-on-hover",
+        className,
+      )}
+      data-collapsed={collapsed}
+      data-state={state}
+    >
+      <span className={cn("flex w-full items-center", collapsed ? "justify-center" : "gap-2")}>
+        <AddIcon
+          size="large"
+          filled
+          className={cn(
+            "size-6 shrink-0",
+            isForcedHover
+              ? "text-action-primary-on-hover"
+              : cn("text-display-on-light-primary", sidebarNewChatIconHover),
+          )}
+        />
+        {!collapsed && (
+          <span className="min-w-0 flex-1 truncate text-left text-caption-2 tracking-[0.01em]">
+            New chat
+          </span>
+        )}
+      </span>
+    </a>
+  );
+
+  if (presentation || !collapsed) return link;
+
+  return (
+    <Tooltip content="New chat" side="right" className="w-full">
+      {link}
+    </Tooltip>
+  );
+};