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

package/src/stories/canvases/helpers.tsx

@@ -0,0 +1,163 @@
+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 VisualState = "idle" | "hover" | "disabled";
+
+const actionStyles: 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-primary 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",
+  },
+};
+
+const destructiveStyles: Record<ButtonHierarchy, Record<VisualState, string>> = {
+  primary: {
+    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",
+  },
+};
+
+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>
+  );
+};
+
+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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/stories/components/ReportLayout.stories.tsx

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

package/src/stories/components/Search.stories.tsx

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

package/src/stories/components/Settings.stories.tsx

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

package/src/stories/components/Ships.stories.tsx

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

package/src/stories/components/Sidebar.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SidebarCanvas } from "../canvases/SidebarCanvas";
+import { SidebarPlayground } from "../canvases/SidebarPlayground";
+
+const meta: Meta = {
+  title: "Components/Sidebar",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/** Static Figma subcomponent grid — used by visual regression tests. */
+export const Canvas: Story = { render: () => <SidebarCanvas /> };
+
+/** Interactive sidebar — toggle Ships, collapse/expand the shell. */
+export const Playground: Story = {
+  argTypes: {
+    chief: { control: "select", options: ["technical", "compliance"] },
+    activity: { control: "boolean" },
+    ships: {
+      control: "boolean",
+      description: "Whether Ships starts expanded",
+    },
+    collapsed: {
+      control: "boolean",
+      description: "Whether the sidebar starts collapsed",
+    },
+  },
+  args: {
+    chief: "technical",
+    activity: true,
+    ships: true,
+    collapsed: false,
+  },
+  render: (args) => <SidebarPlayground {...args} />,
+};

package/src/stories/components/SidebarLayouts.stories.tsx

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

package/src/stories/components/Skeletons.stories.tsx

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

package/src/stories/components/Workflows.stories.tsx

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

package/src/stories/style-guide/Buttons.stories.tsx

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

package/src/stories/style-guide/ColorTokens.stories.tsx

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

package/src/stories/style-guide/Colors.stories.tsx

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

package/src/stories/style-guide/RaiseLevels.stories.tsx

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

package/src/stories/style-guide/Typography.stories.tsx

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