refactor: move competition pages into containers

.gitignore

@@ -25,3 +25,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 storybook-static
+
+.cache

.storybook/main.ts

@@ -1,5 +1,6 @@
 import ViteYaml from '@modyfi/vite-plugin-yaml';
 import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'node:path';
 import { mergeConfig } from 'vite';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 
@@ -20,6 +21,11 @@ const config: StorybookConfig = {
   viteFinal: async (config) =>
     mergeConfig(config, {
       plugins: [viteTsconfigPaths(), ViteYaml()],
+      resolve: {
+        alias: {
+          'virtual:pwa-register': path.resolve(__dirname, './mocks/pwa-register.ts'),
+        },
+      },
       define: {
         __GIT_COMMIT__: JSON.stringify('storybook'),
         __GIT_TAG__: JSON.stringify(''),

.storybook/mocks/pwa-register.ts

@@ -0,0 +1,8 @@
+type RegisterSWOptions = {
+  onNeedRefresh?: () => void;
+  onOfflineReady?: () => void;
+};
+
+export function registerSW(_options?: RegisterSWOptions) {
+  return async (_reloadPage?: boolean) => {};
+}

.storybook/preview.tsx

@@ -3,6 +3,33 @@ import { MemoryRouter } from 'react-router-dom';
 import '../src/i18n';
 import '../src/styles/index.scss';
 
+const mobileViewports = {
+  androidTypical: {
+    name: 'Android Typical',
+    styles: {
+      width: '360px',
+      height: '800px',
+    },
+    type: 'mobile',
+  },
+  iphoneModern: {
+    name: 'iPhone Modern',
+    styles: {
+      width: '393px',
+      height: '852px',
+    },
+    type: 'mobile',
+  },
+  phoneLegacy: {
+    name: 'Phone 2016',
+    styles: {
+      width: '375px',
+      height: '667px',
+    },
+    type: 'mobile',
+  },
+};
+
 const preview: Preview = {
   decorators: [
     (Story) => (
@@ -23,7 +50,8 @@ const preview: Preview = {
     },
     layout: 'centered',
     viewport: {
-      defaultViewport: 'mobile1',
+      defaultViewport: 'androidTypical',
+      options: mobileViewports,
     },
   },
 };

src/components/ActivityRow/ActivityRow.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { storybookCompetitionFixture } from '@/storybook/competitionFixtures';
+import { ActivityRow } from './ActivityRow';
+
+const mainRoom = storybookCompetitionFixture.schedule.venues[0].rooms[0];
+const stageActivity = mainRoom.activities[0].childActivities[0];
+const otherActivity = storybookCompetitionFixture.schedule.venues[0].rooms[1].activities[1];
+
+const meta = {
+  title: 'Components/Competition/ActivityRow',
+  component: ActivityRow,
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-2xl bg-panel">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActivityRow>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithStage: Story = {
+  args: {
+    activity: stageActivity,
+    competitionId: storybookCompetitionFixture.id,
+    stage: {
+      name: 'Blue Stage',
+      color: '#3b82f6',
+    },
+    timeZone: 'America/Los_Angeles',
+  },
+};
+
+export const WithoutStage: Story = {
+  args: {
+    activity: otherActivity,
+    competitionId: storybookCompetitionFixture.id,
+    timeZone: 'America/Los_Angeles',
+    showRoom: false,
+  },
+};

src/components/ActivityRow/ActivityRow.tsx

@@ -1,22 +1,31 @@
 import { Activity, Room, Venue } from '@wca/helpers';
 import classNames from 'classnames';
 import { useMemo } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Stage } from '@/extensions/org.cubingusa.natshelper.v1/types';
 import { useNow } from '@/hooks/useNow';
 import { activityCodeToName } from '@/lib/activityCodes';
+import { LinkRenderer } from '@/lib/linkRenderer';
 import { formatTimeRange } from '@/lib/time';
 import { RoomPill } from '../Pill';
 
 interface ActivityRowProps {
   activity: Activity;
+  competitionId: string;
   stage?: Pick<Stage | Room, 'name' | 'color'>;
   timeZone: Venue['timezone'];
   showRoom?: boolean;
+  LinkComponent?: LinkRenderer;
 }
 
-export function ActivityRow({ activity, stage, timeZone, showRoom = true }: ActivityRowProps) {
-  const { competitionId } = useParams();
+export function ActivityRow({
+  activity,
+  competitionId,
+  stage,
+  timeZone,
+  showRoom = true,
+  LinkComponent = Link,
+}: ActivityRowProps) {
   const now = useNow();
 
   const isOver = useMemo(
@@ -28,7 +37,7 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
     : activityCodeToName(activity.activityCode);
 
   return (
-    <Link
+    <LinkComponent
       key={activity.id}
       className={classNames(
         'flex flex-col w-full p-2 type-body even:table-bg-row-alt hover:table-bg-row-hover',
@@ -50,6 +59,6 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
         )}
         <span>{formatTimeRange(activity.startTime, activity.endTime, 5, timeZone)}</span>
       </span>
-    </Link>
+    </LinkComponent>
   );
 }

src/components/AppUpdatePrompt/AppUpdatePrompt.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppUpdatePrompt } from './AppUpdatePrompt';
 
 const meta = {
-  title: 'Components/AppUpdatePrompt',
+  title: 'Components/App/AppUpdatePrompt',
   component: AppUpdatePrompt,
   args: {
     onUpdate: () => {},

src/components/AssignmentCodeCell/AssignmentCodeCell.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AssignmentCodeCell } from './AssignmentCodeCell';
+
+const meta = {
+  title: 'Components/Competition/AssignmentCodeCell',
+  component: AssignmentCodeCell,
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-xl bg-panel p-4">
+        <table className="w-full">
+          <tbody>
+            <tr>
+              <Story />
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof AssignmentCodeCell>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Competitor: Story = {
+  args: {
+    assignmentCode: 'competitor',
+  },
+};
+
+export const Verb: Story = {
+  args: {
+    assignmentCode: 'staff-judge',
+    grammar: 'verb',
+  },
+};
+
+export const Letter: Story = {
+  args: {
+    assignmentCode: 'staff-scrambler',
+    letter: true,
+  },
+};
+
+export const BorderedCount: Story = {
+  args: {
+    as: 'div',
+    assignmentCode: 'staff-runner',
+    border: true,
+    count: 4,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-xl bg-panel p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

src/components/AssignmentLabel/AssignmentLabel.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AssignmentLabel } from './AssignmentLabel';
+
+const meta = {
+  title: 'Components/Competition/AssignmentLabel',
+  component: AssignmentLabel,
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof AssignmentLabel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Competitor: Story = {
+  args: {
+    assignmentCode: 'competitor',
+  },
+};
+
+export const Judge: Story = {
+  args: {
+    assignmentCode: 'staff-judge',
+  },
+};

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const meta = {
+  title: 'Components/Competition/Breadcrumbs',
+  component: Breadcrumbs,
+  decorators: [
+    (Story) => (
+      <div className="bg-panel p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LinkedTrail: Story = {
+  args: {
+    breadcrumbs: [
+      {
+        label: '3x3x3 Cube, Round 1',
+        href: '/competitions/SeattleSummerOpen2026/events/333-r1',
+      },
+      {
+        label: 'Group 1',
+      },
+    ],
+  },
+};
+
+export const MultipleLinks: Story = {
+  args: {
+    breadcrumbs: [
+      {
+        label: 'Schedule',
+        href: '/competitions/SeattleSummerOpen2026/activities',
+      },
+      {
+        label: 'Main Stage',
+        href: '/competitions/SeattleSummerOpen2026/rooms/10',
+      },
+      {
+        label: '3x3x3 Cube, Round 1',
+      },
+    ],
+  },
+};

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import { LinkRenderer } from '@/lib/linkRenderer';
 import { BreadcrumbPill, PillProps } from '../Pill';
 
 export type Breadcrumb =
@@ -15,16 +16,17 @@ export type Breadcrumb =
 
 export interface BreadcrumbsProps {
   breadcrumbs: Breadcrumb[];
+  LinkComponent?: LinkRenderer;
 }
 
-export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({ breadcrumbs, LinkComponent = Link }: BreadcrumbsProps) => {
   return (
     <div className="flex items-center space-x-1">
       {breadcrumbs.map(({ label, ...breadcrumb }, index) => (
         <Fragment key={label}>
           {index > 0 && <span className="text-muted">·</span>}
           {'href' in breadcrumb ? (
-            <Link to={breadcrumb.href}>
+            <LinkComponent to={breadcrumb.href}>
               <BreadcrumbPill
                 {...breadcrumb.pillProps}
                 className={classNames(
@@ -33,7 +35,7 @@ export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
                 )}>
                 {label}
               </BreadcrumbPill>
-            </Link>
+            </LinkComponent>
           ) : (
             <span key={label}>{label}</span>
           )}