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

package/src/stories/canvases/ButtonsMatrixCanvas.tsx

@@ -0,0 +1,64 @@
+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"] 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"}
+              />
+            ))}
+            <ButtonSnapshot
+              hierarchy="primary"
+              outcome="destructive"
+              visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
+            />
+          </FigmaRow>
+        ))}
+
+        <FigmaRow label="Idle" gap={24}>
+          <div className="w-24" />
+          <Button startIcon={<AddIcon />} 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/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,88 @@
+import { Button } from "../../primitives";
+import {
+  EmptyState,
+  Entry,
+  Header,
+  Tab,
+  Tabs,
+} from "../../components";
+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-6">
+          <Tabs
+            items={[{ label: "All" }, { label: "Reports" }, { label: "Issues" }]}
+            activeIndex={0}
+            onChange={() => {}}
+          />
+          <Tabs
+            type="pills"
+            items={[{ label: "Active" }, { label: "Completed" }]}
+            activeIndex={1}
+            onChange={() => {}}
+          />
+        </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 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" />
+        </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>
+);