Catalogue: ghost-basketball
The site's basketball UI library, grouped by the surface it serves: schedule, standings, Game Centre, widgets, player, team and stats.
The package
@v4/ghost-basketball is the basketball UI library: the schedule, standings, brackets, the
Game Centre, and the player, team and coach surfaces. It holds 139 components — 25
atoms, 56 molecules, 48 organisms and 10 templates in Storybook — plus four internal parts
under _internal/ (basketball-page, stat-bar, table-scroller, widget-panel) and two
shared helpers (hero-widget-column.ts, widget-text.css.ts).
It is this project's own package, not one from the template: it belongs to the basketball
domain built for this site, alongside @v4/basketball-app (the routes) and
@v4/competition-engine (the data). The components take plain props; the route package
reads the Competition Engine, merges the Contentful editorial fields over it, and hands the
pages their data.
Where it comes from
- ELB – Web – Basketball (
8Jl1miPEIZslMda8jZ8w0C) is the source of truth. It is NEW UI rather than a fork of a Ghost file, so every component's bridge names that file from birth. - The exceptions are the three ECAL schedule-picker components (
ecal-all-games,ecal-team-option,ecal-schedule-picker), built from ELB's concept file ELB – Web – EXT (Yqy0zItrtL4UptOVW54wVg, page "Updated E-Cal"). Those frames carry no Token Studio data, so their theme leaves are INFERRED and their bridges name EXT. - Components are generated with
/generate-from-figma <url> --package=ghost-basketball. The plan, inventory and progress are in.claude/reference/figma/ghost-basketball-plan.md,ghost-basketball-inventory.mdandghost-basketball-progress.md. Before building a Game Centre surface, check its design status withnode packages/token-parser/scripts/design-status.mjs --file 8Jl1miPEIZslMda8jZ8w0C.
How it is themed
Components bind g.components.basketball.* and the team colours g.teams.teams.<club>.* —
the basketball extension of the global surface
(packages/ghost-core/src/theme/basketball-surface.ts). Ghost has no basketball namespace
and no team colours; both exist only in ELB's tokens. In the app the package's themes are
emitted by apps/web/src/theme/tokens-basketball.css.ts, which the data-area layouts load;
the homepage hero's widgets ride in the smaller tokens-home-hero.css.ts part. See
Euro League's theme.
Motion is heavier here than anywhere else in the estate — table cascades, count-ups, the live score roll, the sticky bars — and follows the ELB motion spec; see Motion.
Storybook
Stories are titled Ghost-Basketball/<Tier>/<Name> and live under
apps/storybook/stories/ghost-basketball/; Ghost-Basketball/Introduction is the
package's landing page. As elsewhere, the story id lower-cases the title without splitting
PascalCase (Ghost-Basketball/Organisms/StandingsTable →
ghost-basketball-organisms-standingstable). Run Storybook with
pnpm --filter @v4/storybook dev and open the paths below on http://localhost:6006.
Components by surface
Every component in the package, grouped by the surface it serves. A row's tier is its Storybook category; the link opens its autodocs page.
Schedule and game cards
The games schedule at /games/<competition>: the round rail, the filter bar, a day's game cards and the ECAL "Add to calendar" picker.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
page-games-schedule |
Template | The games schedule | /?path=/docs/ghost-basketball-templates-pagegamesschedule--docs |
round-selector |
Molecule | The schedule's round rail | /?path=/docs/ghost-basketball-molecules-roundselector--docs |
filter-bar |
Molecule | The schedule's filter bar | /?path=/docs/ghost-basketball-molecules-filterbar--docs |
filter-field |
Molecule | A labelled filter | /?path=/docs/ghost-basketball-molecules-filterfield--docs |
date-header |
Molecule | The heading of a day's games | /?path=/docs/ghost-basketball-molecules-dateheader--docs |
game |
Organism | A game card on the schedule | /?path=/docs/ghost-basketball-organisms-game--docs |
club |
Atom | A team in a game | /?path=/docs/ghost-basketball-atoms-club--docs |
game-score |
Atom | A team's score in a game | /?path=/docs/ghost-basketball-atoms-gamescore--docs |
game-status |
Atom | A game's status (pill, inline word or abbreviation) | /?path=/docs/ghost-basketball-atoms-gamestatus--docs |
broadcaster |
Molecule | The chip a game's broadcaster is shown on | /?path=/docs/ghost-basketball-molecules-broadcaster--docs |
broadcaster-logo |
Atom | The 40 × 24 well a broadcaster's mark sits in | /?path=/docs/ghost-basketball-atoms-broadcasterlogo--docs |
schedule-empty-state |
Molecule | What the schedule shows instead of games | /?path=/docs/ghost-basketball-molecules-scheduleemptystate--docs |
ecal-schedule-picker |
Organism | Step 1 of "Add to calendar": the schedule picker dialog | /?path=/docs/ghost-basketball-organisms-ecalschedulepicker--docs |
ecal-all-games |
Atom | The "All games" option at the top of the ECAL schedule picker | /?path=/docs/ghost-basketball-atoms-ecalallgames--docs |
ecal-team-option |
Atom | A team tile in the ECAL schedule picker | /?path=/docs/ghost-basketball-atoms-ecalteamoption--docs |
Standings and brackets
The standings page, its table and zones, and the post-season bracket.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
page-standings |
Template | The competition's standings page | /?path=/docs/ghost-basketball-templates-pagestandings--docs |
standings-table |
Organism | The standings card | /?path=/docs/ghost-basketball-organisms-standingstable--docs |
standings-row |
Molecule | One row of the standings table | /?path=/docs/ghost-basketball-molecules-standingsrow--docs |
standings-position |
Atom | A team's rank in the standings | /?path=/docs/ghost-basketball-atoms-standingsposition--docs |
standings-zone |
Atom | The marker between two zones of a standings table | /?path=/docs/ghost-basketball-atoms-standingszone--docs |
bracket |
Organism | The post-season bracket card | /?path=/docs/ghost-basketball-organisms-bracket--docs |
bracket-round-header |
Atom | The heading of a bracket's round | /?path=/docs/ghost-basketball-atoms-bracketroundheader--docs |
bracket-match |
Molecule | One tie of the bracket | /?path=/docs/ghost-basketball-molecules-bracketmatch--docs |
bracket-team |
Molecule | One team row of a bracket tie | /?path=/docs/ghost-basketball-molecules-bracketteam--docs |
bracket-champion |
Molecule | The bracket's final slot | /?path=/docs/ghost-basketball-molecules-bracketchampion--docs |
Game Centre: header and shell
One game's page at /games/<slug>. Every module is drawn in the same game-section shell, with its own "About this module" sheet.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
page-game-centre |
Template | One game's page — the Game Centre | /?path=/docs/ghost-basketball-templates-pagegamecentre--docs |
game-header-hero |
Organism | The Game Centre's page header | /?path=/docs/ghost-basketball-organisms-gameheaderhero--docs |
game-score-card |
Organism | The score card at the top of the Game Centre | /?path=/docs/ghost-basketball-organisms-gamescorecard--docs |
game-score-background |
Atom | The club-coloured ground behind the Game Centre's score card | /?path=/docs/ghost-basketball-atoms-gamescorebackground--docs |
game-media |
Organism | The media panel of the Game Centre header | /?path=/docs/ghost-basketball-organisms-gamemedia--docs |
game-sticky-bar |
Organism | The Game Centre's sticky score bar, shown once the header has scrolled away | /?path=/docs/ghost-basketball-organisms-gamestickybar--docs |
sticky-bar-score |
Atom | One score box of the Game Centre sticky bar | /?path=/docs/ghost-basketball-atoms-stickybarscore--docs |
sticky-bar-quarter-strip |
Molecule | The Detailed sticky bar's points by quarter as one strip of chips | /?path=/docs/ghost-basketball-molecules-stickybarquarterstrip--docs |
sticky-bar-quarter-table |
Molecule | The Detailed sticky bar's points-by-quarter table at X-Large | /?path=/docs/ghost-basketball-molecules-stickybarquartertable--docs |
game-section |
Organism | The Game Centre module shell every module is drawn in | /?path=/docs/ghost-basketball-organisms-gamesection--docs |
module-info |
Molecule | The "About this module" sheet every Game Centre module carries | /?path=/docs/ghost-basketball-molecules-moduleinfo--docs |
game-summary |
Molecule | The game's summary figures at the top of a module | /?path=/docs/ghost-basketball-molecules-gamesummary--docs |
game-team-key |
Atom | The key over a game module's comparisons | /?path=/docs/ghost-basketball-atoms-gameteamkey--docs |
stat-group-heading |
Atom | The heading over a group of statistics inside a game module | /?path=/docs/ghost-basketball-atoms-statgroupheading--docs |
player-thumbnail |
Atom | The small round headshot the game modules list players with | /?path=/docs/ghost-basketball-atoms-playerthumbnail--docs |
game-info |
Organism | The Game Centre's game-information module | /?path=/docs/ghost-basketball-organisms-gameinfo--docs |
Game Centre: modules
The modules a game's page composes, before, during and after the game.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
box-score |
Organism | The Box score module of the Game Centre | /?path=/docs/ghost-basketball-organisms-boxscore--docs |
team-stats |
Organism | The Team stats module of the Game Centre | /?path=/docs/ghost-basketball-organisms-teamstats--docs |
comparison-row |
Molecule | One statistic compared across the two teams | /?path=/docs/ghost-basketball-molecules-comparisonrow--docs |
game-leaders |
Organism | The Game leaders module of the Game Centre | /?path=/docs/ghost-basketball-organisms-gameleaders--docs |
game-leader-category |
Molecule | One category of a game-leaders module | /?path=/docs/ghost-basketball-molecules-gameleadercategory--docs |
game-leader-entry |
Molecule | One player's line in a game-leaders category | /?path=/docs/ghost-basketball-molecules-gameleaderentry--docs |
game-ranking |
Organism | The Game Centre's ranking of every player in the game | /?path=/docs/ghost-basketball-organisms-gameranking--docs |
game-ranking-entry |
Molecule | One entry of the game ranking | /?path=/docs/ghost-basketball-molecules-gamerankingentry--docs |
top-player |
Organism | The Top player module of the Game Centre | /?path=/docs/ghost-basketball-organisms-topplayer--docs |
game-top-player |
Molecule | The top-player card for one side | /?path=/docs/ghost-basketball-molecules-gametopplayer--docs |
game-flow |
Organism | The Game Centre's game-flow module | /?path=/docs/ghost-basketball-organisms-gameflow--docs |
game-flow-stat |
Atom | One statistic of the game-flow module | /?path=/docs/ghost-basketball-atoms-gameflowstat--docs |
play-card |
Molecule | One scoring play under the Game flow chart | /?path=/docs/ghost-basketball-molecules-playcard--docs |
play-by-play |
Organism | The Game Centre's play-by-play module | /?path=/docs/ghost-basketball-organisms-playbyplay--docs |
play-row |
Molecule | One play of the play-by-play | /?path=/docs/ghost-basketball-molecules-playrow--docs |
play-game-end |
Molecule | The row that closes the play-by-play | /?path=/docs/ghost-basketball-molecules-playgameend--docs |
lineups |
Organism | The Game Centre's lineups module | /?path=/docs/ghost-basketball-organisms-lineups--docs |
lineup-row |
Molecule | One lineup of the Lineups & connections module | /?path=/docs/ghost-basketball-molecules-lineuprow--docs |
connections |
Organism | The Game Centre's best-connections module | /?path=/docs/ghost-basketball-organisms-connections--docs |
connection-row |
Molecule | One scorer–assister connection of the Lineups & connections module | /?path=/docs/ghost-basketball-molecules-connectionrow--docs |
rosters |
Organism | The Game Centre's two rosters | /?path=/docs/ghost-basketball-organisms-rosters--docs |
roster-row |
Molecule | One player's row in a game's roster | /?path=/docs/ghost-basketball-molecules-rosterrow--docs |
starters-bench |
Organism | How the two clubs' starters and benches scored | /?path=/docs/ghost-basketball-organisms-startersbench--docs |
season-records |
Organism | The Game Centre's season context for the two clubs' players | /?path=/docs/ghost-basketball-organisms-seasonrecords--docs |
season-record-row |
Molecule | One player's row in a game's season records | /?path=/docs/ghost-basketball-molecules-seasonrecordrow--docs |
season-standings |
Organism | Where the two clubs stand this season, in the Game Centre | /?path=/docs/ghost-basketball-organisms-seasonstandings--docs |
head-to-head |
Organism | The two clubs' history, in the Game Centre | /?path=/docs/ghost-basketball-organisms-headtohead--docs |
h2h-game-row |
Molecule | One meeting between the two clubs | /?path=/docs/ghost-basketball-molecules-h2hgamerow--docs |
h2h-summary |
Molecule | The head-to-head win tally | /?path=/docs/ghost-basketball-molecules-h2hsummary--docs |
form |
Organism | A club's form before the game | /?path=/docs/ghost-basketball-organisms-form--docs |
form-row |
Molecule | One game of a club's form | /?path=/docs/ghost-basketball-molecules-formrow--docs |
form-result |
Atom | One game of a team's form | /?path=/docs/ghost-basketball-atoms-formresult--docs |
form-badge |
Atom | One game in a FormGuide or a player's game log | /?path=/docs/ghost-basketball-atoms-formbadge--docs |
player-modal |
Organism | The sheet a roster row opens on a player | /?path=/docs/ghost-basketball-organisms-playermodal--docs |
Widgets
The small cards the homepage hero and the live Game Centre show (the header widgets). Every widget wears widget-card and opens with widget-header.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
widget-card |
Molecule | The frame every widget wears | /?path=/docs/ghost-basketball-molecules-widgetcard--docs |
widget-header |
Atom | The title row every Game Centre widget opens with | /?path=/docs/ghost-basketball-atoms-widgetheader--docs |
widget-list |
Molecule | A list of rows in a widget | /?path=/docs/ghost-basketball-molecules-widgetlist--docs |
widget-row |
Molecule | A player in a widget | /?path=/docs/ghost-basketball-molecules-widgetrow--docs |
widget-team |
Molecule | A club in a widget | /?path=/docs/ghost-basketball-molecules-widgetteam--docs |
widget-teams-row |
Molecule | The key over a comparison widget | /?path=/docs/ghost-basketball-molecules-widgetteamsrow--docs |
widget-tile |
Molecule | A figure in a widget | /?path=/docs/ghost-basketball-molecules-widgettile--docs |
widget-table |
Molecule | A small figures table in a widget | /?path=/docs/ghost-basketball-molecules-widgettable--docs |
widget-stats |
Molecule | A club's per-game figures | /?path=/docs/ghost-basketball-molecules-widgetstats--docs |
widget-record |
Molecule | A club's record | /?path=/docs/ghost-basketball-molecules-widgetrecord--docs |
widget-form |
Molecule | A player's or a club's recent run | /?path=/docs/ghost-basketball-molecules-widgetform--docs |
widget-game-link |
Molecule | The tip-off in a widget | /?path=/docs/ghost-basketball-molecules-widgetgamelink--docs |
widget-match-row |
Molecule | A game in a widget list | /?path=/docs/ghost-basketball-molecules-widgetmatchrow--docs |
widget-next-game |
Molecule | A club's next game | /?path=/docs/ghost-basketball-molecules-widgetnextgame--docs |
widget-next-games |
Organism | Games to come | /?path=/docs/ghost-basketball-organisms-widgetnextgames--docs |
widget-versus |
Molecule | Two clubs face to face: a game to come, a score or a tally of wins | /?path=/docs/ghost-basketball-molecules-widgetversus--docs |
widget-mvp |
Organism | The round's or season's MVP | /?path=/docs/ghost-basketball-organisms-widgetmvp--docs |
widget-team-leaders |
Organism | A few players and a figure each | /?path=/docs/ghost-basketball-organisms-widgetteamleaders--docs |
widget-team-comparison |
Organism | The pre-game team comparison | /?path=/docs/ghost-basketball-organisms-widgetteamcomparison--docs |
widget-points-by-quarter |
Organism | Points by quarter | /?path=/docs/ghost-basketball-organisms-widgetpointsbyquarter--docs |
widget-game-situation |
Organism | The live Game Centre's game situation | /?path=/docs/ghost-basketball-organisms-widgetgamesituation--docs |
header-standings-table |
Organism | The homepage hero's standings card | /?path=/docs/ghost-basketball-organisms-headerstandingstable--docs |
header-standings-row |
Molecule | One row of the homepage hero's standings card | /?path=/docs/ghost-basketball-molecules-headerstandingsrow--docs |
header-standings-position |
Atom | A club's rank in a header standings row | /?path=/docs/ghost-basketball-atoms-headerstandingsposition--docs |
header-stat-cell |
Atom | One cell of a header standings row | /?path=/docs/ghost-basketball-atoms-headerstatcell--docs |
Players, teams and coaches
The all-players and all-teams lists, and one page per player, team and coach with their heroes, bios, game logs and records.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
page-all-players |
Template | The players page | /?path=/docs/ghost-basketball-templates-pageallplayers--docs |
page-all-teams |
Template | The clubs page | /?path=/docs/ghost-basketball-templates-pageallteams--docs |
page-player |
Template | A player's page | /?path=/docs/ghost-basketball-templates-pageplayer--docs |
page-team |
Template | A club's page | /?path=/docs/ghost-basketball-templates-pageteam--docs |
page-coach |
Template | A coach's page | /?path=/docs/ghost-basketball-templates-pagecoach--docs |
player-card |
Molecule | A player on the all-players page | /?path=/docs/ghost-basketball-molecules-playercard--docs |
team-card |
Organism | A club on the all-teams page | /?path=/docs/ghost-basketball-organisms-teamcard--docs |
roster-card |
Organism | A player or coach on the roster page | /?path=/docs/ghost-basketball-organisms-rostercard--docs |
player-hero |
Organism | The player page's hero band | /?path=/docs/ghost-basketball-organisms-playerhero--docs |
team-hero |
Organism | The team page's hero band | /?path=/docs/ghost-basketball-organisms-teamhero--docs |
coach-hero |
Organism | The coach page's hero band | /?path=/docs/ghost-basketball-organisms-coachhero--docs |
bio-panel |
Organism | The Profile tab's bio band | /?path=/docs/ghost-basketball-organisms-biopanel--docs |
bio-about |
Molecule | The bio panel's "about" block | /?path=/docs/ghost-basketball-molecules-bioabout--docs |
bio-timeline |
Organism | The bio panel's achievements card | /?path=/docs/ghost-basketball-organisms-biotimeline--docs |
bio-timeline-item |
Molecule | One entry of the bio timeline | /?path=/docs/ghost-basketball-molecules-biotimelineitem--docs |
bio-timeline-marker |
Atom | The bio timeline's spine | /?path=/docs/ghost-basketball-atoms-biotimelinemarker--docs |
stat-tile |
Molecule | A stat on a player or team page | /?path=/docs/ghost-basketball-molecules-stattile--docs |
rank-chip |
Atom | A league rank on a stat tile | /?path=/docs/ghost-basketball-atoms-rankchip--docs |
player-game-log |
Organism | A player's last five games on the Stats tab | /?path=/docs/ghost-basketball-organisms-playergamelog--docs |
player-game-row |
Molecule | One row of a player's game log | /?path=/docs/ghost-basketball-molecules-playergamerow--docs |
player-game-cell |
Molecule | One game in a player's game log and records | /?path=/docs/ghost-basketball-molecules-playergamecell--docs |
player-season-table |
Organism | A player's season card | /?path=/docs/ghost-basketball-organisms-playerseasontable--docs |
player-records-table |
Organism | A player's EuroLeague career highs on the Records tab | /?path=/docs/ghost-basketball-organisms-playerrecordstable--docs |
player-record-row |
Molecule | One career high | /?path=/docs/ghost-basketball-molecules-playerrecordrow--docs |
coach-record-table |
Organism | A coach's record on the Records tab | /?path=/docs/ghost-basketball-organisms-coachrecordtable--docs |
Stats and leaders
The stats hub and the stats tables every page shares.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
page-stats |
Template | The stats hub | /?path=/docs/ghost-basketball-templates-pagestats--docs |
stats-hub-table |
Organism | The stats hub's full table | /?path=/docs/ghost-basketball-organisms-statshubtable--docs |
player-stats-table |
Organism | The player stats card | /?path=/docs/ghost-basketball-organisms-playerstatstable--docs |
player-stats-row |
Molecule | One row of the player stats table | /?path=/docs/ghost-basketball-molecules-playerstatsrow--docs |
stat-cell |
Atom | One cell of a basketball stats table | /?path=/docs/ghost-basketball-atoms-statcell--docs |
stat-key |
Molecule | The key to a stats table | /?path=/docs/ghost-basketball-molecules-statkey--docs |
stat-key-entry |
Molecule | One line of a stat key | /?path=/docs/ghost-basketball-molecules-statkeyentry--docs |
tooltip |
Molecule | The bubble that explains an abbreviation | /?path=/docs/ghost-basketball-molecules-tooltip--docs |
leader-card |
Organism | The stats hub's leaders card for one statistic | /?path=/docs/ghost-basketball-organisms-leadercard--docs |
leader-card-header |
Atom | The head of a LeaderCard and of a StatCard | /?path=/docs/ghost-basketball-atoms-leadercardheader--docs |
leader-card-row |
Atom | One leader in a LeaderCard | /?path=/docs/ghost-basketball-atoms-leadercardrow--docs |
stat-card |
Molecule | A LeaderCard header on a card of its own | /?path=/docs/ghost-basketball-molecules-statcard--docs |
Shared
Used across the package.
| Component | Tier | What it is | Storybook |
|---|---|---|---|
dialog |
Organism | The data overlays' dialog (a sheet below md) |
/?path=/docs/ghost-basketball-organisms-dialog--docs |
page-skeleton |
Template | What a data page shows while its engine reads are in flight (code-only) | /?path=/docs/ghost-basketball-templates-pageskeleton--docs |