From 476f6dbdabb6a8763256c332750b162cdfe1df83 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 20 Jul 2021 09:38:00 +0300
Subject: [PATCH 1/5] Add setLocale method for changing ui library locale

---
 package.json                                  |  2 +-
 .../DesignSystem/DesignSystemInject.ts        |  4 +-
 .../SDesignSystemProvider.vue                 |  8 +--
 src/components/DesignSystem/consts.ts         |  2 +-
 src/index.ts                                  | 14 +++--
 src/lang/en/index.ts                          |  7 ---
 src/locale/en/index.ts                        |  7 +++
 src/{lang => locale}/index.ts                 |  8 ++-
 src/locale/ja/index.ts                        |  7 +++
 src/plugins/elementUI.ts                      |  2 +-
 src/store/Locale.ts                           | 56 +++++++++++++++++++
 src/store/Theme.ts                            | 25 +++++----
 src/store/index.ts                            |  7 ++-
 src/stories/Collapse/SCollapse.stories.ts     |  4 +-
 src/stories/SButton.stories.ts                |  6 +-
 src/stories/SCard.stories.ts                  |  4 +-
 src/stories/SDialog.stories.ts                |  4 +-
 src/stories/SFloatInput.stories.ts            |  4 +-
 src/stories/SInput.stories.ts                 |  4 +-
 src/stories/SRadio.stories.ts                 |  4 +-
 src/stories/SSwitch.stories.ts                |  4 +-
 src/stories/STooltip.stories.ts               |  6 +-
 src/stories/Tab/STabs.stories.ts              |  4 +-
 src/utils/DesignSystem.ts                     |  2 +-
 src/utils/Locale.ts                           |  4 ++
 src/utils/Theme.ts                            |  4 +-
 src/utils/index.ts                            |  8 ++-
 27 files changed, 150 insertions(+), 61 deletions(-)
 delete mode 100644 src/lang/en/index.ts
 create mode 100644 src/locale/en/index.ts
 rename src/{lang => locale}/index.ts (65%)
 create mode 100644 src/locale/ja/index.ts
 create mode 100644 src/store/Locale.ts
 create mode 100644 src/utils/Locale.ts

diff --git a/package.json b/package.json
index 906436d4..04587f2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.17",
+  "version": "0.9.19",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts
index 9b276cee..6adbb16f 100644
--- a/src/components/DesignSystem/DesignSystemInject.ts
+++ b/src/components/DesignSystem/DesignSystemInject.ts
@@ -1,11 +1,11 @@
 import { Component, Vue, Inject, Prop } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from './consts'
