Использование данного пакета предполагает использование 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.

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

FAQs

What is @sberdevices/ui?

Is @sberdevices/ui popular?

Is @sberdevices/ui well maintained?

Last updated on 31 Mar 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket