New design (#309)
* Redesign home page with new layout and component system
- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Responsive league row layout and mobile polish
- League rows stack avatar+name on top, stats full-width below on mobile
- Stats spread to right side on sm+ screens with border separator on mobile
- Tighter padding on mobile (px-3/py-3), full padding on sm+
- Card headers and content use px-3 sm:px-6 to reduce mobile gutters
- Two-column home layout deferred to lg breakpoint (tablet gets stacked)
- Active leagues sorted by completion percentage descending
- Default rank 1 / 0 points for active leagues with no scoring events yet
- Fix ordinal bug for 11th/12th/13th; add aria-labels to rank change indicators
- Remove dead StatDivider className prop
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Improve claude file.
* Add StandingsPreview card component with podium row styling
- New StandingsPreview component with gold/silver/bronze row tints for
top 3, team avatar, and LeagueRow-style stat columns (Ranking + Points)
with rank and 7-day point change indicators
- Fix GradientIcon in Storybook by adding BracktGradients decorator to
preview.tsx (renamed from .ts to support JSX)
- Fix degenerate SVG gradient on horizontal strokes by switching
BracktGradients to gradientUnits="userSpaceOnUse" with Lucide-space
coordinates (0→24)
- Revert erroneous fill: url(#gradient) from GradientIcon; stroke-only
fix was sufficient once gradientUnits was corrected
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Update components on league homepage.
* Finish up league page styling.
* Work on standings page.
* Add story for RecentScoresCard
* Update Point Progression Chart.
* Sort point progression legend by ranking and add team links to standings rows
* Fix standings discrepancy on change.
* Create draft cell component.
* Update draft board page
* Draft room improvements.
* Update some draft room styling.
* Fix context menu missing.
* Move tab navigation and autodraft to header row, narrow sidebar
* Virtualize available participants list, memoize draft room props
Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Update draft room UI.
* More draft room fixes.
* Draft room tweaks.
* Fix Rosters page.
* Queue Section fixes.
* Mobile Draft fixes.
* Fix draft board page.
* Create bracket look.
* Bracket work.
* Finish bracket page.
* Homepage initial styling
* homepage copy
* Add privacy policy. Fixes #88.
* how to play copy
* rules copy
* Fix brackets on homepage.
* Add footer to website.
* Glow on dots.
* Landing page copy.
* Fix sidebar.
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 13:14:55 -07:00
|
|
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
|
|
|
import { StandingsPreview } from "./StandingsPreview";
|
|
|
|
|
|
|
|
|
|
const meta: Meta<typeof StandingsPreview> = {
|
|
|
|
|
title: "League/StandingsPreview",
|
|
|
|
|
component: StandingsPreview,
|
|
|
|
|
parameters: {
|
|
|
|
|
layout: "padded",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default meta;
|
|
|
|
|
type Story = StoryObj<typeof StandingsPreview>;
|
|
|
|
|
|
|
|
|
|
export const TopThreePodium: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
ownerName: "alice",
|
|
|
|
|
displayRank: 1,
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: 2,
|
|
|
|
|
currentRank: 2,
|
|
|
|
|
points: 2654.5,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
ownerName: "carol",
|
|
|
|
|
displayRank: 3,
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t3",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const FullLeague: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
ownerName: "alice",
|
|
|
|
|
displayRank: 1,
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
rankChange: 2,
|
|
|
|
|
pointChange: 87.5,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: 2,
|
|
|
|
|
currentRank: 2,
|
|
|
|
|
points: 2654.5,
|
|
|
|
|
rankChange: 0,
|
|
|
|
|
pointChange: 42.0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
ownerName: "carol",
|
|
|
|
|
displayRank: 3,
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
rankChange: -1,
|
|
|
|
|
pointChange: -12.3,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t3",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t4",
|
|
|
|
|
teamName: "Cyber Foxes",
|
|
|
|
|
ownerName: "dave",
|
|
|
|
|
displayRank: 4,
|
|
|
|
|
currentRank: 4,
|
|
|
|
|
points: 2311.8,
|
|
|
|
|
rankChange: 1,
|
|
|
|
|
pointChange: 23.1,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t4",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t5",
|
|
|
|
|
teamName: "Neon Tigers",
|
|
|
|
|
ownerName: "eve",
|
|
|
|
|
displayRank: 5,
|
|
|
|
|
currentRank: 5,
|
|
|
|
|
points: 2108,
|
|
|
|
|
rankChange: -2,
|
|
|
|
|
pointChange: -55.0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t5",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t6",
|
|
|
|
|
teamName: "Phantom Sharks",
|
|
|
|
|
ownerName: "frank",
|
|
|
|
|
displayRank: 6,
|
|
|
|
|
currentRank: 6,
|
|
|
|
|
points: 1987.3,
|
|
|
|
|
rankChange: 0,
|
|
|
|
|
pointChange: 0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t6",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t7",
|
|
|
|
|
teamName: "Crimson Tide FC",
|
|
|
|
|
ownerName: "grace",
|
|
|
|
|
displayRank: 7,
|
|
|
|
|
currentRank: 7,
|
|
|
|
|
points: 1834,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t7",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t8",
|
|
|
|
|
teamName: "Arctic Wolves United",
|
|
|
|
|
ownerName: "hank",
|
|
|
|
|
displayRank: 8,
|
|
|
|
|
currentRank: 8,
|
|
|
|
|
points: 1692.6,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t8",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
2026-06-21 11:56:15 -07:00
|
|
|
export const WithProjections: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
showProjected: true,
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
ownerName: "alice",
|
|
|
|
|
displayRank: 1,
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
rankChange: 2,
|
|
|
|
|
pointChange: 87.5,
|
|
|
|
|
projectedPoints: 3120,
|
|
|
|
|
participantsRemaining: 3,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: 2,
|
|
|
|
|
currentRank: 2,
|
|
|
|
|
points: 2654.5,
|
|
|
|
|
rankChange: -1,
|
|
|
|
|
pointChange: 42.0,
|
|
|
|
|
projectedPoints: 2980,
|
|
|
|
|
participantsRemaining: 2,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
ownerName: "carol",
|
|
|
|
|
displayRank: 3,
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
// No 7-day change and no live participants — placeholders keep alignment.
|
|
|
|
|
projectedPoints: 2493,
|
|
|
|
|
participantsRemaining: 0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t3",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
New design (#309)
* Redesign home page with new layout and component system
- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Responsive league row layout and mobile polish
- League rows stack avatar+name on top, stats full-width below on mobile
- Stats spread to right side on sm+ screens with border separator on mobile
- Tighter padding on mobile (px-3/py-3), full padding on sm+
- Card headers and content use px-3 sm:px-6 to reduce mobile gutters
- Two-column home layout deferred to lg breakpoint (tablet gets stacked)
- Active leagues sorted by completion percentage descending
- Default rank 1 / 0 points for active leagues with no scoring events yet
- Fix ordinal bug for 11th/12th/13th; add aria-labels to rank change indicators
- Remove dead StatDivider className prop
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Improve claude file.
* Add StandingsPreview card component with podium row styling
- New StandingsPreview component with gold/silver/bronze row tints for
top 3, team avatar, and LeagueRow-style stat columns (Ranking + Points)
with rank and 7-day point change indicators
- Fix GradientIcon in Storybook by adding BracktGradients decorator to
preview.tsx (renamed from .ts to support JSX)
- Fix degenerate SVG gradient on horizontal strokes by switching
BracktGradients to gradientUnits="userSpaceOnUse" with Lucide-space
coordinates (0→24)
- Revert erroneous fill: url(#gradient) from GradientIcon; stroke-only
fix was sufficient once gradientUnits was corrected
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Update components on league homepage.
* Finish up league page styling.
* Work on standings page.
* Add story for RecentScoresCard
* Update Point Progression Chart.
* Sort point progression legend by ranking and add team links to standings rows
* Fix standings discrepancy on change.
* Create draft cell component.
* Update draft board page
* Draft room improvements.
* Update some draft room styling.
* Fix context menu missing.
* Move tab navigation and autodraft to header row, narrow sidebar
* Virtualize available participants list, memoize draft room props
Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Update draft room UI.
* More draft room fixes.
* Draft room tweaks.
* Fix Rosters page.
* Queue Section fixes.
* Mobile Draft fixes.
* Fix draft board page.
* Create bracket look.
* Bracket work.
* Finish bracket page.
* Homepage initial styling
* homepage copy
* Add privacy policy. Fixes #88.
* how to play copy
* rules copy
* Fix brackets on homepage.
* Add footer to website.
* Glow on dots.
* Landing page copy.
* Fix sidebar.
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 13:14:55 -07:00
|
|
|
export const WithTies: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
ownerName: "alice",
|
|
|
|
|
displayRank: "T1",
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: "T1",
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
ownerName: "carol",
|
|
|
|
|
displayRank: "T3",
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t3",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t4",
|
|
|
|
|
teamName: "Cyber Foxes",
|
|
|
|
|
ownerName: "dave",
|
|
|
|
|
displayRank: "T3",
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t4",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const AllUnranked: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
ownerName: "alice",
|
|
|
|
|
displayRank: "T1",
|
|
|
|
|
points: 0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: "T1",
|
|
|
|
|
points: 0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
ownerName: "carol",
|
|
|
|
|
displayRank: "T1",
|
|
|
|
|
points: 0,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t3",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const NoOwnerNames: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "Lightning Wolves",
|
|
|
|
|
displayRank: 1,
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks",
|
|
|
|
|
displayRank: 2,
|
|
|
|
|
currentRank: 2,
|
|
|
|
|
points: 2654.5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t3",
|
|
|
|
|
teamName: "Iron Eagles",
|
|
|
|
|
displayRank: 3,
|
|
|
|
|
currentRank: 3,
|
|
|
|
|
points: 2493,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const LongTeamNames: Story = {
|
|
|
|
|
args: {
|
|
|
|
|
entries: [
|
|
|
|
|
{
|
|
|
|
|
teamId: "t1",
|
|
|
|
|
teamName: "The Unstoppable Championship Winning Lightning Wolves",
|
|
|
|
|
ownerName: "alice_with_a_really_long_username",
|
|
|
|
|
displayRank: 1,
|
|
|
|
|
currentRank: 1,
|
|
|
|
|
points: 2810,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
teamId: "t2",
|
|
|
|
|
teamName: "Shadow Hawks of the Northern Division",
|
|
|
|
|
ownerName: "bob",
|
|
|
|
|
displayRank: 2,
|
|
|
|
|
currentRank: 2,
|
|
|
|
|
points: 2654.5,
|
|
|
|
|
href: "/leagues/1/standings/1/teams/t2",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|