Add Button design system and Storybook Solid setup

.storybook/constants.ts

@@ -1,30 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/main.ts

@@ -0,0 +1,20 @@
+import tailwindcss from "@tailwindcss/vite";
+import type { StorybookConfig } from "storybook-solidjs-vite";
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+	framework: "storybook-solidjs-vite",
+	viteFinal: async (config) => {
+		config.plugins ||= [];
+		config.plugins.push(tailwindcss());
+
+		return config;
+	},
+	core: {
+		disableTelemetry: true,
+		disableWhatsNewNotifications: true,
+		enableCrashReports: false,
+	},
+};
+export default config;

.storybook/preview.css

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

.storybook/preview.js

@@ -1,22 +0,0 @@
-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;

.storybook/preview.tsx

@@ -0,0 +1,44 @@
+import type { Preview } from "storybook-solidjs-vite";
+import "../src/app/styles/global.css";
+
+const preview: Preview = {
+	globalTypes: {
+		theme: {
+			name: "Theme",
+			description: "Global theme for components",
+			defaultValue: "light",
+			toolbar: {
+				icon: "mirror",
+				items: [
+					{ value: "light", title: "Light" },
+					{ value: "dark", title: "Dark" },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	decorators: [
+		(Story, context) => {
+			document.documentElement.dataset.theme = context.globals.theme ?? "light";
+
+			return (
+				<div style={{ padding: "16px" }}>
+					<Story />
+				</div>
+			);
+		},
+	],
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		a11y: {
+			test: "todo",
+		},
+	},
+};
+
+export default preview;