import type { Meta, StoryObj } from "@storybook/react-vite"; import { CommissionersPanel } from "./CommissionersPanel"; import type { AuditLogEntry } from "~/models/audit-log"; const meta: Meta = { title: "League/CommissionersPanel", component: CommissionersPanel, parameters: { layout: "padded", }, args: { auditLogUrl: "/leagues/league-abc-123/audit-log", currentUserId: "user-alice", }, }; export default meta; type Story = StoryObj; // ─── Fixtures ───────────────────────────────────────────────────────────────── const commissioners = [ { id: "c1", userId: "user-alice" }, { id: "c2", userId: "user-bob" }, ]; const commissionerMap: Record = { "user-alice": "Alice Johnson", "user-bob": "Bob Smith", }; const teams = [ { id: "t1", ownerId: "user-alice" }, { id: "t2", ownerId: "user-bob" }, { id: "t3", ownerId: "user-carol" }, { id: "t4", ownerId: null }, ]; const activityEntries: AuditLogEntry[] = [ { id: "log-1", seasonId: "season-1", leagueId: "league-abc-123", actorClerkId: "user-alice", actorDisplayName: "Alice Johnson", action: "draft_order_randomized", affectedTeamIds: null, details: null, createdAt: new Date("2026-04-13T10:30:00Z"), }, { id: "log-2", seasonId: "season-1", leagueId: "league-abc-123", actorClerkId: "user-alice", actorDisplayName: "Alice Johnson", action: "draft_settings_changed", affectedTeamIds: null, details: { changedFields: ["draftRounds", "draftTimerMode"] }, createdAt: new Date("2026-04-12T18:15:00Z"), }, { id: "log-3", seasonId: "season-1", leagueId: "league-abc-123", actorClerkId: "user-bob", actorDisplayName: "Bob Smith", action: "league_settings_changed", affectedTeamIds: null, details: { changedFields: ["name"] }, createdAt: new Date("2026-04-11T09:00:00Z"), }, ]; // ─── Stories ────────────────────────────────────────────────────────────────── export const Default: Story = { args: { commissioners, commissionerMap, teams, activityEntries, }, }; export const NoActivity: Story = { name: "No Recent Activity", args: { commissioners, commissionerMap, teams, activityEntries: [], }, }; export const SingleCommissioner: Story = { name: "Single Commissioner (is self, has team)", args: { commissioners: [{ id: "c1", userId: "user-alice" }], commissionerMap: { "user-alice": "Alice Johnson" }, teams, activityEntries, }, }; export const CommissionerWithoutTeam: Story = { name: "Commissioner Without a Team", args: { commissioners: [ { id: "c1", userId: "user-alice" }, { id: "c2", userId: "user-nomatch" }, ], commissionerMap: { "user-alice": "Alice Johnson", "user-nomatch": "Charlie (no team)", }, teams, activityEntries: [], }, }; export const LongNames: Story = { name: "Long Commissioner Names (overflow test)", args: { commissioners: [ { id: "c1", userId: "user-alice" }, { id: "c2", userId: "user-long" }, ], commissionerMap: { "user-alice": "Alice Johnson-Bartholomew-Richardson", "user-long": "Bartholomew Christopherson-Nightingale III", }, teams, activityEntries, }, }; export const ManyCommissioners: Story = { name: "Many Commissioners", args: { commissioners: [ { id: "c1", userId: "user-alice" }, { id: "c2", userId: "user-bob" }, { id: "c3", userId: "user-carol" }, { id: "c4", userId: "user-dave" }, ], commissionerMap: { "user-alice": "Alice Johnson", "user-bob": "Bob Smith", "user-carol": "Carol Williams", "user-dave": "Dave Martinez", }, teams: [ { id: "t1", ownerId: "user-alice" }, { id: "t2", ownerId: "user-bob" }, { id: "t3", ownerId: "user-carol" }, // dave has no team ], activityEntries, }, }; export const NotSelf: Story = { name: "Viewer is not a commissioner", args: { commissioners, commissionerMap, teams, activityEntries, currentUserId: "user-carol", }, };