@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.21

package/src/stories/canvases/FiltersCanvas.tsx

@@ -1,7 +1,12 @@
+import { useMemo, useState } from "react";
 import {
-  FiltersBar,
-  FilteredPill,
+  FilterDropdown,
   FilterPill,
+  FilterPills,
+  FilteredPill,
+  FiltersBar,
+  formatActiveFilterChipLabel,
+  type FilterCategoryRow,
 } from "../../domain/Filters";
 import {
   FigmaContent,
@@ -11,31 +16,152 @@ import {
 } 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>
-);
+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} />
+          </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"
+                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>
+  );
+};

package/src/stories/canvases/SearchCanvas.tsx

@@ -1,150 +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>
-);
+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/figma-buttons-layout.ts

@@ -1,83 +1,83 @@
-/** Figma Buttons > Content > Button frame — 414×312, slots 106×40 */
-
-export const FIGMA_BUTTONS_GRID = {
-  width: 414,
-  height: 312,
-} as const;
-
-export type ButtonVisualState = "idle" | "hover" | "disabled";
-
-export type ButtonGridSlot = {
-  hierarchy:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "quaternary"
-    | "destructive";
-  visualState: ButtonVisualState;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-const BUTTON_WIDTH = 106;
-const BUTTON_HEIGHT = 40;
-const COLUMN_X = [24, 154, 284] as const;
-const ROW_Y = [24, 80, 136, 192, 248] as const;
-
-const hierarchies = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "quaternary",
-  "destructive",
-] as const;
-
-const visualStates: ButtonVisualState[] = ["idle", "hover", "disabled"];
-
-export const FIGMA_BUTTON_SLOTS: ButtonGridSlot[] = hierarchies.flatMap(
-  (hierarchy, rowIndex) =>
-    visualStates.map((visualState, columnIndex) => ({
-      hierarchy,
-      visualState,
-      x: COLUMN_X[columnIndex],
-      y: ROW_Y[rowIndex],
-      width: BUTTON_WIDTH,
-      height: BUTTON_HEIGHT,
-    })),
-);
-
-export type ButtonVariantSlot = {
-  hierarchy: (typeof hierarchies)[number];
-  variant: "noIcon" | "noDropdown";
-  x: number;
-  y: number;
-};
-
-const VARIANT_COLUMN_X = [414, 544] as const;
-
-/** Extra canvas slots — excluded from `data-figma-buttons-grid` visual clip */
-export const BUTTON_VARIANT_SLOTS: ButtonVariantSlot[] = hierarchies.flatMap(
-  (hierarchy, rowIndex) => [
-    {
-      hierarchy,
-      variant: "noIcon" as const,
-      x: VARIANT_COLUMN_X[0],
-      y: ROW_Y[rowIndex],
-    },
-    {
-      hierarchy,
-      variant: "noDropdown" as const,
-      x: VARIANT_COLUMN_X[1],
-      y: ROW_Y[rowIndex],
-    },
-  ],
-);
-
-export const FIGMA_BUTTONS_CANVAS = {
-  figmaGridWidth: FIGMA_BUTTONS_GRID.width,
-  figmaGridHeight: FIGMA_BUTTONS_GRID.height,
-  width: VARIANT_COLUMN_X[1] + BUTTON_WIDTH + 24,
-  height: FIGMA_BUTTONS_GRID.height,
-} as const;
+/** Figma Buttons > Content > Button frame — 414×312, slots 106×40 */
+
+export const FIGMA_BUTTONS_GRID = {
+  width: 414,
+  height: 312,
+} as const;
+
+export type ButtonVisualState = "idle" | "hover" | "disabled";
+
+export type ButtonGridSlot = {
+  hierarchy:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "quaternary"
+    | "destructive";
+  visualState: ButtonVisualState;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+const BUTTON_WIDTH = 106;
+const BUTTON_HEIGHT = 40;
+const COLUMN_X = [24, 154, 284] as const;
+const ROW_Y = [24, 80, 136, 192, 248] as const;
+
+const hierarchies = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "destructive",
+] as const;
+
+const visualStates: ButtonVisualState[] = ["idle", "hover", "disabled"];
+
+export const FIGMA_BUTTON_SLOTS: ButtonGridSlot[] = hierarchies.flatMap(
+  (hierarchy, rowIndex) =>
+    visualStates.map((visualState, columnIndex) => ({
+      hierarchy,
+      visualState,
+      x: COLUMN_X[columnIndex],
+      y: ROW_Y[rowIndex],
+      width: BUTTON_WIDTH,
+      height: BUTTON_HEIGHT,
+    })),
+);
+
+export type ButtonVariantSlot = {
+  hierarchy: (typeof hierarchies)[number];
+  variant: "noIcon" | "noDropdown";
+  x: number;
+  y: number;
+};
+
+const VARIANT_COLUMN_X = [414, 544] as const;
+
+/** Extra canvas slots — excluded from `data-figma-buttons-grid` visual clip */
+export const BUTTON_VARIANT_SLOTS: ButtonVariantSlot[] = hierarchies.flatMap(
+  (hierarchy, rowIndex) => [
+    {
+      hierarchy,
+      variant: "noIcon" as const,
+      x: VARIANT_COLUMN_X[0],
+      y: ROW_Y[rowIndex],
+    },
+    {
+      hierarchy,
+      variant: "noDropdown" as const,
+      x: VARIANT_COLUMN_X[1],
+      y: ROW_Y[rowIndex],
+    },
+  ],
+);
+
+export const FIGMA_BUTTONS_CANVAS = {
+  figmaGridWidth: FIGMA_BUTTONS_GRID.width,
+  figmaGridHeight: FIGMA_BUTTONS_GRID.height,
+  width: VARIANT_COLUMN_X[1] + BUTTON_WIDTH + 24,
+  height: FIGMA_BUTTONS_GRID.height,
+} as const;