Skip to content
/ plasma Public archive

💠 Дизайн-Система для создания навыков семейства Виртуальных Ассистентов "Салют"

License

Notifications You must be signed in to change notification settings

sberdevices/plasma

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Plasma

plasma

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

Состав:

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

plasma-ui

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

npm ui

plasma-web

Пакет с набором готовых компонентов для создания веб-приложений направленных на B2B-сегмент. Документация и Storybook.

npm ui

plasma-b2c

Пакет с набором готовых компонентов для создания веб-приложений ориентированных на B2C-сегмент. Документация и Storybook.

npm ui

plasma-tokens, plasma-tokens-web, plasma-tokens-b2c

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

npm ui npm ui npm ui

plasma-icons

Пакет с набором иконок, которые доступны к просмотру в хранилище, а также в Storybook и документации.

npm ui

Быстрый старт

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

Установка

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

npm i -S styled-components @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/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 '@sberdevices/plasma-ui';

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

export default App;

Более подробно можно ознакомиться на странице документации.

Обратная связь

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