94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { TeamsPanel } from "./TeamsPanel";
|
|
|
|
const meta: Meta<typeof TeamsPanel> = {
|
|
title: "League/TeamsPanel",
|
|
component: TeamsPanel,
|
|
parameters: {
|
|
layout: "padded",
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof TeamsPanel>;
|
|
|
|
const teams = [
|
|
{ id: "t1", name: "Lightning Wolves", ownerId: "u1" },
|
|
{ id: "t2", name: "Shadow Hawks", ownerId: "u2" },
|
|
{ id: "t3", name: "Iron Eagles", ownerId: "u3" },
|
|
{ id: "t4", name: "Cyber Foxes", ownerId: null },
|
|
{ id: "t5", name: "Neon Tigers", ownerId: null },
|
|
{ id: "t6", name: "Phantom Sharks", ownerId: null },
|
|
{ id: "t7", name: "Crimson Tide FC", ownerId: null },
|
|
{ id: "t8", name: "Arctic Wolves", ownerId: null },
|
|
];
|
|
|
|
const ownerMap = {
|
|
u1: "alice",
|
|
u2: "bob",
|
|
u3: "carol",
|
|
};
|
|
|
|
const draftSlots = teams.map((t) => ({ team: { id: t.id } }));
|
|
|
|
// No draft order: only show claimed teams + progress bar
|
|
export const NoOrderPartialFill: Story = {
|
|
name: "No order — partial fill",
|
|
args: {
|
|
teams,
|
|
currentUserId: "u1",
|
|
ownerMap,
|
|
draftSlots: [],
|
|
},
|
|
};
|
|
|
|
export const NoOrderFull: Story = {
|
|
name: "No order — league full",
|
|
args: {
|
|
teams: teams.map((t, i) => ({ ...t, ownerId: `u${i + 1}` })),
|
|
currentUserId: "u1",
|
|
ownerMap: Object.fromEntries(teams.map((_, i) => [`u${i + 1}`, `user${i + 1}`])),
|
|
draftSlots: [],
|
|
},
|
|
};
|
|
|
|
// Draft order set: show all teams sorted, with position numbers
|
|
export const OrderSetPartialFill: Story = {
|
|
name: "Draft order set — partial fill (progress bar shown)",
|
|
args: {
|
|
teams,
|
|
currentUserId: "u1",
|
|
ownerMap,
|
|
draftSlots,
|
|
},
|
|
};
|
|
|
|
export const OrderSetFull: Story = {
|
|
name: "Draft order set — league full (no progress bar)",
|
|
args: {
|
|
teams: teams.map((t, i) => ({ ...t, ownerId: `u${i + 1}` })),
|
|
currentUserId: "u1",
|
|
ownerMap: Object.fromEntries(teams.map((_, i) => [`u${i + 1}`, `user${i + 1}`])),
|
|
draftSlots,
|
|
},
|
|
};
|
|
|
|
export const YourTeamHighlighted: Story = {
|
|
name: "Your team highlighted (pick 4)",
|
|
args: {
|
|
teams,
|
|
currentUserId: "u3",
|
|
ownerMap,
|
|
draftSlots,
|
|
},
|
|
};
|
|
|
|
export const NoOwnerNames: Story = {
|
|
name: "No owner names resolved",
|
|
args: {
|
|
teams,
|
|
currentUserId: null,
|
|
ownerMap: {},
|
|
draftSlots,
|
|
},
|
|
};
|