@valpro-labs/ui 1.14.0 → 1.15.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/dist/components/blocks/reward-item-skeleton.d.ts +2 -13
- package/dist/components/blocks/reward-item-skeleton.d.ts.map +1 -1
- package/dist/components/blocks/reward-item-skeleton.js +1 -13
- package/dist/components/blocks/reward-item-skeleton.js.map +1 -1
- package/dist/components/blocks/reward-item.d.ts +18 -40
- package/dist/components/blocks/reward-item.d.ts.map +1 -1
- package/dist/components/blocks/reward-item.js +7 -14
- package/dist/components/blocks/reward-item.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
thumbnailSize?: number;
|
|
4
|
-
/** Extra classes merged onto the outer row wrapper. */
|
|
5
|
-
className?: string;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* Loading placeholder for `RewardItem`. Mirrors the real row's icon tile
|
|
9
|
-
* plus two-line reward text stack so reward lists stay steady while data loads.
|
|
10
|
-
*/
|
|
11
|
-
declare function RewardItemSkeleton({ thumbnailSize, className, }: RewardItemSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export { RewardItemSkeleton };
|
|
13
|
-
export type { RewardItemSkeletonProps };
|
|
1
|
+
export { RewardItemSkeleton } from '../../components/blocks/reward-item';
|
|
2
|
+
export type { RewardItemSkeletonProps } from '../../components/blocks/reward-item';
|
|
14
3
|
//# sourceMappingURL=reward-item-skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reward-item-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/reward-item-skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reward-item-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/reward-item-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC"}
|
|
@@ -1,14 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { Skeleton } from '../../components/ui/skeleton';
|
|
4
|
-
import { cn } from '../../lib/utils';
|
|
5
|
-
const DEFAULT_REWARD_THUMBNAIL_SIZE = 40;
|
|
6
|
-
/**
|
|
7
|
-
* Loading placeholder for `RewardItem`. Mirrors the real row's icon tile
|
|
8
|
-
* plus two-line reward text stack so reward lists stay steady while data loads.
|
|
9
|
-
*/
|
|
10
|
-
function RewardItemSkeleton({ thumbnailSize = DEFAULT_REWARD_THUMBNAIL_SIZE, className, }) {
|
|
11
|
-
return (_jsxs(View, { className: cn('relative flex-row items-center gap-x-4 overflow-hidden px-4 py-3', className), children: [_jsx(Skeleton, { className: "rounded-lg", style: { width: thumbnailSize, height: thumbnailSize } }), _jsxs(View, { className: "flex-1", children: [_jsx(Skeleton, { className: "h-6 w-40 rounded-md" }), _jsx(Skeleton, { className: "mt-0.5 h-4 w-16 rounded-md" })] })] }));
|
|
12
|
-
}
|
|
13
|
-
export { RewardItemSkeleton };
|
|
1
|
+
export { RewardItemSkeleton } from '../../components/blocks/reward-item';
|
|
14
2
|
//# sourceMappingURL=reward-item-skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reward-item-skeleton.js","sourceRoot":"","sources":["../../../src/components/blocks/reward-item-skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reward-item-skeleton.js","sourceRoot":"","sources":["../../../src/components/blocks/reward-item-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}
|
|
@@ -1,48 +1,26 @@
|
|
|
1
|
-
import type { OwnedItemCardProps
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* stories for common reward types.
|
|
8
|
-
*/
|
|
9
|
-
thumbnailVariant?: RewardThumbnailVariant;
|
|
10
|
-
/** Thumbnail tile size in px. Defaults to the source app's 40px reward row icon. */
|
|
11
|
-
thumbnailSize?: number;
|
|
12
|
-
/** Optional image style passed through to the inner `OwnedItemCard` icon. */
|
|
1
|
+
import type { OwnedItemCardProps } from '../../components/blocks/owned-item-card';
|
|
2
|
+
type RewardThumbnailVariant = OwnedItemCardProps['itemVariant'];
|
|
3
|
+
interface RewardItemProps extends Pick<OwnedItemCardProps, 'iconUrl'> {
|
|
4
|
+
amount?: number;
|
|
5
|
+
className?: string;
|
|
6
|
+
hideTier?: boolean;
|
|
13
7
|
iconStyle?: OwnedItemCardProps['iconStyle'];
|
|
14
|
-
|
|
8
|
+
isCompleted?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
isNext?: boolean;
|
|
15
11
|
name: string;
|
|
16
|
-
/** Quantity multiplier; suffixes `"x{amount}"` after the name when > 1. */
|
|
17
|
-
amount?: number;
|
|
18
|
-
/** Sub-label shown under the name — e.g. `"TIER 5"` or `"EPILOGUE 2"`. Consumer resolves the string (i18n, etc.). */
|
|
19
|
-
tierLabel?: string;
|
|
20
|
-
/** XP accumulated toward this level. Pair with `xp` to draw the next-level progress stripe. */
|
|
21
12
|
progressionXp?: number;
|
|
22
|
-
|
|
13
|
+
thumbnailSize?: number;
|
|
14
|
+
thumbnailVariant?: RewardThumbnailVariant;
|
|
15
|
+
tierLabel?: string;
|
|
23
16
|
xp?: number;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
/** Enables the progress stripe underlay (needs `xp` + `progressionXp`). */
|
|
27
|
-
isNext?: boolean;
|
|
28
|
-
/** Hide the tier sub-label while keeping its height, so adjacent rows line up. */
|
|
29
|
-
hideTier?: boolean;
|
|
30
|
-
/** Show the skeleton placeholder instead of the real row. */
|
|
31
|
-
isLoading?: boolean;
|
|
32
|
-
/** Extra classes merged onto the outer row wrapper. */
|
|
17
|
+
}
|
|
18
|
+
interface RewardItemSkeletonProps {
|
|
33
19
|
className?: string;
|
|
20
|
+
thumbnailSize?: number;
|
|
34
21
|
}
|
|
35
|
-
/**
|
|
36
|
-
* One row inside a battle-pass / event-pass reward list — thumbnail on the
|
|
37
|
-
* left, reward name + tier sub-label stacked on the right. Completed rows
|
|
38
|
-
* get a green wash; the current "next" row gets an XP progress stripe.
|
|
39
|
-
*
|
|
40
|
-
* Data-free: the consumer resolves the reward metadata, chooses when to
|
|
41
|
-
* render `"TIER N"` / `"EPILOGUE N"`, and passes the raw icon URL + flags.
|
|
42
|
-
* Stack instances with `<Separator />` in between to rebuild the app's
|
|
43
|
-
* `RewardList` container on the caller side.
|
|
44
|
-
*/
|
|
45
22
|
declare function RewardItem({ iconUrl, iconStyle, thumbnailVariant, thumbnailSize, name, amount, tierLabel, progressionXp, xp, isCompleted, isNext, hideTier, isLoading, className, }: RewardItemProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
-
|
|
47
|
-
export
|
|
23
|
+
declare function RewardItemSkeleton({ thumbnailSize, className, }: RewardItemSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export { RewardItem, RewardItemSkeleton };
|
|
25
|
+
export type { RewardItemProps, RewardItemSkeletonProps, RewardThumbnailVariant };
|
|
48
26
|
//# sourceMappingURL=reward-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reward-item.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/reward-item.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reward-item.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/reward-item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAQ9E,KAAK,sBAAsB,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAEhE,UAAU,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,UAAU,CAAC,EAClB,OAAO,EACP,SAAS,EACT,gBAA4B,EAC5B,aAA6C,EAC7C,IAAI,EACJ,MAAM,EACN,SAAS,EACT,aAAa,EACb,EAAE,EACF,WAAmB,EACnB,MAAc,EACd,QAAgB,EAChB,SAAiB,EACjB,SAAS,GACV,EAAE,eAAe,2CA4DjB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,aAA6C,EAC7C,SAAS,GACV,EAAE,uBAAuB,2CAUzB;AAED,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import { OwnedItemCard } from '../../components/blocks/owned-item-card';
|
|
4
|
-
import {
|
|
4
|
+
import { Skeleton } from '../../components/ui/skeleton';
|
|
5
5
|
import { Text } from '../../components/ui/text';
|
|
6
6
|
import { cn } from '../../lib/utils';
|
|
7
7
|
const DEFAULT_REWARD_THUMBNAIL_SIZE = 40;
|
|
8
8
|
const OWNED_ITEM_REFERENCE_SIZE = 114;
|
|
9
|
-
/**
|
|
10
|
-
* One row inside a battle-pass / event-pass reward list — thumbnail on the
|
|
11
|
-
* left, reward name + tier sub-label stacked on the right. Completed rows
|
|
12
|
-
* get a green wash; the current "next" row gets an XP progress stripe.
|
|
13
|
-
*
|
|
14
|
-
* Data-free: the consumer resolves the reward metadata, chooses when to
|
|
15
|
-
* render `"TIER N"` / `"EPILOGUE N"`, and passes the raw icon URL + flags.
|
|
16
|
-
* Stack instances with `<Separator />` in between to rebuild the app's
|
|
17
|
-
* `RewardList` container on the caller side.
|
|
18
|
-
*/
|
|
19
9
|
function RewardItem({ iconUrl, iconStyle, thumbnailVariant = 'default', thumbnailSize = DEFAULT_REWARD_THUMBNAIL_SIZE, name, amount, tierLabel, progressionXp, xp, isCompleted = false, isNext = false, hideTier = false, isLoading = false, className, }) {
|
|
20
10
|
if (isLoading) {
|
|
21
11
|
return _jsx(RewardItemSkeleton, { thumbnailSize: thumbnailSize, className: className });
|
|
@@ -23,11 +13,14 @@ function RewardItem({ iconUrl, iconStyle, thumbnailVariant = 'default', thumbnai
|
|
|
23
13
|
const showProgress = !isCompleted && isNext && !!xp && progressionXp !== undefined;
|
|
24
14
|
const progressPct = showProgress ? Math.min(100, (progressionXp / xp) * 100) : 0;
|
|
25
15
|
const thumbnailScale = thumbnailSize / OWNED_ITEM_REFERENCE_SIZE;
|
|
26
|
-
return (_jsxs(View, { className: cn('relative flex-row items-center gap-x-4 overflow-hidden px-4 py-3', isCompleted && 'bg-val-green-ui/20', className), children: [showProgress ? (_jsx(View, { className: "bg-val-green-ui/10 absolute top-0 bottom-0 left-0", style: { width: `${progressPct}%` } })) : null, _jsx(View, { className: "bg-secondary shrink-0 items-center justify-center overflow-hidden rounded-lg", style: {
|
|
27
|
-
width: OWNED_ITEM_REFERENCE_SIZE,
|
|
16
|
+
return (_jsxs(View, { className: cn('relative flex-row items-center gap-x-4 overflow-hidden px-4 py-3', isCompleted && 'bg-val-green-ui/20', className), children: [showProgress ? (_jsx(View, { className: "bg-val-green-ui/10 absolute top-0 bottom-0 left-0", style: { width: `${progressPct}%` } })) : null, _jsx(View, { className: "bg-secondary shrink-0 items-center justify-center overflow-hidden rounded-lg", style: { height: thumbnailSize, width: thumbnailSize }, children: _jsx(View, { style: {
|
|
28
17
|
height: OWNED_ITEM_REFERENCE_SIZE,
|
|
29
18
|
transform: [{ scale: thumbnailScale }],
|
|
19
|
+
width: OWNED_ITEM_REFERENCE_SIZE,
|
|
30
20
|
}, children: _jsx(OwnedItemCard, { iconUrl: iconUrl, itemVariant: thumbnailVariant, iconStyle: iconStyle, className: "bg-secondary h-full w-full" }) }) }), _jsxs(View, { className: "flex-1", children: [_jsxs(Text, { className: "text-foreground text-base font-bold tracking-tight uppercase", numberOfLines: 1, children: [name, amount && amount > 1 ? ` x${amount}` : ''] }), tierLabel ? (_jsx(View, { className: cn('mt-0.5 flex-row items-center gap-x-2', hideTier && 'opacity-0'), children: _jsx(Text, { className: cn('text-xs font-bold uppercase', isCompleted ? 'text-val-green-ui' : 'text-muted-foreground'), children: tierLabel }) })) : null] })] }));
|
|
31
21
|
}
|
|
32
|
-
|
|
22
|
+
function RewardItemSkeleton({ thumbnailSize = DEFAULT_REWARD_THUMBNAIL_SIZE, className, }) {
|
|
23
|
+
return (_jsxs(View, { className: cn('flex-row items-center gap-x-4 px-4 py-3', className), children: [_jsx(Skeleton, { className: "rounded-lg", style: { height: thumbnailSize, width: thumbnailSize } }), _jsxs(View, { className: "flex-1 gap-y-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] }));
|
|
24
|
+
}
|
|
25
|
+
export { RewardItem, RewardItemSkeleton };
|
|
33
26
|
//# sourceMappingURL=reward-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reward-item.js","sourceRoot":"","sources":["../../../src/components/blocks/reward-item.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"reward-item.js","sourceRoot":"","sources":["../../../src/components/blocks/reward-item.tsx"],"names":[],"mappings":"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"}
|