Введение

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

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

Установка

Plasma Web поддерживает версии React 16.8+ и styled-components ^5.1.1 (на данный момент 6-я версия не поддерживается из-за отсутствия необходимых типов). Ее можно использовать в существующем проекте.

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

npm install react react-dom styled-components@5.1.1

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

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

npm install @salutejs/plasma-web @salutejs/plasma-icons

Настройка

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

GlobalStyle.tsx

import { createGlobalStyle } from 'styled-components';
import { standard } from '@salutejs/plasma-typo';
import { light } from '@salutejs/plasma-tokens-web/themes';
import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@salutejs/plasma-tokens-web';

const DocumentStyle = createGlobalStyle`
    html {
        color: ${text};
        background-color: ${background};
        background-image: ${gradient};
    }
`;
const ThemeStyle = createGlobalStyle(light);
const TypoStyle = createGlobalStyle(standard);

export const GlobalStyle = () => (
    <>
        <DocumentStyle />
        <ThemeStyle />
        <TypoStyle />
    </>
);

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

В корне приложения вызовите компонент глобальных стилей GlobalStyle:

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

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

Create React App

index.tsx

import { SSRProvider } from '@salutejs/plasma-web';
import { GlobalStyle } from './GlobalStyle';
import { App } from './App';

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

Next.js

pages/_app.tsx

import type { AppProps } from 'next/app';
import { SSRProvider } from '@salutejs/plasma-web';
import { GlobalStyle } from './GlobalStyle';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <SSRProvider>
            <Component {...pageProps} />
            <GlobalStyle />
        </SSRProvider>
    );
}

export default MyApp;

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

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

App.tsx

import { Container } from '@salutejs/plasma-web/components/Grid';
import { Button } from '@salutejs/plasma-web';

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

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

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