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

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>
+  );
+};

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>
+  );
+};