chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Add story for RecentScoresCard

Browse source
This commit is contained in:
Chris Parsons 2026-04-15 22:50:04 -07:00
parent 744ae2b43e
commit b27adfbca0
2 changed files with 193 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
app/components/standings/RecentScoresCard.stories.tsx Normal file
View file

@ -0,0 +1,192 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { RecentScoresCard } from "./RecentScoresCard";
import type { ScoreEventEntry } from "./RecentScoresCard";
const meta: Meta<typeof RecentScoresCard> = {
title: "Standings/RecentScoresCard",
component: RecentScoresCard,
parameters: {
layout: "padded",
},
};
export default meta;
type Story = StoryObj<typeof RecentScoresCard>;
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" },
],
},
],
},
};

2
app/components/standings/RecentScoresCard.tsx
View file

@ -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;