From da82b4422f01b1139b8a20c534bcea3a97226a89 Mon Sep 17 00:00:00 2001 From: Chris Parsons Date: Wed, 15 Apr 2026 22:50:04 -0700 Subject: [PATCH] Add story for RecentScoresCard --- .../standings/RecentScoresCard.stories.tsx | 192 ++++++++++++++++++ app/components/standings/RecentScoresCard.tsx | 2 +- 2 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 app/components/standings/RecentScoresCard.stories.tsx diff --git a/app/components/standings/RecentScoresCard.stories.tsx b/app/components/standings/RecentScoresCard.stories.tsx new file mode 100644 index 0000000..ae58887 --- /dev/null +++ b/app/components/standings/RecentScoresCard.stories.tsx @@ -0,0 +1,192 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { RecentScoresCard } from "./RecentScoresCard"; +import type { ScoreEventEntry } from "./RecentScoresCard"; + +const meta: Meta = { + title: "Standings/RecentScoresCard", + component: RecentScoresCard, + parameters: { + layout: "padded", + }, +}; + +export default meta; +type Story = StoryObj; + +const now = new Date(); + +const baseEvent: ScoreEventEntry = { + id: "event-1", + teamId: "team-1", + teamName: "Thunderhawks", + ownerName: "Chris M.", + scoringEventId: "se-1", + scoringEventName: "NBA Playoffs Game 3", + sportName: "NBA", + pointsDelta: "25.5", + occurredAt: now.toISOString(), + participants: [ + { id: "p1", name: "LeBron James" }, + { id: "p2", name: "Jayson Tatum" }, + ], +}; + +export const Empty: Story = { + args: { + events: [], + }, +}; + +export const SingleEvent: Story = { + args: { + events: [baseEvent], + }, +}; + +export const MultipleEvents: Story = { + args: { + events: [ + baseEvent, + { + ...baseEvent, + id: "event-2", + teamName: "Storm Chasers", + ownerName: "Sarah J.", + scoringEventName: "F1 Monaco Grand Prix", + sportName: "F1", + pointsDelta: "45", + occurredAt: new Date(now.getTime() - 3 * 60 * 60 * 1000).toISOString(), + participants: [ + { id: "p3", name: "Max Verstappen" }, + { id: "p4", name: "Charles Leclerc" }, + ], + }, + { + ...baseEvent, + id: "event-3", + teamName: "Golden Eagles", + ownerName: "Mike T.", + scoringEventName: "Champions League Quarter-Final", + sportName: "UCL", + pointsDelta: "30.0", + occurredAt: new Date(now.getTime() - 12 * 60 * 60 * 1000).toISOString(), + participants: [ + { id: "p5", name: "Erling Haaland" }, + { id: "p6", name: "Vinicius Jr" }, + ], + }, + ], + }, +}; + +export const RecentAndOld: Story = { + args: { + events: [ + { + ...baseEvent, + id: "event-recent-1", + pointsDelta: "20", + occurredAt: new Date(now.getTime() - 30 * 60 * 1000).toISOString(), + }, + { + ...baseEvent, + id: "event-recent-2", + teamName: "Lightning Bolts", + ownerName: "Alex K.", + scoringEventName: "NBA Playoffs Game 4", + sportName: "NBA", + pointsDelta: "15.5", + occurredAt: new Date(now.getTime() - 6 * 60 * 60 * 1000).toISOString(), + participants: [{ id: "p7", name: "Stephen Curry" }], + }, + { + ...baseEvent, + id: "event-old-1", + teamName: "Cobras", + ownerName: "Jennifer L.", + scoringEventName: "Premier League Matchday 35", + sportName: "Premier League", + pointsDelta: "35", + occurredAt: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString(), + participants: [ + { id: "p8", name: "Mohamed Salah" }, + { id: "p9", name: "Kevin De Bruyne" }, + ], + }, + { + ...baseEvent, + id: "event-old-2", + teamName: "Wolves", + ownerName: null, + scoringEventName: "Snooker World Championship", + sportName: "Snooker", + pointsDelta: "12", + occurredAt: new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000).toISOString(), + participants: [{ id: "p10", name: "Ronnie O'Sullivan" }], + }, + ], + }, +}; + +export const IntegerPoints: Story = { + args: { + events: [ + { ...baseEvent, pointsDelta: "10", occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() }, + { ...baseEvent, id: "event-2", pointsDelta: "25", occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() }, + { ...baseEvent, id: "event-3", pointsDelta: "40", occurredAt: new Date(now.getTime() - 10 * 60 * 60 * 1000).toISOString() }, + ], + }, +}; + +export const DecimalPoints: Story = { + args: { + events: [ + { ...baseEvent, pointsDelta: "12.5", occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() }, + { ...baseEvent, id: "event-2", pointsDelta: "8.3", occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() }, + { ...baseEvent, id: "event-3", pointsDelta: "33.7", occurredAt: new Date(now.getTime() - 10 * 60 * 60 * 1000).toISOString() }, + ], + }, +}; + +export const NoOwnerName: Story = { + args: { + events: [ + { ...baseEvent, ownerName: null, occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() }, + { ...baseEvent, id: "event-2", teamName: "Iron Wolves", ownerName: null, occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() }, + ], + }, +}; + +export const SingleParticipant: Story = { + args: { + events: [ + { ...baseEvent, participants: [{ id: "p1", name: "LeBron James" }] }, + { ...baseEvent, id: "event-2", participants: [{ id: "p2", name: "Max Verstappen" }] }, + ], + }, +}; + +export const MultipleParticipants: Story = { + args: { + events: [ + { + ...baseEvent, + participants: [ + { id: "p1", name: "LeBron James" }, + { id: "p2", name: "Jayson Tatum" }, + { id: "p3", name: "Stephen Curry" }, + ], + }, + { + ...baseEvent, + id: "event-2", + participants: [ + { id: "p4", name: "Max Verstappen" }, + { id: "p5", name: "Charles Leclerc" }, + { id: "p6", name: "Fernando Alonso" }, + { id: "p7", name: "Lewis Hamilton" }, + ], + }, + ], + }, +}; diff --git a/app/components/standings/RecentScoresCard.tsx b/app/components/standings/RecentScoresCard.tsx index 7e472e1..509580c 100644 --- a/app/components/standings/RecentScoresCard.tsx +++ b/app/components/standings/RecentScoresCard.tsx @@ -3,7 +3,7 @@ import { TrendingUp } from "lucide-react"; import { GradientIcon } from "~/components/ui/GradientIcon"; import { BRACKT_GRADIENT } from "~/lib/brand"; -interface ScoreEventEntry { +export interface ScoreEventEntry { id: string; teamId: string; teamName: string;