Release 1.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.18",
+  "version": "1.0.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

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 : ''

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
   }
 }

src/components/DesignSystem/consts.ts

@@ -1,6 +1,6 @@
 export const DesignSystemProvideKey = 'designSystem'
 
-export enum DesignSystemTypes {
+export enum DesignSystem {
   DEFAULT = '',
   NEUMORPHIC = 'neumorphic'
 }

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'
@@ -123,9 +124,11 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export {
   setTheme,
-  Themes,
+  Theme,
   setDesignSystem,
-  DesignSystemTypes,
+  DesignSystem,
+  setLocale,
+  Locale,
   Components,
   Directives,
   Loading,

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
+}

src/lang/index.ts → 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
 })
 

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
+}

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) => {

src/store/LibraryLocale.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
+}

src/store/Theme.ts → src/store/LibraryTheme.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)
   }
 }

src/store/index.ts

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import Theme from './Theme'
+import LibraryTheme from './LibraryTheme'
+import LibraryLocale from './LibraryLocale'
 
 const modules = {
-  Theme
+  LibraryTheme,
+  LibraryLocale
 }
 
 Vue.use(Vuex)
@@ -19,7 +21,8 @@ export {
 }
 
 export enum Modules {
-  Theme = 'Theme'
+  LibraryTheme = 'LibraryTheme',
+  LibraryLocale = 'LibraryLocale'
 }
 
 export default store

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)

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

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)

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)

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)

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', '')