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

package/src/patterns/Chat/Reference.tsx

@@ -0,0 +1,26 @@
+import { BookIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type ReferenceProps = {
+  title?: string;
+  page?: string;
+  className?: string;
+};
+
+export const Reference = ({
+  title = "SOLAS Chapter II-1",
+  page = "p. 42",
+  className,
+}: ReferenceProps) => (
+  <button
+    type="button"
+    className={cn(
+      "inline-flex items-center gap-1.5 rounded-control bg-accent-bg-lighter px-2 py-1 text-footnote text-accent-on-light transition-colors hover:bg-accent-bg-light",
+      className,
+    )}
+  >
+    <BookIcon className="size-3.5 shrink-0" />
+    <span className="truncate">{title}</span>
+    {page && <span className="text-display-on-light-quaternary">{page}</span>}
+  </button>
+);

package/src/patterns/Chat/Source.tsx

@@ -0,0 +1,27 @@
+import { DocumentIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type SourceProps = {
+  title?: string;
+  excerpt?: string;
+  className?: string;
+};
+
+export const Source = ({
+  title = "ISM Code Section 10",
+  excerpt = "The company should establish procedures to ensure that the ship is maintained in conformity with the provisions of the relevant rules and regulations...",
+  className,
+}: SourceProps) => (
+  <div
+    className={cn(
+      "rounded-control border border-divider-primary bg-background-primary p-3",
+      className,
+    )}
+  >
+    <div className="mb-1 flex items-center gap-2">
+      <DocumentIcon className="size-4 shrink-0 text-display-on-light-tertiary" />
+      <span className="text-caption-2-em text-display-on-light-primary">{title}</span>
+    </div>
+    <p className="line-clamp-2 text-caption-2 text-display-on-light-secondary">{excerpt}</p>
+  </div>
+);

package/src/patterns/Chat/Sources.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn";
+import { Source } from "./Source";
+
+export type SourcesProps = {
+  count?: number;
+  className?: string;
+};
+
+const placeholderSources = [
+  { title: "ISM Code Section 10", excerpt: "The company should establish procedures to ensure that the ship is maintained..." },
+  { title: "Port State Control MOU", excerpt: "Inspections are carried out to verify compliance with international conventions..." },
+];
+
+export const Sources = ({ count = 2, className }: SourcesProps) => (
+  <div className={cn("flex flex-col gap-2", className)} role="region" aria-label="Sources">
+    <p className="text-footnote-em text-display-on-light-tertiary">
+      {count} source{count !== 1 ? "s" : ""}
+    </p>
+    {placeholderSources.slice(0, count).map((source) => (
+      <Source key={source.title} title={source.title} excerpt={source.excerpt} />
+    ))}
+  </div>
+);

package/src/patterns/Chat/Suggestion.tsx

@@ -0,0 +1,23 @@
+import { BulbIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type SuggestionProps = {
+  label?: string;
+  className?: string;
+};
+
+export const Suggestion = ({
+  label = "Summarize the latest inspection findings",
+  className,
+}: SuggestionProps) => (
+  <button
+    type="button"
+    className={cn(
+      "flex items-center gap-2 rounded-control border border-divider-primary bg-background-primary px-3 py-2 text-left text-caption-2 text-display-on-light-secondary transition-colors hover:border-divider-secondary hover:bg-background-hover hover:text-display-on-light-primary",
+      className,
+    )}
+  >
+    <BulbIcon className="size-4 shrink-0 text-display-on-light-tertiary" />
+    <span>{label}</span>
+  </button>
+);

package/src/patterns/Chat/Suggestions.tsx

@@ -0,0 +1,21 @@
+import { cn } from "../../utils/cn";
+import { Suggestion } from "./Suggestion";
+
+export type SuggestionsProps = {
+  className?: string;
+};
+
+const placeholderSuggestions = [
+  "Summarize the latest inspection findings",
+  "What actions are required before next port call?",
+  "Compare with previous survey results",
+];
+
+export const Suggestions = ({ className }: SuggestionsProps) => (
+  <div className={cn("flex flex-col gap-2", className)} role="group" aria-label="Suggestions">
+    <p className="text-footnote-em text-display-on-light-tertiary">Suggested prompts</p>
+    {placeholderSuggestions.map((label) => (
+      <Suggestion key={label} label={label} />
+    ))}
+  </div>
+);

package/src/patterns/Chat/index.ts

@@ -0,0 +1,14 @@
+export { Attachment, type AttachmentProps } from "./Attachment";
+export { ChatEntry, type ChatEntryProps, type ChatEntryRole } from "./ChatEntry";
+export { ChatHeader, type ChatHeaderProps } from "./ChatHeader";
+export { ChatInput, type ChatInputProps } from "./ChatInput";
+export { ChatStatus, type ChatStatusProps } from "./ChatStatus";
+export { ChatTile, type ChatTileProps } from "./ChatTile";
+export { Copilot, type CopilotProps } from "./Copilot";
+export { Draft, type DraftProps } from "./Draft";
+export { Greeting, type GreetingProps } from "./Greeting";
+export { Reference, type ReferenceProps } from "./Reference";
+export { Source, type SourceProps } from "./Source";
+export { Sources, type SourcesProps } from "./Sources";
+export { Suggestion, type SuggestionProps } from "./Suggestion";
+export { Suggestions, type SuggestionsProps } from "./Suggestions";

package/src/patterns/Modal/Invitee.tsx

@@ -0,0 +1,44 @@
+import { Avatar, GroupedAvatars } from "../../primitives";
+import { InviteIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type InviteeVariant = "single" | "multiple";
+
+export type InviteeProps = {
+  variant?: InviteeVariant;
+  name?: string;
+  names?: string[];
+  className?: string;
+};
+
+export const Invitee = ({
+  variant = "single",
+  name = "Jordan Lee",
+  names = ["Jordan Lee", "Sam Patel", "Riley Chen"],
+  className,
+}: InviteeProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-3 rounded-control border border-divider-primary bg-background-primary px-3 py-2",
+      className,
+    )}
+    data-variant={variant}
+  >
+    {variant === "single" ? (
+      <Avatar chief="initials" size={32} initials={name} />
+    ) : (
+      <GroupedAvatars count={3} />
+    )}
+
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">
+        {variant === "single" ? name : `${names.length} invitees`}
+      </p>
+      <p className="text-footnote text-display-on-light-tertiary">
+        {variant === "single" ? "Pending invitation" : names.join(", ")}
+      </p>
+    </div>
+
+    <InviteIcon className="size-4 shrink-0 text-display-on-light-quaternary" />
+  </div>
+);

package/src/patterns/Modal/ModalFooter.tsx

@@ -0,0 +1,39 @@
+import { Button } from "../../primitives";
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ModalFooterProps = {
+  chief?: Chief;
+  className?: string;
+};
+
+const chiefLabels: Record<Chief, string> = {
+  technical: "Technical Chief",
+  compliance: "Compliance Chief",
+};
+
+export const ModalFooter = ({
+  chief = "technical",
+  className,
+}: ModalFooterProps) => (
+  <footer
+    className={cn(
+      "flex items-center justify-between gap-3 border-t border-divider-primary bg-background-secondary px-4 py-3",
+      className,
+    )}
+    data-chief={chief}
+  >
+    <div className="flex items-center gap-2">
+      <Avatar chief={chief} size={24} />
+      <span className="text-caption-2 text-display-on-light-secondary">
+        {chiefLabels[chief]}
+      </span>
+    </div>
+
+    <div className="flex items-center gap-2">
+      <Button hierarchy="secondary">Cancel</Button>
+      <Button hierarchy="primary">Confirm</Button>
+    </div>
+  </footer>
+);

package/src/patterns/Modal/ModalHeader.tsx

@@ -0,0 +1,77 @@
+import { type ReactNode } from "react";
+import { Avatar, IconButton, ThinkingDot } from "../../primitives";
+import {
+  CriticalIcon,
+  FormsIcon,
+  InformationIcon,
+  IssuesIcon,
+  ReportIcon,
+  SettingsIcon,
+} from "../../icons";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ModalHeaderVariant =
+  | "issue"
+  | "thinking"
+  | "generic"
+  | "settings"
+  | "audit"
+  | "forms";
+
+export type ModalHeaderProps = {
+  variant?: ModalHeaderVariant;
+  title?: string;
+  chief?: Chief;
+  onClose?: () => void;
+  className?: string;
+};
+
+const variantConfig: Record<
+  ModalHeaderVariant,
+  { icon: ReactNode; defaultTitle: string }
+> = {
+  issue: { icon: <IssuesIcon className="size-5" />, defaultTitle: "Issue details" },
+  thinking: { icon: <ThinkingDot />, defaultTitle: "Chief is thinking" },
+  generic: { icon: <InformationIcon className="size-5" />, defaultTitle: "Information" },
+  settings: { icon: <SettingsIcon className="size-5" />, defaultTitle: "Settings" },
+  audit: { icon: <ReportIcon className="size-5" />, defaultTitle: "Audit trail" },
+  forms: { icon: <FormsIcon className="size-5" />, defaultTitle: "Forms" },
+};
+
+export const ModalHeader = ({
+  variant = "generic",
+  title,
+  chief,
+  onClose,
+  className,
+}: ModalHeaderProps) => {
+  const config = variantConfig[variant];
+  const displayTitle = title ?? config.defaultTitle;
+
+  return (
+    <header
+      className={cn(
+        "flex items-center gap-3 border-b border-divider-primary bg-background-secondary px-4 py-3",
+        className,
+      )}
+      data-variant={variant}
+    >
+      <span className="shrink-0 text-display-on-light-tertiary">
+        {variant === "issue" ? <CriticalIcon className="size-5 text-meta-red" /> : config.icon}
+      </span>
+
+      {chief && <Avatar chief={chief} size={24} />}
+
+      <h2 className="min-w-0 flex-1 truncate text-subheader-em text-display-on-light-primary">
+        {displayTitle}
+      </h2>
+
+      {onClose && (
+        <IconButton hierarchy="quaternary" size="small" aria-label="Close" onClick={onClose}>
+          <span className="text-caption-1">✕</span>
+        </IconButton>
+      )}
+    </header>
+  );
+};

package/src/patterns/Modal/index.ts

@@ -0,0 +1,3 @@
+export { Invitee, type InviteeProps, type InviteeVariant } from "./Invitee";
+export { ModalFooter, type ModalFooterProps } from "./ModalFooter";
+export { ModalHeader, type ModalHeaderProps, type ModalHeaderVariant } from "./ModalHeader";

package/src/patterns/Search/Pill.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export type PillState = "idle" | "active";
+export type PillSize = "large" | "small";
+
+export type PillProps = {
+  state?: PillState;
+  size?: PillSize;
+  children: ReactNode;
+  className?: string;
+};
+
+const stateStyles: Record<PillState, string> = {
+  idle: "border-divider-primary bg-background-primary text-display-on-light-secondary hover:bg-background-hover",
+  active: "border-blue-300 bg-blue-50 text-blue-700",
+};
+
+const sizeStyles: Record<PillSize, string> = {
+  large: "px-4 py-2 text-caption-1",
+  small: "px-3 py-1 text-caption-2",
+};
+
+export const Pill = ({
+  state = "idle",
+  size = "large",
+  children,
+  className,
+}: PillProps) => (
+  <button
+    type="button"
+    className={cn(
+      "inline-flex items-center rounded-full border transition-colors",
+      stateStyles[state],
+      sizeStyles[size],
+      className,
+    )}
+    data-state={state}
+    data-size={size}
+    aria-pressed={state === "active"}
+  >
+    {children}
+  </button>
+);

package/src/patterns/Search/PillInfo.tsx

@@ -0,0 +1,41 @@
+import { Count } from "../../primitives";
+import { ChevronIcon, TickIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type PillInfoType = "count" | "completed" | "dropdown";
+
+export type PillInfoProps = {
+  type?: PillInfoType;
+  value?: number;
+  label?: string;
+  className?: string;
+};
+
+export const PillInfo = ({
+  type = "count",
+  value = 5,
+  label = "Filters",
+  className,
+}: PillInfoProps) => (
+  <span
+    className={cn(
+      "inline-flex items-center gap-1.5 text-footnote text-display-on-light-tertiary",
+      className,
+    )}
+    data-type={type}
+  >
+    {type === "count" && <Count value={value} />}
+    {type === "completed" && (
+      <>
+        <TickIcon className="size-3.5 text-meta-green" />
+        <span>Completed</span>
+      </>
+    )}
+    {type === "dropdown" && (
+      <>
+        <span>{label}</span>
+        <ChevronIcon direction="down" className="size-3.5" />
+      </>
+    )}
+  </span>
+);

package/src/patterns/Search/ResultRow.tsx

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type ResultRowVariant = "report" | "chat" | "issue";
+export type ResultRowState = "idle";
+
+export type ResultRowProps = {
+  variant?: ResultRowVariant;
+  state?: ResultRowState;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+};
+
+const variantIcons: Record<ResultRowVariant, ReactNode> = {
+  report: <ReportIcon className="size-5" />,
+  chat: <ChatIcon className="size-5" />,
+  issue: <IssuesIcon className="size-5" />,
+};
+
+const variantColors: Record<ResultRowVariant, string> = {
+  report: "text-meta-blue",
+  chat: "text-meta-purple",
+  issue: "text-meta-red",
+};
+
+export const ResultRow = ({
+  variant = "report",
+  state = "idle",
+  title = "Search result",
+  subtitle,
+  className,
+}: ResultRowProps) => (
+  <button
+    type="button"
+    className={cn(
+      "flex w-full items-center gap-3 rounded-control px-3 py-2 text-left transition-colors hover:bg-background-hover",
+      className,
+    )}
+    data-variant={variant}
+    data-state={state}
+  >
+    <span className={cn("shrink-0", variantColors[variant])}>{variantIcons[variant]}</span>
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-1-em text-display-on-light-primary">{title}</p>
+      {subtitle && (
+        <p className="truncate text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
+      )}
+    </div>
+  </button>
+);

package/src/patterns/Search/SearchModal.tsx

@@ -0,0 +1,88 @@
+import { SearchIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import { Pill } from "./Pill";
+import { ResultRow } from "./ResultRow";
+import { SectionHeader } from "./SectionHeader";
+
+export type SearchModalState = "idle" | "loading" | "results";
+
+export type SearchModalProps = {
+  state?: SearchModalState;
+  className?: string;
+};
+
+const placeholderResults = [
+  { variant: "report" as const, title: "Hull inspection report Q3", subtitle: "MV Atlantic Star" },
+  { variant: "chat" as const, title: "Port state control discussion", subtitle: "2 days ago" },
+  { variant: "issue" as const, title: "Critical valve malfunction", subtitle: "Open · High priority" },
+];
+
+export const SearchModal = ({ state = "idle", className }: SearchModalProps) => (
+  <div
+    className={cn(
+      "w-full max-w-xl overflow-hidden rounded-lg border border-divider-primary bg-background-primary shadow-raise2",
+      className,
+    )}
+    role="dialog"
+    aria-label="Search"
+    data-state={state}
+  >
+    <div className="flex items-center gap-2 border-b border-divider-primary px-4 py-3">
+      <SearchIcon className="size-5 shrink-0 text-display-on-light-quaternary" />
+      <input
+        type="search"
+        placeholder="Search reports, chats, and issues..."
+        className="flex-1 bg-transparent text-body text-display-on-light-primary placeholder:text-display-on-light-quaternary focus:outline-none"
+        aria-label="Search query"
+        readOnly
+        defaultValue={state === "results" ? "inspection" : ""}
+      />
+      {state === "loading" && (
+        <span className="size-4 animate-spin rounded-full border-2 border-divider-primary border-t-blue-600" />
+      )}
+    </div>
+
+    <div className="flex gap-2 px-4 py-2">
+      <Pill state={state === "results" ? "active" : "idle"} size="small">
+        All
+      </Pill>
+      <Pill state="idle" size="small">
+        Reports
+      </Pill>
+      <Pill state="idle" size="small">
+        Chats
+      </Pill>
+      <Pill state="idle" size="small">
+        Issues
+      </Pill>
+    </div>
+
+    <div className="max-h-80 overflow-y-auto px-2 pb-2">
+      {state === "idle" && (
+        <p className="px-2 py-8 text-center text-caption-2 text-display-on-light-tertiary">
+          Start typing to search across your workspace
+        </p>
+      )}
+
+      {state === "loading" && (
+        <p className="px-2 py-8 text-center text-caption-2 text-display-on-light-tertiary">
+          Searching...
+        </p>
+      )}
+
+      {state === "results" && (
+        <>
+          <SectionHeader label="Results" />
+          {placeholderResults.map((result) => (
+            <ResultRow
+              key={result.title}
+              variant={result.variant}
+              title={result.title}
+              subtitle={result.subtitle}
+            />
+          ))}
+        </>
+      )}
+    </div>
+  </div>
+);

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,5 @@
+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, type SearchModalProps, type SearchModalState } from "./SearchModal";
+export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";