Plasma

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

Состав

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

plasma-ui

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

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

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

plasma-icons

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

Начальная установка

Выполните команды из корня репозитория в указанной последовательности:

npm install --ignore-scripts
npm run bootstrap
npm run build

Для запуска component-тестов должен быть установлен и запущен Docker.

Тесты

Все Cypress component-тесты:

npm test

Component-тесты запускаются в закреплённом Docker-образе, чтобы visual snapshots были одинаковыми локально и в CI. Можно ограничить запуск одним или несколькими компонентами:

COMPONENTS=Button npm test
COMPONENTS=Button,Grid npm test

Для обновления visual snapshots:

CYPRESS_updateSnapshots=true npm test

CI запускает npm test для любого pull request и вручную через GitHub Actions. При падении Cypress диффы и screenshots сохраняются как artifact workflow.

Для любого pull request CI также собирает Storybook. Для внутренних веток репозитория сборка публикуется в S3 по пути pr/plasma-ui/pr-<номер PR>/ui-storybook/, а ссылка добавляется в sticky-комментарий к PR. После закрытия или слияния PR его Storybook-превью удаляется из S3. Для fork-PR выполняется только сборка без доступа к секретам.

Публикация в npm

Для внутренних pull request в main и dev публикуется canary-версия. После влития изменений в main автоматически публикуется latest-версия. Release candidate можно запустить вручную через workflow Publish npm; он собирается из ветки dev.

Тип повышения версии определяется conventional commits: fix повышает patch, feat — minor, а BREAKING CHANGE — major. Затем Lerna обновляет independent-версии изменённых пакетов из packages/, создаёт commit и tags и публикует их в npm. Все пакеты из utils/ помечены как private и не публикуются. Для публикации используется встроенный github.token; из repository secrets нужен только NPM_REGISTRY_TOKEN.

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

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

• Node.js & npm установка
• Create React App – для быстрого создания основы вашего приложения. CRA
• React Как основа для web интерфейса. Погружение для новичков: https://ru.reactjs.org/tutorial/tutorial.html

Установка

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

npm i -S [email protected] @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. Если вы хотите добавить новый компонент, вы можете прислать pull request. Также вы можете завести задачу на создание нового компонента или описать некорректное поведение текущего.