refactor(.storybook/preview): convert viewport widths to pixels

Author: TylerAPfledderer

.storybook/preview.ts

@@ -7,7 +7,9 @@ import i18n, { baseLocales } from "./i18next"
 
 const extendedTheme = extendBaseTheme(theme)
 
-export const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
+export const chakraBreakpointArray = Object.entries(
+  extendedTheme.breakpoints
+) as [string, string][]
 
 const preview: Preview = {
   globals: {
@@ -35,6 +37,9 @@ const preview: Preview = {
       viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
         const [token, key] = currVal
 
+        // `key` value is in em. Need to convert to px for Chromatic Story mode snapshots
+        const emToPx = (Number(key.replace("em", "")) * 16).toString() + "px"
+
         // Replace base value
         if (token === "base")
           return {
@@ -53,7 +58,7 @@ const preview: Preview = {
           [token]: {
             name: token,
             styles: {
-              width: key,
+              width: emToPx,
               height: "600px",
             },
           },