homework-25

.storybook/decorators.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+export const withRouter = (Story: React.ComponentType) => (
+  <MemoryRouter initialEntries={['/']}>
+    <Story />
+  </MemoryRouter>
+); 

.storybook/main.js

@@ -0,0 +1,56 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Добавляем поддержку SASS
+    config.module.rules.push({
+      test: /\.s[ac]ss$/i,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 1,
+            modules: {
+              auto: true,
+            },
+          },
+        },
+        'sass-loader',
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Добавляем поддержку SVG
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, '../src'),
+    ];
+
+    return config;
+  },
+}; 

.storybook/preview.js

@@ -0,0 +1,32 @@
+import { MemoryRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import '../src/app/App.css';
+import '../src/components/Header/Header.css';
+import '../src/components/ProductList/ProductList.css';
+import '../src/components/BasketList/BasketList.css';
+import '../src/components/BasketRow/BasketRow.css';
+import '../src/pages/ModalPage.css';
+import '../src/styles/BasketPage.css';
+import '../src/styles/HomePage.css';
+import '../src/styles/ProductsPage.css';
+import '../src/styles/ProfilePage.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <BrowserRouter>
+      <div style={{ padding: '20px' }}>
+        <Story />
+      </div>
+    </BrowserRouter>
+  ),
+]; 

.storybook/preview.ts

@@ -1,15 +1,17 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
+import { withRouter } from './decorators';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
     },
   },
+  decorators: [withRouter],
 };
 
 export default preview;

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import React from 'react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={['/']}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default preview;