feat: add i18n

Author: amje

.storybook/decorators/withLang.tsx

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

.storybook/preview.js

@@ -1,8 +1,12 @@
 import '@yandex-cloud/uikit/styles/styles.scss';
 
 import React from 'react';
+import {I18N} from '@yandex-cloud/i18n';
 import {ThemeProvider} from '@yandex-cloud/uikit';
 import {withTheme} from './decorators/withTheme';
+import {withLang} from './decorators/withLang';
+
+I18N.setDefaultLang(I18N.LANGS.ru);
 
 const withContextProvider = (Story, context) => {
     const theme = context.globals.theme;
@@ -21,7 +25,7 @@ const withContextProvider = (Story, context) => {
     );
 };
 
-export const decorators = [withTheme, withContextProvider];
+export const decorators = [withTheme, withLang, withContextProvider];
 
 export const parameters = {
     jsx: {showFunctions: true},
@@ -46,4 +50,16 @@ export const globalTypes = {
             ],
         },
     },
+    lang: {
+        name: 'Language',
+        description: 'Global language for components',
+        defaultValue: 'ru',
+        toolbar: {
+            icon: 'globe',
+            items: [
+                {value: 'ru', right: '🇷🇺', title: 'Русский'},
+                {value: 'en', right: '🇬🇧', title: 'English'},
+            ],
+        },
+    },
 };

package-lock.json

@@ -5,15 +5,21 @@
   "license": "MIT",
   "main": "build/index.js",
   "types": "build/index.d.ts",
-  "sideEffects": ["*.css", "*.scss"],
-  "files": ["build"],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "build"
+  ],
   "scripts": {
     "clean": "gulp clean",
     "build": "gulp",
     "test": "echo \"Error: no test specified\" && exit 0",
     "start": "start-storybook -p 7002"
   },
   "dependencies": {
+    "@yandex-cloud/i18n": "^0.2.2",
     "bem-cn-lite": "^4.1.0"
   },
   "devDependencies": {

package.json

@@ -1,12 +1,13 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 
+import i18n from '../i18n';
 import {TreeView} from '../../TreeView/TreeView';
 
 import './EmptyView.scss';
 
 const b = block('ydb-navigation-tree-view-empty');
 
 export function EmptyView() {
-    return <TreeView name={<span className={b()}>Нет данных</span>} />;
+    return <TreeView name={<span className={b()}>{i18n('label_empty')}</span>} />;
 }

src/components/NavigationTree/EmptyView/EmptyView.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 
+import i18n from '../i18n';
 import {TreeView} from '../../TreeView/TreeView';
 
 import './ErrorView.scss';
 
 const b = block('ydb-navigation-tree-view-error');
 
 export function ErrorView() {
-    return <TreeView name={<span className={b()}>Ошибка</span>} />;
+    return <TreeView name={<span className={b()}>{i18n('label_error')}</span>} />;
 }

src/components/NavigationTree/ErrorView/ErrorView.tsx

@@ -0,0 +1,4 @@
+{
+  "label_error": "Error",
+  "label_empty": "No data"
+}

src/components/NavigationTree/i18n/en.json

@@ -0,0 +1,10 @@
+import {i18n, I18N} from '../../i18n';
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-navigation-tree';
+
+i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
+i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

src/components/NavigationTree/i18n/index.ts

@@ -0,0 +1,4 @@
+{
+  "label_error": "Ошибка",
+  "label_empty": "Нет данных"
+}

src/components/NavigationTree/i18n/ru.json

@@ -0,0 +1,4 @@
+import {I18N} from '@yandex-cloud/i18n';
+
+export const i18n = new I18N();
+export {I18N} from '@yandex-cloud/i18n';