Update packages & storybook to 6 version (#479)

* update packages * working config with webpack 5 (with issues) * dedup yarn.lock * update stories * update stories 2 * update stories 3 * update stories 3 * fixes & remove some packages * update resolutions * Update Jenkinsfile * refactoring components * update rollup plugins * update packages * fix components models Co-authored-by: Nikita Zaporozhets <[email protected]>
soramitsu · Nov 30, 2022 · f5a8d82 · f5a8d82
1 parent 2a80622
commit f5a8d82
Show file tree

Hide file tree

Showing 53 changed files with 9,332 additions and 9,372 deletions.
diff --git a/Jenkinsfile b/Jenkinsfile
@@ -1,6 +1,7 @@
 @Library('jenkins-library' ) _
 
 def pipeline = new org.js.LibPipeline(steps: this,
+    buildDockerImage: 'build-tools/node:14-ubuntu',
     dockerImageName: 'soramitsu/soramitsu-js-ui-library',
     libExamplesBuildCmds: ['yarn storybook:build'],
     sonarProjectName: 'soramitsu-js-ui-library',

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -3,9 +3,9 @@ import typescript from 'rollup-plugin-typescript2'
 import pkg from '../package.json'
 import scss from 'rollup-plugin-scss'
 import resolve from '@rollup/plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
+import commonjs from '@rollup/plugin-commonjs'
 import copy from 'rollup-plugin-copy'
-import { terser } from 'rollup-plugin-terser'
+import terser from '@rollup/plugin-terser'
 import del from 'rollup-plugin-delete'
 import multiInput from 'rollup-plugin-multi-input'
 
@@ -81,7 +81,7 @@ export default {
     }),
     scss(),
     resolve(),
-    /* eslint-disable @typescript-eslint/camelcase */
+    /* eslint-disable camelcase */
     terser({ keep_classnames: true }),
     del({
       targets: [

diff --git a/config/storybook/main.js b/config/storybook/main.js
@@ -1,25 +1,11 @@
 module.exports = {
-  stories: ['../../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        babelOptions: {
-          presets: [
-            [
-              '@vue/cli-plugin-babel/preset',
-              {
-                jsx: false
-              }
-            ]
-          ]
-        }
-      }
-    },
     '@storybook/addon-essentials',
-    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
     '@storybook/addon-storysource'
   ],
   webpackFinal: (config) => {

diff --git a/config/storybook/preview.ts b/config/storybook/preview.ts
@@ -1,7 +1,5 @@
 import Vue from 'vue'
-import { addParameters, addDecorator } from '@storybook/vue'
-import { withA11y } from '@storybook/addon-a11y'
-import { DocsPage } from '@storybook/addon-docs/blocks'
+import { DocsPage } from '@storybook/addon-docs'
 import ElColorPicker from 'element-ui/lib/color-picker'
 
 import '../../src/styles/index.scss'
@@ -21,7 +19,7 @@ setTheme()
 document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)')
 document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)')
 
-addParameters({
+export const parameters = {
   options: {
     showRoots: true
   },
@@ -34,45 +32,50 @@ addParameters({
     // completely hide a dependency/dependents block if it has no elements
     // by default this is false
     hideEmpty: true
+  },
+  a11y: {
+    element: '#storybook-root',
+    config: {},
+    options: {},
+    manual: true
   }
-})
+}
 
-addDecorator(withA11y)
-const neuLabelCode = '%F0%9F%9F%A3'
-addDecorator(() => ({
-  components: { SDesignSystemProvider, SButton, SCheckbox },
-  template: `<s-design-system-provider :value="designSystem" class="s-flex" style="flex-direction: column;">
-               <div class="s-flex" style="align-items: center; justify-content: flex-end; margin-right: 10px;">
-                 <s-checkbox
-                   style="margin-right: 10px;"
-                   label="NEUMORPHISM"
-                   :value="!!designSystem"
-                   @change="(value) => handleDesignSystemChange(designSystem)"
-                 />
-                 <s-button
-                   type="action"
-                   rounded
-                   :icon="theme === 'light' ? 'various-brightness-low-24' : 'various-moon-24'"
-                   @click="handleThemeChange"
-                 />
-               </div>
-               <div class="s-flex" style="padding: 20px;">
-                 <story />
-               </div>
-             </s-design-system-provider>`,
-  store: mainStore,
-  computed: {
-    // hasNeumorphicMode: () => window.location.href.includes(neuLabelCode) || window.location.href.includes('🟣'), // Set v-if="hasNeumorphicMode" if needed
-    theme: () => mainStore?.getters?.libraryTheme as Theme,
-    designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
-  },
-  methods: {
-    handleThemeChange: () => {
-      switchTheme()
+export const decorators = [
+  () => ({
+    components: { SDesignSystemProvider, SButton, SCheckbox },
+    template: `<s-design-system-provider :value="designSystem" class="s-flex" style="flex-direction: column;">
+                 <div class="s-flex" style="align-items: center; justify-content: flex-end; margin-right: 10px;">
+                   <s-checkbox
+                     style="margin-right: 10px;"
+                     label="NEUMORPHISM"
+                     :value="!!designSystem"
+                     @change="(value) => handleDesignSystemChange(designSystem)"
+                   />
+                   <s-button
+                     type="action"
+                     rounded
+                     :icon="theme === 'light' ? 'various-brightness-low-24' : 'various-moon-24'"
+                     @click="handleThemeChange"
+                   />
+                 </div>
+                 <div class="s-flex" style="padding: 20px;">
+                   <story />
+                 </div>
+               </s-design-system-provider>`,
+    store: mainStore,
+    computed: {
+      theme: () => mainStore?.getters?.libraryTheme as Theme,
+      designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
     },
-    handleDesignSystemChange: (designSystem: DesignSystem) => {
-      const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
-      setDesignSystem(newDesignSystem)
+    methods: {
+      handleThemeChange: () => {
+        switchTheme()
+      },
+      handleDesignSystemChange: (designSystem: DesignSystem) => {
+        const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
+        setDesignSystem(newDesignSystem)
+      }
     }
-  }
-}))
+  })
+]
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -26,67 +26,66 @@
     "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
-    "element-resize-detector": "^1.2.1",
-    "element-ui": "^2.15.5",
+    "core-js": "^3.26.1",
+    "element-resize-detector": "^1.2.4",
+    "element-ui": "^2.15.12",
     "lodash": "^4.17.21",
     "throttle-debounce": "^1.0.1",
-    "v-jsoneditor": "^1.4.1",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.11.2",
+    "v-jsoneditor": "^1.4.5",
+    "vue": "2.6.14",
+    "vue-class-component": "^7.2.6",
+    "vue-i18n": "^8.28.2",
     "vue-property-decorator": "^9.1.2",
-    "vuex": "^3.1.3",
-    "vuex-class": "^0.3.2"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^6.0.0",
-    "@storybook/addon-a11y": "^5.3.19",
-    "@storybook/addon-actions": ">=5.3.0",
-    "@storybook/addon-docs": ">=5.3.0",
-    "@storybook/addon-essentials": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
-    "@storybook/vue": ">=5.3.0",
-    "@types/jest": "^25.2.3",
-    "@types/lodash": "^4.14.155",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-typescript": "~4.3.0",
-    "@vue/cli-plugin-unit-jest": "~4.3.0",
-    "@vue/cli-service": "~4.3.0",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-storysource": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/theming": "^6.5.13",
+    "@storybook/vue": ">=6.5.13",
+    "@types/jest": "^29.2.3",
+    "@types/lodash": "^4.14.190",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "@vue/cli-plugin-babel": "5.0.0-beta.4",
+    "@vue/cli-plugin-eslint": "5.0.0-beta.4",
+    "@vue/cli-plugin-typescript": "5.0.0-beta.4",
+    "@vue/cli-plugin-unit-jest": "5.0.0-beta.4",
+    "@vue/cli-service": "5.0.0-beta.4",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "1.0.0-beta.31",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
+    "@vue/test-utils": "^1.2.2",
+    "@vue/vue2-jest": "27.0.0-alpha.2",
+    "eslint": "^7.29.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "jest": "^26.0.1",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "jest": "^27.2.2",
     "lint-staged": "^9.5.0",
-    "node-sass": "^4.12.0",
     "postcss": "^8.2.13",
-    "rollup": "^1.27.8",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup": "2.78.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-scss": "^3.0.0",
     "rollup-plugin-typescript2": "^0.25.2",
     "rollup-plugin-vue": "^5.1.4",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
     "storybook-vue-router": "^1.0.7",
-    "ts-jest": "^26.0.0",
-    "typescript": "~3.8.3",
+    "ts-jest": "^27.0.5",
+    "typescript": "~4.4.4",
     "vue-cli-plugin-storybook": "~1.2.2",
     "vue-router": "^3.3.4",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "2.6.14"
   },
   "postcss": {
     "plugins": {
@@ -99,8 +98,8 @@
     "*.js"
   ],
   "resolutions": {
-    "react": "16.13.0",
-    "react-dom": "16.13.0"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "sideEffects": false,
   "gitHooks": {

diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <el-checkbox
-    :class="computedClasses"
     v-model="model"
+    :class="computedClasses"
     :label="label"
     :disabled="disabled"
     :border="border"
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, ModelSync, Prop } from 'vue-property-decorator'
 import ElCheckbox from 'element-ui/lib/checkbox'
 
 import SizeMixin from '../../mixins/SizeMixin'
@@ -26,10 +26,6 @@ import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
   components: { ElCheckbox }
 })
 export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
-  /**
-   * Value of the checkbox item. Can be `string / number / boolean`
-   */
-  @Prop() readonly value!: string | number | boolean
   /**
    * Label of the checkbox item
    */
@@ -62,18 +58,11 @@ export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
-
-  model = this.value
-
-  @Watch('value')
-  private handlePropChange (value: string | number | boolean): void {
-    this.model = value
-  }
-
-  @Watch('model')
-  private handleValueChange (value: string | number | boolean): void {
-    this.$emit('input', value)
-  }
+  /**
+   * Value of the checkbox item. Can be `string / number / boolean`
+   */
+  @ModelSync('value', 'input', { type: [String, Number, Boolean] })
+  readonly model!: string | number | boolean
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []