feat: Stacked layout in Storybook for Chromatic (#2165)

.changeset/soft-donuts-fix.md

@@ -0,0 +1,6 @@
+---
+"@marigold/storybook-config": minor
+"@marigold/theme-b2b": minor
+---
+
+feat: A stacked layout for Chromatic

config/storybook/main.ts

@@ -27,7 +27,6 @@ const config: StorybookConfig = {
         docs: false,
       },
     },
-    'storybook-addon-themes',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
   ],

config/storybook/package.json

@@ -34,8 +34,8 @@
     "@storybook/testing-library": "0.0.11",
     "@types/react": "18",
     "babel-loader": "8.2.5",
+    "chromatic": "^6.6.3",
     "find-up": "5.0.0",
-    "storybook-addon-themes": "6.1.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "webpack": "4"
   },

config/storybook/preview.tsx

@@ -1,49 +1,97 @@
 import React from 'react';
 
-import { addDecorator, addParameters } from '@storybook/react';
-// @ts-ignore (no types)
-import { withThemes } from 'storybook-addon-themes/react';
+import isChromatic from 'chromatic/isChromatic';
+import type { StoryFn } from '@storybook/react';
 
-import { MarigoldProvider } from '@marigold/components';
+import { Box, MarigoldProvider } from '@marigold/components';
 import b2bTheme from '@marigold/theme-b2b';
 import coreTheme from '@marigold/theme-core';
 import unicornTheme from '@marigold/theme-unicorn';
 
-// Theme Switch
-const themes = {
+// Helpers
+// ---------------
+const THEME = {
   b2b: b2bTheme,
   core: coreTheme,
   unicorn: unicornTheme,
-} as const;
+};
 
-type ThemeNames = keyof typeof themes;
+type ThemeNames = keyof typeof THEME;
 
-addDecorator(withThemes);
-addParameters({
+const Frame = ({ children, title }: any) => (
+  <Box css={{ p: '16px' }}>
+    <Box css={{ color: '#495057', fontSize: '0.75rem' }}>{title}</Box>
+    <Box
+      css={{
+        p: '16px',
+        border: '1px solid #dee2e6',
+        borderRadius: 'clamp(0px, calc(100vw - 100%) * 1e5, 5px)',
+        boxShadow: 'inset 0 1px 4px 0 hsl(220 3% 15% / 10%);',
+      }}
+    >
+      {children}
+    </Box>
+  </Box>
+);
+
+// Parameters
+// ---------------
+export const parameters = {
   a11y: {
     element: '#root',
-    config: {},
-    options: {},
   },
   controls: { expanded: true },
-  themes: {
-    default: localStorage.getItem('marigold-storybook-current-theme') || 'b2b',
-    clearable: false,
-    onChange: ({ name }: { name: ThemeNames }) => {
-      localStorage.setItem('marigold-storybook-current-theme', name);
+};
+
+// Decorators
+// ---------------
+export const decorators = [
+  (Story: StoryFn, { globals, parameters }: any) => {
+    const theme = isChromatic()
+      ? 'stacked'
+      : globals.theme || parameters.theme || 'b2b';
+
+    switch (theme) {
+      case 'stacked': {
+        return (
+          <>
+            {Object.keys(THEME).map(key => (
+              <Frame key={key} title={`Theme "${key}"`}>
+                <MarigoldProvider theme={THEME[key as ThemeNames]}>
+                  <Story />
+                </MarigoldProvider>
+              </Frame>
+            ))}
+          </>
+        );
+      }
+      default: {
+        return (
+          <MarigoldProvider theme={THEME[theme as ThemeNames]}>
+            <Story />
+          </MarigoldProvider>
+        );
+      }
+    }
+  },
+];
+
+// Global Types
+// ---------------
+export const globalTypes = {
+  // Add theme selector to toolbar
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        ...Object.keys(THEME).map(key => ({
+          value: key,
+          title: key,
+        })),
+        { value: 'stacked', title: 'stacked' },
+      ],
     },
-    Decorator: ({
-      themeName,
-      children,
-    }: {
-      themeName: ThemeNames;
-      children: React.ReactChild;
-    }) => (
-      <MarigoldProvider theme={themes[themeName]}>{children}</MarigoldProvider>
-    ),
-    list: (Object.keys(themes) as ThemeNames[]).map(name => ({
-      name,
-      color: themes[name].colors!.primary,
-    })),
   },
-});
+};

themes/theme-b2b/src/index.ts

@@ -1,11 +1,13 @@
+import type { Theme } from '@marigold/components';
+
 import { colors } from './colors';
 import * as components from './components';
 
 export const webFontUrl = [
   'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
 ] as const;
 
-const theme: any = {
+const theme: Theme = {
   space: {
     none: 0,
     xxsmall: 4,