mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

do to formatters

Browse Source
This commit is contained in:
Marc Mintel
2026-01-24 01:07:43 +01:00
parent ae59df61eb
commit 891b3cf0ee
140 changed files with 656 additions and 1159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/website/app/leagues/[id]/roster/page.tsx
View File

@@ -1,11 +1,11 @@
import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
import { notFound } from 'next/navigation';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { RosterTable } from '@/components/leagues/RosterTable';
import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { notFound } from 'next/navigation';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
interface Props {
params: Promise<{ id: string }>;
@@ -25,7 +25,7 @@ export default async function LeagueRosterPage({ params }: Props) {
driverName: m.driver.name,
role: m.role,
joinedAt: m.joinedAt,
joinedAtLabel: DateDisplay.formatShort(m.joinedAt)
joinedAtLabel: DateFormatter.formatShort(m.joinedAt)
}));
return (

86
apps/website/app/sponsor/campaigns/page.tsx
View File

@@ -1,89 +1,3 @@
'use client';
import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
import { SponsorCampaignsTemplate, SponsorshipType, SponsorCampaignsViewData } from "@/templates/SponsorCampaignsTemplate";
import { Box } from "@/ui/Box";
import { Button } from "@/ui/Button";
import { Text } from "@/ui/Text";
import { useState } from 'react';
import { CurrencyDisplay } from "@/lib/display-objects/CurrencyDisplay";
import { NumberDisplay } from "@/lib/display-objects/NumberDisplay";
import { DateDisplay } from "@/lib/display-objects/DateDisplay";
import { StatusDisplay } from "@/lib/display-objects/StatusDisplay";
export default function SponsorCampaignsPage() {
const [typeFilter, setTypeFilter] = useState<SponsorshipType>('all');
const [searchQuery, setSearchQuery] = useState('');
const { data: sponsorshipsData, isLoading, error, retry } = useSponsorSponsorships('demo-sponsor-1');
if (isLoading) {
return (
<Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
<Box textAlign="center">
<Box w="8" h="8" border borderTop={false} borderColor="border-primary-blue" rounded="full" animate="spin" mx="auto" mb={4} />
<Text color="text-gray-400">Loading sponsorships...</Text>
</Box>
</Box>
);
}
if (error || !sponsorshipsData) {
return (
<Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
<Box textAlign="center">
<Text color="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</Text>
{error && (
<Button variant="secondary" onClick={retry} mt={4}>
Retry
</Button>
)}
</Box>
</Box>
);
}
// Calculate stats
const totalInvestment = sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0);
const totalImpressions = sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0);
const stats = {
total: sponsorshipsData.sponsorships.length,
active: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').length,
pending: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'pending_approval').length,
approved: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'approved').length,
rejected: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'rejected').length,
formattedTotalInvestment: CurrencyDisplay.format(totalInvestment),
formattedTotalImpressions: NumberDisplay.formatCompact(totalImpressions),
};
const sponsorships = sponsorshipsData.sponsorships.map((s: any) => ({
...s,
formattedInvestment: CurrencyDisplay.format(s.price),
formattedImpressions: NumberDisplay.format(s.impressions),
formattedStartDate: s.seasonStartDate ? DateDisplay.formatShort(s.seasonStartDate) : undefined,
formattedEndDate: s.seasonEndDate ? DateDisplay.formatShort(s.seasonEndDate) : undefined,
}));
const viewData: SponsorCampaignsViewData = {
sponsorships,
stats: stats as any,
};
const filteredSponsorships = sponsorships.filter((s: any) => {
// For now, we only have leagues in the DTO
if (typeFilter !== 'all' && typeFilter !== 'leagues') return false;
if (searchQuery && !s.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) return false;
return true;
});
return (
<SponsorCampaignsTemplate
viewData={viewData}
filteredSponsorships={filteredSponsorships as any}
typeFilter={typeFilter}
setTypeFilter={setTypeFilter}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
/>
);
}

24
apps/website/client-wrapper/RosterAdminPage.tsx
View File

@@ -1,27 +1,27 @@
'use client';
import type { MembershipRole } from '@/lib/types/MembershipRole';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';
import {
useApproveJoinRequest,
useLeagueJoinRequests,
useLeagueRosterAdmin,
useApproveJoinRequest,
useRejectJoinRequest,
useUpdateMemberRole,
useRemoveMember,
useUpdateMemberRole,
} from "@/hooks/league/useLeagueRosterAdmin";
import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';
import type { JoinRequestData, RosterMemberData, LeagueRosterAdminViewData } from '@/lib/view-data/LeagueRosterAdminViewData';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
import type { LeagueRosterJoinRequestDTO } from '@/lib/types/generated/LeagueRosterJoinRequestDTO';
import type { LeagueRosterMemberDTO } from '@/lib/types/generated/LeagueRosterMemberDTO';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
import type { MembershipRole } from '@/lib/types/MembershipRole';
import type { JoinRequestData, LeagueRosterAdminViewData, RosterMemberData } from '@/lib/view-data/LeagueRosterAdminViewData';
import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];
export function RosterAdminPage({ viewData: initialViewData }: Partial<ClientWrapperProps<LeagueRosterAdminViewData>>) {
export function RosterAdminPage({ }: Partial<ClientWrapperProps<LeagueRosterAdminViewData>>) {
const params = useParams();
const leagueId = params.id as string;
@@ -83,7 +83,7 @@ export function RosterAdminPage({ viewData: initialViewData }: Partial<ClientWra
id: req.id,
driver: req.driver as { id: string; name: string },
requestedAt: req.requestedAt,
formattedRequestedAt: DateDisplay.formatShort(req.requestedAt),
formattedRequestedAt: DateFormatter.formatShort(req.requestedAt),
message: req.message || undefined,
})),
members: members.map((m: LeagueRosterMemberDTO): RosterMemberData => ({
@@ -91,7 +91,7 @@ export function RosterAdminPage({ viewData: initialViewData }: Partial<ClientWra
driver: m.driver as { id: string; name: string },
role: m.role,
joinedAt: m.joinedAt,
formattedJoinedAt: DateDisplay.formatShort(m.joinedAt),
formattedJoinedAt: DateFormatter.formatShort(m.joinedAt),
})),
}), [leagueId, joinRequests, members]);

6
apps/website/components/achievements/AchievementCard.tsx
View File

