mtsbankui

MTSBANK UI kit

Usage no npm install needed!

<script type="module">
  import mtsbankui from 'https://cdn.skypack.dev/mtsbankui';
</script>

README

MTS Bank Logo

Uikit and design guidelines

Installation

npm add mtsbankui

*Aye, capt'n, there's add command in our npm!

Dot env

To start up create an .env file in project's root whit this prerequisites:

PORT=666
DOCZ_PORT=667
APP_ID=mtsb_docz

Getting set up

To start using the components, please follow these steps:

  • Wrap your application in a styled-components <ThemeProvider> and provide it with theme:
import { ThemeProvider } from 'styled-components'
import { theme } from 'mtsbankui'

const Root = () => <ThemeProvider theme={theme}><App/></ThemeProvider>
  • Then start using components. You can access theme from props:
import { Button } from 'mtsbankui'

const App = (props) => <Button style={{color: props.theme.colors.pink}}>PRESS ME!</Button>
  • Or just import it straight from the lib to avoid bloat:
import { Button, theme } from 'mtsbankui'
import styled from 'styled-components'

const App = (props) => <StyledButton>PRESS ME!</StyledButton>

const StyledButton = styled(Button)`
    color: ${theme.colors.pink};
`
// instead of
// const StyledButton = styled(Button)`
//    color: ${({ theme }) => theme.colors.pink};
//`

After work is done

Write a conventional commit with:

npm run commit

Regular git commit with simple message wont cut it, resulting in error of commitlint

Changelog

Authors

  • MTS Bank Frontend team

License

This project is licensed under the Mozilla Public License Version 2.0 - see the LICENSE.md file for details