Библиотека компонентов 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 @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons

Настройка

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

// GlobalStyle.tsx
import { createGlobalStyle } from 'styled-components';

// Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber
import { darkSber } from '@salutejs/plasma-tokens/themes';

import {
    text, // Цвет текста
    background, // Цвет подложки
    gradient, // Градиент
} from '@salutejs/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 />
    </>
);

// Типографика, имеющая размеры, зависимые от типа устройства
import { DeviceThemeProvider } from '@salutejs/plasma-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 '@salutejs/plasma-ui/components/Grid';
import { Button } from '@salutejs/plasma-ui';

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

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

import { animatedScrollToX } from '@salutejs/plasma-ui/utils';
import { addFocus } from '@salutejs/plasma-ui/mixins';
import { withAutoFocus } from '@salutejs/plasma-ui/hocs';

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

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

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

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

Репозиторий.