Использование дизайн-системы Plasma позволяет реализовать Canvas App как часть экосистемы виртуальных ассистентов семейства "Салют". Все текущие приложения в экосистеме реализованы с помощью Plasma.

• @sberdevices/ui
• @sberdevices/plasma-tokens
• @sberdevices/plasma-icons

Пакет с набором дизайн-токенов. В пакет входят типографические и цветовые константы. Дизайн-токены поставляются в качестве css custom propperties и js переменных. Перед использованием ui рекомендуется ознакомится с содержимым этого пакета

Пакет с набором готовых компонентов для создания Canvas App. Компоненты реализованы с помощью React. Для компонентов доступна витрина и документация.

Пакет с набором иконок для совместного использования с пакетом ui. Все иконки также доступны к просмотру в витрине и документации.

Canvas App это web-приложение, для его создания вам потребуется:

• Node.js & npm установка

• Create React App – для быстрого создания основы вашего приложения. CRA

• React Как основа для web интерфейса. Погружение для новичков: https://ru.reactjs.org/tutorial/tutorial.html

После создания основы приложения:

npm i -S styled-components @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc

Компоненты реализованы с помощью styled-components. Поэтому необходимо поставить их в зависимость.

NB: Если вы решили не использовать Create React App, то вам потребуется установить react и react-dom:

npm i -S react react-dom

// ./src/App.jsx
import React from 'react';

import { Button } from '@sberdevices/ui/components/Button/Button';

function App() {
    return (
        <div className="App">
            <p>
                <Button view="primary">Hello Plasma</Button>
            </p>
        </div>
    );
}

export default App;

Для каждого компонента есть документация описывающая его поведение и модификации. Документация для компонента Button из примера.

Разработка plasma ведется в репозитории https://github.com/sberdevices/plasma. Если вы хотите добавить новый компонент, вы можете прислать пулл-реквест следуя правилам разработки. Также вы можете завести задачу на создание нового компонента или описать некоректное поведение текущего.