docs(LocaleCompare): add localization

packages/react-ui/.storybook/decorators/Locale/LocaleDecorator.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Decorator } from '@storybook/react';
+
+import { LangCodes, LocaleContext } from '../../../lib/locale';
+import { defaultLangCode } from '../../../lib/locale/constants';
+
+export const toolbarItems: { [key: string]: LangCodes } = {
+  ru: LangCodes.ru_RU,
+  en: LangCodes.en_GB,
+};
+
+const supportedLocaleControls = [
+  'Autocomplete',
+  'Calendar',
+  'DateInput',
+  'DatePicker',
+  'FileUploader',
+  'Modal',
+  'Paging',
+  'PasswordInput',
+  'Select',
+  'SidePage',
+  'Toast',
+  'Token',
+  'TokenInput',
+];
+const hideLocaleBtnInUnsupportedControls = (activeControl: string) => {
+  const localeBtn = window.parent.document.querySelector('button[title="React UI Locale"]');
+  const localeBtnWrapper = localeBtn?.closest('div');
+  if (localeBtnWrapper) {
+    localeBtnWrapper.style.display = supportedLocaleControls.includes(activeControl) ? 'inline-block' : 'none';
+  }
+};
+
+export const LocaleDecorator: Decorator = (Story, context) => {
+  const { locale } = context.globals;
+  const activeControl = context.title.split('/')[1];
+  const storybookLocale = toolbarItems[locale] || defaultLangCode;
+  hideLocaleBtnInUnsupportedControls(activeControl);
+
+  return (
+    <LocaleContext.Provider value={{ langCode: storybookLocale }}>
+      <Story />
+    </LocaleContext.Provider>
+  );
+};

packages/react-ui/.storybook/preview.tsx

@@ -15,6 +15,7 @@ import { THEME_2022 } from '../lib/theming/themes/Theme2022';
 import { THEME_2022_DARK } from '../lib/theming/themes/Theme2022Dark';
 import { ThemeFactory } from '../lib/theming/ThemeFactory';
 
+import { LocaleDecorator, toolbarItems } from './decorators/Locale/LocaleDecorator';
 import FeatureFlagsDecorator from './decorators/Features/FeatureFlagsDecorator';
 import { featureFlagsConfig } from './featureFlagsConfig/featureFlagsConfig';
 
@@ -98,7 +99,6 @@ const preview: Preview = {
       } else {
         document.body.classList.remove('dark');
       }
-
       if (storybookTheme !== DEFAULT_THEME) {
         return (
           <ThemeContext.Consumer>
@@ -112,7 +112,6 @@ const preview: Preview = {
           </ThemeContext.Consumer>
         );
       }
-
       return <Story />;
     },
     (Story) => (
@@ -140,6 +139,7 @@ const preview: Preview = {
         </ThemeContext.Consumer>
       );
     },
+    LocaleDecorator,
     FeatureFlagsDecorator,
   ],
 };
@@ -157,6 +157,17 @@ export const globalTypes = {
       showName: true,
     },
   },
+  locale: {
+    name: 'Locale',
+    description: 'React UI Locale',
+    defaultValue: 'ru',
+    toolbar: {
+      icon: 'globe',
+      items: Object.keys(toolbarItems),
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
 };
 
 if (isTestEnv) {