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

package/src/stories/canvases/ChatCanvas.tsx

@@ -0,0 +1,130 @@
+import {
+  Attachment,
+  ChatEntry,
+  ChatHeader,
+  ChatInput,
+  ChatStatus,
+  ChatTile,
+  Copilot,
+  Draft,
+  Greeting,
+  Reference,
+  Source,
+  Sources,
+  Suggestion,
+  Suggestions,
+} from "../../patterns/Chat";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ChatCanvas = () => (
+  <FigmaPage title="Chat" width={FIGMA_WIDTHS.chat}>
+    <FigmaContent>
+      <FigmaSection label="Greeting">
+        <FigmaGrid gap={24}>
+          <Greeting chief="technical" />
+          <Greeting chief="compliance" name="Alex" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Header">
+        <div className="max-w-3xl space-y-4">
+          <ChatHeader chief="technical" title="Hull inspection discussion" />
+          <ChatHeader chief="compliance" title="Port state control" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Draft">
+        <div className="max-w-xl">
+          <Draft />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Suggestion">
+        <FigmaGrid gap={16}>
+          <Suggestion label="Review fire safety checklist" />
+          <Suggestion label="Summarize inspection findings" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Chat Input">
+        <div className="max-w-xl space-y-4">
+          <ChatInput />
+          <ChatInput placeholder="Ask about compliance..." />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Chat Status">
+        <FigmaGrid gap={16}>
+          <ChatStatus status="thinking" />
+          <ChatStatus status="typing" message="Chief is typing" />
+          <ChatStatus status="idle" message="Ready" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Attachment">
+        <FigmaGrid gap={16}>
+          <Attachment name="inspection-report.pdf" />
+          <Attachment name="crew-list.xlsx" size="840 KB" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Reference">
+        <Reference title="ISM Code §6.2" page="p. 18" />
+      </FigmaSection>
+
+      <FigmaSection label="Sources">
+        <div className="max-w-md space-y-4">
+          <Source title="Safety Management Manual" />
+          <Sources />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Chat Entry">
+        <div className="max-w-xl space-y-4">
+          <ChatEntry role="user">Can you review the hull inspection report?</ChatEntry>
+          <ChatEntry chief="technical">All systems are within acceptable parameters.</ChatEntry>
+          <ChatEntry chief="compliance">I found three compliance gaps that need attention.</ChatEntry>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Suggestions">
+        <div className="max-w-xl">
+          <Suggestions />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Copilot">
+        <FigmaGrid gap={24}>
+          <FigmaVariant label="Default">
+            <div className="h-[480px] w-80 overflow-hidden rounded-control border border-divider-primary">
+              <Copilot />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Empty">
+            <div className="h-[480px] w-80 overflow-hidden rounded-control border border-divider-primary">
+              <Copilot empty />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Thinking">
+            <div className="h-[480px] w-80 overflow-hidden rounded-control border border-divider-primary">
+              <Copilot thinking />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Chat Tile">
+        <div className="max-w-sm">
+          <ChatTile title="Hull inspection report review" timestamp="2 hours ago" />
+        </div>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ColorTokensCanvas.tsx

@@ -0,0 +1,16 @@
+import { FigmaContent, FigmaPage } from "../_layout";
+import { ColorScaleRow } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ColorTokensCanvas = () => (
+  <FigmaPage title="Color Tokens" width={FIGMA_WIDTHS.colorTokens}>
+    <FigmaContent>
+      <ColorScaleRow name="grey" />
+      <ColorScaleRow name="green" />
+      <ColorScaleRow name="blue" />
+      <ColorScaleRow name="red" />
+      <ColorScaleRow name="orange" />
+      <ColorScaleRow name="purple" />
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ColorsCanvas.tsx

@@ -0,0 +1,101 @@
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+} from "../_layout";
+import { SemanticSwatch } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const actionColumns = [
+  { label: "Primary", prefix: "action-primary" },
+  { label: "Secondary", prefix: "action-secondary" },
+  { label: "Tertiary", prefix: "action-tertiary" },
+  { label: "Quaternary", prefix: "action-quaternary" },
+  { label: "Destructive", prefix: "action-destructive" },
+] as const;
+
+const actionStates = ["idle", "on-idle", "hover", "on-hover", "disabled", "on-disabled"] as const;
+
+export const ColorsCanvas = () => (
+  <FigmaPage title="Colors" width={FIGMA_WIDTHS.colors}>
+    <FigmaContent>
+      <FigmaSection label="Accent">
+        <FigmaGrid gap={24}>
+          <SemanticSwatch label="On light" cssVar="--accent-on-light" />
+          <SemanticSwatch label="On dark" cssVar="--accent-on-dark" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="BG light" cssVar="--accent-bg-light" />
+          <SemanticSwatch label="BG lighter" cssVar="--accent-bg-lighter" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Action">
+        <FigmaGrid gap={24}>
+          {actionColumns.map((column) => (
+            <div key={column.prefix} className="flex flex-col gap-6">
+              <p className="text-caption-2-em text-display-on-light-tertiary">{column.label}</p>
+              {actionStates.map((state) => (
+                <SemanticSwatch
+                  key={state}
+                  label={state}
+                  cssVar={`--${column.prefix}-${state}`}
+                  textClassName={
+                    state.startsWith("on-") && !state.includes("disabled")
+                      ? "text-white"
+                      : "text-display-on-light-primary"
+                  }
+                />
+              ))}
+            </div>
+          ))}
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Background">
+        <FigmaGrid gap={24}>
+          <SemanticSwatch label="Primary" cssVar="--background-primary" />
+          <SemanticSwatch label="Secondary" cssVar="--background-secondary" />
+          <SemanticSwatch label="Tertiary" cssVar="--background-tertiary" />
+          <SemanticSwatch label="Hover" cssVar="--background-hover" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="Selected" cssVar="--background-selected" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="Overlay" cssVar="--background-overlay" textClassName="text-display-on-dark-primary" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Display">
+        <FigmaGrid gap={24}>
+          <SemanticSwatch label="On light primary" cssVar="--display-on-light-primary" />
+          <SemanticSwatch label="On light secondary" cssVar="--display-on-light-secondary" />
+          <SemanticSwatch label="On light tertiary" cssVar="--display-on-light-tertiary" />
+          <SemanticSwatch label="On light quaternary" cssVar="--display-on-light-quaternary" />
+          <SemanticSwatch label="On dark primary" cssVar="--display-on-dark-primary" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="On dark secondary" cssVar="--display-on-dark-secondary" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="On dark tertiary" cssVar="--display-on-dark-tertiary" textClassName="text-display-on-dark-primary" />
+          <SemanticSwatch label="On dark quaternary" cssVar="--display-on-dark-quaternary" textClassName="text-display-on-dark-primary" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Divider">
+        <FigmaGrid gap={24}>
+          <SemanticSwatch label="Primary" cssVar="--divider-primary" />
+          <SemanticSwatch label="Secondary" cssVar="--divider-secondary" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Meta">
+        <FigmaGrid gap={24}>
+          <SemanticSwatch label="Green" cssVar="--meta-green" />
+          <SemanticSwatch label="On green" cssVar="--meta-on-green" />
+          <SemanticSwatch label="Orange" cssVar="--meta-orange" />
+          <SemanticSwatch label="On orange" cssVar="--meta-on-orange" />
+          <SemanticSwatch label="Red" cssVar="--meta-red" />
+          <SemanticSwatch label="On red" cssVar="--meta-on-red" />
+          <SemanticSwatch label="Blue" cssVar="--meta-blue" />
+          <SemanticSwatch label="On blue" cssVar="--meta-on-blue" />
+          <SemanticSwatch label="Purple" cssVar="--meta-purple" />
+          <SemanticSwatch label="On purple" cssVar="--meta-on-purple" />
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ContentCanvas.tsx

@@ -0,0 +1,157 @@
+import { Badge, Button } from "../../primitives";
+import {
+  EmptyState,
+  Entry,
+  Header,
+  Tab,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components";
+import { TickIcon } from "../../icons";
+import { WorkflowsIllustration } from "../../illustrations";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const ContentCanvas = () => (
+  <FigmaPage title="Content" width={FIGMA_WIDTHS.content}>
+    <FigmaContent>
+      <FigmaSection label="Tab">
+        <FigmaGrid gap={16}>
+          <Tab label="Overview" />
+          <Tab label="Tasks" state="active" />
+          <Tab label="Reports" className="bg-background-hover" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Tabs">
+        <div className="max-w-xl space-y-8">
+          <FigmaVariant label="Underline">
+            <Tabs defaultValue="all" type="tabs">
+              <TabsList>
+                <TabsTrigger value="all">All</TabsTrigger>
+                <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">
+                All content
+              </TabsContent>
+              <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">
+                Issues content
+              </TabsContent>
+            </Tabs>
+          </FigmaVariant>
+          <FigmaVariant label="Pills · soft">
+            <Tabs defaultValue="active" type="pills" appearance="soft">
+              <TabsList>
+                <TabsTrigger value="active">Active</TabsTrigger>
+                <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">
+                Active content
+              </TabsContent>
+              <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">
+        <div className="max-w-xl space-y-4">
+          <Header title="Fleet overview" />
+          <Header
+            variant="nested"
+            title="Outstanding actions"
+            actions={<Button hierarchy="primary">Add</Button>}
+          />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Entry">
+        <div className="max-w-xl space-y-2">
+          <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>
+
+      <FigmaSection label="Empty State">
+        <FigmaGrid gap={32}>
+          <FigmaVariant label="Default">
+            <div className="w-80">
+              <EmptyState
+                title="No workflows yet"
+                description="Create your first workflow to get started."
+              />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="With illustration">
+            <div className="w-80">
+              <EmptyState
+                title="No reports"
+                illustration={<WorkflowsIllustration className="mx-auto h-24 w-32" />}
+                action={{ children: "Create report", hierarchy: "primary" }}
+              />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/CoreCanvas.tsx

@@ -0,0 +1,125 @@
+import { InformationIcon } from "../../icons";
+import {
+  Avatar,
+  Badge,
+  Callout,
+  Count,
+  GroupedAvatars,
+  Logo,
+  MenuItem,
+  Switch,
+  ThinkingDot,
+  Tooltip,
+} from "../../primitives";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaRow,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const CoreCanvas = () => (
+  <FigmaPage title="Core" width={FIGMA_WIDTHS.core}>
+    <FigmaContent>
+      <FigmaSection label="Logo">
+        <FigmaGrid gap={24}>
+          <Logo chief="technical" />
+          <Logo chief="compliance" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Avatar">
+        <FigmaRow label="32">
+          <Avatar chief="technical" size={32} />
+          <Avatar chief="compliance" size={32} />
+          <Avatar chief="initials" size={32} initials="AC" />
+        </FigmaRow>
+        <FigmaRow label="24">
+          <Avatar chief="technical" size={24} />
+          <Avatar chief="compliance" size={24} />
+          <Avatar chief="initials" size={24} initials="JL" />
+        </FigmaRow>
+        <FigmaRow label="18">
+          <Avatar chief="technical" size={18} />
+          <Avatar chief="compliance" size={18} />
+        </FigmaRow>
+        <FigmaRow label="16">
+          <Avatar chief="technical" size={16} />
+          <Avatar chief="compliance" size={16} />
+        </FigmaRow>
+      </FigmaSection>
+
+      <FigmaSection label="Grouped Avatars">
+        <FigmaGrid gap={24}>
+          <GroupedAvatars count={1} />
+          <GroupedAvatars count={2} />
+          <GroupedAvatars count={3} />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Menu Item">
+        <div className="w-64 rounded-control border border-divider-primary p-1">
+          <MenuItem header>Section header</MenuItem>
+          <MenuItem>Edit workflow</MenuItem>
+          <MenuItem className="bg-grey-100">Hover</MenuItem>
+          <MenuItem destructive>Delete</MenuItem>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Tooltip">
+        <FigmaGrid gap={24}>
+          <Tooltip content="Short hint">
+            <span className="rounded-control border border-divider-primary px-3 py-1 text-caption-2">Hover target</span>
+          </Tooltip>
+          <Tooltip content="Extended hint with additional context" hint>
+            <span className="rounded-control border border-divider-primary px-3 py-1 text-caption-2">Extended hint</span>
+          </Tooltip>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Thinking Dot">
+        <ThinkingDot />
+      </FigmaSection>
+
+      <FigmaSection label="Count">
+        <FigmaGrid gap={16}>
+          <Count value={3} />
+          <Count value={42} />
+          <Count value={120} />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Switch">
+        <FigmaGrid gap={24}>
+          <Switch checked={false} onChange={() => {}} />
+          <Switch checked onChange={() => {}} />
+          <Switch checked={false} disabled onChange={() => {}} />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Badge">
+        <FigmaGrid gap={16}>
+          {(["blue", "green", "red", "orange", "purple", "grey"] as const).map((color) => (
+            <FigmaVariant key={color} label={color}>
+              <Badge color={color}>Label</Badge>
+            </FigmaVariant>
+          ))}
+        </FigmaGrid>
+        <FigmaGrid gap={16} className="mt-4">
+          <Badge color="blue" type="icon">
+            <InformationIcon size="small" />
+          </Badge>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Callout">
+        <Callout icon={<InformationIcon size="small" />}>
+          Review the latest inspection report before proceeding.
+        </Callout>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/DomainFormsCanvas.tsx

@@ -0,0 +1,67 @@
+import {
+  FormCard,
+  FormHeader,
+  ListRow as FormListRow,
+  RiskMeter,
+} from "../../domain/Forms";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const DomainFormsCanvas = () => (
+  <FigmaPage title="Domain Forms" width={FIGMA_WIDTHS.domainForms}>
+    <FigmaContent>
+      <FigmaSection label="Form Card">
+        <FigmaGrid gap={24}>
+          <div className="w-80">
+            <FormCard />
+          </div>
+          <div className="w-80">
+            <FormCard
+              name="Safety Management"
+              description="ISM Code forms"
+              formCount={8}
+              pendingCount={2}
+              state="hover"
+            />
+          </div>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Form Header">
+        <div className="max-w-xl">
+          <FormHeader />
+          <div className="mt-4">
+            <FormHeader title="ISM Code checklist" status="Pending review" dueDate="Due 30 Jul 2026" />
+          </div>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="List Row">
+        <div className="max-w-xl space-y-2">
+          <FormListRow />
+          <FormListRow name="Fire safety checklist" subtitle="Last updated today" state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Risk Meter">
+        <FigmaGrid gap={24}>
+          <FigmaVariant label="High">
+            <RiskMeter level="high" />
+          </FigmaVariant>
+          <FigmaVariant label="Medium">
+            <RiskMeter level="medium" />
+          </FigmaVariant>
+          <FigmaVariant label="Low">
+            <RiskMeter level="low" score={22} />
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/FiltersCanvas.tsx

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