Дизайн-система Plasma


Plasma — это дизайн-система для создания Canvas App, которые будут выглядеть как часть экосистемы виртуальных ассистентов. Plasma основывается на React и позволяет упростить разработку внешнего вида приложений.

Дизайн-система включает в себя следующие пакеты:

  • plasma-tokens — содержит набор дизайн-токенов, типографических и цветовых констант. Токены представлены в виде JS-переменных и переменных CSS.
  • ui — содержит набор готовых React-компонентов для создания Canvas App. Вы можете ознакомиться с доступными компонентами в документации и на демонстрационном стенде. Перед использованием компонентов, рекомендуется изучить пакет plasma-tokens.

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

Чтобы начать работу с Plasma:

  1. Создайте основу приложения с помощью команды Create React App:

    npx create-react-app my-app
  2. Перейдите в приложение:

    cd my-app
  3. Установите дизайн-систему с зависимостью на styled-components:

    npm i -S styled-components @sberdevices/ui@rc @sberdevices/plasma-tokens@rc
  4. Создайте приложение в файле ./src/App.js:

    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;

Подробную информацию об установке и использовании дизайн-системы Plasma вы найдёте в открытом репозитории на GitHub.