@snack-uikit/toaster 0.11.21-preview-d1ce0cc3.0 → 0.11.21
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/CHANGELOG.md +10 -0
- package/README.md +154 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## <small>0.11.21 (2026-01-19)</small>
|
|
7
|
+
|
|
8
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
9
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
10
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
6
16
|
## <small>0.11.20 (2025-11-28)</small>
|
|
7
17
|
|
|
8
18
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -6,6 +6,160 @@
|
|
|
6
6
|
|
|
7
7
|
[Changelog](./CHANGELOG.md)
|
|
8
8
|
|
|
9
|
+
## Description
|
|
10
|
+
|
|
11
|
+
- Пакет `@snack-uikit/toaster` предоставляет систему уведомлений (тостеров) для отображения временных сообщений пользователю: системных событий, результатов действий пользователя и прогресса загрузки файлов.
|
|
12
|
+
- Компоненты автоматически управляют жизненным циклом уведомлений (автозакрытие, позиционирование, лимит количества), поддерживают программное создание, обновление и закрытие через объект `toaster`, а также работают с разными визуальными вариантами (appearance) для передачи типа сообщения.
|
|
13
|
+
- Каждый тип тостера предназначен для своего сценария: `ToastSystemEvent` — для важных системных уведомлений с заголовком и описанием, `ToastUserAction` — для кратких сообщений о результатах действий пользователя, `ToastUpload` — для отслеживания прогресса загрузки файлов с возможностью управления процессом.
|
|
14
|
+
|
|
15
|
+
## ToastSystemEvent
|
|
16
|
+
|
|
17
|
+
### Description
|
|
18
|
+
|
|
19
|
+
- `ToastSystemEvent` — компонент для отображения системных уведомлений о важных событиях приложения (успешные операции, ошибки, предупреждения, информационные сообщения).
|
|
20
|
+
- Поддерживает **разные типы статусов** через проп `appearance` (neutral, success, error, errorCritical, warning) с соответствующей иконкой и цветовой схемой.
|
|
21
|
+
- Позволяет задать **заголовок и описание** с автоматическим усечением длинных текстов (заголовок до 2 строк, описание до 4 строк).
|
|
22
|
+
- Может отображать **прогресс-бар** (`progressBar`), показывающий оставшееся время до автозакрытия уведомления.
|
|
23
|
+
- Поддерживает **кнопку закрытия** (`closable`) с возможностью кастомизации обработчика (`onCloseClick`).
|
|
24
|
+
- Позволяет добавить **текстовую ссылку** (`link`) и **кнопки действий в футере** (`action`) для выполнения связанных с уведомлением операций.
|
|
25
|
+
- Figma: [`ToastSystemEvent`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A196736&mode=design).
|
|
26
|
+
|
|
27
|
+
### Example
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { toaster } from '@snack-uikit/toaster';
|
|
31
|
+
|
|
32
|
+
// Создание системного уведомления
|
|
33
|
+
const toastId = await toaster.systemEvent.success({
|
|
34
|
+
title: 'Настройки сохранены',
|
|
35
|
+
description: 'Новые параметры будут применены при следующем входе в систему.',
|
|
36
|
+
link: {
|
|
37
|
+
text: 'Изменить ещё раз',
|
|
38
|
+
href: '#',
|
|
39
|
+
},
|
|
40
|
+
action: [
|
|
41
|
+
{ label: 'Отменить', onClick: () => console.log('Revert') },
|
|
42
|
+
{ label: 'Подробнее', onClick: () => console.log('Details') },
|
|
43
|
+
],
|
|
44
|
+
progressBar: true,
|
|
45
|
+
closable: true,
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// Обновление существующего уведомления
|
|
49
|
+
toaster.systemEvent.update.error(toastId, {
|
|
50
|
+
title: 'Ошибка сохранения',
|
|
51
|
+
description: 'Не удалось сохранить изменения. Попробуйте ещё раз.',
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
// Закрытие уведомления
|
|
55
|
+
toaster.systemEvent.dismiss(toastId);
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## ToastUserAction
|
|
59
|
+
|
|
60
|
+
### Description
|
|
61
|
+
|
|
62
|
+
- `ToastUserAction` — компонент для отображения кратких уведомлений о результатах действий пользователя (успешное выполнение операции, ошибка, предупреждение).
|
|
63
|
+
- Поддерживает **разные типы статусов** через проп `appearance` (neutral, success, error, warning) с соответствующей иконкой и цветовой схемой.
|
|
64
|
+
- Отображает **краткий текст** (`label`) без описания, что делает уведомление компактным и ненавязчивым.
|
|
65
|
+
- Может показывать **состояние загрузки** (`loading`) с анимацией вместо иконки статуса.
|
|
66
|
+
- Поддерживает **текстовую ссылку** (`link`) для перехода к связанному контенту или действию.
|
|
67
|
+
- Отличается от `ToastSystemEvent` более компактным размером и отсутствием заголовка, описания и кнопок действий, что делает его подходящим для быстрых обратных связей на действия пользователя.
|
|
68
|
+
- Figma: [`ToastUserAction`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A197658&mode=design).
|
|
69
|
+
|
|
70
|
+
### Example
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { toaster } from '@snack-uikit/toaster';
|
|
74
|
+
|
|
75
|
+
// Создание уведомления о действии пользователя
|
|
76
|
+
const toastId = await toaster.userAction.success({
|
|
77
|
+
label: 'Файл успешно загружен',
|
|
78
|
+
link: {
|
|
79
|
+
text: 'Открыть',
|
|
80
|
+
href: '#',
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// Обновление уведомления с состоянием загрузки
|
|
85
|
+
toaster.userAction.update.neutral(toastId, {
|
|
86
|
+
label: 'Обработка файла...',
|
|
87
|
+
loading: true,
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// Закрытие уведомления
|
|
91
|
+
toaster.userAction.dismiss(toastId);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## ToastUpload
|
|
95
|
+
|
|
96
|
+
### Description
|
|
97
|
+
|
|
98
|
+
- `ToastUpload` — компонент для отображения прогресса загрузки одного или нескольких файлов с возможностью управления процессом (пауза, продолжение, повтор при ошибке, отмена).
|
|
99
|
+
- Отображает **список файлов** (`files`) с индивидуальным прогрессом каждого файла, его статусом (loading, pause, error, uploaded, errorUploaded) и возможностью управления через действия (`actions`).
|
|
100
|
+
- Показывает **общий прогресс загрузки** (`progress`) в виде счётчика (current/total) и процентов, а также прогресс-бар при свёрнутом состоянии.
|
|
101
|
+
- Поддерживает **разные статусы загрузки** (`status`) с соответствующим визуальным оформлением и доступными действиями (продолжить, приостановить, повторить).
|
|
102
|
+
- Позволяет **сворачивать и разворачивать** список файлов (`collapsed`, `onCollapsed`) для экономии места на экране.
|
|
103
|
+
- Может быть **перемещаемым** (`draggable`) с ограничениями области перемещения (`draggableBounds`).
|
|
104
|
+
- Поддерживает **кнопку отмены всей загрузки** (`cancelButton`) и **кнопку закрытия** (`closable`).
|
|
105
|
+
- Отображает **заголовок** (`title`) и **описание статуса** (`description`) для информирования пользователя о текущем состоянии загрузки.
|
|
106
|
+
- Figma: [`ToastUpload`](https://www.figma.com/design/jtGxAPvFJOMir7V0eQFukN/branch/qzePfVaHqZdDKogF2PYKRL/Snack-UI-Kit-5.0.0?node-id=17463-61268&t=O9Jb62r0iZv5zcdY-0).
|
|
107
|
+
|
|
108
|
+
### Example
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { toaster } from '@snack-uikit/toaster';
|
|
112
|
+
|
|
113
|
+
// Создание или обновление уведомления о загрузке
|
|
114
|
+
const toastId = toaster.upload.startOrUpdate({
|
|
115
|
+
title: 'Загрузка файлов',
|
|
116
|
+
description: '3 минуты осталось',
|
|
117
|
+
status: 'loading',
|
|
118
|
+
progress: {
|
|
119
|
+
current: 4,
|
|
120
|
+
total: 10,
|
|
121
|
+
},
|
|
122
|
+
files: [
|
|
123
|
+
{
|
|
124
|
+
id: '1',
|
|
125
|
+
title: 'document.pdf',
|
|
126
|
+
formattedSize: '45 MB',
|
|
127
|
+
progress: 50,
|
|
128
|
+
status: 'loading',
|
|
129
|
+
statusLabel: 'Загрузка...',
|
|
130
|
+
actions: {
|
|
131
|
+
onPause: () => console.log('Pause file 1'),
|
|
132
|
+
onRetry: () => console.log('Retry file 1'),
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
id: '2',
|
|
137
|
+
title: 'image.jpg',
|
|
138
|
+
formattedSize: '12 MB',
|
|
139
|
+
progress: 100,
|
|
140
|
+
status: 'uploaded',
|
|
141
|
+
statusLabel: 'Загружено',
|
|
142
|
+
link: { href: '#', text: 'Открыть' },
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
generalActions: {
|
|
146
|
+
onContinue: () => console.log('Continue all'),
|
|
147
|
+
onPause: () => console.log('Pause all'),
|
|
148
|
+
onRetry: () => console.log('Retry all'),
|
|
149
|
+
},
|
|
150
|
+
cancelButton: {
|
|
151
|
+
label: 'Отменить все',
|
|
152
|
+
onClick: () => console.log('Cancel all'),
|
|
153
|
+
},
|
|
154
|
+
closable: true,
|
|
155
|
+
collapsed: false,
|
|
156
|
+
draggable: true,
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
// Закрытие уведомления
|
|
160
|
+
toaster.upload.dismiss(toastId);
|
|
161
|
+
```
|
|
162
|
+
|
|
9
163
|
## Usage
|
|
10
164
|
|
|
11
165
|
```typescript
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Toaster",
|
|
7
|
-
"version": "0.11.21
|
|
7
|
+
"version": "0.11.21",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/icons": "0.27.5
|
|
40
|
-
"@snack-uikit/link": "0.17.16
|
|
41
|
-
"@snack-uikit/loaders": "0.9.
|
|
42
|
-
"@snack-uikit/progress-bar": "0.1.
|
|
43
|
-
"@snack-uikit/scroll": "0.10.
|
|
44
|
-
"@snack-uikit/truncate-string": "0.7.7
|
|
45
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/icons": "0.27.5",
|
|
40
|
+
"@snack-uikit/link": "0.17.16",
|
|
41
|
+
"@snack-uikit/loaders": "0.9.10",
|
|
42
|
+
"@snack-uikit/progress-bar": "0.1.11",
|
|
43
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
44
|
+
"@snack-uikit/truncate-string": "0.7.7",
|
|
45
|
+
"@snack-uikit/utils": "4.0.1",
|
|
46
46
|
"classnames": "2.5.1",
|
|
47
47
|
"react-draggable": "4.4.6",
|
|
48
48
|
"react-toastify": "10.0.5",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@snack-uikit/locale": "*"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
55
55
|
}
|