vite-conf-connection-fix

.storybook/main.ts

@@ -1,5 +1,4 @@
 import type { FrameworkOptions, StorybookConfig } from 'storybook-solidjs-vite'
-import {CSSOptions} from "vite";
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
@@ -8,27 +7,26 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    '@storybook/addon-themes'
+    '@storybook/addon-themes',
+    '@storybook/addon-style-config'
   ],
   framework: {
     name: 'storybook-solidjs-vite',
     options: {
       builder: {
-        viteConfigPath: './app.config.ts'
+        viteConfigPath: './vite.config.ts'
       }
     } as FrameworkOptions
   },
   docs: {
     autodocs: 'tag'
   },
-
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: '@import "src/styles/imports";\n',
-        includePaths: ['./public', './src/styles']
+  viteFinal: (config) => {
+    if (config.build) {
+      config.build.sourcemap = true
+      config.build.minify = process.env.NODE_ENV === 'production'
     }
-    } as CSSOptions['preprocessorOptions']
+    return config
   },
   previewHead: (head) => `
     ${head}

.storybook/preview.ts

@@ -1,5 +1,4 @@
 import { withThemeByClassName } from '@storybook/addon-themes'
-import '../src/styles/_imports.scss'
 
 const preview = {
   parameters: {

app.config.ts

@@ -1,27 +1,5 @@
 import { SolidStartInlineConfig, defineConfig } from '@solidjs/start/config'
-import { CSSOptions } from 'vite'
-// import { visualizer } from 'rollup-plugin-visualizer'
-import mkcert from 'vite-plugin-mkcert'
-import { PolyfillOptions, nodePolyfills } from 'vite-plugin-node-polyfills'
-import sassDts from 'vite-plugin-sass-dts'
-
-const isVercel = Boolean(process?.env.VERCEL)
-const isNetlify = Boolean(process?.env.NETLIFY)
-const isBun = Boolean(process.env.BUN)
-const runtime = isNetlify ? 'netlify' : isVercel ? 'vercel_edge' : isBun ? 'bun' : 'node'
-console.info(`[app.config] build for ${runtime}!`)
-
-const polyfillOptions = {
-  include: ['path', 'stream', 'util'],
-  exclude: ['http'],
-  globals: {
-    Buffer: true
-  },
-  overrides: {
-    fs: 'memfs'
-  },
-  protocolImports: true
-} as PolyfillOptions
+import viteConfig, { runtime } from './vite.config'
 
 export default defineConfig({
   nitro: {
@@ -34,31 +12,5 @@ export default defineConfig({
     https: true
   },
   devOverlay: true,
-  vite: {
-    envPrefix: 'PUBLIC_',
-    plugins: [!isVercel && mkcert(), nodePolyfills(polyfillOptions), sassDts()],
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: '@import "src/styles/imports";\n',
-          includePaths: ['./public', './src/styles']
-        }
-      } as CSSOptions['preprocessorOptions']
-    },
-    build: {
-      target: 'esnext',
-      sourcemap: true,
-      rollupOptions: {
-        // plugins: [visualizer()]
-        output: {
-          manualChunks: {
-            icons: ['./src/components/_shared/Icon/Icon.tsx'],
-            session: ['./src/context/session.tsx'],
-            editor: ['./src/context/editor.tsx'],
-            connect: ['./src/context/connect.tsx']
-          }
-        }
-      }
-    }
-  }
+  vite: viteConfig
 } as SolidStartInlineConfig)

package.json

@@ -46,6 +46,7 @@
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-styling": "1.3.7",
     "@storybook/addon-themes": "^8.2.9",
     "@storybook/addon-viewport": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
@@ -141,11 +142,7 @@
   "engines": {
     "node": ">= 20"
   },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "esbuild",
-    "protobufjs"
-  ],
+  "trustedDependencies": ["@biomejs/biome", "esbuild", "protobufjs"],
   "dependencies": {
     "form-data": "^4.0.0",
     "idb": "^8.0.0",

src/components/atoms/Button/Button.stories.tsx

@@ -1,12 +1,12 @@
 // src/components/atoms/Button/Button.stories.tsx
 // import type { Meta, StoryObj } from '@storybook/html'
 
-import { Meta, StoryObj} from "storybook-solidjs";
-import { Button } from './Button';
-import './Button.module.scss';
+import { Meta, StoryObj } from 'storybook-solidjs'
+import { Button } from './Button'
+import './Button.module.scss'
 
 // Примените корректную типизацию для Storybook
-const meta: Meta <typeof Button> = {
+const meta: Meta<typeof Button> = {
   title: 'Atom/Button',
   component: Button,
 
@@ -14,11 +14,11 @@ const meta: Meta <typeof Button> = {
     value: { control: 'text' },
     variant: {
       options: ['primary', 'secondary', 'bordered', 'inline', 'light', 'outline', 'danger'],
-      control: {type: 'select'}
+      control: { type: 'select' }
     },
     size: {
       options: ['S', 'M', 'L'],
-      control: {type: 'radio'}
+      control: { type: 'radio' }
     },
     loading: { control: 'boolean' },
     disabled: { control: 'boolean' },
@@ -27,19 +27,17 @@ const meta: Meta <typeof Button> = {
   }
 }
 
-export default meta;
+export default meta
 
 type Story = StoryObj<typeof Button>
 
 export const Default: Story = {
   args: {
     value: 'Button',
-    variant: "primary",
+    variant: 'primary',
     size: 'M',
     loading: false,
     disabled: false,
     isSubscribeButton: false
   }
 }
-
-

vite.config.ts

@@ -0,0 +1,51 @@
+import { CSSOptions } from 'vite'
+// import { visualizer } from 'rollup-plugin-visualizer'
+import mkcert from 'vite-plugin-mkcert'
+import { PolyfillOptions, nodePolyfills } from 'vite-plugin-node-polyfills'
+import sassDts from 'vite-plugin-sass-dts'
+
+const isVercel = Boolean(process?.env.VERCEL)
+const isNetlify = Boolean(process?.env.NETLIFY)
+const isBun = Boolean(process.env.BUN)
+export const runtime = isNetlify ? 'netlify' : isVercel ? 'vercel_edge' : isBun ? 'bun' : 'node'
+console.info(`[app.config] build for ${runtime}!`)
+
+const polyfillOptions = {
+  include: ['path', 'stream', 'util'],
+  exclude: ['http'],
+  globals: {
+    Buffer: true
+  },
+  overrides: {
+    fs: 'memfs'
+  },
+  protocolImports: true
+} as PolyfillOptions
+
+export default {
+  envPrefix: 'PUBLIC_',
+  plugins: [!isVercel && mkcert(), nodePolyfills(polyfillOptions), sassDts()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "src/styles/imports";\n',
+        includePaths: ['./public', './src/styles']
+      }
+    } as CSSOptions['preprocessorOptions']
+  },
+  build: {
+    target: 'esnext',
+    sourcemap: true,
+    rollupOptions: {
+      // plugins: [visualizer()]
+      output: {
+        manualChunks: {
+          icons: ['./src/components/_shared/Icon/Icon.tsx'],
+          session: ['./src/context/session.tsx'],
+          editor: ['./src/context/editor.tsx'],
+          connect: ['./src/context/connect.tsx']
+        }
+      }
+    }
+  }
+}