@@ -345,7 +352,7 @@ export function EventActivity({ competitionId, activity, persons }: EventGroupPr
return (a.seedRank || 999999999) - (b.seedRank || 999999999);
})
.map((person) => (
-
@@ -356,7 +363,7 @@ export function EventActivity({ competitionId, activity, persons }: EventGroupPr
{stationNumber('competitor')(person)}
)}
-
+
))}
@@ -365,6 +372,7 @@ export function EventActivity({ competitionId, activity, persons }: EventGroupPr
diff --git a/src/pages/Competition/Schedule/PeopleList.tsx b/src/pages/Competition/Schedule/PeopleList.tsx
index c763ab1..d939e81 100644
--- a/src/pages/Competition/Schedule/PeopleList.tsx
+++ b/src/pages/Competition/Schedule/PeopleList.tsx
@@ -6,18 +6,21 @@ import { Link } from 'react-router-dom';
import { getStationNumber } from '@/lib/activities';
import { AssignmentCodeRank } from '@/lib/assignments';
import { getAssignmentColorClasses } from '@/lib/colors';
+import { LinkRenderer } from '@/lib/linkRenderer';
import { byName } from '@/lib/utils';
export interface PeopleListProps {
competitionId: string;
activity: Activity;
peopleByAssignmentCode: Record
;
+ LinkComponent?: LinkRenderer;
}
export const PeopleList = ({
competitionId,
activity,
peopleByAssignmentCode,
+ LinkComponent = Link,
}: PeopleListProps) => {
const { t } = useTranslation();
@@ -89,7 +92,7 @@ export const PeopleList = ({
return byName(a, b);
})
.map((person, index) => (
- {person.name}
{person.stationNumber}
-
+
))}
) : (
{people.sort(byName).map((person, index) => (
-
)}
diff --git a/src/pages/Competition/Schedule/Room.tsx b/src/pages/Competition/Schedule/Room.tsx
index 3ab3c32..eefd1a9 100644
--- a/src/pages/Competition/Schedule/Room.tsx
+++ b/src/pages/Competition/Schedule/Room.tsx
@@ -1,146 +1,14 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
import { Link, useParams } from 'react-router-dom';
-import { ActivityRow, Container } from '@/components';
-import { getAllChildActivities, getRoomData } from '@/lib/activities';
-import { formatToParts } from '@/lib/time';
-import { byDate } from '@/lib/utils';
-import { useWCIF } from '@/providers/WCIFProvider';
+import { CompetitionRoomContainer } from '@/containers/CompetitionRoom';
export function CompetitionRoom() {
- const { t } = useTranslation();
+ const { competitionId, roomId } = useParams<{ competitionId: string; roomId: string }>();
- const { wcif, setTitle } = useWCIF();
- const { roomId } = useParams();
-
- const venue = useMemo(
- () =>
- wcif?.schedule?.venues?.find((venue) =>
- venue.rooms.some((room) => room.id.toString() === roomId),
- ),
- [roomId, wcif?.schedule?.venues],
- );
-
- const room = useMemo(
- () => venue?.rooms?.find((room) => room.id.toString() === roomId),
- [roomId, venue?.rooms],
- );
-
- useEffect(() => {
- setTitle(room?.name || '');
- }, [room, setTitle]);
-
- const timeZone = venue?.timezone ?? wcif?.schedule.venues?.[0]?.timezone ?? '';
-
- const activities = useMemo(
- () =>
- room?.activities
- .flatMap((activity) =>
- activity?.childActivities?.length ? getAllChildActivities(activity) : activity,
- )
- .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()) || [],
- [room?.activities],
- );
-
- const scheduleDays = activities
- .map((activity) => {
- const venue =
- wcif?.schedule.venues?.find((v) =>
- v.rooms.some((r) =>
- r.activities.some(
- (a) => a.id === activity.id || a.childActivities?.some((ca) => ca.id === activity.id),
- ),
- ),
- ) || wcif?.schedule.venues?.[0];
-
- const dateTime = new Date(activity.startTime);
-
- return {
- approxDateTime: dateTime.getTime(),
- date: dateTime.toLocaleDateString(navigator.language, {
- weekday: 'long',
- year: 'numeric',
- month: 'numeric',
- day: 'numeric',
- timeZone: venue?.timezone,
- }),
- dateParts: formatToParts(dateTime),
- };
- })
- .filter((v, i, arr) => arr.findIndex(({ date }) => date === v.date) === i)
- .sort((a, b) => a.approxDateTime - b.approxDateTime);
-
- const activitiesWithParsedDate = activities
- .map((activity) => {
- const venue =
- wcif?.schedule.venues?.find((v) =>
- v.rooms.some((r) =>
- r.activities.some(
- (a) => a.id === activity.id || a.childActivities?.some((ca) => ca.id === activity.id),
- ),
- ),
- ) || wcif?.schedule.venues?.[0];
-
- const dateTime = new Date(activity.startTime);
-
- return {
- ...activity,
- date: dateTime.toLocaleDateString(navigator.language, {
- weekday: 'long',
- year: 'numeric',
- month: 'numeric',
- day: 'numeric',
- timeZone: venue?.timezone,
- }),
- };
- })
- .sort((a, b) => byDate(a, b));
-
- const getActivitiesByDate = useCallback(
- (date) => {
- return activitiesWithParsedDate.filter((a) => a.date === date);
- },
- [activitiesWithParsedDate],
- );
+ if (!competitionId || !roomId) {
+ return null;
+ }
return (
-
-
-
-
{room?.name}
- {venue?.name}
-
-
- {scheduleDays.map((day) => (
-
-
- {day.date}
-
-
- {getActivitiesByDate(day.date).map((activity) => {
- const stage = room && getRoomData(room, activity);
- return (
-
- );
- })}
-
-
- ))}
-
-
-
-
+
-
- {wcif?.schedule?.venues?.map((venue) => (
-
-
- {venue.name}
- {getLocalizedTimeZoneName(venue.timezone)}
-
-
- {venue.rooms.map((room) => (
-
-
-
{room.name}
-
-
- ))}
-
-
- ))}
-
- );
+ return
-
-
-
-
-
-
- {wcif &&
}
-
- );
+ return ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/pages/Competition/ScramblerSchedule/index.tsx b/src/pages/Competition/ScramblerSchedule/index.tsx
index 4ff7890..b665bdf 100644
--- a/src/pages/Competition/ScramblerSchedule/index.tsx
+++ b/src/pages/Competition/ScramblerSchedule/index.tsx
@@ -1,162 +1,11 @@
-import flatMap from 'lodash.flatmap';
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
-import { BreakableActivityName, Container, ErrorFallback } from '@/components';
-import { getAllActivities, getAllRoundActivities, getRooms } from '@/lib/activities';
-import { parseActivityCodeFlexible } from '@/lib/activityCodes';
-import { formatToWeekDay } from '@/lib/time';
-import { groupBy } from '@/lib/utils';
+import { CompetitionScramblerScheduleContainer } from '@/containers/CompetitionScramblerSchedule';
import { useWCIF } from '@/providers/WCIFProvider';
export default function ScramblerSchedule() {
- const { t } = useTranslation();
-
- const { wcif, setTitle } = useWCIF();
-
- useEffect(() => {
- setTitle(t('competition.scramblers.title'));
- }, [setTitle, t]);
-
- const _rooms = useMemo(() => (wcif ? getRooms(wcif) : []), [wcif]);
-
- const [roomSelector, setRoomSelector] = useState(_rooms?.[0]?.name);
-
- useEffect(() => {
- if (!_rooms.some((room) => room.name === roomSelector)) {
- setRoomSelector(_rooms?.[0]?.name);
- }
- }, [_rooms, roomSelector]);
-
- const _allRoundActivities = useMemo(
- () =>
- wcif
- ? getAllRoundActivities(wcif)
- .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
- .filter((activity) => activity.childActivities.length !== 0)
- .filter((activity) => activity.room?.name === roomSelector)
- : [],
- [roomSelector, wcif],
- );
- const _allActivities = useMemo(() => (wcif ? getAllActivities(wcif) : []), [wcif]);
-
- const getActivity = useCallback(
- (assignment) => _allActivities.find(({ id }) => id === assignment.activityId),
- [_allActivities],
- );
-
- const assignments = useMemo(
- () =>
- flatMap(wcif?.persons, (person) =>
- person.assignments
- .filter((assignment) => assignment.assignmentCode === 'staff-scrambler')
- .map((assignment) => ({
- ...assignment,
- personName: person.name,
- activity: getActivity(assignment),
- })),
- ),
- [getActivity, wcif?.persons],
- );
-
- const activitiesSplitAcrossDates = groupBy(
- _allRoundActivities.map((activity) => ({
- ...activity,
- date: formatToWeekDay(new Date(activity.startTime)) || '???',
- })),
- (x) => x.date,
- );
+ const { competitionId } = useWCIF();
return (
-
-
-
-
{t('competition.scramblers.rooms')}
-
- {_rooms.map((room) => (
-
setRoomSelector(room.name)}>
-
- {room.name}
-
-
- ))}
-
-
-
- {t('competition.scramblers.stage')}: {roomSelector}
-
-
-
-
-
- Event
- {t('competition.scramblers.scramblers')}
-
-
-
- {Object.entries(activitiesSplitAcrossDates).map(([date, activities]) => (
-
-
-
- {date}
-
-
- {activities.map((activity) => (
- <>
-
-
-
-
-
- {activity.childActivities.map((childActivity) => {
- const { groupNumber } = parseActivityCodeFlexible(
- childActivity.activityCode,
- );
-
- return (
- {`Group ${groupNumber}`}
-
- {assignments
- .filter((a) => a.activityId === childActivity.id)
- ?.sort((a, b) => a.personName.localeCompare(b.personName))
- .map(({ personName }) => personName)
- .join(', ')}
-
-
-
-
- );
- })}
-
-
- ))}
-
- ))}
-
-
-
+ ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/pages/Competition/Stats/index.tsx b/src/pages/Competition/Stats/index.tsx
index 008defa..6b763c9 100644
--- a/src/pages/Competition/Stats/index.tsx
+++ b/src/pages/Competition/Stats/index.tsx
@@ -1,52 +1,5 @@
-import { useEffect, useMemo } from 'react';
-import { Container } from '@/components/Container';
-import { useWCIF } from '@/providers/WCIFProvider';
-import { StatsBox } from './StatsBox';
+import { CompetitionStatsContainer } from '@/containers/CompetitionStats';
export default function Round() {
- const { wcif, setTitle } = useWCIF();
-
- useEffect(() => {
- setTitle(wcif?.name + ' Stats');
- }, [wcif, setTitle]);
-
- const eventCount = wcif?.events?.length || 0;
-
- const acceptedRegistrations = useMemo(
- () =>
- wcif?.persons?.filter(
- ({ registration }) => registration?.isCompeting && registration?.status === 'accepted',
- ),
- [wcif],
- );
-
- const acceptedRegistrationsCount = acceptedRegistrations?.length || 0;
-
- return (
-
-
-
-
- {wcif?.events?.map(({ id }) => (
-
- {
- acceptedRegistrations?.filter(({ registration }) =>
- registration?.eventIds.includes(id),
- )?.length
- }
-
- ))}
-
-
- );
+ return ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/pages/Competition/StreamSchedule/index.tsx b/src/pages/Competition/StreamSchedule/index.tsx
index c98039e..dfc4fb2 100644
--- a/src/pages/Competition/StreamSchedule/index.tsx
+++ b/src/pages/Competition/StreamSchedule/index.tsx
@@ -1,166 +1,9 @@
-import { parseActivityCode } from '@wca/helpers';
-import { useCallback, useEffect, Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
-import { DisclaimerText } from '@/components';
-import { getRoomData, streamActivities, streamPersonIds } from '@/lib/activities';
-import { formatDate, formatToParts } from '@/lib/time';
-import { roundTime } from '@/lib/utils';
+import { CompetitionStreamScheduleContainer } from '@/containers/CompetitionStreamSchedule';
import { useWCIF } from '@/providers/WCIFProvider';
-export const byDate = (
- a: { startTime: string } | undefined,
- b: { startTime: string } | undefined,
-) => {
- const aDate = a ? new Date(a.startTime).getTime() : Number.MAX_SAFE_INTEGER;
- const bDate = b ? new Date(b.startTime).getTime() : Number.MAX_SAFE_INTEGER;
- return aDate - bDate;
-};
-
export default function CompetitionStreamSchedule() {
- const { t } = useTranslation();
-
- const { wcif, setTitle } = useWCIF();
-
- useEffect(() => {
- if (wcif) {
- setTitle(t('competition.streamSchedule.title'));
- }
- }, [wcif, setTitle, t]);
-
- const activities = wcif ? streamActivities(wcif) : [];
-
- const getPersonById = useCallback(
- (personId) => {
- return wcif?.persons.find(({ wcaUserId }) => wcaUserId === personId);
- },
- [wcif],
- );
-
- const activitiesWithParsedDate = activities
- .map((a) => ({
- ...a,
- date: formatDate(new Date(a.startTime)),
- }))
- .sort(byDate);
-
- const getActivitiesByDate = useCallback(
- (date) => {
- return activitiesWithParsedDate.filter((a) => a.date === date);
- },
- [activitiesWithParsedDate],
- );
-
- const scheduleDays = activities
- .map((a) => {
- const dateTime = new Date(a.startTime);
- return {
- approxDateTime: dateTime.getTime(),
- date: formatDate(dateTime) || 'foo',
- dateParts: formatToParts(dateTime),
- };
- })
- .filter((v, i, arr) => arr.findIndex(({ date }) => date === v.date) === i)
- .sort((a, b) => a.approxDateTime - b.approxDateTime);
-
- if (!wcif) {
- return Loading...
;
- }
-
- const renderActivities = () => (
- <>
- {t('competition.streamSchedule.subtitle')}
-
-
-
-
- {t('competition.streamSchedule.time')}
- {t('competition.streamSchedule.event')}
- {t('competition.streamSchedule.round')}
- {t('competition.streamSchedule.group')}
- {t('competition.streamSchedule.stage')}
-
- {t('competition.streamSchedule.featuredCompetitors')}
-
-
-
-
- {scheduleDays.map(({ date, dateParts }) => (
-
-
-
- {dateParts.find((i) => i.type === 'weekday')?.value || date}
-
-
- {getActivitiesByDate(date)
- .sort(byDate)
- .map((activity) => {
- const { eventId, roundNumber, groupNumber } = parseActivityCode(
- activity.activityCode,
- );
-
- const venue = wcif.schedule.venues?.find((v) =>
- v.rooms.some((r) => r.id === activity?.parent?.room?.id),
- );
- const timeZone = venue?.timezone;
-
- const room = activity?.room || activity?.parent?.room;
- const roomData = room && getRoomData(room, activity);
-
- const startTime = roundTime(
- new Date(activity?.startTime || 0),
- 5,
- ).toLocaleTimeString([], {
- hour: '2-digit',
- minute: '2-digit',
- timeZone,
- });
-
- return (
- {startTime}
-
-
- {roundNumber}
- {groupNumber || '*'}
-
-
- {roomData?.name}
-
-
-
- {streamPersonIds(activity)
- .map(getPersonById)
- .filter((person) => !!person)
- .map((person) => (
- {person!.name}
- ))}
-
-
- );
- })}
-
- ))}
-
-
-
-
-
+ const { competitionId } = useWCIF();
- {activities.length > 0 ? renderActivities() :
No Live Stream information
}
-
;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const LoggedOut: Story = {
+ decorators: [
+ makeAppContainerDecorator({
+ currentUser: null,
+ }),
+ makeRouteDecorator({
+ initialPath: '/',
+ routePath: '/',
+ }),
+ ],
+};
diff --git a/src/pages/Settings/Settings.stories.tsx b/src/pages/Settings/Settings.stories.tsx
new file mode 100644
index 0000000..79c17e4
--- /dev/null
+++ b/src/pages/Settings/Settings.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { makeAppContainerDecorator } from '@/storybook/appStorybook';
+import { makeRouteDecorator } from '@/storybook/competitionStorybook';
+import Settings from './index';
+
+const meta = {
+ title: 'Pages/App/Settings',
+ component: Settings,
+ decorators: [
+ makeAppContainerDecorator(),
+ makeRouteDecorator({
+ initialPath: '/settings',
+ routePath: '/settings',
+ }),
+ ],
+ parameters: {
+ layout: 'fullscreen',
+ },
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/pages/Support/Support.stories.tsx b/src/pages/Support/Support.stories.tsx
index aeb8ead..d222898 100644
--- a/src/pages/Support/Support.stories.tsx
+++ b/src/pages/Support/Support.stories.tsx
@@ -1,14 +1,19 @@
import type { Meta, StoryObj } from '@storybook/react';
-import Support from './index';
+import { makeAppContainerDecorator } from '@/storybook/appStorybook';
+import { makeRouteDecorator } from '@/storybook/competitionStorybook';
+import SupportPage from './index';
const meta = {
- title: 'Pages/Support',
- component: Support,
- parameters: {
- layout: 'fullscreen',
- },
- tags: ['autodocs'],
-} satisfies Meta;
+ title: 'Pages/App/Support',
+ component: SupportPage,
+ decorators: [
+ makeAppContainerDecorator(),
+ makeRouteDecorator({
+ initialPath: '/support',
+ routePath: '/support',
+ }),
+ ],
+} satisfies Meta;
export default meta;
diff --git a/src/pages/Support/index.tsx b/src/pages/Support/index.tsx
index 51eb153..e102939 100644
--- a/src/pages/Support/index.tsx
+++ b/src/pages/Support/index.tsx
@@ -1,30 +1,5 @@
-import { useEffect } from 'react';
-import { Container } from '@/components/Container';
+import { SupportContainer } from '@/containers/Support';
export default function Support() {
- useEffect(() => {
- document.title = 'Support - Competition Groups';
- }, []);
-
- return (
-
-
-
-
Thanks for being a user of Competition Groups!
-
- This website is a passion project by Cailyn Sinclair.
-
-
-
-
- );
+ return ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/pages/UserLogin/UserLogin.stories.tsx b/src/pages/UserLogin/UserLogin.stories.tsx
new file mode 100644
index 0000000..9f93726
--- /dev/null
+++ b/src/pages/UserLogin/UserLogin.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { makeAppContainerDecorator } from '@/storybook/appStorybook';
+import { makeRouteDecorator } from '@/storybook/competitionStorybook';
+import UserLogin from './index';
+
+const meta = {
+ title: 'Pages/App/UserLogin',
+ component: UserLogin,
+ decorators: [
+ makeAppContainerDecorator(),
+ makeRouteDecorator({
+ initialPath: '/users/1001',
+ routePath: '/users/:userId',
+ }),
+ ],
+ parameters: {
+ layout: 'fullscreen',
+ },
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/storybook/appStorybook.tsx b/src/storybook/appStorybook.tsx
new file mode 100644
index 0000000..4ce1928
--- /dev/null
+++ b/src/storybook/appStorybook.tsx
@@ -0,0 +1,284 @@
+import { gql } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import type { Decorator } from '@storybook/react';
+import { InfiniteData, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useMemo } from 'react';
+import { AppContext } from '@/providers/AppProvider';
+import { AuthContext } from '@/providers/AuthProvider';
+import { UserSettingsContext } from '@/providers/UserSettingsProvider/UserSettingsContext';
+
+const competitionsQueryDocument = gql`
+ query GetCompetitions {
+ competitions {
+ id
+ name
+ startDate
+ endDate
+ country
+ __typename
+ }
+ }
+`;
+
+interface AppStorybookOptions {
+ currentUser?: User | null;
+ online?: boolean;
+ pinnedCompetitions?: ApiCompetition[];
+ competitionDetails?: ApiCompetition[];
+ userCompetitions?: {
+ upcoming_competitions: ApiCompetition[];
+ ongoing_competitions: ApiCompetition[];
+ };
+ notifyCompetitions?: {
+ id: string;
+ name: string;
+ startDate: string;
+ endDate: string;
+ country: string;
+ __typename?: string;
+ }[];
+ upcomingCompetitionsPages?: CondensedApiCompetiton[][];
+}
+
+type AppStorybookParameters = AppStorybookOptions;
+
+const buildStorybookQueryClient = ({
+ competitionDetails,
+ currentUser,
+ userCompetitions,
+ upcomingCompetitionsPages,
+}: AppStorybookOptions) => {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ });
+
+ if (currentUser && userCompetitions) {
+ queryClient.setQueryData(['userCompetitions'], {
+ user: currentUser,
+ upcoming_competitions: userCompetitions.upcoming_competitions,
+ ongoing_competitions: userCompetitions.ongoing_competitions,
+ });
+ }
+
+ competitionDetails?.forEach((competition) => {
+ queryClient.setQueryData(['competition', competition.id], competition);
+ });
+
+ if (upcomingCompetitionsPages) {
+ queryClient.setQueryData(['upcomingCompetitions'], {
+ pages: upcomingCompetitionsPages,
+ pageParams: upcomingCompetitionsPages.map((_, index) => index + 1),
+ } satisfies InfiniteData);
+ }
+
+ return queryClient;
+};
+
+function AppStorybookProviders({
+ currentUser,
+ online,
+ pinnedCompetitions,
+ competitionDetails,
+ userCompetitions,
+ notifyCompetitions,
+ upcomingCompetitionsPages,
+ children,
+}: AppStorybookOptions & { children: ReactNode }) {
+ const queryClient = useMemo(
+ () =>
+ buildStorybookQueryClient({
+ competitionDetails,
+ currentUser,
+ userCompetitions,
+ upcomingCompetitionsPages,
+ }),
+ [competitionDetails, currentUser, upcomingCompetitionsPages, userCompetitions],
+ );
+
+ const competitionMocks = useMemo(
+ () => [
+ {
+ request: {
+ query: competitionsQueryDocument,
+ },
+ result: {
+ data: {
+ competitions: notifyCompetitions,
+ },
+ },
+ },
+ ],
+ [notifyCompetitions],
+ );
+
+ window.localStorage.setItem('pinnedCompetitions', JSON.stringify(pinnedCompetitions || []));
+ window.localStorage.setItem('user', JSON.stringify(currentUser || null));
+ window.localStorage.setItem(
+ 'my.upcoming_competitions',
+ JSON.stringify(userCompetitions?.upcoming_competitions || []),
+ );
+ window.localStorage.setItem(
+ 'my.ongoing_competitions',
+ JSON.stringify(userCompetitions?.ongoing_competitions || []),
+ );
+
+ return (
+
+
+
+ {},
+ signIn: () => {},
+ signOut: () => {},
+ signInAs: () => {},
+ }}>
+ {},
+ effectiveTheme: 'light',
+ }}>
+ {children}
+
+
+
+
+
+ );
+}
+
+export const storybookAppUser: User = {
+ id: 1001,
+ name: 'Blake Thompson',
+ email: '',
+ wca_id: '2010THOM03',
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179.jpeg',
+ thumb_url:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179_thumb.jpeg',
+ },
+ delegate_status: 'delegate',
+};
+
+export const storybookPinnedCompetitions: ApiCompetition[] = [
+ {
+ id: 'SeattleSummerOpen2026',
+ name: 'Seattle Summer Open 2026',
+ short_name: 'Seattle Summer Open 2026',
+ city: 'Seattle, Washington',
+ country_iso2: 'US',
+ start_date: '2026-05-03',
+ end_date: '2026-05-04',
+ announced_at: '2026-01-15T00:00:00Z',
+ cancelled_at: '',
+ latitude_degrees: 47.6205,
+ longitude_degrees: -122.3493,
+ venue_address: '305 Harrison St',
+ venue_details: 'Main hall entrance is on the east side of the venue near Fisher Pavilion.',
+ website: 'https://www.worldcubeassociation.org/competitions/SeattleSummerOpen2026',
+ event_ids: ['333', '222'],
+ organizers: [],
+ delegates: [],
+ },
+];
+
+export const storybookUserCompetitions = {
+ upcoming_competitions: [
+ {
+ id: 'PortlandAutumn2026',
+ name: 'Portland Autumn 2026',
+ short_name: 'Portland Autumn 2026',
+ city: 'Portland, Oregon',
+ country_iso2: 'US',
+ start_date: '2026-10-10',
+ end_date: '2026-10-11',
+ announced_at: '2026-05-01T00:00:00Z',
+ cancelled_at: '',
+ latitude_degrees: 45.5152,
+ longitude_degrees: -122.6784,
+ venue_address: '777 NE Martin Luther King Jr Blvd',
+ venue_details: 'Hall B',
+ website: 'https://www.worldcubeassociation.org/competitions/PortlandAutumn2026',
+ event_ids: ['333', '222', '444'],
+ organizers: [],
+ delegates: [],
+ },
+ ],
+ ongoing_competitions: storybookPinnedCompetitions,
+};
+
+export const storybookNotifyCompetitions = [
+ {
+ id: 'SeattleSummerOpen2026',
+ name: 'Seattle Summer Open 2026',
+ startDate: '2026-05-03',
+ endDate: '2026-05-04',
+ country: 'US',
+ __typename: 'Competition',
+ },
+ {
+ id: 'PortlandAutumn2026',
+ name: 'Portland Autumn 2026',
+ startDate: '2026-10-10',
+ endDate: '2026-10-11',
+ country: 'US',
+ __typename: 'Competition',
+ },
+];
+
+export const storybookUpcomingCompetitionsPages: CondensedApiCompetiton[][] = [
+ [
+ {
+ id: 'TacomaSpring2026',
+ name: 'Tacoma Spring 2026',
+ short_name: 'Tacoma Spring 2026',
+ start_date: '2026-05-20',
+ end_date: '2026-05-21',
+ city: 'Tacoma, Washington',
+ country_iso2: 'US',
+ },
+ {
+ id: 'VancouverSummer2026',
+ name: 'Vancouver Summer 2026',
+ short_name: 'Vancouver Summer 2026',
+ start_date: '2026-06-11',
+ end_date: '2026-06-12',
+ city: 'Vancouver, British Columbia',
+ country_iso2: 'CA',
+ },
+ ],
+];
+
+export const makeAppContainerDecorator = ({
+ currentUser = storybookAppUser,
+ online = true,
+ pinnedCompetitions = storybookPinnedCompetitions,
+ competitionDetails = storybookPinnedCompetitions,
+ userCompetitions = storybookUserCompetitions,
+ notifyCompetitions = storybookNotifyCompetitions,
+ upcomingCompetitionsPages = storybookUpcomingCompetitionsPages,
+}: AppStorybookOptions = {}) =>
+ ((Story, context) => {
+ const parameters = context.parameters as AppStorybookParameters;
+
+ return (
+
+
+ );
+ }) satisfies Decorator;
diff --git a/src/storybook/competitionFixtures.ts b/src/storybook/competitionFixtures.ts
new file mode 100644
index 0000000..178d513
--- /dev/null
+++ b/src/storybook/competitionFixtures.ts
@@ -0,0 +1,732 @@
+import { Competition, Round } from '@wca/helpers';
+
+const cloneCompetition = (value: T): T => JSON.parse(JSON.stringify(value)) as T;
+
+const makeChildActivity = (
+ id: number,
+ activityCode: string,
+ name: string,
+ startTime: string,
+ endTime: string,
+ extensions: { id: string; data: Record }[] = [],
+) => ({
+ id,
+ activityCode,
+ name,
+ startTime,
+ endTime,
+ childActivities: [],
+ extensions,
+ scrambleSetId: null,
+});
+
+const mainRoomActivities = [
+ {
+ id: 100,
+ activityCode: '333-r1',
+ name: '3x3x3 Cube, Round 1',
+ startTime: '2026-05-03T16:00:00Z',
+ endTime: '2026-05-03T17:30:00Z',
+ childActivities: [
+ makeChildActivity(
+ 101,
+ '333-r1-g1',
+ '3x3x3 Cube, Round 1, Group 1',
+ '2026-05-03T16:00:00Z',
+ '2026-05-03T16:45:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ makeChildActivity(
+ 102,
+ '333-r1-g2',
+ '3x3x3 Cube, Round 1, Group 2',
+ '2026-05-03T16:45:00Z',
+ '2026-05-03T17:30:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ ],
+ extensions: [],
+ scrambleSetId: null,
+ },
+ {
+ id: 110,
+ activityCode: '333-r2',
+ name: '3x3x3 Cube, Round 2',
+ startTime: '2026-05-04T17:00:00Z',
+ endTime: '2026-05-04T18:00:00Z',
+ childActivities: [
+ makeChildActivity(
+ 111,
+ '333-r2-g1',
+ '3x3x3 Cube, Round 2, Group 1',
+ '2026-05-04T17:00:00Z',
+ '2026-05-04T17:30:00Z',
+ [
+ { id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } },
+ {
+ id: 'groupifier.ActivityConfig',
+ data: {
+ featuredCompetitorWcaUserIds: [1001, 1003],
+ },
+ },
+ ],
+ ),
+ makeChildActivity(
+ 112,
+ '333-r2-g2',
+ '3x3x3 Cube, Round 2, Group 2',
+ '2026-05-04T17:30:00Z',
+ '2026-05-04T18:00:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ ],
+ extensions: [],
+ scrambleSetId: null,
+ },
+ {
+ id: 120,
+ activityCode: '333-r3',
+ name: '3x3x3 Cube, Round 3',
+ startTime: '2026-05-04T19:00:00Z',
+ endTime: '2026-05-04T20:00:00Z',
+ childActivities: [
+ makeChildActivity(
+ 121,
+ '333-r3-g1',
+ '3x3x3 Cube, Round 3, Group 1',
+ '2026-05-04T19:00:00Z',
+ '2026-05-04T19:30:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ makeChildActivity(
+ 122,
+ '333-r3-g2',
+ '3x3x3 Cube, Round 3, Group 2',
+ '2026-05-04T19:30:00Z',
+ '2026-05-04T20:00:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ ],
+ extensions: [],
+ scrambleSetId: null,
+ },
+ {
+ id: 130,
+ activityCode: '222-r1',
+ name: '2x2x2 Cube, Round 1',
+ startTime: '2026-05-03T18:00:00Z',
+ endTime: '2026-05-03T19:00:00Z',
+ childActivities: [
+ makeChildActivity(
+ 131,
+ '222-r1-g1',
+ '2x2x2 Cube, Round 1, Group 1',
+ '2026-05-03T18:00:00Z',
+ '2026-05-03T18:30:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ makeChildActivity(
+ 132,
+ '222-r1-g2',
+ '2x2x2 Cube, Round 1, Group 2',
+ '2026-05-03T18:30:00Z',
+ '2026-05-03T19:00:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 1 } }],
+ ),
+ ],
+ extensions: [],
+ scrambleSetId: null,
+ },
+];
+
+const sideRoomActivities = [
+ {
+ id: 200,
+ activityCode: '333-r1',
+ name: '3x3x3 Cube, Round 1',
+ startTime: '2026-05-03T16:00:00Z',
+ endTime: '2026-05-03T17:30:00Z',
+ childActivities: [
+ makeChildActivity(
+ 201,
+ '333-r1-g1',
+ '3x3x3 Cube, Round 1, Group 1',
+ '2026-05-03T16:00:00Z',
+ '2026-05-03T16:45:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 2 } }],
+ ),
+ makeChildActivity(
+ 202,
+ '333-r1-g2',
+ '3x3x3 Cube, Round 1, Group 2',
+ '2026-05-03T16:45:00Z',
+ '2026-05-03T17:30:00Z',
+ [{ id: 'org.cubingusa.natshelper.v1.Group', data: { stageId: 2 } }],
+ ),
+ ],
+ extensions: [],
+ scrambleSetId: null,
+ },
+ {
+ id: 210,
+ activityCode: 'other-lunch',
+ name: 'Lunch',
+ startTime: '2026-05-04T18:00:00Z',
+ endTime: '2026-05-04T18:45:00Z',
+ childActivities: [],
+ extensions: [],
+ scrambleSetId: null,
+ },
+];
+
+const storybookPersons = [
+ {
+ registrantId: 1,
+ name: 'Blake Thompson',
+ countryIso2: 'US',
+ gender: 'm',
+ wcaId: '2010THOM03',
+ wcaUserId: 1001,
+ roles: [],
+ assignments: [
+ { activityId: 101, assignmentCode: 'competitor', stationNumber: 1 },
+ { activityId: 102, assignmentCode: 'staff-runner', stationNumber: null },
+ { activityId: 111, assignmentCode: 'staff-judge', stationNumber: 2 },
+ { activityId: 121, assignmentCode: 'competitor', stationNumber: 1 },
+ { activityId: 131, assignmentCode: 'competitor', stationNumber: 1 },
+ ],
+ personalBests: [
+ {
+ eventId: '333',
+ type: 'single',
+ best: 652,
+ worldRanking: 1820,
+ continentalRanking: 710,
+ nationalRanking: 215,
+ },
+ {
+ eventId: '333',
+ type: 'average',
+ best: 841,
+ worldRanking: 2410,
+ continentalRanking: 980,
+ nationalRanking: 301,
+ },
+ {
+ eventId: '222',
+ type: 'single',
+ best: 187,
+ worldRanking: 930,
+ continentalRanking: 302,
+ nationalRanking: 88,
+ },
+ {
+ eventId: '222',
+ type: 'average',
+ best: 259,
+ worldRanking: 1180,
+ continentalRanking: 415,
+ nationalRanking: 120,
+ },
+ ],
+ extensions: [],
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179.jpeg',
+ thumbUrl:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179_thumb.jpeg',
+ },
+ registration: {
+ status: 'accepted',
+ isCompeting: true,
+ eventIds: ['333', '222'],
+ },
+ },
+ {
+ registrantId: 2,
+ name: 'Nick Silvestri',
+ countryIso2: 'US',
+ gender: 'm',
+ wcaId: '2016SILV08',
+ wcaUserId: 1002,
+ roles: [],
+ assignments: [
+ { activityId: 102, assignmentCode: 'competitor', stationNumber: 2 },
+ { activityId: 101, assignmentCode: 'staff-judge', stationNumber: 1 },
+ { activityId: 111, assignmentCode: 'staff-scrambler', stationNumber: null },
+ { activityId: 132, assignmentCode: 'staff-scrambler', stationNumber: null },
+ ],
+ personalBests: [
+ {
+ eventId: '333',
+ type: 'single',
+ best: 701,
+ worldRanking: 2140,
+ continentalRanking: 880,
+ nationalRanking: 142,
+ },
+ {
+ eventId: '333',
+ type: 'average',
+ best: 910,
+ worldRanking: 2890,
+ continentalRanking: 1240,
+ nationalRanking: 201,
+ },
+ {
+ eventId: '222',
+ type: 'single',
+ best: 244,
+ worldRanking: 1520,
+ continentalRanking: 611,
+ nationalRanking: 102,
+ },
+ ],
+ extensions: [],
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/nsg38gkpoch8xiji3hodmrs672m4',
+ thumbUrl: 'https://avatars.worldcubeassociation.org/uge6fzvlpmz6c8ztn8ey5wi4i8uf',
+ },
+ registration: {
+ status: 'accepted',
+ isCompeting: true,
+ eventIds: ['333', '222'],
+ },
+ },
+ {
+ registrantId: 3,
+ name: 'Abdullah Gulab',
+ countryIso2: 'PK',
+ gender: 'm',
+ wcaId: '2014GULA02',
+ wcaUserId: 1003,
+ roles: [],
+ assignments: [
+ { activityId: 201, assignmentCode: 'competitor', stationNumber: 3 },
+ { activityId: 202, assignmentCode: 'staff-judge', stationNumber: 3 },
+ { activityId: 121, assignmentCode: 'competitor', stationNumber: 2 },
+ { activityId: 122, assignmentCode: 'staff-runner', stationNumber: null },
+ ],
+ personalBests: [
+ {
+ eventId: '333',
+ type: 'single',
+ best: 598,
+ worldRanking: 1210,
+ continentalRanking: 420,
+ nationalRanking: 58,
+ },
+ {
+ eventId: '333',
+ type: 'average',
+ best: 801,
+ worldRanking: 2010,
+ continentalRanking: 740,
+ nationalRanking: 102,
+ },
+ ],
+ extensions: [],
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2014GULA02/1649125122.jpg',
+ thumbUrl:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2014GULA02/1649125122_thumb.jpg',
+ },
+ registration: {
+ status: 'accepted',
+ isCompeting: true,
+ eventIds: ['333'],
+ },
+ },
+ {
+ registrantId: 4,
+ name: 'Diego Kim',
+ countryIso2: 'MX',
+ gender: 'm',
+ wcaId: '2026KIMD04',
+ wcaUserId: 1004,
+ roles: [],
+ assignments: [
+ { activityId: 201, assignmentCode: 'staff-runner', stationNumber: null },
+ { activityId: 202, assignmentCode: 'competitor', stationNumber: 4 },
+ { activityId: 131, assignmentCode: 'staff-scrambler', stationNumber: null },
+ { activityId: 112, assignmentCode: 'competitor', stationNumber: 5 },
+ ],
+ personalBests: [
+ {
+ eventId: '333',
+ type: 'single',
+ best: 845,
+ worldRanking: 3880,
+ continentalRanking: 1640,
+ nationalRanking: 244,
+ },
+ ],
+ extensions: [],
+ registration: {
+ status: 'accepted',
+ isCompeting: true,
+ eventIds: ['333', '222'],
+ },
+ },
+ {
+ registrantId: 5,
+ name: 'Eva Park',
+ countryIso2: 'AU',
+ gender: 'f',
+ wcaId: '2026PARK05',
+ wcaUserId: 1005,
+ roles: [],
+ assignments: [
+ { activityId: 111, assignmentCode: 'competitor', stationNumber: 4 },
+ { activityId: 112, assignmentCode: 'staff-judge', stationNumber: 5 },
+ { activityId: 121, assignmentCode: 'staff-runner', stationNumber: null },
+ { activityId: 122, assignmentCode: 'competitor', stationNumber: 6 },
+ ],
+ personalBests: [
+ {
+ eventId: '333',
+ type: 'single',
+ best: 630,
+ worldRanking: 1490,
+ continentalRanking: 88,
+ nationalRanking: 21,
+ },
+ {
+ eventId: '333',
+ type: 'average',
+ best: 830,
+ worldRanking: 2280,
+ continentalRanking: 131,
+ nationalRanking: 34,
+ },
+ ],
+ extensions: [],
+ registration: {
+ status: 'accepted',
+ isCompeting: true,
+ eventIds: ['333'],
+ },
+ },
+ {
+ registrantId: 6,
+ name: 'Nick Silvestri',
+ countryIso2: 'US',
+ gender: 'm',
+ wcaId: '2016SILV08',
+ wcaUserId: 9001,
+ roles: ['organizer', 'delegate'],
+ assignments: [
+ { activityId: 102, assignmentCode: 'staff-judge', stationNumber: null },
+ { activityId: 111, assignmentCode: 'staff-delegate', stationNumber: null },
+ ],
+ personalBests: [],
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/nsg38gkpoch8xiji3hodmrs672m4',
+ thumbUrl: 'https://avatars.worldcubeassociation.org/uge6fzvlpmz6c8ztn8ey5wi4i8uf',
+ },
+ registration: {
+ status: 'accepted',
+ isCompeting: false,
+ eventIds: [],
+ },
+ extensions: [
+ {
+ id: 'com.competitiongroups.worldsassignments',
+ data: {
+ assignments: [
+ {
+ staff: 'staff-lunch',
+ startTime: '2026-05-04T18:00:00Z',
+ endTime: '2026-05-04T18:45:00Z',
+ },
+ ],
+ },
+ },
+ ],
+ },
+];
+
+export const storybookCompetitionFixture = {
+ formatVersion: '1.1',
+ id: 'SeattleSummerOpen2026',
+ name: 'Seattle Summer Open 2026',
+ shortName: 'Seattle Summer Open 2026',
+ persons: storybookPersons,
+ competitorLimit: 120,
+ extensions: [],
+ registrationInfo: {
+ openTime: '2026-02-01T00:00:00Z',
+ closeTime: '2026-04-20T00:00:00Z',
+ baseEntryFee: 3000,
+ currencyCode: 'USD',
+ onTheSpotRegistration: false,
+ useWcaRegistration: true,
+ },
+ events: [
+ {
+ id: '333',
+ rounds: [
+ {
+ id: '333-r1',
+ format: 'a',
+ timeLimit: null,
+ cutoff: null,
+ advancementCondition: {
+ type: 'ranking',
+ level: 24,
+ },
+ results: [
+ { personId: 3, ranking: 1, best: 598, average: 801, attempts: [] },
+ { personId: 1, ranking: 2, best: 652, average: 841, attempts: [] },
+ { personId: 5, ranking: 3, best: 630, average: 830, attempts: [] },
+ { personId: 2, ranking: 4, best: 701, average: 910, attempts: [] },
+ ],
+ scrambleSetCount: 1,
+ scrambleSets: [],
+ extensions: [],
+ },
+ {
+ id: '333-r2',
+ format: 'a',
+ timeLimit: null,
+ cutoff: null,
+ advancementCondition: {
+ type: 'ranking',
+ level: 12,
+ },
+ results: [
+ { personId: 1, ranking: 1, best: 640, average: 820, attempts: [] },
+ { personId: 3, ranking: 2, best: 610, average: 828, attempts: [] },
+ { personId: 5, ranking: 3, best: 655, average: 844, attempts: [] },
+ ],
+ scrambleSetCount: 1,
+ scrambleSets: [],
+ extensions: [],
+ },
+ {
+ id: '333-r3',
+ format: 'a',
+ timeLimit: null,
+ cutoff: null,
+ advancementCondition: {
+ type: 'percent',
+ level: 50,
+ },
+ results: [],
+ scrambleSetCount: 1,
+ scrambleSets: [],
+ extensions: [],
+ },
+ ],
+ competitorLimit: null,
+ qualification: null,
+ extensions: [],
+ },
+ {
+ id: '222',
+ rounds: [
+ {
+ id: '222-r1',
+ format: 'a',
+ timeLimit: {
+ centiseconds: 3000,
+ cumulativeRoundIds: [],
+ },
+ cutoff: {
+ numberOfAttempts: 2,
+ attemptResult: 1200,
+ },
+ advancementCondition: {
+ type: 'ranking',
+ level: 16,
+ },
+ results: [
+ { personId: 1, ranking: 1, best: 187, average: 259, attempts: [] },
+ { personId: 2, ranking: 2, best: 244, average: 0, attempts: [] },
+ ],
+ scrambleSetCount: 1,
+ scrambleSets: [],
+ extensions: [],
+ },
+ ],
+ competitorLimit: null,
+ qualification: null,
+ extensions: [],
+ },
+ ],
+ schedule: {
+ numberOfDays: 2,
+ startDate: '2026-05-03',
+ venues: [
+ {
+ id: 1,
+ name: 'Seattle Center',
+ latitudeMicrodegrees: 0,
+ longitudeMicrodegrees: 0,
+ countryIso2: 'US',
+ timezone: 'America/Los_Angeles',
+ rooms: [
+ {
+ id: 10,
+ name: 'Main Stage',
+ color: '#3b82f6',
+ activities: mainRoomActivities,
+ extensions: [
+ {
+ id: 'org.cubingusa.natshelper.v1.Room',
+ data: {
+ stages: [
+ { id: 1, name: 'Blue Stage', color: '#3b82f6' },
+ { id: 2, name: 'Green Stage', color: '#10b981' },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ id: 11,
+ name: 'Side Stage',
+ color: '#10b981',
+ activities: sideRoomActivities,
+ extensions: [
+ {
+ id: 'org.cubingusa.natshelper.v1.Room',
+ data: {
+ stages: [
+ { id: 1, name: 'Blue Stage', color: '#3b82f6' },
+ { id: 2, name: 'Green Stage', color: '#10b981' },
+ ],
+ },
+ },
+ ],
+ },
+ ],
+ extensions: [],
+ },
+ ],
+ },
+} as unknown as Competition;
+
+export const storybookCompetitionApiFixture: ApiCompetition = {
+ id: 'SeattleSummerOpen2026',
+ name: 'Seattle Summer Open 2026',
+ short_name: 'Seattle Summer Open 2026',
+ city: 'Seattle, Washington',
+ country_iso2: 'US',
+ start_date: '2026-05-03',
+ end_date: '2026-05-04',
+ announced_at: '2026-01-15T00:00:00Z',
+ cancelled_at: '',
+ latitude_degrees: 47.6205,
+ longitude_degrees: -122.3493,
+ venue_address: '305 Harrison St',
+ venue_details: 'Main hall entrance is on the east side of the venue near Fisher Pavilion.',
+ website: 'https://www.worldcubeassociation.org/competitions/SeattleSummerOpen2026',
+ event_ids: ['333', '222'],
+ organizers: [
+ {
+ id: 1001,
+ name: 'Blake Thompson',
+ email: '',
+ wca_id: '2010THOM03',
+ avatar: {
+ thumb_url:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179_thumb.jpeg',
+ },
+ delegate_status: 'delegate',
+ },
+ ],
+ delegates: [
+ {
+ id: 1002,
+ name: 'Nick Silvestri',
+ email: '',
+ wca_id: '2016SILV08',
+ avatar: {
+ thumb_url: 'https://avatars.worldcubeassociation.org/uge6fzvlpmz6c8ztn8ey5wi4i8uf',
+ },
+ delegate_status: 'delegate',
+ },
+ {
+ id: 1003,
+ name: 'Abdullah Gulab',
+ email: '',
+ wca_id: '2014GULA02',
+ avatar: {
+ thumb_url:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2014GULA02/1649125122_thumb.jpg',
+ },
+ delegate_status: 'delegate',
+ },
+ ],
+};
+
+export const storybookCurrentUser: User = {
+ id: 1001,
+ name: 'Blake Thompson',
+ email: '',
+ wca_id: '2010THOM03',
+ avatar: {
+ url: 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179.jpeg',
+ thumb_url:
+ 'https://avatars.worldcubeassociation.org/uploads/user/avatar/2010THOM03/1526357179_thumb.jpeg',
+ },
+ delegate_status: 'delegate',
+};
+
+export const storybookOngoingActivitiesFixture = [
+ {
+ activityId: 101,
+ startTime: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
+ endTime: null,
+ },
+];
+
+export const makeStorybookEventCompetitionFixture = (eventId: string): Competition => {
+ const competition = cloneCompetition(storybookCompetitionFixture);
+ competition.events = competition.events.filter((event) => event.id === eventId);
+ competition.persons = competition.persons
+ .map((person) => ({
+ ...person,
+ assignments: person.assignments?.filter((assignment) =>
+ [...mainRoomActivities, ...sideRoomActivities]
+ .flatMap((activity) => [activity, ...activity.childActivities])
+ .filter((activity) => activity.activityCode.startsWith(eventId))
+ .some((activity) => activity.id === assignment.activityId),
+ ),
+ registration: person.registration
+ ? {
+ ...person.registration,
+ eventIds: person.registration.eventIds.filter((id) => id === eventId),
+ }
+ : person.registration,
+ personalBests: person.personalBests?.filter((pb) => pb.eventId === eventId) || [],
+ }))
+ .filter((person) => (person.assignments?.length || 0) > 0 || person.roles?.length);
+ return competition;
+};
+
+export const getStorybookRoundFixture = (roundId: string): Round => {
+ const round = storybookCompetitionFixture.events
+ .flatMap((event) => event.rounds)
+ .find((candidate) => candidate.id === roundId);
+
+ if (!round) {
+ throw new Error(`Round fixture not found for "${roundId}"`);
+ }
+
+ return cloneCompetition(round);
+};
+
+export const makeStorybookCompetitionFixtureWithRound = (
+ roundId: string,
+ updateRound: (round: Round) => Round,
+): Competition => {
+ const competition = cloneCompetition(storybookCompetitionFixture);
+
+ competition.events = competition.events.map((event) => ({
+ ...event,
+ rounds: event.rounds.map((round) => (round.id === roundId ? updateRound(round) : round)),
+ }));
+
+ return competition;
+};
diff --git a/src/storybook/competitionStorybook.tsx b/src/storybook/competitionStorybook.tsx
new file mode 100644
index 0000000..2853b3f
--- /dev/null
+++ b/src/storybook/competitionStorybook.tsx
@@ -0,0 +1,192 @@
+import { gql } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import type { Decorator } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Competition } from '@wca/helpers';
+import { ReactNode, useEffect, useMemo } from 'react';
+import { Route, Routes, useNavigate } from 'react-router-dom';
+import { AppContext } from '@/providers/AppProvider';
+import { AuthContext } from '@/providers/AuthProvider';
+import { WCIFContext } from '@/providers/WCIFProvider';
+import {
+ storybookCompetitionApiFixture,
+ storybookCompetitionFixture,
+ storybookCurrentUser,
+ storybookOngoingActivitiesFixture,
+} from './competitionFixtures';
+
+const activitiesQueryDocument = gql`
+ query Activities($competitionId: String!) {
+ activities(competitionId: $competitionId) {
+ activityId
+ startTime
+ endTime
+ }
+ }
+`;
+
+interface CompetitionStorybookOptions {
+ competition?: Competition;
+ competitionData?: ApiCompetition;
+ currentUser?: User | null;
+ ongoingActivities?: {
+ activityId: number;
+ startTime: string;
+ endTime: string | null;
+ }[];
+ pinnedPersons?: number[];
+}
+
+export interface CompetitionStorybookParameters extends CompetitionStorybookOptions {
+ competitionFixture?: Competition;
+}
+
+const createStorybookQueryClient = (competition: Competition, competitionData?: ApiCompetition) => {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ });
+
+ if (competitionData) {
+ queryClient.setQueryData(['competition', competition.id], competitionData);
+ }
+
+ queryClient.setQueryData(['wcif', competition.id], competition);
+
+ return queryClient;
+};
+
+const StorybookCompetitionProviders = ({
+ competition,
+ competitionData,
+ currentUser,
+ ongoingActivities,
+ pinnedPersons,
+ children,
+}: CompetitionStorybookOptions & { children: ReactNode }) => {
+ const queryClient = useMemo(
+ () => createStorybookQueryClient(competition!, competitionData),
+ [competition, competitionData],
+ );
+
+ const activitiesMocks = useMemo(
+ () => [
+ {
+ request: {
+ query: activitiesQueryDocument,
+ variables: {
+ competitionId: competition!.id,
+ },
+ },
+ result: {
+ data: {
+ activities: ongoingActivities,
+ },
+ },
+ },
+ ],
+ [competition, ongoingActivities],
+ );
+
+ window.localStorage.setItem(
+ 'pinnedPersons',
+ JSON.stringify({
+ [competition!.id]: pinnedPersons,
+ }),
+ );
+ window.localStorage.setItem('pinnedCompetitions', JSON.stringify([]));
+
+ return (
+
+
+
+ {},
+ signIn: () => {},
+ signOut: () => {},
+ signInAs: () => {},
+ }}>
+ {},
+ }}>
+ {children}
+
+
+
+
+
+ );
+};
+
+export const makeCompetitionContainerDecorator = ({
+ competition = storybookCompetitionFixture,
+ competitionData = storybookCompetitionApiFixture,
+ currentUser = storybookCurrentUser,
+ ongoingActivities = storybookOngoingActivitiesFixture,
+ pinnedPersons = [2, 3],
+}: CompetitionStorybookOptions = {}) =>
+ ((Story, context) => {
+ const parameters = context.parameters as CompetitionStorybookParameters;
+ const resolvedCompetition =
+ parameters.competitionFixture || parameters.competition || competition;
+ const resolvedCompetitionData =
+ parameters.competitionData || competitionData || storybookCompetitionApiFixture;
+ const resolvedCurrentUser = parameters.currentUser ?? currentUser ?? storybookCurrentUser;
+ const resolvedOngoingActivities =
+ parameters.ongoingActivities || ongoingActivities || storybookOngoingActivitiesFixture;
+ const resolvedPinnedPersons = parameters.pinnedPersons || pinnedPersons || [2, 3];
+
+ return (
+
+
+ );
+ }) satisfies Decorator;
+
+function StorybookRouteDecorator({
+ initialPath,
+ routePath,
+ children,
+}: {
+ initialPath: string;
+ routePath: string;
+ children: ReactNode;
+}) {
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ navigate(initialPath, { replace: true });
+ }, [initialPath, navigate]);
+
+ return (
+
+ {children}} />
+
+ );
+}
+
+export const makeRouteDecorator = ({
+ initialPath,
+ routePath,
+}: {
+ initialPath: string;
+ routePath: string;
+}) =>
+ ((Story, context) => (
+
+
+ )) satisfies Decorator;