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

package/src/patterns/Search/SearchModal.tsx

@@ -0,0 +1,310 @@
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalTitle,
+  type ModalContentProps,
+  type ModalProps,
+} from "../../components/Modal";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs";
+import { Badge } from "../../primitives/Badge";
+import { cn } from "../../utils/cn";
+import { ResultRow, type ResultRowProps } from "./ResultRow";
+import { SectionHeader } from "./SectionHeader";
+import { Skeleton } from "../Skeleton";
+
+export type SearchModalState = "idle" | "loading" | "results";
+
+export type SearchFilterTab = {
+  value: string;
+  label: string;
+  count?: number;
+};
+
+export type SearchModalProps = ModalProps & {
+  /** Panel state when using the built-in layout helpers. */
+  state?: SearchModalState;
+  className?: string;
+  contentClassName?: string;
+  showOverlay?: boolean;
+  overlayClassName?: string;
+  children?: ReactNode;
+};
+
+const DEFAULT_FILTERS: SearchFilterTab[] = [
+  { value: "all", label: "All", count: 0 },
+  { value: "reports", label: "Reports", count: 0 },
+  { value: "chats", label: "Chats", count: 0 },
+  { value: "issues", label: "Issues", count: 0 },
+];
+
+/**
+ * Search dialog composed on Modal.
+ * Use compound parts (Input / Body / Filters / Results) for app wiring,
+ * or pass `state` + demo children for Storybook.
+ */
+export const SearchModal = ({
+  state,
+  className,
+  contentClassName,
+  showOverlay = true,
+  overlayClassName,
+  children,
+  ...modalProps
+}: SearchModalProps) => (
+  <Modal {...modalProps}>
+    <ModalContent
+      showOverlay={showOverlay}
+      overlayClassName={overlayClassName}
+      className={cn(
+        "flex max-h-[min(80vh,640px)] w-[min(100vw-2rem,700px)] max-w-[768px] flex-col p-0",
+        contentClassName,
+      )}
+      aria-label="Search"
+      data-state={state}
+    >
+      <ModalTitle className="sr-only">Search</ModalTitle>
+      <ModalDescription className="sr-only">
+        Search reports, chats, or issues
+      </ModalDescription>
+      <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
+        {children}
+      </div>
+    </ModalContent>
+  </Modal>
+);
+
+export type SearchModalInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+> & {
+  className?: string;
+  wrapperClassName?: string;
+};
+
+export const SearchModalInput = ({
+  className,
+  wrapperClassName,
+  placeholder = "Search reports, chats, or issues…",
+  ...props
+}: SearchModalInputProps) => (
+  <div
+    className={cn(
+      "shrink-0 p-3",
+      wrapperClassName,
+    )}
+  >
+    <div className="flex min-h-10 items-center px-3">
+      <input
+        type="search"
+        placeholder={placeholder}
+        className={cn(
+          "w-full bg-transparent text-caption-1 text-display-on-light-primary",
+          "placeholder:text-display-on-light-tertiary focus:outline-none",
+          className,
+        )}
+        aria-label="Search query"
+        {...props}
+      />
+    </div>
+  </div>
+);
+
+export const SearchModalDivider = ({ className }: { className?: string }) => (
+  <div
+    className={cn("h-px w-full shrink-0 bg-divider-primary", className)}
+    aria-hidden
+  />
+);
+
+export type SearchModalBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const SearchModalBody = ({
+  children,
+  className,
+}: SearchModalBodyProps) => (
+  <ModalBody
+    className={cn(
+      "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2",
+      className,
+    )}
+  >
+    {children}
+  </ModalBody>
+);
+
+export type SearchModalFiltersProps = {
+  tabs?: SearchFilterTab[];
+  value: string;
+  onValueChange: (value: string) => void;
+  children?: ReactNode;
+  className?: string;
+  listClassName?: string;
+};
+
+/**
+ * Pill-style filter tabs for the results state.
+ * Children render below the tab list (typically a single filtered results list).
+ * For per-tab panels, nest `SearchModalFilterPanel` (TabsContent) as children.
+ */
+export const SearchModalFilters = ({
+  tabs = DEFAULT_FILTERS,
+  value,
+  onValueChange,
+  children,
+  className,
+  listClassName,
+}: SearchModalFiltersProps) => (
+  <Tabs
+    type="pills"
+    value={value}
+    onValueChange={onValueChange}
+    className={cn("min-h-0 flex-1 gap-0", className)}
+  >
+    <TabsList
+      className={cn(
+        "w-full shrink-0 bg-background-primary p-2",
+        listClassName,
+      )}
+    >
+      {tabs.map((tab) => (
+        <TabsTrigger key={tab.value} value={tab.value}>
+          {tab.label}
+          {typeof tab.count === "number" && (
+            <Badge color="blue">
+              {tab.count > 99 ? "99+" : tab.count}
+            </Badge>
+          )}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+    <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+  </Tabs>
+);
+
+export type SearchModalFilterPanelProps = {
+  value: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const SearchModalFilterPanel = ({
+  value,
+  children,
+  className,
+}: SearchModalFilterPanelProps) => (
+  <TabsContent value={value} className={className}>
+    {children}
+  </TabsContent>
+);
+
+export type SearchModalResultsProps = {
+  items?: ResultRowProps[];
+  children?: ReactNode;
+  className?: string;
+};
+
+export const SearchModalResults = ({
+  items,
+  children,
+  className,
+}: SearchModalResultsProps) => (
+  <div className={cn("flex flex-col", className)}>
+    {items?.map((item, index) => (
+      <ResultRow key={index} {...item} />
+    ))}
+    {children}
+  </div>
+);
+
+export type SearchModalIdleProps = {
+  label?: string;
+  items?: ResultRowProps[];
+  children?: ReactNode;
+  className?: string;
+};
+
+export const SearchModalIdle = ({
+  label = "Recently viewed",
+  items,
+  children,
+  className,
+}: SearchModalIdleProps) => (
+  <div className={cn("flex min-h-0 flex-1 flex-col p-1", className)}>
+    <SectionHeader
+      label={label}
+      className="shrink-0 px-3 py-1 text-caption-2 font-normal normal-case tracking-[0.01em] text-display-on-light-secondary"
+    />
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <SearchModalResults items={items}>{children}</SearchModalResults>
+    </div>
+  </div>
+);
+
+export type SearchModalLoadingProps = {
+  className?: string;
+};
+
+export const SearchModalLoading = ({ className }: SearchModalLoadingProps) => (
+  <Skeleton variant="search" className={cn("rounded-none", className)} />
+);
+
+/** Convenience controlled panel for Storybook / simple embeds. */
+export type SearchModalPanelProps = {
+  state?: SearchModalState;
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  filter?: string;
+  onFilterChange?: (filter: string) => void;
+  filters?: SearchFilterTab[];
+  recentItems?: ResultRowProps[];
+  resultItems?: ResultRowProps[];
+  className?: string;
+};
+
+export const SearchModalPanel = ({
+  state = "idle",
+  query = "",
+  onQueryChange,
+  filter = "all",
+  onFilterChange,
+  filters = DEFAULT_FILTERS,
+  recentItems,
+  resultItems,
+  className,
+}: SearchModalPanelProps) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onQueryChange?.(event.target.value);
+  };
+
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col", className)} data-state={state}>
+      <SearchModalInput value={query} onChange={handleChange} />
+      <SearchModalDivider />
+      <SearchModalBody className={state === "loading" ? "p-0" : undefined}>
+        {state === "idle" && <SearchModalIdle items={recentItems} />}
+        {state === "loading" && <SearchModalLoading />}
+        {state === "results" && (
+          <SearchModalFilters
+            tabs={filters}
+            value={filter}
+            onValueChange={(next) => onFilterChange?.(next)}
+          >
+            <SearchModalResults items={resultItems} />
+          </SearchModalFilters>
+        )}
+      </SearchModalBody>
+    </div>
+  );
+};
+
+export type { ModalContentProps };

package/src/patterns/Search/SectionHeader.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../../utils/cn";
+
+export type SectionHeaderProps = {
+  label?: string;
+  className?: string;
+};
+
+export const SectionHeader = ({
+  label = "Recently viewed",
+  className,
+}: SectionHeaderProps) => (
+  <p
+    className={cn(
+      "px-2 py-1.5 text-footnote-em text-display-on-light-tertiary uppercase tracking-wide",
+      className,
+    )}
+  >
+    {label}
+  </p>
+);

package/src/patterns/Search/index.ts

@@ -0,0 +1,31 @@
+export { Pill, type PillProps, type PillSize, type PillState } from "./Pill";
+export { PillInfo, type PillInfoProps, type PillInfoType } from "./PillInfo";
+export {
+  ResultRow,
+  type ResultRowProps,
+  type ResultRowState,
+  type ResultRowVariant,
+} from "./ResultRow";
+export {
+  SearchModal,
+  SearchModalBody,
+  SearchModalDivider,
+  SearchModalFilterPanel,
+  SearchModalFilters,
+  SearchModalIdle,
+  SearchModalInput,
+  SearchModalLoading,
+  SearchModalPanel,
+  SearchModalResults,
+  type SearchFilterTab,
+  type SearchModalBodyProps,
+  type SearchModalFiltersProps,
+  type SearchModalIdleProps,
+  type SearchModalInputProps,
+  type SearchModalLoadingProps,
+  type SearchModalPanelProps,
+  type SearchModalProps,
+  type SearchModalResultsProps,
+  type SearchModalState,
+} from "./SearchModal";
+export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";

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;