test: add chromatic modes

apps/nextjs/.storybook/chromatic.ts

@@ -1,10 +1,27 @@
 import "@storybook/csf";
 
+const defaultMode = { "1200px": { viewport: 1200 } } as const;
+const mobileMode = { mobile: { viewport: 375 } };
+const desktopMode = { desktop: { viewport: 1200 } };
+
+export const CHROMATIC_MOBILE_ONLY = {
+  chromatic: { modes: mobileMode },
+};
+export const CHROMATIC_DESKTOP_ONLY = {
+  chromatic: { modes: desktopMode },
+};
 export const CHROMATIC_ALL_VIEWPORTS = {
-  chromatic: { viewports: [375, 1200] },
+  chromatic: { modes: { ...mobileMode, ...desktopMode } },
+};
+
+// NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
+//       These options allow us to reuse the existing desktop snapshot until we're ready to migrate
+export const CHROMATIC_DESKTOP_COMPAT = {
+  chromatic: { modes: defaultMode },
+};
+export const CHROMATIC_ALL_VIEWPORTS_COMPAT = {
+  chromatic: { modes: { ...mobileMode, ...defaultMode } },
 };
-export const CHROMATIC_MOBILE_ONLY = { chromatic: { viewports: [375] } };
-export const CHROMATIC_DESKTOP_ONLY = { chromatic: { viewports: [1200] } };
 
 declare module "@storybook/csf" {
   interface Parameters {

apps/nextjs/.storybook/preview.tsx

@@ -15,7 +15,6 @@ import { DialogProvider } from "../src/components/AppComponents/DialogContext";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
-import { CHROMATIC_DESKTOP_ONLY } from "./chromatic";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -29,7 +28,6 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    ...CHROMATIC_DESKTOP_ONLY,
   },
   loaders: [mswLoader],
 };

apps/nextjs/src/app/faqs/index.stories.tsx

@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FAQPageContent } from ".";
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;

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

@@ -4,7 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
-import { CHROMATIC_DESKTOP_ONLY } from "../../../../../.storybook/chromatic";
+import { CHROMATIC_DESKTOP_COMPAT } from "../../../../../.storybook/chromatic";
 import ExportButtons from "./";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -44,7 +44,7 @@ const meta: Meta<typeof ExportButtons> = {
     documentContainerRef: { current: null },
   },
   parameters: {
-    ...CHROMATIC_DESKTOP_ONLY,
+    ...CHROMATIC_DESKTOP_COMPAT,
   },
 };