feat: add i18n

Author: d3m1d0v

.storybook/preview.js

@@ -1,4 +1,4 @@
-import {withTheme, withThemeProvider, backgrounds} from '../demo/utils/preview';
+import {withTheme, withThemeProvider, withLang, backgrounds} from '../demo/utils/preview';
 
 export const parameters = {
     actions: {argTypesRegex: '^on[A-Z].*'},
@@ -22,4 +22,18 @@ export const parameters = {
     },
 };
 
-export const decorators = [withTheme, withThemeProvider];
+export const globalTypes = {
+    lang: {
+        name: 'Language',
+        defaultValue: 'en',
+        toolbar: {
+            icon: 'globe',
+            items: [
+                {value: 'ru', right: '🇷🇺', title: 'Ru'},
+                {value: 'en', right: '🇺🇸', title: 'En'},
+            ],
+        },
+    },
+};
+
+export const decorators = [withTheme, withThemeProvider, withLang];

demo/utils/preview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Story, StoryContext} from '@storybook/react/types-6-0';
-import {useTheme, ThemeProvider, Theme} from '@gravity-ui/uikit';
+import {configure as configureUikit, useTheme, ThemeProvider, Theme} from '@gravity-ui/uikit';
+import {configure as configureYfmEditor} from '../../src';
 
 import '@gravity-ui/uikit/styles/styles.scss';
 
@@ -35,3 +36,11 @@ export function withThemeProvider(StoryItem: Story, context: StoryContext) {
         </ThemeProvider>
     );
 }
+
+export function withLang(StoryItem: Story, context: StoryContext) {
+    const lang = context.globals.lang;
+    configureUikit({lang});
+    configureYfmEditor({lang});
+
+    return <StoryItem {...context} />;
+}

package-lock.json

@@ -39,6 +39,7 @@
   "license": "MIT",
   "dependencies": {
     "@bem-react/classname": "^1.5.12",
+    "@gravity-ui/i18n": "1.0.0",
     "@types/is-number": "^7.0.1",
     "@types/markdown-it": "^12.2.3",
     "is-number": "^7.0.0",

package.json

@@ -0,0 +1,31 @@
+export enum Lang {
+    Ru = 'ru',
+    En = 'en',
+}
+
+interface Config {
+    lang?: `${Lang}`;
+}
+
+type Subscriber = (config: Readonly<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 = (): Readonly<Config> => config;

src/configure.ts

@@ -0,0 +1,26 @@
+import {I18N, I18NFn} from '@gravity-ui/i18n';
+import {getConfig, Lang, subscribeConfigure} from '../configure';
+
+type KeysData = Record<string, string | string[]>; // @gravity-ui/i18n inner type
+
+const i18n = new I18N();
+
+// en – default lang for editor
+i18n.setLang(getConfig().lang || Lang.En);
+
+subscribeConfigure((config) => {
+    if (config.lang) {
+        i18n.setLang(config.lang);
+    }
+});
+
+export {i18n};
+export function registerKeyset<K extends string, D extends KeysData>(
+    keyset: K,
+    data: Record<'en' | 'ru', D>,
+) {
+    i18n.registerKeyset(Lang.En, keyset, data.en);
+    i18n.registerKeyset(Lang.Ru, keyset, data.ru);
+
+    return (i18n as unknown as I18NFn<Record<K, D>>).keyset(keyset);
+}

src/i18n/i18n.ts

@@ -8,6 +8,8 @@ export * from './logger';
 export * from './extensions';
 export * from './extensions/specs';
 
+export {Lang, configure} from './configure';
+
 export {isMac} from './utils/platform';
 export {markInputRule, nodeInputRule, inlineNodeInputRule} from './utils/inputrules';
 export {findMark, isMarkActive} from './utils/marks';