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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 12:35:16 +01:00
parent a8731e6937
commit 15290400b3
122 changed files with 902 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/app/admin/page.tsx
View File

@@ -28,5 +28,5 @@ export default async function AdminPage() {
const output = result.unwrap();
// Pass to client wrapper for UI interactions
return <AdminDashboardWrapper initialViewData={output} />;
return <AdminDashboardWrapper viewData={output} />;
}

2
apps/website/app/admin/users/page.tsx
View File

@@ -30,5 +30,5 @@ export default async function AdminUsersPage() {
const output = result.unwrap();
// Pass to client wrapper for UI interactions
return <AdminUsersWrapper initialViewData={output} />;
return <AdminUsersWrapper viewData={output} />;
}

4
apps/website/app/leagues/[id]/stewarding/page.tsx
View File

@@ -25,7 +25,7 @@ export default async function LeagueStewardingPage({ params }: Props) {
leagueId={leagueId}
currentDriverId=""
onRefetch={() => {}}
data={{
viewData={{
leagueId,
totalPending: 0,
totalResolved: 0,
@@ -39,7 +39,7 @@ export default async function LeagueStewardingPage({ params }: Props) {
const data = result.unwrap();
return <StewardingPageClient
data={data}
viewData={data}
leagueId={leagueId}
currentDriverId="" // Should be fetched or passed
onRefetch={() => {}} // Should be handled

2
apps/website/app/leagues/[id]/stewarding/protests/[protestId]/page.tsx
View File

@@ -21,5 +21,5 @@ export default async function Page({ params }: Props) {
const viewData = result.isOk() ? result.unwrap() : null;
return <ProtestDetailPageClient initialViewData={viewData} />;
return <ProtestDetailPageClient viewData={viewData as any} />;
}

8
apps/website/app/media/avatar/page.tsx
View File

@@ -13,8 +13,12 @@ export default async function AvatarsPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'Avatars',
description: 'Choose your driver avatar'
}}
/>
);
}

8
apps/website/app/media/leagues/page.tsx
View File

@@ -13,8 +13,12 @@ export default async function LeaguesMediaPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'League Media',
description: 'Manage league logos and covers'
}}
/>
);
}

8
apps/website/app/media/page.tsx
View File

@@ -23,8 +23,12 @@ export default async function MediaPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'Media Library',
description: 'Manage all your racing assets'
}}
/>
);
}

8
apps/website/app/media/sponsors/page.tsx
View File

@@ -13,8 +13,12 @@ export default async function SponsorsMediaPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'Sponsor Media',
description: 'Manage sponsor logos'
}}
/>
);
}

8
apps/website/app/media/teams/page.tsx
View File

@@ -13,8 +13,12 @@ export default async function TeamsMediaPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'Team Media',
description: 'Manage team logos'
}}
/>
);
}

8
apps/website/app/media/tracks/page.tsx
View File

@@ -13,8 +13,12 @@ export default async function TracksMediaPage() {
return (
<MediaPageClient
initialAssets={assets}
categories={categories}
viewData={{
assets,
categories,
title: 'Track Media',
description: 'Manage track images'
}}
/>
);
}

4
apps/website/app/races/[id]/stewarding/page.tsx
View File

