@xsolla/xui-quest-card 0.158.0 → 0.159.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 +64 -63
- package/native/index.js +13 -4
- package/native/index.js.map +1 -1
- package/native/index.mjs +13 -4
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.js +15 -5
- package/web/index.js.map +1 -1
- package/web/index.mjs +15 -5
- package/web/index.mjs.map +1 -1
package/README.md
CHANGED
|
@@ -13,9 +13,9 @@ npm install @xsolla/xui-quest-card
|
|
|
13
13
|
### Basic QuestCard
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import * as React from
|
|
17
|
-
import { QuestCard } from
|
|
18
|
-
import { Flag } from
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
import { QuestCard } from "@xsolla/xui-quest-card";
|
|
18
|
+
import { Flag } from "@xsolla/xui-icons-base";
|
|
19
19
|
|
|
20
20
|
export default function BasicQuestCard() {
|
|
21
21
|
return (
|
|
@@ -33,19 +33,21 @@ export default function BasicQuestCard() {
|
|
|
33
33
|
### QuestCard States
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
|
-
import * as React from
|
|
37
|
-
import { QuestCard } from
|
|
38
|
-
import { Tag } from
|
|
39
|
-
import { Flag, CheckCr, Clock } from
|
|
40
|
-
import { XsollaPoint } from
|
|
36
|
+
import * as React from "react";
|
|
37
|
+
import { QuestCard } from "@xsolla/xui-quest-card";
|
|
38
|
+
import { Tag } from "@xsolla/xui-tag";
|
|
39
|
+
import { Flag, CheckCr, Clock } from "@xsolla/xui-icons-base";
|
|
40
|
+
import { XsollaPoint } from "@xsolla/xui-icons-currency";
|
|
41
41
|
|
|
42
42
|
export default function QuestCardStates() {
|
|
43
43
|
const reward = (
|
|
44
|
-
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}
|
|
44
|
+
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>
|
|
45
|
+
+50
|
|
46
|
+
</Tag>
|
|
45
47
|
);
|
|
46
48
|
|
|
47
49
|
return (
|
|
48
|
-
<div style={{ display:
|
|
50
|
+
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
49
51
|
{/* Default — active quest */}
|
|
50
52
|
<QuestCard
|
|
51
53
|
title="Play any game"
|
|
@@ -93,17 +95,13 @@ export default function QuestCardStates() {
|
|
|
93
95
|
### Without Description or Caption
|
|
94
96
|
|
|
95
97
|
```tsx
|
|
96
|
-
import * as React from
|
|
97
|
-
import { QuestCard } from
|
|
98
|
-
import { Flag } from
|
|
98
|
+
import * as React from "react";
|
|
99
|
+
import { QuestCard } from "@xsolla/xui-quest-card";
|
|
100
|
+
import { Flag } from "@xsolla/xui-icons-base";
|
|
99
101
|
|
|
100
102
|
export default function MinimalQuestCard() {
|
|
101
103
|
return (
|
|
102
|
-
<QuestCard
|
|
103
|
-
title="Simple quest"
|
|
104
|
-
questState="default"
|
|
105
|
-
icon={<Flag />}
|
|
106
|
-
/>
|
|
104
|
+
<QuestCard title="Simple quest" questState="default" icon={<Flag />} />
|
|
107
105
|
);
|
|
108
106
|
}
|
|
109
107
|
```
|
|
@@ -111,19 +109,21 @@ export default function MinimalQuestCard() {
|
|
|
111
109
|
### Quest List
|
|
112
110
|
|
|
113
111
|
```tsx
|
|
114
|
-
import * as React from
|
|
115
|
-
import { QuestCard } from
|
|
116
|
-
import { Tag } from
|
|
117
|
-
import { Flag, CheckCr, Clock } from
|
|
118
|
-
import { XsollaPoint } from
|
|
112
|
+
import * as React from "react";
|
|
113
|
+
import { QuestCard } from "@xsolla/xui-quest-card";
|
|
114
|
+
import { Tag } from "@xsolla/xui-tag";
|
|
115
|
+
import { Flag, CheckCr, Clock } from "@xsolla/xui-icons-base";
|
|
116
|
+
import { XsollaPoint } from "@xsolla/xui-icons-currency";
|
|
119
117
|
|
|
120
118
|
export default function QuestList() {
|
|
121
119
|
const reward = (
|
|
122
|
-
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}
|
|
120
|
+
<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>
|
|
121
|
+
+50
|
|
122
|
+
</Tag>
|
|
123
123
|
);
|
|
124
124
|
|
|
125
125
|
return (
|
|
126
|
-
<div style={{ display:
|
|
126
|
+
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
127
127
|
<QuestCard
|
|
128
128
|
title="Play any game"
|
|
129
129
|
description="With Play Time Rewards On"
|
|
@@ -131,7 +131,7 @@ export default function QuestList() {
|
|
|
131
131
|
questState="default"
|
|
132
132
|
icon={<Flag />}
|
|
133
133
|
trailing={reward}
|
|
134
|
-
onPress={() => console.log(
|
|
134
|
+
onPress={() => console.log("Quest 1 clicked")}
|
|
135
135
|
/>
|
|
136
136
|
<QuestCard
|
|
137
137
|
title="Complete daily login"
|
|
@@ -156,7 +156,7 @@ export default function QuestList() {
|
|
|
156
156
|
questState="expiring"
|
|
157
157
|
icon={<Flag />}
|
|
158
158
|
trailing={reward}
|
|
159
|
-
onPress={() => console.log(
|
|
159
|
+
onPress={() => console.log("Quest 4 clicked")}
|
|
160
160
|
/>
|
|
161
161
|
</div>
|
|
162
162
|
);
|
|
@@ -168,17 +168,17 @@ export default function QuestList() {
|
|
|
168
168
|
Import the component and use it directly:
|
|
169
169
|
|
|
170
170
|
```jsx
|
|
171
|
-
import { QuestCard } from
|
|
171
|
+
import { QuestCard } from "@xsolla/xui-quest-card";
|
|
172
172
|
|
|
173
173
|
<QuestCard
|
|
174
|
-
title="Quest Title"
|
|
175
|
-
description="Description"
|
|
176
|
-
caption="0/100"
|
|
177
|
-
questState="default"
|
|
178
|
-
icon={<Flag />}
|
|
179
|
-
trailing={<Tag />}
|
|
180
|
-
onPress={() => {}}
|
|
181
|
-
|
|
174
|
+
title="Quest Title" // Required: Quest name
|
|
175
|
+
description="Description" // Optional: Secondary text
|
|
176
|
+
caption="0/100" // Optional: Progress or status text
|
|
177
|
+
questState="default" // Optional: Visual state
|
|
178
|
+
icon={<Flag />} // Optional: Quest icon
|
|
179
|
+
trailing={<Tag />} // Optional: Reward/action content
|
|
180
|
+
onPress={() => {}} // Optional: Card press handler
|
|
181
|
+
/>;
|
|
182
182
|
```
|
|
183
183
|
|
|
184
184
|
## API Reference
|
|
@@ -189,45 +189,46 @@ A card component for displaying quest or mission items.
|
|
|
189
189
|
|
|
190
190
|
**QuestCard Props:**
|
|
191
191
|
|
|
192
|
-
| Prop
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
|
|
|
192
|
+
| Prop | Type | Default | Description |
|
|
193
|
+
| :---------- | :---------------------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------ |
|
|
194
|
+
| `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
|
|
195
|
+
| title | `string` | required | Quest title text. |
|
|
196
|
+
| description | `string` | - | Secondary description text below the title. |
|
|
197
|
+
| caption | `string` | - | Bottom caption text (e.g. "0/100", "Completed", "Expired"). |
|
|
198
|
+
| questState | `"default" \| "completed" \| "expired" \| "expiring"` | `"default"` | Visual quest state controlling opacity, border, and badge. |
|
|
199
|
+
| icon | `ReactNode` | - | Icon to display in the icon container. |
|
|
200
|
+
| trailing | `ReactNode` | - | Reward tag or custom trailing content. |
|
|
201
|
+
| onPress | `() => void` | - | Card press handler. |
|
|
202
|
+
| className | `string` | - | Custom className for the container. |
|
|
203
|
+
| testID | `string` | - | Test ID for testing. |
|
|
203
204
|
|
|
204
205
|
**Quest States:**
|
|
205
206
|
|
|
206
|
-
| State
|
|
207
|
-
|
|
|
208
|
-
| default
|
|
209
|
-
| completed | Completed quest, 48% opacity, no border
|
|
210
|
-
| expired
|
|
211
|
-
| expiring
|
|
207
|
+
| State | Description |
|
|
208
|
+
| :-------- | :---------------------------------------------------------------------------- |
|
|
209
|
+
| default | Active quest with border, full opacity |
|
|
210
|
+
| completed | Completed quest, 48% opacity, no border |
|
|
211
|
+
| expired | Expired quest, 48% opacity, no border |
|
|
212
|
+
| expiring | Urgent quest with border, full opacity, and a red lightning badge on the icon |
|
|
212
213
|
|
|
213
214
|
**Recommended icons per state:**
|
|
214
215
|
|
|
215
|
-
| State
|
|
216
|
-
|
|
|
217
|
-
| default
|
|
216
|
+
| State | Icon |
|
|
217
|
+
| :-------- | :------------------------------------------ |
|
|
218
|
+
| default | `<Flag />` from `@xsolla/xui-icons-base` |
|
|
218
219
|
| completed | `<CheckCr />` from `@xsolla/xui-icons-base` |
|
|
219
|
-
| expired
|
|
220
|
-
| expiring
|
|
220
|
+
| expired | `<Clock />` from `@xsolla/xui-icons-base` |
|
|
221
|
+
| expiring | `<Flag />` from `@xsolla/xui-icons-base` |
|
|
221
222
|
|
|
222
223
|
### Deprecated Props
|
|
223
224
|
|
|
224
225
|
These props still work but will emit console warnings in development:
|
|
225
226
|
|
|
226
|
-
| Prop
|
|
227
|
-
|
|
|
228
|
-
| subtitle
|
|
229
|
-
| status
|
|
230
|
-
| statusIcon | `questState`
|
|
227
|
+
| Prop | Replacement | Mapping |
|
|
228
|
+
| :--------- | :------------ | :-------------------------------------------------------------------------------- |
|
|
229
|
+
| subtitle | `description` | Direct alias |
|
|
230
|
+
| status | `questState` | "success" -> "completed", "warning"/"alert" -> "expiring", "default" -> "default" |
|
|
231
|
+
| statusIcon | `questState` | No longer rendered; visual state driven by `questState` |
|
|
231
232
|
|
|
232
233
|
## Migration from v1
|
|
233
234
|
|
package/native/index.js
CHANGED
|
@@ -235,6 +235,8 @@ var Text = ({
|
|
|
235
235
|
numberOfLines,
|
|
236
236
|
id,
|
|
237
237
|
role,
|
|
238
|
+
testID,
|
|
239
|
+
"data-testid": dataTestId,
|
|
238
240
|
style: styleProp,
|
|
239
241
|
...props
|
|
240
242
|
}) => {
|
|
@@ -264,7 +266,7 @@ var Text = ({
|
|
|
264
266
|
{
|
|
265
267
|
style: baseStyle,
|
|
266
268
|
numberOfLines,
|
|
267
|
-
testID: id,
|
|
269
|
+
testID: dataTestId || testID || id,
|
|
268
270
|
accessibilityRole,
|
|
269
271
|
children
|
|
270
272
|
}
|
|
@@ -275,7 +277,13 @@ var Text = ({
|
|
|
275
277
|
var import_react = __toESM(require("react"));
|
|
276
278
|
var import_react_native3 = require("react-native");
|
|
277
279
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
278
|
-
var Icon = ({
|
|
280
|
+
var Icon = ({
|
|
281
|
+
children,
|
|
282
|
+
color,
|
|
283
|
+
size,
|
|
284
|
+
testID,
|
|
285
|
+
"data-testid": dataTestId
|
|
286
|
+
}) => {
|
|
279
287
|
const style = {
|
|
280
288
|
width: typeof size === "number" ? size : void 0,
|
|
281
289
|
height: typeof size === "number" ? size : void 0,
|
|
@@ -292,7 +300,7 @@ var Icon = ({ children, color, size }) => {
|
|
|
292
300
|
}
|
|
293
301
|
return child;
|
|
294
302
|
});
|
|
295
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
|
|
303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
|
|
296
304
|
};
|
|
297
305
|
|
|
298
306
|
// ../../foundation/primitives-native/src/index.tsx
|
|
@@ -1046,6 +1054,7 @@ var BaseIcon = ({
|
|
|
1046
1054
|
className,
|
|
1047
1055
|
style,
|
|
1048
1056
|
"data-testid": testId,
|
|
1057
|
+
testID,
|
|
1049
1058
|
"aria-label": ariaLabel,
|
|
1050
1059
|
"aria-hidden": ariaHidden
|
|
1051
1060
|
}) => {
|
|
@@ -1058,7 +1067,7 @@ var BaseIcon = ({
|
|
|
1058
1067
|
$color: color,
|
|
1059
1068
|
className,
|
|
1060
1069
|
style,
|
|
1061
|
-
"data-testid": testId,
|
|
1070
|
+
"data-testid": testId || testID,
|
|
1062
1071
|
role: ariaLabel ? "img" : void 0,
|
|
1063
1072
|
"aria-label": ariaLabel,
|
|
1064
1073
|
"aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
|