Update repository

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
   ],
   rules: {
     'prettier/prettier': 'warn',

.gitignore

@@ -1,4 +1,6 @@
+# IDE Settings
 .idea
+
 # Logs
 logs
 *.log
@@ -7,6 +9,9 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+# System files
+.DS_Store
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -118,3 +123,7 @@ dist
 
 # Compiled code
 lib/
+
+*storybook.log
+storybook-static
+public

.storybook/main.ts

@@ -0,0 +1,51 @@
+import { StorybookConfig } from '@storybook/react-vite';
+import { type InlineConfig, mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  core: {
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+  stories: [
+    '../src/**/*.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/hooks/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@chromatic-com/storybook',
+    '@storybook/addon-themes',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    // '@storybook/addon-onboarding',
+    '@github-ui/storybook-addon-performance-panel',
+  ],
+  docs: {
+    // docsMode: true,
+  },
+  framework: '@storybook/react-vite',
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  viteFinal: async (config: InlineConfig) => {
+    // Находим индекс плагина dts и убираем его из конфига для Storybook
+    // const plugins = config.plugins?.filter((p: any) => {
+    //   // Имя плагина vite-plugin-dts обычно 'vite:dts' или можно проверить по конструктору
+    //   return p?.name !== 'vite:dts';
+    // });
+
+    // config — это конфиг Vite, который использует Storybook
+    return mergeConfig(config, {
+      // plugins, // Возвращаем конфиг без плагина генерации типов
+      build: {
+        lib: false, // Отключаем режим библиотеки
+        outDir: '../storybook-static-temp', // Временная папка, чтобы не мешать
+        rollupOptions: {
+          external: [],
+          output: { globals: {} },
+        },
+      },
+    });
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,49 @@
+import { definePreview, ReactRenderer } from '@storybook/react-vite';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { DocsTypes } from '@storybook/addon-docs';
+import addonPerformancePanel from '@github-ui/storybook-addon-performance-panel';
+import '@cdek-it/typography/dist/index.min.css';
+import '../src/utils/icons.scss';
+import '../src/themes/theme-light/theme.scss';
+import './tailwind.css';
+
+const docs: DocsTypes['parameters']['docs'] = {
+  toc: true, // 👈 Enables the table of contents
+};
+
+const preview = definePreview({
+  addons: [addonPerformancePanel()],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs,
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+  // tags: ['autodocs'],
+  decorators: [
+    withThemeByDataAttribute<ReactRenderer>({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+  globalTypes: {
+    theme: {
+      defaultValue: 'light',
+    },
+  },
+});
+
+export default preview;

.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

.storybook/test-runner.ts

@@ -0,0 +1,24 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${process.cwd()}/__image_snapshots__`;
+
+const testRunner: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async preVisit(page) {
+    await page.setDefaultTimeout(60000); // Увеличьте до 60 секунд или больше, если необходимо
+  },
+  async postVisit(page, context) {
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      failureThreshold: 0.03,
+      failureThresholdType: 'percent',
+      customSnapshotsDir,
+      customSnapshotIdentifier: context.id,
+    });
+  },
+};
+
+export default testRunner;