[feat] Improve Storybook configuration and setup

- Add comprehensive PrimeVue theme setup with ComfyUI preset
- Configure proper Vue app setup with Pinia stores, i18n, and services
- Remove unused onboarding addon from Storybook dependencies
- Improve Vite configuration with better chunking and alias resolution
- Add proper CSS imports and styling for ComfyUI components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.storybook/main.ts

@@ -1,21 +1,53 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
-import { mergeConfig } from 'vite'
+import { type InlineConfig, mergeConfig } from 'vite'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
   },
   async viteFinal(config) {
     return mergeConfig(config, {
+      server: {
+        allowedHosts: true
+      },
       resolve: {
         alias: {
-          '@': '/src'
+          '@': __dirname + '/../src'
         }
+      },
+      build: {
+        rollupOptions: {
+          external: (id) => {
+            // Suppress warnings for unused Vue internal imports
+            return false
+          },
+          onwarn: (warning, warn) => {
+            // Suppress specific warnings
+            if (warning.code === 'UNUSED_EXTERNAL_IMPORT' && warning.message?.includes('resolveComponent')) {
+              return
+            }
+            warn(warning)
+          },
+          output: {
+            manualChunks: {
+              'vue-vendor': ['vue', 'vue-router'],
+              'primevue': ['primevue/config', 'primevue'],
+              'storybook-docs': ['@storybook/docs-tools'],
+              'litegraph': ['./src/lib/litegraph']
+            }
+          }
+        },
+        chunkSizeWarningLimit: 1000
       }
-    })
+    } satisfies InlineConfig)
   }
 }
 export default config

.storybook/preview.ts

@@ -1,11 +1,53 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
 import type { Preview } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+
+import '../src/assets/css/style.css'
+import { i18n } from '../src/i18n'
+import '../src/lib/litegraph/public/css/litegraph.css'
+import { useWidgetStore } from '../src/stores/widgetStore'
+import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error fixme ts strict error
+    primary: Aura['primitive'].blue
+  }
+})
 
 // Setup Vue app for Storybook
 setup((app) => {
-  // Add Pinia store
-  app.use(createPinia())
+  app.directive('tooltip', Tooltip)
+  const pinia = createPinia()
+  app.use(pinia)
+
+  // Initialize stores
+  const colorPaletteStore = useColorPaletteStore(pinia)
+  const widgetStore = useWidgetStore(pinia)
+
+  app.use(i18n)
+  app.use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: {
+          name: 'primevue',
+          order: 'primevue, tailwind-utilities'
+        },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  app.use(ConfirmationService)
+  app.use(ToastService)
 })
 
 const preview: Preview = {

package-lock.json

@@ -60,7 +60,6 @@
         "@pinia/testing": "^0.1.5",
         "@playwright/test": "^1.52.0",
         "@storybook/addon-docs": "^9.1.1",
-        "@storybook/addon-onboarding": "^9.1.1",
         "@storybook/vue3-vite": "^9.1.1",
         "@trivago/prettier-plugin-sort-imports": "^5.2.0",
         "@types/dompurify": "^3.0.5",
@@ -4435,20 +4434,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@storybook/addon-onboarding": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-9.1.1.tgz",
-      "integrity": "sha512-QHkirYjgHqhJMmD2riVJ4qvkwNif79phEJuMd+Zna2niT5MMkmFSd+lfLgbEYr6ufbL2OWnsoUmxRY5s3RgKQw==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^9.1.1"
-      }
-    },
     "node_modules/@storybook/builder-vite": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.1.tgz",

package.json

@@ -41,7 +41,6 @@
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-onboarding": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/dompurify": "^3.0.5",

vite.config.mts

@@ -179,7 +179,7 @@ export default defineConfig({
 
   resolve: {
     alias: {
-      '@': '/src'
+      '@': './src'
     }
   },