@snack-uikit/notification 0.13.24 → 0.13.25
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 +157 -60
- package/package.json +16 -16
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.13.25 (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.13.24 (2025-12-06)</small>
|
|
7
17
|
|
|
8
18
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -5,72 +5,169 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
-
##
|
|
9
|
-
- remove custom hook for droplist keyboard handles
|
|
8
|
+
## Description
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
- Пакет `@snack-uikit/notification` предоставляет компоненты для отображения уведомлений: карточки отдельных уведомлений и панель для их группировки и управления.
|
|
11
|
+
- Компоненты поддерживают различные типы уведомлений через проп `appearance` (neutral, error, errorCritical, warning, success), состояния прочитано/не прочитано, фильтрацию, действия и интеграцию с системой прокрутки.
|
|
12
|
+
- Карточки уведомлений могут содержать заголовок, контент, ссылки, кнопки действий и дополнительные действия через выпадающий список, а также отслеживать видимость для автоматической пометки как прочитанных.
|
|
13
|
+
- Панель уведомлений предоставляет контейнер с заголовком, фильтрацией по сегментам, кнопкой "Отметить все как прочитанные", настройками и поддержкой состояния загрузки со скелетонами.
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
## NotificationCard
|
|
16
|
+
|
|
17
|
+
### Description
|
|
18
|
+
|
|
19
|
+
- `NotificationCard` — компонент карточки отдельного уведомления, отображающий информацию о событии или сообщении.
|
|
20
|
+
- Поддерживает **разные типы статусов** через проп `appearance` (neutral, error, errorCritical, warning, success) с соответствующей иконкой и цветовой схемой.
|
|
21
|
+
- Позволяет задать **лейбл категории**, **заголовок** (с обрезкой до двух строк) и **произвольный контент** уведомления.
|
|
22
|
+
- Отображает **дату уведомления** и **текстовую ссылку** для перехода к детальной информации.
|
|
23
|
+
- Поддерживает **состояние прочитано/не прочитано** (`unread`) с визуальным индикатором и автоматическим отслеживанием видимости через `onVisible` при попадании карточки в область видимости на 80%.
|
|
24
|
+
- Может содержать **кнопки действий** (`primaryButton`, `secondaryButton`) и **дополнительные действия** через выпадающий список (`actions`), который появляется при наведении на карточку.
|
|
25
|
+
- Поддерживает **обработчик клика** по всей карточке для перехода к деталям уведомления.
|
|
26
|
+
- Figma: [`NotificationCard`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A209668&mode=design).
|
|
27
|
+
|
|
28
|
+
### Example
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { NotificationCard } from '@snack-uikit/notification';
|
|
32
|
+
|
|
33
|
+
function NotificationCardExample() {
|
|
34
|
+
return (
|
|
35
|
+
<NotificationCard
|
|
36
|
+
id="notification-1"
|
|
37
|
+
appearance="errorCritical"
|
|
38
|
+
label="Category・Subcategory"
|
|
39
|
+
title="Title truncate two line"
|
|
40
|
+
content="Demo content."
|
|
41
|
+
date="DD.MM.YYYY HH:MM"
|
|
42
|
+
unread
|
|
43
|
+
link={{
|
|
44
|
+
text: 'Link to detailed information',
|
|
45
|
+
href: '#',
|
|
46
|
+
}}
|
|
47
|
+
primaryButton={{
|
|
48
|
+
label: 'Primary Button',
|
|
49
|
+
onClick: () => console.log('Primary action'),
|
|
50
|
+
}}
|
|
51
|
+
secondaryButton={{
|
|
52
|
+
label: 'Secondary Button',
|
|
53
|
+
onClick: () => console.log('Secondary action'),
|
|
54
|
+
}}
|
|
55
|
+
actions={[
|
|
56
|
+
{
|
|
57
|
+
content: { option: 'action 1' },
|
|
58
|
+
onClick: () => console.log('Action 1'),
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
content: { option: 'action 2' },
|
|
62
|
+
onClick: () => console.log('Action 2'),
|
|
63
|
+
},
|
|
64
|
+
]}
|
|
65
|
+
onVisible={(cardId) => console.log(`Card ${cardId} is visible`)}
|
|
66
|
+
onClick={() => console.log('Card clicked')}
|
|
67
|
+
/>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## NotificationPanel
|
|
73
|
+
|
|
74
|
+
### Description
|
|
75
|
+
|
|
76
|
+
- `NotificationPanel` — компонент панели для группировки и управления уведомлениями, предоставляющий контейнер с инструментами фильтрации и управления.
|
|
77
|
+
- Содержит **заголовок панели** и **сегментированный контроль** для фильтрации уведомлений (например, "Все" и "Непрочитанные").
|
|
78
|
+
- Поддерживает **кнопку "Отметить все как прочитанные"** (`readAllButton`) с возможностью добавления тултипа.
|
|
79
|
+
- Включает **кнопку настроек** (`settings`) с выпадающим списком для дополнительных действий.
|
|
80
|
+
- Отображает **произвольный контент** (`content`), обычно список `NotificationCard` или компонент `NotificationPanel.Blank` для пустого состояния.
|
|
81
|
+
- Поддерживает **состояние загрузки** (`loading`) с отображением скелетонов карточек уведомлений (количество настраивается через `skeletonsAmount`).
|
|
82
|
+
- Предоставляет **кнопку в футере** (`footerButton`) для дополнительных действий, например, перехода ко всем событиям.
|
|
83
|
+
- Включает **встроенную прокрутку** с поддержкой ссылок на контейнер (`scrollContainerRef`) и конец списка (`scrollEndRef`) для реализации бесконечной прокрутки или подгрузки данных.
|
|
84
|
+
- Содержит вспомогательные компоненты: `NotificationPanel.Blank` для пустого состояния и `NotificationPanel.Divider` для разделения групп уведомлений.
|
|
85
|
+
- Figma: [`NotificationPanel`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A209587&mode=design).
|
|
86
|
+
|
|
87
|
+
### Example
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
14
90
|
import { NotificationCard, NotificationPanel } from '@snack-uikit/notification';
|
|
91
|
+
import { PlaceholderSVG } from '@snack-uikit/icons';
|
|
15
92
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
id: 'cardId',
|
|
19
|
-
label: ['Category', 'Subcategory'].join('・'),
|
|
20
|
-
appearance: 'errorCritical',
|
|
21
|
-
title: 'Title truncate two line',
|
|
22
|
-
content: `Demo content.`,
|
|
23
|
-
link: {
|
|
24
|
-
text: 'Link to detailed information',
|
|
25
|
-
href: '#',
|
|
26
|
-
},
|
|
27
|
-
date: 'DD.MM.YYYY HH:MM',
|
|
28
|
-
actions: [
|
|
29
|
-
{
|
|
30
|
-
option: 'action 1',
|
|
31
|
-
onClick: handleActionClick,
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
option: 'action 2',
|
|
35
|
-
onClick: handleActionClick,
|
|
36
|
-
},
|
|
37
|
-
],
|
|
38
|
-
}
|
|
39
|
-
];
|
|
40
|
-
|
|
41
|
-
// ...
|
|
42
|
-
|
|
43
|
-
<NotificationPanel
|
|
44
|
-
title='Notifications'
|
|
45
|
-
triggerElement={<ButtonTonal label='open' />}
|
|
46
|
-
readAllButton={{
|
|
47
|
-
label: 'Mark all as read',
|
|
48
|
-
onClick() {},
|
|
49
|
-
}}
|
|
50
|
-
chips={[
|
|
51
|
-
{
|
|
52
|
-
label: 'all',
|
|
53
|
-
checked: true,
|
|
54
|
-
onChange() { /* */ },
|
|
55
|
-
},
|
|
93
|
+
function NotificationPanelExample() {
|
|
94
|
+
const cards = [
|
|
56
95
|
{
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
96
|
+
id: 'card-1',
|
|
97
|
+
label: 'Category・Subcategory',
|
|
98
|
+
appearance: 'errorCritical',
|
|
99
|
+
title: 'Title truncate two line',
|
|
100
|
+
content: 'Demo content.',
|
|
101
|
+
link: {
|
|
102
|
+
text: 'Link to detailed information',
|
|
103
|
+
href: '#',
|
|
104
|
+
},
|
|
105
|
+
date: 'DD.MM.YYYY HH:MM',
|
|
106
|
+
unread: true,
|
|
60
107
|
},
|
|
61
|
-
]
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<NotificationPanel
|
|
112
|
+
title="Notifications"
|
|
113
|
+
readAllButton={{
|
|
114
|
+
label: 'Mark all as read',
|
|
115
|
+
onClick: () => console.log('Mark all as read'),
|
|
116
|
+
tooltip: {
|
|
117
|
+
tip: 'Your tip could be here',
|
|
118
|
+
},
|
|
119
|
+
}}
|
|
120
|
+
segments={{
|
|
121
|
+
items: [
|
|
122
|
+
{
|
|
123
|
+
value: 'All',
|
|
124
|
+
label: 'All',
|
|
125
|
+
counter: { value: 10 },
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
value: 'Unread',
|
|
129
|
+
label: 'Unread',
|
|
130
|
+
counter: { value: 5 },
|
|
131
|
+
},
|
|
132
|
+
],
|
|
133
|
+
value: 'All',
|
|
134
|
+
onChange: (value) => console.log('Filter changed:', value),
|
|
135
|
+
}}
|
|
136
|
+
settings={{
|
|
137
|
+
button: {
|
|
138
|
+
onClick: () => console.log('Settings clicked'),
|
|
139
|
+
},
|
|
140
|
+
actions: [
|
|
141
|
+
{
|
|
142
|
+
content: { option: 'setting 1' },
|
|
143
|
+
onClick: () => console.log('Setting 1'),
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
content: { option: 'setting 2' },
|
|
147
|
+
onClick: () => console.log('Setting 2'),
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
}}
|
|
151
|
+
footerButton={{
|
|
152
|
+
label: 'All events',
|
|
153
|
+
onClick: () => console.log('View all events'),
|
|
154
|
+
}}
|
|
155
|
+
content={
|
|
156
|
+
!cards.length ? (
|
|
157
|
+
<NotificationPanel.Blank
|
|
158
|
+
icon={{
|
|
159
|
+
icon: PlaceholderSVG,
|
|
160
|
+
}}
|
|
161
|
+
title="No notifications"
|
|
162
|
+
description="Here you will see new event notifications\nwhen something happens"
|
|
163
|
+
/>
|
|
164
|
+
) : (
|
|
165
|
+
cards.map(card => <NotificationCard {...card} key={card.id} />)
|
|
166
|
+
)
|
|
167
|
+
}
|
|
168
|
+
/>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
74
171
|
```
|
|
75
172
|
|
|
76
173
|
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Notification",
|
|
7
|
-
"version": "0.13.
|
|
7
|
+
"version": "0.13.25",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/button": "0.19.
|
|
40
|
-
"@snack-uikit/icons": "0.27.
|
|
41
|
-
"@snack-uikit/info-block": "0.6.
|
|
42
|
-
"@snack-uikit/link": "0.17.
|
|
43
|
-
"@snack-uikit/list": "0.32.
|
|
44
|
-
"@snack-uikit/popover-private": "0.15.
|
|
45
|
-
"@snack-uikit/scroll": "0.10.
|
|
46
|
-
"@snack-uikit/segmented-control": "0.6.
|
|
47
|
-
"@snack-uikit/skeleton": "0.6.
|
|
48
|
-
"@snack-uikit/tag": "0.15.
|
|
49
|
-
"@snack-uikit/tooltip": "0.18.
|
|
50
|
-
"@snack-uikit/truncate-string": "0.7.
|
|
51
|
-
"@snack-uikit/typography": "0.8.
|
|
52
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/button": "0.19.17",
|
|
40
|
+
"@snack-uikit/icons": "0.27.5",
|
|
41
|
+
"@snack-uikit/info-block": "0.6.36",
|
|
42
|
+
"@snack-uikit/link": "0.17.16",
|
|
43
|
+
"@snack-uikit/list": "0.32.12",
|
|
44
|
+
"@snack-uikit/popover-private": "0.15.4",
|
|
45
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
46
|
+
"@snack-uikit/segmented-control": "0.6.16",
|
|
47
|
+
"@snack-uikit/skeleton": "0.6.10",
|
|
48
|
+
"@snack-uikit/tag": "0.15.13",
|
|
49
|
+
"@snack-uikit/tooltip": "0.18.8",
|
|
50
|
+
"@snack-uikit/truncate-string": "0.7.7",
|
|
51
|
+
"@snack-uikit/typography": "0.8.12",
|
|
52
|
+
"@snack-uikit/utils": "4.0.1",
|
|
53
53
|
"classnames": "2.5.1"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
56
56
|
}
|