From 33afd8f492c7fce20b7e638cde958fcb8843d62e Mon Sep 17 00:00:00 2001 From: Leon Minasyan Date: Wed, 10 Aug 2022 20:23:02 +0300 Subject: [PATCH 1/4] feat!: migrate to i18n 0.6.0 --- .storybook/decorators/withLang.tsx | 5 +++-- .storybook/preview.js | 5 +++-- package-lock.json | 6 +++--- package.json | 4 ++-- src/i18n/index.ts | 13 ++++++++++--- src/utils/i18n.ts | 12 +++++++++++- 6 files changed, 32 insertions(+), 13 deletions(-) diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx index d09d69f..558667d 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 {i18n} from '../../src/utils'; export function withLang(Story: StoryType, context: StoryContext) { const lang = context.globals.lang; - I18N.setDefaultLang(lang); + i18n.setLang(lang); return ; } diff --git a/.storybook/preview.js b/.storybook/preview.js index 4d9f0dc..3976f0b 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 {i18n, LANGS} from '../src/utils/i18n'; -I18N.setDefaultLang(I18N.LANGS.en); +i18n.setLang(LANGS.En); const withContextProvider = (Story, context) => { const theme = context.globals.theme; 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..83ba203 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,11 +1,18 @@ -import {i18n, I18N} from '../utils'; +import {i18n, setLang} from '../utils'; import en from './en.json'; import ru from './ru.json'; +export enum LANGS { + Ru = 'ru', + En = 'en', +} + const COMPONENT = 'dashkit'; -i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en); -i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru); +i18n.registerKeyset(LANGS.En, COMPONENT, en); +i18n.registerKeyset(LANGS.Ru, COMPONENT, ru); + +setLang(LANGS.En); export default i18n.keyset(COMPONENT); diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index f97180b..986ba98 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -1,5 +1,15 @@ import {I18N} from '@yandex-cloud/i18n'; +import type {LANGS} from '../i18n'; +export {LANGS} 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: LANGS) => { + i18n.setLang(lang); +}; From e6ddb90a7d6a04c81c03ba8e74b5ea993b5bbeb0 Mon Sep 17 00:00:00 2001 From: Leon Minasyan Date: Thu, 11 Aug 2022 13:19:23 +0400 Subject: [PATCH 2/4] fix: LANGS -> string union --- .storybook/decorators/withLang.tsx | 4 ++-- .storybook/preview.js | 4 ++-- src/i18n/index.ts | 11 ++++------- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx index 558667d..71dde14 100644 --- a/.storybook/decorators/withLang.tsx +++ b/.storybook/decorators/withLang.tsx @@ -1,12 +1,12 @@ import React from 'react'; import {Story as StoryType, StoryContext} from '@storybook/react'; -import {i18n} from '../../src/utils'; +import {setLang} from '../../src/utils'; export function withLang(Story: StoryType, context: StoryContext) { const lang = context.globals.lang; - i18n.setLang(lang); + setLang(lang); return ; } diff --git a/.storybook/preview.js b/.storybook/preview.js index 3976f0b..cc2c6b8 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -8,9 +8,9 @@ import {CloudTheme} from './theme'; import {withTheme} from './decorators/withTheme'; import {withMobile} from './decorators/withMobile'; import {withLang} from './decorators/withLang'; -import {i18n, LANGS} from '../src/utils/i18n'; +import {setLang} from '../src/utils/i18n'; -i18n.setLang(LANGS.En); +setLang('en'); const withContextProvider = (Story, context) => { const theme = context.globals.theme; diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 83ba203..8d7d20a 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -3,16 +3,13 @@ import {i18n, setLang} from '../utils'; import en from './en.json'; import ru from './ru.json'; -export enum LANGS { - Ru = 'ru', - En = 'en', -} +export type LANGS = 'ru' | 'en'; const COMPONENT = 'dashkit'; -i18n.registerKeyset(LANGS.En, COMPONENT, en); -i18n.registerKeyset(LANGS.Ru, COMPONENT, ru); +i18n.registerKeyset('en', COMPONENT, en); +i18n.registerKeyset('ru', COMPONENT, ru); -setLang(LANGS.En); +setLang('en'); export default i18n.keyset(COMPONENT); From d7d57fe04a1f76b699c7547050961066544f4550 Mon Sep 17 00:00:00 2001 From: Leon Minasyan Date: Thu, 11 Aug 2022 13:45:30 +0400 Subject: [PATCH 3/4] refactor: rename LANGS -> Lang --- src/i18n/index.ts | 2 +- src/utils/i18n.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 8d7d20a..33dfe1e 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -3,7 +3,7 @@ import {i18n, setLang} from '../utils'; import en from './en.json'; import ru from './ru.json'; -export type LANGS = 'ru' | 'en'; +export type Lang = 'ru' | 'en'; const COMPONENT = 'dashkit'; diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index 986ba98..b39bd1e 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -1,7 +1,7 @@ import {I18N} from '@yandex-cloud/i18n'; -import type {LANGS} from '../i18n'; -export {LANGS} from '../i18n'; +import type {Lang} from '../i18n'; +export {Lang} from '../i18n'; export const i18n = new I18N(); @@ -10,6 +10,6 @@ export const i18n = new I18N(); * @param lang * @return {void} */ -export const setLang = (lang: LANGS) => { +export const setLang = (lang: Lang) => { i18n.setLang(lang); }; From 869fb5b8dd9e187c6c4723b8b49729a4abb7eaca Mon Sep 17 00:00:00 2001 From: Leon Minasyan Date: Thu, 11 Aug 2022 13:45:50 +0400 Subject: [PATCH 4/4] docs: readme i18n usage --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) 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)