@@ -68,9 +68,9 @@ export default function RaceStewardingPage({ params }: RaceStewardingPageProps)
isLoading={isLoading}
error={error}
retry={fetchData}
Template={({ data }) => (
Template={({ viewData }) => (
<RaceStewardingTemplate
viewData={data as RaceStewardingViewData}
viewData={viewData}
isLoading={false}
error={null}
onBack={handleBack}

2
apps/website/app/races/all/page.tsx
View File

@@ -16,5 +16,5 @@ export default async function Page() {
const viewData = result.isOk() ? result.unwrap() : null;
return <RacesAllPageClient initialViewData={viewData} />;
return <RacesAllPageClient viewData={viewData as any} />;
}

2
apps/website/app/sponsor/signup/page.tsx
View File

@@ -259,7 +259,7 @@ export default function SponsorSignupPage() {
</SponsorHero>
{/* Platform Stats */}
<Box maxWidth="6xl" mx="auto" px={4} mt={-8} position="relative" zIndex={10}>
<Box maxWidth="6xl" mx="auto" px={4} style={{ marginTop: '-2rem' }} position="relative" zIndex={10}>
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={4}>
{PLATFORM_STATS.map((stat, index) => (
<motion.div

2
apps/website/app/teams/leaderboard/page.tsx
View File

@@ -11,5 +11,5 @@ export default async function TeamLeaderboardPage() {
}
const data = result.unwrap();
return <TeamLeaderboardPageWrapper data={data.teams} />;
return <TeamLeaderboardPageWrapper viewData={data} />;
}

30
apps/website/build_output.txt Normal file
View File

@@ -0,0 +1,30 @@
> @gridpilot/website@0.1.0 build
> next build
▲ Next.js 15.5.9
- Environments: .env.local
Creating an optimized production build ...
✓ Compiled successfully in 3.7s
Skipping linting
Checking validity of types ...
Failed to compile.
./hooks/league/useCreateLeague.ts:7:17
Type error: Return type of exported function has or is using name 'CreateLeagueInput' from external module "/Users/marcmintel/Projects/gridpilot/apps/website/hooks/league/useCreateLeagueWithBlockers" but cannot be named.
  5 |  * This wrapper maintains backward compatibility while using the new blocker-aware hook
 6 |  */
> 7 | export function useCreateLeague() {
 | ^
 8 | return useCreateLeagueWithBlockers();
 9 | }
Next.js build worker exited with code: 1 and signal: null
npm error Lifecycle script `build` failed with error:
npm error code 1
npm error path /Users/marcmintel/Projects/gridpilot/apps/website
npm error workspace @gridpilot/website@0.1.0
npm error location /Users/marcmintel/Projects/gridpilot/apps/website
npm error command failed
npm error command sh -c next build

6
apps/website/client-wrapper/LeagueAdminSchedulePageClient.tsx
View File

@@ -175,7 +175,7 @@ export function LeagueAdminSchedulePageClient() {
<SharedStack gap={6}>
<SharedCard>
<SharedBox p={6} textAlign="center">
<Heading level={3}>Admin Access Required</Heading>
<SharedHeading level={3}>Admin Access Required</SharedHeading>
<SharedBox mt={2}>
<SharedText size="sm" color="text-gray-400">Only league admins can manage the schedule.</SharedText>
</SharedBox>
@@ -190,10 +190,10 @@ export function LeagueAdminSchedulePageClient() {
data={templateData}
isLoading={isLoading}
error={null}
Template={({ data }) => (
Template={({ viewData }) => (
<>
<LeagueAdminScheduleTemplate
viewData={data}
viewData={viewData}
onSeasonChange={handleSeasonChange}
onPublishToggle={handlePublishToggle}
onAddOrSave={handleAddOrSave}

5
apps/website/client-wrapper/SponsorLeagueDetailPageClient.tsx
View File

@@ -1,11 +1,10 @@
'use client';
import React, { useState } from 'react';
import { SponsorLeagueDetailTemplate } from '@/templates/SponsorLeagueDetailTemplate';
import { SponsorLeagueDetailTemplate, type SponsorLeagueDetailViewData } from '@/templates/SponsorLeagueDetailTemplate';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
import { ViewData } from '@/lib/contracts/view-data/ViewData';
export function SponsorLeagueDetailPageClient({ viewData }: ClientWrapperProps<ViewData>) {
export function SponsorLeagueDetailPageClient({ viewData }: ClientWrapperProps<SponsorLeagueDetailViewData>) {
const [activeTab, setActiveTab] = useState<'overview' | 'drivers' | 'races' | 'sponsor'>('overview');
const [selectedTier, setSelectedTier] = useState<'main' | 'secondary'>('main');

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

@@ -1,11 +1,13 @@
import { Flag, Star, Trophy, Users } from 'lucide-react';
import { Avatar } from '../../ui/Avatar';
import { Badge } from '../../ui/Badge';
import { Box } from '../../ui/Box';
import { Heading } from '../../ui/Heading';
import { Icon } from '../../ui/Icon';
import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '../../ui/ProfileHero';
import { BadgeGroup } from '../../ui/BadgeGroup';
import { QuickStatCard, QuickStatItem } from '../../ui/QuickStatCard';
import { Stack } from '../../ui/Stack';
import React from 'react';
interface DashboardHeroProps {
@@ -27,7 +29,7 @@ export function DashboardHero({
}: DashboardHeroProps) {
return (
<ProfileHero glowColor="aqua">
<div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
<Stack direction="row" align="center" gap={8} wrap>
{/* Avatar Section */}
<ProfileAvatar
badge={<Icon icon={Star} size={5} intent="high" />}
@@ -40,7 +42,7 @@ export function DashboardHero({
</ProfileAvatar>
{/* Info Section */}
<div style={{ flex: 1, minWidth: '200px' }}>
<Box flex={1} minWidth="200px">
<Heading level={1}>{driverName}</Heading>
<ProfileStatsGroup>
@@ -60,14 +62,14 @@ export function DashboardHero({
Team Redline
</Badge>
</BadgeGroup>
</div>
</Box>
{/* Quick Stats */}
<QuickStatCard>
<QuickStatItem label="Podiums" value="12" />
<QuickStatItem label="Wins" value="4" />
</QuickStatCard>
</div>
</Stack>
</ProfileHero>
);
}

9
apps/website/components/dashboard/DashboardHeroWrapper.tsx
View File

@@ -5,6 +5,7 @@ import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { StatGrid } from '@/ui/StatGrid';
import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';
import React from 'react';
@@ -26,7 +27,7 @@ interface DashboardHeroProps {
export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<Stack gap={8}>
<UiDashboardHero
driverName={currentDriver.name}
avatarUrl={currentDriver.avatarUrl}
@@ -36,7 +37,7 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
winRate={Math.round((currentDriver.wins / currentDriver.totalRaces) * 100) || 0}
/>
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
<Stack direction="row" gap={4} wrap>
<Link href={routes.public.leagues}>
<Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
Browse Leagues
@@ -47,7 +48,7 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
View Profile
</Button>
</Link>
</div>
</Stack>
<StatGrid
variant="box"
@@ -59,6 +60,6 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
{ icon: Users, label: 'Active Leagues', value: activeLeaguesCount, intent: 'telemetry' },
]}
/>
</div>
</Stack>
);
}

2
apps/website/components/dev/DevToolbar.tsx
View File

@@ -4,7 +4,7 @@ import { useNotifications } from '@/components/notifications/NotificationProvide
import type { NotificationVariant } from '@/components/notifications/notificationTypes';
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
import { CircuitBreakerRegistry } from '@/lib/api/base/CircuitBreakerRegistry';
import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { Activity, AlertTriangle, ChevronDown, ChevronUp, MessageSquare, Wrench, X } from 'lucide-react';
import { useEffect, useState } from 'react';

3
apps/website/components/dev/sections/ReplaySection.tsx
View File

@@ -2,11 +2,12 @@
import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { IconButton } from '@/ui/IconButton';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box, Clock, Copy, Download, Play, Trash2 } from 'lucide-react';
import { Clock, Copy, Download, Play, Trash2 } from 'lucide-react';
import { useEffect, useState } from 'react';
interface ReplayEntry {

3
apps/website/components/drivers/ProfileRaceHistory.tsx
View File

@@ -11,8 +11,7 @@ import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ControlBar } from '@/ui/ControlBar';
import { Trophy } from 'lucide-react';
import { useEffect, useState } from 'react';
import React from 'react';
import React, { useEffect, useState } from 'react';
interface RaceHistoryProps {
driverId: string;

6
apps/website/components/drivers/RatingBadge.tsx
View File

@@ -3,10 +3,12 @@ import { Badge } from '@/ui/Badge';
interface RatingBadgeProps {
rating: number;
size?: 'sm' | 'md';
size?: 'sm' | 'md' | 'lg';
}
export function RatingBadge({ rating, size = 'md' }: RatingBadgeProps) {
const badgeSize = size === 'lg' ? 'md' : size;
const getVariant = (val: number): 'warning' | 'primary' | 'success' | 'default' => {
if (val >= 2500) return 'warning';
if (val >= 2000) return 'primary'; // Simplified
@@ -18,7 +20,7 @@ export function RatingBadge({ rating, size = 'md' }: RatingBadgeProps) {
return (
<Badge
variant={getVariant(rating)}
size={size}
size={badgeSize}
>
{rating.toLocaleString()}
</Badge>

2
apps/website/components/drivers/SafetyRatingBadge.tsx
View File

@@ -56,7 +56,7 @@ export function SafetyRatingBadge({ rating, size = 'md' }: SafetyRatingBadgeProp
border
bg={getBgColor(rating)}
borderColor={getBorderColor(rating)}
{...sizeProps[size]}
{...(sizeProps[size] as any)}
>
<Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
<Text

2
apps/website/components/errors/EnhancedErrorBoundary.tsx
View File

@@ -3,7 +3,7 @@
import React, { Component, ReactNode, ErrorInfo, useState, version } from 'react';
import { ApiError } from '@/lib/api/base/ApiError';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { DevErrorPanel } from './DevErrorPanel';
import { DevErrorPanel } from '@/ui/DevErrorPanel';
import { ErrorDisplay } from '@/ui/ErrorDisplay';
interface Props {

5
apps/website/components/feed/ActivityFeedList.tsx
View File

@@ -1,3 +1,4 @@
import { Stack } from '@/ui/Stack';
import React, { ReactNode } from 'react';
interface ActivityFeedListProps {
@@ -6,8 +7,8 @@ interface ActivityFeedListProps {
export function ActivityFeedList({ children }: ActivityFeedListProps) {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
{children}
</div>
</Stack>
);
}

5
apps/website/components/feed/FeedList.tsx
View File

@@ -1,5 +1,6 @@
import { FeedItemCard } from '@/components/feed/FeedItemCard';
import { FeedEmptyState } from '@/ui/FeedEmptyState';
import { Stack } from '@/ui/Stack';
import React from 'react';
interface FeedItemData {
@@ -23,10 +24,10 @@ export function FeedList({ items }: FeedListProps) {
}
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Stack gap={4}>
{items.map(item => (
<FeedItemCard key={item.id} item={item} />
))}
</div>
</Stack>
);
}

2
apps/website/components/layout/AuthedNav.tsx
View File

@@ -1,7 +1,7 @@
import { routes } from '@/lib/routing/RouteConfig';
import { Stack } from '@/ui/Stack';
import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
import { NavLink } from './NavLink';
import { NavLink } from '@/ui/NavLink';
interface AuthedNavProps {
pathname: string;

2
apps/website/components/layout/PublicNav.tsx
View File

@@ -1,7 +1,7 @@
import { routes } from '@/lib/routing/RouteConfig';
import { Stack } from '@/ui/Stack';
import { Calendar, Home, Layout, Trophy, Users } from 'lucide-react';
import { NavLink } from './NavLink';
import { NavLink } from '@/ui/NavLink';
interface PublicNavProps {
pathname: string;

6
apps/website/components/leaderboards/RankBadge.tsx
View File

@@ -5,10 +5,12 @@ import React from 'react';
interface RankBadgeProps {
rank: number;
size?: 'sm' | 'md';
size?: 'sm' | 'md' | 'lg';
}
export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
const badgeSize = size === 'lg' ? 'md' : size;
const getVariant = (rank: number): 'warning' | 'primary' | 'info' | 'default' => {
if (rank <= 3) return 'warning';
if (rank <= 10) return 'primary';
@@ -28,7 +30,7 @@ export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
const medal = getMedalEmoji(rank);
return (
<Badge variant={getVariant(rank)} size={size}>
<Badge variant={getVariant(rank)} size={badgeSize}>
<Group gap={1}>
{medal && <Text size="xs">{medal}</Text>}
<Text size="xs" weight="bold">#{rank}</Text>

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

@@ -1,6 +1,7 @@
import { DriverIdentity } from '@/ui/DriverIdentity';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
@@ -41,7 +42,7 @@ export function LeagueMemberRow({
return (
<TableRow variant={isTopPerformer ? 'highlight' : 'default'}>
<TableCell>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Box display="flex" alignItems="center" gap={2}>
{driver ? (
<DriverIdentity
driver={driver}
@@ -59,7 +60,7 @@ export function LeagueMemberRow({
{isTopPerformer && (
<Text size="xs">⭐</Text>
)}
</div>
</Box>
</TableCell>
<TableCell>
<Text variant="primary" weight="medium">

3
apps/website/components/leagues/LeagueMembers.tsx
View File

@@ -17,8 +17,7 @@ import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { ControlBar } from '@/ui/ControlBar';
import { useCallback, useEffect, useState } from 'react';
import React from 'react';
import React, { useCallback, useEffect, useState } from 'react';
interface LeagueMembersProps {
leagueId: string;

2
apps/website/components/leagues/LeagueSchedule.tsx
View File

@@ -7,7 +7,7 @@ import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueSchedu
import { useState } from 'react';
// Shared state components
import { StateContainer } from '@/ui/StateContainer';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';

3
apps/website/components/media/MediaGallery.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { Text } from '@/ui/Text';
import { useState } from 'react';
import { MediaCard } from '@/ui/MediaCard';
import { MediaFiltersBar } from './MediaFiltersBar';
import { Grid } from '@/ui/Grid';
@@ -10,7 +9,7 @@ import { MediaViewerModal } from './MediaViewerModal';
import { SectionHeader } from '@/ui/SectionHeader';
import { EmptyState } from '@/ui/EmptyState';
import { Search } from 'lucide-react';
import React from 'react';
import React, { useState } from 'react';
export interface MediaAsset {
id: string;

4
apps/website/components/mockups/DriverProfileMockup.tsx
View File

@@ -235,7 +235,7 @@ function AnimatedRating({ shouldReduceMotion, value }: { shouldReduceMotion: boo
return (
<Stack as={motion.span} weight="bold" color="text-primary-accent" font="mono" size={{ base: 'sm', sm: 'base' }}>
{shouldReduceMotion ? value : <Stack as={motion.span}>{rounded}</Stack>}
{shouldReduceMotion ? value : <motion.span>{rounded}</motion.span>}
</Stack>
);
}
@@ -265,7 +265,7 @@ function AnimatedCounter({
return (
<Stack weight="bold" color="text-white" font="mono" size={{ base: 'sm', sm: 'base', md: 'lg' }}>
{shouldReduceMotion ? value : <Stack as={motion.span}>{rounded}</Stack>}{suffix}
{shouldReduceMotion ? value : <motion.span>{rounded}</motion.span>}{suffix}
</Stack>
);
}

2
apps/website/components/mockups/StandingsTableMockup.tsx
View File

@@ -270,7 +270,7 @@ function AnimatedPoints({
weight="bold"
color="text-white"
>
{shouldReduceMotion ? points : <Stack as={motion.span}>{spring}</Stack>}
{shouldReduceMotion ? points : <motion.span>{spring}</motion.span>}
</Stack>
</Stack>
</Stack>

2
apps/website/components/profile/ProfileStatGrid.tsx
View File

@@ -6,6 +6,7 @@ interface Stat {
label: string;
value: string | number;
intent?: 'primary' | 'telemetry' | 'success' | 'critical';
color?: string;
}
interface ProfileStatGridProps {
@@ -17,6 +18,7 @@ export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
label: stat.label,
value: stat.value,
intent: stat.intent || 'primary',
color: stat.color,
icon: Bug // Default icon if none provided, but StatBox requires one
}));

5
apps/website/components/profile/UserPill.tsx
View File

@@ -190,7 +190,8 @@ export function UserPill() {
return (
<Box position="relative" display="inline-flex" alignItems="center" data-user-pill>
<button
<Box
as="button"
type="button"
onClick={() => setIsMenuOpen((open) => !open)}
style={{
@@ -237,7 +238,7 @@ export function UserPill() {
{/* Chevron */}
<Icon icon={ChevronDown} size={3.5} intent="low" />
</button>
</Box>
<UserDropdown isOpen={isMenuOpen}>
<UserDropdownHeader variant={isDemo ? 'demo' : 'default'}>

2
apps/website/components/races/LatestResultsSidebar.tsx
View File

@@ -35,7 +35,7 @@ export function LatestResultsSidebar({ results }: LatestResultsSidebarProps) {
<RaceSummaryItem
track={result.track}
meta={`${result.winnerName} • ${result.car}`}
date={scheduledAt}
dateLabel={scheduledAt.toLocaleDateString()}
/>
</Box>
);

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

@@ -24,22 +24,22 @@ interface RaceListItemProps {
export function RaceListItem({ race, onClick }: RaceListItemProps) {
const statusConfig = {
scheduled: {
icon: Clock,
iconName: 'Clock',
variant: 'primary' as const,
label: 'Scheduled',
},
running: {
icon: PlayCircle,
iconName: 'PlayCircle',
variant: 'success' as const,
label: 'LIVE',
},
completed: {
icon: CheckCircle2,
iconName: 'CheckCircle2',
variant: 'default' as const,
label: 'Completed',
},
cancelled: {
icon: XCircle,
iconName: 'XCircle',
variant: 'warning' as const,
label: 'Cancelled',
},
@@ -64,11 +64,13 @@ export function RaceListItem({ race, onClick }: RaceListItemProps) {
dayLabel={date.getDate().toString()}
timeLabel={formatTime(race.scheduledAt)}
status={race.status}
statusLabel={config.label}
statusVariant={config.variant}
statusIconName={config.iconName}
leagueName={race.leagueName}
leagueHref={race.leagueId ? routes.league.detail(race.leagueId) : undefined}
strengthOfField={race.strengthOfField}
onClick={() => onClick(race.id)}
statusConfig={config}
/>
);
}

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

@@ -1,5 +1,6 @@
import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { StatusDot } from '@/ui/StatusDot';
import { Text } from '@/ui/Text';
@@ -30,16 +31,16 @@ export function SessionSummaryPanel({
return (
<Panel title="Session Summary" className={className}>
<Box display="flex" flexDirection="col" gap={3}>
<Box display="flex" align="center" justify="between">
<Stack gap={3}>
<Stack direction="row" align="center" justify="between">
<Text weight="bold" size="lg">{title}</Text>
<Box display="flex" align="center" gap={2}>
<Stack direction="row" align="center" gap={2}>
<StatusDot color={statusColor} pulse={status === 'live'} size={2} />
<Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
{status}
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
{startTime && (
@@ -61,7 +62,7 @@ export function SessionSummaryPanel({
</Box>
)}
</Box>
</Box>
</Stack>
</Panel>
);
}

5
apps/website/components/races/TelemetryStrip.tsx
View File

@@ -1,4 +1,5 @@
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
interface TelemetryItem {
@@ -25,7 +26,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
>
{items.map((item, index) => (
<Box key={index} display="flex" align="center" gap={2} className="whitespace-nowrap">
<Stack key={index} direction="row" align="center" gap={2} className="whitespace-nowrap">
<Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
{item.label}
</Text>
@@ -42,7 +43,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
{item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
</Text>
)}
</Box>
</Stack>
))}
</Box>
);

5
apps/website/components/races/TrackConditionsPanel.tsx
View File

@@ -3,6 +3,7 @@
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Droplets, Sun, Thermometer, Wind, type LucideIcon } from 'lucide-react';
interface TrackConditionsPanelProps {
@@ -26,7 +27,7 @@ export function TrackConditionsPanel({
Track Conditions
</Text>
<Stack display="grid" gridCols={2} mdCols={4} gap={4}>
<Grid cols={2} mdCols={4} gap={4}>
<ConditionItem
icon={Thermometer}
label="Air Temp"
@@ -51,7 +52,7 @@ export function TrackConditionsPanel({
value={windSpeed}
color="text-gray-400"
/>
</Stack>
</Grid>
<Stack mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
<Icon icon={Sun} size={4} color="#FFBE4D" />

2
apps/website/components/races/UpcomingRacesSidebar.tsx
View File

@@ -42,7 +42,7 @@ export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
key={race.id}
track={race.track}
meta={race.car}
date={scheduledAt}
dateLabel={scheduledAt.toLocaleDateString()}
/>
);
})}

18
apps/website/components/shared/RangeField.tsx
View File

@@ -130,7 +130,8 @@ export function RangeField({
<Group justify="between" gap={3}>
<Text as="label" size="xs" weight="medium" variant="low">{label}</Text>
<Box display="flex" alignItems="center" gap={2} flex={1} maxWidth="200px">
<div
<Box
as="div"
ref={sliderRef}
style={{
position: 'relative',
@@ -173,7 +174,7 @@ export function RangeField({
boxShadow: isDragging ? '0 0 12px rgba(25, 140, 255, 0.5)' : undefined
}}
/>
</div>
</Box>
<Box flexShrink={0}>
<Group gap={1}>
<Text size="sm" weight="semibold" variant="high" textAlign="right" width="2rem">{clampedValue}</Text>
@@ -202,7 +203,8 @@ export function RangeField({
)}
{/* Custom slider */}
<div
<Box
as="div"
ref={sliderRef}
style={{
position: 'relative',
@@ -265,12 +267,13 @@ export function RangeField({
boxShadow: isDragging ? '0 0 16px rgba(25, 140, 255, 0.6)' : '0 2px 8px rgba(0,0,0,0.3)'
}}
/>
</div>
</Box>
{/* Value input and quick presets */}
<Group justify="between" align="center" gap={3}>
<Group gap={2}>
<input
<Box
as="input"
ref={inputRef}
type="number"
min={min}
@@ -301,7 +304,8 @@ export function RangeField({
{quickPresets.length > 0 && (
<Group gap={1}>
{quickPresets.slice(0, 3).map((preset) => (
<button
<Box
as="button"
key={preset}
type="button"
onClick={() => {
@@ -321,7 +325,7 @@ export function RangeField({
}}
>
{preset}
</button>
</Box>
))}
</Group>
)}

4
apps/website/components/shared/UIComponents.tsx
View File

@@ -18,6 +18,7 @@ import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { Badge } from '@/ui/Badge';
import { ProgressLine } from '@/ui/ProgressLine';
import { SharedEmptyState } from './SharedEmptyState';
export {
Pagination as SharedPagination,
@@ -38,5 +39,6 @@ export {
Skeleton as SharedSkeleton,
LoadingSpinner as SharedLoadingSpinner,
Badge as SharedBadge,
ProgressLine as SharedProgressLine
ProgressLine as SharedProgressLine,
SharedEmptyState
};

3
apps/website/components/sponsors/TransactionTable.tsx
View File

@@ -84,8 +84,7 @@ export function TransactionTable({ transactions, onDownload }: TransactionTableP
return (
<Grid
key={tx.id}
cols={1}
mdCols={12}
cols={{ base: 1, md: 12 }}
gap={4}
p={4}
alignItems="center"

5
apps/website/components/teams/CreateTeamForm.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useCreateTeam } from "@/hooks/team/useCreateTeam";
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { InfoBanner } from '@/ui/InfoBanner';
import { Input } from '@/ui/Input';
@@ -79,7 +80,7 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
};
return (
<form onSubmit={handleSubmit}>
<Box as="form" onSubmit={handleSubmit}>
<Group direction="col" align="stretch" gap={6}>
<Input
label="Team Name *"
@@ -142,6 +143,6 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
)}
</Group>
</Group>
</form>
</Box>
);
}

3
apps/website/components/teams/TeamAdmin.tsx
View File

@@ -19,8 +19,7 @@ import { SectionHeader } from '@/ui/SectionHeader';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { useState } from 'react';
import React from 'react';
import React, { useState } from 'react';
interface TeamAdminProps {
team: {

8
apps/website/hooks/auth/useForgotPassword.ts
View File

@@ -10,7 +10,13 @@ export function useForgotPassword(
const authService = useInject(AUTH_SERVICE_TOKEN);
return useMutation<{ message: string; magicLink?: string }, ApiError, ForgotPasswordDTO>({
mutationFn: (params) => authService.forgotPassword(params),
mutationFn: async (params) => {
const result = await authService.forgotPassword(params);
if (result.isErr()) {
throw result.getError();
}
return result.unwrap();
},
...options,
});
}

8
apps/website/hooks/auth/useLogin.ts
View File

@@ -11,7 +11,13 @@ export function useLogin(
const authService = useInject(AUTH_SERVICE_TOKEN);
return useMutation<SessionViewModel, ApiError, LoginParamsDTO>({
mutationFn: (params) => authService.login(params),
mutationFn: async (params) => {
const result = await authService.login(params);
if (result.isErr()) {
throw result.getError();
}
return result.unwrap();
},
...options,
});
}

8
apps/website/hooks/auth/useResetPassword.ts
View File

@@ -10,7 +10,13 @@ export function useResetPassword(
const authService = useInject(AUTH_SERVICE_TOKEN);
return useMutation<{ message: string }, ApiError, ResetPasswordDTO>({
mutationFn: (params) => authService.resetPassword(params),
mutationFn: async (params) => {
const result = await authService.resetPassword(params);
if (result.isErr()) {
throw result.getError();
}
return result.unwrap();
},
...options,
});
}

8
apps/website/hooks/auth/useSignup.ts
View File

@@ -11,7 +11,13 @@ export function useSignup(
const authService = useInject(AUTH_SERVICE_TOKEN);
return useMutation<SessionViewModel, ApiError, SignupParamsDTO>({
mutationFn: (params) => authService.signup(params),
mutationFn: async (params) => {
const result = await authService.signup(params);
if (result.isErr()) {
throw result.getError();
}
return result.unwrap();
},
...options,
});
}

10
apps/website/hooks/driver/useDriverProfilePageData.ts
View File

@@ -17,7 +17,10 @@ export function useDriverProfilePageData(driverId: string) {
queryFn: async () => {
if (!driverId) return [];
const allTeams = await teamService.getAllTeams();
const allTeamsResult = await teamService.getAllTeams();
if (allTeamsResult.isErr()) return [];
const allTeams = allTeamsResult.unwrap();
let teamMemberships: Array<{
team: { id: string; name: string };
role: string;
@@ -25,7 +28,10 @@ export function useDriverProfilePageData(driverId: string) {
}> = [];
for (const team of allTeams) {
const teamMembers = await teamService.getTeamMembers(team.id, driverId, '');
const teamMembersResult = await teamService.getTeamMembers(team.id, driverId, '');
if (teamMembersResult.isErr()) continue;
const teamMembers = teamMembersResult.unwrap();
const membership = teamMembers?.find(member => member.driverId === driverId);
if (membership) {
teamMemberships.push({

4
apps/website/hooks/league/useCreateLeagueWithBlockers.ts
View File

@@ -5,14 +5,14 @@ import { ApiError } from '@/lib/api/base/ApiError';
import { CreateLeagueInputDTO } from '@/lib/types/generated/CreateLeagueInputDTO';
import { CreateLeagueOutputDTO } from '@/lib/types/generated/CreateLeagueOutputDTO';
interface CreateLeagueInput {
export interface CreateLeagueInput {
name: string;
description: string;
maxDrivers: number;
scoringPresetId: string;
}
interface CreateLeagueResult {
export interface CreateLeagueResult {
success: boolean;
leagueId: string;
error?: string;

13
apps/website/hooks/league/useLeagueDetail.ts
View File

@@ -22,9 +22,13 @@ export function useLeagueDetail({ leagueId, queryOptions }: UseLeagueDetailOptio
return useQuery<LeagueWithCapacityAndScoringDTO, ApiError>({
queryKey: ['league-detail', leagueId],
queryFn: async () => {
const result = await leagueService.getAllLeagues() as AllLeaguesWithCapacityAndScoringDTO;
const result = await leagueService.getAllLeagues();
if (result.isErr()) {
throw result.getError();
}
const data = result.unwrap();
// Filter for the specific league
const leagues = Array.isArray(result?.leagues) ? result.leagues : [];
const leagues = Array.isArray(data?.leagues) ? data.leagues : [];
const league = leagues.find(l => l.id === leagueId);
if (!league) {
throw new ApiError('League not found', 'NOT_FOUND', {
@@ -46,8 +50,11 @@ export function useLeagueMemberships({ leagueId, queryOptions }: UseLeagueMember
queryKey: ['league-memberships', leagueId],
queryFn: async () => {
const result = await leagueService.getLeagueMemberships(leagueId);
if (result.isErr()) {
throw result.getError();
}
// The DTO already has the correct structure with members property
return result;
return result.unwrap();
},
...queryOptions,
});

2
apps/website/hooks/league/useLeagueSponsorshipsPageData.ts
View File

@@ -9,7 +9,7 @@ export function useLeagueSponsorshipsPageData(leagueId: string, currentDriverId:
return usePageDataMultiple({
league: {
queryKey: ['leagueDetail', leagueId, currentDriverId],
queryFn: () => leagueService.getLeagueDetail(leagueId),
queryFn: () => leagueService.getLeagueDetailData(leagueId),
},
membership: {
queryKey: ['leagueMembership', leagueId, currentDriverId],

21
apps/website/hooks/league/useLeagueWalletPageData.ts
View File

@@ -17,25 +17,24 @@ export function useLeagueWalletPageData(leagueId: string) {
// Transform DTO to ViewModel at client boundary
const transactions = dto.transactions.map(t => new WalletTransactionViewModel({
id: t.id,
type: t.type,
type: t.type as any,
description: t.description,
amount: t.amount,
fee: t.fee,
netAmount: t.netAmount,
date: new globalThis.Date(t.date),
fee: 0,
netAmount: t.amount,
date: new globalThis.Date(t.createdAt),
status: t.status,
reference: t.reference,
}));
return new LeagueWalletViewModel({
balance: dto.balance,
currency: dto.currency,
totalRevenue: dto.totalRevenue,
totalFees: dto.totalFees,
totalWithdrawals: dto.totalWithdrawals,
pendingPayouts: dto.pendingPayouts,
totalRevenue: dto.balance, // Fallback
totalFees: 0,
totalWithdrawals: 0,
pendingPayouts: 0,
transactions,
canWithdraw: dto.canWithdraw,
withdrawalBlockReason: dto.withdrawalBlockReason,
canWithdraw: true,
withdrawalBlockReason: undefined,
});
},
enabled: !!leagueId,

18
apps/website/lib/display-objects/MedalDisplay.ts
View File

@@ -11,4 +11,22 @@ export class MedalDisplay {
static getMedalIcon(position: number): string | null {
return position <= 3 ? '🏆' : null;
}
static getBg(position: number): string {
switch (position) {
case 1: return 'bg-warning-amber';
case 2: return 'bg-gray-300';
case 3: return 'bg-orange-700';
default: return 'bg-gray-800';
}
}
static getColor(position: number): string {
switch (position) {
case 1: return 'text-warning-amber';
case 2: return 'text-gray-300';
case 3: return 'text-orange-700';
default: return 'text-gray-400';
}
}
}

18
apps/website/lib/services/sponsors/SponsorService.ts
View File

@@ -52,4 +52,22 @@ export class SponsorService implements Service {
async getSponsorshipPricing(): Promise<any> {
return this.apiClient.getPricing();
}
async getAvailableLeagues(): Promise<Result<any[], DomainError>> {
try {
const data = await this.apiClient.getAvailableLeagues();
return Result.ok(data);
} catch (error) {
return Result.err({ type: 'serverError', message: error instanceof Error ? error.message : 'Unknown error' });
}
}
async getLeagueDetail(leagueId: string): Promise<Result<any, DomainError>> {
try {
const data = await this.apiClient.getLeagueDetail(leagueId);
return Result.ok(data);
} catch (error) {
return Result.err({ type: 'serverError', message: error instanceof Error ? error.message : 'Unknown error' });
}
}
}

4
apps/website/lib/view-models/WalletTransactionViewModel.ts
View File

@@ -1,7 +1,7 @@
// Export the DTO type that WalletTransactionViewModel expects
export type FullTransactionDto = {
id: string;
type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize' | 'deposit';
description: string;
amount: number;
fee: number;
@@ -13,7 +13,7 @@ export type FullTransactionDto = {
export class WalletTransactionViewModel {
id: string;
type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize' | 'deposit';
description: string;
amount: number;
fee: number;

1
apps/website/next.config.mjs
View File

@@ -7,6 +7,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
const nextConfig = {
reactStrictMode: true,
output: 'standalone',
// Fix for monorepos: point tracing to repo root (portable across machines/containers)
outputFileTracingRoot: path.join(__dirname, '../..'),
images: {

8
apps/website/templates/LeagueDetailTemplate.tsx
View File

@@ -8,12 +8,13 @@ import {
SharedLink,
SharedText,
SharedStack,
SharedContainer
SharedContainer,
SharedIcon
} from '@/components/shared/UIComponents';
import { ChevronRight } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
export function LeagueDetailTemplate({ viewData }: TemplateProps<LeagueDetailViewData>) {
export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
return (
<SharedContainer size="lg">
<SharedBox paddingY={8}>
@@ -27,11 +28,10 @@ export function LeagueDetailTemplate({ viewData }: TemplateProps<LeagueDetailVie
<SharedText size="sm" color="text-white">{viewData.name}</SharedText>
</SharedStack>
</SharedBox>
{children}
{/* ... rest of the template ... */}
</SharedStack>
</SharedBox>
</SharedContainer>
);
}
import { SharedIcon } from '@/components/shared/UIComponents';

2
apps/website/templates/TeamDetailTemplate.tsx
View File

@@ -50,7 +50,7 @@ export function TeamDetailTemplate({
return (
<Box bg="base-black" minH="screen" display="flex" center>
<Stack align="center" gap={4}>
<Box w="12" h="12" border={4} borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" />
<Box w="12" h="12" border borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" />
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">Synchronizing Telemetry...</Text>
</Stack>
</Box>

2
apps/website/templates/TeamsTemplate.tsx
View File

@@ -5,7 +5,7 @@ import { TeamGrid } from '@/components/teams/TeamGrid';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
import { TeamsDirectory, TeamsDirectorySection } from '@/components/teams/TeamsDirectory';
import { SharedEmptyState } from '@/components/shared/SharedEmptyState';
import { SharedEmptyState } from '@/components/shared/UIComponents';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { Users } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

2
apps/website/templates/layout/GlobalSidebarTemplate.tsx
View File

@@ -4,7 +4,7 @@ import { AuthedNav } from '@/components/layout/AuthedNav';
import { PublicNav } from '@/components/layout/PublicNav';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { Box } from '@/ui/Box';
import { DashboardRail } from '@/ui/DashboardRail';
import { DashboardRail } from '@/components/dashboard/DashboardRail';
import { Text } from '@/ui/Text';
import { usePathname } from 'next/navigation';

2
apps/website/templates/layout/HeaderContentTemplate.tsx
View File

@@ -1,4 +1,4 @@
import { BrandMark } from '@/components/layout/BrandMark';
import { BrandMark } from '@/ui/BrandMark';
import { HeaderActions } from '@/components/layout/HeaderActions';
import { PublicNav } from '@/components/layout/PublicNav';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';

6
apps/website/tsconfig.json
View File

@@ -70,13 +70,17 @@
"include": [
"app/",
"components/",
"ui/",
"templates/",
"hooks/",
"client-wrapper/",
"lib/",
"next-env.d.ts",
"env.d.ts",
"types/",
"utilities/",
".next/types/**/*.ts"
, "hooks/sponsor/useSponsorMode.ts" ],
],
"exclude": [
"**/*.test.ts",
"**/*.test.tsx",

22
apps/website/ui/Accordion.tsx
View File

@@ -9,19 +9,35 @@ export interface AccordionProps {
title: string;
children: ReactNode;
defaultOpen?: boolean;
isOpen?: boolean;
onToggle?: () => void;
}
export const Accordion = ({
title,
children,
defaultOpen = false
defaultOpen = false,
isOpen: controlledIsOpen,
onToggle
}: AccordionProps) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen);
const isControlled = controlledIsOpen !== undefined;
const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
const handleToggle = () => {
if (onToggle) {
onToggle();
}
if (!isControlled) {
setInternalIsOpen(!internalIsOpen);
}
};
return (
<Surface variant="muted" rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
<button
onClick={() => setIsOpen(!isOpen)}
onClick={handleToggle}
className="w-full flex items-center justify-between px-4 py-3 hover:bg-white/5 transition-colors"
>
<Text weight="bold" size="sm" variant="high">

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

@@ -6,37 +6,43 @@ import { Surface } from './Surface';
export interface AvatarProps {
src?: string;
alt?: string;
size?: 'sm' | 'md' | 'lg' | 'xl';
size?: 'sm' | 'md' | 'lg' | 'xl' | number;
fallback?: string;
className?: string;
}
export const Avatar = ({
src,
alt,
size = 'md',
fallback
fallback,
className
}: AvatarProps) => {
const sizeMap = {
const sizeMap: Record<string, string> = {
sm: '2rem',
md: '3rem',
lg: '4rem',
xl: '6rem'
};
const iconSizeMap = {
const iconSizeMap: Record<string, number> = {
sm: 3,
md: 5,
lg: 8,
xl: 12
} as const;
};
const finalSize = typeof size === 'number' ? `${size / 4}rem` : sizeMap[size];
const finalIconSize = typeof size === 'number' ? Math.round(size / 8) : iconSizeMap[size];
return (
<Surface
variant="muted"
rounded="full"
className={className}
style={{
width: sizeMap[size],
height: sizeMap[size],
width: finalSize,
height: finalSize,
overflow: 'hidden',
border: '2px solid var(--ui-color-border-default)'
}}
@@ -52,7 +58,7 @@ export const Avatar = ({
{fallback ? (
<span className="text-sm font-bold text-[var(--ui-color-text-med)]">{fallback}</span>
) : (
<Icon icon={User} size={iconSizeMap[size]} intent="low" />
<Icon icon={User} size={finalIconSize as any} intent="low" />
)}
</Box>
)}

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

@@ -7,17 +7,25 @@ import { Stack } from './Stack';
export interface BadgeProps {
children: ReactNode;
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical' | 'info' | 'outline' | 'default' | 'danger';
size?: 'sm' | 'md';
size?: 'xs' | 'sm' | 'md';
style?: React.CSSProperties;
icon?: LucideIcon;
rounded?: string;
bg?: string;
color?: string;
borderColor?: string;
}
export const Badge = ({
children,
variant = 'primary',
size = 'md',
style,
icon
style: styleProp,
icon,
rounded,
bg,
color,
borderColor
}: BadgeProps) => {
const variantClasses = {
primary: 'bg-[var(--ui-color-intent-primary)] text-white',
@@ -32,16 +40,25 @@ export const Badge = ({
};
const sizeClasses = {
xs: 'px-1 py-0 text-[9px]',
sm: 'px-1.5 py-0.5 text-[10px]',
md: 'px-2 py-0.5 text-xs',
};
const classes = [
'inline-flex items-center justify-center font-bold uppercase tracking-wider rounded-none',
'inline-flex items-center justify-center font-bold uppercase tracking-wider',
variantClasses[variant],
sizeClasses[size],
rounded ? (rounded === 'full' ? 'rounded-full' : `rounded-${rounded}`) : 'rounded-none',
].join(' ');
const style: React.CSSProperties = {
...styleProp,
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
};
const content = icon ? (
<Stack direction="row" align="center" gap={1}>
<Icon icon={icon} size={3} />

22
apps/website/ui/BorderTabs.tsx
View File

@@ -1,21 +1,32 @@
import { Box } from './Box';
export interface TabOption {
id: string;
label: string;
icon?: React.ReactNode;
count?: number;
}
export interface BorderTabsProps {
tabs: TabOption[];
activeTabId: string;
activeTabId?: string;
onTabChange: (id: string) => void;
activeTab?: string;
}
export const BorderTabs = ({
tabs,
activeTabId,
onTabChange
onTabChange,
activeTab
}: BorderTabsProps) => {
const finalActiveTabId = activeTabId || activeTab || '';
return (
<Box display="flex" borderBottom>
{tabs.map((tab) => {
const isActive = tab.id === activeTabId;
const isActive = tab.id === finalActiveTabId;
return (
<button
key={tab.id}
@@ -29,6 +40,11 @@ export const BorderTabs = ({
<Box display="flex" alignItems="center" gap={2}>
{tab.icon}
{tab.label}
{tab.count !== undefined && (
<Box as="span" px={1.5} py={0.5} rounded="full" bg="white/10" fontSize="10px">
{tab.count}
</Box>
)}
</Box>
{isActive && (
<Box

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

@@ -52,12 +52,12 @@ export interface BoxProps<T extends ElementType> {
// Aliases (Deprecated - use full names)
m?: Spacing | ResponsiveSpacing;
mt?: Spacing | ResponsiveSpacing;
mb?: Spacing | ResponsiveSpacing;
mt?: Spacing | 'auto' | ResponsiveSpacing;
mb?: Spacing | 'auto' | ResponsiveSpacing;
ml?: Spacing | 'auto' | ResponsiveSpacing;
mr?: Spacing | 'auto' | ResponsiveSpacing;
mx?: Spacing | 'auto' | ResponsiveSpacing;
my?: Spacing | ResponsiveSpacing;
my?: Spacing | 'auto' | ResponsiveSpacing;
p?: Spacing | ResponsiveSpacing;
pt?: Spacing | ResponsiveSpacing;
pb?: Spacing | ResponsiveSpacing;
@@ -216,6 +216,19 @@ export interface BoxProps<T extends ElementType> {
backgroundSize?: string;
backgroundPosition?: string;
backgroundImage?: string;
htmlFor?: string;
minH?: string | number | ResponsiveValue<string | number>;
borderOpacity?: number;
rows?: number;
backgroundColor?: string;
outline?: string;
focusBorderColor?: string;
href?: string;
name?: string;
borderTopColor?: string;
onPointerDown?: React.PointerEventHandler<any>;
onPointerMove?: React.PointerEventHandler<any>;
onPointerUp?: React.PointerEventHandler<any>;
}
export const Box = forwardRef(<T extends ElementType = 'div'>(
@@ -354,6 +367,19 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
backgroundSize,
backgroundPosition,
backgroundImage,
htmlFor,
minH,
borderOpacity,
rows,
backgroundColor,
outline,
focusBorderColor,
href,
name,
borderTopColor,
onPointerDown,
onPointerMove,
onPointerUp,
...props
}: BoxProps<T>,
ref: ForwardedRef<HTMLElement>
@@ -417,7 +443,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
getResponsiveClasses('max-w', maxWidth),
getResponsiveClasses('min-w', minWidth),
getResponsiveClasses('max-h', maxHeight),
getResponsiveClasses('min-h', minHeight),
getResponsiveClasses('min-h', minHeight || minH),
getResponsiveClasses('', display),
center ? 'flex items-center justify-center' : '',
overflow ? (overflow.includes(':') ? overflow : `overflow-${overflow}`) : '',
@@ -464,6 +490,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
...(typeof minWidth === 'string' ? { minWidth } : {}),
...(typeof maxHeight === 'string' ? { maxHeight } : {}),
...(typeof minHeight === 'string' ? { minHeight } : {}),
...(typeof minH === 'string' || typeof minH === 'number' ? { minHeight: minH } : {}),
...(aspectRatio ? { aspectRatio } : {}),
...(typeof top === 'string' || typeof top === 'number' ? { top } : {}),
...(typeof right === 'string' || typeof right === 'number' ? { right } : {}),
@@ -473,7 +500,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
...(typeof borderBottom === 'string' ? { borderBottom } : (borderBottom === true ? { borderBottom: '1px solid var(--ui-color-border-default)' } : {})),
...(typeof borderLeft === 'string' ? { borderLeft } : (borderLeft === true ? { borderLeft: '1px solid var(--ui-color-border-default)' } : {})),
...(typeof borderRight === 'string' ? { borderRight } : (borderRight === true ? { borderRight: '1px solid var(--ui-color-border-default)' } : {})),
...(bg ? { background: bg.startsWith('bg-') ? undefined : bg } : {}),
...(borderTopColor ? { borderTopColor: borderTopColor.startsWith('border-') ? undefined : borderTopColor } : {}),
...(borderOpacity !== undefined ? { borderOpacity } : {}),
...(bg || backgroundColor ? { background: (bg || backgroundColor)!.startsWith('bg-') ? undefined : (bg || backgroundColor) } : {}),
...(rounded === true ? { borderRadius: 'var(--ui-radius-md)' } : (typeof rounded === 'string' ? { borderRadius: rounded.includes('rem') || rounded.includes('px') ? rounded : `var(--ui-radius-${rounded})` } : {})),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
...(border === true ? { border: '1px solid var(--ui-color-border-default)' } : (typeof border === 'string' ? { border } : {})),
@@ -531,6 +560,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
muted={muted}
playsInline={playsInline}
viewBox={viewBox}
htmlFor={htmlFor}
rows={rows}
href={href}
name={name}
onPointerDown={onPointerDown}
onPointerMove={onPointerMove}
onPointerUp={onPointerUp}
{...props}
>
{children}

89
apps/website/ui/Button.tsx
View File

@@ -19,7 +19,32 @@ export interface ButtonProps {
rel?: string;
title?: string;
style?: React.CSSProperties;
rounded?: boolean;
rounded?: boolean | string;
className?: string;
bg?: string;
color?: string;
w?: string | number;
h?: string | number;
px?: number;
borderColor?: string;
mt?: number;
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
letterSpacing?: string;
hoverBorderColor?: string;
fontSize?: string;
p?: number;
minHeight?: string;
transition?: boolean;
ring?: string;
transform?: string;
hoverScale?: boolean;
overflow?: string;
borderWidth?: string;
aspectRatio?: string;
border?: boolean;
shadow?: string;
display?: string;
center?: boolean;
}
export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({
@@ -39,8 +64,34 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
title,
style: styleProp,
rounded = false,
className,
bg,
color,
w,
h,
px,
borderColor,
mt,
position,
letterSpacing,
hoverBorderColor,
fontSize,
p,
minHeight,
transition,
ring,
transform,
hoverScale,
overflow,
borderWidth,
aspectRatio,
border,
shadow,
display,
center,
}, ref) => {
const baseClasses = 'inline-flex items-center justify-center transition-all duration-150 ease-in-out focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
const transitionClasses = transition !== false ? 'transition-all duration-150 ease-in-out' : '';
const variantClasses = {
primary: 'bg-[var(--ui-color-intent-primary)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-primary)] shadow-[0_0_15px_rgba(25,140,255,0.3)] hover:shadow-[0_0_25px_rgba(25,140,255,0.5)]',
@@ -60,17 +111,45 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
const widthClasses = fullWidth ? 'w-full' : '';
const roundedClasses = rounded ? 'rounded-full' : 'rounded-none';
const roundedClasses = rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none');
const classes = [
baseClasses,
transitionClasses,
variantClasses[variant],
sizeClasses[size],
disabledClasses,
widthClasses,
roundedClasses,
ring,
hoverScale ? 'hover:scale-105' : '',
display === 'flex' ? 'flex' : '',
center ? 'items-center justify-center' : '',
className,
].filter(Boolean).join(' ');
const style: React.CSSProperties = {
...styleProp,
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
...(w ? { width: w } : {}),
...(h ? { height: h } : {}),
...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
...(mt ? { marginTop: `${mt * 0.25}rem` } : {}),
...(position ? { position } : {}),
...(letterSpacing ? { letterSpacing } : {}),
...(fontSize ? { fontSize } : {}),
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
...(minHeight ? { minHeight } : {}),
...(transform ? { transform } : {}),
...(overflow ? { overflow } : {}),
...(borderWidth ? { borderWidth } : {}),
...(aspectRatio ? { aspectRatio } : {}),
...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
};
const content = (
<Box display="flex" alignItems="center" gap={2}>
{isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
@@ -88,7 +167,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
rel={rel}
className={classes}
onClick={onClick as MouseEventHandler<HTMLAnchorElement>}
style={styleProp}
style={style}
title={title}
>
{content}
@@ -103,7 +182,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
className={classes}
onClick={onClick as MouseEventHandler<HTMLButtonElement>}
disabled={disabled || isLoading}
style={styleProp}
style={style}
title={title}
>
{content}

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

@@ -8,7 +8,9 @@ export interface CategoryIconProps {
}
export const CategoryIcon = ({
category}: CategoryIconProps) => {
category,
size = 24
}: CategoryIconProps) => {
// Map categories to icons if needed, for now just use Tag
return (
<Box

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

@@ -4,11 +4,17 @@ import { Box } from './Box';
export interface ContainerProps {
children: ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
py?: number;
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
zIndex?: number;
}
export const Container = ({
children,
size = 'lg'
size = 'lg',
py,
position,
zIndex
}: ContainerProps) => {
const sizeMap = {
sm: '40rem',
@@ -19,7 +25,7 @@ export const Container = ({
};
return (
<Box marginX="auto" maxWidth={sizeMap[size]} paddingX={4} fullWidth>
<Box marginX="auto" maxWidth={sizeMap[size]} paddingX={4} py={py as any} fullWidth position={position} zIndex={zIndex}>
{children}
</Box>
);

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

@@ -5,11 +5,13 @@ import { Container } from './Container';
export interface ContentViewportProps {
children: ReactNode;
padding?: 'none' | 'sm' | 'md' | 'lg';
fullWidth?: boolean;
}
export const ContentViewport = ({
children,
padding = 'md'
padding = 'md',
fullWidth = false
}: ContentViewportProps) => {
const paddingMap: Record<string, any> = {
none: 0,
@@ -20,7 +22,7 @@ export const ContentViewport = ({
return (
<Box as="main" flex={1} overflow="auto">
<Container size="xl">
<Container size={fullWidth ? 'full' : 'xl'}>
<Box paddingY={paddingMap[padding]}>
{children}
</Box>

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

@@ -59,7 +59,7 @@ export function DashboardHero({
borderColor="border-[#23272B]"
>
<Avatar
src={avatarUrl}
src={avatarUrl || undefined}
alt={driverName}
size={120}
className="rounded-xl"

1
apps/website/ui/DevErrorPanel.tsx
View File

@@ -8,6 +8,7 @@ import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Copy, RefreshCw, Terminal, X } from 'lucide-react';
import { useEffect, useState } from 'react';
interface DevErrorPanelProps {

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

@@ -1,4 +1,5 @@
import { Avatar } from '@/ui/Avatar';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';

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

@@ -148,3 +148,7 @@ export function EmptyState({
</Box>
);
}
export function MinimalEmptyState(props: Omit<EmptyStateProps, 'variant'>) {
return <EmptyState {...props} variant="minimal" />;
}

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

@@ -12,7 +12,8 @@ export interface FilterOption {
export interface FilterGroupProps {
options: FilterOption[];
activeId: string;
onChange: (id: string) => void;
onChange?: (id: string) => void;
onSelect?: (id: string) => void;
label?: string;
}
@@ -20,8 +21,11 @@ export const FilterGroup = ({
options,
activeId,
onChange,
onSelect,
label
}: FilterGroupProps) => {
const finalOnChange = onChange || onSelect || (() => {});
return (
<Box display="flex" flexDirection="col" gap={2}>
{label && (
@@ -37,7 +41,7 @@ export const FilterGroup = ({
key={option.id}
variant={isActive ? 'primary' : 'ghost'}
size="sm"
onClick={() => onChange(option.id)}
onClick={() => finalOnChange(option.id)}
fullWidth
>
<Box display="flex" alignItems="center" gap={2}>

3
apps/website/ui/FloatingAction.tsx
View File

@@ -1,6 +1,7 @@
import { Box } from './Box';
import { Button, ButtonProps } from './Button';
export interface FloatingActionProps extends ButtonProps {
export interface FloatingActionProps extends Omit<ButtonProps, 'position'> {
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
title?: string;
}

23
apps/website/ui/GoalCard.tsx
View File

@@ -4,10 +4,13 @@ import { Text } from './Text';
export interface GoalCardProps {
title: string;
current: number;
target: number;
unit: string;
current?: number;
target?: number;
unit?: string;
icon: string;
goalLabel?: string;
currentValue?: number;
maxValue?: number;
}
export const GoalCard = ({
@@ -15,9 +18,15 @@ export const GoalCard = ({
current,
target,
unit,
icon
icon,
goalLabel,
currentValue,
maxValue
}: GoalCardProps) => {
const percentage = Math.min(Math.max((current / target) * 100, 0), 100);
const finalCurrent = currentValue ?? current ?? 0;
const finalTarget = maxValue ?? target ?? 100;
const finalUnit = goalLabel ?? unit ?? '';
const percentage = Math.min(Math.max((finalCurrent / finalTarget) * 100, 0), 100);
return (
<Card variant="default">
@@ -25,7 +34,7 @@ export const GoalCard = ({
<Text size="2xl">{icon}</Text>
<Box>
<Text weight="bold" variant="high">{title}</Text>
<Text size="sm" variant="low">{unit}</Text>
<Text size="sm" variant="low">{finalUnit}</Text>
</Box>
</Box>
@@ -40,7 +49,7 @@ export const GoalCard = ({
</Box>
<Text size="xs" variant="low">
{current} / {target} {unit}
{finalCurrent} / {finalTarget} {finalUnit}
</Text>
</Card>
);

10
apps/website/ui/Grid.tsx
View File

@@ -17,6 +17,8 @@ export interface GridProps<T extends ElementType> extends BoxProps<T> {
children?: ReactNode;
cols?: number | ResponsiveValue<number>;
gap?: number | string | ResponsiveValue<number | string>;
mdCols?: number;
lgCols?: number;
}
export const Grid = forwardRef(<T extends ElementType = 'div'>(
@@ -25,16 +27,22 @@ export const Grid = forwardRef(<T extends ElementType = 'div'>(
cols = 1,
gap = 4,
as,
mdCols,
lgCols,
...props
}: GridProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const finalCols = typeof cols === 'object' ? { ...cols } : { base: cols };
if (mdCols) finalCols.md = mdCols;
if (lgCols) finalCols.lg = lgCols;
return (
<Box
as={as}
ref={ref}
display="grid"
gridCols={cols}
gridCols={finalCols}
gap={gap}
{...props}
>

10
apps/website/ui/GridItem.tsx
View File

@@ -6,6 +6,8 @@ export interface GridItemProps<T extends ElementType> extends BoxProps<T> {
children?: ReactNode;
colSpan?: number | ResponsiveValue<number>;
rowSpan?: number | ResponsiveValue<number>;
mdSpan?: number;
lgSpan?: number;
}
export const GridItem = forwardRef(<T extends ElementType = 'div'>(
@@ -14,15 +16,21 @@ export const GridItem = forwardRef(<T extends ElementType = 'div'>(
colSpan,
rowSpan,
as,
mdSpan,
lgSpan,
...props
}: GridItemProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const finalColSpan = typeof colSpan === 'object' ? { ...colSpan } : { base: colSpan };
if (mdSpan) finalColSpan.md = mdSpan;
if (lgSpan) finalColSpan.lg = lgSpan;
return (
<Box
as={as}
ref={ref}
colSpan={colSpan}
colSpan={finalColSpan as any}
// rowSpan is not directly supported by Box yet, but we can add it if needed
// or use style
{...props}

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

@@ -3,7 +3,7 @@ import { Box } from './Box';
export interface GroupProps {
children: ReactNode;
direction?: 'row' | 'col';
direction?: 'row' | 'col' | 'column';
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
gap?: number;
@@ -20,10 +20,12 @@ export const Group = ({
wrap = false,
fullWidth = false,
}: GroupProps) => {
const finalDirection = direction === 'column' ? 'col' : direction;
return (
<Box
display="flex"
flexDirection={direction}
flexDirection={finalDirection}
alignItems={align}
justifyContent={justify}
gap={gap}

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

@@ -1,5 +1,5 @@
import { ReactNode, forwardRef } from 'react';
import { Box, BoxProps, ResponsiveValue } from './Box';
import { Box, BoxProps, ResponsiveValue, Spacing } from './Box';
export interface HeadingProps extends BoxProps<any> {
children: ReactNode;
@@ -7,6 +7,11 @@ export interface HeadingProps extends BoxProps<any> {
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
align?: 'left' | 'center' | 'right';
fontSize?: string | ResponsiveValue<string>;
icon?: ReactNode;
groupHoverColor?: string;
uppercase?: boolean;
letterSpacing?: string;
mb?: Spacing;
}
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
@@ -15,6 +20,11 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
weight = 'bold',
align = 'left',
fontSize,
icon,
groupHoverColor,
uppercase,
letterSpacing,
mb,
...props
}, ref) => {
const Tag = `h${level}` as const;
@@ -40,11 +50,23 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
weightClasses[weight],
fontSize ? '' : sizeClasses[level],
align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
uppercase ? 'uppercase' : '',
].join(' ');
return (
<Box as={Tag} ref={ref} className={classes} fontSize={typeof fontSize === 'string' ? fontSize : undefined} {...props}>
{children}
<Box
as={Tag}
ref={ref}
className={classes}
fontSize={typeof fontSize === 'string' ? fontSize : undefined}
letterSpacing={letterSpacing}
mb={mb}
{...props}
>
<Box display="flex" alignItems="center" gap={2}>
{icon}
{children}
</Box>
</Box>
);
});

23
apps/website/ui/HorizontalStatCard.tsx
View File

@@ -7,21 +7,31 @@ import { Text } from './Text';
export interface HorizontalStatCardProps {
label: string;
value: string | number;
icon: LucideIcon;
icon: LucideIcon | React.ReactNode;
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
subValue?: string;
iconBgColor?: string;
}
export const HorizontalStatCard = ({
label,
value,
icon,
intent = 'primary'
intent = 'primary',
subValue,
iconBgColor
}: HorizontalStatCardProps) => {
const isLucideIcon = typeof icon === 'function' || (typeof icon === 'object' && icon !== null && 'render' in icon);
return (
<Card variant="default">
<Box display="flex" alignItems="center" gap={4}>
<Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
<Icon icon={icon} size={5} intent={intent} />
<Box padding={3} rounded="lg" bg={iconBgColor || "var(--ui-color-bg-surface-muted)"}>
{isLucideIcon ? (
<Icon icon={icon as LucideIcon} size={5} intent={intent} />
) : (
icon
)}
</Box>
<Box>
<Text size="xs" weight="bold" variant="low" uppercase>
@@ -30,6 +40,11 @@ export const HorizontalStatCard = ({
<Text size="xl" weight="bold" variant="high" block marginTop={0.5}>
{value}
</Text>
{subValue && (
<Text size="xs" variant="low" block marginTop={0.5}>
{subValue}
</Text>
)}
</Box>
</Box>
</Card>

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

@@ -5,17 +5,19 @@ export interface HorizontalStatItemProps {
label: string;
value: string | number;
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
color?: string;
}
export const HorizontalStatItem = ({
label,
value,
intent = 'high'
intent = 'high',
color
}: HorizontalStatItemProps) => {
return (
<Box display="flex" alignItems="center" justifyContent="between" paddingY={2}>
<Text size="sm" variant="low">{label}</Text>
<Text weight="semibold" variant={intent}>{value}</Text>
<Text weight="semibold" variant={color ? undefined : intent} style={color ? { color } : undefined}>{value}</Text>
</Box>
);
};

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

@@ -10,6 +10,7 @@ export interface ImagePlaceholderProps {
aspectRatio?: string;
variant?: 'default' | 'loading' | 'error';
message?: string;
rounded?: string;
}
export const ImagePlaceholder = ({
@@ -18,7 +19,8 @@ export const ImagePlaceholder = ({
animate = 'pulse',
aspectRatio,
variant = 'default',
message
message,
rounded
}: ImagePlaceholderProps) => {
const icons = {
default: ImageIcon,
@@ -36,7 +38,7 @@ export const ImagePlaceholder = ({
alignItems="center"
justifyContent="center"
bg="var(--ui-color-bg-surface-muted)"
style={{ borderRadius: 'var(--ui-radius-md)' }}
style={{ borderRadius: rounded === 'none' ? '0' : (rounded ? `var(--ui-radius-${rounded})` : 'var(--ui-radius-md)') }}
gap={2}
>
<Icon

1
apps/website/ui/InfoFlyout.tsx
View File

@@ -2,6 +2,7 @@ import { HelpCircle, X } from 'lucide-react';
import React, { ReactNode, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { IconButton } from './IconButton';
import { Surface } from './Surface';

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

@@ -5,21 +5,26 @@ import { Text } from './Text';
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
label?: string;
error?: string;
errorMessage?: string;
hint?: string;
fullWidth?: boolean;
size?: 'sm' | 'md' | 'lg';
icon?: React.ReactNode;
variant?: 'default' | 'error';
}
export const Input = forwardRef<HTMLInputElement, InputProps>(({
label,
error,
errorMessage,
hint,
fullWidth = false,
size = 'md',
icon,
variant = 'default',
...props
}, ref) => {
const finalError = error || errorMessage;
const sizeClasses = {
sm: 'px-3 py-1.5 text-xs',
md: 'px-4 py-2 text-sm',
@@ -27,7 +32,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
};
const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors';
const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
const errorClasses = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
const widthClasses = fullWidth ? 'w-full' : '';
const classes = [
@@ -59,14 +64,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
{...props}
/>
</Box>
{error && (
{finalError && (
<Box marginTop={1}>
<Text size="xs" variant="critical">
{error}
{finalError}
</Text>
</Box>
)}
{hint && !error && (
{hint && !finalError && (
<Box marginTop={1}>
<Text size="xs" variant="low">
{hint}

20
apps/website/ui/LeaderboardPreviewShell.tsx
View File

@@ -1,6 +1,7 @@
import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Button } from './Button';
import { Icon } from './Icon';
import { Surface } from './Surface';
import { Text } from './Text';
@@ -12,6 +13,10 @@ export interface LeaderboardPreviewShellProps {
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
children: ReactNode;
footer?: ReactNode;
onViewFull?: () => void;
iconColor?: string;
iconBgGradient?: string;
viewFullLabel?: string;
}
export const LeaderboardPreviewShell = ({
@@ -20,15 +25,19 @@ export const LeaderboardPreviewShell = ({
icon,
intent = 'primary',
children,
footer
footer,
onViewFull,
iconColor,
iconBgGradient,
viewFullLabel
}: LeaderboardPreviewShellProps) => {
return (
<Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
<Box padding={6} borderBottom>
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={4}>
<Box display="flex" alignItems="center" gap={4}>
<Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
<Icon icon={icon} size={5} intent={intent} />
<Box padding={2} rounded="lg" bg={iconBgGradient || "var(--ui-color-bg-surface-muted)"} style={iconColor ? { color: iconColor } : undefined}>
<Icon icon={icon} size={5} intent={iconColor ? undefined : intent} />
</Box>
<Box>
<Text size="lg" weight="bold" variant="high" block>
@@ -41,6 +50,11 @@ export const LeaderboardPreviewShell = ({
)}
</Box>
</Box>
{onViewFull && (
<Button variant="ghost" size="sm" onClick={onViewFull}>
{viewFullLabel || 'View Full'}
</Button>
)}
</Box>
</Box>

3
apps/website/ui/LeaderboardTableShell.tsx
View File

@@ -4,9 +4,10 @@ import { Surface } from './Surface';
export interface LeaderboardTableShellProps {
children: ReactNode;
columns?: any[];
}
export const LeaderboardTableShell = ({ children }: LeaderboardTableShellProps) => {
export const LeaderboardTableShell = ({ children, columns }: LeaderboardTableShellProps) => {
return (
<Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
<Box>

1
apps/website/ui/LeagueCard.tsx
View File

@@ -2,6 +2,7 @@ import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Icon } from './Icon';
import { Image } from './Image';
import { Text } from './Text';

40
apps/website/ui/Link.tsx
View File

@@ -10,6 +10,20 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
block?: boolean;
hoverColor?: string;
transition?: boolean;
pb?: number;
truncate?: boolean;
hoverTextColor?: string;
display?: string;
alignItems?: string;
gap?: number;
rounded?: string;
bg?: string;
px?: number;
py?: number;
border?: boolean;
borderColor?: string;
shadow?: string;
hoverBorderColor?: string;
}
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
@@ -22,6 +36,20 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
block = false,
hoverColor,
transition = true,
pb,
truncate,
hoverTextColor,
display,
alignItems,
gap,
rounded,
bg,
px,
py,
border,
borderColor,
shadow,
hoverBorderColor,
...props
}, ref) => {
const variantClasses = {
@@ -43,12 +71,24 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
block ? 'block' : 'inline',
variantClasses[variant],
underlineClasses[underline],
truncate ? 'truncate' : '',
].join(' ');
const style: React.CSSProperties = {
...(size ? { fontSize: size } : {}),
...(weight ? { fontWeight: weight } : {}),
...(letterSpacing ? { letterSpacing } : {}),
...(pb ? { paddingBottom: `${pb * 0.25}rem` } : {}),
...(display ? { display } : {}),
...(alignItems ? { alignItems } : {}),
...(gap ? { gap: `${gap * 0.25}rem` } : {}),
...(rounded ? { borderRadius: rounded === 'full' ? '9999px' : `var(--ui-radius-${rounded})` } : {}),
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
...(py ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
};
return (

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

@@ -5,16 +5,18 @@ export interface MiniStatProps {
label: string;
value: string | number;
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
color?: string;
}
export const MiniStat = ({
label,
value,
intent = 'high'
intent = 'high',
color
}: MiniStatProps) => {
return (
<Box textAlign="center" padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
<Text size="lg" weight="bold" variant={intent} block>{value}</Text>
<Text size="lg" weight="bold" variant={color ? undefined : intent} style={color ? { color } : undefined} block>{value}</Text>
<Text size="xs" variant="low" block style={{ fontSize: '10px' }}>{label}</Text>
</Box>
);

1
apps/website/ui/NotificationContent.tsx
View File

@@ -1,3 +1,4 @@
import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

37
apps/website/ui/PageHero.tsx
View File

@@ -1,6 +1,9 @@
import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Button } from './Button';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Surface } from './Surface';
import { Text } from './Text';
@@ -9,13 +12,22 @@ export interface PageHeroProps {
description?: string;
children?: ReactNode;
image?: ReactNode;
icon?: LucideIcon;
actions?: Array<{
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary';
icon?: LucideIcon;
}>;
}
export const PageHero = ({
title,
description,
children,
image
image,
icon,
actions
}: PageHeroProps) => {
return (
<Surface
@@ -26,12 +38,33 @@ export const PageHero = ({
>
<Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems="center" gap={8}>
<Box flex={1}>
<Heading level={1} marginBottom={4}>{title}</Heading>
<Box display="flex" alignItems="center" gap={4} marginBottom={4}>
{icon && (
<Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
<Icon icon={icon} size={8} intent="primary" />
</Box>
)}
<Heading level={1}>{title}</Heading>
</Box>
{description && (
<Text size="lg" variant="low" marginBottom={6} block>
{description}
</Text>
)}
{actions && (
<Box display="flex" gap={4} marginBottom={children ? 6 : 0}>
{actions.map((action) => (
<Button
key={action.label}
variant={action.variant || 'primary'}
onClick={action.onClick}
icon={action.icon ? <Icon icon={action.icon} size={4} /> : undefined}
>
{action.label}
</Button>
))}
</Box>
)}
{children}
</Box>
{image && (

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