Skip to content

Latest commit

 

History

History
124 lines (85 loc) · 3.5 KB

Intro.stories.mdx

File metadata and controls

124 lines (85 loc) · 3.5 KB
Raw

1. Add .npmrc and .yarnrc files to the project

.npmrc should looks like:

@soramitsu:registry=https://nexus.iroha.tech/repository/npm-group/

.yarnrc should looks like:

"@soramitsu:registry" "https://nexus.iroha.tech/repository/npm-group/"

If you want to run project locally, then you should run the following command:

npm login --registry="https://nexus.iroha.tech/repository/npm-group/"
  • If this command fails, please contact DevOps team

2. Add as a dependency to the project

Add "@soramitsu/soramitsu-js-ui": "version" in package.json file ("dependencies" section)

OR RUN

yarn add "@soramitsu/soramitsu-js-ui"

3. Add components with utilities to the project

For instance, soramitsuUI.ts:

import Vue from 'vue'

import SoramitsuElements, {
  Message,
  MessageBox,
  Notification,
  setTheme,
  setDesignSystem,
  Theme,
  DesignSystem
} from '@soramitsu/soramitsu-js-ui'

import store from '@/store'

Vue.use(SoramitsuElements, { store })
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification

setTheme(Theme.LIGHT)
setDesignSystem(DesignSystem.NEUMORPHIC)

You could also use direct components import to reduce vendors bundle size:

import Vue from 'vue'

import Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme'
import DesignSystem from '@soramitsu/soramitsu-js-ui/lib/types/DesignSystem'
import { setTheme, setDesignSystem } from '@soramitsu/soramitsu-js-ui/lib/utils'

import ElementUIPlugin, { Message, MessageBox, Notification } 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 store from '@/store'

Vue.use(ElementUIPlugin)
Vue.use(SoramitsuUIStorePlugin, { store })
Vue.use(SButton)

Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification

setTheme(Theme.LIGHT)
setDesignSystem(DesignSystem.NEUMORPHIC)

4. Add element-ui types

Add "element-ui" in tsconfig.json file ("types" section)

5. Add all required styles

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';

If you want to customise some colors, borders, paddings, size, etc. - you can override scss variables.

For instance, soramitsu-variables.scss:

// Main colors
$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';