From 7bc6ea4e83c7d0b826e68081f0cb092d1c2d4fce Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 21 Jul 2021 13:16:33 +0400 Subject: [PATCH 1/5] Scrollbar implementation (#258) * Add scrollbar * Update scrollbar.scss --- package.json | 2 +- src/components/Scrollbar/SScrollbar.vue | 58 +++++++++++++++++++++++++ src/components/Scrollbar/index.ts | 13 ++++++ src/components/index.ts | 1 + src/index.ts | 3 ++ src/store/LibraryLocale.ts | 2 +- src/stories/SScrollbar.stories.ts | 32 ++++++++++++++ src/styles/index.scss | 1 + src/styles/scrollbar.scss | 6 +++ src/types/components.ts | 1 + 10 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/components/Scrollbar/SScrollbar.vue create mode 100644 src/components/Scrollbar/index.ts create mode 100644 src/stories/SScrollbar.stories.ts create mode 100644 src/styles/scrollbar.scss diff --git a/package.json b/package.json index 7443d5a3..42af85d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.0", + "version": "1.0.1", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Scrollbar/SScrollbar.vue b/src/components/Scrollbar/SScrollbar.vue new file mode 100644 index 00000000..49d4f524 --- /dev/null +++ b/src/components/Scrollbar/SScrollbar.vue @@ -0,0 +1,58 @@ + + + diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts new file mode 100644 index 00000000..a3e62ad1 --- /dev/null +++ b/src/components/Scrollbar/index.ts @@ -0,0 +1,13 @@ +import { VueConstructor } from 'vue' +import { Components, SFCWithInstall } from '../../types/components' + +import _SScrollbar from './SScrollbar.vue' + +const SScrollbar = _SScrollbar as SFCWithInstall + +SScrollbar.install = function (vue: VueConstructor) { + vue.component(Components.SScrollbar, SScrollbar) +} + +export { SScrollbar } +export default SScrollbar diff --git a/src/components/index.ts b/src/components/index.ts index 2fa2c287..dc9f811c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -24,6 +24,7 @@ export { SSlider } from './Slider' export { SSwitch } from './Switch' export { SRadio, SRadioGroup } from './Radio' export { SRow } from './Layout/Row' +export { SScrollbar } from './Scrollbar' export { SScrollSectionItem, SScrollSections } from './ScrollSections' export { SSelect, SOption, SOptionGroup } from './Select' export { STab, STabs } from './Tab' diff --git a/src/index.ts b/src/index.ts index f39b8b24..b32b63a6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,6 +36,7 @@ import { SRadio, SRadioGroup, SRow, + SScrollbar, SScrollSectionItem, SScrollSections, SSelect, @@ -103,6 +104,7 @@ const SoramitsuElements = { vue.use(SRadio) vue.use(SRadioGroup) vue.use(SRow) + vue.use(SScrollbar) vue.use(SScrollSectionItem) vue.use(SScrollSections) vue.use(SSelect) @@ -172,6 +174,7 @@ export { SRadio, SRadioGroup, SRow, + SScrollbar, SScrollSectionItem, SScrollSections, SSelect, diff --git a/src/store/LibraryLocale.ts b/src/store/LibraryLocale.ts index 71f5b28c..6f76ec3b 100644 --- a/src/store/LibraryLocale.ts +++ b/src/store/LibraryLocale.ts @@ -5,7 +5,7 @@ import flow from 'lodash/fp/flow' import concat from 'lodash/fp/concat' import { Locale } from '../utils/Locale' -import i18n from '@/locale' +import i18n from '../locale' const types = flow( flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']), diff --git a/src/stories/SScrollbar.stories.ts b/src/stories/SScrollbar.stories.ts new file mode 100644 index 00000000..383db04e --- /dev/null +++ b/src/stories/SScrollbar.stories.ts @@ -0,0 +1,32 @@ +import { withKnobs, boolean } from '@storybook/addon-knobs' + +import { SScrollbar } from '../components' + +export default { + component: SScrollbar, + title: 'Design System/Components/Scrollbar', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SScrollbar }, + template: ` + +
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+
+ `, + props: { + native: { + default: boolean('Native', false) + }, + noresize: { + default: boolean('Noresize', false) + } + } +}) diff --git a/src/styles/index.scss b/src/styles/index.scss index bfa5c946..be7f5d9a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -21,6 +21,7 @@ @import "./option"; @import "./pagination"; @import "./radio"; +@import "./scrollbar"; @import "./scroll-sections"; @import "./select"; @import "./slider"; diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 00000000..2163fa3a --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,6 @@ +.el-scrollbar__thumb { + border-radius: 6px; + &, &:hover { + background-color: var(--s-color-base-content-tertiary); + } +} diff --git a/src/types/components.ts b/src/types/components.ts index 938e29d7..c22836ec 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -39,6 +39,7 @@ export enum Components { SRadio = 'SRadio', SRadioGroup = 'SRadioGroup', SRow = 'SRow', + SScrollbar = 'SScrollbar', SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', SSelect = 'SSelect', From e993ecf66d796fb59f708e6e8901e9510794599f Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Wed, 21 Jul 2021 13:18:06 +0300 Subject: [PATCH 2/5] fix storybook build scss (#260) * fix storybook build scss * remove async --- config/storybook/main.js | 11 ++++++++++- package.json | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/config/storybook/main.js b/config/storybook/main.js index 89ad8212..d2eb1cb1 100644 --- a/config/storybook/main.js +++ b/config/storybook/main.js @@ -21,5 +21,14 @@ module.exports = { '@storybook/addon-essentials', '@storybook/addon-knobs', '@storybook/addon-storysource' - ] + ], + webpackFinal: (config) => { + const scssRule = config.module.rules.find(({ test }) => typeof test.test === 'function' && test.test('.scss')) + // important to include scss to storybook build + if (scssRule) { + scssRule.sideEffects = true + } + + return config + } } diff --git a/package.json b/package.json index 42af85d6..004bd2a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.1", + "version": "1.0.2", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" From fc99cbd22d2d770474f12c859472fef481174029 Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Wed, 21 Jul 2021 13:38:31 +0300 Subject: [PATCH 3/5] Add an item in the installation instructions with the addition of element-ui types in tsconfig --- src/stories/Intro/Intro.stories.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/stories/Intro/Intro.stories.mdx b/src/stories/Intro/Intro.stories.mdx index 6657d37f..30ba881c 100644 --- a/src/stories/Intro/Intro.stories.mdx +++ b/src/stories/Intro/Intro.stories.mdx @@ -45,7 +45,11 @@ Vue.prototype.$notify = Notification ``` -# 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. From 055b7c47d4538a0ac4f831543c2be77e77c298b5 Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Thu, 22 Jul 2021 08:52:46 +0300 Subject: [PATCH 4/5] Fix select arrow icon --- src/styles/select.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/select.scss b/src/styles/select.scss index 665e1ce0..81fa5628 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss @@ -45,7 +45,7 @@ $select-prefix-height: $s-size-mini; display: flex; align-items: center; width: var(--s-icon-font-size-big); - font-family: var(--s-font-family-icons); + font-family: var(--s-font-family-icons) !important; font-size: var(--s-icon-font-size-big); &:before { content: $s-icon-arrows-chevron-top-rounded-24; From ca4dcaad13d13aad3dab5ff11d909a5babc6ebd4 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 22 Jul 2021 14:44:11 +0400 Subject: [PATCH 5/5] Improve build config (#264) * Improve build config --- build/rollup.config.js | 47 ++++++++++++----- package.json | 10 ++-- src/components/Card/SCard/SCard.vue | 3 -- .../DesignSystem/DesignSystemInject.ts | 2 +- .../SDesignSystemProvider.vue | 2 +- src/components/DesignSystem/consts.ts | 5 -- src/components/Switch/SSwitch.vue | 1 + src/components/Tooltip/STooltip.vue | 2 +- src/directives/number.ts | 2 +- src/index.ts | 6 +-- src/locale/index.ts | 2 +- src/store/LibraryLocale.ts | 2 +- src/store/LibraryTheme.ts | 12 ++--- src/stories/Collapse/SCollapse.stories.ts | 2 +- src/stories/Intro/Intro.stories.mdx | 51 +++++++++++++++++-- src/stories/SButton.stories.ts | 4 +- src/stories/SCard.stories.ts | 4 +- src/stories/SDialog.stories.ts | 2 +- src/stories/SFloatInput.stories.ts | 2 +- src/stories/SInput.stories.ts | 4 +- src/stories/SRadio.stories.ts | 2 +- src/stories/SSwitch.stories.ts | 2 +- src/stories/STooltip.stories.ts | 4 +- src/stories/Tab/STabs.stories.ts | 4 +- src/types/DesignSystem.ts | 6 +++ src/types/Locale.ts | 6 +++ src/{utils => types}/Theme.ts | 4 +- src/utils/DesignSystem.ts | 4 -- src/utils/KeyValues.ts | 2 +- src/utils/Locale.ts | 4 -- src/utils/index.ts | 18 +++---- yarn.lock | 45 ++++++++++++++++ 32 files changed, 185 insertions(+), 81 deletions(-) create mode 100644 src/types/DesignSystem.ts create mode 100644 src/types/Locale.ts rename src/{utils => types}/Theme.ts (51%) delete mode 100644 src/utils/DesignSystem.ts delete mode 100644 src/utils/Locale.ts diff --git a/build/rollup.config.js b/build/rollup.config.js index 10476d27..4a1ec3c2 100644 --- a/build/rollup.config.js +++ b/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' }) ] diff --git a/package.json b/package.json index 004bd2a7..5d4254a9 100644 --- a/package.json +++ b/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 ", - "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" ], diff --git a/src/components/Card/SCard/SCard.vue b/src/components/Card/SCard/SCard.vue index 1c3f1af4..4bd10c18 100644 --- a/src/components/Card/SCard/SCard.vue +++ b/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) */ diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts index 6adbb16f..24ca84cd 100644 --- a/src/components/DesignSystem/DesignSystemInject.ts +++ b/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 { diff --git a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue index 8c353bea..57e40ce8 100644 --- a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue +++ b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue @@ -7,7 +7,7 @@