diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts index ab39986c..bc755b18 100644 --- 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 index c0bed2ea..55f606d8 100644 --- 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 index 7c78c3bf..4cacabe3 100644 --- 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 = { 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 index 3030971d..b15660f4 100644 --- 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 = { 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 index 0b2ad614..6f1a40e2 100644 --- 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 = { 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 index c4e36231..0fa4b4da 100644 --- 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 = { 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 index 77bab6e9..15fb1e32 100644 --- 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 = { 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 index 87c82ea0..85a0ab9d 100644 --- 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 = { 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 index c229bcaa..846a1a04 100644 --- 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 = { 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 index 6adfaffb..e3bbea25 100644 --- 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 = { 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 index 9a2fa920..1907a21c 100644 --- 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 = { 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 index 8c0ce1c8..fa246ab2 100644 --- 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 = { 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 index 5e416bb5..d563f73c 100644 --- 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 = { 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 index a393c8a2..ca173a4d 100644 --- 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 = { 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 index e8770035..29b5d1ee 100644 --- 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 = { title: "Pages/Onboarding/LegacyUpgradeNotice", component: LegacyUpgradeNotice, parameters: { - ...chromaticParams(["mobile", "legacy"]), + ...chromaticParams(["mobile", "desktop"]), }, };