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

package/src/stories/canvases/SearchCanvas.tsx

@@ -1,65 +1,150 @@
-import { Pill, PillInfo, ResultRow, SearchModal, SectionHeader } from "../../patterns/Search";
-import {
-  FigmaContent,
-  FigmaGrid,
-  FigmaPage,
-  FigmaSection,
-  FigmaVariant,
-} from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-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-[480px]">
-              <SearchModal state="idle" />
-            </div>
-          </FigmaVariant>
-          <FigmaVariant label="Loading">
-            <div className="w-[480px]">
-              <SearchModal state="loading" />
-            </div>
-          </FigmaVariant>
-          <FigmaVariant label="Results">
-            <div className="w-[480px]">
-              <SearchModal state="results" />
-            </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

@@ -0,0 +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;

package/src/stories/canvases/helpers.tsx

@@ -2,11 +2,15 @@ import type { ReactNode } from "react";
 import { colorScales } from "../../tokens/colors";
 import { cn } from "../../utils/cn";
 
-type ButtonHierarchy = "primary" | "secondary" | "tertiary" | "quaternary";
-type ButtonOutcome = "action" | "destructive";
+type ButtonHierarchy =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "destructive";
 type VisualState = "idle" | "hover" | "disabled";
 
-const actionStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
+const hierarchyStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
   primary: {
     idle: "bg-action-primary-idle text-action-primary-on-idle",
     hover: "bg-action-primary-hover text-action-primary-on-hover",
@@ -14,8 +18,9 @@ const actionStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
   },
   secondary: {
     idle: "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
-    hover: "border border-divider-primary bg-action-secondary-hover text-action-secondary-on-hover",
-    disabled: "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
+    hover: "border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
+    disabled:
+      "border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
   },
   tertiary: {
     idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
@@ -25,58 +30,36 @@ const actionStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
   quaternary: {
     idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
     hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
-    disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
+    disabled:
+      "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
   },
-};
-
-const destructiveStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
-  primary: {
+  destructive: {
     idle: "bg-action-destructive-idle text-action-destructive-on-idle",
     hover: "bg-action-destructive-hover text-action-destructive-on-hover",
-    disabled: "bg-action-destructive-disabled text-action-destructive-on-disabled",
-  },
-  secondary: {
-    idle: "border border-red-300 bg-grey-50 text-red-500",
-    hover: "border border-red-300 bg-red-50 text-red-700",
-    disabled: "border border-red-300 bg-grey-50 text-red-300",
-  },
-  tertiary: {
-    idle: "bg-white text-red-500",
-    hover: "bg-red-50 text-red-700",
-    disabled: "bg-white text-red-300",
-  },
-  quaternary: {
-    idle: "bg-white text-red-500",
-    hover: "bg-grey-100 text-red-700",
-    disabled: "bg-white text-red-300",
+    disabled:
+      "bg-action-destructive-disabled text-action-destructive-on-disabled",
   },
 };
 
 export const ButtonSnapshot = ({
   hierarchy,
-  outcome = "action",
   visualState = "idle",
   children = "Button",
 }: {
   hierarchy: ButtonHierarchy;
-  outcome?: ButtonOutcome;
   visualState?: VisualState;
   children?: ReactNode;
-}) => {
-  const styles = outcome === "destructive" ? destructiveStyles : actionStyles;
-
-  return (
-    <span
-      className={cn(
-        "inline-flex min-h-10 min-w-[94px] items-center justify-center rounded-control px-2 text-caption-1",
-        visualState === "disabled" && "cursor-not-allowed",
-        styles[hierarchy][visualState],
-      )}
-    >
-      {children}
-    </span>
-  );
-};
+}) => (
+  <span
+    className={cn(
+      "inline-flex min-h-10 min-w-[94px] items-center justify-center rounded-control px-2 text-caption-1 tracking-[0.32px]",
+      visualState === "disabled" && "cursor-not-allowed",
+      hierarchyStyles[hierarchy][visualState],
+    )}
+  >
+    {children}
+  </span>
+);
 
 export const IconButtonSnapshot = ({
   hierarchy = "tertiary",

package/src/stories/components/Buttons.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ButtonsCanvas } from "../canvases/ButtonsCanvas";
-
-const meta: Meta = {
-  title: "Components/Buttons",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <ButtonsCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonsCanvas } from "../canvases/ButtonsCanvas";
+
+const meta: Meta = {
+  title: "Components/Buttons",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <ButtonsCanvas /> };
 

package/src/stories/components/Chat.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ChatCanvas } from "../canvases/ChatCanvas";
-
-const meta: Meta = {
-  title: "Components/Chat",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <ChatCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChatCanvas } from "../canvases/ChatCanvas";
+
+const meta: Meta = {
+  title: "Components/Chat",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <ChatCanvas /> };
 

