diff --git a/Jenkinsfile b/Jenkinsfile index c1afa51d..93c7734d 100644 --- 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 index b1695b2c..06288e6f 100644 --- 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 index d2eb1cb1..78ba3ceb 100644 --- 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 index 93836b3e..b30b1095 100644 --- 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: ` -
- - -
-
- -
-
`, - 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: ` +
+ + +
+
+ +
+
`, + 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 index cde7eda6..68436d90 100644 --- 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 index 0b06ff38..eadd0203 100644 --- a/src/components/Checkbox/SCheckbox.vue +++ b/src/components/Checkbox/SCheckbox.vue @@ -1,7 +1,7 @@