@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/src/stories/canvases/ButtonsMatrixCanvas.tsx

@@ -1,65 +1,65 @@
-import { AddIcon } from "../../icons";
-import { Button } from "../../primitives";
-import {
-  FigmaContent,
-  FigmaPage,
-  FigmaRow,
-  FigmaSection,
-} from "../_layout";
-import { ButtonSnapshot } from "./helpers";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-const hierarchies = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "quaternary",
-  "destructive",
-] as const;
-const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
-const rowLabels = ["Idle", "Hover", "Disabled"];
-
-export const ButtonsMatrixCanvas = () => (
-  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttonsMatrix}>
-    <FigmaContent>
-      <FigmaSection>
-        <div className="mb-4 grid grid-cols-[104px_repeat(5,1fr)] gap-4">
-          <div />
-          {columnLabels.map((label) => (
-            <p key={label} className="text-center text-caption-1 text-display-on-light-secondary">
-              {label}
-            </p>
-          ))}
-        </div>
-
-        {rowLabels.map((rowLabel) => (
-          <FigmaRow key={rowLabel} label={rowLabel} gap={24}>
-            <div className="w-24" />
-            {hierarchies.map((hierarchy) => (
-              <ButtonSnapshot
-                key={hierarchy}
-                hierarchy={hierarchy}
-                visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
-              />
-            ))}
-          </FigmaRow>
-        ))}
-
-        <FigmaRow label="Idle" gap={24}>
-          <div className="w-24" />
-          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
-            New chat
-          </Button>
-        </FigmaRow>
-
-        <FigmaRow label="Hover" gap={24}>
-          <div className="w-24" />
-          <span className="inline-flex min-h-10 min-w-[304px] items-center justify-center gap-2 rounded-control bg-action-primary-hover px-2 text-caption-1 text-action-primary-on-hover">
-            <AddIcon />
-            New chat
-          </span>
-        </FigmaRow>
-      </FigmaSection>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { AddIcon } from "../../icons";
+import { Button } from "../../primitives";
+import {
+  FigmaContent,
+  FigmaPage,
+  FigmaRow,
+  FigmaSection,
+} from "../_layout";
+import { ButtonSnapshot } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const hierarchies = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "destructive",
+] as const;
+const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
+const rowLabels = ["Idle", "Hover", "Disabled"];
+
+export const ButtonsMatrixCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttonsMatrix}>
+    <FigmaContent>
+      <FigmaSection>
+        <div className="mb-4 grid grid-cols-[104px_repeat(5,1fr)] gap-4">
+          <div />
+          {columnLabels.map((label) => (
+            <p key={label} className="text-center text-caption-1 text-display-on-light-secondary">
+              {label}
+            </p>
+          ))}
+        </div>
+
+        {rowLabels.map((rowLabel) => (
+          <FigmaRow key={rowLabel} label={rowLabel} gap={24}>
+            <div className="w-24" />
+            {hierarchies.map((hierarchy) => (
+              <ButtonSnapshot
+                key={hierarchy}
+                hierarchy={hierarchy}
+                visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
+              />
+            ))}
+          </FigmaRow>
+        ))}
+
+        <FigmaRow label="Idle" gap={24}>
+          <div className="w-24" />
+          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
+            New chat
+          </Button>
+        </FigmaRow>
+
+        <FigmaRow label="Hover" gap={24}>
+          <div className="w-24" />
+          <span className="inline-flex min-h-10 min-w-[304px] items-center justify-center gap-2 rounded-control bg-action-primary-hover px-2 text-caption-1 text-action-primary-on-hover">
+            <AddIcon />
+            New chat
+          </span>
+        </FigmaRow>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ContentCanvas.tsx

