Features jest test

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: Test, Lint, Build and Deploy on Github Pages
 
 on:
   push:
-    branches: ["master", "main"]
+    branches: ['master', 'main']
 
   # Позволяет запустить этот рабочий процесс вручную на вкладке Actions
   workflow_dispatch:
@@ -45,17 +45,17 @@ jobs:
           branch: gh-pages
           folder: dist
 
-      #      # Собираем Storybook
-      #      - name: Build Storybook
-      #        run: npm run build-storybook
-      #
-      #      # Публикуем Storybook на Github Pages
-      #      - name: Deploy Storybook to Github Pages
-      #        uses: JamesIves/[email protected]
-      #        with:
-      #          branch: gh-pages
-      #          folder: storybook-static
-      #          commit-message: "Automatically publish Storybook"
+      # Собираем Storybook
+      # - name: Build Storybook
+      #   run: npm run build-storybook
+
+      # # Публикуем Storybook на Github Pages
+      # - name: Deploy Storybook to Github Pages
+      #   uses: JamesIves/[email protected]
+      #   with:
+      #     branch: gh-pages
+      #     folder: storybook-static
+      #     commit-message: 'Automatically publish Storybook'
 
       # Останавливаем выполнение строго при неудачных тестах
       - name: Fail on failed tests

.storybook/main.ts

@@ -1,18 +1,20 @@
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  // staticDirs: ['../src/assets'],
+  staticDirs: [{ from: '../src/assets', to: '../../assets' }],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-scss",
-    "@storybook/addon-mdx-gfm"
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-scss',
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="root-modal"></div>

.storybook/preview.tsx

@@ -0,0 +1,57 @@
+import type { Preview } from '@storybook/react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import i18n from '../src/localization/settings';
+import React, { Suspense } from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
+
+
+// Wrap your stories in the I18nextProvider component
+const withI18next = (Story) => {
+  return (
+    // This catches the suspense from components not yet ready (still loading translations)
+    // Alternative: set useSuspense to false on i18next.options.react when initializing i18next
+    <Suspense fallback={<div>loading translations...</div>}>
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    </Suspense>
+  );
+};
+
+// export decorators for storybook to wrap your stories in
+export const decorators = [withI18next];
+
+
+/* Snipped for brevity */
+
+// Create a global variable called locale in storybook
+// and add a menu in the toolbar to change your locale
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', title: 'English' },
+        { value: 'de', title: 'Deutsch' },
+      ],
+      showName: true,
+    },
+  },
+};
+

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}",
+            // "runtimeExecutable": "/Applications/Сhrome.app",
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "workbench.externalBrowser": "chrome"
+}

declarations.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="redux-persist" />
 declare module '*.sass';
 declare module '*.scss';
 declare module '*.css';
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.png';
 declare module '*.svg';
+declare module '*d.ts';