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

package/src/patterns/Sidebar/Sidebar.tsx

@@ -0,0 +1,363 @@
+import { type MouseEvent, type ReactNode, useState } from "react";
+import {
+  ActivityIcon,
+  AnalyticsIcon,
+  BookIcon,
+  DefectReportIcon,
+  FormsIcon,
+  SearchIcon,
+  ShipIcon,
+  TasksIcon,
+  WorkflowIcon,
+} from "../../icons";
+import { cn } from "../../utils/cn";import { Account } from "./Account";
+import { ActivityNavGroup } from "./ActivityNavGroup";
+import { CollapsibleNavGroup } from "./CollapsibleNavGroup";
+import { DEMO_SIDEBAR_ENTRY_MENU_ITEMS } from "./figma-demo-content";
+import {
+  FIGMA_NAV_LABELS,
+  getFigmaSidebarNav,
+  type FigmaNavItemId,
+} from "./figma-sidebar-nav";
+import { NewChat } from "./NewChat";
+import { SidebarLink } from "./SidebarLink";
+import { Switcher, type Chief } from "./Switcher";
+import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_EXPANDED_WIDTH } from "./constants";
+import { sidebarBlockGap, sidebarScrollRegion } from "./sidebar-styles";
+import type { SidebarEntryMenuItem } from "./SidebarEntry";
+
+export type SidebarProps = {
+  chief?: Chief;
+  activity?: boolean;
+  /** Figma layouts: initial ships expanded. Interactive: toggles via chevron. */
+  ships?: boolean;
+  collapsed?: boolean;
+  showSearch?: boolean;
+  /** Frozen Figma grid — no toggles or menus. */
+  presentation?: boolean;
+  className?: string;
+};
+
+const navHref = (id: FigmaNavItemId) =>
+  `#${id.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+
+const navIcons: Record<FigmaNavItemId, ReactNode> = {
+  search: <SearchIcon size="small" className="text-display-on-light-primary" />,
+  workflows: <WorkflowIcon size="small" className="text-display-on-light-primary" />,
+  analytics: <AnalyticsIcon size="small" className="text-display-on-light-primary" />,
+  forms: <FormsIcon size="small" className="text-display-on-light-primary" />,
+  ships: <ShipIcon size="small" className="text-display-on-light-primary" />,
+  defectReports: <DefectReportIcon size="small" className="text-display-on-light-primary" />,
+  tasks: <TasksIcon size="small" className="text-display-on-light-primary" />,
+  knowledge: <BookIcon size="small" className="text-display-on-light-primary" />,
+  activity: <ActivityIcon size="small" className="text-display-on-light-tertiary" />,
+};
+
+const collapsedNavIcons: Record<FigmaNavItemId, ReactNode> = {
+  search: <SearchIcon size="small" />,
+  workflows: <WorkflowIcon size="small" />,
+  analytics: <AnalyticsIcon size="small" />,
+  forms: <FormsIcon size="small" />,
+  ships: <ShipIcon size="small" />,
+  defectReports: <DefectReportIcon size="small" />,
+  tasks: <TasksIcon size="small" />,
+  knowledge: <BookIcon size="small" />,
+  activity: <ActivityIcon size="small" />,
+};
+
+type RenderNavOptions = {
+  chief: Chief;
+  activity: boolean;
+  shipsExpanded: boolean;
+  onShipsExpandedChange: (expanded: boolean) => void;
+  presentation: boolean;
+  showSearch: boolean;
+  entryMenuItems?: SidebarEntryMenuItem[];
+};
+
+const renderShipsItem = (
+  label: string,
+  href: string,
+  icon: ReactNode,
+  { shipsExpanded, onShipsExpandedChange, presentation, entryMenuItems }: RenderNavOptions,
+  onNavigate: (event: MouseEvent<HTMLAnchorElement>) => void,
+) => (
+  <CollapsibleNavGroup
+    href={href}
+    label={label}
+    icon={icon}
+    expanded={shipsExpanded}
+    onNavigate={onNavigate}
+    onExpandedChange={presentation ? () => undefined : onShipsExpandedChange}
+    entryMenuItems={entryMenuItems}
+  />
+);
+
+const renderActivityItem = (
+  href: string,
+  label: string,
+  icon: ReactNode,
+  { chief, activity, entryMenuItems }: RenderNavOptions,
+  onNavigate: (event: MouseEvent<HTMLAnchorElement>) => void,
+) => {
+  if (activity) {
+    return (
+      <ActivityNavGroup
+        href={href}
+        chief={chief}
+        icon={icon}
+        onNavigate={onNavigate}
+        entryMenuItems={entryMenuItems}
+      />
+    );
+  }
+
+  return (
+    <SidebarLink href={href} label={label} icon={icon} onNavigate={onNavigate} />
+  );
+};
+
+const renderFigmaExpandedItem = (
+  id: FigmaNavItemId,
+  options: RenderNavOptions,
+  onNavigate: (event: MouseEvent<HTMLAnchorElement>) => void,
+) => {
+  const label = FIGMA_NAV_LABELS[id];
+
+  if (id === "ships") {
+    return (
+      <div key={id}>
+        {renderShipsItem(label, navHref(id), navIcons.ships, options, onNavigate)}
+      </div>
+    );
+  }
+
+  if (id === "activity") {
+    return (
+      <div key={id}>
+        {renderActivityItem(navHref(id), label, navIcons.activity, options, onNavigate)}
+      </div>
+    );
+  }
+
+  return (
+    <SidebarLink
+      key={id}
+      href={navHref(id)}
+      label={label}
+      icon={navIcons[id]}
+      onNavigate={onNavigate}
+    />
+  );
+};
+
+const renderDefaultExpandedNav = (
+  options: RenderNavOptions,
+  onNavigate: (event: MouseEvent<HTMLAnchorElement>) => void,
+) => (
+  <>
+    {options.showSearch && (
+      <SidebarLink
+        href="#search"
+        label="Search"
+        icon={navIcons.search}
+        onNavigate={onNavigate}
+      />
+    )}
+
+    <SidebarLink
+      href="#workflows"
+      label="Workflows"
+      icon={navIcons.workflows}
+      onNavigate={onNavigate}
+    />
+
+    <SidebarLink
+      href="#analytics"
+      label="Analytics"
+      icon={navIcons.analytics}
+      onNavigate={onNavigate}
+    />
+
+    {renderShipsItem("Ships", "#ships", navIcons.ships, options, onNavigate)}
+
+    <SidebarLink
+      href="#defect-reports"
+      label="Defect Reports"
+      icon={navIcons.defectReports}
+      onNavigate={onNavigate}
+    />
+
+    <SidebarLink
+      href="#knowledge"
+      label="Knowledge"
+      icon={navIcons.knowledge}
+      onNavigate={onNavigate}
+    />
+
+    {renderActivityItem("#activity", "Activity", navIcons.activity, options, onNavigate)}
+  </>
+);
+
+export const Sidebar = ({
+  chief = "technical",
+  activity = true,
+  ships = true,
+  collapsed = false,
+  showSearch = true,
+  presentation = false,
+  className,
+}: SidebarProps) => {
+  const [sidebarHovered, setSidebarHovered] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+  const [shipsExpanded, setShipsExpanded] = useState(ships);
+  const [activeChief, setActiveChief] = useState(chief);
+  const figmaNav = getFigmaSidebarNav(activeChief);
+
+  const isSidebarCollapsed = presentation ? collapsed : isCollapsed;
+  const isShipsExpanded = presentation ? ships : shipsExpanded;
+  const resolvedChief = presentation ? chief : activeChief;
+
+  const entryMenuItems = presentation
+    ? undefined
+    : [...DEMO_SIDEBAR_ENTRY_MENU_ITEMS];
+
+  const navOptions: RenderNavOptions = {
+    chief: resolvedChief,
+    activity,
+    shipsExpanded: isShipsExpanded,
+    onShipsExpandedChange: setShipsExpanded,
+    presentation,
+    showSearch,
+    entryMenuItems,
+  };
+
+  const handleNavigate = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+  };
+
+  const handleCollapsedExpandClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (presentation || !isSidebarCollapsed) return;
+
+    const target = event.target as HTMLElement;
+    const isInteractive =
+      target.closest('button, a, [role="button"], [role="menuitem"]') !== null;
+
+    if (isInteractive) return;
+
+    setIsCollapsed(false);
+  };
+
+  const renderCollapsedNav = () => {
+    const items = presentation
+      ? figmaNav.collapsedItems
+      : figmaNav.collapsedItems.filter(({ id }) => {
+          if (id === "activity") return activity;
+          if (id === "ships") return true;
+          return showSearch || id !== "search";
+        });
+
+    return items.map(({ id, unread }) => (
+      <SidebarLink
+        key={id}
+        href={navHref(id)}
+        label={FIGMA_NAV_LABELS[id]}
+        icon={collapsedNavIcons[id]}
+        collapsed
+        unread={unread}
+        presentation={presentation}
+        tooltip={presentation ? undefined : FIGMA_NAV_LABELS[id]}
+        onNavigate={handleNavigate}
+      />
+    ));
+  };
+
+  const renderExpandedNav = () => {
+    if (presentation) {
+      return figmaNav.expandedItems.map((id) =>
+        renderFigmaExpandedItem(id, navOptions, handleNavigate),
+      );
+    }
+
+    if (chief === "compliance") {
+      return figmaNav.expandedItems.map((id) =>
+        renderFigmaExpandedItem(id, navOptions, handleNavigate),
+      );
+    }
+
+    return renderDefaultExpandedNav(navOptions, handleNavigate);
+  };
+
+  return (
+    <aside
+      className={cn(
+        "flex h-full shrink-0 flex-col overflow-hidden border-r border-divider-primary bg-background-secondary",
+        "transition-[width,padding] duration-200 ease-in-out",
+        isSidebarCollapsed ? "p-2" : "p-4",
+        className,
+      )}
+      style={{
+        width: isSidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH,
+      }}
+      data-collapsed={isSidebarCollapsed}
+      data-chief={resolvedChief}
+      aria-label="Sidebar navigation"
+      onMouseEnter={() => isSidebarCollapsed && setSidebarHovered(true)}
+      onMouseLeave={() => isSidebarCollapsed && setSidebarHovered(false)}
+    >
+      <div className={cn("flex min-h-0 flex-1 flex-col", sidebarBlockGap)}>
+        <div className={cn("flex shrink-0 flex-col", sidebarBlockGap)}>
+          <Switcher
+            chief={resolvedChief}
+            expanded={!isSidebarCollapsed}
+            onChiefChange={presentation ? undefined : setActiveChief}
+          />
+
+          <NewChat
+            collapsed={isSidebarCollapsed}
+            presentation={presentation}
+            onNavigate={handleNavigate}
+          />
+        </div>
+
+        <div
+          className={cn(
+            sidebarScrollRegion,
+            sidebarBlockGap,
+            isSidebarCollapsed ? "-mr-2 pr-2" : "-mr-4 pr-4",
+          )}
+        >
+          {!isSidebarCollapsed && (
+            <div className={cn("flex flex-col", sidebarBlockGap)}>{renderExpandedNav()}</div>
+          )}
+
+          {isSidebarCollapsed && (
+            <div
+              className={cn(
+                "flex min-h-0 flex-1 flex-col",
+                !presentation && "cursor-col-resize",
+              )}
+              onClick={handleCollapsedExpandClick}
+            >
+              <div className={cn("flex w-full flex-col", sidebarBlockGap)}>
+                {renderCollapsedNav()}
+              </div>
+              <div className="min-h-0 flex-1" aria-hidden />
+            </div>
+          )}
+        </div>
+
+        <div className="shrink-0">
+          <Account
+            collapsed={isSidebarCollapsed}
+            sidebarHovered={sidebarHovered}
+            presentation={presentation}
+            onToggleCollapsed={
+              presentation ? undefined : () => setIsCollapsed((value) => !value)
+            }
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+import { Tooltip } from "../../primitives";
+import { cn } from "../../utils/cn";
+import { sidebarLinkActive, sidebarLinkIdle, sidebarRowClass, sidebarRowInteractiveHover, sidebarSectionAnchorClass } from "./sidebar-styles";
+
+export type SidebarActionProps = {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  active?: boolean;
+  collapsed?: boolean;
+  tooltip?: string;
+  className?: string;
+};
+
+export const SidebarAction = ({
+  label,
+  icon,
+  onClick,
+  active = false,
+  collapsed = false,
+  tooltip,
+  className,
+}: SidebarActionProps) => {
+  const row = (
+    <div
+      className={sidebarRowClass(
+        cn(
+          active ? sidebarLinkActive : sidebarLinkIdle,
+          !active && sidebarRowInteractiveHover,
+          className,
+        ),
+      )}
+      data-active={active}
+      data-collapsed={collapsed}
+    >
+      <button
+        type="button"
+        className={sidebarSectionAnchorClass(collapsed ? "justify-center" : undefined)}
+        onClick={onClick}
+      >
+        {icon && <span className="shrink-0 [&>svg]:size-5">{icon}</span>}
+        {!collapsed && <span className="truncate">{label}</span>}
+      </button>
+    </div>
+  );
+
+  if (!collapsed || !tooltip) return row;
+
+  return (
+    <Tooltip content={tooltip ?? label} side="right" className="w-full">
+      {row}
+    </Tooltip>
+  );
+};

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -0,0 +1,129 @@
+import { type MouseEvent, type ReactNode, useState } from "react";
+import { DropdownMenu, DropdownMenuItem, IconButton } from "../../primitives";
+import { MoreIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import {
+  sidebarAnchorClass,
+  sidebarEntryHover,
+  sidebarEntryIdle,
+  sidebarEntrySelected,
+  sidebarEntryShell,
+  sidebarQuaternaryIconButton,
+  sidebarRowInteractiveHover,
+} from "./sidebar-styles";
+
+export type SidebarEntryMenuItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  destructive?: boolean;
+  onSelect: () => void;
+};
+
+export type SidebarEntryState = "idle" | "hover" | "selected";
+
+export type SidebarEntryProps = {
+  href: string;
+  label: string;
+  state?: SidebarEntryState;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  menuItems?: SidebarEntryMenuItem[];
+  forceMenuVisible?: boolean;
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+const stateStyles: Record<SidebarEntryState, string> = {
+  idle: sidebarEntryIdle,
+  hover: sidebarEntryHover,
+  selected: sidebarEntrySelected,
+};
+
+export const SidebarEntry = ({
+  href,
+  label,
+  state = "idle",
+  icon,
+  badge,
+  menuItems,
+  forceMenuVisible = false,
+  className,
+  onNavigate,
+}: SidebarEntryProps) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const showMenu = Boolean(menuItems?.length);
+  const menuVisible = forceMenuVisible || menuOpen;
+
+  return (
+    <div
+      className={cn(
+        "group/row relative w-full",
+        sidebarEntryShell,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      data-state={state}
+    >
+      <a
+        href={href}
+        className={sidebarAnchorClass("gap-1")}
+        aria-current={state === "selected" ? "true" : undefined}
+        onClick={onNavigate}
+      >
+        {icon && <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>}
+        <span className="truncate">{label}</span>
+      </a>
+
+      {badge && !(showMenu && menuVisible) && (
+        <span
+          className={cn("shrink-0", showMenu && !forceMenuVisible && "group-hover/row:hidden")}
+        >
+          {badge}
+        </span>
+      )}
+
+      {showMenu && (
+        <DropdownMenu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          align="end"
+          trigger={
+            <IconButton
+              hierarchy="quaternary"
+              size="small"
+              aria-label={`Actions for ${label}`}
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              className={cn(
+                "size-6 min-h-6 shrink-0 p-1",
+                sidebarQuaternaryIconButton,
+                !forceMenuVisible && !menuOpen && "hidden group-hover/row:inline-flex",
+                (forceMenuVisible || menuOpen) && "inline-flex",
+              )}
+            >
+              <MoreIcon size="small" />
+            </IconButton>
+          }
+        >
+          {menuItems?.map((item) => (
+            <DropdownMenuItem
+              key={item.id}
+              className={cn(item.destructive && "text-red-500 hover:bg-red-50 hover:text-red-700")}
+              onSelect={() => item.onSelect()}
+            >
+              {item.icon && <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>}
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenu>
+      )}
+    </div>
+  );
+};
+
+/** @deprecated Use SidebarEntry */
+export const Entry = SidebarEntry;
+export type EntryProps = SidebarEntryProps;
+export type EntryState = SidebarEntryState;

package/src/patterns/Sidebar/SidebarHeading.tsx

@@ -0,0 +1,38 @@
+import { ChevronIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import { sidebarRowInteractiveHover, sidebarSurfaceHover } from "./sidebar-styles";
+
+export type SidebarHeadingProps = {
+  title: string;
+  /** Figma Collapsed=On — section label with trailing chevron */
+  collapsed?: boolean;
+  state?: "idle" | "hover";
+  className?: string;
+};
+
+export const SidebarHeading = ({
+  title,
+  collapsed = false,
+  state = "idle",
+  className,
+}: SidebarHeadingProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center justify-between rounded-control px-2 py-1",
+      state === "hover" && sidebarSurfaceHover,
+      state === "idle" && sidebarRowInteractiveHover,
+      className,
+    )}
+    data-collapsed={collapsed}
+    data-state={state}
+  >
+    <span className="truncate text-caption-2 text-display-on-light-secondary">{title}</span>
+    {collapsed && (
+      <ChevronIcon direction="right" className="size-4 shrink-0 text-display-on-light-primary" />
+    )}
+  </div>
+);
+
+/** @deprecated Use SidebarHeading */
+export const Heading = SidebarHeading;
+export type HeadingProps = SidebarHeadingProps;

package/src/patterns/Sidebar/SidebarLink.tsx

@@ -0,0 +1,125 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { Tooltip } from "../../primitives";
+import { cn } from "../../utils/cn";
+import {
+  sidebarLinkActive,
+  sidebarLinkHover,
+  sidebarLinkIdle,
+  sidebarRowInteractiveHover,
+  sidebarSectionContent,
+  sidebarSectionIconClass,
+  sidebarSectionLabelClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
+  sidebarSectionShellTall,
+  sidebarUnreadDot,
+  sidebarUnreadOverlay,
+} from "./sidebar-styles";
+
+export type SidebarLinkState = "idle" | "hover" | "active";
+
+export type SidebarLinkProps = {
+  href: string;
+  label: string;
+  icon?: ReactNode;
+  state?: SidebarLinkState;
+  collapsed?: boolean;
+  tall?: boolean;
+  badge?: ReactNode;
+  trailing?: ReactNode;
+  tooltip?: string;
+  presentation?: boolean;
+  unread?: boolean;
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+const stateStyles: Record<SidebarLinkState, string> = {
+  idle: sidebarLinkIdle,
+  hover: sidebarLinkHover,
+  active: sidebarLinkActive,
+};
+
+export const SidebarLink = ({
+  href,
+  label,
+  icon,
+  state = "idle",
+  collapsed = false,
+  tall = false,
+  badge,
+  trailing,
+  tooltip,
+  presentation = false,
+  unread = false,
+  className,
+  onNavigate,
+}: SidebarLinkProps) => {
+  const row = collapsed ? (
+    <div
+      className={cn(
+        sidebarSectionShellCollapsed,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      data-state={state}
+      data-collapsed={collapsed}
+    >
+      <a
+        href={href}
+        className="flex w-full items-center justify-center"
+        aria-current={state === "active" ? "page" : undefined}
+        aria-label={label}
+        onClick={onNavigate}
+      >
+        <span className="relative inline-flex shrink-0 items-center">
+          {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+          {unread && (
+            <span aria-hidden className={sidebarUnreadOverlay}>
+              <span className={sidebarUnreadDot} />
+            </span>
+          )}
+        </span>
+      </a>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        tall ? sidebarSectionShellTall : sidebarSectionShell,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      data-state={state}
+      data-collapsed={collapsed}
+    >
+      <div className={sidebarSectionContent}>
+        <a
+          href={href}
+          className="flex min-w-0 flex-1 items-center gap-2 truncate text-left"
+          aria-current={state === "active" ? "page" : undefined}
+          onClick={onNavigate}
+        >
+          {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+          <span className={sidebarSectionLabelClass}>{label}</span>
+          {badge}
+        </a>
+        {trailing}
+      </div>
+    </div>
+  );
+
+  if (presentation || !collapsed || !tooltip) return row;
+
+  return (
+    <Tooltip content={tooltip ?? label} side="right" className="w-full">
+      {row}
+    </Tooltip>
+  );
+};
+
+/** @deprecated Use SidebarLink */
+export const Section = SidebarLink;
+export type SectionProps = SidebarLinkProps;
+export type SectionState = SidebarLinkState;