Release 1.0.3

build/rollup.config.js

@@ -7,6 +7,7 @@ import commonjs from 'rollup-plugin-commonjs'
 import copy from 'rollup-plugin-copy'
 import { terser } from 'rollup-plugin-terser'
 import del from 'rollup-plugin-delete'
+import multiInput from 'rollup-plugin-multi-input'
 
 const external = [
   ...Object.keys(pkg.dependencies || {}),
@@ -15,20 +16,23 @@ const external = [
 ]
 
 export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      name: 'SoramitsuJsUi',
-      file: 'lib/soramitsu-js-ui.esm.js',
-      format: 'esm',
-      sourcemap: true
-    }, {
-      name: 'SoramitsuJsUiUmd',
-      format: 'umd',
-      file: 'lib/soramitsu-js-ui.umd.js',
-      sourcemap: true
-    }
+  input: [
+    'src/index.ts',
+    'src/types/DesignSystem.ts',
+    'src/types/Locale.ts',
+    'src/types/Theme.ts',
+    'src/locale/index.ts',
+    'src/plugins/*.ts',
+    'src/store/index.ts',
+    'src/utils/*.ts',
+    'src/directives/index.ts',
+    'src/components/*/**/index.ts'
   ],
+  output: {
+    format: 'esm',
+    dir: 'lib'
+    // sourcemap: true We don't need it because of d.ts files
+  },
   external (id) {
     return external.includes(id.split('/')[0]) ||
       /element-ui\/lib\//.test(id)
@@ -52,6 +56,9 @@ export default {
         { src: 'src/styles/neumorphism/*', dest: 'lib/styles/neumorphism' }
       ]
     }),
