Merge pull request #481 from Discours/storybook

Storybook

.storybook/main.ts

@@ -7,19 +7,27 @@ 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'
   },
+  viteFinal: (config) => {
+    if (config.build) {
+      config.build.sourcemap = true
+      config.build.minify = process.env.NODE_ENV === 'production'
+    }
+    return config
+  },
   previewHead: (head) => `
     ${head}
     <style>

.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 viteConfig, { runtime } from './vite.config'
-// 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
 
 export default defineConfig({
   nitro: {
@@ -34,31 +12,5 @@ export default defineConfig({
     https: true
   },
   devOverlay: true,
-  vite: {
+  vite: viteConfig
-    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']
-          }
-        }
-      }
-    }
-  }
 } as SolidStartInlineConfig)

package.json

@@ -46,9 +46,12 @@
     "@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",
+    "@storybook/builder-vite": "8.2.9",
+    "@storybook/docs-tools": "8.2.9",
     "@storybook/html": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",

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

@@ -1,15 +1,43 @@
 // src/components/atoms/Button/Button.stories.tsx
-import type { Meta } from '@storybook/html'
+// import type { Meta, StoryObj } from '@storybook/html'
+
+import { Meta, StoryObj } from 'storybook-solidjs'
 import { Button } from './Button'
+import './Button.module.scss'
 
 // Примените корректную типизацию для Storybook
 const meta: Meta<typeof Button> = {
-  title: 'Atoms/Button',
+  title: 'Atom/Button',
+  component: Button,
+
   argTypes: {
-    label: { control: 'text' },
+    value: { control: 'text' },
-    primary: { control: 'boolean' },
+    variant: {
+      options: ['primary', 'secondary', 'bordered', 'inline', 'light', 'outline', 'danger'],
+      control: { type: 'select' }
+    },
+    size: {
+      options: ['S', 'M', 'L'],
+      control: { type: 'radio' }
+    },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    isSubscribeButton: { control: 'boolean' },
     onClick: { action: 'clicked' }
   }
 }
 
 export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+  args: {
+    value: 'Button',
+    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']
+        }
+      }
+    }
+  }
+}