feat: use chromatic modes instead of having mobile/desktop stories

Author: karrui

.storybook/preview.tsx

@@ -6,10 +6,11 @@ import { Box, Skeleton } from '@chakra-ui/react'
 import { ThemeProvider } from '@opengovsg/design-system-react'
 import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 import {
-  Loader,
+  type Loader,
   type Args,
   type Decorator,
   type ReactRenderer,
+  type Parameters,
 } from '@storybook/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { httpBatchLink } from '@trpc/client'
@@ -33,6 +34,8 @@ import { env } from '~/env.mjs'
 import { LoginStateContext } from '~/features/auth'
 import { type AppRouter } from '~/server/modules/_app'
 import { theme } from '~/theme'
+import { viewport } from '~/stories/utils/viewports'
+import { withChromaticModes } from '~/stories/utils/chromatic'
 
 // Initialize MSW
 initialize({
@@ -200,3 +203,24 @@ export const decorators: Decorator[] = [
 ]
 
 export const loaders: Loader[] = [mswLoader]
+
+export const parameters: Parameters = {
+  // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+  layout: 'fullscreen',
+  viewport,
+  /**
+   * If tablet view is needed, add it on a per-story basis.
+   * @example
+   * ```
+   * export const SomeStory: Story = {
+   *   parameters: {
+   *     chromatic: withChromaticModes(["gsib", "desktop", "tablet"]),
+   *   }
+   * }
+   * ```
+   */
+  chromatic: {
+    ...withChromaticModes(['desktop']),
+    prefersReducedMotion: 'reduce',
+  },
+}

src/stories/Page/HomePage.stories.tsx

@@ -2,21 +2,23 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { meHandlers } from 'tests/msw/handlers/me'
 
 import HomePage from '~/pages/home'
+import { withChromaticModes } from '../utils/chromatic'
 
 const meta: Meta<typeof HomePage> = {
   title: 'Pages/Home Page',
   component: HomePage,
   parameters: {
     mockdate: new Date('2023-06-28T07:23:18.349Z'),
-    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
     msw: {
       handlers: [meHandlers.me()],
     },
+    chromatic: withChromaticModes(['mobile', 'desktop']),
   },
 }
 
 export default meta
 type Story = StoryObj<typeof HomePage>
 
-export const Default: Story = {}
+export const Default: Story = {
+  name: 'Home Page',
+}

src/stories/Page/LandingPage.stories.ts

@@ -1,22 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import LandingPage from '~/pages/index'
-import { getMobileViewParameters } from '../utils/viewports'
+import { withChromaticModes } from '../utils/chromatic'
 
 const meta: Meta<typeof LandingPage> = {
   title: 'Pages/Landing Page',
   component: LandingPage,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    chromatic: withChromaticModes(['mobile', 'tablet', 'desktop']),
   },
 }
 
 export default meta
 type Story = StoryObj<typeof LandingPage>
 
-export const Desktop: Story = {}
-
-export const Mobile: Story = {
-  parameters: getMobileViewParameters(),
+export const Default: Story = {
+  name: 'Landing Page',
 }

src/stories/Page/SgidSelectProfilePage.stories.tsx

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { authSgidHandlers } from 'tests/msw/handlers/auth/sgid'
 import SelectProfilePage from '~/pages/sign-in/select-profile'
+import { withChromaticModes } from '../utils/chromatic'
 
 const meta: Meta<typeof SelectProfilePage> = {
   title: 'Pages/sgID Select Profile Page',
   component: SelectProfilePage,
   decorators: [],
   parameters: {
-    layout: 'fullscreen',
+    chromatic: withChromaticModes(['mobile', 'desktop']),
     msw: {
       handlers: [authSgidHandlers.listStoredProfiles.returnSingleProfile()],
     },

src/stories/Page/SignInPage.stories.tsx

@@ -4,16 +4,14 @@ import { authEmailHandlers } from 'tests/msw/handlers/auth/email'
 import { meHandlers } from 'tests/msw/handlers/me'
 
 import SignInPage from '~/pages/sign-in'
-import { getMobileViewParameters } from '../utils/viewports'
+import { withChromaticModes } from '../utils/chromatic'
 
 const VALID_AUTH_EMAIL = '[email protected]'
 
 const meta: Meta<typeof SignInPage> = {
   title: 'Pages/Sign In Page',
   component: SignInPage,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
     msw: {
       handlers: [
         meHandlers.unauthorized(),
@@ -29,27 +27,21 @@ const meta: Meta<typeof SignInPage> = {
 export default meta
 type Story = StoryObj<typeof SignInPage>
 
-export const Default: Story = {}
+export const Default: Story = {
+  parameters: {
+    chromatic: withChromaticModes(['mobile', 'desktop']),
+  },
+}
 
 export const WithSgidLogin: Story = {
   parameters: {
+    chromatic: withChromaticModes(['mobile', 'desktop']),
     features: {
       sgid: true,
     },
   },
 }
 
-export const Mobile: Story = {
-  parameters: getMobileViewParameters(),
-}
-
-export const MobileWithSgid: Story = {
-  parameters: {
-    ...WithSgidLogin.parameters,
-    ...Mobile.parameters,
-  },
-}
-
 export const InputValidation: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)

src/stories/utils/chromatic.ts

@@ -0,0 +1,17 @@
+import { modes } from './modes'
+
+export const withChromaticModes = (args: (keyof typeof modes)[]) => {
+  const modesArr = Array.from(new Set(args))
+  return {
+    modes: modesArr.reduce(
+      (acc, mode) => {
+        return {
+          ...acc,
+          // Only want to preserve width, and not height for Chromatic snapshots.
+          [mode]: modes[mode],
+        }
+      },
+      {} as Partial<typeof modes>,
+    ),
+  }
+}

src/stories/utils/modes.ts

@@ -0,0 +1,33 @@
+/**
+ * This file is for Chromatic viewport modes.
+ * @see https://www.chromatic.com/docs/modes/
+ * The names should correspond to the viewports exported in `viewports.ts`.
+ */
+
+export type ChromaticModeKey = keyof typeof modes
+
+export const modes = {
+  mobile: {
+    viewport: 'sm',
+  },
+  tablet: {
+    viewport: 'md',
+  },
+  laptop: {
+    viewport: 'lg',
+  },
+  desktop: {
+    viewport: 'xl',
+  },
+  // You can also combine modes by passing in the appropriate parameters
+  // "dark desktop": {
+  //   backgrounds: { value: "#1E293B" },
+  //   theme: "dark",
+  //   viewport: "lg",
+  // },
+}
+
+// Mainly for typing available viewports for use in storybook
+export const getViewportByMode = (viewport: ChromaticModeKey) => {
+  return modes[viewport].viewport
+}

src/stories/utils/viewports.ts

@@ -1,44 +1,53 @@
-import { theme } from '~/theme'
-
 /**
- * Helper function to convert theme breakpoint into viewport width in px for
- * Chromatic viewpoint snapshots.
- * @param breakpoint the theme breakpoint to convert
- * @returns the number pixel width of the given breakpoint.
+ * This file holds the viewports for Storybook rendering, and also for
+ * Choromatic to take snapshots based on the given mode.
+ * @see https://www.chromatic.com/docs/modes/ and the `modes.ts` file.
+ *
+ * Width breakpoints are set as OGPDS defaults (as of writing this ) of
+ *
+ * sm: '30em',
+ * md: '48em',
+ * lg: '64em',
+ * xl: '90em',
+ *
+ * @see https://tailwindcss.com/docs/screens
+ *
+ * If you override default tailwindcss breakpoints, you should update this file
+ * so snapshot widths are consistent with the breakpoints in your app.
  */
-const breakpointToViewportWidth = (
-  breakpoint: keyof typeof theme.breakpoints,
-) => {
-  const rem = 16
-  return parseInt(theme.breakpoints[breakpoint]) * rem
+
+/** Type that conform to what Storybook expects for the `viewport` parameter */
+interface StorybookViewportParameter {
+  viewports: Record<
+    string,
+    {
+      name: string
+    } & (
+      | {
+          styles: {
+            width: string
+            height?: string
+          }
+        }
+      | number
+    )
+  >
 }
 
 /**
- * Viewports mapping viewport key to their width in (pixel) number.
- * Used for Chromatic viewpoint snapshots which requires the numbers in pixels.
+ * The names of the viewports should correspond to the `viewport` parameter you
+ * set in `modes.ts`.
+ *
+ * An additional `xs` viewport is added specifically for Chromatic to have a
+ * snapshot for the smallest screen size.
  */
-export const viewports = {
-  xs: 320, // '20rem'
-  sm: breakpointToViewportWidth('sm'),
-  md: breakpointToViewportWidth('md'),
-  lg: breakpointToViewportWidth('lg'),
-  xl: breakpointToViewportWidth('xl'),
-}
-
-export const getMobileViewParameters = () => {
-  return {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-    chromatic: { viewports: [viewports.xs] },
-  }
-}
-
-export const getTabletViewParameters = () => {
-  return {
-    viewport: {
-      defaultViewport: 'tablet',
-    },
-    chromatic: { viewports: [viewports.md] },
-  }
-}
+export const viewport = {
+  viewports: {
+    xs: { name: 'xs', styles: { width: '320px', height: '100%' } },
+    sm: { name: 'sm', styles: { width: '480px', height: '100%' } },
+    md: { name: 'md', styles: { width: '768px', height: '100%' } },
+    lg: { name: 'lg', styles: { width: '1280px', height: '100%' } },
+    xl: { name: 'xl', styles: { width: '1440px', height: '100%' } },
+    '2xl': { name: '2xl', styles: { width: '1536px', height: '100%' } },
+  },
+} as const satisfies StorybookViewportParameter