Setup Storybook with light and dark theme and multiple viewports

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-addon-designs",
     {
       name: "../dist/index.js",
       options: {

.storybook/preview.tsx

@@ -0,0 +1,154 @@
+import {
+  Global,
+  ThemeProvider,
+  themes,
+  createReset,
+  convert,
+  styled,
+  useTheme,
+} from "@storybook/theming";
+import type { Preview } from "@storybook/react";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+import React from "react";
+
+// Initialize MSW
+initialize({
+  onUnhandledRequest(req) {
+    if (req.url.origin !== document.location.origin) {
+      console.error(
+        `[MSW] %s %s %s (UNHANDLED)`,
+        new Date().toTimeString().slice(0, 8),
+        req.method.toUpperCase(),
+        req.url.href
+      );
+    }
+  },
+});
+
+const Panels = styled.div<{ orientation: "right" | "bottom" }>(
+  ({ orientation }) => ({
+    flexDirection: orientation === "right" ? "row" : "column",
+  }),
+  {
+    width: "100vw",
+    height: "100vh",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 20,
+  }
+);
+
+const Panel = styled.div<{ orientation: "right" | "bottom" }>(
+  ({ orientation }) => ({
+    width: orientation === "right" ? 420 : 900,
+    height: orientation === "right" ? 640 : 300,
+    overflow: "auto",
+  }),
+  ({ theme }) => ({
+    position: "relative",
+    outline: `1px solid ${theme.color.border}`,
+    background: theme.background.content,
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.s2 - 1,
+  })
+);
+
+const ThemedSetRoot = () => {
+  const theme = useTheme();
+  React.useEffect(() => {
+    document.body.style.background = theme.background.content;
+    document.body.style.color = theme.color.defaultText;
+    document.body.style.fontSize = `${theme.typography.size.s2 - 1}px`;
+  });
+  return null;
+};
+
+export const decorators = [
+  // Provide the MSW addon decorator globally
+  mswDecorator,
+
+  // Render two panels side-by-side or stacked, depending on selected orientation
+  // Note this assumes any play functions are equipped to deal with multiple canvases
+  (StoryFn, { globals, parameters }) => {
+    const theme = globals.theme || parameters.theme || "right";
+    return theme === "light" || theme === "dark" ? (
+      <ThemeProvider theme={convert(themes[theme])}>
+        <Global styles={createReset} />
+        <Global styles={{ "#storybook-root": { height: "100vh" } }}></Global>
+        <ThemedSetRoot />
+        <StoryFn />
+      </ThemeProvider>
+    ) : (
+      <>
+        <ThemeProvider theme={convert(themes.light)}>
+          <Global styles={createReset} />
+          <ThemedSetRoot />
+        </ThemeProvider>
+        <Panels orientation={theme}>
+          <ThemeProvider theme={convert(themes.light)}>
+            <Panel orientation={theme} data-canvas={theme}>
+              <StoryFn />
+            </Panel>
+          </ThemeProvider>
+          <ThemeProvider theme={convert(themes.dark)}>
+            <Panel orientation={theme} data-canvas={theme}>
+              <StoryFn />
+            </Panel>
+          </ThemeProvider>
+        </Panels>
+      </>
+    );
+  },
+];
+
+export const parameters: Preview["parameters"] = {
+  actions: {
+    argTypesRegex: "^on[A-Z].*",
+  },
+  backgrounds: {
+    disable: true,
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: "fullscreen",
+  viewport: {
+    viewports: {
+      right: {
+        name: "Right panel",
+        styles: {
+          width: "420px",
+          height: "640px",
+        },
+      },
+      bottom: {
+        name: "Bottom panel",
+        styles: {
+          width: "900px",
+          height: "300px",
+        },
+      },
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Panel theme",
+    toolbar: {
+      icon: "sidebaralt",
+      title: "Theme",
+      items: [
+        { value: "light", icon: "circlehollow", title: "Light" },
+        { value: "dark", icon: "circle", title: "Dark" },
+        { value: "right", icon: "sidebaralt", title: "Right 2-up" },
+        { value: "bottom", icon: "bottombar", title: "Bottom 2-up" },
+      ],
+    },
+  },
+};

package.json

@@ -83,7 +83,9 @@
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "rimraf": "^3.0.2",
     "storybook": "^7.1.0-alpha.34",
+    "storybook-addon-designs": "^7.0.0-beta.2",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",