add Button component and Storybook configuration

.storybook/constants.ts

@@ -0,0 +1,30 @@
+export const CUSTOM_VIEW_PORTS = {
+	sm: {
+		name: "Small",
+		styles: {
+			width: "375px",
+			height: "800px",
+		},
+	},
+	md: {
+		name: "Medium",
+		styles: {
+			width: "768px",
+			height: "1024px",
+		},
+	},
+	lg: {
+		name: "Large",
+		styles: {
+			width: "1024px",
+			height: "1366px",
+		},
+	},
+	xl: {
+		name: "Extra Large",
+		styles: {
+			width: "1440px",
+			height: "900px",
+		},
+	},
+};

.storybook/main.js

@@ -0,0 +1,18 @@
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+	stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+	staticDirs: ["../public"],
+	framework: {
+		name: "@storybook-astro/framework",
+	},
+	core: {
+		disableTelemetry: true,
+		enableCrashReports: false,
+	},
+	async viteFinal(config) {
+		config.plugins = config.plugins || [];
+		config.plugins.push(tailwindcss());
+		return config;
+	},
+};

.storybook/preview.css

@@ -0,0 +1 @@
+@import "../src/app/styles/global.css";

.storybook/preview.js

@@ -0,0 +1,22 @@
+import "./preview.css";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
+import { CUSTOM_VIEW_PORTS } from "./constants.ts";
+
+const preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		backgrounds: {
+			default: "darky",
+			values: [{ name: "darky", value: "#0b121a" }],
+		},
+		viewport: {
+			options: { ...CUSTOM_VIEW_PORTS, ...INITIAL_VIEWPORTS },
+		},
+	},
+};
+export default preview;