meta: separate constants and introduce extra classes per theme (#5875)

.storybook/constants.ts

@@ -0,0 +1,47 @@
+import { Open_Sans } from 'next/font/google';
+
+// These are the shared CSS classes between the Storybook Themes
+// Note: These are Tailwind Classes, and `font-open-sans` is the `open-sans`
+// font defined within the tailwind.config.ts config file
+export const COMMON_CLASSES = 'px-4 py-4 font-open-sans';
+
+// These are the theme-specific CSS classes for Storybook Themes
+// Note: These are Tailwind Classes and black/white are defined within
+// the tailwind.config.ts config file as theme colors
+export const THEME_CLASSES = {
+  dark: `${COMMON_CLASSES} bg-black text-white`,
+  light: `${COMMON_CLASSES} bg-white text-black`,
+  '': `${COMMON_CLASSES} bg-white text-black`,
+};
+
+// This defines "execution" modes that Chromatic will run on the each Storybook Story
+// This allows us to test each Story with different parameters
+// @see https://www.chromatic.com/blog/introducing-story-modes/
+export const STORYBOOK_MODES = {
+  'dark mobile': {
+    theme: 'dark',
+    viewport: 'small',
+  },
+  'dark desktop': {
+    theme: 'dark',
+    viewport: 'large',
+  },
+  'light mobile': {
+    theme: 'light',
+    viewport: 'small',
+  },
+  'light desktop': {
+    theme: 'light',
+    viewport: 'large',
+  },
+};
+
+// This configures the Next.js Font for Open Sans
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const OPEN_SANS_FONT = Open_Sans({
+  weight: ['300', '400', '600', '700'],
+  display: 'fallback',
+  subsets: ['latin'],
+  variable: '--font-open-sans',
+});

.storybook/preview.tsx

@@ -1,65 +1,65 @@
 import NextImage from 'next/image';
-import { Open_Sans } from 'next/font/google';
+import {
+  withThemeByDataAttribute,
+  withThemeByClassName,
+} from '@storybook/addon-themes';
 import { SiteProvider } from '../providers/siteProvider';
 import { ThemeProvider } from '../providers/themeProvider';
 import { LocaleProvider } from '../providers/localeProvider';
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { OPEN_SANS_FONT, STORYBOOK_MODES, THEME_CLASSES } from './constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
 import '../styles/new/index.scss';
 
-const openSans = Open_Sans({
-  weight: ['300', '400', '600', '700'],
-  display: 'fallback',
-  subsets: ['latin'],
-  variable: '--font-open-sans',
-});
+// The `openSans.variable` injects the name of the Font Family to the DOM Tree
+// The `font-open-sans` variable is the actual Tailwind Classname
+// that tells that the font-family for this Component tree should be "Open Sans"
+const getStoryClasses = (theme: string) =>
+  `${OPEN_SANS_FONT.variable} ${THEME_CLASSES[theme]}`;
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
+    viewport: {
+      viewports: {
+        small: { name: 'Small', styles: { width: '375px', height: '667px' } },
+        large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
       },
     },
-    nextjs: {
-      router: {
-        basePath: '',
-      },
-    },
-    backgrounds: { disable: true },
+    nextjs: { router: { basePath: '' } },
+    chromatic: { modes: STORYBOOK_MODES },
   },
-};
+  // These are extra Storybook Decorators applied to all stories
+  // that introduce extra functionality such as Theme Switching
+  // and all the App's Providers (Site, Theme, Locale)
+  decorators: [
+    (Story, context) => {
+      console.log(context);
 
-// The `openSans.variable` injects the name of the Font Family to the DOM Tree
-// The `font-open-sans` variable is the actual Tailwind Classname
-// that tells that the font-family for this Component tree should be "Open Sans"
-const storyClasses = `${openSans.variable} font-open-sans`;
-
-export const decorators = [
-  Story => (
-    <SiteProvider>
-      <LocaleProvider>
-        <ThemeProvider>
-          <div className={storyClasses}>
-            <Story />
-          </div>
-        </ThemeProvider>
-      </LocaleProvider>
-    </SiteProvider>
-  ),
-  withThemeByDataAttribute<ReactRenderer>({
-    themes: {
-      light: '',
-      dark: 'dark',
+      return (
+        <SiteProvider>
+          <LocaleProvider>
+            <ThemeProvider>
+              <div className={getStoryClasses(context.globals.theme)}>
+                <Story />
+              </div>
+            </ThemeProvider>
+          </LocaleProvider>
+        </SiteProvider>
+      );
     },
-    defaultTheme: 'light',
-    attributeName: 'data-theme',
-  }),
-];
+    withThemeByDataAttribute<ReactRenderer>({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+};
 
+// This forces the Next.js image system to use unoptimized images
+// for all the Next.js Images (next/image) Components
 Object.defineProperty(NextImage, 'default', {
   configurable: true,
   value: props => <NextImage {...props} unoptimized />,

tailwind.config.ts

@@ -6,6 +6,7 @@ export default {
     './components/**/*.tsx',
     './layouts/**/*.tsx',
     './.storybook/preview.tsx',
+    './.storybook/constants.ts',
   ],
   theme: {
     colors: {