* 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>
42 lines
1.1 KiB
TypeScript
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",
|
|
},
|
|
};
|