chore: storybook

packages/ui/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-styling',
+	],
+	core: {
+		builder: '@storybook/builder-vite',
+	},
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+} satisfies StorybookConfig;

packages/ui/.storybook/preview.css

@@ -0,0 +1,7 @@
+html {
+	color-scheme: light;
+}
+
+html.dark {
+	color-scheme: dark;
+}

packages/ui/.storybook/preview.ts

@@ -0,0 +1,28 @@
+import type { Preview } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-styling';
+
+import '@unocss/reset/tailwind-compat.css';
+import './preview.css';
+import 'virtual:uno.css';
+
+export default {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+} satisfies Preview;
+
+export const decorators = [
+	withThemeByClassName({
+		themes: {
+			light: 'bg-light-600',
+			dark: 'dark bg-dark-600',
+		},
+		defaultTheme: 'light',
+	}),
+];