@xsolla/xui-status 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 +255 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,34 +1,273 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Status
|
|
3
|
+
subtitle: Status indicator with label.
|
|
4
|
+
description: A cross-platform React status indicator component with colored dot and optional text label for displaying states.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Status
|
|
8
|
+
|
|
9
|
+
A cross-platform React status indicator component that displays a colored dot with an optional text label to indicate state or condition.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-status
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-status
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Status
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Status } from '@xsolla/xui-status';
|
|
26
|
+
|
|
27
|
+
export default function BasicStatus() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 24 }}>
|
|
30
|
+
<Status palette="success">Active</Status>
|
|
31
|
+
<Status palette="warning">Pending</Status>
|
|
32
|
+
<Status palette="alert">Error</Status>
|
|
33
|
+
<Status palette="neutral">Inactive</Status>
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Dot Only
|
|
12
40
|
|
|
13
41
|
```tsx
|
|
14
|
-
import
|
|
42
|
+
import * as React from 'react';
|
|
43
|
+
import { Status } from '@xsolla/xui-status';
|
|
15
44
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
45
|
+
export default function DotOnly() {
|
|
46
|
+
return (
|
|
47
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
48
|
+
<Status palette="success" />
|
|
49
|
+
<Status palette="warning" />
|
|
50
|
+
<Status palette="alert" />
|
|
51
|
+
<Status palette="neutral" />
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Different Sizes
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import * as React from 'react';
|
|
61
|
+
import { Status } from '@xsolla/xui-status';
|
|
19
62
|
|
|
20
|
-
|
|
21
|
-
|
|
63
|
+
export default function Sizes() {
|
|
64
|
+
return (
|
|
65
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
|
66
|
+
<Status size="sm" palette="success">Small</Status>
|
|
67
|
+
<Status size="md" palette="success">Medium</Status>
|
|
68
|
+
<Status size="lg" palette="success">Large</Status>
|
|
69
|
+
</div>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
22
72
|
```
|
|
23
73
|
|
|
24
|
-
##
|
|
74
|
+
## Anatomy
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import { Status } from '@xsolla/xui-status';
|
|
78
|
+
|
|
79
|
+
<Status
|
|
80
|
+
palette="success" // success, warning, alert, neutral, default
|
|
81
|
+
size="md" // s, m, l
|
|
82
|
+
labelType="primary" // primary or dot-color
|
|
83
|
+
uppercase={true} // Uppercase text
|
|
84
|
+
>
|
|
85
|
+
Label text
|
|
86
|
+
</Status>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Examples
|
|
90
|
+
|
|
91
|
+
### Order Status
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import * as React from 'react';
|
|
95
|
+
import { Status } from '@xsolla/xui-status';
|
|
96
|
+
|
|
97
|
+
export default function OrderStatus() {
|
|
98
|
+
const orders = [
|
|
99
|
+
{ id: '001', status: 'Completed', palette: 'success' as const },
|
|
100
|
+
{ id: '002', status: 'Processing', palette: 'warning' as const },
|
|
101
|
+
{ id: '003', status: 'Failed', palette: 'alert' as const },
|
|
102
|
+
{ id: '004', status: 'Cancelled', palette: 'neutral' as const },
|
|
103
|
+
];
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
107
|
+
<thead>
|
|
108
|
+
<tr>
|
|
109
|
+
<th style={{ textAlign: 'left', padding: 8 }}>Order ID</th>
|
|
110
|
+
<th style={{ textAlign: 'left', padding: 8 }}>Status</th>
|
|
111
|
+
</tr>
|
|
112
|
+
</thead>
|
|
113
|
+
<tbody>
|
|
114
|
+
{orders.map(({ id, status, palette }) => (
|
|
115
|
+
<tr key={id}>
|
|
116
|
+
<td style={{ padding: 8 }}>{id}</td>
|
|
117
|
+
<td style={{ padding: 8 }}>
|
|
118
|
+
<Status palette={palette}>{status}</Status>
|
|
119
|
+
</td>
|
|
120
|
+
</tr>
|
|
121
|
+
))}
|
|
122
|
+
</tbody>
|
|
123
|
+
</table>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Service Health
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import * as React from 'react';
|
|
132
|
+
import { Status } from '@xsolla/xui-status';
|
|
133
|
+
|
|
134
|
+
export default function ServiceHealth() {
|
|
135
|
+
const services = [
|
|
136
|
+
{ name: 'API', status: 'operational', palette: 'success' as const },
|
|
137
|
+
{ name: 'Database', status: 'degraded', palette: 'warning' as const },
|
|
138
|
+
{ name: 'CDN', status: 'operational', palette: 'success' as const },
|
|
139
|
+
{ name: 'Auth', status: 'outage', palette: 'alert' as const },
|
|
140
|
+
];
|
|
141
|
+
|
|
142
|
+
return (
|
|
143
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
144
|
+
{services.map(({ name, status, palette }) => (
|
|
145
|
+
<div
|
|
146
|
+
key={name}
|
|
147
|
+
style={{
|
|
148
|
+
display: 'flex',
|
|
149
|
+
justifyContent: 'space-between',
|
|
150
|
+
padding: 12,
|
|
151
|
+
border: '1px solid #e0e0e0',
|
|
152
|
+
borderRadius: 8,
|
|
153
|
+
}}
|
|
154
|
+
>
|
|
155
|
+
<span>{name}</span>
|
|
156
|
+
<Status palette={palette}>{status}</Status>
|
|
157
|
+
</div>
|
|
158
|
+
))}
|
|
159
|
+
</div>
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### User Online Status
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import * as React from 'react';
|
|
168
|
+
import { Status } from '@xsolla/xui-status';
|
|
169
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
170
|
+
|
|
171
|
+
export default function UserOnlineStatus() {
|
|
172
|
+
const users = [
|
|
173
|
+
{ name: 'John Doe', online: true },
|
|
174
|
+
{ name: 'Jane Smith', online: true },
|
|
175
|
+
{ name: 'Bob Wilson', online: false },
|
|
176
|
+
];
|
|
177
|
+
|
|
178
|
+
return (
|
|
179
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
180
|
+
{users.map(({ name, online }) => (
|
|
181
|
+
<div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
182
|
+
<Avatar size="md" text={name.split(' ').map(n => n[0]).join('')} />
|
|
183
|
+
<span style={{ flex: 1 }}>{name}</span>
|
|
184
|
+
<Status
|
|
185
|
+
palette={online ? 'success' : 'neutral'}
|
|
186
|
+
size="sm"
|
|
187
|
+
>
|
|
188
|
+
{online ? 'Online' : 'Offline'}
|
|
189
|
+
</Status>
|
|
190
|
+
</div>
|
|
191
|
+
))}
|
|
192
|
+
</div>
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
### Colored Label
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
import * as React from 'react';
|
|
201
|
+
import { Status } from '@xsolla/xui-status';
|
|
202
|
+
|
|
203
|
+
export default function ColoredLabel() {
|
|
204
|
+
return (
|
|
205
|
+
<div style={{ display: 'flex', gap: 24 }}>
|
|
206
|
+
<Status palette="success" labelType="primary">Primary Label</Status>
|
|
207
|
+
<Status palette="success" labelType="dot-color">Colored Label</Status>
|
|
208
|
+
</div>
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### Lowercase Status
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
import * as React from 'react';
|
|
217
|
+
import { Status } from '@xsolla/xui-status';
|
|
218
|
+
|
|
219
|
+
export default function LowercaseStatus() {
|
|
220
|
+
return (
|
|
221
|
+
<div style={{ display: 'flex', gap: 24 }}>
|
|
222
|
+
<Status palette="success" uppercase>UPPERCASE</Status>
|
|
223
|
+
<Status palette="success" uppercase={false}>Sentence case</Status>
|
|
224
|
+
</div>
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## API Reference
|
|
25
230
|
|
|
26
231
|
### Status
|
|
27
232
|
|
|
233
|
+
**StatusProps:**
|
|
234
|
+
|
|
28
235
|
| Prop | Type | Default | Description |
|
|
29
|
-
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
| `
|
|
34
|
-
|
|
|
236
|
+
| :--- | :--- | :------ | :---------- |
|
|
237
|
+
| children | `ReactNode` | - | Label text (optional). |
|
|
238
|
+
| palette | `"success" \| "warning" \| "alert" \| "neutral" \| "default"` | `"default"` | Status color palette. |
|
|
239
|
+
| size | `"sm" \| "md" \| "lg"` | `"md"` | Component size. |
|
|
240
|
+
| labelType | `"primary" \| "dot-color"` | `"primary"` | Label color mode. |
|
|
241
|
+
| uppercase | `boolean` | `true` | Transform text to uppercase. |
|
|
242
|
+
|
|
243
|
+
## Size Specifications
|
|
244
|
+
|
|
245
|
+
| Size | Dot Size | Gap | Font Size | Line Height |
|
|
246
|
+
| :--- | :------- | :-- | :-------- | :---------- |
|
|
247
|
+
| `sm` | 4px | 4px | 12px | 16px |
|
|
248
|
+
| `md` | 6px | 6px | 14px | 20px |
|
|
249
|
+
| `lg` | 8px | 8px | 16px | 24px |
|
|
250
|
+
|
|
251
|
+
## Color Palettes
|
|
252
|
+
|
|
253
|
+
| Palette | Use Case |
|
|
254
|
+
| :------ | :------- |
|
|
255
|
+
| `success` | Active, completed, operational |
|
|
256
|
+
| `warning` | Pending, degraded, attention needed |
|
|
257
|
+
| `alert` | Error, failed, critical |
|
|
258
|
+
| `neutral` | Inactive, offline, cancelled |
|
|
259
|
+
| `default` | Generic/disabled state |
|
|
260
|
+
|
|
261
|
+
## Label Types
|
|
262
|
+
|
|
263
|
+
| Type | Description |
|
|
264
|
+
| :--- | :---------- |
|
|
265
|
+
| `primary` | Uses theme's primary text color |
|
|
266
|
+
| `dot-color` | Uses the same color as the dot |
|
|
267
|
+
|
|
268
|
+
## Accessibility
|
|
269
|
+
|
|
270
|
+
- Status information should not rely solely on color
|
|
271
|
+
- Text labels provide context for screen readers
|
|
272
|
+
- Consider using `aria-live` for dynamic status updates
|
|
273
|
+
- Ensure sufficient color contrast for all palettes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-status",
|
|
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,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.100.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|