Использование дизайн-системы Plasma позволяет реализовать Canvas App как часть экосистемы виртуальных ассистентов семейства "Салют" и клиентские приложения B2B- и B2C-ориентированности. Все текущие приложения в экосистеме Salute реализованы с помощью Plasma.
- @salutejs/plasma-ui
- @salutejs/plasma-web
- @salutejs/plasma-b2c
- @salutejs/plasma-tokens
- @salutejs/plasma-tokens-web
- @salutejs/plasma-tokens-b2c
- @salutejs/plasma-icons
Пакет с набором готовых компонентов и утилит для создания Canvas App. Компоненты реализованы с помощью React. Для компонентов доступны Storybook и документация.
Пакет с набором готовых компонентов для создания веб-приложений направленных на B2B-сегмент. Документация и Storybook.
Пакет с набором готовых компонентов для создания веб-приложений ориентированных на B2C-сегмент. Документация и Storybook.
Пакеты с набором дизайн-токенов. В пакет входят типографические и цветовые константы. Дизайн-токены поставляются в качестве CSS custom propperties и JavaScript переменных. Перед использованием рекомендуется ознакомится с документацией по токенам.
Пакет с набором иконок, которые доступны к просмотру в хранилище, а также в Storybook и документации.
Canvas App
это web-приложение, для его создания вам потребуется:
Node.js
&npm
установкаCreate React App
– для быстрого создания основы вашего приложения. CRAReact
Как основа для web интерфейса. Погружение для новичков: https://ru.reactjs.org/tutorial/tutorial.html
После создания основы приложения:
npm i -S styled-components@5.1.1 @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons
Компоненты реализованы с помощью 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 '@salutejs/plasma-ui';
function App() {
return (
<div className="App">
<p>
<Button view="primary">Hello Plasma</Button>
</p>
</div>
);
}
export default App;
Более подробно можно ознакомиться на странице документации.
Разработка дизайн-системы Plasma ведется в репозитории https://github.com/salute-developers/plasma. Если вы хотите добавить новый компонент, вы можете прислать пулл-реквест следуя правилам разработки. Также вы можете завести задачу на создание нового компонента или описать некоректное поведение текущего.