@xsolla/xui-notification 0.99.0 → 0.100.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 +176 -22
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,40 +1,194 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Notification
|
|
3
|
+
subtitle: A notification/toast component.
|
|
4
|
+
description: A cross-platform React notification component for displaying alerts and messages.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Notification
|
|
8
|
+
|
|
9
|
+
A cross-platform React notification component for displaying alerts, success messages, warnings, and errors. Supports both toast and inline display modes.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-notification
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-notification
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Notification
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Notification } from '@xsolla/xui-notification';
|
|
26
|
+
|
|
27
|
+
export default function BasicNotification() {
|
|
28
|
+
return (
|
|
29
|
+
<Notification
|
|
30
|
+
title="Success"
|
|
31
|
+
message="Your changes have been saved."
|
|
32
|
+
tone="success"
|
|
33
|
+
/>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Notification Tones
|
|
12
39
|
|
|
13
40
|
```tsx
|
|
41
|
+
import * as React from 'react';
|
|
14
42
|
import { Notification } from '@xsolla/xui-notification';
|
|
15
43
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
);
|
|
44
|
+
export default function NotificationTones() {
|
|
45
|
+
return (
|
|
46
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
47
|
+
<Notification tone="neutral" title="Info" message="This is an informational message." />
|
|
48
|
+
<Notification tone="success" title="Success" message="Operation completed successfully." />
|
|
49
|
+
<Notification tone="warning" title="Warning" message="Please review before proceeding." />
|
|
50
|
+
<Notification tone="alert" title="Error" message="Something went wrong." />
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
25
54
|
```
|
|
26
55
|
|
|
27
|
-
|
|
56
|
+
### Notification Types (Toast vs Inline)
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import * as React from 'react';
|
|
60
|
+
import { Notification } from '@xsolla/xui-notification';
|
|
61
|
+
|
|
62
|
+
export default function NotificationTypes() {
|
|
63
|
+
return (
|
|
64
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
65
|
+
<Notification
|
|
66
|
+
type="toast"
|
|
67
|
+
tone="success"
|
|
68
|
+
title="Toast Notification"
|
|
69
|
+
message="This is a toast-style notification."
|
|
70
|
+
/>
|
|
71
|
+
<Notification
|
|
72
|
+
type="inline"
|
|
73
|
+
tone="warning"
|
|
74
|
+
title="Inline Notification"
|
|
75
|
+
message="This is an inline-style notification."
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Dismissible Notification
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import * as React from 'react';
|
|
86
|
+
import { Notification } from '@xsolla/xui-notification';
|
|
87
|
+
|
|
88
|
+
export default function DismissibleNotification() {
|
|
89
|
+
const [visible, setVisible] = React.useState(true);
|
|
90
|
+
|
|
91
|
+
if (!visible) return null;
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<Notification
|
|
95
|
+
title="Notification"
|
|
96
|
+
message="Click the X to dismiss this notification."
|
|
97
|
+
onClose={() => setVisible(false)}
|
|
98
|
+
/>
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Notification with Action
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import * as React from 'react';
|
|
107
|
+
import { Notification } from '@xsolla/xui-notification';
|
|
108
|
+
|
|
109
|
+
export default function ActionNotification() {
|
|
110
|
+
return (
|
|
111
|
+
<Notification
|
|
112
|
+
tone="alert"
|
|
113
|
+
title="Session Expiring"
|
|
114
|
+
message="Your session will expire in 5 minutes."
|
|
115
|
+
actionLabel="Extend Session"
|
|
116
|
+
onAction={() => console.log('Session extended')}
|
|
117
|
+
onClose={() => console.log('Dismissed')}
|
|
118
|
+
/>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Hide Close Button
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
import * as React from 'react';
|
|
127
|
+
import { Notification } from '@xsolla/xui-notification';
|
|
128
|
+
|
|
129
|
+
export default function PersistentNotification() {
|
|
130
|
+
return (
|
|
131
|
+
<Notification
|
|
132
|
+
tone="warning"
|
|
133
|
+
title="Important"
|
|
134
|
+
message="This notification cannot be dismissed."
|
|
135
|
+
showClose={false}
|
|
136
|
+
/>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## API Reference
|
|
28
142
|
|
|
29
143
|
### Notification
|
|
30
144
|
|
|
145
|
+
**Notification Props:**
|
|
146
|
+
|
|
31
147
|
| Prop | Type | Default | Description |
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
148
|
+
| :--- | :--- | :------ | :---------- |
|
|
149
|
+
| tone | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Semantic color tone of the notification. |
|
|
150
|
+
| type | `"toast" \| "inline"` | `"toast"` | Display mode - toast for floating notifications, inline for embedded. |
|
|
151
|
+
| title | `string` | - | Notification title text. |
|
|
152
|
+
| message | `string` | - | Notification message/description text. |
|
|
153
|
+
| actionLabel | `string` | - | Text for the action button (optional). |
|
|
154
|
+
| onAction | `() => void` | - | Callback when action button is clicked. |
|
|
155
|
+
| onClose | `() => void` | - | Callback when close button is clicked. |
|
|
156
|
+
| showClose | `boolean` | `true` | Whether to show the close button. |
|
|
157
|
+
|
|
158
|
+
### Tone Values
|
|
159
|
+
|
|
160
|
+
| Tone | Use Case |
|
|
161
|
+
| :--- | :------- |
|
|
162
|
+
| `neutral` | General information, default state |
|
|
163
|
+
| `success` | Positive outcomes, confirmations |
|
|
164
|
+
| `warning` | Caution, requires attention |
|
|
165
|
+
| `alert` | Errors, critical issues |
|
|
166
|
+
|
|
167
|
+
### Type Values
|
|
168
|
+
|
|
169
|
+
| Type | Description |
|
|
170
|
+
| :--- | :---------- |
|
|
171
|
+
| `toast` | Floating notification style, typically used for temporary messages |
|
|
172
|
+
| `inline` | Embedded notification style, integrated into the page layout |
|
|
173
|
+
|
|
174
|
+
## Theming
|
|
175
|
+
|
|
176
|
+
```typescript
|
|
177
|
+
// Tone-specific colors accessed via theme
|
|
178
|
+
theme.colors.background.neutral.secondary // Neutral background
|
|
179
|
+
theme.colors.background.success.secondary // Success background
|
|
180
|
+
theme.colors.background.warning.secondary // Warning background
|
|
181
|
+
theme.colors.background.alert.secondary // Alert/error background
|
|
182
|
+
|
|
183
|
+
theme.colors.content.neutral.primary // Neutral icon color
|
|
184
|
+
theme.colors.content.success.primary // Success icon color
|
|
185
|
+
theme.colors.content.warning.primary // Warning icon color
|
|
186
|
+
theme.colors.content.alert.primary // Alert icon color
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Accessibility
|
|
190
|
+
|
|
191
|
+
- Uses semantic color tones for visual distinction
|
|
192
|
+
- Close button is keyboard accessible
|
|
193
|
+
- Icons are decorative and hidden from screen readers
|
|
194
|
+
- Action buttons are focusable and clickable
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-notification",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-icons": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.100.0",
|
|
14
|
+
"@xsolla/xui-icons": "0.100.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|