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

package/src/stories/canvases/figma-widths.ts

@@ -1,28 +1,28 @@
-/** Figma frame widths — source of truth for Storybook canvas pages */
-export const FIGMA_WIDTHS = {
-  colors: 3060,
-  colorTokens: 1064,
-  typography: 1064,
-  buttonsMatrix: 808,
-  raiseLevels: 760,
-  buttons: 526,
-  icons: 774,
-  core: 732,
-  illustrations: 1152,
-  sidebar: 464,
-  sidebarLayouts: 1432,
-  chat: 1558,
-  ships: 1280,
-  content: 1280,
-  forms: 564,
-  report: 770,
-  modals: 1434,
-  skeletons: 512,
-  reportLayout: 960,
-  search: 848,
-  settings: 1076,
-  workflows: 1536,
-  domainForms: 1488,
-  filters: 1232,
-  library: 1288,
-} as const;
+/** Figma frame widths — source of truth for Storybook canvas pages */
+export const FIGMA_WIDTHS = {
+  colors: 3060,
+  colorTokens: 1064,
+  typography: 1064,
+  buttonsMatrix: 808,
+  raiseLevels: 760,
+  buttons: 526,
+  icons: 774,
+  core: 732,
+  illustrations: 1152,
+  sidebar: 464,
+  sidebarLayouts: 1432,
+  chat: 1558,
+  ships: 1280,
+  content: 1280,
+  forms: 564,
+  report: 770,
+  modals: 1434,
+  skeletons: 512,
+  reportLayout: 960,
+  search: 848,
+  settings: 1076,
+  workflows: 1536,
+  domainForms: 1488,
+  filters: 1232,
+  library: 1288,
+} as const;

package/src/stories/canvases/helpers.tsx

@@ -1,146 +1,146 @@
-import type { ReactNode } from "react";
-import { colorScales } from "../../tokens/colors";
-import { cn } from "../../utils/cn";
-
-type ButtonHierarchy =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "quaternary"
-  | "destructive";
-type VisualState = "idle" | "hover" | "disabled";
-
-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",
-    disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
-  },
-  secondary: {
-    idle: "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
-    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",
-    hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
-    disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
-  },
-  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",
-  },
-  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",
-  },
-};
-
-export const ButtonSnapshot = ({
-  hierarchy,
-  visualState = "idle",
-  children = "Button",
-}: {
-  hierarchy: ButtonHierarchy;
-  visualState?: VisualState;
-  children?: ReactNode;
-}) => (
-  <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",
-  visualState = "idle",
-  size = "large",
-}: {
-  hierarchy?: "tertiary" | "quaternary";
-  visualState?: "idle" | "hover";
-  size?: "large" | "small";
-}) => {
-  const idleHover: Record<"tertiary" | "quaternary", Record<"idle" | "hover", string>> = {
-    tertiary: {
-      idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
-      hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
-    },
-    quaternary: {
-      idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
-      hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
-    },
-  };
-
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center justify-center rounded-control text-action-tertiary-on-idle",
-        size === "large" ? "size-10 [&>svg]:size-6" : "size-8 [&>svg]:size-4",
-        idleHover[hierarchy][visualState],
-      )}
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
-        <path d="M12 5v14M5 12h14" strokeLinecap="round" />
-      </svg>
-    </span>
-  );
-};
-
-type ColorScaleName = keyof typeof colorScales;
-
-export const ColorScaleRow = ({ name }: { name: ColorScaleName }) => {
-  const scale = colorScales[name];
-  const shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"] as const;
-
-  return (
-    <div className="mb-8">
-      <p className="mb-2 text-subheader-em capitalize text-display-on-light-primary">{name}</p>
-      <div className="flex">
-        {shades.map((shade) => (
-          <div
-            key={shade}
-            className="flex h-20 w-[100px] items-center justify-center text-body text-display-on-light-primary"
-            style={{ backgroundColor: scale[shade] }}
-          >
-            {shade}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const SemanticSwatch = ({
-  label,
-  cssVar,
-  textClassName = "text-display-on-light-primary",
-}: {
-  label: string;
-  cssVar: string;
-  textClassName?: string;
-}) => (
-  <div className="w-[250px]">
-    <div
-      className={cn("flex h-[90px] items-end rounded-control p-3 text-caption-2-em", textClassName)}
-      style={{ background: `var(${cssVar})` }}
-    >
-      {label}
-    </div>
-  </div>
-);
-
-export const formatIconLabel = (name: string) =>
-  name
-    .replace(/([A-Z])/g, " $1")
-    .replace(/^./, (char) => char.toUpperCase())
-    .trim();
+import type { ReactNode } from "react";
+import { colorScales } from "../../tokens/colors";
+import { cn } from "../../utils/cn";
+
+type ButtonHierarchy =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "destructive";
+type VisualState = "idle" | "hover" | "disabled";
+
+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",
+    disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
+  },
+  secondary: {
+    idle: "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
+    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",
+    hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
+    disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
+  },
+  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",
+  },
+  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",
+  },
+};
+
+export const ButtonSnapshot = ({
+  hierarchy,
+  visualState = "idle",
+  children = "Button",
+}: {
+  hierarchy: ButtonHierarchy;
+  visualState?: VisualState;
+  children?: ReactNode;
+}) => (
+  <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",
+  visualState = "idle",
+  size = "large",
+}: {
+  hierarchy?: "tertiary" | "quaternary";
+  visualState?: "idle" | "hover";
+  size?: "large" | "small";
+}) => {
+  const idleHover: Record<"tertiary" | "quaternary", Record<"idle" | "hover", string>> = {
+    tertiary: {
+      idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
+      hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
+    },
+    quaternary: {
+      idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
+      hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
+    },
+  };
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded-control text-action-tertiary-on-idle",
+        size === "large" ? "size-10 [&>svg]:size-6" : "size-8 [&>svg]:size-4",
+        idleHover[hierarchy][visualState],
+      )}
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+        <path d="M12 5v14M5 12h14" strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+};
+
+type ColorScaleName = keyof typeof colorScales;
+
+export const ColorScaleRow = ({ name }: { name: ColorScaleName }) => {
+  const scale = colorScales[name];
+  const shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"] as const;
+
+  return (
+    <div className="mb-8">
+      <p className="mb-2 text-subheader-em capitalize text-display-on-light-primary">{name}</p>
+      <div className="flex">
+        {shades.map((shade) => (
+          <div
+            key={shade}
+            className="flex h-20 w-[100px] items-center justify-center text-body text-display-on-light-primary"
+            style={{ backgroundColor: scale[shade] }}
+          >
+            {shade}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const SemanticSwatch = ({
+  label,
+  cssVar,
+  textClassName = "text-display-on-light-primary",
+}: {
+  label: string;
+  cssVar: string;
+  textClassName?: string;
+}) => (
+  <div className="w-[250px]">
+    <div
+      className={cn("flex h-[90px] items-end rounded-control p-3 text-caption-2-em", textClassName)}
+      style={{ background: `var(${cssVar})` }}
+    >
+      {label}
+    </div>
+  </div>
+);
+
+export const formatIconLabel = (name: string) =>
+  name
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (char) => char.toUpperCase())
+    .trim();

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 /> };
 

package/src/stories/components/Modals.stories.tsx

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

package/src/stories/components/Report.stories.tsx

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