chore: add theme support in storybook

hugodutka · hugodutka · commit 1edab4526659 · 2025-07-21T16:31:37.000+02:00
diff --git a/chat/.storybook/main.ts b/chat/.storybook/main.ts
@@ -1,17 +1,12 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [],
-  "framework": {
-    "name": "@storybook/nextjs",
-    "options": {}
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
   },
-  "staticDirs": [
-    "../public"
-  ]
+  staticDirs: ["../public"],
 };
-export default config;
+export default config;
diff --git a/chat/.storybook/preview.ts b/chat/.storybook/preview.ts
@@ -1,14 +1,26 @@
-import type { Preview } from '@storybook/nextjs'
+import { Preview } from "@storybook/nextjs";
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+import "../src/app/globals.css";
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "dark",
+    }),
+  ],
 };
 
-export default preview;
+export default preview;
diff --git a/chat/bun.lock b/chat/bun.lock
@@ -19,6 +19,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
+        "@storybook/addon-themes": "^9.0.17",
         "@storybook/nextjs": "^9.0.17",
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
@@ -476,6 +477,8 @@
 
     "@rushstack/eslint-patch": ["@rushstack/eslint-patch@1.11.0", "", {}, "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ=="],
 
+    "@storybook/addon-themes": ["@storybook/addon-themes@9.0.17", "", { "dependencies": { "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^9.0.17" } }, "sha512-qQCoWig+wPVVuiibk8AuUUH/hS9hbLFt2IdjpiCIObAjStqSQMosr/1b95FcxppBCEa8uTltEkGdxQPdpdVZEQ=="],
+
     "@storybook/builder-webpack5": ["@storybook/builder-webpack5@9.0.17", "", { "dependencies": { "@storybook/core-webpack": "9.0.17", "case-sensitive-paths-webpack-plugin": "^2.4.0", "cjs-module-lexer": "^1.2.3", "css-loader": "^6.7.1", "es-module-lexer": "^1.5.0", "fork-ts-checker-webpack-plugin": "^8.0.0", "html-webpack-plugin": "^5.5.0", "magic-string": "^0.30.5", "style-loader": "^3.3.1", "terser-webpack-plugin": "^5.3.1", "ts-dedent": "^2.0.0", "webpack": "5", "webpack-dev-middleware": "^6.1.2", "webpack-hot-middleware": "^2.25.1", "webpack-virtual-modules": "^0.6.0" }, "peerDependencies": { "storybook": "^9.0.17" } }, "sha512-LiP/nq3qv+Nowxeo4v/p/Rv7FkZS347iBnjTQJxXWpFXrCjfJujzcYizQ1WXKC5jXnLSl4hqLmaB0tzMc/zFiQ=="],
 
     "@storybook/core-webpack": ["@storybook/core-webpack@9.0.17", "", { "dependencies": { "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^9.0.17" } }, "sha512-NyPSqYUZiD3ICHq/07IC06cDI5mwLA7cqmekWbD9BfSriI9RES88aQ7/WzliHLWwqQXj5Van3tt4IUfaU4Q3ng=="],
diff --git a/chat/package.json b/chat/package.json
@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@storybook/addon-themes": "^9.0.17",
     "@storybook/nextjs": "^9.0.17",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
diff --git a/chat/src/stories/message-input.stories.tsx b/chat/src/stories/message-input.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import "../app/globals.css";
 
 import MessageInput from "../components/message-input";
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import type { Meta, StoryObj } from "@storybook/nextjs";`
`2`		`-import "../app/globals.css";`
`3`	`2`
`4`	`3`	`import MessageInput from "../components/message-input";`
`5`	`4`