chore(storybook): replace main.mjs with main.ts for improved type safety and maintainability

fix(storybook): remove unused import map plugins in Storybook configuration to prevent potential issues
fix(storybook): update color palette store initialization to streamline code and improve readability

.storybook/main.mjs

@@ -1,48 +0,0 @@
-/** @type {import('@storybook/vue3-vite').StorybookConfig} */
-const config = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {}
-  },
-  async viteFinal(config) {
-    const { mergeConfig } = await import('vite')
-    const { fileURLToPath } = await import('url')
-    const path = await import('path')
-    
-    const __filename = fileURLToPath(import.meta.url)
-    const __dirname = path.dirname(__filename)
-
-    return mergeConfig(config, {
-      server: {
-        allowedHosts: true
-      },
-      resolve: {
-        alias: {
-          '@': __dirname + '/../src'
-        }
-      },
-      build: {
-        rollupOptions: {
-          external: (id) => {
-            return false
-          },
-          onwarn: (warning, warn) => {
-            if (
-              warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
-              warning.message?.includes('resolveComponent')
-            ) {
-              return
-            }
-            warn(warning)
-          },
-          output: {}
-        },
-        chunkSizeWarningLimit: 1000
-      }
-    })
-  }
-}
-
-export default config

.storybook/main.ts

@@ -0,0 +1,93 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+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, mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  async viteFinal(config) {
+    // 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
+        Icons({
+          compiler: 'vue3',
+          customCollections: {
+            comfy: FileSystemIconLoader(
+              __dirname + '/../src/assets/icons/custom'
+            )
+          }
+        }),
+        Components({
+          dts: false, // Disable dts generation in Storybook
+          resolvers: [
+            IconsResolver({
+              customCollections: ['comfy']
+            })
+          ],
+          dirs: [
+            __dirname + '/../src/components',
+            __dirname + '/../src/layout',
+            __dirname + '/../src/views'
+          ],
+          deep: true,
+          extensions: ['vue']
+        })
+        // Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
+      ],
+      server: {
+        allowedHosts: true
+      },
+      resolve: {
+        alias: {
+          '@': __dirname + '/../src'
+        }
+      },
+      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
+      }
+    } satisfies InlineConfig)
+  }
+}
+export default config

.storybook/preview.ts

@@ -17,6 +17,7 @@ import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
+    // @ts-expect-error fix me
     primary: Aura['primitive'].blue
   }
 })
@@ -28,8 +29,8 @@ setup((app) => {
   app.use(pinia)
 
   // Initialize stores
-  const colorPaletteStore = useColorPaletteStore(pinia)
-  const widgetStore = useWidgetStore(pinia)
+  useColorPaletteStore(pinia)
+  useWidgetStore(pinia)
 
   app.use(i18n)
   app.use(PrimeVue, {