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

package/src/stories/canvases/SidebarCanvas.tsx

@@ -0,0 +1,147 @@
+import { ArchiveIcon, PenIcon, SearchIcon, TrashIcon } from "../../icons";
+import {
+  Account,
+  ActivityNavGroup,
+  CollapsibleNavGroup,
+  Indicator,
+  NewChat,
+  SidebarEntry,
+  SidebarHeading,
+  SidebarLink,
+} from "../../patterns/Sidebar";
+import { FigmaContent, FigmaPage } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  FIGMA_ENTRY_LABEL,
+  FIGMA_HEADING_LABEL,
+  FIGMA_SECTION_LABEL,
+} from "../../patterns/Sidebar/figma-demo-content";
+import {
+  FIGMA_SIDEBAR_CONTENT,
+  FIGMA_SIDEBAR_FRAMES,
+  type SidebarSubcomponentSlot,
+} from "./figma-sidebar-layout";
+
+const demoMenuItems = [
+  { id: "rename", label: "Rename", icon: <PenIcon size="small" />, onSelect: () => undefined },
+  { id: "archive", label: "Archive", icon: <ArchiveIcon size="small" />, onSelect: () => undefined },
+  {
+    id: "delete",
+    label: "Delete",
+    icon: <TrashIcon size="small" />,
+    destructive: true,
+    onSelect: () => undefined,
+  },
+];
+
+const renderSlot = (slot: SidebarSubcomponentSlot) => {
+  if (slot.kind === "newChat") {
+    return <NewChat collapsed={slot.collapsed} state={slot.state} presentation className="h-full w-full" />;
+  }
+
+  if (slot.kind === "indicator") {
+    return <Indicator chief={slot.chief} />;
+  }
+
+  if (slot.kind === "sidebarLink") {
+    return (
+      <SidebarLink
+        href="#section"
+        label={FIGMA_SECTION_LABEL}
+        icon={<SearchIcon size="small" className="text-display-on-light-primary" />}
+        state={slot.state}
+        collapsed={slot.collapsed}
+        presentation
+        tooltip={FIGMA_SECTION_LABEL}
+      />
+    );
+  }
+
+  if (slot.kind === "sidebarHeading") {
+    return (
+      <SidebarHeading
+        title={FIGMA_HEADING_LABEL}
+        state={slot.state}
+        collapsed={slot.collapsed}
+      />
+    );
+  }
+
+  if (slot.kind === "sidebarEntry") {
+    return (
+      <SidebarEntry
+        href="#chat-1"
+        label={FIGMA_ENTRY_LABEL}
+        state={slot.state}
+        forceMenuVisible={slot.showMenu}
+        menuItems={slot.showMenu ? demoMenuItems : undefined}
+      />
+    );
+  }
+
+  if (slot.kind === "ships") {
+    return (
+      <CollapsibleNavGroup
+        href="#ships"
+        expanded={slot.expanded ?? false}
+        onExpandedChange={() => undefined}
+      />
+    );
+  }
+
+  if (slot.kind === "activity") {
+    return <ActivityNavGroup href="#activity" chief={slot.chief} empty={slot.empty} />;
+  }
+
+  if (slot.kind === "account") {
+    return <Account collapsed={slot.collapsed} state={slot.state} presentation />;
+  }
+
+  return null;
+};
+
+export const SidebarCanvas = () => (
+  <FigmaPage title="Sidebar" width={FIGMA_WIDTHS.sidebar}>
+    <FigmaContent padding={0}>
+      <div
+        data-figma-sidebar-grid
+        className="relative overflow-hidden"
+        style={{
+          width: FIGMA_SIDEBAR_CONTENT.width,
+          height: FIGMA_SIDEBAR_CONTENT.height,
+        }}
+      >
+        <div
+          className="relative"
+          style={{
+            width: FIGMA_SIDEBAR_CONTENT.width,
+            height: FIGMA_SIDEBAR_CONTENT.height,
+          }}
+        >
+          {FIGMA_SIDEBAR_FRAMES.map((frame) => (
+            <div
+              key={frame.name}
+              className="absolute rounded border border-dashed border-[#9747FF]"
+              style={{
+                left: frame.x,
+                top: frame.y,
+                width: frame.width,
+                height: frame.height,
+              }}
+            >
+              {frame.slots.map((slot, index) => (
+                <div
+                  key={`${frame.name}-${index}`}
+                  className="absolute"
+                  style={{ left: slot.x, top: slot.y, width: slot.width, height: slot.height }}
+                >
+                  {renderSlot(slot)}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/SidebarLayoutsCanvas.tsx

@@ -0,0 +1,71 @@
+import { Sidebar, Switcher } from "../../patterns/Sidebar";
+import { FigmaContent, FigmaPage } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  FIGMA_SIDEBAR_LAYOUTS_CONTENT,
+  FIGMA_SIDEBAR_LAYOUTS_FRAMES,
+  type SidebarLayoutsFrameSlot,
+} from "./figma-sidebar-layouts-layout";
+
+const renderSlot = (slot: SidebarLayoutsFrameSlot) => {
+  if (slot.kind === "switcher") {
+    return <Switcher chief={slot.chief} expanded={slot.expanded} />;
+  }
+
+  return (
+    <Sidebar
+      chief={slot.chief}
+      activity={slot.activity}
+      ships={slot.ships}
+      collapsed={slot.collapsed}
+      presentation
+      className="h-full"
+    />
+  );
+};
+
+export const SidebarLayoutsCanvas = () => (
+  <FigmaPage title="Sidebar Layouts" width={FIGMA_WIDTHS.sidebarLayouts}>
+    <FigmaContent padding={0}>
+      <div
+        data-figma-sidebar-layouts-grid
+        className="relative overflow-hidden"
+        style={{
+          width: FIGMA_SIDEBAR_LAYOUTS_CONTENT.width,
+          height: FIGMA_SIDEBAR_LAYOUTS_CONTENT.height,
+        }}
+      >
+        <div
+          className="relative"
+          style={{
+            width: FIGMA_SIDEBAR_LAYOUTS_CONTENT.width,
+            height: FIGMA_SIDEBAR_LAYOUTS_CONTENT.height,
+          }}
+        >
+          {FIGMA_SIDEBAR_LAYOUTS_FRAMES.map((frame) => (
+            <div
+              key={frame.name}
+              className="absolute rounded border border-dashed border-[#9747FF]"
+              style={{
+                left: frame.x,
+                top: frame.y,
+                width: frame.width,
+                height: frame.height,
+              }}
+            >
+              {frame.slots.map((slot, index) => (
+                <div
+                  key={`${frame.name}-${index}`}
+                  className="absolute overflow-hidden"
+                  style={{ left: slot.x, top: slot.y, width: slot.width, height: slot.height }}
+                >
+                  {renderSlot(slot)}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/SidebarPlayground.tsx

@@ -0,0 +1,35 @@
+import { Sidebar, SidebarShell, type Chief } from "../../patterns/Sidebar";
+
+export type SidebarPlaygroundProps = {
+  chief?: Chief;
+  activity?: boolean;
+  ships?: boolean;
+  collapsed?: boolean;
+};
+
+export const SidebarPlayground = ({
+  chief = "technical",
+  activity = true,
+  ships = true,
+  collapsed = false,
+}: SidebarPlaygroundProps) => (
+  <SidebarShell
+    sidebar={
+      <Sidebar
+        key={`${chief}-${activity}-${ships}-${collapsed}`}
+        chief={chief}
+        activity={activity}
+        ships={ships}
+        collapsed={collapsed}
+      />
+    }
+  >
+    <div className="flex min-h-full flex-col items-center justify-center gap-2 p-8 text-display-on-light-tertiary">
+      <p className="text-caption-1 text-display-on-light-secondary">Sidebar playground</p>
+      <p className="max-w-sm text-center text-caption-2">
+        Click the Ships chevron to expand or collapse the fleet list. Use the footer
+        button to collapse the sidebar — hover the collapsed sidebar to expand it again.
+      </p>
+    </div>
+  </SidebarShell>
+);

package/src/stories/canvases/SkeletonsCanvas.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "../../patterns/Skeleton";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const SkeletonsCanvas = () => (
+  <FigmaPage title="Skeletons" width={FIGMA_WIDTHS.skeletons}>
+    <FigmaContent>
+      <FigmaSection label="Skeleton">
+        <FigmaGrid gap={32}>
+          <FigmaVariant label="Content">
+            <div className="w-80">
+              <Skeleton variant="content" />
+            </div>
+          </FigmaVariant>
+          <FigmaVariant label="Search">
+            <div className="w-80">
+              <Skeleton variant="search" />
+            </div>
+          </FigmaVariant>
+        </FigmaGrid>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/TypographyCanvas.tsx

@@ -0,0 +1,53 @@
+import { FigmaContent, FigmaPage } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const typographyStyles = [
+  { label: "Title", className: "font-heading text-title" },
+  { label: "Title Em", className: "font-heading text-title-em" },
+  { label: "Heading", className: "font-heading text-heading" },
+  { label: "Subheader", className: "text-subheader" },
+  { label: "Subheader Em", className: "text-subheader-em" },
+  { label: "Body", className: "text-body" },
+  { label: "Body Em", className: "text-body-em" },
+  { label: "Caption 1", className: "text-caption-1" },
+  { label: "Caption 1 Em", className: "text-caption-1-em" },
+  { label: "Caption 2", className: "text-caption-2" },
+  { label: "Caption 2 Em", className: "text-caption-2-em" },
+  { label: "Footnote", className: "text-footnote" },
+  { label: "Footnote Em", className: "text-footnote-em" },
+] as const;
+
+export const TypographyCanvas = () => (
+  <FigmaPage title="Typography" width={FIGMA_WIDTHS.typography}>
+    <FigmaContent>
+      <div className="mb-8 rounded-control border border-divider-primary p-8">
+        <p className="font-heading text-title text-display-on-light-primary">Vesterbro</p>
+        <p className="mt-1 text-caption-2 text-display-on-light-tertiary">Regular · Medium</p>
+      </div>
+
+      {typographyStyles.slice(0, 3).map((style) => (
+        <div key={style.label} className="mb-6 border-b border-divider-primary pb-6">
+          <p className="mb-2 text-caption-2 text-display-on-light-tertiary">{style.label}</p>
+          <p className={style.className}>The quick brown fox jumps over the lazy dog</p>
+        </div>
+      ))}
+
+      <div className="mb-8 mt-10 rounded-control border border-divider-primary p-8">
+        <p className="font-sans text-title text-display-on-light-primary">Matter</p>
+        <p className="mt-1 text-caption-2 text-display-on-light-tertiary">Regular · Medium</p>
+      </div>
+
+      {typographyStyles.slice(3).map((style) => (
+        <div key={style.label} className="mb-6 border-b border-divider-primary pb-6">
+          <p className="mb-2 text-caption-2 text-display-on-light-tertiary">{style.label}</p>
+          <p className={style.className}>The quick brown fox jumps over the lazy dog</p>
+        </div>
+      ))}
+
+      <div className="mb-6 border-b border-divider-primary pb-6">
+        <p className="mb-2 text-caption-2 text-display-on-light-tertiary">Mono</p>
+        <p className="font-mono text-body">const vessel = &quot;MV Atlantic Star&quot;;</p>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/WorkflowsCanvas.tsx

@@ -0,0 +1,129 @@
+import {
+  GroupHeader,
+  Importance,
+  Progress,
+  Question,
+  StatusPopover,
+  Task,
+  TaskHeader,
+  WorkflowFilters,
+  WorkflowForm,
+  WorkflowHeader,
+  WorkflowListItem,
+  WorkflowProgress,
+  WorkflowRow,
+} from "../../domain/Workflows";
+import {
+  FigmaContent,
+  FigmaGrid,
+  FigmaPage,
+  FigmaSection,
+  FigmaVariant,
+} from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+export const WorkflowsCanvas = () => (
+  <FigmaPage title="Workflows" width={FIGMA_WIDTHS.workflows}>
+    <FigmaContent>
+      <FigmaSection label="Workflow Header">
+        <FigmaGrid gap={24}>
+          <div className="w-96">
+            <WorkflowHeader />
+          </div>
+          <div className="w-96">
+            <WorkflowHeader workflow="audit-preparation" variant="pending" />
+          </div>
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Workflow Row">
+        <div className="max-w-xl space-y-2">
+          <WorkflowRow />
+          <WorkflowRow name="Monthly Forms" description="Recurring compliance tasks" state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Workflow List Item">
+        <div className="max-w-xl space-y-2">
+          <WorkflowListItem />
+          <WorkflowListItem chief="compliance" progress="91%" hover="on" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Workflow Progress">
+        <FigmaGrid gap={16}>
+          <WorkflowProgress />
+          <WorkflowProgress progress="54%" />
+          <WorkflowProgress progress="100%" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Workflow Filters">
+        <WorkflowFilters />
+      </FigmaSection>
+
+      <FigmaSection label="Workflow Form">
+        <div className="max-w-xl space-y-2">
+          <WorkflowForm />
+          <WorkflowForm name="ISM checklist" state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Task">
+        <div className="max-w-xl space-y-2">
+          <Task />
+          <Task status="completed" label="Review fire pump records" />
+          <Task state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Task Header">
+        <div className="max-w-xl space-y-2">
+          <TaskHeader />
+          <TaskHeader property="in-review" progressState="89%" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Question">
+        <div className="max-w-xl space-y-2">
+          <Question />
+          <Question expanded="off" state="hover" />
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Group Header">
+        <FigmaGrid gap={16}>
+          <GroupHeader />
+          <GroupHeader group="ai-insights" count={7} />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Progress">
+        <FigmaGrid gap={16}>
+          <Progress />
+          <Progress state="54%" />
+          <Progress state="all-done" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Importance">
+        <FigmaGrid gap={16}>
+          <Importance />
+          <Importance importance="normal" status="approved" />
+          <Importance importance="critical" status="uncompleted" />
+        </FigmaGrid>
+      </FigmaSection>
+
+      <FigmaSection label="Status Popover">
+        <FigmaGrid gap={24}>
+          <FigmaVariant label="Pending">
+            <StatusPopover />
+          </FigmaVariant>
+          <FigmaVariant label="Done">
+            <StatusPopover state="critical-done" />
+          </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;