feat(storybook): build project-level modes for viewports

Author: TylerAPfledderer

.storybook/preview.ts

@@ -7,7 +7,7 @@ import i18n, { baseLocales } from "./i18next"
 
 const extendedTheme = extendBaseTheme(theme)
 
-const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
+export const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
 
 const preview: Preview = {
   globals: {
@@ -23,6 +23,22 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    chromatic: {
+      modes: {
+        ...chakraBreakpointArray.reduce<{ [x: string]: { viewport: string } }>(
+          (arr, curr) => {
+            const [token] = curr
+            return {
+              ...arr,
+              [token]: {
+                viewport: token,
+              },
+            }
+          },
+          {}
+        ),
+      },
+    },
     backgrounds: {
       disable: true,
     },