Skip to content

Commit f5a8d82

Browse files
Nikita-Polyakovf33r0
Nikita-Polyakov
and
f33r0
authored
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]>
1 parent 2a80622 commit f5a8d82

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+9332
-9372
lines changed

Diff for: ‎Jenkinsfile

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@Library('jenkins-library' ) _
22

33
def pipeline = new org.js.LibPipeline(steps: this,
4+
buildDockerImage: 'build-tools/node:14-ubuntu',
45
dockerImageName: 'soramitsu/soramitsu-js-ui-library',
56
libExamplesBuildCmds: ['yarn storybook:build'],
67
sonarProjectName: 'soramitsu-js-ui-library',

Diff for: ‎build/rollup.config.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import typescript from 'rollup-plugin-typescript2'
33
import pkg from '../package.json'
44
import scss from 'rollup-plugin-scss'
55
import resolve from '@rollup/plugin-node-resolve'
6-
import commonjs from 'rollup-plugin-commonjs'
6+
import commonjs from '@rollup/plugin-commonjs'
77
import copy from 'rollup-plugin-copy'
8-
import { terser } from 'rollup-plugin-terser'
8+
import terser from '@rollup/plugin-terser'
99
import del from 'rollup-plugin-delete'
1010
import multiInput from 'rollup-plugin-multi-input'
1111

@@ -81,7 +81,7 @@ export default {
8181
}),
8282
scss(),
8383
resolve(),
84-
/* eslint-disable @typescript-eslint/camelcase */
84+
/* eslint-disable camelcase */
8585
terser({ keep_classnames: true }),
8686
del({
8787
targets: [

Diff for: ‎config/storybook/main.js

+5-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,11 @@
11
module.exports = {
2-
stories: ['../../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
2+
core: {
3+
builder: '@storybook/builder-webpack5'
4+
},
5+
stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
36
addons: [
4-
'@storybook/addon-actions',
5-
'@storybook/addon-a11y',
6-
{
7-
name: '@storybook/addon-docs',
8-
options: {
9-
babelOptions: {
10-
presets: [
11-
[
12-
'@vue/cli-plugin-babel/preset',
13-
{
14-
jsx: false
15-
}
16-
]
17-
]
18-
}
19-
}
20-
},
217
'@storybook/addon-essentials',
22-
'@storybook/addon-knobs',
8+
'@storybook/addon-a11y',
239
'@storybook/addon-storysource'
2410
],
2511
webpackFinal: (config) => {

Diff for: ‎config/storybook/preview.ts

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import Vue from 'vue'
2-
import { addParameters, addDecorator } from '@storybook/vue'
3-
import { withA11y } from '@storybook/addon-a11y'
4-
import { DocsPage } from '@storybook/addon-docs/blocks'
2+
import { DocsPage } from '@storybook/addon-docs'
53
import ElColorPicker from 'element-ui/lib/color-picker'
64

75
import '../../src/styles/index.scss'
@@ -21,7 +19,7 @@ setTheme()
2119
document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)')
2220
document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)')
2321

24-
addParameters({
22+
export const parameters = {
2523
options: {
2624
showRoots: true
2725
},
@@ -34,45 +32,50 @@ addParameters({
3432
// completely hide a dependency/dependents block if it has no elements
3533
// by default this is false
3634
hideEmpty: true
35+
},
36+
a11y: {
37+
element: '#storybook-root',
38+
config: {},
39+
options: {},
40+
manual: true
3741
}
38-
})
42+
}
3943

40-
addDecorator(withA11y)
41-
const neuLabelCode = '%F0%9F%9F%A3'
42-
addDecorator(() => ({
43-
components: { SDesignSystemProvider, SButton, SCheckbox },
44-
template: `<s-design-system-provider :value="designSystem" class="s-flex" style="flex-direction: column;">
45-
<div class="s-flex" style="align-items: center; justify-content: flex-end; margin-right: 10px;">
46-
<s-checkbox
47-
style="margin-right: 10px;"
48-
label="NEUMORPHISM"
49-
:value="!!designSystem"
50-
@change="(value) => handleDesignSystemChange(designSystem)"
51-
/>
52-
<s-button
53-
type="action"
54-
rounded
55-
:icon="theme === 'light' ? 'various-brightness-low-24' : 'various-moon-24'"
56-
@click="handleThemeChange"
57-
/>
58-
</div>
59-
<div class="s-flex" style="padding: 20px;">
60-
<story />
61-
</div>
62-
</s-design-system-provider>`,
63-
store: mainStore,
64-
computed: {
65-
// hasNeumorphicMode: () => window.location.href.includes(neuLabelCode) || window.location.href.includes('🟣'), // Set v-if="hasNeumorphicMode" if needed
66-
theme: () => mainStore?.getters?.libraryTheme as Theme,
67-
designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
68-
},
69-
methods: {
70-
handleThemeChange: () => {
71-
switchTheme()
44+
export const decorators = [
45+
() => ({
46+
components: { SDesignSystemProvider, SButton, SCheckbox },
47+
template: `<s-design-system-provider :value="designSystem" class="s-flex" style="flex-direction: column;">
48+
<div class="s-flex" style="align-items: center; justify-content: flex-end; margin-right: 10px;">
49+
<s-checkbox
50+
style="margin-right: 10px;"
51+
label="NEUMORPHISM"
52+
:value="!!designSystem"
53+
@change="(value) => handleDesignSystemChange(designSystem)"
54+
/>
55+
<s-button
56+
type="action"
57+
rounded
58+
:icon="theme === 'light' ? 'various-brightness-low-24' : 'various-moon-24'"
59+
@click="handleThemeChange"
60+
/>
61+
</div>
62+
<div class="s-flex" style="padding: 20px;">
63+
<story />
64+
</div>
65+
</s-design-system-provider>`,
66+
store: mainStore,
67+
computed: {
68+
theme: () => mainStore?.getters?.libraryTheme as Theme,
69+
designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
7270
},
73-
handleDesignSystemChange: (designSystem: DesignSystem) => {
74-
const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
75-
setDesignSystem(newDesignSystem)
71+
methods: {
72+
handleThemeChange: () => {
73+
switchTheme()
74+
},
75+
handleDesignSystemChange: (designSystem: DesignSystem) => {
76+
const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
77+
setDesignSystem(newDesignSystem)
78+
}
7679
}
77-
}
78-
}))
80+
})
81+
]

Diff for: ‎package.json

+45-46
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@soramitsu/soramitsu-js-ui",
3-
"version": "1.0.39",
3+
"version": "1.0.40",
44
"private": false,
55
"publishConfig": {
66
"registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -26,67 +26,66 @@
2626
"storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
2727
},
2828
"dependencies": {
29-
"core-js": "^3.6.4",
30-
"element-resize-detector": "^1.2.1",
31-
"element-ui": "^2.15.5",
29+
"core-js": "^3.26.1",
30+
"element-resize-detector": "^1.2.4",
31+
"element-ui": "^2.15.12",
3232
"lodash": "^4.17.21",
3333
"throttle-debounce": "^1.0.1",
34-
"v-jsoneditor": "^1.4.1",
35-
"vue": "^2.6.11",
36-
"vue-class-component": "^7.2.3",
37-
"vue-i18n": "^8.11.2",
34+
"v-jsoneditor": "^1.4.5",
35+
"vue": "2.6.14",
36+
"vue-class-component": "^7.2.6",
37+
"vue-i18n": "^8.28.2",
3838
"vue-property-decorator": "^9.1.2",
39-
"vuex": "^3.1.3",
40-
"vuex-class": "^0.3.2"
39+
"vuex": "^3.6.2"
4140
},
4241
"devDependencies": {
43-
"@rollup/plugin-node-resolve": "^6.0.0",
44-
"@storybook/addon-a11y": "^5.3.19",
45-
"@storybook/addon-actions": ">=5.3.0",
46-
"@storybook/addon-docs": ">=5.3.0",
47-
"@storybook/addon-essentials": "^5.3.19",
48-
"@storybook/addon-knobs": "^5.3.19",
49-
"@storybook/addon-storysource": "^5.3.19",
50-
"@storybook/theming": "^5.3.19",
51-
"@storybook/vue": ">=5.3.0",
52-
"@types/jest": "^25.2.3",
53-
"@types/lodash": "^4.14.155",
54-
"@typescript-eslint/eslint-plugin": "^2.26.0",
55-
"@typescript-eslint/parser": "^2.26.0",
56-
"@vue/cli-plugin-babel": "~4.3.0",
57-
"@vue/cli-plugin-eslint": "~4.3.0",
58-
"@vue/cli-plugin-typescript": "~4.3.0",
59-
"@vue/cli-plugin-unit-jest": "~4.3.0",
60-
"@vue/cli-service": "~4.3.0",
42+
"@rollup/plugin-commonjs": "^23.0.3",
43+
"@rollup/plugin-node-resolve": "^15.0.1",
44+
"@rollup/plugin-terser": "^0.1.0",
45+
"@storybook/addon-a11y": "^6.5.13",
46+
"@storybook/addon-essentials": "^6.5.13",
47+
"@storybook/addon-storysource": "^6.5.13",
48+
"@storybook/builder-webpack5": "^6.5.13",
49+
"@storybook/manager-webpack5": "^6.5.13",
50+
"@storybook/theming": "^6.5.13",
51+
"@storybook/vue": ">=6.5.13",
52+
"@types/jest": "^29.2.3",
53+
"@types/lodash": "^4.14.190",
54+
"@typescript-eslint/eslint-plugin": "^5.45.0",
55+
"@typescript-eslint/parser": "^5.45.0",
56+
"@vue/cli-plugin-babel": "5.0.0-beta.4",
57+
"@vue/cli-plugin-eslint": "5.0.0-beta.4",
58+
"@vue/cli-plugin-typescript": "5.0.0-beta.4",
59+
"@vue/cli-plugin-unit-jest": "5.0.0-beta.4",
60+
"@vue/cli-service": "5.0.0-beta.4",
6161
"@vue/eslint-config-standard": "^5.1.2",
6262
"@vue/eslint-config-typescript": "^5.0.2",
63-
"@vue/test-utils": "1.0.0-beta.31",
64-
"eslint": "^6.7.2",
65-
"eslint-plugin-import": "^2.20.2",
63+
"@vue/test-utils": "^1.2.2",
64+
"@vue/vue2-jest": "27.0.0-alpha.2",
65+
"eslint": "^7.29.0",
66+
"eslint-plugin-import": "^2.26.0",
6667
"eslint-plugin-node": "^11.1.0",
67-
"eslint-plugin-promise": "^4.2.1",
68-
"eslint-plugin-standard": "^4.0.0",
69-
"eslint-plugin-vue": "^6.2.2",
70-
"jest": "^26.0.1",
68+
"eslint-plugin-promise": "^5.2.0",
69+
"eslint-plugin-standard": "^5.0.0",
70+
"eslint-plugin-vue": "^7.20.0",
71+
"jest": "^27.2.2",
7172
"lint-staged": "^9.5.0",
72-
"node-sass": "^4.12.0",
7373
"postcss": "^8.2.13",
74-
"rollup": "^1.27.8",
75-
"rollup-plugin-commonjs": "^10.1.0",
74+
"rollup": "2.78.0",
7675
"rollup-plugin-copy": "^3.4.0",
7776
"rollup-plugin-delete": "^1.1.0",
7877
"rollup-plugin-multi-input": "^1.3.1",
79-
"rollup-plugin-scss": "^2.5.0",
80-
"rollup-plugin-terser": "^5.1.2",
78+
"rollup-plugin-scss": "^3.0.0",
8179
"rollup-plugin-typescript2": "^0.25.2",
8280
"rollup-plugin-vue": "^5.1.4",
83-
"sass-loader": "^8.0.2",
81+
"sass": "^1.56.1",
82+
"sass-loader": "^13.2.0",
8483
"storybook-vue-router": "^1.0.7",
85-
"ts-jest": "^26.0.0",
86-
"typescript": "~3.8.3",
84+
"ts-jest": "^27.0.5",
85+
"typescript": "~4.4.4",
8786
"vue-cli-plugin-storybook": "~1.2.2",
8887
"vue-router": "^3.3.4",
89-
"vue-template-compiler": "^2.6.11"
88+
"vue-template-compiler": "2.6.14"
9089
},
9190
"postcss": {
9291
"plugins": {
@@ -99,8 +98,8 @@
9998
"*.js"
10099
],
101100
"resolutions": {
102-
"react": "16.13.0",
103-
"react-dom": "16.13.0"
101+
"react": "16.14.0",
102+
"react-dom": "16.14.0"
104103
},
105104
"sideEffects": false,
106105
"gitHooks": {

Diff for: ‎src/components/Checkbox/SCheckbox.vue

+7-18
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<el-checkbox
3-
:class="computedClasses"
43
v-model="model"
4+
:class="computedClasses"
55
:label="label"
66
:disabled="disabled"
77
:border="border"
@@ -16,7 +16,7 @@
1616
</template>
1717

1818
<script lang="ts">
19-
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
19+
import { Component, Mixins, ModelSync, Prop } from 'vue-property-decorator'
2020
import ElCheckbox from 'element-ui/lib/checkbox'
2121
2222
import SizeMixin from '../../mixins/SizeMixin'
@@ -26,10 +26,6 @@ import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
2626
components: { ElCheckbox }
2727
})
2828
export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
29-
/**
30-
* Value of the checkbox item. Can be `string / number / boolean`
31-
*/
32-
@Prop() readonly value!: string | number | boolean
3329
/**
3430
* Label of the checkbox item
3531
*/
@@ -62,18 +58,11 @@ export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
6258
* `false` by default
6359
*/
6460
@Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
65-
66-
model = this.value
67-
68-
@Watch('value')
69-
private handlePropChange (value: string | number | boolean): void {
70-
this.model = value
71-
}
72-
73-
@Watch('model')
74-
private handleValueChange (value: string | number | boolean): void {
75-
this.$emit('input', value)
76-
}
61+
/**
62+
* Value of the checkbox item. Can be `string / number / boolean`
63+
*/
64+
@ModelSync('value', 'input', { type: [String, Number, Boolean] })
65+
readonly model!: string | number | boolean
7766
7867
get computedClasses (): Array<string> {
7968
const cssClasses: Array<string> = []

0 commit comments

Comments
 (0)