ViennaUI

Raiffeisenbank Design System

Changelog

Список изменений 2.0.0 версии относительно 1.x.x можно посмотреть по ссылке.

Установка

Для установки библиотеки React компонентов:

$ npm i vienna-ui
$ yarn add vienna-ui

Дизайн Система Vienna.UI содержит еще 9 пакетов: vienna.config-eslint, vienna.config-typescript, vienna.icons, vienna.react-use, vienna.svg2tsx, vienna.tokens, vienna.ui-primitives, vienna.ui-theme, vienna.utils

Любой из приведенных выше пакетов также можно установить, вызвав:

$ npm i <package-name>
$ yarn add <package-name>

Использование

В пакете vienna-ui находятся компоненты дизайн-системы, которые содержат собранные js файлы (скомпилированные через Babel).

import React form 'react';
import ReactDOM from 'react-dom';
import { Body, Button } from 'vienna-ui';
import { PlusRing } from 'vienna.icons';

const App = (
    <Button design='accent'>
        Кнопка <PlusRing />
    </Button>
);

ReactDOM.render(app, document.getElementById('root'));

Компоненты

• Alarm
• Alert
• Avatar
• Badge
• Breadcrumbs
• Button
• Calendar
• Card
• Checkbox
• Chips
• ComboButton
• Counter
• DateTimePicker
• Datepicker
• DatepickerRange
• Drawer
• DropList
• EmptyState
• FileLoader
• FileLoaderButton
• Filter
• Flex
• FormField
• Grid
• Groups
• Header
• Hint
• Input
• InputAccount
• InputCard
• InputDate
• InputDateRange
• InputDigital
• InputMask
• InputNumber
• InputPassword
• InputPhone
• InputSlider
• Link
• Logotype
• Modal
• Monthpicker
• Multiselect
• Notifications
• Pagination
• PaymentLogo
• Popover
• Progressbar
• Radio
• RoundIcon
• Search & Suggest
• Select
• Sidebar
• Spinner
• Stepper
• Switcher
• Table
• Tabs
• Textarea
• Timer
• Toolbar
• Tooltip
• Typography
• UserProfile

Кастомизация компонентов

Компоненты можно кастомизировать с помощью ThemeProvider и токенов. Подробнее об этом здесь

Технологический стек и браузеры

Компоненты дизайн-системы разработаны с использованием react@16, styled-components@4. Мы поддерживаем стабильные версии следующих браузеры:

• Chrome (2 latest)
• Firefox (2 latest)
• Safari (2 latest)
• Yandex (2 latest)
• Edge (2 latest)
• IE (11+)

Скрипты миграции

Для комфортного перехода на новые мажорные версии дизайн системы мы пишем скрипты миграции/Codemods. Полный список можно посмотреть здесь