feat: HW forms

.github/workflows/main.yml

@@ -45,19 +45,19 @@ 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
         run: |
-          if [ ${{ job.status }} == 'failure' ]; then exit 1; fi;
+          if [ ${{ job.status }} == 'failure' ]; then exit 1; fi;

.storybook/decorators/StoreDecorator.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  defaultContext,
+  ELangVariables,
+  EThemeVariables,
+  IStoreContext,
+  StoreContext,
+} from '../../src/app/StoreContext';
+
+export default function StoreDecorator(Story: any) {
+  const [contextValue, setContextValue] = React.useState<IStoreContext>(defaultContext);
+
+  const { theme, lang } = contextValue;
+  const { i18n } = useTranslation();
+
+  const themeSwitchHandler = (): void => {
+    if (theme === 'light') {
+      setContextValue({ ...contextValue, theme: EThemeVariables.DARK });
+    } else {
+      setContextValue({ ...contextValue, theme: EThemeVariables.LIGHT });
+    }
+  };
+
+  const langSwitchHandler = (): void => {
+    if (lang === 'ru') {
+      setContextValue({ ...contextValue, lang: ELangVariables.EN });
+      i18n.changeLanguage('en-US');
+    } else {
+      setContextValue({ ...contextValue, lang: ELangVariables.RU });
+      i18n.changeLanguage('ru-RU');
+    }
+  };
+
+  return (
+    <StoreContext.Provider value={{ theme, lang, themeSwitchHandler, langSwitchHandler }}>
+      <Story />
+    </StoreContext.Provider>
+  );
+}

.storybook/main.ts

@@ -1,18 +1,19 @@
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   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',
+    'storybook-react-i18next',
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

.storybook/preview.ts

@@ -1,14 +1,18 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
+import i18n from '../src/app/i18n/config';
+import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
+import '!style-loader!css-loader!postcss-loader!../src/shared/RangeSlider/RangeSlider.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    i18n,
   },
 };