package/src/stories/components/Content.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ContentCanvas } from "../canvases/ContentCanvas";
-
-const meta: Meta = {
-  title: "Components/Content",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <ContentCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { ContentCanvas } from "../canvases/ContentCanvas";
+
+const meta: Meta = {
+  title: "Components/Content",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <ContentCanvas /> };
 

package/src/stories/components/Core.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { CoreCanvas } from "../canvases/CoreCanvas";
-
-const meta: Meta = {
-  title: "Components/Core",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <CoreCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { CoreCanvas } from "../canvases/CoreCanvas";
+
+const meta: Meta = {
+  title: "Components/Core",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <CoreCanvas /> };
 

package/src/stories/components/DomainForms.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { DomainFormsCanvas } from "../canvases/DomainFormsCanvas";
-
-const meta: Meta = {
-  title: "Components/Domain Forms",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <DomainFormsCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { DomainFormsCanvas } from "../canvases/DomainFormsCanvas";
+
+const meta: Meta = {
+  title: "Components/Domain Forms",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <DomainFormsCanvas /> };
 

package/src/stories/components/Filters.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { FiltersCanvas } from "../canvases/FiltersCanvas";
-
-const meta: Meta = {
-  title: "Components/Filters",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <FiltersCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { FiltersCanvas } from "../canvases/FiltersCanvas";
+
+const meta: Meta = {
+  title: "Components/Filters",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <FiltersCanvas /> };
 

package/src/stories/components/Forms.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { FormsCanvas } from "../canvases/FormsCanvas";
-
-const meta: Meta = {
-  title: "Components/Forms",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <FormsCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormsCanvas } from "../canvases/FormsCanvas";
+
+const meta: Meta = {
+  title: "Components/Forms",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <FormsCanvas /> };
 

package/src/stories/components/Icons.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { IconsCanvas } from "../canvases/IconsCanvas";
-
-const meta: Meta = {
-  title: "Components/Icons",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <IconsCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconsCanvas } from "../canvases/IconsCanvas";
+
+const meta: Meta = {
+  title: "Components/Icons",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <IconsCanvas /> };
 

package/src/stories/components/Illustrations.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { IllustrationsCanvas } from "../canvases/IllustrationsCanvas";
-
-const meta: Meta = {
-  title: "Components/Illustrations",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <IllustrationsCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { IllustrationsCanvas } from "../canvases/IllustrationsCanvas";
+
+const meta: Meta = {
+  title: "Components/Illustrations",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <IllustrationsCanvas /> };
 

package/src/stories/components/Library.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { LibraryCanvas } from "../canvases/LibraryCanvas";
-
-const meta: Meta = {
-  title: "Components/Library",
-  parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-export const Canvas: Story = { render: () => <LibraryCanvas /> };
+import type { Meta, StoryObj } from "@storybook/react";
+import { LibraryCanvas } from "../canvases/LibraryCanvas";
+
+const meta: Meta = {
+  title: "Components/Library",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+export const Canvas: Story = { render: () => <LibraryCanvas /> };