coder · hugodutka · Jul 22, 2025 · Jul 21, 2025 · Jul 21, 2025
diff --git a/chat/.gitignore b/chat/.gitignore
@@ -40,3 +40,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 .sources.stamp
+
+*storybook.log
+storybook-static
diff --git a/chat/.storybook/main.ts b/chat/.storybook/main.ts
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;
diff --git a/chat/.storybook/preview.ts b/chat/.storybook/preview.ts
@@ -0,0 +1,26 @@
+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,
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "dark",
+    }),
+  ],
+};
+
+export default preview;
diff --git a/chat/bun.lock b/chat/bun.lock
diff --git a/chat/eslint.config.mjs b/chat/eslint.config.mjs
@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
@@ -11,6 +14,7 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...storybook.configs["flat/recommended"]
 ];
 
 export default eslintConfig;
diff --git a/chat/package.json b/chat/package.json
@@ -9,7 +9,9 @@
     "lint": "next lint",
     "export": "GITHUB_PAGES=true next build",
     "serve-static": "npx serve out",
-    "deploy-gh-pages": "GITHUB_PAGES=true next build && gh-pages -d out --nojekyll -e chat -f"
+    "deploy-gh-pages": "GITHUB_PAGES=true next build && gh-pages -d out --nojekyll -e chat -f",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.14",
@@ -27,15 +29,19 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@storybook/addon-themes": "^9.0.17",
+    "@storybook/nextjs": "^9.0.17",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
+    "eslint-plugin-storybook": "^9.0.17",
     "gh-pages": "^6.3.0",
+    "storybook": "^9.0.17",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.0",
     "typescript": "^5"
   }
-}
+}
diff --git a/chat/src/stories/message-input.stories.tsx b/chat/src/stories/message-input.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import MessageInput from "../components/message-input";
+
+const meta = {
+  title: "Components/MessageInput",
+  component: MessageInput,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+} satisfies Meta<typeof MessageInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onSendMessage: () => {},
+  },
+};