Full-page stories

Author: sandhose

frontend/.storybook/main.ts

@@ -7,7 +7,9 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../{src,stories}/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  staticDirs: ["../stories/static"],
 
   addons: [
     // Automatic docs pages
@@ -31,6 +33,9 @@ const config: StorybookConfig = {
     // Theme switch toolbar
     "@storybook/addon-toolbars",
 
+    // Interactions
+    "@storybook/addon-interactions",
+
     // i18next integration
     "storybook-react-i18next",
   ],
@@ -48,6 +53,10 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+
+  env: {
+    STORYBOOK: "true",
+  },
 };
 
 export default config;

frontend/.storybook/preview.tsx

@@ -11,14 +11,25 @@ import type {
   Preview,
 } from "@storybook/react";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { initialize, mswLoader } from "msw-storybook-addon";
 import { useLayoutEffect } from "react";
 
 import "../src/shared.css";
-import i18n from "../src/i18n";
+import i18n, { setupI18n } from "../src/i18n";
 
 import { DummyRouter } from "../src/test-utils/router";
+import { handlers } from "../tests/mocks/handlers";
 import localazyMetadata from "./locales";
 
+initialize(
+  {
+    onUnhandledRequest: "bypass",
+  },
+  handlers,
+);
+
+setupI18n();
+
 export const parameters: Parameters = {
   controls: {
     matchers: {
@@ -104,13 +115,14 @@ const locales = Object.fromEntries(
 );
 
 const preview: Preview = {
-  globals: {
+  initialGlobals: {
     locale: localazyMetadata.baseLocale,
     locales,
   },
   parameters: {
     i18n,
   },
+  loaders: [mswLoader],
 };
 
 export default preview;