test: remove legacy chromatic mode and use desktop as default (#439)

oaknational · Dec 10, 2024 · 071d2d1 · 071d2d1
1 parent 53fc941
commit 071d2d1
Show file tree

Hide file tree

Showing 15 changed files with 16 additions and 30 deletions.
diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
@@ -1,11 +1,6 @@
 import "@storybook/csf";
 
-type ChromaticModes =
-  | "legacy"
-  | "mobile"
-  | "mobile-wide"
-  | "desktop"
-  | "desktop-wide";
+type ChromaticModes = "mobile" | "mobile-wide" | "desktop" | "desktop-wide";
 
 export function chromaticParams(modes: ChromaticModes[]) {
   return {
@@ -23,11 +18,6 @@ export function chromaticParams(modes: ChromaticModes[]) {
         ...(modes.includes("desktop-wide") && {
           "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
-        ...(modes.includes("legacy") && {
-          "1200px": { viewport: 1200 as const },
-        }),
       },
     },
   };
@@ -84,9 +74,7 @@ declare module "@storybook/csf" {
           theme?: "light" | "dark";
           backgrounds?: { value: string };
         }
-      > & {
-        "1200px"?: { viewport: 1200 };
-      };
+      >;
       /**
        * Define one or more viewport sizes to capture. Note, units are considered in pixels
        */

diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
@@ -15,6 +15,7 @@ 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 { chromaticParams } from "./chromatic";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -48,6 +49,7 @@ const preview: Preview = {
         },
       },
     },
+    ...chromaticParams(["desktop"]),
   },
   loaders: [mswLoader],
 };

diff --git a/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx b/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof DownloadContent> = {
   component: DownloadContent,
   parameters: {
     layout: "fullscreen",
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
   decorators: [
     (Story) => (

diff --git a/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx b/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof ShareChat> = {
   component: ShareChat,
   parameters: {
     layout: "fullscreen",
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/app/aila/help/index.stories.tsx b/apps/nextjs/src/app/aila/help/index.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof HelpContent> = {
   parameters: {
     // Including custom decorators changes the layout from fullscreen
     layout: "fullscreen",
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
   decorators: [
     (Story) => (

diff --git a/apps/nextjs/src/app/faqs/index.stories.tsx b/apps/nextjs/src/app/faqs/index.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/app/home-page.stories.tsx b/apps/nextjs/src/app/home-page.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof HomePageContent> = {
   title: "Pages/Homepage",
   component: HomePageContent,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx b/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof LegalContent> = {
   title: "Pages/Legal/Sanity dynamic",
   component: LegalContent,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx b/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof AccountLocked> = {
   title: "Pages/Legal/Account Locked",
   component: AccountLocked,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/app/prompts/prompts.stories.tsx b/apps/nextjs/src/app/prompts/prompts.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof PromptsContent> = {
   title: "Pages/Prompts",
   component: PromptsContent,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta<typeof ChatStart> = {
   parameters: {
     // Including custom decorators changes the layout from fullscreen
     layout: "fullscreen",
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
   decorators: [
     (Story) => (

diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
@@ -43,9 +43,6 @@ const meta: Meta<typeof ExportButtons> = {
     sectionRefs: {},
     documentContainerRef: { current: null },
   },
-  parameters: {
-    ...chromaticParams(["legacy"]),
-  },
 };
 
 export default meta;

diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
@@ -24,7 +24,6 @@ const meta: Meta<typeof Header> = {
   decorators: [DemoDecorator],
   parameters: {
     layout: "fullscreen",
-    ...chromaticParams(["legacy"]),
     docs: {
       story: {
         height: "150px",
@@ -48,7 +47,7 @@ export const DemoUser: Story = {
       appSessionsPerMonth: 3,
       appSessionsRemaining: 2,
     },
-    ...chromaticParams(["legacy", "desktop-wide"]),
+    ...chromaticParams(["desktop", "desktop-wide"]),
   },
 };
 

diff --git a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof AcceptTermsForm> = {
   title: "Pages/Onboarding/AcceptTermsForm",
   component: AcceptTermsForm,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

diff --git a/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx b/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta<typeof LegacyUpgradeNotice> = {
   title: "Pages/Onboarding/LegacyUpgradeNotice",
   component: LegacyUpgradeNotice,
   parameters: {
-    ...chromaticParams(["mobile", "legacy"]),
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };