Novel Preposterous Mockery

    @sberdevices/plasma-ui
    TypeScript icon, indicating that this package has built-in type declarations

    1.95.0 • Public • Published

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

    Настройка

    Подключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью 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/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 '@sberdevices/plasma-ui/components/Grid';
    import { Button } from '@sberdevices/plasma-ui';
    
    export const App = () => {
        return (
            <Container>
                <Button>Hello, Plasma!</Button>
            </Container>
        );
    };

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

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

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

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

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

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

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

    Keywords

    none

    Install

    npm i @sberdevices/plasma-ui

    DownloadsWeekly Downloads

    1,353

    Version

    1.95.0

    License

    Sber Public License at-nc-sa v.2

    Unpacked Size

    2.64 MB

    Total Files

    944

    Last publish

    Collaborators

    • awinogradov
    • turanchoks
    • sberdevices-frontend