-import { DesignSystemTypes } from '../../utils/DesignSystem'
+import { DesignSystem } from '../../utils/DesignSystem'
 
 @Component
 export default class DesignSystemInject extends Vue {
   @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean
-  @Inject({ from: DesignSystemProvideKey, default: DesignSystemTypes.DEFAULT }) readonly designSystem!: any
+  @Inject({ from: DesignSystemProvideKey, default: DesignSystem.DEFAULT }) readonly designSystem!: any
 
   get designSystemClass (): string {
     return this.useDesignSystem ? this.designSystem.value : ''
diff --git a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
index 67829fff..8c353bea 100644
--- a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
+++ b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
@@ -7,17 +7,17 @@
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from '../consts'
-import { DesignSystemTypes } from '../../../utils/DesignSystem'
+import { DesignSystem } from '../../../utils/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
-  @Prop({ default: DesignSystemTypes.DEFAULT, type: String }) readonly value!: string
+  @Prop({ default: DesignSystem.DEFAULT, type: String }) readonly value!: string
   @Provide(DesignSystemProvideKey) providedObject = {
-    value: DesignSystemTypes.DEFAULT
+    value: DesignSystem.DEFAULT
   }
 
   @Watch('value', { immediate: true })
-  onValueChange (newValue: DesignSystemTypes) {
+  onValueChange (newValue: DesignSystem) {
     this.providedObject.value = newValue
   }
 }
diff --git a/src/components/DesignSystem/consts.ts b/src/components/DesignSystem/consts.ts
index 8b8a958c..5f3fa1f6 100644
--- a/src/components/DesignSystem/consts.ts
+++ b/src/components/DesignSystem/consts.ts
@@ -1,6 +1,6 @@
 export const DesignSystemProvideKey = 'designSystem'
 
-export enum DesignSystemTypes {
+export enum DesignSystem {
   DEFAULT = '',
   NEUMORPHIC = 'neumorphic'
 }
diff --git a/src/index.ts b/src/index.ts
index f200c658..fd402781 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,9 +52,10 @@ import {
 import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
-import { setTheme, setDesignSystem } from './utils'
-import { DesignSystemTypes } from './utils/DesignSystem'
-import { Themes } from './utils/Theme'
+import { setTheme, setDesignSystem, setLocale } from './utils'
+import { DesignSystem } from './utils/DesignSystem'
+import { Theme } from './utils/Theme'
+import { Locale } from './utils/Locale'
 import { SoramitsuUIStorePlugin, ElementUIPlugin } from './plugins'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 import { SDialogMixin } from './mixins'
@@ -121,11 +122,16 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(SoramitsuElements, {})
 }
 
+const Themes = Theme
+
 export {
   setTheme,
+  Theme,
   Themes,
   setDesignSystem,
-  DesignSystemTypes,
+  DesignSystem,
+  setLocale,
+  Locale,
   Components,
   Directives,
   Loading,
diff --git a/src/lang/en/index.ts b/src/lang/en/index.ts
deleted file mode 100644
index 2ebc2e95..00000000
--- a/src/lang/en/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import elementEnLocale from 'element-ui/lib/locale/lang/en'
-
-elementEnLocale.el.pagination.pagesize = ''
-
-export default {
-  ...elementEnLocale
-}
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
new file mode 100644
index 00000000..fe26876a
--- /dev/null
+++ b/src/locale/en/index.ts
@@ -0,0 +1,7 @@
+import locale from 'element-ui/lib/locale/lang/en'
+
+locale.el.pagination.pagesize = ''
+
+export default {
+  ...locale
+}
diff --git a/src/lang/index.ts b/src/locale/index.ts
similarity index 65%
rename from src/lang/index.ts
rename to src/locale/index.ts
index 4fa27059..1f96660d 100644
--- a/src/lang/index.ts
+++ b/src/locale/index.ts
@@ -1,16 +1,20 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
+import { Locale } from '../utils/Locale'
+
 import en from './en'
+import ja from './ja'
 
 Vue.use(VueI18n)
 
 const messages = {
-  en
+  en,
+  ja
 }
 
 const i18n = new VueI18n({
-  locale: 'en',
+  locale: Locale.EN,
   messages
 })
 
diff --git a/src/locale/ja/index.ts b/src/locale/ja/index.ts
new file mode 100644
index 00000000..9671ae7e
--- /dev/null
+++ b/src/locale/ja/index.ts
@@ -0,0 +1,7 @@
+import locale from 'element-ui/lib/locale/lang/ja'
+
+locale.el.pagination.pagesize = ''
+
+export default {
+  ...locale
+}
diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
index 70200626..80b701ee 100644
--- a/src/plugins/elementUI.ts
+++ b/src/plugins/elementUI.ts
@@ -6,7 +6,7 @@ import MessageBox from 'element-ui/lib/message-box'
 import Notification from 'element-ui/lib/notification'
 
 import ElementLocale from 'element-ui/lib/locale'
-import i18n from '../lang'
+import i18n from '../locale'
 
 const ElementUIPlugin = {
   install: (vue: typeof Vue) => {
diff --git a/src/store/Locale.ts b/src/store/Locale.ts
new file mode 100644
index 00000000..71f5b28c
--- /dev/null
+++ b/src/store/Locale.ts
@@ -0,0 +1,56 @@
+import map from 'lodash/fp/map'
+import flatMap from 'lodash/fp/flatMap'
+import fromPairs from 'lodash/fp/fromPairs'
+import flow from 'lodash/fp/flow'
+import concat from 'lodash/fp/concat'
+
+import { Locale } from '../utils/Locale'
+import i18n from '@/locale'
+
+const types = flow(
+  flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
+  concat([
+    'SET_LOCALE'
+  ]),
+  map(x => [x, x]),
+  fromPairs
+)([])
+
+type State = {
+  locale: Locale;
+}
+
+function initialState (): State {
+  return {
+    locale: Locale.EN
+  }
+}
+
+const state = initialState()
+
+const getters = {
+  libraryLocale (state: State) {
+    return state.locale
+  }
+}
+
+const mutations = {
+  [types.SET_LOCALE] (state: State, locale: Locale) {
+    state.locale = locale
+    i18n.locale = locale
+  }
+}
+
+const actions = {
+  setLocale ({ commit }, locale: Locale) {
+    commit(types.SET_LOCALE, locale)
+  }
+}
+
+export default {
+  types,
+  state,
+  getters,
+  mutations,
+  actions
+}
diff --git a/src/store/Theme.ts b/src/store/Theme.ts
index b30acf28..0347bbf3 100644
--- a/src/store/Theme.ts
+++ b/src/store/Theme.ts
@@ -4,8 +4,8 @@ import fromPairs from 'lodash/fp/fromPairs'
 import flow from 'lodash/fp/flow'
 import concat from 'lodash/fp/concat'
 
-import { Theme, Themes } from '../utils/Theme'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { Theme } from '../utils/Theme'
+import { DesignSystem } from '../utils/DesignSystem'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
@@ -17,29 +17,34 @@ const types = flow(
   fromPairs
 )([])
 
-function initialState () {
+type State = {
+  theme: Theme;
+  designSystem: DesignSystem;
+}
+
+function initialState (): State {
   return {
-    theme: Themes.LIGHT,
-    designSystem: DesignSystemTypes.DEFAULT
+    theme: Theme.LIGHT,
+    designSystem: DesignSystem.DEFAULT
   }
 }
 
 const state = initialState()
 
 const getters = {
-  libraryTheme (state) {
+  libraryTheme (state: State) {
     return state.theme
   },
-  libraryDesignSystem (state) {
+  libraryDesignSystem (state: State) {
     return state.designSystem
   }
 }
 
 const mutations = {
-  [types.CHANGE_THEME] (state, theme: Theme) {
+  [types.CHANGE_THEME] (state: State, theme: Theme) {
     state.theme = theme
   },
-  [types.SET_DESIGN_SYSTEM] (state, designSystem: DesignSystemTypes) {
+  [types.SET_DESIGN_SYSTEM] (state: State, designSystem: DesignSystem) {
     state.designSystem = designSystem
   }
 }
@@ -48,7 +53,7 @@ const actions = {
   changeTheme ({ commit }, { theme }) {
     commit(types.CHANGE_THEME, theme)
   },
-  setDesignSystem ({ commit }, designSystem: DesignSystemTypes) {
+  setDesignSystem ({ commit }, designSystem: DesignSystem) {
     commit(types.SET_DESIGN_SYSTEM, designSystem)
   }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index c8d35ae7..bb3f4ade 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,9 +2,11 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import Theme from './Theme'
+import Locale from './Locale'
 
 const modules = {
-  Theme
+  Theme,
+  Locale
 }
 
 Vue.use(Vuex)
@@ -19,7 +21,8 @@ export {
 }
 
 export enum Modules {
-  Theme = 'Theme'
+  Theme = 'Theme',
+  Locale = 'Locale'
 }
 
 export default store
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index 1fd5a2d2..806b4fe8 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -2,7 +2,7 @@ import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SCollapse, SCollapseItem, SDesignSystemProvider } from '../../components'
 import { BorderTypes } from '../../components/Collapse'
-import { DesignSystemTypes } from '../../utils/DesignSystem'
+import { DesignSystem } from '../../utils/DesignSystem'
 
 export default {
   component: SCollapse,
@@ -35,7 +35,7 @@ export const configurable = () => ({
              </s-design-system-provider>`,
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     accordion: {
       default: boolean('Accordion', false)
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index ef8afe0f..bd7bc987 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -3,7 +3,7 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon, SDesignSystemProvider } from '../components'
 import { Size, BorderRadius } from '../types'
 import { ButtonTypes, ButtonIconPosition } from '../components/Button'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SButton,
@@ -34,7 +34,7 @@ export const configurable = () => ({
             </s-design-system-provider>`,
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     disabled: {
       default: boolean('Disabled', false)
@@ -104,7 +104,7 @@ export const withDifferentTypes = () => ({
             </s-design-system-provider>`,
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     items: {
       default: () => differentTypeButtonsData
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 0fe28fcc..67afbb4f 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -3,7 +3,7 @@ import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 import { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider } from '../components'
 import { BorderRadius, Status, Size } from '../types'
 import { CardShadow } from '../components/Card'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SCard,
@@ -38,7 +38,7 @@ export const configurable = () => ({
             </s-design-system-provider>`,
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     shadow: {
       default: select('Shadow', Object.values(CardShadow), CardShadow.HOVER)
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index e7ec3795..1762e3d9 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -2,7 +2,7 @@ import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SDialog, SRow, SButton, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SDialog,
@@ -48,7 +48,7 @@ export const configurable = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     modal: {
       default: boolean('Modal', true)
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index b8c9e3c9..0de80d32 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,7 +1,7 @@
 import { number, text, boolean, object, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SFloatInput, SRow, SDesignSystemProvider } from '../components'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SFloatInput,
@@ -33,7 +33,7 @@ export const configurable = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     decimals: {
       default: number('Decimals', 18)
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 8095e389..9bafddbe 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -3,7 +3,7 @@ import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs
 import { SInput, SRow, SCol, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
 import { InputType, InputSize } from '../components/Input'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SInput,
@@ -41,7 +41,7 @@ export const configurable = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     top: {
       default: text('Top slot content', '')
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 77b315b9..3e10ba4d 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -2,7 +2,7 @@ import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SRadio, SRadioGroup, SRow, SCol, SDesignSystemProvider } from '../components'
 import { Size } from '../types'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SRadio,
@@ -45,7 +45,7 @@ export const configurable = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     size: {
       default: select('Size', Object.values(Size), Size.MEDIUM)
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
index c601ead4..e4d5836d 100644
--- a/src/stories/SSwitch.stories.ts
+++ b/src/stories/SSwitch.stories.ts
@@ -1,7 +1,7 @@
 import { text, number, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SSwitch, SDesignSystemProvider } from '../components'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: SSwitch,
@@ -36,7 +36,7 @@ export const configurable = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     activeText: {
       default: text('Active Text', '')
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 1b4f0e8f..24fac1f5 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -3,7 +3,7 @@ import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs
 import { SButton, STooltip, SRow, SMain, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
-import { DesignSystemTypes } from '../utils/DesignSystem'
+import { DesignSystem } from '../utils/DesignSystem'
 
 export default {
   component: STooltip,
@@ -39,7 +39,7 @@ export const configurable = () => ({
       default: select('Theme', Object.values(TooltipTheme), TooltipTheme.AUTO)
     },
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     content: {
       default: text('Content', 'Custom tooltip')
@@ -98,7 +98,7 @@ export const withDifferentPlacement = () => ({
       default: () => differentPlacementData
     },
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     }
   }
 })
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index 64c727fd..07e72320 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -3,7 +3,7 @@ import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 import { STabs, STab, SDesignSystemProvider } from '../../components'
 import { BorderRadius } from '../../types'
 import { TabsPosition, TabsType } from '../../components/Tab'
-import { DesignSystemTypes } from '../../utils/DesignSystem'
+import { DesignSystem } from '../../utils/DesignSystem'
 
 export default {
   component: STabs,
@@ -34,7 +34,7 @@ export const defaultUsage = () => ({
   }),
   props: {
     designSystem: {
-      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
     },
     type: {
       default: select('Type', [...Object.values(TabsType), '––'], '––')
diff --git a/src/utils/DesignSystem.ts b/src/utils/DesignSystem.ts
index dd17844a..10b9bafa 100644
--- a/src/utils/DesignSystem.ts
+++ b/src/utils/DesignSystem.ts
@@ -1,4 +1,4 @@
-export enum DesignSystemTypes {
+export enum DesignSystem {
   DEFAULT = '',
   NEUMORPHIC = 'neumorphic'
 }
diff --git a/src/utils/Locale.ts b/src/utils/Locale.ts
new file mode 100644
index 00000000..0d120b94
--- /dev/null
+++ b/src/utils/Locale.ts
@@ -0,0 +1,4 @@
+export enum Locale {
+  EN = 'en',
+  JA = 'ja'
+}
diff --git a/src/utils/Theme.ts b/src/utils/Theme.ts
index eb46108b..ba9907fc 100644
--- a/src/utils/Theme.ts
+++ b/src/utils/Theme.ts
@@ -1,6 +1,4 @@
-export type Theme = 'dark' | 'light'
-
-export enum Themes {
+export enum Theme {
   DARK = 'dark',
   LIGHT = 'light'
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1eed4d27..c3420fbd 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,10 +1,16 @@
 import store from '../store'
 import { Theme } from './Theme'
+import { DesignSystem } from './DesignSystem'
+import { Locale } from './Locale'
 
 export const setTheme = (theme: Theme) => {
   store.dispatch('changeTheme', { theme })
 }
 
-export const setDesignSystem = (designSystem) => {
+export const setDesignSystem = (designSystem: DesignSystem) => {
   store.dispatch('setDesignSystem', designSystem)
 }
+
+export const setLocale = (locale: Locale) => {
+  store.dispatch('setLocale', locale)
+}

From fc48d92765e69e16745942ed8887955add457df2 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 20 Jul 2021 10:02:56 +0300
Subject: [PATCH 2/5] Change the names of store modules

---
 package.json                         |  2 +-
 src/store/{Locale.ts => UiLocale.ts} |  0
 src/store/{Theme.ts => UiTheme.ts}   |  0
 src/store/index.ts                   | 12 ++++++------
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/store/{Locale.ts => UiLocale.ts} (100%)
 rename src/store/{Theme.ts => UiTheme.ts} (100%)

diff --git a/package.json b/package.json
index 04587f2b..86bbbe0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.19",
+  "version": "0.10.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/store/Locale.ts b/src/store/UiLocale.ts
similarity index 100%
rename from src/store/Locale.ts
rename to src/store/UiLocale.ts
diff --git a/src/store/Theme.ts b/src/store/UiTheme.ts
similarity index 100%
rename from src/store/Theme.ts
rename to src/store/UiTheme.ts
diff --git a/src/store/index.ts b/src/store/index.ts
index bb3f4ade..7ab2a460 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import Theme from './Theme'
-import Locale from './Locale'
+import UiTheme from './UiTheme'
+import UiLocale from './UiLocale'
 
 const modules = {
-  Theme,
-  Locale
+  UiTheme,
+  UiLocale
 }
 
 Vue.use(Vuex)
@@ -21,8 +21,8 @@ export {
 }
 
 export enum Modules {
-  Theme = 'Theme',
-  Locale = 'Locale'
+  UiTheme = 'UiTheme',
+  UiLocale = 'UiLocale'
 }
 
 export default store

From 7f99ef4c23aada74d6e9686f011851bb4d19be2e Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 20 Jul 2021 10:04:04 +0300
Subject: [PATCH 3/5] Remove Themes form module export

---
 src/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index fd402781..f39b8b24 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -122,12 +122,9 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(SoramitsuElements, {})
 }
 
-const Themes = Theme
-
 export {
   setTheme,
   Theme,
-  Themes,
   setDesignSystem,
   DesignSystem,
   setLocale,

From 9fba67f30c21bc9433db8638614985e3c00ba27b Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 20 Jul 2021 10:11:36 +0300
Subject: [PATCH 4/5] Change store modules prefix

---
 src/store/{UiLocale.ts => LibraryLocale.ts} |  0
 src/store/{UiTheme.ts => LibraryTheme.ts}   |  0
 src/store/index.ts                          | 12 ++++++------
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename src/store/{UiLocale.ts => LibraryLocale.ts} (100%)
 rename src/store/{UiTheme.ts => LibraryTheme.ts} (100%)

diff --git a/src/store/UiLocale.ts b/src/store/LibraryLocale.ts
similarity index 100%
rename from src/store/UiLocale.ts
rename to src/store/LibraryLocale.ts
diff --git a/src/store/UiTheme.ts b/src/store/LibraryTheme.ts
similarity index 100%
rename from src/store/UiTheme.ts
rename to src/store/LibraryTheme.ts
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ab2a460..0f3c346b 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import UiTheme from './UiTheme'
-import UiLocale from './UiLocale'
+import LibraryTheme from './LibraryTheme'
+import LibraryLocale from './LibraryLocale'
 
 const modules = {
-  UiTheme,
-  UiLocale
+  LibraryTheme,
+  LibraryLocale
 }
 
 Vue.use(Vuex)
@@ -21,8 +21,8 @@ export {
 }
 
 export enum Modules {
-  UiTheme = 'UiTheme',
-  UiLocale = 'UiLocale'
+  LibraryTheme = 'LibraryTheme',
+  LibraryLocale = 'LibraryLocale'
 }
 
 export default store

From 4bb3eb347cb754c45db4539b9ccd7a99cc41c259 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 20 Jul 2021 10:25:06 +0300
Subject: [PATCH 5/5] Change version to 1.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 86bbbe0b..7443d5a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.10.0",
+  "version": "1.0.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"