From 8cd84fef252e0feba14142e761061f145cc7dfaf Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Tue, 27 Jul 2021 16:25:48 +0400 Subject: [PATCH 1/7] Fix readme --- README.md | 33 +---------------------------- src/stories/Intro/Intro.stories.mdx | 17 +++++++++++---- 2 files changed, 14 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 13bb6161..52749a21 100644 --- a/README.md +++ b/README.md @@ -5,40 +5,9 @@ yarn install ``` -## Font variables setup -Required!: Add scss font variables to your project - -``` -$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default; -$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default; -$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default; -``` - ## Usage library in project -### 1.Install all of library components: -``` -import Vue from 'vue -import SoramitsuElements from '@soramitsu/soramitsu-js-ui' -const options = { - store // if u want to merge ui lib modules -} - -Vue.use(SoramitsuElements, options) -``` -### 2.Install only necessary components (to reduce vendors bundle size) -``` -import Vue from 'vue -import ElementUIPlugin 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 SButton from '@soramitsu/soramitsu-js-ui/lib/components/Input/SInput' - -Vue.use(ElementUIPlugin) // required -Vue.use(SoramitsuUIStorePlugin, store) // optional -Vue.use(SButton) -Vue.use(SInput) -``` +The full guide about usage can be found [here](./src/stories/Intro/Intro.stories.mdx) ### Compiles and hot-reloads storybook with components for development ``` diff --git a/src/stories/Intro/Intro.stories.mdx b/src/stories/Intro/Intro.stories.mdx index ba0f71e3..153f09ca 100644 --- a/src/stories/Intro/Intro.stories.mdx +++ b/src/stories/Intro/Intro.stories.mdx @@ -22,13 +22,13 @@ npm login --registry="https://nexus.iroha.tech/repository/npm-group/" # 2. Add as a dependency to the project -Add `"@soramitsu/soramitsu-js-ui": "^0.3.4"` in `package.json` file (`"dependencies"` section) +Add `"@soramitsu/soramitsu-js-ui": "version"` in `package.json` file (`"dependencies"` section) OR RUN `yarn add "@soramitsu/soramitsu-js-ui"` -# 3. Add components with styles to the project +# 3. Add components with utilities to the project For instance, `soramitsuUI.ts`: @@ -57,7 +57,7 @@ setTheme(Theme.LIGHT) setDesignSystem(DesignSystem.NEUMORPHIC) ``` -You could also use direct components import: +You could also use direct components import to reduce vendors bundle size: ``` import Vue from 'vue' @@ -92,11 +92,16 @@ 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. +The previous sections added not all required styles. To fix it you should add imports into `scss` file. +Also, you should add **Font variables** For instance, `soramitsu-variables.scss`: ``` +$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default; +$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default; +$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default; + @import '~@soramitsu/soramitsu-js-ui/lib/styles/index'; ``` @@ -110,6 +115,10 @@ $s-color-theme-accent: #ED145B; // Basic colors $s-color-base-content-primary: #0D0248; +$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default; +$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default; +$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default; + @import '~@soramitsu/soramitsu-js-ui/lib/styles/index'; ``` From 1d0af1c085ae1f6a7475e2d2b6a19a0187423bbe Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 30 Jul 2021 14:41:11 +0400 Subject: [PATCH 2/7] Add dark theme --- config/storybook/preview.js | 15 ++++- src/components/Button/SButton/SButton.vue | 10 ++-- src/store/LibraryTheme.ts | 12 +++- src/stories/Collapse/SCollapse.stories.ts | 14 ++--- src/stories/Intro/Customization.stories.ts | 7 +-- src/stories/Intro/Theming.stories.ts | 37 ++++++++++++ src/stories/SButton.stories.ts | 51 ++++++---------- src/stories/SCard.stories.ts | 15 ++--- src/stories/SDialog.stories.ts | 68 ++++++++++------------ src/stories/SFloatInput.stories.ts | 25 +++----- src/stories/SInput.stories.ts | 25 +++----- src/stories/SRadio.stories.ts | 41 ++++++------- src/stories/SSwitch.stories.ts | 41 ++++++------- src/stories/STooltip.stories.ts | 27 +++------ src/stories/Tab/STabs.stories.ts | 17 ++---- src/styles/button.scss | 22 +++++++ src/styles/card.scss | 1 + src/styles/collapse.scss | 6 +- src/styles/index.scss | 5 +- src/styles/menu.scss | 8 ++- src/styles/neumorphism/button.scss | 31 ++++++++-- src/styles/pagination.scss | 2 + src/styles/root.scss | 62 ++++++++++++++++++++ src/styles/tabs.scss | 4 +- src/styles/theme/dark.scss | 37 ++++++++++++ src/styles/variables.scss | 4 +- src/types/index.ts | 2 + src/utils/index.ts | 2 +- 28 files changed, 361 insertions(+), 230 deletions(-) create mode 100644 src/stories/Intro/Theming.stories.ts create mode 100644 src/styles/theme/dark.scss diff --git a/config/storybook/preview.js b/config/storybook/preview.js index 1d12b586..ff3d2695 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -7,10 +7,15 @@ import ElColorPicker from 'element-ui/lib/color-picker' import '../../src/styles/index.scss' import './index.scss' import mainStore from '../../src/store' +import { setTheme } from '../../src/utils' import { ElementUIPlugin } from '../../src/plugins' +import { SDesignSystemProvider } from '../../src/components' Vue.use(ElementUIPlugin) Vue.use(ElColorPicker) +setTheme() +document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)') +document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)') addParameters({ options: { @@ -30,8 +35,14 @@ addParameters({ addDecorator(withA11y) addDecorator(() => ({ + components: { SDesignSystemProvider }, template: `
- + + +
`, - store: mainStore + store: mainStore, + computed: { + designSystem: () => mainStore?.getters?.libraryDesignSystem + } })) diff --git a/src/components/Button/SButton/SButton.vue b/src/components/Button/SButton/SButton.vue index 771c8b69..03a03e06 100644 --- a/src/components/Button/SButton/SButton.vue +++ b/src/components/Button/SButton/SButton.vue @@ -180,14 +180,16 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design } get isRounded (): boolean { - if (([ButtonTypes.ACTION] as Array).includes(this.type)) return this.rounded - + if (this.type === ButtonTypes.ACTION) { + return this.rounded + } return false } get isLoading (): boolean { - if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) return false - + if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) { + return false + } return this.loading } diff --git a/src/store/LibraryTheme.ts b/src/store/LibraryTheme.ts index 9bdfea2b..0b80b1a3 100644 --- a/src/store/LibraryTheme.ts +++ b/src/store/LibraryTheme.ts @@ -24,7 +24,8 @@ type State = { function initialState (): State { return { - theme: Theme.LIGHT, + // "light" is set by default + theme: localStorage.getItem('libraryTheme') as Theme || Theme.LIGHT, designSystem: DesignSystem.DEFAULT } } @@ -43,6 +44,7 @@ const getters = { const mutations = { [types.SET_THEME] (state: State, theme: Theme) { state.theme = theme + localStorage.setItem('libraryTheme', theme) }, [types.SET_DESIGN_SYSTEM] (state: State, designSystem: DesignSystem) { state.designSystem = designSystem @@ -50,8 +52,12 @@ const mutations = { } const actions = { - setTheme ({ commit }, theme: Theme) { - commit(types.SET_THEME, theme) + setTheme ({ commit, state: { theme } }, newTheme?: Theme) { + const computedTheme = newTheme || theme + if (!newTheme || theme !== newTheme) { + commit(types.SET_THEME, computedTheme) + } + document.documentElement.setAttribute('design-system-theme', computedTheme) }, setDesignSystem ({ commit }, designSystem: DesignSystem) { commit(types.SET_DESIGN_SYSTEM, designSystem) diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts index 79899a72..9e76a169 100644 --- a/src/stories/Collapse/SCollapse.stories.ts +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -1,8 +1,7 @@ import { withKnobs, boolean, select } from '@storybook/addon-knobs' -import { SCollapse, SCollapseItem, SDesignSystemProvider } from '../../components' +import { SCollapse, SCollapseItem } from '../../components' import { BorderTypes } from '../../components/Collapse' -import DesignSystem from '../../types/DesignSystem' export default { component: SCollapse, @@ -11,9 +10,8 @@ export default { } export const configurable = () => ({ - components: { SCollapse, SCollapseItem, SDesignSystemProvider }, - template: ` - + components: { SCollapse, SCollapseItem }, + template: `
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
@@ -31,12 +29,8 @@ export const configurable = () => ({
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
 - - `, + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, accordion: { default: boolean('Accordion', false) }, diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts index 1f1d4ed0..fb63624c 100644 --- a/src/stories/Intro/Customization.stories.ts +++ b/src/stories/Intro/Customization.stories.ts @@ -1,6 +1,6 @@ import { withKnobs } from '@storybook/addon-knobs' -import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius } from '../../types' +import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius, ColorPrefix } from '../../types' import { SRow, SButton, SInput, SCol, SDivider } from '../../components' import { differentTypeButtonsData } from '../SButton.stories' @@ -16,9 +16,8 @@ const getRadiusData = (BorderRadius) => Object.values(BorderRadius).map(borderRa return { label: borderRadiusPropertyName, value } }) -const colorPropertyPrefix = '--s-color-' const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => { - const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`) + const value = getComputedStyle(document.documentElement).getPropertyValue(`${ColorPrefix}${colorPropertyName}`) const isRgb = value.includes('rgb') return { label: colorPropertyName, value, isRgb } }) @@ -114,7 +113,7 @@ export const configurable = () => ({ }), methods: { handleColorChange: (label: string, color: string) => { - document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color) + document.documentElement.style.setProperty(`${ColorPrefix}${label}`, color) }, handleBorderRadiusChange: (label: string, borderRadius: string) => { document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, `${+borderRadius > 0 ? borderRadius : '0'}px`) diff --git a/src/stories/Intro/Theming.stories.ts b/src/stories/Intro/Theming.stories.ts new file mode 100644 index 00000000..1472b32d --- /dev/null +++ b/src/stories/Intro/Theming.stories.ts @@ -0,0 +1,37 @@ +import { withKnobs } from '@storybook/addon-knobs' + +import Theme from '../../types/Theme' +import DesignSystem from '../../types/DesignSystem' +import { SButton, SDivider } from '../../components' +import { setTheme, setDesignSystem } from '../../utils' +import mainStore from '../../store' + +export default { + title: 'Design System/Intro/Theming', + decorators: [withKnobs], + excludeStories: /.*Data$/ +} + +export const configurable = () => ({ + components: { SButton, SDivider }, + template: `
+ {{ theme }} + {{ designSystem || 'default' }} + +

You can also check another components, these colors are applied to the whole library

+
`, + computed: { + theme: () => mainStore?.getters?.libraryTheme, + designSystem: () => mainStore?.getters?.libraryDesignSystem + }, + methods: { + handleThemeChange: (theme: Theme) => { + const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT + setTheme(newTheme) + }, + handleDesignSystemChange: (designSystem: DesignSystem) => { + const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT + setDesignSystem(newDesignSystem) + } + } +}) diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 3f12aab1..7604f2ec 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,9 +1,8 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon, SDesignSystemProvider } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon } from '../components' import { ButtonTypes, ButtonIconPosition } from '../components/Button' import { Size, BorderRadius } from '../types' -import DesignSystem from '../types/DesignSystem' export default { component: SButton, @@ -13,10 +12,8 @@ export default { } export const configurable = () => ({ - components: { SButton, SIcon, SDesignSystemProvider }, - template: ` - - ({ :alternative="alternative" :primary="primary" @click="handleClick" - > - - {{ content }} - - `, + > + + {{ content }} + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, disabled: { default: boolean('Disabled', false) }, @@ -96,25 +89,19 @@ export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => { return data }) export const withDifferentTypes = () => ({ - components: { SButton, SRow, SDesignSystemProvider }, - template: ` - - - - {{ item.label }} - - - `, + components: { SButton, SRow }, + template: ` + + {{ item.label }} + + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, items: { default: () => differentTypeButtonsData } diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts index 73bd9996..b959eb97 100644 --- a/src/stories/SCard.stories.ts +++ b/src/stories/SCard.stories.ts @@ -1,9 +1,8 @@ import { text, withKnobs, select, boolean } from '@storybook/addon-knobs' -import { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider } from '../components' +import { SCard, SRow, SDropdown, SDropdownItem } from '../components' import { CardShadow } from '../components/Card' import { BorderRadius, Status, Size } from '../types' -import DesignSystem from '../types/DesignSystem' export default { component: SCard, @@ -12,10 +11,8 @@ export default { } export const configurable = () => ({ - components: { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider }, - template: ` - - + components: { SCard, SRow, SDropdown, SDropdownItem }, + template: `