website refactor

apps/website/client-wrapper/CreateLeagueWizard.tsx

@@ -12,6 +12,7 @@ import type { Weekday } from '@/lib/types/Weekday';
 import type { WizardErrors } from '@/lib/types/WizardErrors';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import { CreateLeagueWizardTemplate, Step } from '@/templates/CreateLeagueWizardTemplate';
+import { SearchParamBuilder } from '@/lib/routing/search-params/SearchParamBuilder';
 import { 
   Award, 
   Calendar, 
@@ -91,7 +92,7 @@ type LeagueWizardFormModel = LeagueConfigFormModel & {
 
 interface CreateLeagueWizardProps {
   stepName: StepName;
-  onStepChange: (stepName: StepName) => void;
+  onStepChange?: (stepName: StepName) => void;
 }
 
 function stepNameToStep(stepName: StepName): Step {
@@ -200,6 +201,16 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
   const router = useRouter();
   const { session } = useAuth();
 
+  const handleStepChange = useCallback((newStepName: StepName) => {
+    if (onStepChange) {
+      onStepChange(newStepName);
+    } else {
+      const builder = new SearchParamBuilder();
+      builder.step(newStepName);
+      router.push(`/leagues/create${builder.build()}`);
+    }
+  }, [onStepChange, router]);
+
   const step = stepNameToStep(stepName);
   const [loading, setLoading] = useState(false);
   const [presetsLoading, setPresetsLoading] = useState(true);
@@ -330,19 +341,19 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
     const nextStep = (step < 7 ? ((step + 1) as Step) : step);
     saveHighestStep(nextStep);
     setHighestCompletedStep((prev) => Math.max(prev, nextStep));
-    onStepChange(stepToStepName(nextStep));
+    handleStepChange(stepToStepName(nextStep));
   };
 
   const goToPreviousStep = () => {
     const prevStep = (step > 1 ? ((step - 1) as Step) : step);
-    onStepChange(stepToStepName(prevStep));
+    handleStepChange(stepToStepName(prevStep));
   };
 
   const goToStep = useCallback((targetStep: Step) => {
     if (targetStep <= highestCompletedStep) {
-      onStepChange(stepToStepName(targetStep));
+      handleStepChange(stepToStepName(targetStep));
     }
-  }, [highestCompletedStep, onStepChange]);
+  }, [highestCompletedStep, handleStepChange]);
 
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
@@ -413,7 +424,7 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
     }));
 
     if (LeagueWizardCommandModel.hasWizardErrors(allErrors)) {
-      onStepChange('basics');
+      handleStepChange('basics');
       return;
     }
 

apps/website/client-wrapper/CreateTeamPageClient.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { CreateTeamForm } from '@/components/teams/CreateTeamForm';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Section } from '@/ui/Section';
+import { useRouter } from 'next/navigation';
+
+/**
+ * CreateTeamPageClient
+ * 
+ * Client wrapper for the Create Team page.
+ */
+export function CreateTeamPageClient() {
+  const router = useRouter();
+
+  const handleNavigate = (teamId: string) => {
+    router.push(routes.team.detail(teamId));
+  };
+
+  const handleCancel = () => {
+    router.back();
+  };
+
+  return (
+    <Section>
+      <Container size="sm">
+        <Stack gap={8}>
+          <Stack gap={2}>
+            <Heading level={1}>Create a Team</Heading>
+          </Stack>
+          <CreateTeamForm 
+            onNavigate={handleNavigate} 
+            onCancel={handleCancel}
+          />
+        </Stack>
+      </Container>
+    </Section>
+  );
+}

apps/website/client-wrapper/DashboardPageClient.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { DashboardTemplate } from '@/templates/DashboardTemplate';
+import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
+import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+
+/**
+ * DashboardPageClient
+ * 
+ * Client wrapper for the Dashboard page.
+ * Manages client-side interactions for the dashboard.
+ */
+export function DashboardPageClient({ viewData }: ClientWrapperProps<DashboardViewData>) {
+  const router = useRouter();
+
+  const handleNavigateToRaces = () => router.push(routes.public.races);
+
+  return (
+    <DashboardTemplate 
+      viewData={viewData} 
+      onNavigateToRaces={handleNavigateToRaces}
+    />
+  );
+}

apps/website/client-wrapper/HomePageClient.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { HomeTemplate, type HomeViewData } from '@/templates/HomeTemplate';
+import { PageWrapper } from '@/components/shared/state/PageWrapper';
+
+interface HomePageClientProps {
+  viewData: HomeViewData;
+}
+
+/**
+ * HomePageClient - Client wrapper for the Home page.
+ * Manages state and handlers for the home page.
+ */
+export function HomePageClient({ viewData }: HomePageClientProps) {
+  const Template = ({ viewData }: { viewData: HomeViewData }) => (
+    <HomeTemplate viewData={viewData} />
+  );
+
+  return <PageWrapper data={viewData} Template={Template} />;
+}