Merge pull request #77

refactor: setup project tab selection component

src/grants/components/grantee-project/project-selection.stories.tsx

@@ -4,7 +4,7 @@ import { faker } from '@faker-js/faker';
 
 import { MockQueryResult } from '@/shared/testutils/misc';
 
-import { ProjectSelections } from '@/grants/components/grantee-project/project-selection';
+import { ProjectSelections } from '@/grants/components/grantee-project/project-selections';
 
 import { mockGranteeProjectQuery } from '@/grants/testutils/mock-grantee-project-query';
 
@@ -30,22 +30,40 @@ const meta: Meta<typeof ProjectSelections> = {
 export default meta;
 type Story = StoryObj<typeof ProjectSelections>;
 
-export const Success: Story = {
+export const Loading: Story = {
   parameters: {
+    msw: {
+      handlers: [
+        mockGranteeProjectQuery(MockQueryResult.SUCCESS, {
+          networkDelay: 'infinite',
+        }),
+      ],
+    },
+  },
+};
+
+export const FirstProjectActive: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['projectId', 'project-1']],
+      },
+    },
     msw: {
       handlers: [mockGranteeProjectQuery(MockQueryResult.SUCCESS)],
     },
   },
 };
 
-export const Loading: Story = {
+export const SecondProjectActive: Story = {
   parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['projectId', 'project-2']],
+      },
+    },
     msw: {
-      handlers: [
-        mockGranteeProjectQuery(MockQueryResult.SUCCESS, {
-          networkDelay: 'infinite',
-        }),
-      ],
+      handlers: [mockGranteeProjectQuery(MockQueryResult.SUCCESS)],
     },
   },
 };

src/grants/components/grantee-project/project-selection.tsx

@@ -20,15 +20,14 @@ interface Props {
 export const ProjectSelection = ({ firstId, projectId, baseHref }: Props) => {
   const params = useParams();
   const paramsProjectId = params.projectId as string;
+  const href = `${baseHref}/${projectId}`;
 
   const isActive = paramsProjectId
     ? paramsProjectId === projectId
     : projectId === firstId; // Default to first project if no project-id params
 
   const { data } = useGranteeProject(paramsProjectId ?? firstId);
 
-  const href = `${baseHref}/${projectId}`;
-
   if (!data) return <Skeleton className={cn(SHARED_CLASSNAME, 'h-14')} />;
 
   return (
@@ -44,25 +43,3 @@ export const ProjectSelection = ({ firstId, projectId, baseHref }: Props) => {
     </Link>
   );
 };
-
-interface SelectionsProps {
-  baseHref: string;
-  projects: string[];
-}
-
-export const ProjectSelections = ({ baseHref, projects }: SelectionsProps) => {
-  if (projects.length === 0) return null;
-
-  return (
-    <div className="flex w-full gap-4 bg-white/5 p-4">
-      {projects.map((projectId) => (
-        <ProjectSelection
-          key={projectId}
-          firstId={projects[0]}
-          projectId={projectId}
-          baseHref={baseHref}
-        />
-      ))}
-    </div>
-  );
-};

src/grants/components/grantee-project/project-selections.tsx

@@ -0,0 +1,23 @@
+import { ProjectSelection } from './project-selection';
+
+interface SelectionsProps {
+  baseHref: string;
+  projects: string[];
+}
+
+export const ProjectSelections = ({ baseHref, projects }: SelectionsProps) => {
+  if (projects.length === 0) return null;
+
+  return (
+    <div className="flex w-full gap-4 bg-white/5 p-4">
+      {projects.map((projectId) => (
+        <ProjectSelection
+          key={projectId}
+          firstId={projects[0]}
+          projectId={projectId}
+          baseHref={baseHref}
+        />
+      ))}
+    </div>
+  );
+};

src/grants/components/grantee-project/project-tab-selection.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { faker } from '@faker-js/faker';
+
+import { MockQueryResult } from '@/shared/testutils/misc';
+
+import { mockGranteeProjectQuery } from '@/grants/testutils/mock-grantee-project-query';
+
+import { ProjectTabSelection } from './project-tab-selection';
+
+faker.seed(420);
+
+const meta: Meta<typeof ProjectTabSelection> = {
+  title: 'grants/components/grantee-project/project-tab-selections',
+  component: ProjectTabSelection,
+  decorators: [
+    (Story) => {
+      const baseHref = '/grants/grant-1/grantees/grantee-1/projects';
+      const defaultId = 'project-1';
+
+      return (
+        <div className="flex w-full justify-center">
+          <Story args={{ baseHref, defaultId }} />
+        </div>
+      );
+    },
+  ],
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['projectId', 'project-1']],
+      },
+    },
+    msw: {
+      handlers: [mockGranteeProjectQuery(MockQueryResult.SUCCESS)],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProjectTabSelection>;
+
+export const OverallSummary: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['tab', 'summary']],
+      },
+    },
+  },
+};
+
+export const ImpactMetrics: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['tab', 'impact-metrics']],
+      },
+    },
+  },
+};
+
+export const GithubMetrics: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['tab', 'github-metrics']],
+      },
+    },
+  },
+};
+
+export const CodeMetrics: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['tab', 'code-metrics']],
+      },
+    },
+  },
+};
+
+export const ContractAddress: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        segments: [['tab', 'contract-address']],
+      },
+    },
+  },
+};

src/grants/pages/grantee-page-layout.tsx

@@ -1,5 +1,5 @@
 import { GranteeCard } from '@/grants/components/grantee-card/grantee-card';
-import { ProjectSelections } from '@/grants/components/grantee-project/project-selection';
+import { ProjectSelections } from '@/grants/components/grantee-project/project-selections';
 import { ProjectTabSelection } from '@/grants/components/grantee-project/project-tab-selection';
 
 import { fakeGrantee } from '@/grants/testutils/fake-grantee';

src/grants/testutils/mock-grantee-project-query.ts

@@ -28,7 +28,7 @@ export const mockGranteeProjectQuery = (
       const successResponse = HttpResponse.json({
         success: true,
         message: 'Grantee project retrieved successfully',
-        data: fakeGranteeProject({ id: projectId, name: 'Project 420' }),
+        data: fakeGranteeProject({ id: projectId }),
       });
       const internalErrorResponse = HttpResponse.json(
         { message: errMsg.INTERNAL },