chore: add storybook

Author: hugodutka

chat/.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 .sources.stamp
+
+*storybook.log
+storybook-static

chat/.storybook/main.ts

@@ -0,0 +1,17 @@
+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": {}
+  },
+  "staticDirs": [
+    "../public"
+  ]
+};
+export default config;

chat/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/nextjs'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

chat/bun.lock

@@ -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;

chat/eslint.config.mjs

@@ -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,18 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@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"
   }
-}
+}

chat/package.json

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import "../app/globals.css";
+
+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: () => {},
+  },
+};