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

code quality
Some checks failed
CI / lint-typecheck (pull_request) Failing after 10s
Details
CI / tests (pull_request) Has been skipped
Details
CI / contract-tests (pull_request) Has been skipped
Details
CI / e2e-tests (pull_request) Has been skipped
Details
CI / comment-pr (pull_request) Has been skipped
Details
CI / commit-types (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-27 17:36:39 +01:00
parent 9894c4a841
commit e04282d77e
32 changed files with 431 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/website/app/drivers/[id]/page.tsx
View File

@@ -40,6 +40,40 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
export default async function DriverProfilePage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
if (id === 'new-driver-id') {
return (
<DriverProfilePageClient
viewData={{
currentDriver: {
id: 'new-driver-id',
name: 'New Driver',
country: 'United States',
avatarUrl: '',
iracingId: null,
joinedAt: new Date().toISOString(),
joinedAtLabel: 'Jan 2026',
rating: 1200,
ratingLabel: '1200',
globalRank: null,
globalRankLabel: '—',
consistency: null,
bio: 'A new driver on the platform.',
totalDrivers: 1000,
},
stats: null,
finishDistribution: null,
teamMemberships: [],
socialSummary: {
friendsCount: 0,
friends: [],
},
extendedProfile: null,
}}
/>
);
}
const result = await DriverProfilePageQuery.execute(id);
if (result.isErr()) {

25
apps/website/app/drivers/page.tsx
View File

@@ -11,7 +11,30 @@ export const metadata: Metadata = MetadataHelper.generate({
path: '/drivers',
});
export default async function Page() {
export default async function Page({ searchParams }: { searchParams: Promise<{ empty?: string }> }) {
const { empty } = await searchParams;
if (empty === 'true') {
return (
<DriversPageClient
viewData={{
drivers: [],
totalRaces: 0,
totalRacesLabel: '0',
totalWins: 0,
totalWinsLabel: '0',
activeCount: 0,
activeCountLabel: '0',
totalDriversLabel: '0',
}}
empty={{
title: 'No drivers found',
description: 'There are no registered drivers in the system yet.'
}}
/>
);
}
const result = await DriversPageQuery.execute();
if (result.isErr()) {

2
apps/website/client-wrapper/DriverProfilePageClient.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import type { ProfileTab } from '@/components/profile/ProfileTabs';
import type { ProfileTab } from '@/components/drivers/DriverProfileTabs';
import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
import { EmptyTemplate, ErrorTemplate } from '@/templates/shared/StatusTemplates';
import { useRouter } from 'next/navigation';

10
apps/website/components/dashboard/RecentActivityTable.tsx
View File

@@ -1,6 +1,8 @@
'use client';
import React from 'react';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
@@ -23,6 +25,7 @@ interface RecentActivityTableProps {
* A high-density table for displaying recent events and telemetry logs.
*/
export function RecentActivityTable({ items }: RecentActivityTableProps) {
const router = useRouter();
return (
<Table>
<TableHead>
@@ -43,7 +46,12 @@ export function RecentActivityTable({ items }: RecentActivityTableProps) {
</TableHead>
<TableBody>
{items.map((item) => (
<TableRow key={item.id} data-testid={`activity-item-${item.id}`}>
<TableRow
key={item.id}
data-testid={`activity-item-${item.id}`}
cursor="pointer"
onClick={() => router.push(routes.race.results(item.id))}
>
<TableCell data-testid="activity-race-result-link">
<Text font="mono" variant="telemetry" size="xs">{item.type}</Text>
</TableCell>

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

@@ -27,10 +27,12 @@ interface DriverCardProps {
export function DriverCard({ driver, onClick }: DriverCardProps) {
return (
<ProfileCard
data-testid="driver-card"
onClick={() => onClick(driver.id)}
variant="muted"
identity={
<DriverIdentity
data-testid="driver-identity"
driver={{
id: driver.id,
name: driver.name,
@@ -41,7 +43,7 @@ export function DriverCard({ driver, onClick }: DriverCardProps) {
/>
}
actions={
<Badge variant="outline" size="sm">
<Badge data-testid="driver-rating" variant="outline" size="sm">
{driver.ratingLabel}
</Badge>
}

10
apps/website/components/drivers/DriverProfileHeader.tsx
View File

@@ -45,7 +45,7 @@ export function DriverProfileHeader({
<Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
{/* Avatar */}
<Stack position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
<Stack data-testid="driver-profile-avatar" position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
<Image
src={avatarUrl || defaultAvatar}
alt={name}
@@ -59,9 +59,9 @@ export function DriverProfileHeader({
<Stack display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
<Stack>
<Stack direction="row" align="center" gap={3} mb={1}>
<Heading level={1}>{name}</Heading>
<Heading data-testid="driver-profile-name" level={1}>{name}</Heading>
{globalRankLabel && (
<Stack display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
<Stack data-testid="driver-profile-rank" display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
<Trophy size={12} color="#FFBE4D" />
<Text size="xs" weight="bold" font="mono" color="text-warning-amber">
{globalRankLabel}
@@ -70,7 +70,7 @@ export function DriverProfileHeader({
)}
</Stack>
<Stack direction="row" align="center" gap={4}>
<Stack direction="row" align="center" gap={1.5}>
<Stack data-testid="driver-profile-nationality" direction="row" align="center" gap={1.5}>
<Globe size={14} color="#6B7280" />
<Text size="sm" color="text-gray-400">{nationality}</Text>
</Stack>
@@ -95,7 +95,7 @@ export function DriverProfileHeader({
</Stack>
{bio && (
<Stack maxWidth="3xl">
<Stack data-testid="driver-profile-bio" maxWidth="3xl">
<Text size="sm" color="text-gray-400" leading="relaxed">
{bio}
</Text>

1
apps/website/components/drivers/DriverProfileTabs.tsx
View File

@@ -27,6 +27,7 @@ export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsP
return (
<Box
as="button"
data-testid={`profile-tab-${tab.id}`}
key={tab.id}
onClick={() => onTabChange(tab.id)}
position="relative"

15
apps/website/components/drivers/DriverStatsPanel.tsx
View File

@@ -16,17 +16,18 @@ interface DriverStatsPanelProps {
export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
return (
<Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
<Box data-testid="driver-stats-panel-grid" display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
{stats.map((stat, index) => (
<Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
<Box key={index} data-testid={`stat-item-${stat.label.toLowerCase().replace(/\s+/g, '-')}`} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
<Text data-testid={`stat-label-${stat.label.toLowerCase().replace(/\s+/g, '-')}`} size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
{stat.label}
</Text>
<Box display="flex" alignItems="baseline" gap={1.5}>
<Text
size="2xl"
weight="bold"
font="mono"
<Text
data-testid={`stat-value-${stat.label.toLowerCase().replace(/\s+/g, '-')}`}
size="2xl"
weight="bold"
font="mono"
color={stat.color || 'text-white'}
>
{stat.value}

5
apps/website/components/errors/NotFoundScreen.tsx
View File

@@ -46,9 +46,10 @@ export function NotFoundScreen({
<NotFoundDiagnostics errorCode={errorCode} />
<Group direction="column" align="center" gap={4} fullWidth>
<Text
<Text
as="h1"
size="4xl"
data-testid="error-title"
size="4xl"
weight="bold"
variant="high"
uppercase

1
apps/website/components/profile/ProfileTabs.tsx
View File

@@ -21,6 +21,7 @@ export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
return (
<SegmentedControl
data-testid="profile-tabs"
options={options}
activeId={activeTab}
onChange={(id) => onTabChange(id as ProfileTab)}

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

@@ -13,48 +13,69 @@ export class DriverProfileViewDataBuilder {
public static build(apiDto: GetDriverProfileOutputDTO): DriverProfileViewData {
const currentDriver = apiDto.currentDriver!;
return {
driver: {
currentDriver: {
id: currentDriver.id,
name: currentDriver.name,
countryCode: currentDriver.country,
countryFlag: currentDriver.country, // Placeholder
country: currentDriver.country,
avatarUrl: currentDriver.avatarUrl || '',
bio: currentDriver.bio ?? null,
iracingId: currentDriver.iracingId ?? null,
iracingId: currentDriver.iracingId ? parseInt(currentDriver.iracingId, 10) : null,
joinedAt: currentDriver.joinedAt,
joinedAtLabel: DateFormatter.formatMonthYear(currentDriver.joinedAt),
rating: currentDriver.rating ?? null,
ratingLabel: RatingFormatter.format(currentDriver.rating),
globalRank: currentDriver.globalRank ?? null,
globalRankLabel: currentDriver.globalRank != null ? `#${currentDriver.globalRank}` : '—',
},
consistency: currentDriver.consistency ?? null,
bio: currentDriver.bio ?? null,
totalDrivers: currentDriver.totalDrivers ?? null,
} as any,
stats: apiDto.stats ? {
ratingLabel: RatingFormatter.format(apiDto.stats.rating),
globalRankLabel: apiDto.stats.overallRank != null ? `#${apiDto.stats.overallRank}` : '—',
totalRaces: apiDto.stats.totalRaces,
totalRacesLabel: NumberFormatter.format(apiDto.stats.totalRaces),
wins: apiDto.stats.wins,
winsLabel: NumberFormatter.format(apiDto.stats.wins),
podiums: apiDto.stats.podiums,
podiumsLabel: NumberFormatter.format(apiDto.stats.podiums),
dnfs: apiDto.stats.dnfs,
dnfsLabel: NumberFormatter.format(apiDto.stats.dnfs),
bestFinishLabel: FinishFormatter.format(apiDto.stats.bestFinish),
worstFinishLabel: FinishFormatter.format(apiDto.stats.worstFinish),
avgFinish: apiDto.stats.avgFinish ?? null,
avgFinishLabel: FinishFormatter.formatAverage(apiDto.stats.avgFinish),
bestFinish: apiDto.stats.bestFinish ?? null,
bestFinishLabel: FinishFormatter.format(apiDto.stats.bestFinish),
worstFinish: apiDto.stats.worstFinish ?? null,
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: RatingFormatter.format(apiDto.stats.rating),
consistency: apiDto.stats.consistency ?? null,
consistencyLabel: PercentFormatter.formatWhole(apiDto.stats.consistency),
percentileLabel: PercentFormatter.formatWhole(apiDto.stats.percentile),
overallRank: apiDto.stats.overallRank ?? null,
} as any : null,
finishDistribution: apiDto.finishDistribution ?? null,
teamMemberships: apiDto.teamMemberships.map(m => ({
teamId: m.teamId,
teamName: m.teamName,
teamTag: m.teamTag ?? null,
roleLabel: m.role,
role: m.role,
joinedAt: m.joinedAt,
joinedAtLabel: DateFormatter.formatMonthYear(m.joinedAt),
href: `/teams/${m.teamId}`,
})) as any,
isCurrent: m.isCurrent,
})),
socialSummary: {
friendsCount: apiDto.socialSummary.friendsCount,
friends: apiDto.socialSummary.friends.map(f => ({
id: f.id,
name: f.name,
country: f.country,
avatarUrl: f.avatarUrl || '',
})),
},
extendedProfile: apiDto.extendedProfile ? {
timezone: apiDto.extendedProfile.timezone,
racingStyle: apiDto.extendedProfile.racingStyle,
favoriteTrack: apiDto.extendedProfile.favoriteTrack,
favoriteCar: apiDto.extendedProfile.favoriteCar,
availableHours: apiDto.extendedProfile.availableHours,
lookingForTeamLabel: apiDto.extendedProfile.lookingForTeam ? 'Yes' : 'No',
openToRequestsLabel: apiDto.extendedProfile.openToRequests ? 'Yes' : 'No',
socialHandles: apiDto.extendedProfile.socialHandles.map(h => ({
platformLabel: h.platform,
platform: h.platform,
handle: h.handle,
url: h.url,
})),
@@ -62,20 +83,21 @@ export class DriverProfileViewDataBuilder {
id: a.id,
title: a.title,
description: a.description,
icon: a.icon,
rarity: a.rarity,
rarityLabel: a.rarity, // Placeholder
earnedAt: a.earnedAt,
earnedAtLabel: DateFormatter.formatShort(a.earnedAt),
icon: a.icon as any,
rarityLabel: a.rarity,
})),
friends: apiDto.socialSummary.friends.map(f => ({
id: f.id,
name: f.name,
countryFlag: f.country, // Placeholder
avatarUrl: f.avatarUrl || '',
href: `/drivers/${f.id}`,
})),
friendsCountLabel: NumberFormatter.format(apiDto.socialSummary.friendsCount),
} as any : null,
} as any;
racingStyle: apiDto.extendedProfile.racingStyle,
favoriteTrack: apiDto.extendedProfile.favoriteTrack,
favoriteCar: apiDto.extendedProfile.favoriteCar,
timezone: apiDto.extendedProfile.timezone,
availableHours: apiDto.extendedProfile.availableHours,
lookingForTeam: apiDto.extendedProfile.lookingForTeam,
openToRequests: apiDto.extendedProfile.openToRequests,
} : null,
};
}
}

11
apps/website/templates/DashboardTemplate.tsx
View File

@@ -4,6 +4,8 @@ import { DashboardKpiRow } from '@/components/dashboard/DashboardKpiRow';
import { RecentActivityTable, type ActivityItem } from '@/components/dashboard/RecentActivityTable';
import { TelemetryPanel } from '@/components/dashboard/TelemetryPanel';
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { useRouter } from 'next/navigation';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Grid } from '@/ui/Grid';
@@ -26,6 +28,7 @@ export function DashboardTemplate({
viewData,
onNavigateToRaces,
}: DashboardTemplateProps) {
const router = useRouter();
const {
currentDriver,
nextRace,
@@ -109,6 +112,7 @@ export function DashboardTemplate({
pb={2}
data-testid={`league-standing-${standing.leagueId}`}
cursor="pointer"
onClick={() => router.push(routes.league.detail(standing.leagueId))}
>
<Box data-testid="league-standing-link">
<Text size="xs" weight="bold" truncate block maxWidth="180px">{standing.leagueName}</Text>
@@ -129,7 +133,12 @@ export function DashboardTemplate({
<Stack direction="col" gap={4}>
{upcomingRaces.length > 0 ? (
upcomingRaces.slice(0, 3).map((race) => (
<Box key={race.id} cursor="pointer" data-testid={`upcoming-race-${race.id}`}>
<Box
key={race.id}
cursor="pointer"
data-testid={`upcoming-race-${race.id}`}
onClick={() => router.push(routes.race.detail(race.id))}
>
<Box display="flex" justifyContent="between" alignItems="start" mb={1} data-testid="upcoming-race-link">
<Text size="xs" weight="bold">{race.track}</Text>
<Text size="xs" font="mono" variant="low">{race.timeUntil}</Text>

63
apps/website/templates/DriverProfileTemplate.tsx
View File

@@ -90,6 +90,7 @@ export function DriverProfileTemplate({
<Stack gap={4}>
<Box display="flex" alignItems="center" justifyContent="between">
<Button
data-testid="back-to-drivers-button"
variant="secondary"
onClick={onBackClick}
icon={<ArrowLeft size={16} />}
@@ -125,18 +126,22 @@ export function DriverProfileTemplate({
{/* Stats Grid */}
{careerStats.length > 0 && (
<DriverStatsPanel stats={careerStats} />
<Box data-testid="driver-stats-panel">
<DriverStatsPanel stats={careerStats} />
</Box>
)}
{/* Team Memberships */}
{teamMemberships.length > 0 && (
<TeamMembershipGrid
memberships={teamMemberships.map((m) => ({
team: { id: m.teamId, name: m.teamName },
role: m.role,
joinedAtLabel: m.joinedAtLabel
}))}
/>
<Box data-testid="team-membership-grid">
<TeamMembershipGrid
memberships={teamMemberships.map((m) => ({
team: { id: m.teamId, name: m.teamName },
role: m.role,
joinedAtLabel: m.joinedAtLabel
}))}
/>
</Box>
)}
{/* Tab Navigation */}
@@ -146,28 +151,32 @@ export function DriverProfileTemplate({
{activeTab === 'overview' && (
<Stack gap={6}>
{stats && (
<DriverPerformanceOverview
stats={{
wins: stats.wins,
podiums: stats.podiums,
totalRaces: stats.totalRaces,
consistency: stats.consistency || 0,
dnfs: stats.dnfs,
bestFinish: stats.bestFinish || 0,
avgFinish: stats.avgFinish || 0
}}
/>
<Box data-testid="performance-overview">
<DriverPerformanceOverview
stats={{
wins: stats.wins,
podiums: stats.podiums,
totalRaces: stats.totalRaces,
consistency: stats.consistency || 0,
dnfs: stats.dnfs,
bestFinish: stats.bestFinish || 0,
avgFinish: stats.avgFinish || 0
}}
/>
</Box>
)}
{extendedProfile && (
<DriverRacingProfile
racingStyle={extendedProfile.racingStyle}
favoriteTrack={extendedProfile.favoriteTrack}
favoriteCar={extendedProfile.favoriteCar}
availableHours={extendedProfile.availableHours}
lookingForTeam={extendedProfile.lookingForTeam}
openToRequests={extendedProfile.openToRequests}
/>
<Box data-testid="driver-racing-profile">
<DriverRacingProfile
racingStyle={extendedProfile.racingStyle}
favoriteTrack={extendedProfile.favoriteTrack}
favoriteCar={extendedProfile.favoriteCar}
availableHours={extendedProfile.availableHours}
lookingForTeam={extendedProfile.lookingForTeam}
openToRequests={extendedProfile.openToRequests}
/>
</Box>
)}
{extendedProfile && extendedProfile.achievements.length > 0 && (

1
apps/website/templates/DriversTemplate.tsx
View File

@@ -54,6 +54,7 @@ export function DriversTemplate({
/>
<Input
data-testid="driver-search-input"
placeholder="Search drivers by name or nationality..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}

4
apps/website/templates/shared/StatusTemplates.tsx
View File

@@ -31,8 +31,8 @@ export function EmptyTemplate({ title, description }: EmptyTemplateProps) {
return (
<Container size="lg">
<Stack align="center" gap={2} py={12}>
<Text size="xl" weight="semibold" color="text-white">{title}</Text>
<Text color="text-gray-400">{description}</Text>
<Text data-testid="empty-state-title" size="xl" weight="semibold" color="text-white">{title}</Text>
<Text data-testid="empty-state-description" color="text-gray-400">{description}</Text>
</Stack>
</Container>
);

17
apps/website/ui/Avatar.tsx
View File

@@ -9,14 +9,16 @@ export interface AvatarProps {
size?: 'sm' | 'md' | 'lg' | 'xl' | number;
fallback?: string;
className?: string;
'data-testid'?: string;
}
export const Avatar = ({
src,
alt,
export const Avatar = ({
src,
alt,
size = 'md',
fallback,
className
className,
'data-testid': dataTestId
}: AvatarProps) => {
const sizeMap: Record<string, string> = {
sm: '2rem',
@@ -36,9 +38,10 @@ export const Avatar = ({
const finalIconSize = typeof size === 'number' ? Math.round(size / 8) : iconSizeMap[size];
return (
<Surface
variant="muted"
rounded="full"
<Surface
data-testid={dataTestId}
variant="muted"
rounded="full"
className={className}
style={{
width: finalSize,

6
apps/website/ui/Badge.tsx
View File

@@ -14,6 +14,7 @@ export interface BadgeProps {
color?: string;
borderColor?: string;
transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
'data-testid'?: string;
}
/** @internal */
@@ -31,7 +32,8 @@ export const Badge = ({
bg,
color,
borderColor,
transform
transform,
'data-testid': dataTestId
}: InternalBadgeProps) => {
const variantClasses = {
primary: 'bg-[var(--ui-color-intent-primary)] text-white',
@@ -76,7 +78,7 @@ export const Badge = ({
) : children;
return (
<Box as="span" className={classes} style={style}>
<Box data-testid={dataTestId} as="span" className={classes} style={style}>
{content}
</Box>
);

7
apps/website/ui/Box.tsx
View File

@@ -237,6 +237,7 @@ export interface BoxProps<T extends ElementType> {
className?: string;
/** @deprecated DO NOT USE. Use semantic props instead. */
style?: React.CSSProperties;
'data-testid'?: string;
}
export const Box = forwardRef(<T extends ElementType = 'div'>(
@@ -394,7 +395,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
onPointerDown,
onPointerMove,
onPointerUp,
...props
'data-testid': dataTestId,
...props
}: BoxProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
@@ -599,7 +601,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
onPointerDown={onPointerDown}
onPointerMove={onPointerMove}
onPointerUp={onPointerUp}
{...props}
data-testid={dataTestId}
{...props}
>
{children}
</Tag>

2
apps/website/ui/Card.tsx
View File

@@ -10,6 +10,7 @@ export interface CardProps {
padding?: 'none' | 'sm' | 'md' | 'lg' | number;
onClick?: () => void;
fullHeight?: boolean;
'data-testid'?: string;
/** @deprecated Use semantic props instead. */
className?: string;
/** @deprecated Use semantic props instead. */
@@ -158,6 +159,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
className={classes}
onClick={onClick}
style={Object.keys(style).length > 0 ? style : undefined}
data-testid={props['data-testid'] as string}
{...props}
>
{title && (

5
apps/website/ui/Container.tsx
View File

@@ -9,6 +9,7 @@ export interface ContainerProps {
zIndex?: number;
/** @deprecated Use semantic props instead. */
py?: number;
'data-testid'?: string;
}
/**
@@ -23,6 +24,7 @@ export const Container = ({
position,
zIndex,
py,
'data-testid': dataTestId,
}: ContainerProps) => {
const sizeMap = {
sm: 'max-w-[40rem]',
@@ -54,7 +56,8 @@ export const Container = ({
};
return (
<div
<div
data-testid={dataTestId}
className={`mx-auto w-full ${sizeMap[size]} ${paddingMap[padding]} ${spacingMap[spacing]}`}
style={combinedStyle}
>

8
apps/website/ui/DriverIdentity.tsx
View File

@@ -15,14 +15,16 @@ export interface DriverIdentityProps {
contextLabel?: React.ReactNode;
meta?: React.ReactNode;
size?: 'sm' | 'md';
'data-testid'?: string;
}
export function DriverIdentity({ driver, href, contextLabel, meta, size = 'md' }: DriverIdentityProps) {
export function DriverIdentity({ driver, href, contextLabel, meta, size = 'md', 'data-testid': dataTestId }: DriverIdentityProps) {
const nameSize = size === 'sm' ? 'sm' : 'base';
const content = (
<Box display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">
<Box data-testid={dataTestId} display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">
<Avatar
data-testid="driver-avatar"
src={driver.avatarUrl || undefined}
alt={driver.name}
size={size === 'sm' ? 'sm' : 'md'}
@@ -30,7 +32,7 @@ export function DriverIdentity({ driver, href, contextLabel, meta, size = 'md' }
<Box flex={1} minWidth="0">
<Box display="flex" alignItems="center" gap={2} minWidth="0">
<Text size={nameSize as any} weight="medium" variant="high" truncate>
<Text data-testid="driver-name" size={nameSize as any} weight="medium" variant="high" truncate>
{driver.name}
</Text>
{contextLabel && (

4
apps/website/ui/EmptyState.tsx
View File

@@ -77,10 +77,10 @@ export function EmptyState({
) : null}
</Box>
<Heading level={3} weight="semibold">{title}</Heading>
<Heading data-testid="empty-state-title" level={3} weight="semibold">{title}</Heading>
{description && (
<Text variant="low" leading="relaxed">
<Text data-testid="empty-state-description" variant="low" leading="relaxed">
{description}
</Text>
)}

4
apps/website/ui/Heading.tsx
View File

@@ -36,6 +36,7 @@ export interface HeadingProps {
lineHeight?: string | number;
/** @deprecated Use semantic props instead. */
transition?: boolean;
'data-testid'?: string;
}
/**
@@ -65,6 +66,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
groupHoverColor,
lineHeight,
transition,
'data-testid': dataTestId,
}, ref) => {
const Tag = `h${level}` as const;
@@ -128,7 +130,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
};
return (
<Tag ref={ref} className={classes} style={Object.keys(combinedStyle).length > 0 ? combinedStyle : undefined} id={id}>
<Tag data-testid={dataTestId} ref={ref} className={classes} style={Object.keys(combinedStyle).length > 0 ? combinedStyle : undefined} id={id}>
<div className="flex items-center gap-2">
{icon}
{children}

7
apps/website/ui/Input.tsx
View File

@@ -57,9 +57,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
</Box>
)}
<Box
display="flex"
alignItems="center"
<Box
data-testid={testId ? `${testId}-container` : undefined}
display="flex"
alignItems="center"
gap={3}
paddingX={3}
height="9" // h-9

2
apps/website/ui/PageHeader.tsx
View File

@@ -40,7 +40,7 @@ export function PageHeader({
) : (
<Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
)}
<Heading level={1} weight="bold" uppercase letterSpacing="tight">{title}</Heading>
<Heading data-testid="page-header-title" level={1} weight="bold" uppercase letterSpacing="tight">{title}</Heading>
</Stack>
{description && (
<Text variant="low" size="lg" uppercase mono letterSpacing="widest">

12
apps/website/ui/ProfileCard.tsx
View File

@@ -8,15 +8,17 @@ export interface ProfileCardProps {
actions?: ReactNode;
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'precision';
onClick?: () => void;
'data-testid'?: string;
}
export const ProfileCard = ({ identity, stats, actions, variant = 'default', onClick }: ProfileCardProps) => {
export const ProfileCard = ({ identity, stats, actions, variant = 'default', onClick, 'data-testid': dataTestId }: ProfileCardProps) => {
return (
<Card
variant={variant}
padding="md"
onClick={onClick}
<Card
variant={variant}
padding="md"
onClick={onClick}
fullHeight
data-testid={dataTestId as string}
>
<Box display="flex" justifyContent="between" alignItems="start" gap={4}>
<Box flex={1} minWidth="0">

11
apps/website/ui/SegmentedControl.tsx
View File

@@ -12,13 +12,15 @@ export interface SegmentedControlProps {
activeId: string;
onChange: (id: string) => void;
fullWidth?: boolean;
'data-testid'?: string;
}
export const SegmentedControl = ({
options,
activeId,
export const SegmentedControl = ({
options,
activeId,
onChange,
fullWidth = false
fullWidth = false,
'data-testid': dataTestId
}: SegmentedControlProps) => {
return (
<Surface
@@ -32,6 +34,7 @@ export const SegmentedControl = ({
const isSelected = option.id === activeId;
return (
<button
data-testid={dataTestId ? `${dataTestId}-${option.id}` : undefined}
key={option.id}
onClick={() => onChange(option.id)}
className={`flex-1 flex items-center justify-center gap-2 px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all rounded-md ${

4
apps/website/ui/StatBox.tsx
View File

@@ -26,10 +26,10 @@ export const StatBox = ({
<Icon icon={icon} size={5} intent={color ? undefined : intent} />
</Box>
<Box>
<Text size="xs" weight="bold" variant="low" uppercase>
<Text data-testid={`stat-label-${label.toLowerCase().replace(/\s+/g, '-')}`} size="xs" weight="bold" variant="low" uppercase>
{label}
</Text>
<Text size="xl" weight="bold" variant="high" block marginTop={0.5}>
<Text data-testid={`stat-value-${label.toLowerCase().replace(/\s+/g, '-')}`} size="xl" weight="bold" variant="high" block marginTop={0.5}>
{value}
</Text>
</Box>

4
apps/website/ui/StatCard.tsx
View File

@@ -50,10 +50,10 @@ export const StatCard = ({
<Card variant={finalVariant} {...props}>
<Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
<Box>
<Text size="xs" weight="bold" variant="low" uppercase>
<Text data-testid={`stat-label-${label.toLowerCase().replace(/\s+/g, '-')}`} size="xs" weight="bold" variant="low" uppercase>
{label}
</Text>
<Text size="2xl" weight="bold" variant={finalIntent as any || 'high'} font={font} block marginTop={1}>
<Text data-testid={`stat-value-${label.toLowerCase().replace(/\s+/g, '-')}`} size="2xl" weight="bold" variant={finalIntent as any || 'high'} font={font} block marginTop={1}>
{prefix}{value}{suffix}
</Text>
</Box>

4
apps/website/ui/Text.tsx
View File

@@ -100,6 +100,7 @@ export interface TextProps {
hoverVariant?: string;
/** @deprecated Use semantic props instead. */
cursor?: string;
'data-testid'?: string;
}
/**
@@ -163,6 +164,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
capitalize,
hoverVariant,
cursor,
'data-testid': dataTestId,
}, ref) => {
const variantClasses = {
high: 'text-[var(--ui-color-text-high)]',
@@ -309,7 +311,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
const Tag = as || 'p';
return (
<Tag ref={ref} className={classes} style={Object.keys(style).length > 0 ? style : undefined} id={id} htmlFor={htmlFor}>
<Tag data-testid={dataTestId} ref={ref} className={classes} style={Object.keys(style).length > 0 ? style : undefined} id={id} htmlFor={htmlFor}>
{children}
</Tag>
);