brackt/app/components/league/SportIcon.stories.tsx
Chris Parsons e201ecd28a
Extract reusable league wizard components; wire settings page (#350)
* Extract reusable league wizard components; wire settings page (#103)

Extracts 9 domain components from new.tsx and $leagueId.settings.tsx into
app/components/league/ (each with a Storybook story), consolidates wizard
form-building into wizard-state.ts, and updates the settings page to use
the shared components instead of hand-rolled duplicates. new.tsx shrinks
from ~2000 → ~1280 lines.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix sports-season test: add participants to mock data

findDraftableSportsSeasons now returns participantCount, which requires
participants in the mock db response.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix sports-season test: loosen makeMockDb type to Record<string, unknown>[]

typeof mockSeasons became too strict after adding participants to the mock
data, breaking inline arrays in other tests that don't include participants.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 22:24:13 -07:00

42 lines
1.1 KiB
TypeScript

import type { Meta, StoryObj } from "@storybook/react-vite";
import { SportIcon } from "./SportIcon";
const meta: Meta<typeof SportIcon> = {
title: "League/SportIcon",
component: SportIcon,
parameters: { layout: "centered" },
};
export default meta;
type Story = StoryObj<typeof SportIcon>;
// Icons are uploaded at runtime via the admin panel and are not committed to the
// repo, so we use a data-URI placeholder here instead of a real file path.
const PLACEHOLDER_SVG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234f46e5'/%3E%3C/svg%3E";
export const WithIcon: Story = {
args: {
sport: { name: "NBA", iconUrl: PLACEHOLDER_SVG },
},
};
export const Fallback: Story = {
args: {
sport: { name: "Unknown Sport", iconUrl: null },
},
};
export const SmallWithIcon: Story = {
args: {
sport: { name: "NFL", iconUrl: PLACEHOLDER_SVG },
size: "sm",
},
};
export const SmallFallback: Story = {
args: {
sport: { name: "Unknown Sport", iconUrl: null },
size: "sm",
},
};