+    multiInput({
+      relative: 'src/'
+    }),
     typescript({
       typescript: require('typescript'),
       objectHashIgnoreUnknownHack: true,
@@ -69,7 +76,19 @@ export default {
     resolve(),
     terser(),
     del({
-      targets: ['lib/styles/index.d.ts', 'lib/soramitsu-js-ui.esm.css'],
+      targets: [
+        'lib/styles/index.d.ts',
+        'bundle.css'
+        // TODO: find a way how to remove this dependencies
+        // 'lib/BorderRadiusMixin-**.js',
+        // 'lib/SizeMixin-**.js',
+        // 'lib/DesignSystem-**.js',
+        // 'lib/DesignSystemInject-**.js',
+        // 'lib/normalize-component-**.js',
+        // 'lib/components-**.js',
+        // 'lib/consts-**.js',
+        // 'lib/index-**.js'
+      ],
       hook: 'writeBundle'
     })
   ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -13,9 +13,9 @@
     }
   ],
   "author": "Stefan Popov <popov@soramitsu.co.jp>",
-  "main": "./lib/soramitsu-js-ui.umd.js",
-  "module": "./lib/soramitsu-js-ui.esm.js",
-  "unpkg": "./lib/soramitsu-js-ui.min.js",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "unpkg": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "scripts": {
     "build": "rm -rf lib && rollup -c ./build/rollup.config.js",
@@ -75,6 +75,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^1.1.0",
+    "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-scss": "^2.5.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.25.2",
@@ -94,7 +95,6 @@
   },
   "files": [
     "lib/*",
-    "src/*",
     "*.json",
     "*.js"
   ],

src/components/Card/SCard/SCard.vue

@@ -20,7 +20,6 @@ import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
 import SizeMixin from '../../../mixins/SizeMixin'
 import StatusMixin from '../../../mixins/StatusMixin'
 import { CardShadow } from '../consts'
-import { BorderRadius } from '../../../types'
 
 @Component({
   components: { ElCard }
@@ -48,8 +47,6 @@ export default class SCard extends Mixins(BorderRadiusMixin, SizeMixin, StatusMi
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
-
-  @Prop({ default: BorderRadius.MEDIUM }) borderRadius!: string
   /**
    * Does card should looks like it's under surface (inner shadow)
    */

src/components/DesignSystem/DesignSystemInject.ts

@@ -1,6 +1,6 @@
 import { Component, Vue, Inject, Prop } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from './consts'
-import { DesignSystem } from '../../utils/DesignSystem'
+import DesignSystem from '../../types/DesignSystem'
 
 @Component
 export default class DesignSystemInject extends Vue {

src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from '../consts'
-import { DesignSystem } from '../../../utils/DesignSystem'
+import DesignSystem from '../../../types/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {

src/components/DesignSystem/consts.ts

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

src/components/Switch/SSwitch.vue

@@ -19,6 +19,7 @@
 <script lang="ts">
 import { Mixins, Component, Prop, Watch } from 'vue-property-decorator'
 import ElSwitch from 'element-ui/lib/switch'
+
 import DesignSystemInject from '../DesignSystem/DesignSystemInject'
 
 @Component({

src/components/Tooltip/STooltip.vue

@@ -30,7 +30,7 @@ import ElTooltip from 'element-ui/lib/tooltip'
 
 import DesignSystemInject from '../DesignSystem/DesignSystemInject'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { Theme } from '../../utils/Theme'
+import Theme from '../../types/Theme'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component({

src/directives/number.ts

@@ -1,6 +1,6 @@
 import { DirectiveOptions } from 'vue'
 
-import { KeyValues } from '../utils/KeyValues'
+import KeyValues from '../utils/KeyValues'
 
 const onDigitKeyPress = (e: any) => {
   if (!KeyValues.isDigit(e.key)) {

src/index.ts

@@ -54,9 +54,9 @@ import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
 import { setTheme, setDesignSystem, setLocale } from './utils'
-import { DesignSystem } from './utils/DesignSystem'
-import { Theme } from './utils/Theme'
-import { Locale } from './utils/Locale'
+import DesignSystem from './types/DesignSystem'
+import Theme from './types/Theme'
+import Locale from './types/Locale'
 import { SoramitsuUIStorePlugin, ElementUIPlugin } from './plugins'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 import { SDialogMixin } from './mixins'

src/locale/index.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
-import { Locale } from '../utils/Locale'
+import Locale from '../types/Locale'
 
 import en from './en'
 import ja from './ja'

src/store/LibraryLocale.ts

@@ -4,7 +4,7 @@ import fromPairs from 'lodash/fp/fromPairs'
 import flow from 'lodash/fp/flow'
 import concat from 'lodash/fp/concat'
 
-import { Locale } from '../utils/Locale'
+import Locale from '../types/Locale'
 import i18n from '../locale'
 
 const types = flow(

src/store/LibraryTheme.ts

@@ -4,13 +4,13 @@ import fromPairs from 'lodash/fp/fromPairs'
 import flow from 'lodash/fp/flow'
 import concat from 'lodash/fp/concat'
 
-import { Theme } from '../utils/Theme'
-import { DesignSystem } from '../utils/DesignSystem'
+import Theme from '../types/Theme'
+import DesignSystem from '../types/DesignSystem'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
   concat([
-    'CHANGE_THEME',
+    'SET_THEME',
     'SET_DESIGN_SYSTEM'
   ]),
   map(x => [x, x]),
@@ -41,7 +41,7 @@ const getters = {
 }
 
 const mutations = {
-  [types.CHANGE_THEME] (state: State, theme: Theme) {
+  [types.SET_THEME] (state: State, theme: Theme) {
     state.theme = theme
   },
   [types.SET_DESIGN_SYSTEM] (state: State, designSystem: DesignSystem) {
@@ -50,8 +50,8 @@ const mutations = {
 }
 
 const actions = {
-  changeTheme ({ commit }, { theme }) {
-    commit(types.CHANGE_THEME, theme)
+  setTheme ({ commit }, theme: Theme) {
+    commit(types.SET_THEME, theme)
   },
   setDesignSystem ({ commit }, designSystem: DesignSystem) {
     commit(types.SET_DESIGN_SYSTEM, designSystem)

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 { DesignSystem } from '../../utils/DesignSystem'
+import DesignSystem from '../../types/DesignSystem'
 
 export default {
   component: SCollapse,

src/stories/Intro/Intro.stories.mdx

@@ -34,25 +34,70 @@ For instance, `soramitsuUI.ts`:
 
 ```
 import Vue from 'vue'
-import SoramitsuElements, { Message, MessageBox, Notification } from '@soramitsu/soramitsu-js-ui'
-import '@soramitsu/soramitsu-js-ui/lib/styles'
 
-Vue.use(SoramitsuElements)
+import SoramitsuElements, {
+  Message,
+  MessageBox,
+  Notification,
+  setTheme,
+  setDesignSystem,
+  Theme,
+  DesignSystem
+} from '@soramitsu/soramitsu-js-ui'
+
+import store from '@/store'
+
+Vue.use(SoramitsuElements, { store })
+Vue.prototype.$prompt = MessageBox.prompt
+Vue.prototype.$alert = MessageBox.alert
+Vue.prototype.$message = Message
+Vue.prototype.$notify = Notification
+
+setTheme(Theme.LIGHT)
+setDesignSystem(DesignSystem.NEUMORPHIC)
+```
+
+You could also use direct components import:
+
+```
+import Vue from 'vue'
+
+import Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme'
+import DesignSystem from '@soramitsu/soramitsu-js-ui/lib/types/DesignSystem'
+import { setTheme, setDesignSystem } from '@soramitsu/soramitsu-js-ui/lib/utils'
+
+import ElementUIPlugin, { Message, MessageBox, Notification } from '@soramitsu/soramitsu-js-ui/lib/plugins/elementUI'
+import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/lib/plugins/soramitsuUIStore'
+
+import SButton from '@soramitsu/soramitsu-js-ui/lib/components/Button/SButton'
+
+import store from '@/store'
+
+Vue.use(ElementUIPlugin)
+Vue.use(SoramitsuUIStorePlugin, { store })
+Vue.use(SButton)
+
 Vue.prototype.$prompt = MessageBox.prompt
 Vue.prototype.$alert = MessageBox.alert
 Vue.prototype.$message = Message
 Vue.prototype.$notify = Notification
 
+setTheme(Theme.LIGHT)
+setDesignSystem(DesignSystem.NEUMORPHIC)
 ```
 
-# 4. Add all required styles
+# 4. Add element-ui types
+
+Add `"element-ui"` in `tsconfig.json` file (`"types"` section)
+
+# 5. Add all required styles
 
 The previous section added not all required styles. To fix it you should add imports into `scss` file.
 
 For instance, `soramitsu-variables.scss`:
 
 ```
-@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+@import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 ```
 
 If you want to customise some colors, borders, paddings, size, etc. - you can override scss variables.
@@ -65,6 +110,6 @@ $s-color-theme-accent: #ED145B;
 // Basic colors
 $s-color-base-content-primary: #0D0248;
 
-@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+@import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 
 ```

src/stories/SButton.stories.ts

@@ -1,9 +1,9 @@
 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 { DesignSystem } from '../utils/DesignSystem'
+import { Size, BorderRadius } from '../types'
+import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SButton,

src/stories/SCard.stories.ts

@@ -1,9 +1,9 @@
 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 { DesignSystem } from '../utils/DesignSystem'
+import { BorderRadius, Status, Size } from '../types'
+import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SCard,

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 { DesignSystem } from '../utils/DesignSystem'
+import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SDialog,

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 { DesignSystem } from '../utils/DesignSystem'
+import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SFloatInput,

src/stories/SInput.stories.ts

@@ -1,9 +1,9 @@
 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 { DesignSystem } from '../utils/DesignSystem'
+import { BorderRadius } from '../types'
+import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SInput,