@@ -1,14 +1,17 @@
-import { Button } from "../../primitives";
+import { Badge, Button, IconButton, Avatar } from "../../primitives";
 import {
   EmptyState,
   Entry,
   Header,
+  PageHeader,
+  ScrollableList,
   Tab,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "../../components";
+import { FormsIcon, MoreIcon, ShipIcon, TickIcon } from "../../icons";
 import { WorkflowsIllustration } from "../../illustrations";
 import {
   FigmaContent,
@@ -19,6 +22,125 @@ import {
 } from "../_layout";
 import { FIGMA_WIDTHS } from "./figma-widths";
 
+const demoActions = (
+  <>
+    <Button hierarchy="secondary">Button</Button>
+    <IconButton hierarchy="tertiary" size="small" aria-label="More">
+      <MoreIcon size="small" />
+    </IconButton>
+  </>
+);
+
+type DemoRow = {
+  title: string;
+  assignee?: string;
+  unassigned?: boolean;
+  signatures?: number[];
+  date: string;
+  vessel: string;
+  initials: string;
+  avatarClassName: string;
+};
+
+const DEMO_ROWS: DemoRow[] = [
+  {
+    title: "Cargo Tank Cleaning for Grade Change",
+    assignee: "Dimitris Konstantinou",
+    signatures: [1, 2, 3],
+    date: "23/04/2026",
+    vessel: "The Coral Explorer",
+    initials: "MS",
+    avatarClassName: "bg-purple-500 text-white",
+  },
+  {
+    title: "Hot Work in Engine Room",
+    assignee: "Dimitris Konstantinou",
+    signatures: [1, 2, 3],
+    date: "23/04/2026",
+    vessel: "Ocean Voyager",
+    initials: "PO",
+    avatarClassName: "bg-blue-700 text-white",
+  },
+  {
+    title: "Enclosed Space Entry in Ballast Tank",
+    assignee: "Yiannis Papadopoulos",
+    signatures: [1],
+    date: "23/04/2026",
+    vessel: "Ocean Voyager",
+    initials: "PO",
+    avatarClassName: "bg-blue-700 text-white",
+  },
+  {
+    title: "Working at Height on Deck Crane",
+    assignee: "Yiannis Papadopoulos",
+    date: "23/04/2026",
+    vessel: "Albatross Wind",
+    initials: "LD",
+    avatarClassName: "bg-grey-700 text-white",
+  },
+  {
+    title: "Electrical Isolation for Switchboard Maintenance",
+    assignee: "Dimitris Konstantinou",
+    signatures: [1, 2, 3],
+    date: "23/04/2026",
+    vessel: "The Coral Explorer",
+    initials: "MS",
+    avatarClassName: "bg-purple-500 text-white",
+  },
+  {
+    title: "Pilot Ladder Rigging in High Swell",
+    unassigned: true,
+    date: "23/04/2026",
+    vessel: "Albatross Wind",
+    initials: "",
+    avatarClassName: "",
+  },
+];
+
+function DemoListRow({ row }: { row: DemoRow }) {
+  return (
+    <div className="flex h-12 w-full shrink-0 items-center gap-2 rounded-lg p-2">
+      <FormsIcon size="large" className="shrink-0 text-display-on-light-primary" />
+      <div className="flex min-w-0 flex-1 items-center gap-8">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <p className="shrink-0 truncate text-body text-display-on-light-primary">
+            {row.title}
+          </p>
+          <div className="flex shrink-0 items-start gap-1">
+            {row.unassigned ? (
+              <Badge color="red">Unassigned</Badge>
+            ) : row.assignee ? (
+              <Badge color="grey">{row.assignee}</Badge>
+            ) : null}
+            {row.signatures?.map((n) => (
+              <Badge key={n} color="orange" type="icon">
+                {n}
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <div className="w-[90px] shrink-0 text-caption-2 text-display-on-light-secondary">
+          {row.date}
+        </div>
+        <div className="w-[150px] shrink-0 truncate text-caption-2 text-display-on-light-secondary">
+          {row.vessel}
+        </div>
+        {row.initials ? (
+          <Avatar
+            chief="initials"
+            size={24}
+            initials={row.initials}
+            className={row.avatarClassName}
+          />
+        ) : (
+          <span className="size-6 shrink-0" aria-hidden />
+        )}
+      </div>
+    </div>
+  );
+}
+
+
 export const ContentCanvas = () => (
   <FigmaPage title="Content" width={FIGMA_WIDTHS.content}>
     <FigmaContent>
@@ -39,37 +161,130 @@ export const ContentCanvas = () => (
                 <TabsTrigger value="reports">Reports</TabsTrigger>
                 <TabsTrigger value="issues">Issues</TabsTrigger>
               </TabsList>
-              <TabsContent value="all" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="all"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 All content
               </TabsContent>
-              <TabsContent value="reports" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="reports"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Reports content
               </TabsContent>
-              <TabsContent value="issues" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="issues"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Issues content
               </TabsContent>
             </Tabs>
           </FigmaVariant>
-          <FigmaVariant label="Pills">
-            <Tabs defaultValue="active" type="pills">
+          <FigmaVariant label="Pills · soft">
+            <Tabs defaultValue="active" type="pills" appearance="soft">
               <TabsList>
                 <TabsTrigger value="active">Active</TabsTrigger>
-                <TabsTrigger value="completed" count={3}>
+                <TabsTrigger value="completed">
                   Completed
+                  <Badge color="blue">3</Badge>
                 </TabsTrigger>
               </TabsList>
-              <TabsContent value="active" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="active"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Active content
               </TabsContent>
-              <TabsContent value="completed" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="completed"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Completed content
               </TabsContent>
             </Tabs>
           </FigmaVariant>
+          <FigmaVariant label="Pills · solid">
+            <Tabs defaultValue="chat" type="pills" appearance="solid">
+              <TabsList>
+                <TabsTrigger value="chat">Chat</TabsTrigger>
+                <TabsTrigger value="questions">
+                  Questions
+                  <Badge color="grey">208</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="review">
+                  Review
+                  <Badge color="green" type="icon">
+                    <TickIcon size="xs" />
+                  </Badge>
+                </TabsTrigger>
+                <TabsTrigger value="gaps">
+                  Gaps
+                  <Badge color="grey">47</Badge>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </FigmaVariant>
         </div>
       </FigmaSection>
 
-      <FigmaSection label="Header">
+      <FigmaSection label="PageHeader">
+        <div className="max-w-[1120px] space-y-8">
+          <FigmaVariant label="Standard">
+            <PageHeader
+              icon={<ShipIcon size="large" />}
+              title="Title"
+              actions={demoActions}
+            />
+          </FigmaVariant>
+          <FigmaVariant label="Nested">
+            <PageHeader
+              icon={<ShipIcon size="large" />}
+              title="Title"
+              crumbs={[{ label: "Parent", href: "#parent" }]}
+              actions={demoActions}
+            />
+          </FigmaVariant>
+          <FigmaVariant label="Shell (pinned header)">
+            <div className="h-64 overflow-hidden rounded-control border border-divider-primary">
+              <PageHeader.Shell className="bg-background-primary p-4">
+                <PageHeader
+                  icon={<ShipIcon size="large" />}
+                  title="Fleet"
+                  crumbs={[{ label: "Ships", href: "#ships" }]}
+                  actions={demoActions}
+                />
+                <PageHeader.Body className="mt-4 space-y-2 text-caption-2 text-display-on-light-secondary">
+                  {Array.from({ length: 20 }, (_, i) => (
+                    <p key={i}>Scrollable body line {i + 1}</p>
+                  ))}
+                </PageHeader.Body>
+              </PageHeader.Shell>
+            </div>
+          </FigmaVariant>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="ScrollableList (Table)">
+        <FigmaVariant label="Column header + scrolling body">
+          <div className="flex h-[420px] w-full max-w-[960px] flex-col">
+            <ScrollableList>
+              <ScrollableList.Header>
+                <span className="min-w-0 flex-1">Title</span>
+                <span className="w-[90px] shrink-0">Date</span>
+                <span className="w-[210px] shrink-0">Vessel</span>
+              </ScrollableList.Header>
+              <ScrollableList.Body>
+                {DEMO_ROWS.map((row) => (
+                  <DemoListRow key={row.title} row={row} />
+                ))}
+              </ScrollableList.Body>
+            </ScrollableList>
+          </div>
+        </FigmaVariant>
+      </FigmaSection>
+
+      <FigmaSection label="Header (legacy)">
         <div className="max-w-xl space-y-4">
           <Header title="Fleet overview" />
           <Header
@@ -82,9 +297,31 @@ export const ContentCanvas = () => (
 
       <FigmaSection label="Entry">
         <div className="max-w-xl space-y-2">
-          <Entry type="chat" title="Hull inspection report" subtitle="2 hours ago" meta="17" />
-          <Entry type="issue" title="Critical valve malfunction" state="selected" meta="High" />
-          <Entry type="chat" title="Port state control checklist" subtitle="Yesterday" className="bg-background-hover" />
+          <Entry
+            variant="chat"
+            title="Hull inspection report"
+            subtitle="We’ve got a persistent oil leak from the fuel pump."
+          />
+          <Entry
+            variant="chat"
+            state="active"
+            title="Ballast Pump Not Starting"
+            subtitle="The fuel pump won’t start consistently."
+            trailing={
+              <span className="text-display-on-light-secondary">···</span>
+            }
+          />
+          <Entry
+            variant="issue"
+            title="Excessive Rust on Fuel Pump"
+            subtitle="Created by Jake Silva on March 28"
+            count={3}
+          />
+          <Entry
+            variant="report"
+            title="Engine Room Oil Leak"
+            subtitle="We’ve spotted a steady oil leak near the fuel pump."
+          />
         </div>
       </FigmaSection>
 
@@ -102,7 +339,9 @@ export const ContentCanvas = () => (
             <div className="w-80">
               <EmptyState
                 title="No reports"
-                illustration={<WorkflowsIllustration className="mx-auto h-24 w-32" />}
+                illustration={
+                  <WorkflowsIllustration className="mx-auto h-24 w-32" />
+                }
                 action={{ children: "Create report", hierarchy: "primary" }}
               />
             </div>

package/src/stories/canvases/FiltersCanvas.tsx

@@ -1,41 +1,171 @@
-import {
-  FiltersBar,
-  FilteredPill,
-  FilterPill,
-} from "../../domain/Filters";
-import {
-  FigmaContent,
-  FigmaGrid,
-  FigmaPage,
-  FigmaSection,
-} from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-export const FiltersCanvas = () => (
-  <FigmaPage title="Filters" width={FIGMA_WIDTHS.filters}>
-    <FigmaContent>
-      <FigmaSection label="Filter Pill">
-        <FigmaGrid gap={16}>
-          <FilterPill />
-          <FilterPill indicator="on" />
-        </FigmaGrid>
-      </FigmaSection>
-
-      <FigmaSection label="Filtered Pill">
-        <FigmaGrid gap={16}>
-          <FilteredPill />
-          <FilteredPill label="Status: Open" count={5} />
-          <FilteredPill label="Priority: High" count={2} state="hover" />
-        </FigmaGrid>
-      </FigmaSection>
-
-      <FigmaSection label="Filters Bar">
-        <div className="space-y-6">
-          <FiltersBar />
-          <FiltersBar filters="on" activeTab="Reports" />
-          <FiltersBar tabs="off" searchPlaceholder="Search workflows..." />
-        </div>
-      </FigmaSection>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { useMemo, useState } from "react";
+import {
+  FilterDropdown,
+  FilterPill,
+  FilterPills,
+  FilteredPill,
+  FiltersBar,
+  formatActiveFilterChipLabel,
+  type FilterCategoryRow,
+} from "../../domain/Filters";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const demoOptions = {
+  status: [
+    { value: "approved", label: "Approved" },
+    { value: "reviewed", label: "Reviewed" },
+    { value: "pending", label: "Pending" },
+  ],
+  vessel: [
+    { value: "aurora", label: "Aurora" },
+    { value: "north", label: "North Star" },
+  ],
+};
+
+export const FiltersCanvas = () => {
+  const [status, setStatus] = useState<string[]>([]);
+  const [vessel, setVessel] = useState<string[]>([]);
+  const [groupByVessel, setGroupByVessel] = useState(false);
+
+  const selectedValuesBySelectionKey = useMemo(
+    () => ({ status, vessel }),
+    [status, vessel],
+  );
+
+  const categoryRows: FilterCategoryRow[] = useMemo(
+    () => [
+      {
+        id: "status",
+        label: "Status",
+        content: {
+          type: "options",
+          selectionKey: "status",
+          selectionMode: "multi",
+          options: demoOptions.status,
+        },
+      },
+      {
+        id: "vessel",
+        label: "Vessel",
+        content: {
+          type: "options",
+          selectionKey: "vessel",
+          selectionMode: "multi",
+          options: demoOptions.vessel,
+        },
+      },
+      {
+        kind: "toggle",
+        id: "group",
+        label: "Group by Vessel",
+        checked: groupByVessel,
+        onCheckedChange: setGroupByVessel,
+      },
+    ],
+    [groupByVessel],
+  );
+
+  const chips = useMemo(() => {
+    const next: {
+      key: string;
+      label: string;
+      onRemove: () => void;
+    }[] = [];
+    if (status.length > 0) {
+      const labels = status.map(
+        (v) => demoOptions.status.find((o) => o.value === v)?.label ?? v,
+      );
+      next.push({
+        key: "status",
+        label: formatActiveFilterChipLabel("Status", labels),
+        onRemove: () => setStatus([]),
+      });
+    }
+    if (vessel.length > 0) {
+      const labels = vessel.map(
+        (v) => demoOptions.vessel.find((o) => o.value === v)?.label ?? v,
+      );
+      next.push({
+        key: "vessel",
+        label: formatActiveFilterChipLabel("Vessel", labels),
+        onRemove: () => setVessel([]),
+      });
+    }
+    return next;
+  }, [status, vessel]);
+
+  const activeFilterCount = chips.length;
+
+  return (
+    <FigmaPage title="Filters" width={FIGMA_WIDTHS.filters}>
+      <FigmaContent>
+        <FigmaSection label="Filter Pill (trigger)">
+          <FigmaGrid gap={16}>
+            <FilterPill />
+            <FilterPill activeFilterCount={2} />
+            <FilterPill appearance="ghost" />
+            <FilterPill appearance="ghost" activeFilterCount={2} />
+          </FigmaGrid>
+        </FigmaSection>
+
+        <FigmaSection label="Filtered Pill">
+          <FigmaGrid gap={16}>
+            <FilteredPill label="Approved" onRemove={() => undefined} />
+            <FilteredPill label="Reviewed" onRemove={() => undefined} />
+          </FigmaGrid>
+        </FigmaSection>
+
+        <FigmaSection label="FilterDropdown + FilterPills (interactive)">
+          <div className="flex w-full items-center justify-between gap-4">
+            <FilterPills chips={chips} />
+            <div className="flex shrink-0 items-center gap-4">
+              <FilterDropdown
+                align="end"
+                submenuSide="left"
+                triggerAppearance="ghost"
+                categoryRows={categoryRows}
+                selectedValuesBySelectionKey={selectedValuesBySelectionKey}
+                activeFilterCount={activeFilterCount}
+                onSelectOption={(key, value) => {
+                  if (key === "status") {
+                    setStatus((prev) =>
+                      prev.includes(value)
+                        ? prev.filter((v) => v !== value)
+                        : [...prev, value],
+                    );
+                  }
+                  if (key === "vessel") {
+                    setVessel((prev) =>
+                      prev.includes(value)
+                        ? prev.filter((v) => v !== value)
+                        : [...prev, value],
+                    );
+                  }
+                }}
+                onResetAll={() => {
+                  setStatus([]);
+                  setVessel([]);
+                  setGroupByVessel(false);
+                }}
+              />
+            </div>
+          </div>
+        </FigmaSection>
+
+        <FigmaSection label="Filters Bar (layout stub)">
+          <div className="space-y-6">
+            <FiltersBar />
+            <FiltersBar filters="on" activeTab="Reports" />
+            <FiltersBar tabs="off" searchPlaceholder="Search workflows..." />
+          </div>
+        </FigmaSection>
+      </FigmaContent>
+    </FigmaPage>
+  );
+};