feat(ui): migrate to svelte-5 and storybook

packages/ui/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.stories.@(js|ts|svelte)"
+  ],
+
+  "addons": [
+    "@storybook/addon-svelte-csf",
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+  ],
+
+  "framework": {
+    "name": "@storybook/sveltekit",
+    "options": {}
+  },
+
+  docs: {}
+};
+export default config;

packages/ui/.storybook/manager-head.html

@@ -0,0 +1,12 @@
+<style>
+.sidebar-header {
+  display: none !important;
+}
+#downshift-0-label {
+  display: none !important;
+}
+
+#downshift-0-label ~ div {
+  margin-top: 0 !important;
+}
+</style>

packages/ui/.storybook/preview.ts

@@ -0,0 +1,29 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview } from '@storybook/svelte';
+
+import "../src/lib/app.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [withThemeByClassName({
+    themes: {
+      dark: 'theme-dark',
+      light: 'theme-light',
+      catppuccin: 'theme-catppuccin',
+      solarized: 'theme-solarized',
+      high: 'theme-high-contrast',
+      nord: 'theme-nord',
+      dracula: 'theme-dracula',
+    },
+    defaultTheme: 'light',
+  })],
+};
+
+export default preview;