@sberdevices/ui

Библиотека компонентов Plasma UI

Реализация компонентов для создания смартаппов.

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

Компоненты реализованы на typescript с помощью react и styled-components;

Использование данного пакета предполагает использование react & react-dom; Использование styled-components на проект не обязательно, также как и использование typescript. Но для того чтобы комопненты работали styled-components необходимо установить.

Установка пакета

$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc

Настройка

Подключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью DeviceThemeProvider:

// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';
import { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@sberdevices/plasma-tokens';

const DocumentStyle = createGlobalStyle`
    html:root {
        min-height: 100vh;
        color: ${text};
        background-color: ${background};
        background-image: ${gradient};
    }
`;
const ThemeStyle = createGlobalStyle(darkSber);
export const GlobalStyle = () => (
    <>
        <DocumentStyle />
        <ThemeStyle />
    </>
);

// index.tsx
import { DeviceThemeProvider } from '@sberdevices/ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства
import { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)
import { App } from './App';

ReactDOM.render(
    <DeviceThemeProvider>
        <GlobalStyle />
        <App />
    </DeviceThemeProvider>,
    document.getElementById('root'),
);

Подробнее о стилях и типографике.

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

Все компоненты доступны из папки components или напрямую из пакета:

// App.tsx
import { Container } from '@sberdevices/ui/components/Grid';
import { Button } from '@sberdevices/ui';

export const App = () => {
    return (
        <Container>
            <Button>Hello, Plasma!</Button>
        </Container>
    );
};

Библиотека предоставляет вспомогательную функциональность - utils, mixins, hocs, доступную в соответствующих директориях. Пример импорта:

import { animatedScrollToX } from '@sberdevices/ui/utils';
import { addFocus } from '@sberdevices/ui/mixins';
import { withAutoFocus } from '@sberdevices/ui/hocs';

Подробнее можно ознакомиться на страницах документации по hocs, mixins и utils.

Полезные ссылки:

Витрина с компонентами Storybook.

Документация.