[feat] Add Storybook configuration and settings panel stories

- Set up Storybook 9.1.2 with Vue 3, PrimeVue, and Tailwind CSS support
- Created comprehensive stories for settings panel components:
  - SettingItem: Various input types (boolean, text, number, slider, combo, color)
  - SettingGroup: Grouped settings with dividers and different categories
  - SettingsPanel: Multiple setting groups and empty states
  - PanelTemplate: Reusable panel layout with header/footer slots
  - AboutPanel: System information and project badges
  - SettingDialogContent: Complete dialog with responsive layouts
- Updated TypeScript configuration to include Storybook files

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

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

.gitignore

@@ -75,4 +75,3 @@ vite.config.mts.timestamp-*.mjs
 
 *storybook.log
 storybook-static
-

.storybook/main.ts

@@ -1,96 +1,63 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
+import vue from '@vitejs/plugin-vue'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
-import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    '@storybook/addon-backgrounds'
+  ],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
   },
-  async viteFinal(config) {
-    // Use dynamic import to avoid CJS deprecation warning
+  viteFinal: async (config) => {
     const { mergeConfig } = await import('vite')
 
-    // Filter out any plugins that might generate import maps
-    if (config.plugins) {
-      config.plugins = config.plugins.filter((plugin: any) => {
-        if (plugin && plugin.name && plugin.name.includes('import-map')) {
-          return false
-        }
-        return true
-      })
-    }
-
     return mergeConfig(config, {
-      // Replace plugins entirely to avoid inheritance issues
       plugins: [
-        // Only include plugins we explicitly need for Storybook
+        vue(),
         Icons({
           compiler: 'vue3',
           customCollections: {
-            comfy: FileSystemIconLoader(
-              process.cwd() + '/src/assets/icons/custom'
-            )
+            comfy: FileSystemIconLoader('../src/assets/icons/custom')
           }
         }),
         Components({
-          dts: false, // Disable dts generation in Storybook
+          dts: false, // Disable DTS generation for Storybook
           resolvers: [
             IconsResolver({
               customCollections: ['comfy']
             })
           ],
-          dirs: [
-            process.cwd() + '/src/components',
-            process.cwd() + '/src/layout',
-            process.cwd() + '/src/views'
-          ],
+          dirs: ['../src/components', '../src/layout', '../src/views'],
           deep: true,
           extensions: ['vue']
         })
-        // Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
       ],
-      server: {
-        allowedHosts: true
-      },
       resolve: {
         alias: {
-          '@': process.cwd() + '/src'
+          '@': new URL('../src', import.meta.url).pathname
         }
       },
-      build: {
-        rollupOptions: {
-          external: () => {
-            // Don't externalize any modules in Storybook build
-            // This ensures PrimeVue and other dependencies are bundled
-            return false
-          },
-          onwarn: (warning, warn) => {
-            // Suppress specific warnings
-            if (
-              warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
-              warning.message?.includes('resolveComponent')
-            ) {
-              return
-            }
-            // Suppress Storybook font asset warnings
-            if (
-              warning.code === 'UNRESOLVED_IMPORT' &&
-              warning.message?.includes('nunito-sans')
-            ) {
-              return
-            }
-            warn(warning)
-          }
-        },
-        chunkSizeWarningLimit: 1000
+      define: {
+        ...config.define,
+        global: 'globalThis',
+        __COMFYUI_FRONTEND_VERSION__: JSON.stringify('1.26.4'),
+        __SENTRY_ENABLED__: JSON.stringify(false),
+        __SENTRY_DSN__: JSON.stringify(''),
+        __ALGOLIA_APP_ID__: JSON.stringify(''),
+        __ALGOLIA_API_KEY__: JSON.stringify(''),
+        __USE_PROD_CONFIG__: JSON.stringify(false)
       }
-    } satisfies InlineConfig)
+    })
   }
 }
 export default config

.storybook/preview.ts

@@ -1,53 +1,57 @@
-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 { createI18n } from 'vue-i18n'
 
+import '../public/materialdesignicons.min.css'
+// Import styles
 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 fix me
-    primary: Aura['primitive'].blue
-  }
-})
+// Mock Firebase for Storybook
+const mockFirebase = {
+  auth: () => ({
+    currentUser: null,
+    onAuthStateChanged: () => () => {}
+  }),
+  firestore: () => ({})
+}
 
-// Setup Vue app for Storybook
+// Setup Vue plugins for Storybook
 setup((app) => {
-  app.directive('tooltip', Tooltip)
   const pinia = createPinia()
-  app.use(pinia)
-
-  // Initialize stores
-  useColorPaletteStore(pinia)
-  useWidgetStore(pinia)
+  const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en: {
+        g: {
+          searchSettings: 'Search Settings',
+          noResultsFound: 'No Results Found',
+          searchFailedMessage: 'Try adjusting your search terms',
+          experimental: 'Experimental',
+          loadingPanel: 'Loading {panel}...'
+        },
+        settings: {},
+        settingsCategories: {}
+      }
+    }
+  })
 
+  app.use(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)'
-      }
+      preset: null // Will use CSS for theming
     }
   })
-  app.use(ConfirmationService)
   app.use(ToastService)
+  app.directive('tooltip', Tooltip)
+
+  // Provide mock services
+  app.provide('firebase', mockFirebase)
 })
 
 // Dark theme decorator
@@ -77,9 +81,40 @@ const preview: Preview = {
     backgrounds: {
       default: 'light',
       values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#0a0a0a' }
+        {
+          name: 'light',
+          value: '#ffffff'
+        },
+        {
+          name: 'dark',
+          value: '#1a1a1a'
+        }
       ]
+    },
+    viewport: {
+      viewports: {
+        small: {
+          name: 'Small',
+          styles: {
+            width: '640px',
+            height: '480px'
+          }
+        },
+        medium: {
+          name: 'Medium',
+          styles: {
+            width: '768px',
+            height: '1024px'
+          }
+        },
+        large: {
+          name: 'Large',
+          styles: {
+            width: '1024px',
+            height: '768px'
+          }
+        }
+      }
     }
   },
   globalTypes: {