ViennaUI

Raiffeisenbank Design System

Установка

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

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

Дизайн Система Vienna.UI содержит еще 6 пакетов: vienna.icons, vienna.react-use, 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'));

Компоненты

• Accordion
• Alarm
• Alert
• Avatar
• Badge
• Body
• Breadcrumbs
• Button
• Calendar
• Card
• Checkbox
• Chips
• ComboButton
• Counter
• CssGrid
• CustomTable
• Datepicker
• DatePickerBeta
• DateTimePicker
• DatepickerRange
• Drawer
• DropList
• EmptyState
• FileLoader
• FileLoaderButton
• Filter
• Flex
• FormField
• Grid
• Groups
• Header
• Hint
• Input
• InputMask
• InputAccount
• InputCard
• InputDate
• InputDateRange
• InputDigital
• 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
• Whitespace
• Wizard

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

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

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

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

• Chrome (2 latest)
• Firefox (2 latest)
• Safari (2 latest)
• Yandex (2 latest)
• Edge (2 latest)