@@ -1,8 +1,8 @@
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { Text } from '@/ui/Text';
interface AchievementCardProps {
title: string;
@@ -36,7 +36,7 @@ export function AchievementCard({
<Text weight="medium" variant="high">{title}</Text>
<Text size="xs" variant="med">{description}</Text>
<Text size="xs" variant="low">
{DateDisplay.formatShort(unlockedAt)}
{DateFormatter.formatShort(unlockedAt)}
</Text>
</Stack>
</Group>

8
apps/website/components/achievements/AchievementGrid.tsx
View File

@@ -1,15 +1,13 @@
import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
import { AchievementFormatter } from '@/lib/formatters/AchievementFormatter';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Group } from '@/ui/Group';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
import React from 'react';
interface Achievement {
id: string;
@@ -53,7 +51,7 @@ export function AchievementGrid({ achievements }: AchievementGridProps) {
<Grid cols={1} gap={4}>
{achievements.map((achievement) => {
const AchievementIcon = getAchievementIcon(achievement.icon);
const rarity = AchievementDisplay.getRarityVariant(achievement.rarity);
const rarity = AchievementFormatter.getRarityVariant(achievement.rarity);
return (
<Card
key={achievement.id}

24
apps/website/components/admin/AdminUsersTable.tsx
View File

@@ -1,26 +1,24 @@
'use client';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
import { Badge } from '@/ui/Badge';
import { Button } from '@/ui/Button';
import { DriverIdentity } from '@/ui/DriverIdentity';
import { Group } from '@/ui/Group';
import { IconButton } from '@/ui/IconButton';
import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { DriverIdentity } from '@/ui/DriverIdentity';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '@/ui/Table';
import { Text } from '@/ui/Text';
import { MoreVertical, Trash2 } from 'lucide-react';
import { UserStatusTag } from './UserStatusTag';
import React from 'react';
interface AdminUsersTableProps {
users: AdminUsersViewData['users'];
@@ -102,7 +100,7 @@ export function AdminUsersTable({
</TableCell>
<TableCell>
<Text size="sm" variant="low">
{user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
{user.lastLoginAt ? DateFormatter.formatShort(user.lastLoginAt) : 'Never'}
</Text>
</TableCell>
<TableCell>

4
apps/website/components/drivers/DriverEntryRow.tsx
View File

@@ -1,6 +1,6 @@
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
@@ -88,7 +88,7 @@ export function DriverEntryRow({
justifyContent="center"
fontSize="0.625rem"
>
{CountryFlagDisplay.fromCountryCode(country).toString()}
{CountryFlagFormatter.fromCountryCode(country).toString()}
</Stack>
</Stack>

8
apps/website/components/drivers/ProfileHero.tsx
View File

@@ -1,16 +1,16 @@
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';
interface ProfileHeroProps {
@@ -93,7 +93,7 @@ export function ProfileHero({
<Stack direction="row" align="center" gap={3} wrap mb={2}>
<Heading level={1}>{driver.name}</Heading>
<Text size="4xl" aria-label={`Country: ${driver.country}`}>
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
{CountryFlagFormatter.fromCountryCode(driver.country).toString()}
</Text>
</Stack>

57
apps/website/components/errors/ErrorAnalyticsDashboard.tsx
View File

@@ -11,52 +11,41 @@ import { Input } from '@/ui/Input';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
Activity,
AlertTriangle,
Bug,
ChevronDown,
Clock,
Copy,
Cpu,
Download,
FileText,
Globe,
RefreshCw,
Search,
Terminal,
Trash2,
Zap
Activity,
AlertTriangle,
Bug,
ChevronDown,
Clock,
Copy,
Cpu,
Download,
FileText,
Globe,
RefreshCw,
Search,
Terminal,
Trash2,
Zap
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DurationDisplay } from '@/lib/display-objects/DurationDisplay';
import { MemoryDisplay } from '@/lib/display-objects/MemoryDisplay';
import { PercentDisplay } from '@/lib/display-objects/PercentDisplay';
import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { DurationFormatter } from '@/lib/formatters/DurationFormatter';
import { MemoryFormatter } from '@/lib/formatters/MemoryFormatter';
import { PercentFormatter } from '@/lib/formatters/PercentFormatter';
interface ErrorAnalyticsDashboardProps {
/**
* Auto-refresh interval in milliseconds
*/
refreshInterval?: number;
/**
* Whether to show in production (default: false)
*/
showInProduction?: boolean;
}
function formatDuration(duration: number): string {
return DurationDisplay.formatMs(duration);
return DurationFormatter.formatMs(duration);
}
function formatPercentage(value: number, total: number): string {
if (total === 0) return '0%';
return PercentDisplay.format(value / total);
return PercentFormatter.format(value / total);
}
function formatMemory(bytes: number): string {
return MemoryDisplay.formatMB(bytes);
return MemoryFormatter.formatMB(bytes);
}
interface PerformanceWithMemory extends Performance {
@@ -327,7 +316,7 @@ export function ErrorAnalyticsDashboard({
<Stack display="flex" justifyContent="between" alignItems="start" gap={2} mb={1}>
<Text size="xs" font="mono" weight="bold" color="text-red-400" truncate>{error.type}</Text>
<Text size="xs" color="text-gray-500" fontSize="10px">
{DateDisplay.formatTime(error.timestamp)}
{DateFormatter.formatTime(error.timestamp)}
</Text>
</Stack>
<Text size="xs" color="text-gray-300" block mb={1}>{error.message}</Text>

8
apps/website/components/feed/FeedItemCard.tsx
View File

@@ -1,11 +1,11 @@
'use client';
import React, { useEffect, useState } from 'react';
import { TimeFormatter } from '@/lib/formatters/TimeFormatter';
import { Button } from '@/ui/Button';
import { FeedItem } from '@/ui/FeedItem';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';
interface FeedItemData {
id: string;
@@ -50,7 +50,7 @@ export function FeedItemCard({ item }: FeedItemCardProps) {
name: actor?.name || 'Unknown',
avatar: actor?.avatarUrl
}}
timestamp={TimeDisplay.timeAgo(item.timestamp)}
timestamp={TimeFormatter.timeAgo(item.timestamp)}
content={
<Stack gap={2}>
<Text weight="bold" variant="high">{item.headline}</Text>

10
apps/website/components/feed/FeedLayout.tsx
View File

@@ -1,14 +1,14 @@
import { FeedList } from '@/components/feed/FeedList';
import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
interface FeedItemData {
id: string;
@@ -49,12 +49,12 @@ export function FeedLayout({
}: FeedLayoutProps) {
const formattedUpcomingRaces = upcomingRaces.map(r => ({
...r,
formattedDate: DateDisplay.formatShort(r.scheduledAt),
formattedDate: DateFormatter.formatShort(r.scheduledAt),
}));
const formattedLatestResults = latestResults.map(r => ({
...r,
formattedDate: DateDisplay.formatShort(r.scheduledAt),
formattedDate: DateFormatter.formatShort(r.scheduledAt),
}));
return (

12
apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
View File

@@ -1,11 +1,11 @@
import { RankBadge } from '@/components/leaderboards/RankBadge';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { Trophy } from 'lucide-react';
@@ -69,8 +69,8 @@ export function DriverLeaderboardPreview({
</Text>
<Group gap={2}>
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
<Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
{SkillLevelDisplay.getLabel(driver.skillLevel)}
<Text size="xs" weight="bold" color={SkillLevelFormatter.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
{SkillLevelFormatter.getLabel(driver.skillLevel)}
</Text>
</Group>
</Group>
@@ -80,7 +80,7 @@ export function DriverLeaderboardPreview({
<Group gap={8}>
<Group direction="column" align="end" gap={0}>
<Text variant="primary" font="mono" weight="bold" block size="md" align="right">
{RatingDisplay.format(driver.rating)}
{RatingFormatter.format(driver.rating)}
</Text>
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
Rating

12
apps/website/components/leaderboards/LeaderboardPodium.tsx
View File

@@ -1,5 +1,5 @@
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
@@ -91,8 +91,8 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
border
transform="translateX(-50%)"
borderWidth="2px"
bg={MedalDisplay.getBg(position)}
color={MedalDisplay.getColor(position)}
bg={MedalFormatter.getBg(position)}
color={MedalFormatter.getColor(position)}
shadow="lg"
>
<Text size="sm" weight="bold">{position}</Text>
@@ -122,7 +122,7 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
block
color={isFirst ? 'text-warning-amber' : 'text-primary-blue'}
>
{RatingDisplay.format(driver.rating)}
{RatingFormatter.format(driver.rating)}
</Text>
<Stack direction="row" align="center" gap={3} mt={1}>
@@ -155,7 +155,7 @@ export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumPr
<Text
weight="bold"
size="4xl"
color={MedalDisplay.getColor(position)}
color={MedalFormatter.getColor(position)}
opacity={0.1}
fontSize={isFirst ? '5rem' : '3.5rem'}
>

11
apps/website/components/leaderboards/RankMedal.tsx
View File

@@ -1,11 +1,10 @@
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { RankMedal as UiRankMedal, RankMedalProps } from '@/ui/RankMedal';
import React from 'react';
import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
import { RankMedalProps, RankMedal as UiRankMedal } from '@/ui/RankMedal';
export function RankMedal(props: RankMedalProps) {
const variant = MedalDisplay.getVariant(props.rank);
const bg = MedalDisplay.getBg(props.rank);
const color = MedalDisplay.getColor(props.rank);
const variant = MedalFormatter.getVariant(props.rank);
const bg = MedalFormatter.getBg(props.rank);
const color = MedalFormatter.getColor(props.rank);
return (
<UiRankMedal

13
apps/website/components/leaderboards/RankingRow.tsx
View File

@@ -1,12 +1,11 @@
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
import { Text } from '@/ui/Text';
import { DeltaChip } from './DeltaChip';
import { RankBadge } from './RankBadge';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import React from 'react';
interface RankingRowProps {
id: string;
@@ -65,8 +64,8 @@ export function RankingRow({
</Text>
<Group gap={2}>
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{nationality}</Text>
<Text size="xs" weight="bold" style={{ color: SkillLevelDisplay.getColor(skillLevel) }} uppercase letterSpacing="wider">
{SkillLevelDisplay.getLabel(skillLevel)}
<Text size="xs" weight="bold" style={{ color: SkillLevelFormatter.getColor(skillLevel) }} uppercase letterSpacing="wider">
{SkillLevelFormatter.getLabel(skillLevel)}
</Text>
</Group>
</Group>
@@ -84,7 +83,7 @@ export function RankingRow({
</Group>
<Group direction="column" align="end" gap={0}>
<Text variant="primary" font="mono" weight="bold" block size="md">
{RatingDisplay.format(rating)}
{RatingFormatter.format(rating)}
</Text>
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
Rating

9
apps/website/components/leaderboards/RankingsPodium.tsx
View File

@@ -1,10 +1,7 @@
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { Surface } from '@/ui/Surface';
import React from 'react';
interface PodiumDriver {
id: string;
@@ -20,7 +17,7 @@ interface RankingsPodiumProps {
onDriverClick?: (id: string) => void;
}
export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
export function RankingsPodium({ podium }: RankingsPodiumProps) {
return (
<Group justify="center" align="end" gap={4}>
{[1, 0, 2].map((index) => {
@@ -57,7 +54,7 @@ export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
<Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'}>{driver.name}</Text>
<Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
{RatingDisplay.format(driver.rating)}
{RatingFormatter.format(driver.rating)}
</Text>
</Group>

26
apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx
View File

@@ -1,18 +1,16 @@
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { ChevronDown, ChevronUp, Calendar, CheckCircle, Trophy, Edit, Clock } from 'lucide-react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { Text } from '@/ui/Text';
import { Calendar, CheckCircle, ChevronDown, ChevronUp, Clock, Edit, Trophy } from 'lucide-react';
import { useState } from 'react';
interface RaceEvent {
id: string;
@@ -50,9 +48,6 @@ interface MonthGroup {
export function EnhancedLeagueSchedulePanel({
events,
leagueId,
currentDriverId,
isAdmin,
onRegister,
onWithdraw,
onEdit,
@@ -60,7 +55,6 @@ export function EnhancedLeagueSchedulePanel({
onRaceDetail,
onResultsClick,
}: EnhancedLeagueSchedulePanelProps) {
const router = useRouter();
const [expandedMonths, setExpandedMonths] = useState<Set<string>>(new Set());
// Group races by month
@@ -109,7 +103,7 @@ export function EnhancedLeagueSchedulePanel({
};
const formatTime = (scheduledAt: string) => {
return DateDisplay.formatDateTime(scheduledAt);
return DateFormatter.formatDateTime(scheduledAt);
};
const groups = groupRacesByMonth();
@@ -158,7 +152,7 @@ export function EnhancedLeagueSchedulePanel({
{isExpanded && (
<Box p={4}>
<Stack gap={3}>
{group.races.map((race, raceIndex) => (
{group.races.map((race) => (
<Surface
key={race.id}
variant="precision"

6
apps/website/components/leagues/LeagueActivityFeed.tsx
View File

@@ -1,10 +1,10 @@
import { ActivityFeedItem } from '@/components/feed/ActivityFeedItem';
import { useLeagueRaces } from "@/hooks/league/useLeagueRaces";
import { RelativeTimeFormatter } from '@/lib/formatters/RelativeTimeFormatter';
import { LeagueActivityService } from '@/lib/services/league/LeagueActivityService';
import { RelativeTimeDisplay } from '@/lib/display-objects/RelativeTimeDisplay';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { AlertTriangle, Calendar, Flag, Shield, UserMinus, UserPlus } from 'lucide-react';
import { useMemo } from 'react';
@@ -128,7 +128,7 @@ function ActivityItem({ activity }: { activity: LeagueActivity }) {
<ActivityFeedItem
icon={getIcon()}
content={getContent()}
timestamp={RelativeTimeDisplay.format(activity.timestamp, new Date())}
timestamp={RelativeTimeFormatter.format(activity.timestamp, new Date())}
/>
);
}

8
apps/website/components/leagues/LeagueMemberRow.tsx
View File

@@ -1,11 +1,11 @@
import { DriverIdentity } from '@/ui/DriverIdentity';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { DriverIdentity } from '@/ui/DriverIdentity';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import React, { ReactNode } from 'react';
import { ReactNode } from 'react';
interface LeagueMemberRowProps {
driver?: DriverViewModel;
@@ -84,7 +84,7 @@ export function LeagueMemberRow({
</TableCell>
<TableCell>
<Text variant="high" size="sm">
{DateDisplay.formatShort(joinedAt)}
{DateFormatter.formatShort(joinedAt)}
</Text>
</TableCell>
{actions && (

54
apps/website/components/leagues/LeagueReviewSummary.tsx
View File

@@ -1,39 +1,33 @@
'use client';
import {
Users,
Calendar,
Trophy,
Award,
Rocket,
Gamepad2,
User,
UsersRound,
Clock,
Flag,
Zap,
Timer,
Check,
Globe,
Medal,
type LucideIcon,
} from 'lucide-react';
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
Award,
Calendar,
Check,
Clock,
Flag,
Gamepad2,
Globe,
Medal,
Rocket,
Timer,
Trophy,
User,
Users,
UsersRound,
Zap,
type LucideIcon,
} from 'lucide-react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DurationDisplay } from '@/lib/display-objects/DurationDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
interface LeagueReviewSummaryProps {
form: LeagueConfigFormModel;
presets: LeagueScoringPresetViewModel[];
}
// Individual review card component
function ReviewCard({
@@ -142,7 +136,7 @@ export function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps)
const seasonStartLabel =
timings.seasonStartDate
? DateDisplay.formatShort(timings.seasonStartDate)
? DateFormatter.formatShort(timings.seasonStartDate)
: null;
const stewardingLabel = (() => {

31
apps/website/components/leagues/RaceDetailModal.tsx
View File

@@ -1,28 +1,27 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Button } from '@/ui/Button';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import {
Calendar,
Clock,
Car,
CheckCircle,
Clock,
Cloud,
Droplets,
MapPin,
Thermometer,
Droplets,
Wind,
Cloud,
X,
Trophy,
CheckCircle
Wind,
X
} from 'lucide-react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
interface RaceDetailModalProps {
race: {
@@ -55,7 +54,7 @@ export function RaceDetailModal({
if (!isOpen) return null;
const formatTime = (scheduledAt: string) => {
return DateDisplay.formatDateTime(scheduledAt);
return DateFormatter.formatDateTime(scheduledAt);
};
const getStatusBadge = (status: 'scheduled' | 'completed') => {

14
apps/website/components/profile/ProfileDetailsPanel.tsx
View File

@@ -1,15 +1,11 @@
'use client';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Panel } from '@/ui/Panel';
import { Input } from '@/ui/Input';
import { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea';
import { Box } from '@/ui/Box';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Group } from '@/ui/Group';
import { Input } from '@/ui/Input';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { ProfileStat } from '@/ui/ProfileHero';
import React from 'react';
import { TextArea } from '@/ui/TextArea';
interface ProfileDetailsPanelProps {
driver: {
@@ -50,7 +46,7 @@ export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDeta
<Text size="xs" variant="low" weight="bold" uppercase block>Nationality</Text>
<Group gap={2}>
<Text size="xl">
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
{CountryFlagFormatter.fromCountryCode(driver.country).toString()}
</Text>
<Text variant="med">{driver.country}</Text>
</Group>

14
apps/website/components/profile/ProfileHeader.tsx
View File

@@ -1,16 +1,16 @@
'use client';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { ProfileAvatar, ProfileHero, ProfileStat, ProfileStatsGroup } from '@/ui/ProfileHero';
import { Stack } from '@/ui/Stack';
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
import { Text } from '@/ui/Text';
import { Calendar, Globe, UserPlus } from 'lucide-react';
import React from 'react';
interface ProfileHeaderProps {
@@ -56,7 +56,7 @@ export function ProfileHeader({
<Group gap={3}>
<Heading level={1}>{driver.name}</Heading>
<Text size="2xl" aria-label={`Country: ${driver.country}`}>
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
{CountryFlagFormatter.fromCountryCode(driver.country).toString()}
</Text>
</Group>
</Box>

4
apps/website/components/profile/SponsorshipRequestsPanel.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { Button } from '@/ui/Button';
import { Card, Card as Surface } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
@@ -64,7 +64,7 @@ export function SponsorshipRequestsPanel({
<Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
)}
<Text size="xs" color="text-gray-500" block mt={2}>
{DateDisplay.formatShort(request.createdAtIso)}
{DateFormatter.formatShort(request.createdAtIso)}
</Text>
</Stack>
<Stack direction="row" gap={2}>

13
apps/website/components/races/RaceCardWrapper.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { RaceStatusDisplay } from '@/lib/display-objects/RaceStatusDisplay';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { RaceStatusFormatter } from '@/lib/formatters/RaceStatusFormatter';
import { RaceCard as UiRaceCard } from './RaceCard';
interface RaceCardProps {
@@ -23,11 +22,11 @@ export function RaceCard({ race, onClick }: RaceCardProps) {
track={race.track}
car={race.car}
scheduledAt={race.scheduledAt}
scheduledAtLabel={DateDisplay.formatShort(race.scheduledAt)}
timeLabel={DateDisplay.formatTime(race.scheduledAt)}
scheduledAtLabel={DateFormatter.formatShort(race.scheduledAt)}
timeLabel={DateFormatter.formatTime(race.scheduledAt)}
status={race.status}
statusLabel={RaceStatusDisplay.getLabel(race.status)}
statusVariant={RaceStatusDisplay.getVariant(race.status) as any}
statusLabel={RaceStatusFormatter.getLabel(race.status)}
statusVariant={RaceStatusFormatter.getVariant(race.status) as any}
leagueName={race.leagueName}
leagueId={race.leagueId}
strengthOfField={race.strengthOfField}

6
apps/website/components/races/RaceHeroWrapper.tsx
View File

@@ -1,8 +1,8 @@
import { RaceHero as UiRaceHero } from '@/components/races/RaceHero';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { LucideIcon } from 'lucide-react';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
interface RaceHeroProps {
track: string;
@@ -34,8 +34,8 @@ export function RaceHero(props: RaceHeroProps) {
return (
<UiRaceHero
{...rest}
formattedDate={DateDisplay.formatShort(scheduledAt)}
formattedTime={DateDisplay.formatTime(scheduledAt)}
formattedDate={DateFormatter.formatShort(scheduledAt)}
formattedTime={DateFormatter.formatTime(scheduledAt)}
statusConfig={mappedConfig}
/>
);

14
apps/website/components/races/RaceListItemWrapper.tsx
View File

@@ -1,9 +1,9 @@
import { routes } from '@/lib/routing/RouteConfig';
import { RaceListItem as UiRaceListItem } from '@/components/races/RaceListItem';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { StatusDisplay } from '@/lib/display-objects/StatusDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { StatusFormatter } from '@/lib/formatters/StatusFormatter';
import { routes } from '@/lib/routing/RouteConfig';
interface Race {
id: string;
@@ -48,11 +48,11 @@ export function RaceListItem({ race, onClick }: RaceListItemProps) {
<UiRaceListItem
track={race.track}
car={race.car}
dateLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[0]}
dayLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[1]}
timeLabel={DateDisplay.formatTime(race.scheduledAt)}
dateLabel={DateFormatter.formatMonthDay(race.scheduledAt).split(' ')[0]}
dayLabel={DateFormatter.formatMonthDay(race.scheduledAt).split(' ')[1]}
timeLabel={DateFormatter.formatTime(race.scheduledAt)}
status={race.status}
statusLabel={StatusDisplay.raceStatus(race.status)}
statusLabel={StatusFormatter.raceStatus(race.status)}
statusVariant={config.variant}
statusIconName={config.iconName}
leagueName={race.leagueName}

4
apps/website/components/races/RaceResultCardWrapper.tsx
View File

@@ -1,8 +1,8 @@
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { RaceResultViewModel } from '@/lib/view-models/RaceResultViewModel';
import { RaceResultCard as UiRaceResultCard } from './RaceResultCard';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
interface RaceResultCardProps {
race: {
@@ -29,7 +29,7 @@ export function RaceResultCard({
raceId={race.id}
track={race.track}
car={race.car}
formattedDate={DateDisplay.formatShort(race.scheduledAt)}
formattedDate={DateFormatter.formatShort(race.scheduledAt)}
position={result.position}
positionLabel={result.formattedPosition}
startPositionLabel={result.formattedStartPosition}

11
apps/website/components/races/RaceResultRow.tsx
View File

@@ -1,15 +1,14 @@
'use client';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Image } from '@/ui/Image';
import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
import { Text } from '@/ui/Text';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Image } from '@/ui/Image';
import { PositionBadge, ResultPoints, ResultRow } from '@/ui/ResultRow';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import React from 'react';
import { Text } from '@/ui/Text';
interface ResultEntry {
position: number;
@@ -62,7 +61,7 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
justifyContent="center"
>
<Text size="xs" style={{ fontSize: '0.625rem' }}>
{CountryFlagDisplay.fromCountryCode(country).toString()}
{CountryFlagFormatter.fromCountryCode(country).toString()}
</Text>
</Surface>
</Box>

4
apps/website/components/social/FriendsPreview.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { routes } from '@/lib/routing/RouteConfig';
import { Card, Card as Surface } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
@@ -68,7 +68,7 @@ export function FriendsPreview({ friends }: FriendsPreviewProps) {
/>
</Stack>
<Text size="sm" color="text-white">{friend.name}</Text>
<Text size="lg">{CountryFlagDisplay.fromCountryCode(friend.country).toString()}</Text>
<Text size="lg">{CountryFlagFormatter.fromCountryCode(friend.country).toString()}</Text>
</Surface>
</Link>
</Stack>

18
apps/website/components/teams/TeamRoster.tsx
View File

@@ -1,6 +1,5 @@
'use client';
import { MinimalEmptyState } from '@/ui/EmptyState';
import { TeamRosterItem } from '@/components/teams/TeamRosterItem';
import { TeamRosterList } from '@/components/teams/TeamRosterList';
import { useTeamRoster } from "@/hooks/team/useTeamRoster";
@@ -9,15 +8,16 @@ import { sortMembers } from '@/lib/utilities/roster-utils';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { MinimalEmptyState } from '@/ui/EmptyState';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Select } from '@/ui/Select';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { useMemo, useState } from 'react';
import { MemberDisplay } from '@/lib/display-objects/MemberDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { MemberFormatter } from '@/lib/formatters/MemberFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
export type TeamRole = 'owner' | 'admin' | 'member';
export type TeamMemberRole = 'owner' | 'manager' | 'member';
@@ -74,7 +74,7 @@ export function TeamRoster({
const teamAverageRatingLabel = useMemo(() => {
if (teamMembers.length === 0) return '—';
const avg = teamMembers.reduce((sum: number, m: { rating?: number | null }) => sum + (m.rating || 0), 0) / teamMembers.length;
return RatingDisplay.format(avg);
return RatingFormatter.format(avg);
}, [teamMembers]);
if (loading) {
@@ -93,7 +93,7 @@ export function TeamRoster({
<Stack>
<Heading level={3}>Team Roster</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
{MemberDisplay.formatCount(memberships.length)} • Avg Rating:{' '}
{MemberFormatter.formatCount(memberships.length)} • Avg Rating:{' '}
<Text color="text-primary-blue" weight="medium">{teamAverageRatingLabel}</Text>
</Text>
</Stack>
@@ -129,8 +129,8 @@ export function TeamRoster({
driver={driver as DriverViewModel}
href={`${routes.driver.detail(driver.id)}?from=team&teamId=${teamId}`}
roleLabel={getRoleLabel(role)}
joinedAtLabel={DateDisplay.formatShort(joinedAt)}
ratingLabel={RatingDisplay.format(rating)}
joinedAtLabel={DateFormatter.formatShort(joinedAt)}
ratingLabel={RatingFormatter.format(rating)}
overallRankLabel={overallRank !== null ? `#${overallRank}` : null}
actions={canManageMembership ? (
<>

12
apps/website/hooks/league/useLeagueSchedule.ts
View File

@@ -1,10 +1,10 @@
import { useQuery } from '@tanstack/react-query';
import { useInject } from '@/lib/di/hooks/useInject';
import { LEAGUE_SERVICE_TOKEN } from '@/lib/di/tokens';
import { enhanceQueryResult } from '@/lib/di/hooks/useReactQueryWithApiError';
import { LeagueScheduleViewModel, LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import { LEAGUE_SERVICE_TOKEN } from '@/lib/di/tokens';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { LeagueScheduleRaceViewModel, LeagueScheduleViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import { useQuery } from '@tanstack/react-query';
function mapRaceDtoToViewModel(race: RaceDTO): LeagueScheduleRaceViewModel {
const scheduledAt = race.date ? new Date(race.date) : new Date(0);
@@ -15,8 +15,8 @@ function mapRaceDtoToViewModel(race: RaceDTO): LeagueScheduleRaceViewModel {
id: race.id,
name: race.name,
scheduledAt,
formattedDate: DateDisplay.formatShort(scheduledAt),
formattedTime: DateDisplay.formatTime(scheduledAt),
formattedDate: DateFormatter.formatShort(scheduledAt),
formattedTime: DateFormatter.formatTime(scheduledAt),
isPast,
isUpcoming: !isPast,
status: isPast ? 'completed' : 'scheduled',

14
apps/website/hooks/league/useLeagueScheduleAdminPageData.ts
View File

@@ -1,13 +1,13 @@
import { usePageData } from '@/lib/page/usePageData';
import { useInject } from '@/lib/di/hooks/useInject';
import { LEAGUE_SERVICE_TOKEN, LEAGUE_MEMBERSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
import { LEAGUE_MEMBERSHIP_SERVICE_TOKEN, LEAGUE_SERVICE_TOKEN } from '@/lib/di/tokens';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { usePageData } from '@/lib/page/usePageData';
import type { LeagueSeasonSummaryDTO } from '@/lib/types/generated/LeagueSeasonSummaryDTO';
import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { LeagueAdminScheduleViewModel } from '@/lib/view-models/LeagueAdminScheduleViewModel';
import { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
import { LeagueSeasonSummaryViewModel } from '@/lib/view-models/LeagueSeasonSummaryViewModel';
import type { RaceDTO } from '@/lib/types/generated/RaceDTO';
import type { LeagueSeasonSummaryDTO } from '@/lib/types/generated/LeagueSeasonSummaryDTO';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
function mapRaceDtoToViewModel(race: RaceDTO): LeagueScheduleRaceViewModel {
const scheduledAt = race.date ? new Date(race.date) : new Date(0);
@@ -18,8 +18,8 @@ function mapRaceDtoToViewModel(race: RaceDTO): LeagueScheduleRaceViewModel {
id: race.id,
name: race.name,
scheduledAt,
formattedDate: DateDisplay.formatShort(scheduledAt),
formattedTime: DateDisplay.formatTime(scheduledAt),
formattedDate: DateFormatter.formatShort(scheduledAt),
formattedTime: DateFormatter.formatTime(scheduledAt),
isPast,
isUpcoming: !isPast,
status: isPast ? 'completed' : 'scheduled',

42
apps/website/lib/builders/view-data/DashboardViewDataBuilder.ts
View File

@@ -1,14 +1,14 @@
'use client';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { DashboardConsistencyFormatter } from '@/lib/formatters/DashboardConsistencyFormatter';
import { DashboardCountFormatter } from '@/lib/formatters/DashboardCountFormatter';
import { DashboardDateFormatter } from '@/lib/formatters/DashboardDateFormatter';
import { DashboardLeaguePositionFormatter } from '@/lib/formatters/DashboardLeaguePositionFormatter';
import { DashboardRankFormatter } from '@/lib/formatters/DashboardRankFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import type { DashboardOverviewDTO } from '@/lib/types/generated/DashboardOverviewDTO';
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
import { DashboardDateDisplay } from '@/lib/display-objects/DashboardDateDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { DashboardRankDisplay } from '@/lib/display-objects/DashboardRankDisplay';
import { DashboardConsistencyDisplay } from '@/lib/display-objects/DashboardConsistencyDisplay';
import { DashboardCountDisplay } from '@/lib/display-objects/DashboardCountDisplay';
import { DashboardLeaguePositionDisplay } from '@/lib/display-objects/DashboardLeaguePositionDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
export class DashboardViewDataBuilder {
public static build(apiDto: DashboardOverviewDTO): DashboardViewData {
@@ -17,21 +17,21 @@ export class DashboardViewDataBuilder {
name: apiDto.currentDriver?.name || '',
avatarUrl: apiDto.currentDriver?.avatarUrl || '',
country: apiDto.currentDriver?.country || '',
rating: apiDto.currentDriver ? RatingDisplay.format(apiDto.currentDriver.rating ?? 0) : '0.0',
rank: apiDto.currentDriver ? DashboardRankDisplay.format(apiDto.currentDriver.globalRank ?? 0) : '0',
totalRaces: apiDto.currentDriver ? DashboardCountDisplay.format(apiDto.currentDriver.totalRaces ?? 0) : '0',
wins: apiDto.currentDriver ? DashboardCountDisplay.format(apiDto.currentDriver.wins ?? 0) : '0',
podiums: apiDto.currentDriver ? DashboardCountDisplay.format(apiDto.currentDriver.podiums ?? 0) : '0',
consistency: apiDto.currentDriver ? DashboardConsistencyDisplay.format(apiDto.currentDriver.consistency ?? 0) : '0%',
rating: apiDto.currentDriver ? RatingFormatter.format(apiDto.currentDriver.rating ?? 0) : '0.0',
rank: apiDto.currentDriver ? DashboardRankFormatter.format(apiDto.currentDriver.globalRank ?? 0) : '0',
totalRaces: apiDto.currentDriver ? DashboardCountFormatter.format(apiDto.currentDriver.totalRaces ?? 0) : '0',
wins: apiDto.currentDriver ? DashboardCountFormatter.format(apiDto.currentDriver.wins ?? 0) : '0',
podiums: apiDto.currentDriver ? DashboardCountFormatter.format(apiDto.currentDriver.podiums ?? 0) : '0',
consistency: apiDto.currentDriver ? DashboardConsistencyFormatter.format(apiDto.currentDriver.consistency ?? 0) : '0%',
},
nextRace: apiDto.nextRace ? DashboardViewDataBuilder.buildNextRace(apiDto.nextRace) : null,
upcomingRaces: apiDto.upcomingRaces.map((race) => DashboardViewDataBuilder.buildRace(race)),
leagueStandings: apiDto.leagueStandingsSummaries.map((standing) => ({
leagueId: standing.leagueId,
leagueName: standing.leagueName,
position: DashboardLeaguePositionDisplay.format(standing.position),
points: DashboardCountDisplay.format(standing.points),
totalDrivers: DashboardCountDisplay.format(standing.totalDrivers),
position: DashboardLeaguePositionFormatter.format(standing.position),
points: DashboardCountFormatter.format(standing.points),
totalDrivers: DashboardCountFormatter.format(standing.totalDrivers),
})),
feedItems: apiDto.feedSummary.items.map((item) => ({
id: item.id,
@@ -39,7 +39,7 @@ export class DashboardViewDataBuilder {
headline: item.headline,
body: item.body ?? undefined,
timestamp: item.timestamp,
formattedTime: DashboardDateDisplay.format(new Date(item.timestamp)).relative,
formattedTime: DashboardDateFormatter.format(new Date(item.timestamp)).relative,
ctaHref: item.ctaHref ?? undefined,
ctaLabel: item.ctaLabel ?? undefined,
})),
@@ -49,8 +49,8 @@ export class DashboardViewDataBuilder {
avatarUrl: friend.avatarUrl || '',
country: friend.country,
})),
activeLeaguesCount: DashboardCountDisplay.format(apiDto.activeLeaguesCount),
friendCount: DashboardCountDisplay.format(apiDto.friends.length),
activeLeaguesCount: DashboardCountFormatter.format(apiDto.activeLeaguesCount),
friendCount: DashboardCountFormatter.format(apiDto.friends.length),
hasUpcomingRaces: apiDto.upcomingRaces.length > 0,
hasLeagueStandings: apiDto.leagueStandingsSummaries.length > 0,
hasFeedItems: apiDto.feedSummary.items.length > 0,
@@ -59,7 +59,7 @@ export class DashboardViewDataBuilder {
}
private static buildNextRace(race: NonNullable<DashboardOverviewDTO['nextRace']>) {
const dateInfo = DashboardDateDisplay.format(new Date(race.scheduledAt));
const dateInfo = DashboardDateFormatter.format(new Date(race.scheduledAt));
return {
id: race.id,
track: race.track,
@@ -73,7 +73,7 @@ export class DashboardViewDataBuilder {
}
private static buildRace(race: DashboardOverviewDTO['upcomingRaces'][number]) {
const dateInfo = DashboardDateDisplay.format(new Date(race.scheduledAt));
const dateInfo = DashboardDateFormatter.format(new Date(race.scheduledAt));
return {
id: race.id,
track: race.track,

38
apps/website/lib/builders/view-data/DriverProfileViewDataBuilder.ts
View File

@@ -1,13 +1,13 @@
'use client';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { FinishFormatter } from '@/lib/formatters/FinishFormatter';
import { NumberFormatter } from '@/lib/formatters/NumberFormatter';
import { PercentFormatter } from '@/lib/formatters/PercentFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import type { GetDriverProfileOutputDTO } from '@/lib/types/generated/GetDriverProfileOutputDTO';
import type { DriverProfileViewData } from '@/lib/view-data/DriverProfileViewData';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
import { FinishDisplay } from '@/lib/display-objects/FinishDisplay';
import { PercentDisplay } from '@/lib/display-objects/PercentDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
export class DriverProfileViewDataBuilder {
public static build(apiDto: GetDriverProfileOutputDTO): DriverProfileViewData {
@@ -19,9 +19,9 @@ export class DriverProfileViewDataBuilder {
avatarUrl: apiDto.currentDriver.avatarUrl || '',
iracingId: typeof apiDto.currentDriver.iracingId === 'string' ? parseInt(apiDto.currentDriver.iracingId, 10) : (apiDto.currentDriver.iracingId ?? null),
joinedAt: apiDto.currentDriver.joinedAt,
joinedAtLabel: DateDisplay.formatMonthYear(apiDto.currentDriver.joinedAt),
joinedAtLabel: DateFormatter.formatMonthYear(apiDto.currentDriver.joinedAt),
rating: apiDto.currentDriver.rating ?? null,
ratingLabel: RatingDisplay.format(apiDto.currentDriver.rating),
ratingLabel: RatingFormatter.format(apiDto.currentDriver.rating),
globalRank: apiDto.currentDriver.globalRank ?? null,
globalRankLabel: apiDto.currentDriver.globalRank != null ? `#${apiDto.currentDriver.globalRank}` : '—',
consistency: apiDto.currentDriver.consistency ?? null,
@@ -30,27 +30,27 @@ export class DriverProfileViewDataBuilder {
} : null,
stats: apiDto.stats ? {
totalRaces: apiDto.stats.totalRaces,
totalRacesLabel: NumberDisplay.format(apiDto.stats.totalRaces),
totalRacesLabel: NumberFormatter.format(apiDto.stats.totalRaces),
wins: apiDto.stats.wins,
winsLabel: NumberDisplay.format(apiDto.stats.wins),
winsLabel: NumberFormatter.format(apiDto.stats.wins),
podiums: apiDto.stats.podiums,
podiumsLabel: NumberDisplay.format(apiDto.stats.podiums),
podiumsLabel: NumberFormatter.format(apiDto.stats.podiums),
dnfs: apiDto.stats.dnfs,
dnfsLabel: NumberDisplay.format(apiDto.stats.dnfs),
dnfsLabel: NumberFormatter.format(apiDto.stats.dnfs),
avgFinish: apiDto.stats.avgFinish ?? null,
avgFinishLabel: FinishDisplay.formatAverage(apiDto.stats.avgFinish),
avgFinishLabel: FinishFormatter.formatAverage(apiDto.stats.avgFinish),
bestFinish: apiDto.stats.bestFinish ?? null,
bestFinishLabel: FinishDisplay.format(apiDto.stats.bestFinish),
bestFinishLabel: FinishFormatter.format(apiDto.stats.bestFinish),
worstFinish: apiDto.stats.worstFinish ?? null,
worstFinishLabel: FinishDisplay.format(apiDto.stats.worstFinish),
worstFinishLabel: FinishFormatter.format(apiDto.stats.worstFinish),
finishRate: apiDto.stats.finishRate ?? null,
winRate: apiDto.stats.winRate ?? null,
podiumRate: apiDto.stats.podiumRate ?? null,
percentile: apiDto.stats.percentile ?? null,
rating: apiDto.stats.rating ?? null,
ratingLabel: RatingDisplay.format(apiDto.stats.rating),
ratingLabel: RatingFormatter.format(apiDto.stats.rating),
consistency: apiDto.stats.consistency ?? null,
consistencyLabel: PercentDisplay.formatWhole(apiDto.stats.consistency),
consistencyLabel: PercentFormatter.formatWhole(apiDto.stats.consistency),
overallRank: apiDto.stats.overallRank ?? null,
} : null,
finishDistribution: apiDto.finishDistribution ? {
@@ -67,7 +67,7 @@ export class DriverProfileViewDataBuilder {
teamTag: m.teamTag ?? null,
role: m.role,
joinedAt: m.joinedAt,
joinedAtLabel: DateDisplay.formatMonthYear(m.joinedAt),
joinedAtLabel: DateFormatter.formatMonthYear(m.joinedAt),
isCurrent: m.isCurrent,
})),
socialSummary: {
@@ -93,7 +93,7 @@ export class DriverProfileViewDataBuilder {
rarity: a.rarity,
rarityLabel: a.rarity,
earnedAt: a.earnedAt,
earnedAtLabel: DateDisplay.formatShort(a.earnedAt),
earnedAtLabel: DateFormatter.formatShort(a.earnedAt),
})),
racingStyle: apiDto.extendedProfile.racingStyle,
favoriteTrack: apiDto.extendedProfile.favoriteTrack,

12
apps/website/lib/builders/view-data/DriverRankingsViewDataBuilder.ts
View File

@@ -1,10 +1,10 @@
'use client';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
import { WinRateFormatter } from '@/lib/formatters/WinRateFormatter';
import type { DriverLeaderboardItemDTO } from '@/lib/types/generated/DriverLeaderboardItemDTO';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
import { WinRateDisplay } from '@/lib/display-objects/WinRateDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
export class DriverRankingsViewDataBuilder {
public static build(apiDto: DriverLeaderboardItemDTO[]): DriverRankingsViewData {
@@ -31,9 +31,9 @@ export class DriverRankingsViewDataBuilder {
podiums: driver.podiums,
rank: driver.rank,
avatarUrl: driver.avatarUrl || '',
winRate: WinRateDisplay.calculate(driver.racesCompleted, driver.wins),
medalBg: MedalDisplay.getBg(driver.rank),
medalColor: MedalDisplay.getColor(driver.rank),
winRate: WinRateFormatter.calculate(driver.racesCompleted, driver.wins),
medalBg: MedalFormatter.getBg(driver.rank),
medalColor: MedalFormatter.getColor(driver.rank),
})),
podium: apiDto.slice(0, 3).map((driver, index) => {
const positions = [2, 1, 3]; // Display order: 2nd, 1st, 3rd

16
apps/website/lib/builders/view-data/DriversViewDataBuilder.ts
View File

@@ -1,10 +1,10 @@
'use client';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { NumberFormatter } from '@/lib/formatters/NumberFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import type { DriversLeaderboardDTO } from '@/lib/types/generated/DriversLeaderboardDTO';
import type { DriversViewData } from '@/lib/view-data/DriversViewData';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
export class DriversViewDataBuilder {
public static build(apiDto: DriversLeaderboardDTO): DriversViewData {
@@ -13,7 +13,7 @@ export class DriversViewDataBuilder {
id: driver.id,
name: driver.name,
rating: driver.rating,
ratingLabel: RatingDisplay.format(driver.rating),
ratingLabel: RatingFormatter.format(driver.rating),
skillLevel: driver.skillLevel,
category: driver.category ?? undefined,
nationality: driver.nationality,
@@ -25,12 +25,12 @@ export class DriversViewDataBuilder {
avatarUrl: driver.avatarUrl ?? undefined,
})),
totalRaces: apiDto.totalRaces,
totalRacesLabel: NumberDisplay.format(apiDto.totalRaces),
totalRacesLabel: NumberFormatter.format(apiDto.totalRaces),
totalWins: apiDto.totalWins,
totalWinsLabel: NumberDisplay.format(apiDto.totalWins),
totalWinsLabel: NumberFormatter.format(apiDto.totalWins),
activeCount: apiDto.activeCount,
activeCountLabel: NumberDisplay.format(apiDto.activeCount),
totalDriversLabel: NumberDisplay.format(apiDto.drivers.length),
activeCountLabel: NumberFormatter.format(apiDto.activeCount),
totalDriversLabel: NumberFormatter.format(apiDto.drivers.length),
};
}
}

54
apps/website/lib/builders/view-data/HealthViewDataBuilder.ts
View File

@@ -1,12 +1,12 @@
'use client';
import type { HealthDTO } from '@/lib/types/generated/HealthDTO';
import type { HealthViewData, HealthStatus, HealthMetrics, HealthComponent, HealthAlert } from '@/lib/view-data/HealthViewData';
import { HealthStatusDisplay } from '@/lib/display-objects/HealthStatusDisplay';
import { HealthMetricDisplay } from '@/lib/display-objects/HealthMetricDisplay';
import { HealthComponentDisplay } from '@/lib/display-objects/HealthComponentDisplay';
import { HealthAlertDisplay } from '@/lib/display-objects/HealthAlertDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { HealthAlertFormatter } from '@/lib/formatters/HealthAlertFormatter';
import { HealthComponentFormatter } from '@/lib/formatters/HealthComponentFormatter';
import { HealthMetricFormatter } from '@/lib/formatters/HealthMetricFormatter';
import { HealthStatusFormatter } from '@/lib/formatters/HealthStatusFormatter';
import type { HealthDTO } from '@/lib/types/generated/HealthDTO';
import type { HealthAlert, HealthComponent, HealthMetrics, HealthStatus, HealthViewData } from '@/lib/view-data/HealthViewData';
export class HealthViewDataBuilder {
public static build(apiDto: HealthDTO): HealthViewData {
@@ -17,37 +17,37 @@ export class HealthViewDataBuilder {
const overallStatus: HealthStatus = {
status: apiDto.status,
timestamp: apiDto.timestamp,
formattedTimestamp: HealthStatusDisplay.formatTimestamp(apiDto.timestamp),
relativeTime: HealthStatusDisplay.formatRelativeTime(apiDto.timestamp),
statusLabel: HealthStatusDisplay.formatStatusLabel(apiDto.status),
statusColor: HealthStatusDisplay.formatStatusColor(apiDto.status),
statusIcon: HealthStatusDisplay.formatStatusIcon(apiDto.status),
formattedTimestamp: HealthStatusFormatter.formatTimestamp(apiDto.timestamp),
relativeTime: HealthStatusFormatter.formatRelativeTime(apiDto.timestamp),
statusLabel: HealthStatusFormatter.formatStatusLabel(apiDto.status),
statusColor: HealthStatusFormatter.formatStatusColor(apiDto.status),
statusIcon: HealthStatusFormatter.formatStatusIcon(apiDto.status),
};
// Build metrics
const metrics: HealthMetrics = {
uptime: HealthMetricDisplay.formatUptime(apiDto.uptime),
responseTime: HealthMetricDisplay.formatResponseTime(apiDto.responseTime),
errorRate: HealthMetricDisplay.formatErrorRate(apiDto.errorRate),
uptime: HealthMetricFormatter.formatUptime(apiDto.uptime),
responseTime: HealthMetricFormatter.formatResponseTime(apiDto.responseTime),
errorRate: HealthMetricFormatter.formatErrorRate(apiDto.errorRate),
lastCheck: apiDto.lastCheck || lastUpdated,
formattedLastCheck: HealthMetricDisplay.formatTimestamp(apiDto.lastCheck || lastUpdated),
formattedLastCheck: HealthMetricFormatter.formatTimestamp(apiDto.lastCheck || lastUpdated),
checksPassed: apiDto.checksPassed || 0,
checksFailed: apiDto.checksFailed || 0,
totalChecks: (apiDto.checksPassed || 0) + (apiDto.checksFailed || 0),
successRate: HealthMetricDisplay.formatSuccessRate(apiDto.checksPassed, apiDto.checksFailed),
successRate: HealthMetricFormatter.formatSuccessRate(apiDto.checksPassed, apiDto.checksFailed),
};
// Build components
const components: HealthComponent[] = (apiDto.components || []).map((component) => ({
name: component.name,
status: component.status,
statusLabel: HealthComponentDisplay.formatStatusLabel(component.status),
statusColor: HealthComponentDisplay.formatStatusColor(component.status),
statusIcon: HealthComponentDisplay.formatStatusIcon(component.status),
statusLabel: HealthComponentFormatter.formatStatusLabel(component.status),
statusColor: HealthComponentFormatter.formatStatusColor(component.status),
statusIcon: HealthComponentFormatter.formatStatusIcon(component.status),
lastCheck: component.lastCheck || lastUpdated,
formattedLastCheck: HealthComponentDisplay.formatTimestamp(component.lastCheck || lastUpdated),
responseTime: HealthMetricDisplay.formatResponseTime(component.responseTime),
errorRate: HealthMetricDisplay.formatErrorRate(component.errorRate),
formattedLastCheck: HealthComponentFormatter.formatTimestamp(component.lastCheck || lastUpdated),
responseTime: HealthMetricFormatter.formatResponseTime(component.responseTime),
errorRate: HealthMetricFormatter.formatErrorRate(component.errorRate),
}));
// Build alerts
@@ -57,10 +57,10 @@ export class HealthViewDataBuilder {
title: alert.title,
message: alert.message,
timestamp: alert.timestamp,
formattedTimestamp: HealthAlertDisplay.formatTimestamp(alert.timestamp),
relativeTime: HealthAlertDisplay.formatRelativeTime(alert.timestamp),
severity: HealthAlertDisplay.formatSeverity(alert.type),
severityColor: HealthAlertDisplay.formatSeverityColor(alert.type),
formattedTimestamp: HealthAlertFormatter.formatTimestamp(alert.timestamp),
relativeTime: HealthAlertFormatter.formatRelativeTime(alert.timestamp),
severity: HealthAlertFormatter.formatSeverity(alert.type),
severityColor: HealthAlertFormatter.formatSeverityColor(alert.type),
}));
// Calculate derived fields
@@ -77,7 +77,7 @@ export class HealthViewDataBuilder {
hasDegradedComponents,
hasErrorComponents,
lastUpdated,
formattedLastUpdated: HealthStatusDisplay.formatTimestamp(lastUpdated),
formattedLastUpdated: HealthStatusFormatter.formatTimestamp(lastUpdated),
};
}
}

6
apps/website/lib/builders/view-data/HomeViewDataBuilder.ts
View File

@@ -1,9 +1,9 @@
'use client';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { DashboardDateFormatter } from '@/lib/formatters/DashboardDateFormatter';
import type { DashboardOverviewDTO } from '@/lib/types/generated/DashboardOverviewDTO';
import type { HomeViewData } from '@/lib/view-data/HomeViewData';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { DashboardDateDisplay } from '@/lib/display-objects/DashboardDateDisplay';
export class HomeViewDataBuilder {
/**
@@ -19,7 +19,7 @@ export class HomeViewDataBuilder {
id: race.id,
track: race.track,
car: race.car,
formattedDate: DashboardDateDisplay.format(new Date(race.scheduledAt)).date,
formattedDate: DashboardDateFormatter.format(new Date(race.scheduledAt)).date,
})),
topLeagues: (apiDto.leagueStandingsSummaries || []).map(league => ({
id: league.leagueId,

12
apps/website/lib/builders/view-data/LeagueRosterAdminViewDataBuilder.ts
View File

@@ -1,8 +1,8 @@
import type { LeagueRosterMemberDTO } from '@/lib/types/generated/LeagueRosterMemberDTO';
import type { LeagueRosterJoinRequestDTO } from '@/lib/types/generated/LeagueRosterJoinRequestDTO';
import type { LeagueRosterAdminViewData, RosterMemberData, JoinRequestData } from '@/lib/view-data/LeagueRosterAdminViewData';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import type { ViewDataBuilder } from '@/lib/contracts/builders/ViewDataBuilder';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import type { LeagueRosterJoinRequestDTO } from '@/lib/types/generated/LeagueRosterJoinRequestDTO';
import type { LeagueRosterMemberDTO } from '@/lib/types/generated/LeagueRosterMemberDTO';
import type { JoinRequestData, LeagueRosterAdminViewData, RosterMemberData } from '@/lib/view-data/LeagueRosterAdminViewData';
type LeagueRosterAdminInputDTO = {
leagueId: string;
@@ -23,7 +23,7 @@ export class LeagueRosterAdminViewDataBuilder {
},
role: member.role,
joinedAt: member.joinedAt,
formattedJoinedAt: DateDisplay.formatShort(member.joinedAt),
formattedJoinedAt: DateFormatter.formatShort(member.joinedAt),
}));
// Transform join requests
@@ -34,7 +34,7 @@ export class LeagueRosterAdminViewDataBuilder {
name: (req as { driver?: { name?: string } }).driver?.name || 'Unknown Driver',
},
requestedAt: req.requestedAt,
formattedRequestedAt: DateDisplay.formatShort(req.requestedAt),
formattedRequestedAt: DateFormatter.formatShort(req.requestedAt),
message: req.message ?? undefined,
}));

8
apps/website/lib/builders/view-data/LeagueSponsorshipsViewDataBuilder.ts
View File

@@ -1,5 +1,5 @@
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { StatusDisplay } from '@/lib/display-objects/StatusDisplay';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { StatusFormatter } from '@/lib/formatters/StatusFormatter';
import { LeagueSponsorshipsApiDto } from '@/lib/types/tbd/LeagueSponsorshipsApiDto';
import { LeagueSponsorshipsViewData } from '@/lib/view-data/LeagueSponsorshipsViewData';
@@ -19,8 +19,8 @@ export class LeagueSponsorshipsViewDataBuilder implements ViewDataBuilder<any, a
sponsorshipSlots: apiDto.sponsorshipSlots,
sponsorshipRequests: apiDto.sponsorshipRequests.map(r => ({
...r,
formattedRequestedAt: DateDisplay.formatShort(r.requestedAt),
statusLabel: StatusDisplay.protestStatus(r.status), // Reusing protest status for now
formattedRequestedAt: DateFormatter.formatShort(r.requestedAt),
statusLabel: StatusFormatter.protestStatus(r.status), // Reusing protest status for now
})),
};
}

48
apps/website/lib/builders/view-data/ProfileViewDataBuilder.ts
View File

@@ -1,12 +1,12 @@
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { FinishFormatter } from '@/lib/formatters/FinishFormatter';
import { NumberFormatter } from '@/lib/formatters/NumberFormatter';
import { PercentFormatter } from '@/lib/formatters/PercentFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import type { GetDriverProfileOutputDTO } from '@/lib/types/generated/GetDriverProfileOutputDTO';
import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { FinishDisplay } from '@/lib/display-objects/FinishDisplay';
import { PercentDisplay } from '@/lib/display-objects/PercentDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
import { ViewDataBuilder } from "../../contracts/builders/ViewDataBuilder";
@@ -24,7 +24,7 @@ export class ProfileViewDataBuilder implements ViewDataBuilder<any, any> {
id: '',
name: '',
countryCode: '',
countryFlag: CountryFlagDisplay.fromCountryCode(null).toString(),
countryFlag: CountryFlagFormatter.fromCountryCode(null).toString(),
avatarUrl: mediaConfig.avatars.defaultFallback,
bio: null,
iracingId: null,
@@ -45,25 +45,25 @@ export class ProfileViewDataBuilder implements ViewDataBuilder<any, any> {
id: driver.id,
name: driver.name,
countryCode: driver.country,
countryFlag: CountryFlagDisplay.fromCountryCode(driver.country).toString(),
countryFlag: CountryFlagFormatter.fromCountryCode(driver.country).toString(),
avatarUrl: driver.avatarUrl || mediaConfig.avatars.defaultFallback,
bio: driver.bio || null,
iracingId: driver.iracingId ? String(driver.iracingId) : null,
joinedAtLabel: DateDisplay.formatMonthYear(driver.joinedAt),
joinedAtLabel: DateFormatter.formatMonthYear(driver.joinedAt),
},
stats: stats
? {
ratingLabel: RatingDisplay.format(stats.rating),
ratingLabel: RatingFormatter.format(stats.rating),
globalRankLabel: driver.globalRank != null ? `#${driver.globalRank}` : '—',
totalRacesLabel: NumberDisplay.format(stats.totalRaces),
winsLabel: NumberDisplay.format(stats.wins),
podiumsLabel: NumberDisplay.format(stats.podiums),
dnfsLabel: NumberDisplay.format(stats.dnfs),
bestFinishLabel: FinishDisplay.format(stats.bestFinish),
worstFinishLabel: FinishDisplay.format(stats.worstFinish),
avgFinishLabel: FinishDisplay.formatAverage(stats.avgFinish),
consistencyLabel: PercentDisplay.formatWhole(stats.consistency),
percentileLabel: PercentDisplay.format(stats.percentile),
totalRacesLabel: NumberFormatter.format(stats.totalRaces),
winsLabel: NumberFormatter.format(stats.wins),
podiumsLabel: NumberFormatter.format(stats.podiums),
dnfsLabel: NumberFormatter.format(stats.dnfs),
bestFinishLabel: FinishFormatter.format(stats.bestFinish),
worstFinishLabel: FinishFormatter.format(stats.worstFinish),
avgFinishLabel: FinishFormatter.formatAverage(stats.avgFinish),
consistencyLabel: PercentFormatter.formatWhole(stats.consistency),
percentileLabel: PercentFormatter.format(stats.percentile),
}
: null,
teamMemberships: apiDto.teamMemberships.map((m) => ({
@@ -71,7 +71,7 @@ export class ProfileViewDataBuilder implements ViewDataBuilder<any, any> {
teamName: m.teamName,
teamTag: m.teamTag || null,
roleLabel: m.role,
joinedAtLabel: DateDisplay.formatMonthYear(m.joinedAt),
joinedAtLabel: DateFormatter.formatMonthYear(m.joinedAt),
href: `/teams/${m.teamId}`,
})),
extendedProfile: extended
@@ -92,18 +92,18 @@ export class ProfileViewDataBuilder implements ViewDataBuilder<any, any> {
id: a.id,
title: a.title,
description: a.description,
earnedAtLabel: DateDisplay.formatShort(a.earnedAt),
earnedAtLabel: DateFormatter.formatShort(a.earnedAt),
icon: a.icon as any,
rarityLabel: a.rarity,
})),
friends: socialSummary.friends.slice(0, 8).map((f) => ({
id: f.id,
name: f.name,
countryFlag: CountryFlagDisplay.fromCountryCode(f.country).toString(),
countryFlag: CountryFlagFormatter.fromCountryCode(f.country).toString(),
avatarUrl: f.avatarUrl || mediaConfig.avatars.defaultFallback,
href: `/drivers/${f.id}`,
})),
friendsCountLabel: NumberDisplay.format(socialSummary.friendsCount),
friendsCountLabel: NumberFormatter.format(socialSummary.friendsCount),
}
: null,
};

18
apps/website/lib/builders/view-data/RacesViewDataBuilder.ts
View File

@@ -1,8 +1,8 @@
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { RaceStatusFormatter } from '@/lib/formatters/RaceStatusFormatter';
import { RelativeTimeFormatter } from '@/lib/formatters/RelativeTimeFormatter';
import type { RacesPageDataDTO } from '@/lib/types/generated/RacesPageDataDTO';
import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { RaceStatusDisplay } from '@/lib/display-objects/RaceStatusDisplay';
import { RelativeTimeDisplay } from '@/lib/display-objects/RelativeTimeDisplay';
import { ViewDataBuilder } from "../../contracts/builders/ViewDataBuilder";
@@ -19,13 +19,13 @@ export class RacesViewDataBuilder implements ViewDataBuilder<any, any> {
track: race.track,
car: race.car,
scheduledAt: race.scheduledAt,
scheduledAtLabel: DateDisplay.formatShort(race.scheduledAt),
timeLabel: DateDisplay.formatTime(race.scheduledAt),
relativeTimeLabel: RelativeTimeDisplay.format(race.scheduledAt, now),
scheduledAtLabel: DateFormatter.formatShort(race.scheduledAt),
timeLabel: DateFormatter.formatTime(race.scheduledAt),
relativeTimeLabel: RelativeTimeFormatter.format(race.scheduledAt, now),
status: race.status as RaceViewData['status'],
statusLabel: RaceStatusDisplay.getLabel(race.status),
statusVariant: RaceStatusDisplay.getVariant(race.status),
statusIconName: RaceStatusDisplay.getIconName(race.status),
statusLabel: RaceStatusFormatter.getLabel(race.status),
statusVariant: RaceStatusFormatter.getVariant(race.status),
statusIconName: RaceStatusFormatter.getIconName(race.status),
sessionType: 'Race',
leagueId: race.leagueId,
leagueName: race.leagueName,

24
apps/website/lib/builders/view-data/TeamDetailViewDataBuilder.ts
View File

@@ -1,9 +1,9 @@
import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { LeagueFormatter } from '@/lib/formatters/LeagueFormatter';
import { MemberFormatter } from '@/lib/formatters/MemberFormatter';
import { NumberFormatter } from '@/lib/formatters/NumberFormatter';
import type { GetTeamDetailsOutputDTO } from '@/lib/types/generated/GetTeamDetailsOutputDTO';
import type { TeamDetailViewData, TeamDetailData, TeamMemberData, SponsorMetric, TeamTab } from '@/lib/view-data/TeamDetailViewData';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { MemberDisplay } from '@/lib/display-objects/MemberDisplay';
import { LeagueDisplay } from '@/lib/display-objects/LeagueDisplay';
import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
import type { SponsorMetric, TeamDetailData, TeamDetailViewData, TeamMemberData, TeamTab } from '@/lib/view-data/TeamDetailViewData';
import { ViewDataBuilder } from "../../contracts/builders/ViewDataBuilder";
@@ -21,7 +21,7 @@ export class TeamDetailViewDataBuilder implements ViewDataBuilder<any, any> {
ownerId: apiDto.team.ownerId,
leagues: (apiDto.team as any).leagues || [],
createdAt: apiDto.team.createdAt,
foundedDateLabel: apiDto.team.createdAt ? DateDisplay.formatMonthYear(apiDto.team.createdAt) : 'Unknown',
foundedDateLabel: apiDto.team.createdAt ? DateFormatter.formatMonthYear(apiDto.team.createdAt) : 'Unknown',
specialization: (apiDto.team as any).specialization || null,
region: (apiDto.team as any).region || null,
languages: (apiDto.team as any).languages || [],
@@ -35,7 +35,7 @@ export class TeamDetailViewDataBuilder implements ViewDataBuilder<any, any> {
driverName: membership.driverName,
role: membership.role,
joinedAt: membership.joinedAt,
joinedAtLabel: DateDisplay.formatShort(membership.joinedAt),
joinedAtLabel: DateFormatter.formatShort(membership.joinedAt),
isActive: membership.isActive,
avatarUrl: membership.avatarUrl,
}));
@@ -51,19 +51,19 @@ export class TeamDetailViewDataBuilder implements ViewDataBuilder<any, any> {
{
icon: 'users',
label: 'Members',
value: NumberDisplay.format(memberships.length),
value: NumberFormatter.format(memberships.length),
color: 'text-primary-blue',
},
{
icon: 'zap',
label: 'Est. Reach',
value: NumberDisplay.format(memberships.length * 15),
value: NumberFormatter.format(memberships.length * 15),
color: 'text-purple-400',
},
{
icon: 'calendar',
label: 'Races',
value: NumberDisplay.format(leagueCount),
value: NumberFormatter.format(leagueCount),
color: 'text-neon-aqua',
},
{
@@ -89,8 +89,8 @@ export class TeamDetailViewDataBuilder implements ViewDataBuilder<any, any> {
isAdmin,
teamMetrics,
tabs,
memberCountLabel: MemberDisplay.formatCount(memberships.length),
leagueCountLabel: LeagueDisplay.formatCount(leagueCount),
memberCountLabel: MemberFormatter.formatCount(memberships.length),
leagueCountLabel: LeagueFormatter.formatCount(leagueCount),
};
}
}

12
apps/website/lib/builders/view-data/TeamsViewDataBuilder.ts
View File

@@ -1,8 +1,8 @@
import { NumberFormatter } from '@/lib/formatters/NumberFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import type { GetAllTeamsOutputDTO } from '@/lib/types/generated/GetAllTeamsOutputDTO';
import type { TeamsViewData, TeamSummaryData } from '@/lib/view-data/TeamsViewData';
import type { TeamListItemDTO } from '@/lib/types/generated/TeamListItemDTO';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { ViewDataBuilder } from "../../contracts/builders/ViewDataBuilder";
@@ -17,10 +17,10 @@ export class TeamsViewDataBuilder implements ViewDataBuilder<any, any> {
teamName: team.name,
memberCount: team.memberCount,
logoUrl: team.logoUrl || '',
ratingLabel: RatingDisplay.format(team.rating),
ratingLabel: RatingFormatter.format(team.rating),
ratingValue: team.rating || 0,
winsLabel: NumberDisplay.format(team.totalWins || 0),
racesLabel: NumberDisplay.format(team.totalRaces || 0),
winsLabel: NumberFormatter.format(team.totalWins || 0),
racesLabel: NumberFormatter.format(team.totalRaces || 0),
region: team.region || '',
isRecruiting: team.isRecruiting,
category: team.category || '',

2
apps/website/lib/command-models/leagues/LeagueWizardCommandModel.ts
View File

@@ -1,5 +1,5 @@
import { LeagueWizardValidationMessages } from '@/lib/formatters/LeagueWizardValidationMessages';
import type { CreateLeagueInputDTO } from '@/lib/types/generated/CreateLeagueInputDTO';
import { LeagueWizardValidationMessages } from '@/lib/display-objects/LeagueWizardValidationMessages';
export type WizardStep = 1 | 2 | 3 | 4 | 5 | 6 | 7;

11
apps/website/lib/contracts/formatters/DisplayObject.ts → apps/website/lib/contracts/formatters/Formatter.ts
View File

@@ -1,5 +1,5 @@
/**
* DisplayObject contract
* Formatter contract
*
* Deterministic, reusable, UI-only formatting/mapping logic.
*
@@ -12,18 +12,11 @@
* - No business rules
*/
export interface DisplayObject {
export interface Formatter {
/**
* Format or map the display object
*
* @returns Primitive values only (strings, numbers, booleans)
*/
format(): unknown;
/**
* Optional: Get multiple display variants
*
* Allows a single DisplayObject to expose multiple presentation formats
*/
variants?(): Record<string, unknown>;
}

38
apps/website/lib/display-objects/DashboardCountDisplay.test.ts
View File

@@ -1,38 +0,0 @@
import { describe, it, expect } from 'vitest';
import { DashboardCountDisplay } from './DashboardCountDisplay';
describe('DashboardCountDisplay', () => {
describe('happy paths', () => {
it('should format positive numbers correctly', () => {
expect(DashboardCountDisplay.format(0)).toBe('0');
expect(DashboardCountDisplay.format(1)).toBe('1');
expect(DashboardCountDisplay.format(100)).toBe('100');
expect(DashboardCountDisplay.format(1000)).toBe('1000');
});
it('should handle null values', () => {
expect(DashboardCountDisplay.format(null)).toBe('0');
});
it('should handle undefined values', () => {
expect(DashboardCountDisplay.format(undefined)).toBe('0');
});
});
describe('edge cases', () => {
it('should handle negative numbers', () => {
expect(DashboardCountDisplay.format(-1)).toBe('-1');
expect(DashboardCountDisplay.format(-100)).toBe('-100');
});
it('should handle large numbers', () => {
expect(DashboardCountDisplay.format(999999)).toBe('999999');
expect(DashboardCountDisplay.format(1000000)).toBe('1000000');
});
it('should handle decimal numbers', () => {
expect(DashboardCountDisplay.format(1.5)).toBe('1.5');
expect(DashboardCountDisplay.format(100.99)).toBe('100.99');
});
});
});

369
apps/website/lib/display-objects/DashboardViewDataConsistency.test.ts
View File

@@ -1,369 +0,0 @@
import { describe, it, expect } from 'vitest';
import { DashboardViewDataBuilder } from '../builders/view-data/DashboardViewDataBuilder';
import { DashboardDateDisplay } from './DashboardDateDisplay';
import { DashboardCountDisplay } from './DashboardCountDisplay';
import { DashboardRankDisplay } from './DashboardRankDisplay';
import { DashboardConsistencyDisplay } from './DashboardConsistencyDisplay';
import { DashboardLeaguePositionDisplay } from './DashboardLeaguePositionDisplay';
import { RatingDisplay } from './RatingDisplay';
import type { DashboardOverviewDTO } from '@/lib/types/generated/DashboardOverviewDTO';
describe('Dashboard View Data - Cross-Component Consistency', () => {
describe('common patterns', () => {
it('should all use consistent formatting for numeric values', () => {
const dashboardDTO: DashboardOverviewDTO = {
currentDriver: {
id: 'driver-123',
name: 'John Doe',
country: 'USA',
rating: 1234.56,
globalRank: 42,
totalRaces: 150,
wins: 25,
podiums: 60,
consistency: 85,
},
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [],
activeLeaguesCount: 3,
nextRace: null,
recentResults: [],
leagueStandingsSummaries: [
{
leagueId: 'league-1',
leagueName: 'Test League',
position: 5,
totalDrivers: 50,
points: 1250,
},
],
feedSummary: {
notificationCount: 0,
items: [],
},
friends: [
{ id: 'friend-1', name: 'Alice', country: 'UK' },
{ id: 'friend-2', name: 'Bob', country: 'Germany' },
],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
// All numeric values should be formatted as strings
expect(typeof result.currentDriver.rating).toBe('string');
expect(typeof result.currentDriver.rank).toBe('string');
expect(typeof result.currentDriver.totalRaces).toBe('string');
expect(typeof result.currentDriver.wins).toBe('string');
expect(typeof result.currentDriver.podiums).toBe('string');
expect(typeof result.currentDriver.consistency).toBe('string');
expect(typeof result.activeLeaguesCount).toBe('string');
expect(typeof result.friendCount).toBe('string');
expect(typeof result.leagueStandings[0].position).toBe('string');
expect(typeof result.leagueStandings[0].points).toBe('string');
expect(typeof result.leagueStandings[0].totalDrivers).toBe('string');
});
it('should all handle missing data gracefully', () => {
const dashboardDTO: DashboardOverviewDTO = {
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [],
activeLeaguesCount: 0,
nextRace: null,
recentResults: [],
leagueStandingsSummaries: [],
feedSummary: {
notificationCount: 0,
items: [],
},
friends: [],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
// All fields should have safe defaults
expect(result.currentDriver.name).toBe('');
expect(result.currentDriver.avatarUrl).toBe('');
expect(result.currentDriver.country).toBe('');
expect(result.currentDriver.rating).toBe('0.0');
expect(result.currentDriver.rank).toBe('0');
expect(result.currentDriver.totalRaces).toBe('0');
expect(result.currentDriver.wins).toBe('0');
expect(result.currentDriver.podiums).toBe('0');
expect(result.currentDriver.consistency).toBe('0%');
expect(result.nextRace).toBeNull();
expect(result.upcomingRaces).toEqual([]);
expect(result.leagueStandings).toEqual([]);
expect(result.feedItems).toEqual([]);
expect(result.friends).toEqual([]);
expect(result.activeLeaguesCount).toBe('0');
expect(result.friendCount).toBe('0');
});
it('should all preserve ISO timestamps for serialization', () => {
const now = new Date();
const futureDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
const feedTimestamp = new Date(now.getTime() - 30 * 60 * 1000);
const dashboardDTO: DashboardOverviewDTO = {
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [],
activeLeaguesCount: 1,
nextRace: {
id: 'race-1',
track: 'Spa',
car: 'Porsche',
scheduledAt: futureDate.toISOString(),
status: 'scheduled',
isMyLeague: true,
},
recentResults: [],
leagueStandingsSummaries: [],
feedSummary: {
notificationCount: 1,
items: [
{
id: 'feed-1',
type: 'notification',
headline: 'Test',
timestamp: feedTimestamp.toISOString(),
},
],
},
friends: [],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
// All timestamps should be preserved as ISO strings
expect(result.nextRace?.scheduledAt).toBe(futureDate.toISOString());
expect(result.feedItems[0].timestamp).toBe(feedTimestamp.toISOString());
});
it('should all handle boolean flags correctly', () => {
const dashboardDTO: DashboardOverviewDTO = {
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [
{
id: 'race-1',
track: 'Spa',
car: 'Porsche',
scheduledAt: new Date().toISOString(),
status: 'scheduled',
isMyLeague: true,
},
{
id: 'race-2',
track: 'Monza',
car: 'Ferrari',
scheduledAt: new Date().toISOString(),
status: 'scheduled',
isMyLeague: false,
},
],
activeLeaguesCount: 1,
nextRace: null,
recentResults: [],
leagueStandingsSummaries: [],
feedSummary: {
notificationCount: 0,
items: [],
},
friends: [],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
expect(result.upcomingRaces[0].isMyLeague).toBe(true);
expect(result.upcomingRaces[1].isMyLeague).toBe(false);
});
});
describe('data integrity', () => {
it('should maintain data consistency across transformations', () => {
const dashboardDTO: DashboardOverviewDTO = {
currentDriver: {
id: 'driver-123',
name: 'John Doe',
country: 'USA',
rating: 1234.56,
globalRank: 42,
totalRaces: 150,
wins: 25,
podiums: 60,
consistency: 85,
},
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [],
activeLeaguesCount: 3,
nextRace: null,
recentResults: [],
leagueStandingsSummaries: [],
feedSummary: {
notificationCount: 5,
items: [],
},
friends: [
{ id: 'friend-1', name: 'Alice', country: 'UK' },
{ id: 'friend-2', name: 'Bob', country: 'Germany' },
],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
// Verify derived fields match their source data
expect(result.friendCount).toBe(dashboardDTO.friends.length.toString());
expect(result.activeLeaguesCount).toBe(dashboardDTO.activeLeaguesCount.toString());
expect(result.hasFriends).toBe(dashboardDTO.friends.length > 0);
expect(result.hasUpcomingRaces).toBe(dashboardDTO.upcomingRaces.length > 0);
expect(result.hasLeagueStandings).toBe(dashboardDTO.leagueStandingsSummaries.length > 0);
expect(result.hasFeedItems).toBe(dashboardDTO.feedSummary.items.length > 0);
});
it('should handle complex real-world scenarios', () => {
const now = new Date();
const race1Date = new Date(now.getTime() + 2 * 24 * 60 * 60 * 1000);
const race2Date = new Date(now.getTime() + 5 * 24 * 60 * 60 * 1000);
const feedTimestamp = new Date(now.getTime() - 60 * 60 * 1000);
const dashboardDTO: DashboardOverviewDTO = {
currentDriver: {
id: 'driver-123',
name: 'John Doe',
country: 'USA',
avatarUrl: 'https://example.com/avatar.jpg',
rating: 2456.78,
globalRank: 15,
totalRaces: 250,
wins: 45,
podiums: 120,
consistency: 92.5,
},
myUpcomingRaces: [],
otherUpcomingRaces: [],
upcomingRaces: [
{
id: 'race-1',
leagueId: 'league-1',
leagueName: 'Pro League',
track: 'Spa',
car: 'Porsche 911 GT3',
scheduledAt: race1Date.toISOString(),
status: 'scheduled',
isMyLeague: true,
},
{
id: 'race-2',
track: 'Monza',
car: 'Ferrari 488 GT3',
scheduledAt: race2Date.toISOString(),
status: 'scheduled',
isMyLeague: false,
},
],
activeLeaguesCount: 2,
nextRace: {
id: 'race-1',
leagueId: 'league-1',
leagueName: 'Pro League',
track: 'Spa',
car: 'Porsche 911 GT3',
scheduledAt: race1Date.toISOString(),
status: 'scheduled',
isMyLeague: true,
},
recentResults: [],
leagueStandingsSummaries: [
{
leagueId: 'league-1',
leagueName: 'Pro League',
position: 3,
totalDrivers: 100,
points: 2450,
},
{
leagueId: 'league-2',
leagueName: 'Rookie League',
position: 1,
totalDrivers: 50,
points: 1800,
},
],
feedSummary: {
notificationCount: 3,
items: [
{
id: 'feed-1',
type: 'race_result',
headline: 'Race completed',
body: 'You finished 3rd in the Pro League race',
timestamp: feedTimestamp.toISOString(),
ctaLabel: 'View Results',
ctaHref: '/races/123',
},
{
id: 'feed-2',
type: 'league_update',
headline: 'League standings updated',
body: 'You moved up 2 positions',
timestamp: feedTimestamp.toISOString(),
},
],
},
friends: [
{ id: 'friend-1', name: 'Alice', country: 'UK', avatarUrl: 'https://example.com/alice.jpg' },
{ id: 'friend-2', name: 'Bob', country: 'Germany' },
{ id: 'friend-3', name: 'Charlie', country: 'France', avatarUrl: 'https://example.com/charlie.jpg' },
],
};
const result = DashboardViewDataBuilder.build(dashboardDTO);
// Verify all transformations
expect(result.currentDriver.name).toBe('John Doe');
expect(result.currentDriver.rating).toBe('2,457');
expect(result.currentDriver.rank).toBe('15');
expect(result.currentDriver.totalRaces).toBe('250');
expect(result.currentDriver.wins).toBe('45');
expect(result.currentDriver.podiums).toBe('120');
expect(result.currentDriver.consistency).toBe('92.5%');
expect(result.nextRace).not.toBeNull();
expect(result.nextRace?.id).toBe('race-1');
expect(result.nextRace?.track).toBe('Spa');
expect(result.nextRace?.isMyLeague).toBe(true);
expect(result.upcomingRaces).toHaveLength(2);
expect(result.upcomingRaces[0].isMyLeague).toBe(true);
expect(result.upcomingRaces[1].isMyLeague).toBe(false);
expect(result.leagueStandings).toHaveLength(2);
expect(result.leagueStandings[0].position).toBe('#3');
expect(result.leagueStandings[0].points).toBe('2450');
expect(result.leagueStandings[1].position).toBe('#1');
expect(result.leagueStandings[1].points).toBe('1800');
expect(result.feedItems).toHaveLength(2);
expect(result.feedItems[0].type).toBe('race_result');
expect(result.feedItems[0].ctaLabel).toBe('View Results');
expect(result.feedItems[1].type).toBe('league_update');
expect(result.feedItems[1].ctaLabel).toBeUndefined();
expect(result.friends).toHaveLength(3);
expect(result.friends[0].avatarUrl).toBe('https://example.com/alice.jpg');
expect(result.friends[1].avatarUrl).toBe('');
expect(result.friends[2].avatarUrl).toBe('https://example.com/charlie.jpg');
expect(result.activeLeaguesCount).toBe('2');
expect(result.friendCount).toBe('3');
expect(result.hasUpcomingRaces).toBe(true);
expect(result.hasLeagueStandings).toBe(true);
expect(result.hasFeedItems).toBe(true);
expect(result.hasFriends).toBe(true);
});
});
});

2
apps/website/lib/display-objects/AchievementDisplay.ts → apps/website/lib/formatters/AchievementFormatter.ts
View File

@@ -1,4 +1,4 @@
export class AchievementDisplay {
export class AchievementFormatter {
static getRarityVariant(rarity: string) {
switch (rarity.toLowerCase()) {
case 'common':

2
apps/website/lib/display-objects/ActivityLevelDisplay.ts → apps/website/lib/formatters/ActivityLevelFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of engagement rates to activity level labels.
*/
export class ActivityLevelDisplay {
export class ActivityLevelFormatter {
/**
* Maps engagement rate to activity level label.
*/

2
apps/website/lib/display-objects/AvatarDisplay.ts → apps/website/lib/formatters/AvatarFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of avatar-related data to display formats.
*/
export class AvatarDisplay {
export class AvatarFormatter {
/**
* Converts binary buffer to base64 string for display.
*/

10
apps/website/lib/display-objects/CountryFlagDisplay.ts → apps/website/lib/formatters/CountryFlagFormatter.ts
View File

@@ -1,18 +1,18 @@
export class CountryFlagDisplay {
export class CountryFlagFormatter {
private constructor(private readonly value: string) {}
static fromCountryCode(countryCode: string | null | undefined): CountryFlagDisplay {
static fromCountryCode(countryCode: string | null | undefined): CountryFlagFormatter {
if (!countryCode) {
return new CountryFlagDisplay('🏁');
return new CountryFlagFormatter('🏁');
}
const code = countryCode.toUpperCase();
if (code.length !== 2) {
return new CountryFlagDisplay('🏁');
return new CountryFlagFormatter('🏁');
}
const codePoints = [...code].map((char) => 127397 + char.charCodeAt(0));
return new CountryFlagDisplay(String.fromCodePoint(...codePoints));
return new CountryFlagFormatter(String.fromCodePoint(...codePoints));
}
toString(): string {

2
apps/website/lib/display-objects/CurrencyDisplay.ts → apps/website/lib/formatters/CurrencyFormatter.ts
View File

@@ -5,7 +5,7 @@
* Avoids Intl and toLocaleString to prevent SSR/hydration mismatches.
*/
export class CurrencyDisplay {
export class CurrencyFormatter {
/**
* Formats an amount as currency (e.g., "$10.00" or "€1.000,00").
* Default currency is USD.

4
apps/website/lib/display-objects/DashboardConsistencyDisplay.test.ts → apps/website/lib/formatters/DashboardConsistencyFormatter.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest';
import { DashboardConsistencyDisplay } from './DashboardConsistencyDisplay';
import { describe, expect, it } from 'vitest';
import { DashboardConsistencyDisplay } from './DashboardConsistencyFormatter';
describe('DashboardConsistencyDisplay', () => {
describe('happy paths', () => {

2
apps/website/lib/display-objects/DashboardConsistencyDisplay.ts → apps/website/lib/formatters/DashboardConsistencyFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic consistency formatting for dashboard display.
*/
export class DashboardConsistencyDisplay {
export class DashboardConsistencyFormatter {
static format(consistency: number): string {
return `${consistency}%`;
}

38
apps/website/lib/formatters/DashboardCountFormatter.test.ts Normal file
View File

@@ -0,0 +1,38 @@
import { describe, expect, it } from 'vitest';
import { DashboardCountFormatter } from './DashboardCountFormatter';
describe('DashboardCountDisplay', () => {
describe('happy paths', () => {
it('should format positive numbers correctly', () => {
expect(DashboardCountFormatter.format(0)).toBe('0');
expect(DashboardCountFormatter.format(1)).toBe('1');
expect(DashboardCountFormatter.format(100)).toBe('100');
expect(DashboardCountFormatter.format(1000)).toBe('1000');
});
it('should handle null values', () => {
expect(DashboardCountFormatter.format(null)).toBe('0');
});
it('should handle undefined values', () => {
expect(DashboardCountFormatter.format(undefined)).toBe('0');
});
});
describe('edge cases', () => {
it('should handle negative numbers', () => {
expect(DashboardCountFormatter.format(-1)).toBe('-1');
expect(DashboardCountFormatter.format(-100)).toBe('-100');
});
it('should handle large numbers', () => {
expect(DashboardCountFormatter.format(999999)).toBe('999999');
expect(DashboardCountFormatter.format(1000000)).toBe('1000000');
});
it('should handle decimal numbers', () => {
expect(DashboardCountFormatter.format(1.5)).toBe('1.5');
expect(DashboardCountFormatter.format(100.99)).toBe('100.99');
});
});
});

2
apps/website/lib/display-objects/DashboardCountDisplay.ts → apps/website/lib/formatters/DashboardCountFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic count formatting for dashboard display.
*/
export class DashboardCountDisplay {
export class DashboardCountFormatter {
static format(count: number | null | undefined): string {
if (count === null || count === undefined) {
return '0';

0
apps/website/lib/display-objects/DashboardDateDisplay.test.ts → apps/website/lib/formatters/DashboardDateFormatter.test.ts
View File

2
apps/website/lib/display-objects/DashboardDateDisplay.ts → apps/website/lib/formatters/DashboardDateFormatter.ts
View File

@@ -14,7 +14,7 @@ export interface DashboardDateDisplayData {
/**
* Format date for display (deterministic, no Intl)
*/
export class DashboardDateDisplay {
export class DashboardDateFormatter {
static format(date: Date): DashboardDateDisplayData {
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

4
apps/website/lib/display-objects/DashboardLeaguePositionDisplay.test.ts → apps/website/lib/formatters/DashboardLeaguePositionFormatter.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest';
import { DashboardLeaguePositionDisplay } from './DashboardLeaguePositionDisplay';
import { describe, expect, it } from 'vitest';
import { DashboardLeaguePositionDisplay } from './DashboardLeaguePositionFormatter';
describe('DashboardLeaguePositionDisplay', () => {
describe('happy paths', () => {

2
apps/website/lib/display-objects/DashboardLeaguePositionDisplay.ts → apps/website/lib/formatters/DashboardLeaguePositionFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic league position formatting for dashboard display.
*/
export class DashboardLeaguePositionDisplay {
export class DashboardLeaguePositionFormatter {
static format(position: number | null | undefined): string {
if (position === null || position === undefined) {
return '-';

4
apps/website/lib/display-objects/DashboardRankDisplay.test.ts → apps/website/lib/formatters/DashboardRankFormatter.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest';
import { DashboardRankDisplay } from './DashboardRankDisplay';
import { describe, expect, it } from 'vitest';
import { DashboardRankDisplay } from './DashboardRankFormatter';
describe('DashboardRankDisplay', () => {
describe('happy paths', () => {

2
apps/website/lib/display-objects/DashboardRankDisplay.ts → apps/website/lib/formatters/DashboardRankFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic rank formatting for dashboard display.
*/
export class DashboardRankDisplay {
export class DashboardRankFormatter {
static format(rank: number): string {
return rank.toString();
}

2
apps/website/lib/display-objects/DateDisplay.ts → apps/website/lib/formatters/DateFormatter.ts
View File

@@ -1,4 +1,4 @@
export class DateDisplay {
export class DateFormatter {
/**
* Formats a date as "Jan 18, 2026" using UTC.
*/

2
apps/website/lib/display-objects/DriverRegistrationStatusDisplay.tsx → apps/website/lib/formatters/DriverRegistrationStatusFormatter.tsx
View File

@@ -5,7 +5,7 @@
* to UI labels and variants.
*/
export class DriverRegistrationStatusDisplay {
export class DriverRegistrationStatusFormatter {
static statusMessage(isRegistered: boolean): string {
return isRegistered ? "Registered for this race" : "Not registered";
}

2
apps/website/lib/display-objects/DurationDisplay.ts → apps/website/lib/formatters/DurationFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic formatting for time durations.
*/
export class DurationDisplay {
export class DurationFormatter {
/**
* Formats milliseconds as "123.45ms".
*/

2
apps/website/lib/display-objects/FinishDisplay.ts → apps/website/lib/formatters/FinishFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic formatting for race finish positions.
*/
export class FinishDisplay {
export class FinishFormatter {
/**
* Formats a finish position as "P1", "P2", etc.
*/

2
apps/website/lib/display-objects/HealthAlertDisplay.ts → apps/website/lib/formatters/HealthAlertFormatter.ts
View File

@@ -5,7 +5,7 @@
* This display object isolates UI-specific formatting from business logic.
*/
export class HealthAlertDisplay {
export class HealthAlertFormatter {
static formatSeverity(type: 'critical' | 'warning' | 'info'): string {
const severities: Record<string, string> = {
critical: 'Critical',

2
apps/website/lib/display-objects/HealthComponentDisplay.ts → apps/website/lib/formatters/HealthComponentFormatter.ts
View File

@@ -5,7 +5,7 @@
* This display object isolates UI-specific formatting from business logic.
*/
export class HealthComponentDisplay {
export class HealthComponentFormatter {
static formatStatusLabel(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
const labels: Record<string, string> = {
ok: 'Healthy',

2
apps/website/lib/display-objects/HealthMetricDisplay.ts → apps/website/lib/formatters/HealthMetricFormatter.ts
View File

@@ -5,7 +5,7 @@
* This display object isolates UI-specific formatting from business logic.
*/
export class HealthMetricDisplay {
export class HealthMetricFormatter {
static formatUptime(uptime?: number): string {
if (uptime === undefined || uptime === null) return 'N/A';
if (uptime < 0) return 'N/A';

2
apps/website/lib/display-objects/HealthStatusDisplay.ts → apps/website/lib/formatters/HealthStatusFormatter.ts
View File

@@ -5,7 +5,7 @@
* This display object isolates UI-specific formatting from business logic.
*/
export class HealthStatusDisplay {
export class HealthStatusFormatter {
static formatStatusLabel(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
const labels: Record<string, string> = {
ok: 'Healthy',

2
apps/website/lib/display-objects/LeagueCreationStatusDisplay.ts → apps/website/lib/formatters/LeagueCreationStatusFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of league creation status to display messages.
*/
export class LeagueCreationStatusDisplay {
export class LeagueCreationStatusFormatter {
/**
* Maps league creation success status to display message.
*/

2
apps/website/lib/display-objects/LeagueDisplay.ts → apps/website/lib/formatters/LeagueFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic display logic for leagues.
*/
export class LeagueDisplay {
export class LeagueFormatter {
/**
* Formats a league count with pluralization.
* Example: 1 -> "1 league", 2 -> "2 leagues"

2
apps/website/lib/display-objects/LeagueRoleDisplay.ts → apps/website/lib/formatters/LeagueRoleFormatter.ts
View File

@@ -25,7 +25,7 @@ export const leagueRoleDisplay: Record<LeagueRole, LeagueRoleDisplayData> = {
} as const;
// For backward compatibility, also export the class with static method
export class LeagueRoleDisplay {
export class LeagueRoleFormatter {
static getLeagueRoleDisplay(role: LeagueRole) {
return leagueRoleDisplay[role];
}

2
apps/website/lib/display-objects/LeagueTierDisplay.ts → apps/website/lib/formatters/LeagueTierFormatter.ts
View File

@@ -11,7 +11,7 @@ export interface LeagueTierDisplayData {
icon: string;
}
export class LeagueTierDisplay {
export class LeagueTierFormatter {
private static readonly CONFIG: Record<string, LeagueTierDisplayData> = {
premium: {
color: 'text-yellow-400',

1
apps/website/lib/display-objects/LeagueWizardValidationMessages.ts → apps/website/lib/formatters/LeagueWizardValidationMessages.ts
View File

@@ -1,3 +1,4 @@
// TODO this file has no clear meaning
export class LeagueWizardValidationMessages {
static readonly LEAGUE_NAME_REQUIRED = 'League name is required';
static readonly LEAGUE_NAME_TOO_SHORT = 'League name must be at least 3 characters';

2
apps/website/lib/display-objects/MedalDisplay.ts → apps/website/lib/formatters/MedalFormatter.ts
View File

@@ -1,4 +1,4 @@
export class MedalDisplay {
export class MedalFormatter {
static getVariant(position: number): 'warning' | 'low' | 'high' {
switch (position) {
case 1: return 'warning';

2
apps/website/lib/display-objects/MemberDisplay.ts → apps/website/lib/formatters/MemberFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic display logic for members.
*/
export class MemberDisplay {
export class MemberFormatter {
/**
* Formats a member count with pluralization.
* Example: 1 -> "1 member", 2 -> "2 members"

2
apps/website/lib/display-objects/MembershipFeeTypeDisplay.ts → apps/website/lib/formatters/MembershipFeeTypeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class MembershipFeeTypeDisplay {
export class MembershipFeeTypeFormatter {
static format(type: string): string {
switch (type) {
case 'season': return 'Per Season';

2
apps/website/lib/display-objects/MemoryDisplay.ts → apps/website/lib/formatters/MemoryFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic formatting for memory usage.
*/
export class MemoryDisplay {
export class MemoryFormatter {
/**
* Formats bytes as "123.4MB".
*/

2
apps/website/lib/display-objects/NumberDisplay.ts → apps/website/lib/formatters/NumberFormatter.ts
View File

@@ -5,7 +5,7 @@
* Avoids Intl and toLocaleString to prevent SSR/hydration mismatches.
*/
export class NumberDisplay {
export class NumberFormatter {
/**
* Formats a number with thousands separators (commas).
* Example: 1234567 -> "1,234,567"

2
apps/website/lib/display-objects/OnboardingStatusDisplay.ts → apps/website/lib/formatters/OnboardingStatusFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of onboarding status to display labels and variants.
*/
export class OnboardingStatusDisplay {
export class OnboardingStatusFormatter {
/**
* Maps onboarding success status to display label.
*/

2
apps/website/lib/display-objects/PayerTypeDisplay.ts → apps/website/lib/formatters/PayerTypeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class PayerTypeDisplay {
export class PayerTypeFormatter {
static format(type: string): string {
return type.charAt(0).toUpperCase() + type.slice(1);
}

2
apps/website/lib/display-objects/PaymentTypeDisplay.ts → apps/website/lib/formatters/PaymentTypeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class PaymentTypeDisplay {
export class PaymentTypeFormatter {
static format(type: string): string {
return type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
}

2
apps/website/lib/display-objects/PercentDisplay.ts → apps/website/lib/formatters/PercentFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic formatting for percentages.
*/
export class PercentDisplay {
export class PercentFormatter {
/**
* Formats a decimal value as a percentage string.
* Example: 0.1234 -> "12.3%"

2
apps/website/lib/display-objects/PrizeTypeDisplay.ts → apps/website/lib/formatters/PrizeTypeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class PrizeTypeDisplay {
export class PrizeTypeFormatter {
static format(type: string): string {
switch (type) {
case 'cash': return 'Cash Prize';

12
apps/website/lib/display-objects/ProfileDisplay.ts → apps/website/lib/formatters/ProfileFormatter.ts
View File

@@ -30,7 +30,7 @@ export interface TeamRoleDisplayData {
badgeClasses: string;
}
export class ProfileDisplay {
export class ProfileFormatter {
private static readonly countryFlagDisplay: Record<string, CountryFlagDisplayData> = {
US: { flag: '🇺🇸', label: 'United States' },
GB: { flag: '🇬🇧', label: 'United Kingdom' },
@@ -47,7 +47,7 @@ export class ProfileDisplay {
static getCountryFlag(countryCode: string): CountryFlagDisplayData {
const code = countryCode.toUpperCase();
return ProfileDisplay.countryFlagDisplay[code] || ProfileDisplay.countryFlagDisplay.DEFAULT;
return ProfileFormatter.countryFlagDisplay[code] || ProfileFormatter.countryFlagDisplay.DEFAULT;
}
private static readonly achievementRarityDisplay: Record<string, AchievementRarityDisplayData> = {
@@ -74,7 +74,7 @@ export class ProfileDisplay {
};
static getAchievementRarity(rarity: string): AchievementRarityDisplayData {
return ProfileDisplay.achievementRarityDisplay[rarity] || ProfileDisplay.achievementRarityDisplay.common;
return ProfileFormatter.achievementRarityDisplay[rarity] || ProfileFormatter.achievementRarityDisplay.common;
}
private static readonly achievementIconDisplay: Record<string, AchievementIconDisplayData> = {
@@ -87,7 +87,7 @@ export class ProfileDisplay {
};
static getAchievementIcon(icon: string): AchievementIconDisplayData {
return ProfileDisplay.achievementIconDisplay[icon] || ProfileDisplay.achievementIconDisplay.trophy;
return ProfileFormatter.achievementIconDisplay[icon] || ProfileFormatter.achievementIconDisplay.trophy;
}
private static readonly socialPlatformDisplay: Record<string, SocialPlatformDisplayData> = {
@@ -110,7 +110,7 @@ export class ProfileDisplay {
};
static getSocialPlatform(platform: string): SocialPlatformDisplayData {
return ProfileDisplay.socialPlatformDisplay[platform] || ProfileDisplay.socialPlatformDisplay.discord;
return ProfileFormatter.socialPlatformDisplay[platform] || ProfileFormatter.socialPlatformDisplay.discord;
}
static formatMonthYear(dateString: string): string {
@@ -184,6 +184,6 @@ export class ProfileDisplay {
};
static getTeamRole(role: string): TeamRoleDisplayData {
return ProfileDisplay.teamRoleDisplay[role] || ProfileDisplay.teamRoleDisplay.member;
return ProfileFormatter.teamRoleDisplay[role] || ProfileFormatter.teamRoleDisplay.member;
}
}

2
apps/website/lib/display-objects/RaceStatusDisplay.ts → apps/website/lib/formatters/RaceStatusFormatter.ts
View File

@@ -6,7 +6,7 @@
export type RaceStatusVariant = 'info' | 'success' | 'neutral' | 'warning' | 'primary' | 'default';
export class RaceStatusDisplay {
export class RaceStatusFormatter {
private static readonly CONFIG: Record<string, { variant: RaceStatusVariant; label: string; icon: string }> = {
scheduled: {
variant: 'primary',

0
apps/website/lib/display-objects/RatingDisplay.test.ts → apps/website/lib/formatters/RatingFormatter.test.ts
View File

6
apps/website/lib/display-objects/RatingDisplay.ts → apps/website/lib/formatters/RatingFormatter.ts
View File

@@ -1,12 +1,12 @@
import { NumberDisplay } from './NumberDisplay';
import { NumberFormatter } from './NumberFormatter';
export class RatingDisplay {
export class RatingFormatter {
/**
* Formats a rating as a rounded number with thousands separators.
* Example: 1234.56 -> "1,235"
*/
static format(rating: number | null | undefined): string {
if (rating === null || rating === undefined) return '—';
return NumberDisplay.format(Math.round(rating));
return NumberFormatter.format(Math.round(rating));
}
}

2
apps/website/lib/display-objects/RatingTrendDisplay.ts → apps/website/lib/formatters/RatingTrendFormatter.ts
View File

@@ -1,4 +1,4 @@
export class RatingTrendDisplay {
export class RatingTrendFormatter {
static getTrend(currentRating: number, previousRating: number | undefined): 'up' | 'down' | 'same' {
if (!previousRating) return 'same';
if (currentRating > previousRating) return 'up';

2
apps/website/lib/display-objects/RelativeTimeDisplay.ts → apps/website/lib/formatters/RelativeTimeFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic relative time formatting.
*/
export class RelativeTimeDisplay {
export class RelativeTimeFormatter {
/**
* Formats a date relative to "now".
* "now" must be passed as an argument for determinism.

2
apps/website/lib/display-objects/SeasonStatusDisplay.ts → apps/website/lib/formatters/SeasonStatusFormatter.ts
View File

@@ -10,7 +10,7 @@ export interface SeasonStatusDisplayData {
label: string;
}
export class SeasonStatusDisplay {
export class SeasonStatusFormatter {
private static readonly CONFIG: Record<string, SeasonStatusDisplayData> = {
active: {
color: 'text-performance-green',

2
apps/website/lib/display-objects/SkillLevelDisplay.ts → apps/website/lib/formatters/SkillLevelFormatter.ts
View File

@@ -1,4 +1,4 @@
export class SkillLevelDisplay {
export class SkillLevelFormatter {
static getLabel(skillLevel: string): string {
const levels: Record<string, string> = {
pro: 'Pro',

2
apps/website/lib/display-objects/SkillLevelIconDisplay.ts → apps/website/lib/formatters/SkillLevelIconFormatter.ts
View File

@@ -1,4 +1,4 @@
export class SkillLevelIconDisplay {
export class SkillLevelIconFormatter {
static getIcon(skillLevel: string): string {
const icons: Record<string, string> = {
beginner: '🥉',

2
apps/website/lib/display-objects/StatusDisplay.ts → apps/website/lib/formatters/StatusFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of status codes to human-readable labels.
*/
export class StatusDisplay {
export class StatusFormatter {
/**
* Maps transaction status to label.
*/

2
apps/website/lib/display-objects/TeamCreationStatusDisplay.ts → apps/website/lib/formatters/TeamCreationStatusFormatter.ts
View File

@@ -4,7 +4,7 @@
* Deterministic mapping of team creation status to display messages.
*/
export class TeamCreationStatusDisplay {
export class TeamCreationStatusFormatter {
/**
* Maps team creation success status to display message.
*/

2
apps/website/lib/display-objects/TimeDisplay.ts → apps/website/lib/formatters/TimeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class TimeDisplay {
export class TimeFormatter {
static timeAgo(timestamp: Date | string): string {
const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
const diffMs = Date.now() - date.getTime();

2
apps/website/lib/display-objects/TransactionTypeDisplay.ts → apps/website/lib/formatters/TransactionTypeFormatter.ts
View File

@@ -1,4 +1,4 @@
export class TransactionTypeDisplay {
export class TransactionTypeFormatter {
static format(type: string): string {
return type.charAt(0).toUpperCase() + type.slice(1);
}

Some files were not shown because too many files have changed in this diff Show More