@xsolla/xui-quest-card 0.99.0 → 0.101.0-pr167.1772008285
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 +209 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,36 +1,229 @@
|
|
|
1
|
-
#
|
|
1
|
+
# QuestCard
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A cross-platform React card component for displaying quest or mission items with progress tracking, status indicators, and reward tags. Perfect for gamification systems, daily challenges, and achievement displays.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-quest-card
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-quest-card
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
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
|
+
subtitle="0/12 hours"
|
|
27
|
+
icon={<Flag />}
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### QuestCard with Status and Rewards
|
|
12
34
|
|
|
13
35
|
```tsx
|
|
36
|
+
import * as React from 'react';
|
|
37
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
38
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
39
|
+
import { AlertCircle } from '@xsolla/xui-icons';
|
|
40
|
+
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
|
|
41
|
+
import { XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
42
|
+
|
|
43
|
+
export default function QuestCardWithStatus() {
|
|
44
|
+
return (
|
|
45
|
+
<QuestCard
|
|
46
|
+
title="Play any game (with Play Time Rewards On)"
|
|
47
|
+
subtitle="0/12 hours"
|
|
48
|
+
icon={<Flag />}
|
|
49
|
+
status="alert"
|
|
50
|
+
statusIcon={<AlertCircle />}
|
|
51
|
+
trailing={
|
|
52
|
+
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>
|
|
53
|
+
5x
|
|
54
|
+
</Tag>
|
|
55
|
+
}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### QuestCard Status Variants
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import * as React from 'react';
|
|
65
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
66
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
67
|
+
import { AlertCircle } from '@xsolla/xui-icons';
|
|
68
|
+
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
|
|
69
|
+
import { XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
|
|
70
|
+
|
|
71
|
+
export default function QuestCardStatuses() {
|
|
72
|
+
return (
|
|
73
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
74
|
+
{/* Alert Status */}
|
|
75
|
+
<QuestCard
|
|
76
|
+
title="Urgent quest"
|
|
77
|
+
subtitle="Expires in 1 hour"
|
|
78
|
+
icon={<Flag />}
|
|
79
|
+
status="alert"
|
|
80
|
+
statusIcon={<AlertCircle />}
|
|
81
|
+
trailing={<Tag size="sm" tone="alert">Urgent</Tag>}
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
{/* Warning Status */}
|
|
85
|
+
<QuestCard
|
|
86
|
+
title="Expiring soon"
|
|
87
|
+
subtitle="2 hours left"
|
|
88
|
+
icon={<Clock />}
|
|
89
|
+
status="warning"
|
|
90
|
+
statusIcon={<AlertCircle />}
|
|
91
|
+
trailing={<Tag size="sm" tone="warning">Soon</Tag>}
|
|
92
|
+
/>
|
|
93
|
+
|
|
94
|
+
{/* Success Status */}
|
|
95
|
+
<QuestCard
|
|
96
|
+
title="Completed quest"
|
|
97
|
+
subtitle="1/1 done"
|
|
98
|
+
icon={<CheckCr />}
|
|
99
|
+
status="success"
|
|
100
|
+
statusIcon={<CheckCr />}
|
|
101
|
+
trailing={<Tag size="sm" tone="success">Done</Tag>}
|
|
102
|
+
/>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Quest List
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import * as React from 'react';
|
|
112
|
+
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
113
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
114
|
+
import { AlertCircle } from '@xsolla/xui-icons';
|
|
115
|
+
import { Flag, CheckCr } from '@xsolla/xui-icons-base';
|
|
116
|
+
import { XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
|
|
117
|
+
|
|
118
|
+
export default function QuestList() {
|
|
119
|
+
return (
|
|
120
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
121
|
+
<QuestCard
|
|
122
|
+
title="Play any game"
|
|
123
|
+
subtitle="0/12 hours"
|
|
124
|
+
icon={<Flag />}
|
|
125
|
+
status="alert"
|
|
126
|
+
statusIcon={<AlertCircle />}
|
|
127
|
+
trailing={<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>5x</Tag>}
|
|
128
|
+
onPress={() => console.log('Quest 1 clicked')}
|
|
129
|
+
/>
|
|
130
|
+
<QuestCard
|
|
131
|
+
title="Complete daily login"
|
|
132
|
+
subtitle="1/1 completed"
|
|
133
|
+
icon={<CheckCr />}
|
|
134
|
+
status="success"
|
|
135
|
+
statusIcon={<CheckCr />}
|
|
136
|
+
trailing={<Tag size="sm" tone="success">Done</Tag>}
|
|
137
|
+
/>
|
|
138
|
+
<QuestCard
|
|
139
|
+
title="Invite 3 friends"
|
|
140
|
+
subtitle="1/3 invited"
|
|
141
|
+
icon={<Flag />}
|
|
142
|
+
trailing={<Tag size="sm" tone="brand" icon={<XsollaTicket />}>500</Tag>}
|
|
143
|
+
onPress={() => console.log('Quest 3 clicked')}
|
|
144
|
+
/>
|
|
145
|
+
<QuestCard
|
|
146
|
+
title="Reach level 10"
|
|
147
|
+
subtitle="Level 7/10"
|
|
148
|
+
icon={<Flag />}
|
|
149
|
+
trailing={
|
|
150
|
+
<div style={{ display: 'flex', gap: 4 }}>
|
|
151
|
+
<Tag size="sm" tone="brand" icon={<XsollaPoint />}>100</Tag>
|
|
152
|
+
<Tag size="sm" tone="secondary">2x</Tag>
|
|
153
|
+
</div>
|
|
154
|
+
}
|
|
155
|
+
/>
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Anatomy
|
|
162
|
+
|
|
163
|
+
Import the component and use it directly:
|
|
164
|
+
|
|
165
|
+
```jsx
|
|
14
166
|
import { QuestCard } from '@xsolla/xui-quest-card';
|
|
15
167
|
|
|
16
168
|
<QuestCard
|
|
17
|
-
title="
|
|
18
|
-
subtitle="0/10
|
|
19
|
-
|
|
20
|
-
|
|
169
|
+
title="Quest Title" // Required: Quest name
|
|
170
|
+
subtitle="0/10 progress" // Optional: Progress text
|
|
171
|
+
icon={<Flag />} // Optional: Quest icon
|
|
172
|
+
status="alert" // Optional: Status indicator
|
|
173
|
+
statusIcon={<AlertCircle />} // Optional: Custom status icon
|
|
174
|
+
trailing={<Tag />} // Optional: Reward/action content
|
|
175
|
+
onPress={() => {}} // Optional: Card press handler
|
|
21
176
|
/>
|
|
22
177
|
```
|
|
23
178
|
|
|
24
|
-
##
|
|
179
|
+
## API Reference
|
|
25
180
|
|
|
26
181
|
### QuestCard
|
|
27
182
|
|
|
183
|
+
A card component for displaying quest or mission items.
|
|
184
|
+
|
|
185
|
+
**QuestCard Props:**
|
|
186
|
+
|
|
28
187
|
| Prop | Type | Default | Description |
|
|
29
|
-
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
188
|
+
| :--- | :--- | :------ | :---------- |
|
|
189
|
+
| title | `string` | required | Quest title text. |
|
|
190
|
+
| subtitle | `string` | - | Quest progress or description (e.g., "0/12 hours"). |
|
|
191
|
+
| icon | `ReactNode` | - | Icon to display in the icon container. |
|
|
192
|
+
| status | `"default" \| "alert" \| "warning" \| "success"` | - | Status indicator type. |
|
|
193
|
+
| statusIcon | `ReactNode` | - | Custom status icon (overrides default status indicator). |
|
|
194
|
+
| trailing | `ReactNode` | - | Reward tag or custom trailing content. |
|
|
195
|
+
| onPress | `() => void` | - | Card press handler. |
|
|
196
|
+
| className | `string` | - | Custom className for the container. |
|
|
197
|
+
| testID | `string` | - | Test ID for testing. |
|
|
198
|
+
|
|
199
|
+
**Status Types:**
|
|
200
|
+
|
|
201
|
+
| Status | Description |
|
|
202
|
+
| :----- | :---------- |
|
|
203
|
+
| default | No special status styling |
|
|
204
|
+
| alert | Red/alert color for urgent quests |
|
|
205
|
+
| warning | Yellow/warning color for expiring quests |
|
|
206
|
+
| success | Green/success color for completed quests |
|
|
207
|
+
|
|
208
|
+
## Theming
|
|
209
|
+
|
|
210
|
+
QuestCard uses the design system theme for colors:
|
|
211
|
+
|
|
212
|
+
```typescript
|
|
213
|
+
// Colors accessed via theme
|
|
214
|
+
theme.colors.background.primary // Card background
|
|
215
|
+
theme.colors.content.primary // Title text
|
|
216
|
+
theme.colors.content.tertiary // Subtitle text
|
|
217
|
+
theme.colors.content.alert // Alert status color
|
|
218
|
+
theme.colors.content.warning // Warning status color
|
|
219
|
+
theme.colors.content.success // Success status color
|
|
220
|
+
theme.colors.overlay.mono // Icon container background
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Accessibility
|
|
224
|
+
|
|
225
|
+
- Uses semantic HTML structure
|
|
226
|
+
- Interactive cards support keyboard navigation
|
|
227
|
+
- Status icons provide visual feedback
|
|
228
|
+
- Supports custom `onPress` for full card interaction
|
|
229
|
+
- 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.
|
|
3
|
+
"version": "0.101.0-pr167.1772008285",
|
|
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.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.101.0-pr167.1772008285",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.101.0-pr167.1772008285"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|