feat: Добавлена конфигурация для storybook

config/storybook/main.ts

@@ -0,0 +1,79 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import path from 'path'
+
+import { buildCssLoader } from '../build/loaders/buildCssLoader'
+
+const config: StorybookConfig = {
+    stories: ['../../src/**/*.stories.@(ts|tsx)'],
+
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-links',
+        '@storybook/addon-webpack5-compiler-babel',
+    ],
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+
+    docs: {},
+
+    webpackFinal: async (config) => {
+        // Добавление алиасов путей TypeScript
+        if (config.resolve) {
+            config.resolve.modules = [
+                path.resolve(__dirname, '../../src'),
+                'node_modules',
+            ]
+
+            config.resolve.alias = {
+                ...config.resolve.alias,
+                '@': path.resolve(__dirname, '../../src'),
+            }
+
+            config.resolve.extensions = [
+                ...(config.resolve.extensions || []),
+                '.ts',
+                '.tsx',
+            ]
+        }
+
+        // Добавление поддержки SCSS через buildCssLoader проекта
+        config.module = config.module || {}
+        config.module.rules = config.module.rules || []
+
+        // Удаление стандартных правил CSS/SCSS из Storybook
+        config.module.rules = config.module.rules.filter((rule) => {
+            if (typeof rule === 'object' && rule !== null && 'test' in rule) {
+                const test = rule.test
+                if (test instanceof RegExp) {
+                    return !(test.test('.css') || test.test('.scss') || test.test('.sass'))
+                }
+            }
+            return true
+        })
+
+        // Использование конфигурации CSS loader из проекта
+        config.module.rules.push(buildCssLoader(true))
+
+        return config
+    },
+
+    typescript: {
+        check: false,
+        reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            shouldExtractLiteralValuesFromEnum: true,
+            propFilter: (prop) => {
+                if (prop.parent) {
+                    return !prop.parent.fileName.includes('node_modules')
+                }
+                return true
+            },
+        },
+    },
+}
+
+export default config

config/storybook/preview.ts

@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        backgrounds: {
+            default: 'light',
+            values: [
+                {
+                    name: 'light',
+                    value: '#ffffff',
+                },
+                {
+                    name: 'dark',
+                    value: '#1a1a1a',
+                },
+            ],
+        },
+    },
+}
+
+export default preview

package.json

@@ -11,7 +11,9 @@
         "lint:styles": "stylelint 'src/**/*.{css,scss}' --allow-empty-input",
         "type-check": "tsc --noEmit",
         "prepare": "husky",
-        "pre-push": "pnpm type-check && pnpm lint && pnpm lint:styles && pnpm build:prod"
+        "pre-push": "pnpm type-check && pnpm lint && pnpm lint:styles && pnpm build:prod",
+        "storybook": "storybook dev -p 6006 -c config/storybook",
+        "build-storybook": "storybook build -c config/storybook"
     },
     "keywords": [],
     "author": "",
@@ -29,6 +31,12 @@
         "@babel/preset-typescript": "^7.26.0",
         "@eslint/js": "^9.15.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-interactions": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
+        "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+        "@storybook/react": "^8.6.14",
+        "@storybook/react-webpack5": "^8.6.14",
         "@svgr/webpack": "^8.1.0",
         "@types/node": "^22.0.0",
         "@types/react": "^19.0.0",
@@ -57,6 +65,7 @@
         "react-refresh": "^0.14.2",
         "sass": "^1.81.0",
         "sass-loader": "^16.0.0",
+        "storybook": "^8.6.14",
         "style-loader": "^4.0.0",
         "stylelint": "^16.11.0",
         "stylelint-config-standard-scss": "^13.1.0",