@salutejs/plasma-web 1.640.0-canary.3206.36552149682.0 → 1.640.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +149 -16
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,36 +1,169 @@
|
|
|
1
|
-
# Библиотека компонентов
|
|
1
|
+
# Библиотека компонентов "PLASMA WEB"
|
|
2
|
+
|
|
3
|
+
[](https://github.com/salute-developers/plasma/blob/master/LICENSE.txt)
|
|
4
|
+
[](https://www.npmjs.com/package/@salutejs/plasma-web)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://www.npmjs.com/package/@salutejs/plasma-themes)
|
|
2
7
|
|
|
3
8
|
Реализация компонентов для создания веб-приложений.
|
|
4
9
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в двух вариантах:
|
|
11
|
+
|
|
12
|
+
- на [styled-components](https://styled-components.com/) (по умолчанию),
|
|
13
|
+
- на предсобранном CSS.
|
|
8
14
|
|
|
9
|
-
##
|
|
15
|
+
## Ссылки
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
- [Документация](https://plasma.sberdevices.ru/web/) — гайды, список компонентов с примерами и API
|
|
18
|
+
- [Подключение в Next.js](https://plasma.sberdevices.ru/web/next/)
|
|
19
|
+
- [Задать вопрос или сообщить о проблеме](https://github.com/salute-developers/plasma/issues)
|
|
12
20
|
|
|
13
|
-
|
|
14
|
-
Использование `styled-components` на проект не обязательно, также как и использование `typescript`.
|
|
15
|
-
Но для того чтобы комопненты работали `styled-components` необходимо установить.
|
|
21
|
+
## Установка
|
|
16
22
|
|
|
17
|
-
|
|
23
|
+
Требуются `react` и `react-dom` версии `16.13.1` или выше:
|
|
18
24
|
|
|
19
25
|
```bash
|
|
20
26
|
$ npm install --save react react-dom
|
|
21
|
-
$ npm install --save
|
|
22
|
-
|
|
27
|
+
$ npm install --save @salutejs/plasma-web @salutejs/plasma-themes
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Дальнейшие шаги зависят от выбранного [варианта поставки](#варианты-поставки).
|
|
31
|
+
|
|
32
|
+
Для варианта на styled-components:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
$ npm install --save styled-components@5.3.1
|
|
23
36
|
```
|
|
24
37
|
|
|
25
|
-
|
|
38
|
+
CSS-вариант дополнительных зависимостей не требует.
|
|
39
|
+
|
|
40
|
+
## Варианты поставки
|
|
26
41
|
|
|
27
|
-
|
|
42
|
+
> **Примечание:** Вариант на styled-components является поставкой по умолчанию.
|
|
43
|
+
|
|
44
|
+
Один и тот же набор компонентов доступен из двух точек входа:
|
|
45
|
+
|
|
46
|
+
| Точка входа | Реализация | Дополнительные зависимости |
|
|
47
|
+
| --------------------------- | ------------------ | --------------------------- |
|
|
48
|
+
| `@salutejs/plasma-web` | styled-components | `styled-components@5.3.1` |
|
|
49
|
+
| `@salutejs/plasma-web/css` | предсобранный CSS | нет |
|
|
28
50
|
|
|
29
51
|
```jsx
|
|
30
|
-
// App.tsx
|
|
31
52
|
import { Button } from '@salutejs/plasma-web';
|
|
53
|
+
// или
|
|
54
|
+
import { Button } from '@salutejs/plasma-web/css';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Подключение шрифтов
|
|
58
|
+
|
|
59
|
+
Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
|
|
60
|
+
|
|
61
|
+
Добавьте три css-файла внутрь тега `<head>`.
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
|
|
65
|
+
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />
|
|
66
|
+
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Подключение темы
|
|
70
|
+
|
|
71
|
+
Тема подключается один раз в корне приложения.
|
|
72
|
+
|
|
73
|
+
> **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
|
|
74
|
+
|
|
75
|
+
Тема включает в себя цветовые и типографические токены.
|
|
76
|
+
|
|
77
|
+
Доступны светлая и тёмная темы — `plasma_web__light` и `plasma_web__dark`.
|
|
78
|
+
|
|
79
|
+
### Через импорт css-файла
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import '@salutejs/plasma-themes/css/plasma_web__light.css';
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Через styled-components
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
import { createGlobalStyle } from 'styled-components';
|
|
89
|
+
import { plasma_web__light } from '@salutejs/plasma-themes';
|
|
90
|
+
|
|
91
|
+
const Theme = createGlobalStyle(plasma_web__light);
|
|
92
|
+
|
|
93
|
+
// вызовите <Theme /> в корне приложения
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Переключение темы в рантайме и подключение через css-модули описаны в [документации](https://plasma.sberdevices.ru/web/).
|
|
97
|
+
|
|
98
|
+
## Использование компонентов
|
|
99
|
+
|
|
100
|
+
```jsx
|
|
101
|
+
// App.tsx
|
|
102
|
+
import { Button, BodyL } from '@salutejs/plasma-web';
|
|
103
|
+
import '@salutejs/plasma-themes/css/plasma_web__light.css';
|
|
32
104
|
|
|
33
105
|
export const App = () => {
|
|
34
|
-
return
|
|
106
|
+
return (
|
|
107
|
+
<>
|
|
108
|
+
<BodyL>Hello, Plasma!</BodyL>
|
|
109
|
+
<Button>Кнопка</Button>
|
|
110
|
+
</>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Дизайн-токены доступны в виде js-переменных:
|
|
116
|
+
|
|
117
|
+
- базовый набор — из `@salutejs/plasma-themes/tokens`
|
|
118
|
+
- уникальные токены темы — из `@salutejs/plasma-themes/tokens/plasma_web`.
|
|
119
|
+
|
|
120
|
+
```jsx
|
|
121
|
+
import { textAccent } from '@salutejs/plasma-themes/tokens';
|
|
122
|
+
|
|
123
|
+
<p style={{ color: textAccent }}>Пример использования токена</p>;
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## SSR и Next.js
|
|
127
|
+
|
|
128
|
+
- Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
|
|
129
|
+
- Для CSS-варианта поставки добавьте пакеты в `transpilePackages` в `next.config.js`:
|
|
130
|
+
|
|
131
|
+
```js
|
|
132
|
+
const nextConfig = {
|
|
133
|
+
transpilePackages: ['@salutejs/plasma-web', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons'],
|
|
35
134
|
};
|
|
36
135
|
```
|
|
136
|
+
|
|
137
|
+
Подробности — в [гайде по Next.js](https://plasma.sberdevices.ru/web/next/).
|
|
138
|
+
|
|
139
|
+
## MCP-сервер для AI-агентов
|
|
140
|
+
|
|
141
|
+
> **Примечание**: Поддерживаются версии библиотеки начиная с `1.613.0` — нужная указывается параметром `--version`.
|
|
142
|
+
|
|
143
|
+
Библиотека предоставляет [MCP-сервер](https://plasma.sberdevices.ru/web/how-to-mcp/) `@salutejs/sdds-mcp` — через него LLM-агент (Claude Code, Cursor и др.) получает актуальную документацию:
|
|
144
|
+
|
|
145
|
+
- список компонентов
|
|
146
|
+
- описание props
|
|
147
|
+
- примеры использования
|
|
148
|
+
- токены и гайды.
|
|
149
|
+
|
|
150
|
+
Сервер работает по `stdio`:
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
npx -y @salutejs/sdds-mcp@latest --lib plasma-web
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Если агент настраивается через конфигурацию, используйте шаблон:
|
|
157
|
+
|
|
158
|
+
```json
|
|
159
|
+
{
|
|
160
|
+
"mcpServers": {
|
|
161
|
+
"plasma-web": {
|
|
162
|
+
"command": "npx",
|
|
163
|
+
"args": ["-y", "@salutejs/sdds-mcp@latest", "--lib", "plasma-web"]
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
Подробности и список инструментов — в [гайде по MCP](https://plasma.sberdevices.ru/web/how-to-mcp/).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-web",
|
|
3
|
-
"version": "1.640.0-
|
|
3
|
+
"version": "1.640.0-dev.0",
|
|
4
4
|
"description": "Salute Design System / React UI kit for web applications",
|
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
|
6
6
|
"publishConfig": {
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"styled-components": "^5.1.1"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@salutejs/plasma-core": "1.245.0-
|
|
45
|
-
"@salutejs/plasma-hope": "1.392.0-
|
|
46
|
-
"@salutejs/plasma-new-hope": "0.382.0-
|
|
47
|
-
"@salutejs/plasma-themes": "0.
|
|
48
|
-
"@salutejs/plasma-tokens-b2b": "1.
|
|
49
|
-
"@salutejs/plasma-tokens-b2c": "0.
|
|
50
|
-
"@salutejs/plasma-tokens-web": "1.
|
|
51
|
-
"@salutejs/plasma-typo": "0.
|
|
44
|
+
"@salutejs/plasma-core": "1.245.0-dev.0",
|
|
45
|
+
"@salutejs/plasma-hope": "1.392.0-dev.0",
|
|
46
|
+
"@salutejs/plasma-new-hope": "0.382.0-dev.0",
|
|
47
|
+
"@salutejs/plasma-themes": "0.66.0-dev.0",
|
|
48
|
+
"@salutejs/plasma-tokens-b2b": "1.68.0-dev.0",
|
|
49
|
+
"@salutejs/plasma-tokens-b2c": "0.79.0-dev.0",
|
|
50
|
+
"@salutejs/plasma-tokens-web": "1.83.0-dev.0",
|
|
51
|
+
"@salutejs/plasma-typo": "0.56.0-dev.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@babel/cli": "7.24.1",
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
"@rollup/plugin-babel": "6.0.4",
|
|
64
64
|
"@rollup/plugin-commonjs": "25.0.7",
|
|
65
65
|
"@rollup/plugin-node-resolve": "15.2.3",
|
|
66
|
-
"@salutejs/plasma-colors": "0.
|
|
67
|
-
"@salutejs/plasma-cy-utils": "0.175.0-
|
|
68
|
-
"@salutejs/plasma-icons": "1.
|
|
69
|
-
"@salutejs/plasma-sb-utils": "0.246.0-
|
|
66
|
+
"@salutejs/plasma-colors": "0.25.0-dev.0",
|
|
67
|
+
"@salutejs/plasma-cy-utils": "0.175.0-dev.0",
|
|
68
|
+
"@salutejs/plasma-icons": "1.252.0-dev.0",
|
|
69
|
+
"@salutejs/plasma-sb-utils": "0.246.0-dev.0",
|
|
70
70
|
"@types/node": "16.7.13",
|
|
71
71
|
"@types/react": "18.0.28",
|
|
72
72
|
"@types/react-dom": "18.0.11",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"sideEffects": [
|
|
112
112
|
"*.css"
|
|
113
113
|
],
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "507075774f11d105e198f069a8b367878b859d12"
|
|
115
115
|
}
|