@xsolla/xui-quest-card 0.148.0 → 0.148.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/README.md +268 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
# QuestCard
|
|
2
|
+
|
|
3
|
+
A cross-platform React card component for displaying quest or mission items with progress tracking, state-driven visuals, and reward tags. Perfect for gamification systems, daily challenges, and achievement displays.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-quest-card
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-quest-card
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic QuestCard
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
20
|
+
import { Flag } from '@xsolla/xui-icons-base';
|
|
21
|
+
|
|
22
|
+
export default function BasicQuestCard() {
|
|
23
|
+
return (
|
|
24
|
+
<QuestCard
|
|
25
|
+
title="Play any game"
|
|
26
|
+
description="With Play Time Rewards On"
|
|
27
|
+
caption="0/12 hours"
|
|
28
|
+
questState="default"
|
|
29
|
+
icon={<Flag />}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### QuestCard States
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import * as React from 'react';
|
|
39
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
40
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
41
|
+
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
|
|
42
|
+
import { XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
43
|
+
|
|
44
|
+
export default function QuestCardStates() {
|
|
45
|
+
const reward = (
|
|
46
|
+
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>+50</Tag>
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
51
|
+
{/* Default — active quest */}
|
|
52
|
+
<QuestCard
|
|
53
|
+
title="Play any game"
|
|
54
|
+
description="With Play Time Rewards On"
|
|
55
|
+
caption="0/12 hours"
|
|
56
|
+
questState="default"
|
|
57
|
+
icon={<Flag />}
|
|
58
|
+
trailing={reward}
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
{/* Expiring — urgent quest with badge */}
|
|
62
|
+
<QuestCard
|
|
63
|
+
title="Reach level 10"
|
|
64
|
+
description="Level up to unlock rewards"
|
|
65
|
+
caption="7/10"
|
|
66
|
+
questState="expiring"
|
|
67
|
+
icon={<Flag />}
|
|
68
|
+
trailing={reward}
|
|
69
|
+
/>
|
|
70
|
+
|
|
71
|
+
{/* Completed — dimmed at 48% opacity */}
|
|
72
|
+
<QuestCard
|
|
73
|
+
title="Complete daily login"
|
|
74
|
+
description="Login every day"
|
|
75
|
+
caption="Completed"
|
|
76
|
+
questState="completed"
|
|
77
|
+
icon={<CheckCr />}
|
|
78
|
+
trailing={reward}
|
|
79
|
+
/>
|
|
80
|
+
|
|
81
|
+
{/* Expired — dimmed at 48% opacity */}
|
|
82
|
+
<QuestCard
|
|
83
|
+
title="Invite 3 friends"
|
|
84
|
+
description="Share your referral link"
|
|
85
|
+
caption="Expired"
|
|
86
|
+
questState="expired"
|
|
87
|
+
icon={<Clock />}
|
|
88
|
+
trailing={reward}
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Without Description or Caption
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import * as React from 'react';
|
|
99
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
100
|
+
import { Flag } from '@xsolla/xui-icons-base';
|
|
101
|
+
|
|
102
|
+
export default function MinimalQuestCard() {
|
|
103
|
+
return (
|
|
104
|
+
<QuestCard
|
|
105
|
+
title="Simple quest"
|
|
106
|
+
questState="default"
|
|
107
|
+
icon={<Flag />}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Quest List
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import * as React from 'react';
|
|
117
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
118
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
119
|
+
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
|
|
120
|
+
import { XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
121
|
+
|
|
122
|
+
export default function QuestList() {
|
|
123
|
+
const reward = (
|
|
124
|
+
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>+50</Tag>
|
|
125
|
+
);
|
|
126
|
+
|
|
127
|
+
return (
|
|
128
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
129
|
+
<QuestCard
|
|
130
|
+
title="Play any game"
|
|
131
|
+
description="With Play Time Rewards On"
|
|
132
|
+
caption="0/12 hours"
|
|
133
|
+
questState="default"
|
|
134
|
+
icon={<Flag />}
|
|
135
|
+
trailing={reward}
|
|
136
|
+
onPress={() => console.log('Quest 1 clicked')}
|
|
137
|
+
/>
|
|
138
|
+
<QuestCard
|
|
139
|
+
title="Complete daily login"
|
|
140
|
+
description="Login every day"
|
|
141
|
+
caption="Completed"
|
|
142
|
+
questState="completed"
|
|
143
|
+
icon={<CheckCr />}
|
|
144
|
+
trailing={reward}
|
|
145
|
+
/>
|
|
146
|
+
<QuestCard
|
|
147
|
+
title="Invite 3 friends"
|
|
148
|
+
description="Share your referral link"
|
|
149
|
+
caption="Expired"
|
|
150
|
+
questState="expired"
|
|
151
|
+
icon={<Clock />}
|
|
152
|
+
trailing={reward}
|
|
153
|
+
/>
|
|
154
|
+
<QuestCard
|
|
155
|
+
title="Reach level 10"
|
|
156
|
+
description="Level up to unlock rewards"
|
|
157
|
+
caption="7/10"
|
|
158
|
+
questState="expiring"
|
|
159
|
+
icon={<Flag />}
|
|
160
|
+
trailing={reward}
|
|
161
|
+
onPress={() => console.log('Quest 4 clicked')}
|
|
162
|
+
/>
|
|
163
|
+
</div>
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Anatomy
|
|
169
|
+
|
|
170
|
+
Import the component and use it directly:
|
|
171
|
+
|
|
172
|
+
```jsx
|
|
173
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
174
|
+
|
|
175
|
+
<QuestCard
|
|
176
|
+
title="Quest Title" // Required: Quest name
|
|
177
|
+
description="Description" // Optional: Secondary text
|
|
178
|
+
caption="0/100" // Optional: Progress or status text
|
|
179
|
+
questState="default" // Optional: Visual state
|
|
180
|
+
icon={<Flag />} // Optional: Quest icon
|
|
181
|
+
trailing={<Tag />} // Optional: Reward/action content
|
|
182
|
+
onPress={() => {}} // Optional: Card press handler
|
|
183
|
+
/>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## API Reference
|
|
187
|
+
|
|
188
|
+
### QuestCard
|
|
189
|
+
|
|
190
|
+
A card component for displaying quest or mission items.
|
|
191
|
+
|
|
192
|
+
**QuestCard Props:**
|
|
193
|
+
|
|
194
|
+
| Prop | Type | Default | Description |
|
|
195
|
+
| :--- | :--- | :------ | :---------- |
|
|
196
|
+
| title | `string` | required | Quest title text. |
|
|
197
|
+
| description | `string` | - | Secondary description text below the title. |
|
|
198
|
+
| caption | `string` | - | Bottom caption text (e.g. "0/100", "Completed", "Expired"). |
|
|
199
|
+
| questState | `"default" \| "completed" \| "expired" \| "expiring"` | `"default"` | Visual quest state controlling opacity, border, and badge. |
|
|
200
|
+
| icon | `ReactNode` | - | Icon to display in the icon container. |
|
|
201
|
+
| trailing | `ReactNode` | - | Reward tag or custom trailing content. |
|
|
202
|
+
| onPress | `() => void` | - | Card press handler. |
|
|
203
|
+
| className | `string` | - | Custom className for the container. |
|
|
204
|
+
| testID | `string` | - | Test ID for testing. |
|
|
205
|
+
|
|
206
|
+
**Quest States:**
|
|
207
|
+
|
|
208
|
+
| State | Description |
|
|
209
|
+
| :---- | :---------- |
|
|
210
|
+
| default | Active quest with border, full opacity |
|
|
211
|
+
| completed | Completed quest, 48% opacity, no border |
|
|
212
|
+
| expired | Expired quest, 48% opacity, no border |
|
|
213
|
+
| expiring | Urgent quest with border, full opacity, and a red lightning badge on the icon |
|
|
214
|
+
|
|
215
|
+
**Recommended icons per state:**
|
|
216
|
+
|
|
217
|
+
| State | Icon |
|
|
218
|
+
| :---- | :--- |
|
|
219
|
+
| default | `<Flag />` from `@xsolla/xui-icons-base` |
|
|
220
|
+
| completed | `<CheckCr />` from `@xsolla/xui-icons-base` |
|
|
221
|
+
| expired | `<Clock />` from `@xsolla/xui-icons-base` |
|
|
222
|
+
| expiring | `<Flag />` from `@xsolla/xui-icons-base` |
|
|
223
|
+
|
|
224
|
+
### Deprecated Props
|
|
225
|
+
|
|
226
|
+
These props still work but will emit console warnings in development:
|
|
227
|
+
|
|
228
|
+
| Prop | Replacement | Mapping |
|
|
229
|
+
| :--- | :---------- | :------ |
|
|
230
|
+
| subtitle | `description` | Direct alias |
|
|
231
|
+
| status | `questState` | "success" -> "completed", "warning"/"alert" -> "expiring", "default" -> "default" |
|
|
232
|
+
| statusIcon | `questState` | No longer rendered; visual state driven by `questState` |
|
|
233
|
+
|
|
234
|
+
## Theming
|
|
235
|
+
|
|
236
|
+
QuestCard uses the design system theme for colors:
|
|
237
|
+
|
|
238
|
+
```typescript
|
|
239
|
+
theme.colors.overlay.mono // Card background
|
|
240
|
+
theme.colors.border.secondary // Card border (default/expiring only)
|
|
241
|
+
theme.colors.content.primary // Title text
|
|
242
|
+
theme.colors.content.tertiary // Description and caption text
|
|
243
|
+
theme.colors.content.alert.secondary // Expiring badge color
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
## Migration from v1
|
|
247
|
+
|
|
248
|
+
```diff
|
|
249
|
+
<QuestCard
|
|
250
|
+
title="Play any game"
|
|
251
|
+
- subtitle="0/12 hours"
|
|
252
|
+
+ description="With Play Time Rewards On"
|
|
253
|
+
+ caption="0/12 hours"
|
|
254
|
+
icon={<Flag />}
|
|
255
|
+
- status="warning"
|
|
256
|
+
- statusIcon={<AlertCircle />}
|
|
257
|
+
+ questState="expiring"
|
|
258
|
+
trailing={<Tag>+50</Tag>}
|
|
259
|
+
/>
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
## Accessibility
|
|
263
|
+
|
|
264
|
+
- Uses semantic HTML structure
|
|
265
|
+
- Interactive cards support keyboard navigation
|
|
266
|
+
- Quest state visuals provide clear feedback (opacity, border, badge)
|
|
267
|
+
- Supports custom `onPress` for full card interaction
|
|
268
|
+
- Includes `testID` prop for testing
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-quest-card",
|
|
3
|
-
"version": "0.148.
|
|
3
|
+
"version": "0.148.2",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.148.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.148.
|
|
17
|
+
"@xsolla/xui-core": "0.148.2",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.148.2"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|