feat(I18N): add configure function for manage internal variables like…

… language (#186)

.storybook/decorators/withLang.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import {Story as StoryType, StoryContext} from '@storybook/react';
-import {I18N} from '@yandex-cloud/i18n';
+import {Lang, configure} from '../../src/components/utils/configure';
 
 export function withLang(Story: StoryType, context: StoryContext) {
     const lang = context.globals.lang;
 
-    I18N.setDefaultLang(lang);
+    configure({
+        lang: lang as Lang,
+    });
 
     return <Story key={lang} {...context} />;
 }

.storybook/preview.js

@@ -7,14 +7,16 @@ import {withTheme} from './decorators/withTheme';
 import {withMobile} from './decorators/withMobile';
 import {withLang} from './decorators/withLang';
 import {ThemeProvider, MobileProvider} from '../src';
-import {I18N} from '../src/i18n';
+import {configure} from '../src/components/utils/configure';
 
-I18N.setDefaultLang(I18N.LANGS.en);
+configure({
+    lang: 'en',
+});
 
 const withContextProvider = (Story, context) => {
     const theme = context.globals.theme;
 
-    // хак для установки темы в доке
+    // dark theme for documentation hack
     context.parameters.backgrounds.default = theme;
     context.globals.backgrounds = {
         value: theme === 'light' ? 'white' : 'black',

README.md

@@ -17,6 +17,10 @@ import {Button} from '@yandex-cloud/uikit';
 const SubmitButton = <Button view="action" size="l" />;
 ```
 
+## I18N
+
+Some components contain prepared text. For changing language use `configure` function.
+
 ## Development
 
 To start the dev storybook

src/components/Stories/i18n/index.ts

@@ -1,10 +1,11 @@
-import {i18n, I18N} from '../../../i18n';
+import {i18n} from '../../../i18n';
+import {Lang} from '../../utils/configure';
 import en from './en.json';
 import ru from './ru.json';
 
 const COMPONENT = 'Stories';
 
-i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
-i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);

src/components/Table/hoc/withTableSettings/TableColumnSetup/i18n/index.ts

@@ -1,10 +1,11 @@
-import {i18n, I18N} from '../../../../../../i18n';
+import {i18n} from '../../../../../../i18n';
+import {Lang} from '../../../../../utils/configure';
 import en from './en.json';
 import ru from './ru.json';
 
 const COMPONENT = 'TableColumnSetup';
 
-i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
-i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);

src/components/Table/i18n/index.ts

@@ -1,10 +1,11 @@
-import {i18n, I18N} from '../../../i18n';
+import {i18n} from '../../../i18n';
+import {Lang} from '../../utils/configure';
 import en from './en.json';
 import ru from './ru.json';
 
 const COMPONENT = 'Table';
 
-i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
-i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);

src/components/index.ts

@@ -45,3 +45,4 @@ export * from './utils/withEventBrokerDomHandlers';
 export * from './utils/useEventBroker';
 export * from './utils/useLayer';
 export * from './utils/useVirtualElementRef';
+export {Lang, configure} from './utils/configure';

src/components/utils/configure.ts

@@ -0,0 +1,31 @@
+export enum Lang {
+    Ru = 'ru',
+    En = 'en',
+}
+
+interface Config {
+    lang?: Lang;
+}
+
+type Subscriber = (config: Config) => void;
+
+let subs: Subscriber[] = [];
+
+const config: Config = {};
+
+export const configure = (newConfig: Config) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+
+export const subscribeConfigure = (sub: Subscriber) => {
+    subs.push(sub);
+
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+
+export const getConfig = () => config;

src/i18n.ts

@@ -1,5 +1,18 @@
 import {I18N} from '@yandex-cloud/i18n';
-
-export {I18N} from '@yandex-cloud/i18n';
+import {getConfig, subscribeConfigure, Lang} from './components/utils/configure';
 
 export const i18n = new I18N();
+
+// @TODO remove in major version
+if (getConfig().lang) {
+    i18n.setLang(getConfig().lang as Lang);
+}
+
+// @TODO uncomment in major version
+// i18n.setLang(getConfig().lang || Lang.En);
+
+subscribeConfigure((config) => {
+    if (config.lang) {
+        i18n.setLang(config.lang);
+    }
+});