@xsolla/xui-notification 0.208.0 → 0.208.2
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/package.json +4 -4
- package/README.md +0 -190
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-notification",
|
|
3
|
-
"version": "0.208.
|
|
3
|
+
"version": "0.208.2",
|
|
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.208.
|
|
14
|
-
"@xsolla/xui-icons": "0.208.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.208.
|
|
13
|
+
"@xsolla/xui-core": "0.208.2",
|
|
14
|
+
"@xsolla/xui-icons": "0.208.2",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.208.2"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|
package/README.md
DELETED
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
# Notification
|
|
2
|
-
|
|
3
|
-
A cross-platform React notification component for displaying alerts, success messages, warnings, and errors. Supports both toast and inline display modes.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @xsolla/xui-notification
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Imports
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
import { Notification, type NotificationProps } from "@xsolla/xui-notification";
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Quick start
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import * as React from "react";
|
|
21
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
22
|
-
|
|
23
|
-
export default function Example() {
|
|
24
|
-
return (
|
|
25
|
-
<Notification
|
|
26
|
-
tone="success"
|
|
27
|
-
title="Success"
|
|
28
|
-
message="Your changes have been saved."
|
|
29
|
-
/>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## API Reference
|
|
35
|
-
|
|
36
|
-
### `<Notification>`
|
|
37
|
-
|
|
38
|
-
| Prop | Type | Default | Description |
|
|
39
|
-
| ------------- | ------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------- |
|
|
40
|
-
| `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
|
|
41
|
-
| `tone` | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Semantic colour tone. |
|
|
42
|
-
| `type` | `"toast" \| "inline"` | `"toast"` | Display mode. `toast` for floating, `inline` for embedded. |
|
|
43
|
-
| `title` | `string` | — | Title text. |
|
|
44
|
-
| `message` | `string` | — | Message body. |
|
|
45
|
-
| `actionLabel` | `string` | — | Optional action label. When set, renders the inline action. |
|
|
46
|
-
| `onAction` | `() => void` | — | Action click handler. |
|
|
47
|
-
| `onClose` | `() => void` | — | Close click handler. |
|
|
48
|
-
| `showClose` | `boolean` | `true` | Show or hide the close button. |
|
|
49
|
-
|
|
50
|
-
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
51
|
-
|
|
52
|
-
### Tone values
|
|
53
|
-
|
|
54
|
-
| Tone | Use case |
|
|
55
|
-
| --------- | ----------------------------------- |
|
|
56
|
-
| `neutral` | General information, default state. |
|
|
57
|
-
| `success` | Positive outcomes, confirmations. |
|
|
58
|
-
| `warning` | Caution, requires attention. |
|
|
59
|
-
| `alert` | Errors, critical issues. |
|
|
60
|
-
|
|
61
|
-
## Examples
|
|
62
|
-
|
|
63
|
-
### Tones
|
|
64
|
-
|
|
65
|
-
```tsx
|
|
66
|
-
import * as React from "react";
|
|
67
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
68
|
-
|
|
69
|
-
export default function Tones() {
|
|
70
|
-
return (
|
|
71
|
-
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
|
72
|
-
<Notification
|
|
73
|
-
tone="neutral"
|
|
74
|
-
title="Info"
|
|
75
|
-
message="Informational message."
|
|
76
|
-
/>
|
|
77
|
-
<Notification
|
|
78
|
-
tone="success"
|
|
79
|
-
title="Success"
|
|
80
|
-
message="Operation completed."
|
|
81
|
-
/>
|
|
82
|
-
<Notification
|
|
83
|
-
tone="warning"
|
|
84
|
-
title="Warning"
|
|
85
|
-
message="Review before proceeding."
|
|
86
|
-
/>
|
|
87
|
-
<Notification
|
|
88
|
-
tone="alert"
|
|
89
|
-
title="Error"
|
|
90
|
-
message="Something went wrong."
|
|
91
|
-
/>
|
|
92
|
-
</div>
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Toast vs inline
|
|
98
|
-
|
|
99
|
-
```tsx
|
|
100
|
-
import * as React from "react";
|
|
101
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
102
|
-
|
|
103
|
-
export default function Types() {
|
|
104
|
-
return (
|
|
105
|
-
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
|
106
|
-
<Notification
|
|
107
|
-
type="toast"
|
|
108
|
-
tone="success"
|
|
109
|
-
title="Toast"
|
|
110
|
-
message="Floating-style notification."
|
|
111
|
-
/>
|
|
112
|
-
<Notification
|
|
113
|
-
type="inline"
|
|
114
|
-
tone="warning"
|
|
115
|
-
title="Inline"
|
|
116
|
-
message="Embedded-style notification."
|
|
117
|
-
/>
|
|
118
|
-
</div>
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
### Dismissible
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
import * as React from "react";
|
|
127
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
128
|
-
|
|
129
|
-
export default function Dismissible() {
|
|
130
|
-
const [visible, setVisible] = React.useState(true);
|
|
131
|
-
if (!visible) return null;
|
|
132
|
-
return (
|
|
133
|
-
<Notification
|
|
134
|
-
title="Notification"
|
|
135
|
-
message="Click the X to dismiss."
|
|
136
|
-
onClose={() => setVisible(false)}
|
|
137
|
-
/>
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### With action
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
import * as React from "react";
|
|
146
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
147
|
-
|
|
148
|
-
export default function Action() {
|
|
149
|
-
return (
|
|
150
|
-
<Notification
|
|
151
|
-
tone="alert"
|
|
152
|
-
title="Session expiring"
|
|
153
|
-
message="Your session will expire in 5 minutes."
|
|
154
|
-
actionLabel="Extend session"
|
|
155
|
-
onAction={() => console.log("extended")}
|
|
156
|
-
onClose={() => console.log("dismissed")}
|
|
157
|
-
/>
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
### Persistent (no close button)
|
|
163
|
-
|
|
164
|
-
```tsx
|
|
165
|
-
import * as React from "react";
|
|
166
|
-
import { Notification } from "@xsolla/xui-notification";
|
|
167
|
-
|
|
168
|
-
export default function Persistent() {
|
|
169
|
-
return (
|
|
170
|
-
<Notification
|
|
171
|
-
tone="warning"
|
|
172
|
-
title="Important"
|
|
173
|
-
message="This notification cannot be dismissed."
|
|
174
|
-
showClose={false}
|
|
175
|
-
/>
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
## Accessibility
|
|
181
|
-
|
|
182
|
-
- Tone provides visual distinction; pair `title` with `message` for context.
|
|
183
|
-
- Close and action are keyboard-focusable.
|
|
184
|
-
- Icons are decorative.
|
|
185
|
-
- The action element rendered by `actionLabel`/`onAction` is a pressable container, not a `<button>`. If you need full button semantics, render the action through your own focusable component instead.
|
|
186
|
-
|
|
187
|
-
## Related
|
|
188
|
-
|
|
189
|
-
- [NotificationPanel](./b2b-notification-panel.md) — full-width inline banner variant.
|
|
190
|
-
- [Toast](./toast.md) — programmatic auto-dismissing notifications.
|