Skip to main content

Введение

Plasma UI – библиотека с открытым исходным кодом, в которую входят компоненты дизайн-системы Plasma и вспомогательные утилиты для создания смартапов на React или в коде сценария с помощью разметки AML.

Библиотека написана на Typescript, а компоненты реализованы с применением styled-components.

Установка#

Plasma UI поддерживает версии React 16.8+ и styled-components 5.1+. Ее можно использовать в существующем проекте.

Установите React, ReactDOM и styled-components:

npm install react react-dom styled-components

Использовать styled-components и typescript в проекте не обязательно.

Установите библиотеку компонентов, библиотеку токенов и библиотеку иконок:

npm install @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons

Настройка#

Создайте компонент для подключения глобальных стилей и ротации цветовых тем:

GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';import { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSberimport {    text, // Цвет текста    background, // Цвет подложки    gradient, // Градиент} from '@sberdevices/plasma-tokens';
const DocumentStyle = createGlobalStyle`    html {        color: ${text};        background-color: ${background};        background-image: ${gradient};    }`;const ThemeStyle = createGlobalStyle(darkSber);
export const GlobalStyle = () => (    <>        <DocumentStyle />        <ThemeStyle />    </>);

Корень приложения#

В корне приложения вызовите компонент глобальных стилей GlobalStyle, а также с помощью DeviceThemeProvider подключите типографическую ситему:

  • Если вы используете Create React App, делайте вызов внутри src/index.tsx.
  • Если вы используете Next.js, создайте файл pages/_app.tsx и подключите стили в нем.

Для корректной работы server side rendering приложение нужно оберуть SSRProvider;

index.tsx
import { DeviceThemeProvider, SSRProvider } from '@sberdevices/plasma-ui';import { GlobalStyle } from './GlobalStyle';import { App } from './App';
ReactDOM.render(    <DeviceThemeProvider>        <SSRProvider>            <App />            <GlobalStyle />        </SSRProvider>    </DeviceThemeProvider>,    document.getElementById('root'),);

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

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

Не смотря на то, что все компоненты доступны из папки components, рекомендуется использовать их напрямую из пакета. Таким образом, обеспечивается работа tree shaking.

App.tsx
import { Container } from '@sberdevices/plasma-ui/components/Grid';import { Button } from '@sberdevices/plasma-ui';
export default function App() {    return (        <Container>            <Button>Hello, Plasma!</Button>        </Container>    );}

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

import { animatedScrollToX, addFocus, withAutoFocus } from '@sberdevices/plasma-ui';

Подробную информацию ищите в документации по hocs, mixins и utils.