diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx index d09d69f..71dde14 100644 --- a/.storybook/decorators/withLang.tsx +++ b/.storybook/decorators/withLang.tsx @@ -1,11 +1,12 @@ import React from 'react'; import {Story as StoryType, StoryContext} from '@storybook/react'; -import {I18N} from '@yandex-cloud/i18n'; + +import {setLang} from '../../src/utils'; export function withLang(Story: StoryType, context: StoryContext) { const lang = context.globals.lang; - I18N.setDefaultLang(lang); + setLang(lang); return ; } diff --git a/.storybook/preview.js b/.storybook/preview.js index 4d9f0dc..cc2c6b8 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,3 +1,4 @@ +// @ts-check import '@yandex-cloud/uikit/styles/styles.scss'; import {ThemeProvider, MobileProvider} from '@yandex-cloud/uikit'; @@ -7,9 +8,9 @@ import {CloudTheme} from './theme'; import {withTheme} from './decorators/withTheme'; import {withMobile} from './decorators/withMobile'; import {withLang} from './decorators/withLang'; -import {I18N} from '../src/utils/i18n'; +import {setLang} from '../src/utils/i18n'; -I18N.setDefaultLang(I18N.LANGS.en); +setLang('en'); const withContextProvider = (Story, context) => { const theme = context.globals.theme; diff --git a/README.md b/README.md index a926ae1..c851a99 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,16 @@ interface DashKitProps { Before using `DashKit` as a react component, it must be configured. +- setLang + + Used for setting the language of DashKit provided ui elements. Currently the languages supported are: ru, en. + + ```js + import {setLang} from '@yandex-cloud/dashkit'; + + setLang('en'); + ``` + - DashKit.setSettings Used for global DashKit settings (such as margins between widgets, default widget sizes and widget overlay menu) diff --git a/package-lock.json b/package-lock.json index dae7981..339b46c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4874,9 +4874,9 @@ } }, "@yandex-cloud/i18n": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@yandex-cloud/i18n/-/i18n-0.4.0.tgz", - "integrity": "sha512-AK5WEGsDedaHVZtT0rU8ueMnsMWJdzhIduHz/HkJMG0wnJOdH4H4Ux27v0Trwp2DsT5IyspS6PDiP5SHf3Tzpw==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@yandex-cloud/i18n/-/i18n-0.6.0.tgz", + "integrity": "sha512-pkv5onR/acLDf2yZuErj3pqpF+QRfrHEuQibypSzWwvlWPGxeguYyPmratDqAw2Ci2zf1ysXu3SxBkkcxYLiXQ==", "dev": true }, "@yandex-cloud/prettier-config": { diff --git a/package.json b/package.json index 704006f..8441ea3 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "peerDependencies": { "@yandex-cloud/uikit": "^2.0.0", - "@yandex-cloud/i18n": "^0.4.0", + "@yandex-cloud/i18n": "^0.6.0", "bem-cn-lite": "^4.0.0", "react": "^16.0.0 || ^17.0.0" }, @@ -56,7 +56,7 @@ "@types/lodash": "^4.14.170", "@types/react": "^17.0.47", "@yandex-cloud/eslint-config": "^1.0.1", - "@yandex-cloud/i18n": "^0.4.0", + "@yandex-cloud/i18n": "^0.6.0", "@yandex-cloud/prettier-config": "^1.0.0", "@yandex-cloud/stylelint-config": "^1.1.1", "@yandex-cloud/tsconfig": "^1.0.0", diff --git a/src/i18n/index.ts b/src/i18n/index.ts index c09a9b0..33dfe1e 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,11 +1,15 @@ -import {i18n, I18N} from '../utils'; +import {i18n, setLang} from '../utils'; import en from './en.json'; import ru from './ru.json'; +export type Lang = 'ru' | 'en'; + const COMPONENT = 'dashkit'; -i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en); -i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru); +i18n.registerKeyset('en', COMPONENT, en); +i18n.registerKeyset('ru', COMPONENT, ru); + +setLang('en'); export default i18n.keyset(COMPONENT); diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index f97180b..b39bd1e 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -1,5 +1,15 @@ import {I18N} from '@yandex-cloud/i18n'; +import type {Lang} from '../i18n'; +export {Lang} from '../i18n'; + export const i18n = new I18N(); -export {I18N} from '@yandex-cloud/i18n'; +/** + * Preferred method to set language. + * @param lang + * @return {void} + */ +export const setLang = (lang: Lang) => { + i18n.setLang(lang); +};