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

package/src/stories/canvases/FormsCanvas.tsx

@@ -0,0 +1,71 @@
+import { ReportIcon } from "../../icons";
+import {
+  Checkbox,
+  Chip,
+  Input,
+  InputType,
+  ReportInput,
+} from "../../components";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaRow,
+  FigmaSection,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const FormsCanvas = () => (
+  <FigmaPage title="Forms" width={FIGMA_WIDTHS.forms}>
+    <FigmaContent>
+      <FigmaSection label="Input">
+        <div className="max-w-sm space-y-4">
+          <Input label="Vessel name" placeholder="Enter vessel name" />
+          <Input label="IMO number" value="9876543" state="edit" />
+          <Input label="Email" error="Invalid email address" />
+          <Input label="Port" placeholder="Enter port" state="disabled" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Report Input">
+        <div className="max-w-sm space-y-4">
+          <ReportInput />
+          <ReportInput value="Inspection findings summary..." state="edit" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Input Type">
+        <FigmaGrid gap={16}>
+          <InputType type="text" state="on" />
+          <InputType type="text" state="off" />
+          <InputType type="binary" state="on" />
+          <InputType type="binary" state="off" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Chip">
+        <FigmaGrid gap={16}>
+          <Chip variant="label" label="Status" />
+          <Chip variant="dot" label="Critical" dotColor="red" />
+          <Chip variant="icon" label="Report" icon={<ReportIcon size="small" />} />
+          <Chip variant="multiple" label="3 members" />
+          <Chip
+            variant="avatar"
+            label="Jordan Lee"
+            avatar={{ chief: "initials", initials: "JL" }}
+            onRemove={() => {}}
+          />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Checkbox">
+        <FigmaRow label="States">
+          <Checkbox label="Accept terms" />
+          <Checkbox checked label="Completed" />
+          <Checkbox indeterminate label="Partial selection" />
+          <Checkbox disabled label="Disabled" />
+        </FigmaRow>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/IconsCanvas.tsx

@@ -0,0 +1,99 @@
+import type { ComponentType, SVGProps } from "react";
+import { ArrowIcon, ChevronIcon, iconRegistry } from "../../icons";
+import type { IconProps } from "../../icons";
+import { FigmaContent, FigmaPage } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  FIGMA_ICONS_CONTENT,
+  FIGMA_ICON_FRAMES,
+  FIGMA_ICONS_GRID_HEIGHT,
+  FIGMA_ICONS_GRID_TOP,
+  FIGMA_ICON_RENDER_OFFSET,
+  type IconFrameSlot,
+} from "./figma-icons-layout";
+
+const renderSlot = (slot: IconFrameSlot, key: string) => {
+  if (slot.kind === "arrow") {
+    return (
+      <ArrowIcon
+        key={key}
+        direction={slot.direction}
+        size="large"
+        className="block text-display-on-light-primary"
+      />
+    );
+  }
+
+  if (slot.kind === "chevron") {
+    return (
+      <ChevronIcon
+        key={key}
+        direction={slot.direction}
+        size="small"
+        className="block text-display-on-light-primary"
+      />
+    );
+  }
+
+  const IconComponent = iconRegistry[slot.name] as ComponentType<
+    IconProps & SVGProps<SVGSVGElement>
+  >;
+
+  return (
+    <IconComponent
+      key={key}
+      size={slot.size}
+      filled={slot.filled}
+      variant={slot.variant}
+      className="block text-display-on-light-primary"
+    />
+  );
+};
+
+export const IconsCanvas = () => (
+  <FigmaPage title="Icons" width={FIGMA_WIDTHS.icons}>
+    <FigmaContent padding={0}>
+      <div
+        data-figma-icons-grid
+        className="relative overflow-hidden"
+        style={{
+          width: FIGMA_ICONS_CONTENT.width,
+          height: FIGMA_ICONS_GRID_HEIGHT,
+        }}
+      >
+        <div
+          className="relative"
+          style={{
+            width: FIGMA_ICONS_CONTENT.width,
+            height: FIGMA_ICONS_CONTENT.height,
+            marginTop: -FIGMA_ICONS_GRID_TOP,
+            transform: `translate(${FIGMA_ICON_RENDER_OFFSET.x}px, ${FIGMA_ICON_RENDER_OFFSET.y}px)`,
+          }}
+        >
+          {FIGMA_ICON_FRAMES.map((frame, frameIndex) => (
+            <div
+              key={frameIndex}
+              className="absolute rounded border border-dashed border-[#9747FF]"
+              style={{
+                left: frame.x,
+                top: frame.y,
+                width: frame.width,
+                height: frame.height,
+              }}
+            >
+              {frame.slots.map((slot, slotIndex) => (
+                <div
+                  key={slotIndex}
+                  className="absolute"
+                  style={{ left: slot.x, top: slot.y }}
+                >
+                  {renderSlot(slot, `${frameIndex}-${slotIndex}`)}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/IllustrationsCanvas.tsx

@@ -0,0 +1,50 @@
+import {
+  AuditPreparationIllustration,
+  CompletedTasksIllustration,
+  CreationIllustration,
+  InternalAuditIllustration,
+  InviteIllustration,
+  PortStateControlIllustration,
+  ProcessingIllustration,
+  QuestionsDoneIllustration,
+  RightShipInspectionIllustration,
+  UploadIllustration,
+  WorkflowCreatedIllustration,
+  WorkflowsIllustration,
+} from "../../illustrations";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const illustrations = [
+  { label: "Workflows", Component: WorkflowsIllustration },
+  { label: "Upload", Component: UploadIllustration },
+  { label: "Processing", Component: ProcessingIllustration },
+  { label: "Invite", Component: InviteIllustration },
+  { label: "Creation", Component: CreationIllustration },
+  { label: "Completed Tasks", Component: CompletedTasksIllustration },
+  { label: "Workflow Created", Component: WorkflowCreatedIllustration },
+  { label: "Audit Preparation", Component: AuditPreparationIllustration },
+  { label: "Port State Control", Component: PortStateControlIllustration },
+  { label: "RightShip Inspection", Component: RightShipInspectionIllustration },
+  { label: "Internal Audit", Component: InternalAuditIllustration },
+  { label: "Questions Done", Component: QuestionsDoneIllustration },
+] as const;
+
+export const IllustrationsCanvas = () => (
+  <FigmaPage title="Illustrations" width={FIGMA_WIDTHS.illustrations}>
+    <FigmaContent>
+      <FigmaGrid gap={32}>
+        {illustrations.map(({ label, Component }) => (
+          <FigmaVariant key={label} label={label}>
+            <Component className="h-32 w-40" />
+          </FigmaVariant>
+        ))}
+      </FigmaGrid>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/LibraryCanvas.tsx

@@ -0,0 +1,67 @@
+import {
+  File,
+  Folder,
+  Folders,
+  ListRow as LibraryListRow,
+  Navigation,
+} from "../../domain/Library";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const LibraryCanvas = () => (
+  <FigmaPage title="Library" width={FIGMA_WIDTHS.library}>
+    <FigmaContent>
+      <FigmaSection label="Folder">
+        <FigmaGrid gap={16}>
+          <Folder />
+          <Folder name="Crew documents" fileCount={12} state="selected" />
+          <Folder name="Certificates" fileCount={5} state="hover" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="File">
+        <FigmaGrid gap={16}>
+          <File />
+          <File state="uploading" />
+          <File state="waiting" />
+          <File state="uploaded" name="Safety certificate.pdf" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Navigation">
+        <div className="max-w-xs space-y-2">
+          <Navigation />
+          <Navigation label="Certificates" nested="on" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Folders">
+        <FigmaGrid gap={24}>
+          <FigmaVariant label="Expanded">
+            <div className="w-64">
+              <Folders />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Collapsed">
+            <div className="w-64">
+              <Folders layout="collapsed" />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="List Row">
+        <div className="max-w-xl space-y-2">
+          <LibraryListRow />
+          <LibraryListRow name="Safety certificate.pdf" updatedAt="Updated today" state="hover" />
+        </div>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ModalsCanvas.tsx

@@ -0,0 +1,54 @@
+import { Invitee, ModalFooter, ModalHeader } from "../../patterns/Modal";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const headerVariants = [
+  "issue",
+  "thinking",
+  "generic",
+  "settings",
+  "audit",
+  "forms",
+] as const;
+
+export const ModalsCanvas = () => (
+  <FigmaPage title="Modals" width={FIGMA_WIDTHS.modals}>
+    <FigmaContent>
+      <FigmaSection label="Modal Header">
+        <FigmaGrid gap={24}>
+          {headerVariants.map((variant) => (
+            <FigmaVariant key={variant} label={variant}>
+              <div className="w-96">
+                <ModalHeader variant={variant} onClose={() => {}} />
+              </div>
+            </FigmaVariant>
+          ))}
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Modal Footer">
+        <FigmaGrid gap={24}>
+          <div className="w-96">
+            <ModalFooter />
+          </div>
+          <div className="w-96">
+            <ModalFooter chief="compliance" />
+          </div>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Invitee">
+        <FigmaGrid gap={24}>
+          <Invitee />
+          <Invitee variant="multiple" names={["Jordan Lee", "Sam Patel", "Alex Morgan"]} />
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/RaiseLevelsCanvas.tsx

@@ -0,0 +1,27 @@
+import { elevation } from "../../tokens/elevation";
+import { FigmaContent, FigmaGrid, FigmaPage } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const raiseLevels = [
+  { label: "Raise 1", shadow: elevation.raise1 },
+  { label: "Raise 2", shadow: elevation.raise2 },
+  { label: "Raise 3", shadow: elevation.raise3 },
+] as const;
+
+export const RaiseLevelsCanvas = () => (
+  <FigmaPage title="Raise Levels" width={FIGMA_WIDTHS.raiseLevels}>
+    <FigmaContent>
+      <FigmaGrid gap={24}>
+        {raiseLevels.map((level) => (
+          <div
+            key={level.label}
+            className="flex size-[200px] items-center justify-center rounded-control bg-white text-heading text-display-on-light-primary"
+            style={{ boxShadow: level.shadow }}
+          >
+            {level.label}
+          </div>
+        ))}
+      </FigmaGrid>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ReportCanvas.tsx

@@ -0,0 +1,33 @@
+import { SectionHeader, TaskRow } from "../../domain/Report";
+import {
+  FigmaContent,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ReportCanvas = () => (
+  <FigmaPage title="Report" width={FIGMA_WIDTHS.report}>
+    <FigmaContent>
+      <FigmaSection label="Section Header">
+        <div className="max-w-xl space-y-4">
+          <SectionHeader />
+          <SectionHeader title="Outstanding actions" subtitle="2 tasks remaining">
+            <TaskRow label="Review fire safety documentation" />
+            <TaskRow label="Confirm crew certification records" />
+          </SectionHeader>
+          <SectionHeader title="Completed" collapsed="on" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Task Row">
+        <div className="max-w-xl space-y-2">
+          <TaskRow />
+          <TaskRow label="Confirm crew certification records" strikethrough="on" />
+          <TaskRow variant="add-more" />
+          <TaskRow hover="on" />
+        </div>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ReportLayoutCanvas.tsx

@@ -0,0 +1,19 @@
+import { Report } from "../../domain/Report";
+import {
+  FigmaContent,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ReportLayoutCanvas = () => (
+  <FigmaPage title="Report Layout" width={FIGMA_WIDTHS.reportLayout}>
+    <FigmaContent>
+      <FigmaSection label="Report">
+        <div className="max-w-3xl">
+          <Report title="Internal Audit Report" />
+        </div>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/SearchCanvas.tsx

@@ -0,0 +1,150 @@
+import {
+  Pill,
+  PillInfo,
+  ResultRow,
+  SearchModalPanel,
+  SectionHeader,
+} from "../../patterns/Search";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const recentItems = [
+  { variant: "report" as const, title: "Engine Room Oil Leak" },
+  { variant: "chat" as const, title: "Low Water Pressure on Board" },
+  {
+    variant: "chat" as const,
+    title: "Generator Vibrating Excessively",
+    state: "active" as const,
+  },
+  {
+    variant: "issue" as const,
+    title:
+      "Intermittent Flickering of Navigation Lights Possibly Due to Bulb Failure or Signal Unit Errors",
+  },
+];
+
+const resultItems = [
+  {
+    variant: "report" as const,
+    title: "Persistent Engine Room Oil Leak",
+    subtitle: (
+      <>
+        We’ve got a persistent oil leak from the{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>
+        . I’ve tightened what I could, but it keeps seeping.
+      </>
+    ),
+  },
+  {
+    variant: "chat" as const,
+    title: "Ballast Pump Not Starting",
+    subtitle: (
+      <>
+        The{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>{" "}
+        won’t start consistently. Sometimes it works, sometimes it doesn’t.
+      </>
+    ),
+  },
+  {
+    variant: "issue" as const,
+    title:
+      "Excessive Rust on Fuel Pump and Piping with Unclear Material Specifications and Corrosion Protection Measures",
+    subtitle: "Created by Jake Silva on March 28",
+    state: "active" as const,
+  },
+  {
+    variant: "report" as const,
+    title: "Engine Room Oil Leak",
+    subtitle: (
+      <>
+        We’ve spotted a steady oil leak near the{" "}
+        <span className="text-caption-2-em text-display-on-light-primary">
+          fuel pump
+        </span>
+        . Not sure if it’s a gasket or a cracked line.
+      </>
+    ),
+  },
+];
+
+export const SearchCanvas = () => (
+  <FigmaPage title="Search" width={FIGMA_WIDTHS.search}>
+    <FigmaContent>
+      <FigmaSection label="Pill">
+        <FigmaGrid gap={16}>
+          <Pill>All</Pill>
+          <Pill state="active">Reports</Pill>
+          <Pill size="small">Issues</Pill>
+          <Pill size="small" state="active">
+            Chats
+          </Pill>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Pill Info">
+        <FigmaGrid gap={16}>
+          <PillInfo />
+          <PillInfo type="completed" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Result Row">
+        <div className="max-w-xl space-y-2">
+          <ResultRow />
+          <ResultRow
+            variant="chat"
+            title="Port state control discussion"
+            subtitle="2 days ago"
+          />
+          <ResultRow
+            variant="issue"
+            title="Critical valve malfunction"
+            subtitle="Open · High priority"
+          />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Section Header">
+        <div className="max-w-xl">
+          <SectionHeader label="Reports" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Search Modal">
+        <FigmaGrid gap={32}>
+          <FigmaVariant label="Idle">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel state="idle" recentItems={recentItems} />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Loading">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel state="loading" query="fuel pump" />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Results">
+            <div className="w-[700px] overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3">
+              <SearchModalPanel
+                state="results"
+                query="fuel pump"
+                filter="all"
+                resultItems={resultItems}
+              />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/SettingsCanvas.tsx

@@ -0,0 +1,41 @@
+import { EquipmentRow, MemberRow, SettingRow } from "../../domain/Settings";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const SettingsCanvas = () => (
+  <FigmaPage title="Settings" width={FIGMA_WIDTHS.settings}>
+    <FigmaContent>
+      <FigmaSection label="Setting Row">
+        <div className="max-w-xl space-y-2">
+          <SettingRow />
+          <SettingRow variant="user" label="Jane Doe" subtitle="Admin" state="selected" />
+          <SettingRow state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Member Row">
+        <div className="max-w-xl space-y-2">
+          <MemberRow />
+          <MemberRow name="Sam Patel" role="Captain" action="button" />
+          <MemberRow name="Alex Morgan" role="Chief Engineer" state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Equipment Row">
+        <FigmaGrid gap={16}>
+          <div className="w-96">
+            <EquipmentRow />
+          </div>
+          <div className="w-96">
+            <EquipmentRow name="Auxiliary engine" type="Wärtsilä 6L20" editable="off" />
+          </div>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ShipsCanvas.tsx

@@ -0,0 +1,38 @@
+import { ShipRow } from "../../domain/Ships";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ShipsCanvas = () => (
+  <FigmaPage title="Ships" width={FIGMA_WIDTHS.ships}>
+    <FigmaContent>
+      <FigmaSection label="Ship Row">
+        <div className="max-w-xl space-y-2">
+          <ShipRow />
+          <ShipRow name="MV Atlantic Star" chatCount={5} issueCount={2} unreadCount={3} />
+          <ShipRow name="MV Pacific Dawn" state="hover" chatCount={1} issueCount={0} />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Variants">
+        <FigmaGrid gap={24}>
+          <FigmaVariant label="Idle">
+            <div className="w-80">
+              <ShipRow name="MV Nordic Wind" />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Hover">
+            <div className="w-80">
+              <ShipRow name="MV Nordic Wind" state="hover" />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);