move useParams to app

.storybook/preview.tsx

@@ -2,10 +2,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import { Notifications } from '@mantine/notifications';
 import { Decorator, Parameters, Preview } from '@storybook/react';
 import {
-  ReactLocation,
-  Router,
+  RouterProvider,
   createMemoryHistory,
-} from '@tanstack/react-location';
+  createRootRoute,
+  createRouter,
+} from '@tanstack/react-router';
 import 'dayjs/locale/fa';
 import React from 'react';
 import { ThemeProvider } from '../libs/design';
@@ -25,22 +26,27 @@ const parameters: Parameters = {
 const decorators: Decorator[] = [
   (Story, { args }) => {
     const router = args.router as any;
-    const { layout, ...routes } = args.router ?? ({} as any);
-    const Layout = layout ?? React.Fragment;
-    const location = new ReactLocation({
-      history: createMemoryHistory({ initialEntries: [router?.route ?? '/'] }),
-    });
-
-    return router ? (
-      <Router routes={[routes]} location={location}>
-        <Layout>
-          <Story />
-        </Layout>
-      </Router>
-    ) : (
-      <Router routes={[]} location={location}>
-        <Story />
-      </Router>
+    const Layout = router?.layout ?? React.Fragment;
+    return (
+      <RouterProvider
+        router={createRouter({
+          context: {
+            getTitle: () => router.context?.getTitle() ?? '',
+          },
+          history: createMemoryHistory({
+            initialEntries: [router?.route ?? '/'],
+          }),
+          routeTree: createRootRoute({
+            component: () => (
+              <Layout>
+                <Story />
+              </Layout>
+            ),
+            errorComponent: () => <Story />,
+          }),
+        })}
+        defaultComponent={() => <Story />}
+      ></RouterProvider>
     );
   },
   Story => (

app/routes/dashboard/_layout/households/_layout/$householdId.tsx

@@ -1,8 +1,16 @@
 import { HouseholdDetail } from '@camp/pages/Households';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, useParams } from '@tanstack/react-router';
 
+const HouseholdDetailPage = () => {
+  const id = useParams({
+    from: '/dashboard/_layout/households/_layout/$householdId',
+    select: params => params.householdId,
+  });
+
+  return <HouseholdDetail id={id} />;
+};
 export const Route = createFileRoute(
   '/dashboard/_layout/households/_layout/$householdId',
 )({
-  component: HouseholdDetail,
+  component: HouseholdDetailPage,
 });

app/routes/dashboard/_layout/projects/_layout/$projectId.tsx

@@ -1,10 +1,19 @@
 import { ProjectDetail } from '@camp/pages/Projects';
-import { createFileRoute } from '@camp/router';
+import { createFileRoute, useParams } from '@camp/router';
+
+const ProjectDetailPage = () => {
+  const id = useParams({
+    from: '/dashboard/_layout/projects/_layout/$projectId',
+    select: params => params.projectId,
+  });
+
+  return <ProjectDetail id={id} />;
+};
 
 export const Route = createFileRoute(
   '/dashboard/_layout/projects/_layout/$projectId',
 )({
-  component: ProjectDetail,
+  component: ProjectDetailPage,
   errorComponent: ({ error }) => <>Error: ${error.message}</>,
   notFoundComponent: () => <>Not Found</>,
 });

libs/pages/Households/HouseholdDetail/HouseholdDetail.tsx

@@ -24,7 +24,7 @@ import {
 } from '@camp/domain';
 import { ArrowUpIcon, CheckIcon, EditIcon, TrashIcon } from '@camp/icons';
 import { errorMessages, messages } from '@camp/messages';
-import { AppRoute, useNavigate, useParams } from '@camp/router';
+import { AppRoute, useNavigate } from '@camp/router';
 import { InformationBadge, SeverityBadge } from '@camp/shared-components';
 import { tid } from '@camp/test';
 import { isNull } from '@fullstacksjs/toolbox';
@@ -52,13 +52,10 @@ const resolver = createResolver<FormSchema>({
 });
 
 // eslint-disable-next-line max-lines-per-function
-export const HouseholdDetail = () => {
+export const HouseholdDetail = ({ id }: { id: string }) => {
   const t = messages.householdDetail;
   const tNotification = messages.notification.household;
-  const id = useParams({
-    from: '/dashboard/_layout/households/_layout/$householdId',
-    select: params => params.householdId,
-  });
+
   const navigate = useNavigate();
   const {
     handleSubmit,

libs/pages/Households/HouseholdsLayout.stories.tsx

@@ -10,8 +10,8 @@ export default {
     router: {
       route: '/dashboard/households',
       layout: DashboardLayout,
-      meta: {
-        breadcrumb: messages.households.title,
+      context: {
+        getTitle: () => messages.households.title,
       },
     },
   },

libs/pages/Projects/ProjectDetail/ProjectDetail.stories.tsx

@@ -1,5 +1,4 @@
 import { projectMock } from '@camp/fixtures';
-import { messages } from '@camp/messages';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ProjectDetail } from './ProjectDetail';
@@ -8,10 +7,7 @@ export default {
   component: ProjectDetail,
   args: {
     router: {
-      route: ':projectId',
-      meta: {
-        breadcrumb: messages.projectDetail.title,
-      },
+      route: '/dashboard/projects/123',
     },
   },
   parameters: {

libs/pages/Projects/ProjectDetail/ProjectDetail.tsx

@@ -6,20 +6,15 @@ import {
   Tabs,
 } from '@camp/design';
 import { errorMessages, messages } from '@camp/messages';
-import { useParams } from '@camp/router';
 import { isEmpty, isNull } from '@fullstacksjs/toolbox';
 import { Text, Title } from '@mantine/core';
 
 import { ProjectStatusBadge } from '../ProjectStatusBadge';
-import { ProjectDocuments } from './_components/ProjectDocuments';
 import { ProjectDetailIds as ids } from './ProjectDetail.ids';
+import { ProjectDocuments } from './ProjectDocuments';
 
-export const ProjectDetail = () => {
+export const ProjectDetail = ({ id }: { id: string }) => {
   const t = messages.projectDetail;
-  const id = useParams({
-    from: '/dashboard/_layout/projects/_layout/$projectId',
-    select: params => params.projectId,
-  });
 
   const { data, loading, error } = useProjectQuery({
     variables: { id },