chore(storybook): install and configure Storybook 10 with svelte-vite

vitest.config.ts

@@ -1,24 +1,52 @@
 import path from "node:path";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig } from "vitest/config";
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-	plugins: [svelte({ hot: !process.env.VITEST })],
-	test: {
-		globals: true,
-		environment: "jsdom",
-		setupFiles: ["./src/tests/setup.ts"],
-		include: ["src/**/*.{test,spec}.{js,ts}"],
-		exclude: ["src/tests/e2e/**/*.{test,spec}.{js,ts}"],
-	},
-	resolve: {
-		alias: {
-			$lib: path.resolve("./src/lib"),
-			$shared: path.resolve("./src/shared"),
-			$pages: path.resolve("./src/pages"),
-			$features: path.resolve("./src/features"),
-			$entities: path.resolve("./src/entities"),
-			$widgets: path.resolve("./src/widgets"),
-		},
-	},
-});
+  plugins: [svelte({
+    hot: !process.env.VITEST
+  })],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/tests/setup.ts"],
+    include: ["src/**/*.{test,spec}.{js,ts}"],
+    exclude: ["src/tests/e2e/**/*.{test,spec}.{js,ts}"],
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.ts']
+      }
+    }]
+  },
+  resolve: {
+    alias: {
+      $lib: path.resolve("./src/lib"),
+      $shared: path.resolve("./src/shared"),
+      $pages: path.resolve("./src/pages"),
+      $features: path.resolve("./src/features"),
+      $entities: path.resolve("./src/entities"),
+      $widgets: path.resolve("./src/widgets")
+    }
+  }
+});