test: make chromatic use named viewports

apps/nextjs/.storybook/chromatic.ts

@@ -7,13 +7,13 @@ export function chromaticParams(modes: ChromaticModes[]) {
     chromatic: {
       modes: {
         ...(modes.includes("mobile") && {
-          mobile: { viewport: 375 },
+          mobile: { viewport: "mobile" },
         }),
         ...(modes.includes("desktop") && {
-          desktop: { viewport: 1200 },
+          desktop: { viewport: "desktop" },
         }),
         ...(modes.includes("desktop-wide") && {
-          "desktop-wide": { viewport: 1400 },
+          "desktop-wide": { viewport: "desktopWide" },
         }),
         // NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
         //       This option allows us to reuse the existing desktop snapshot until we're ready to migrate

apps/nextjs/.storybook/preview.tsx

@@ -28,6 +28,26 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: { width: "375px", height: "800px" },
+        },
+        mobileWide: {
+          name: "Mobile Wide",
+          styles: { width: "430px", height: "930px" },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: { width: "1200px", height: "1000px" },
+        },
+        desktopWide: {
+          name: "Desktop Wide",
+          styles: { width: "1400px", height: "1000px" },
+        },
+      },
+    },
   },
   loaders: [mswLoader],
 };

apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx

@@ -44,7 +44,7 @@ const meta: Meta<typeof ExportButtons> = {
     documentContainerRef: { current: null },
   },
   parameters: {
-    ...chromaticParams(["compat"]),
+    ...chromaticParams(["legacy"]),
   },
 };
 

apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoContext } from "@/components/ContextProviders/Demo";
+
+import { chromaticParams } from "../../../../.storybook/chromatic";
+import { Header } from "./header";
+
+const DemoDecorator: Story["decorators"] = (Story, { parameters }) => (
+  <DemoContext.Provider
+    value={{
+      isDemoUser: false,
+      isSharingEnabled: true,
+      ...parameters.demoContext,
+    }}
+  >
+    <Story />
+  </DemoContext.Provider>
+);
+
+const meta: Meta<typeof Header> = {
+  title: "Components/Layout/ChatHeader",
+  component: Header,
+  tags: ["autodocs"],
+  decorators: [DemoDecorator],
+  parameters: {
+    layout: "fullscreen",
+    ...chromaticParams(["legacy"]),
+    docs: {
+      story: {
+        height: "150px",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const DemoUser: Story = {
+  args: {},
+  parameters: {
+    demoContext: {
+      isDemoUser: true,
+      appSessionsPerMonth: 3,
+      appSessionsRemaining: 2,
+    },
+    ...chromaticParams(["legacy", "desktop-wide"]),
+  },
+};
+
+export const DemoLoading: Story = {
+  args: {},
+  parameters: {
+    demoContext: {
+      isDemoUser: true,
+      appSessionsPerMonth: 3,
+      appSessionsRemaining: undefined,
+    },
+  },
+};