@sberdevices/plasma-b2c

Библиотека компонентов Plasma B2C

Реализация компонентов для создания веб-приложений.

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

Компоненты реализованы на 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-b2c @sberdevices/plasma-icons @sberdevices/plasma-tokens-b2c @sberdevices/plasma-typo

Тема и типографика

Для корректной работы необходимо создать глобальные стили:

// Main.tsx
import React from 'react';
import { createGlobalStyle } from 'styled-components';

import { dark } from '@sberdevices/plasma-tokens-b2c/themes';
import { standard as standardTypo, compatible as compatibleTypo } from '@sberdevices/plasma-typo';

import { App } from './App.tsx';

const TypoStyle = createGlobalStyle(standardTypo);
const CompatibleTypoStyle = createGlobalStyle(compatibleTypo);

const Theme = createGlobalStyle(dark);

export const Main = () => {
    const Theme = themes[context.globals.theme];

    return (
        <>
            <TypoStyle />
            <CompatibleTypoStyle />
            <Theme />

            <App />
        </>
    );
};

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

// App.tsx
import { Button } from '@sberdevices/plasma-b2c';

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