@salutejs/sdds-sbcom 0.370.0-canary.3206.36552149682.0 → 0.370.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 +50 -215
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,268 +1,103 @@
|
|
|
1
|
-
# SDDS
|
|
1
|
+
# Библиотека компонентов для вертикали SDDS SBCOM
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://github.com/salute-developers/plasma/blob/master/LICENSE.txt)
|
|
4
|
+
[](https://www.npmjs.com/package/@salutejs/sdds-sbcom)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
Реализация компонентов для создания веб-приложений.
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в виде предсобранного CSS.
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
## Ссылки
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
- [Документация](https://plasma.sberdevices.ru/sdds-sbcom/) — гайды, список компонентов с примерами и API
|
|
14
|
+
- [Задать вопрос или сообщить о проблеме](https://github.com/salute-developers/plasma/issues)
|
|
12
15
|
|
|
13
|
-
|
|
16
|
+
## Установка
|
|
17
|
+
|
|
18
|
+
Требуются `react` и `react-dom` версии `16.13.1` или выше:
|
|
14
19
|
|
|
15
20
|
```bash
|
|
21
|
+
$ npm install --save react react-dom
|
|
16
22
|
$ npm install --save @salutejs/sdds-sbcom @salutejs-ds/sdds_sbcom
|
|
17
23
|
```
|
|
18
24
|
|
|
19
|
-
|
|
25
|
+
## Варианты поставки
|
|
26
|
+
|
|
27
|
+
Единственный вариант поставки — предсобранный CSS.
|
|
20
28
|
|
|
21
|
-
|
|
29
|
+
| Точка входа | Реализация | Дополнительные зависимости |
|
|
30
|
+
| ----------------------- | ------------------ | --------------------------- |
|
|
31
|
+
| `@salutejs/sdds-sbcom` | предсобранный CSS | нет |
|
|
22
32
|
|
|
23
33
|
```jsx
|
|
24
34
|
import { Button } from '@salutejs/sdds-sbcom';
|
|
25
|
-
|
|
26
|
-
export const App = () => {
|
|
27
|
-
return (
|
|
28
|
-
<>
|
|
29
|
-
<Button>Hello, sbcom!</Button>
|
|
30
|
-
<StyledP>Token usage example</StyledP>
|
|
31
|
-
</>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
34
35
|
```
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
Beta-компоненты доступны из точки входа `@salutejs/sdds-sbcom/beta`. Подробнее — в [документации](https://plasma.sberdevices.ru/sdds-sbcom/beta/popover/).
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN**
|
|
41
|
-
|
|
42
|
-
Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме.
|
|
39
|
+
## Подключение шрифтов
|
|
43
40
|
|
|
44
|
-
|
|
41
|
+
Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
|
|
45
42
|
|
|
46
|
-
|
|
43
|
+
Добавьте два css-файла внутрь тега `<head>`.
|
|
47
44
|
|
|
48
45
|
```html
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
/>
|
|
55
|
-
<title>...</title>
|
|
56
|
-
</head>
|
|
57
|
-
<body>
|
|
58
|
-
...
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
46
|
+
<link
|
|
47
|
+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400..700&display=swap"
|
|
48
|
+
rel="stylesheet"
|
|
49
|
+
/>
|
|
50
|
+
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
|
|
61
51
|
```
|
|
62
52
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
```tsx
|
|
66
|
-
import Head from 'next/head';
|
|
53
|
+
## Подключение темы
|
|
67
54
|
|
|
68
|
-
|
|
55
|
+
Тема подключается один раз в корне приложения.
|
|
69
56
|
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<>
|
|
73
|
-
<Head>
|
|
74
|
-
<title>Next App with sdds-sbcom components</title>
|
|
75
|
-
<link
|
|
76
|
-
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400..700&display=swap"
|
|
77
|
-
rel="stylesheet"
|
|
78
|
-
/>
|
|
79
|
-
</Head>
|
|
80
|
-
<div>
|
|
81
|
-
<main>
|
|
82
|
-
<div>
|
|
83
|
-
<H2> Salute </H2>
|
|
84
|
-
<Button text="Hello" />
|
|
85
|
-
</div>
|
|
86
|
-
</main>
|
|
87
|
-
</div>
|
|
88
|
-
</>
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
```
|
|
57
|
+
> **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
|
|
92
58
|
|
|
93
|
-
|
|
59
|
+
Тема включает в себя цветовые и типографические токены.
|
|
94
60
|
|
|
95
|
-
|
|
61
|
+
Доступны светлая и тёмная темы — `sdds_sbcom__light` и `sdds_sbcom__dark`.
|
|
96
62
|
|
|
97
|
-
|
|
98
|
-
-
|
|
63
|
+
```jsx
|
|
64
|
+
import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
|
|
65
|
+
```
|
|
99
66
|
|
|
100
|
-
|
|
67
|
+
Переключение темы в рантайме и подключение через css-модули описаны в [документации](https://plasma.sberdevices.ru/sdds-sbcom/).
|
|
101
68
|
|
|
102
|
-
|
|
103
|
-
@import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
|
|
104
|
-
```
|
|
69
|
+
## Использование компонентов
|
|
105
70
|
|
|
106
71
|
```jsx
|
|
107
|
-
|
|
72
|
+
// App.tsx
|
|
108
73
|
import { Button, BodyL } from '@salutejs/sdds-sbcom';
|
|
74
|
+
import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
|
|
109
75
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const App = () => {
|
|
76
|
+
export const App = () => {
|
|
113
77
|
return (
|
|
114
78
|
<>
|
|
115
|
-
<BodyL>Hello
|
|
116
|
-
<Button
|
|
79
|
+
<BodyL>Hello, SDDS SBCOM!</BodyL>
|
|
80
|
+
<Button>Кнопка</Button>
|
|
117
81
|
</>
|
|
118
82
|
);
|
|
119
83
|
};
|
|
120
|
-
|
|
121
|
-
export default App;
|
|
122
84
|
```
|
|
123
85
|
|
|
124
|
-
|
|
86
|
+
Дизайн-токены доступны в виде js-переменных из `@salutejs-ds/sdds_sbcom/theme/tokens`:
|
|
125
87
|
|
|
126
88
|
```jsx
|
|
127
|
-
import
|
|
128
|
-
import { Switch } from '@salutejs/sdds-sbcom';
|
|
129
|
-
|
|
130
|
-
import './index.css';
|
|
131
|
-
|
|
132
|
-
const App = () => {
|
|
133
|
-
const [theme, setTheme] = useState('light');
|
|
89
|
+
import { textPrimary } from '@salutejs-ds/sdds_sbcom/theme/tokens';
|
|
134
90
|
|
|
135
|
-
|
|
136
|
-
document.documentElement.className = theme;
|
|
137
|
-
}, [theme]);
|
|
138
|
-
|
|
139
|
-
return (
|
|
140
|
-
<div className="wrapper">
|
|
141
|
-
<Switch
|
|
142
|
-
label={`app theme: ${theme}`}
|
|
143
|
-
onChange={() => {
|
|
144
|
-
setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
|
|
145
|
-
}}
|
|
146
|
-
/>
|
|
147
|
-
</div>
|
|
148
|
-
);
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
export default App;
|
|
91
|
+
<p style={{ color: textPrimary }}>Пример использования токена</p>;
|
|
152
92
|
```
|
|
153
93
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
```css
|
|
157
|
-
@import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Возможные дополнительные настройки в проекте для работы с css:
|
|
161
|
-
|
|
162
|
-
Возможные дополнительные настройки bundle tools для проекта:
|
|
94
|
+
## SSR и Next.js
|
|
163
95
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
<a href="https://webpack.js.org/loaders/css-loader/">webpack + css</a>
|
|
167
|
-
</li>
|
|
168
|
-
<li>
|
|
169
|
-
<a href="https://vite.dev/guide/features.html#css-pre-processors">vite</a>
|
|
170
|
-
</li>
|
|
171
|
-
</ul>
|
|
172
|
-
|
|
173
|
-
## Советы при работе с NextJS
|
|
174
|
-
|
|
175
|
-
Next не разрешает импорт CSS из сторонних модулей, поэтому важно не забыть добавить наши библиотеки в `next.config.js` следующим образом:
|
|
96
|
+
- Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
|
|
97
|
+
- Добавьте пакеты в `transpilePackages` в `next.config.js`:
|
|
176
98
|
|
|
177
99
|
```js
|
|
178
100
|
const nextConfig = {
|
|
179
|
-
|
|
180
|
-
transpilePackages: [
|
|
181
|
-
'@salutejs/sdds-sbcom',
|
|
182
|
-
'@salutejs/plasma-new-hope',
|
|
183
|
-
'@salutejs/plasma-icons',
|
|
184
|
-
'@salutejs-ds/sdds_sbcom',
|
|
185
|
-
],
|
|
101
|
+
transpilePackages: ['@salutejs/sdds-sbcom', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons', '@salutejs-ds/sdds_sbcom'],
|
|
186
102
|
};
|
|
187
103
|
```
|
|
188
|
-
|
|
189
|
-
**RSC - React Server Components (App router)**
|
|
190
|
-
|
|
191
|
-
Библиотека поддерживает работу с **RSC** только при **явном использовании** директивы **'use client'**.
|
|
192
|
-
|
|
193
|
-
```ts
|
|
194
|
-
'use client'
|
|
195
|
-
|
|
196
|
-
import { Button } from '@salutejs/sdds-sbcom';
|
|
197
|
-
|
|
198
|
-
...
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## Токены
|
|
202
|
-
|
|
203
|
-
Все `css` токены завернуты в `js` переменные для более удобного доступа:
|
|
204
|
-
|
|
205
|
-
```js
|
|
206
|
-
/** Основной цвет текста */
|
|
207
|
-
export const textPrimary = 'var(--text-primary, #F5F5F5)';
|
|
208
|
-
/** Основной фон */
|
|
209
|
-
export const backgroundPrimary = 'var(--background-primary, #000000)';
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
### Способы подключения
|
|
213
|
-
|
|
214
|
-
```tsx
|
|
215
|
-
import { textPrimary, h5 } from '@salutejs-ds/sdds_sbcom';
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
## Типографика
|
|
219
|
-
|
|
220
|
-
Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
|
|
221
|
-
|
|
222
|
-
```ts
|
|
223
|
-
import { BodyL, DsplL, H3 } from '@salutejs/sdds-sbcom';
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
### Токены типографики на примере компонента `DsplL`
|
|
227
|
-
|
|
228
|
-
Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.
|
|
229
|
-
|
|
230
|
-
```tsx
|
|
231
|
-
import { CSSObject } from 'styled-components';
|
|
232
|
-
|
|
233
|
-
export const dsplL = ({
|
|
234
|
-
fontFamily: 'var(--plasma-typo-dspl-l-font-family)',
|
|
235
|
-
fontSize: 'var(--plasma-typo-dspl-l-font-size)',
|
|
236
|
-
fontStyle: 'var(--plasma-typo-dspl-l-font-style)',
|
|
237
|
-
fontWeight: 'var(--plasma-typo-dspl-l-font-weight)',
|
|
238
|
-
letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)',
|
|
239
|
-
lineHeight: 'var(--plasma-typo-dspl-l-line-height)',
|
|
240
|
-
} as unknown) as CSSObject;
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
## Как разрабатывать
|
|
244
|
-
|
|
245
|
-
Ветка `next-sbcom` - это master + ваши **срочные** изменения
|
|
246
|
-
|
|
247
|
-
#### Создание pull request для next-sbcom
|
|
248
|
-
|
|
249
|
-
- создаем ветку от next-sbcom
|
|
250
|
-
- создаем pull request в next-sbcom
|
|
251
|
-
|
|
252
|
-
На этом этапе мы создаем изменения, которые лягут в основу новой версии за тегом для npm `@next-sbcom`
|
|
253
|
-
|
|
254
|
-
Такой подход нужен в первую очередь для быстрых независимых релизов.
|
|
255
|
-
|
|
256
|
-
#### Создание pull request для dev
|
|
257
|
-
|
|
258
|
-
- создаем ветку от dev
|
|
259
|
-
- создаем pull request в dev
|
|
260
|
-
|
|
261
|
-
На этом этапе мы дублируем изменения (из next-sbcom) которые лягут в master ветку вашей вертикали.
|
|
262
|
-
|
|
263
|
-
Это нужно для синхронизации мастера и next-sbcom.
|
|
264
|
-
|
|
265
|
-
#### Наименование commit, branch
|
|
266
|
-
|
|
267
|
-
branch - `fix-update-tokens`
|
|
268
|
-
commit - `fix: update tokens for Select`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/sdds-sbcom",
|
|
3
|
-
"version": "0.370.0-
|
|
3
|
+
"version": "0.370.0-dev.0",
|
|
4
4
|
"description": "Salute Design System / React UI kit for SDDS SBCOM web applications",
|
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
|
6
6
|
"publishConfig": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@salutejs-ds/sdds_sbcom": "0.1.20",
|
|
44
|
-
"@salutejs/plasma-new-hope": "0.382.0-
|
|
44
|
+
"@salutejs/plasma-new-hope": "0.382.0-dev.0",
|
|
45
45
|
"classnames": "2.5.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
@@ -60,11 +60,11 @@
|
|
|
60
60
|
"@rollup/plugin-babel": "^6.0.4",
|
|
61
61
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
62
62
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
63
|
-
"@salutejs/plasma-colors": "0.
|
|
64
|
-
"@salutejs/plasma-core": "1.245.0-
|
|
65
|
-
"@salutejs/plasma-cy-utils": "0.175.0-
|
|
66
|
-
"@salutejs/plasma-icons": "1.
|
|
67
|
-
"@salutejs/plasma-sb-utils": "0.246.0-
|
|
63
|
+
"@salutejs/plasma-colors": "0.25.0-dev.0",
|
|
64
|
+
"@salutejs/plasma-core": "1.245.0-dev.0",
|
|
65
|
+
"@salutejs/plasma-cy-utils": "0.175.0-dev.0",
|
|
66
|
+
"@salutejs/plasma-icons": "1.252.0-dev.0",
|
|
67
|
+
"@salutejs/plasma-sb-utils": "0.246.0-dev.0",
|
|
68
68
|
"@types/node": "16.7.13",
|
|
69
69
|
"@types/react": "18.0.28",
|
|
70
70
|
"@types/react-dom": "18.0.11",
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"sideEffects": [
|
|
107
107
|
"*.css"
|
|
108
108
|
],
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "507075774f11d105e198f069a8b367878b859d12"
|
|
110
110
|
}
|