latest

notes.md

@@ -0,0 +1,174 @@
+## useApplicationEvaluations.ts
+
+```typescript
+type UseApplicationEvaluations = (
+  chainId: number,
+  roundId: string,
+  applicationId: string,
+) => {
+  data: {
+    application: ProjectApplication;
+    applicationEvaluations: Evaluation[];
+  };
+  isLoading: boolean;
+  isError: boolean;
+  error: Error;
+};
+```
+
+- useQuery -> ["viewApplicationEvaluationsPage", chainId, roundId, applicationId]
+- getApplicationByIdFromIndexer -> services/allo
+- getCheckerApplicationEvaluations -> services/checker
+
+---
+
+## useApplicationOverviewEvaluations.ts
+
+```typescript
+type UseApplicationOverviewEvaluations = ({ applicationId }: { applicationId: string }) => {
+  application: CheckerApplication;
+  applicationEvaluations: Evaluation[];
+  evaluationQuestions: CheckerApiEvaluationQuestion[];
+  poolData: CheckerPoolData;
+};
+```
+
+- gets poolId, chainId, poolsData from useCheckerContext
+- generates poolUUID
+- gets poolData from poolsData
+- gets application from poolData
+- gets applicationEvaluations from application
+- gets evaluationQuestions from poolData
+
+---
+
+## useGetApplicationsFinalEvaluationPage.ts
+
+```typescript
+type UseGetApplicationsFinalEvaluationPage = () => {
+  categorizedReviews: Record<
+    "INREVIEW" | "READY_TO_REVIEW" | "APPROVED" | "REJECTED",
+    ProjectReview[]
+  >;
+  statCardsProps: StatCardProps[];
+  reviewBody: ReviewBody;
+  poolData: CheckerPoolData;
+};
+```
+
+- gets poolId, chainId, poolsData from useCheckerContext
+- generates poolUUID
+- gets poolData from poolsData
+- gets categorizedReviews and statCardsProps from poolData.applications -> categorizeProjectReviews()
+- generates reviewBody with poolData
+
+## useGetApplicationsReviewPage.ts
+
+```typescript
+type UseGetApplicationsReviewPage = () => {
+  categorizedReviews: Record<
+    "INREVIEW" | "READY_TO_REVIEW" | "APPROVED" | "REJECTED",
+    ProjectReview[]
+  >;
+  statCardsProps: StatCardProps[];
+  poolData: CheckerPoolData;
+};
+```
+
+- gets poolId, chainId, poolsData from useCheckerContext
+- generates poolUUID
+- gets poolData from poolsData
+- gets categorizedReviews and statCardsProps from poolData.applications -> categorizeProjectReviews()
+
+---
+
+## useGetPastApplications.ts
+
+```typescript
+type UseGetPastApplications = (
+  chainId: number,
+  roundId: string,
+  applicationId: string,
+) => {
+  data: PastApplication[];
+  isLoading: boolean;
+  isError: boolean;
+  error: Error;
+};
+```
+
+- useQuery -> ["getPastApplications", chainId, roundId, applicationId]
+- getPastApplicationsByApplicationIdFromIndexer -> services/allo
+
+---
+
+## useInitialize.ts
+
+```typescript
+type UseInitialize = ({ address, poolId, chainId }: InitData) => void;
+```
+
+- sets initialState with setInitialStateAction
+- usePoolData -> fetchPoolData and stores it in the context
+
+---
+
+## usePoolData.ts
+
+```typescript
+type UsePoolData = () => {
+  poolData: CheckerPoolData;
+  refetch: () => void;
+};
+```
+
+- useQuery -> ["poolData", chainId, poolId, address]
+- syncPool -> services/checker
+- getApplicationsFromIndexer -> services/allo
+- getCheckerPoolData -> services/checker
+- generates poolUUID
+- parses applications from indexer and checker api to applications object and stores it in the context
+
+---
+
+## usePerformEvaluation.ts
+
+```typescript
+type UsePerformEvaluation = () => {
+  setEvaluationBody: (evaluationBody: EvaluationBody) => void;
+  isEvaluating: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+};
+```
+
+- has a state to store the evaluationBody
+- has a mutation to sign the evaluation
+- has a mutation to submit the evaluation
+- triggers the signing mutation when evaluationBody is set and submits the evaluation, resetting the evaluationBody.
+  NOTE: wouldn't it be better to have a single mutation that handles both signing and submitting?
+  Do we need to have a state to store the evaluationBody?
+
+---
+
+## usePerformOnChainReview.ts
+
+```typescript
+type UsePerformOnChainReview = () => {
+  setReviewBody: (reviewBody: ReviewBody) => void;
+  steps: Step[];
+  isReviewing: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  error: Error;
+};
+```
+
+- has a state to store the reviewBody
+- has states to store the progress of the review steps, contractUpdatingStatus, indexingStatus, finishingStatus
+- has a mutation to submit the review
+- triggers the mutation when reviewBody is set
+- resets the review steps when the mutation is successful
+- resets the reviewBody when the mutation is successful
+
+NOTE: do we need to have a state to store the reviewBody?, do we need to have a state to store the review steps independently instead of combining them?

src/index.ts

@@ -1,2 +1,4 @@
+import "./index.css";
+
 export * from "./primitives";
 export * from "./components";

src/primitives/Navbar/GenericNavbar.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DefaultLogo } from "@/assets";
+
+import { Button } from "../Button";
+import { GenericNavbar } from "./GenericNavbar";
+
+const meta = {
+  title: "Primitives/GenericNavbar",
+  component: GenericNavbar,
+  args: {
+    brand: <img src={DefaultLogo} alt="Logo" />, // Updated to include brand
+    navigation: <span>My Navbar</span>, // Default navigation text
+    actions: null, // Default actions
+    border: "default", // Default border
+    className: "", // Default className
+  },
+  argTypes: {
+    brand: {
+      control: "object",
+    },
+    navigation: {
+      control: "object",
+    },
+    actions: {
+      control: "object",
+    },
+    border: {
+      control: "select",
+      options: ["default", "none"],
+    },
+    className: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof GenericNavbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof GenericNavbar>;
+export const Default: Story = {
+  args: {
+    navigation: <span>My Navbar</span>, // Updated to use navigation prop
+  },
+};
+
+export const WithSecondaryLogo: Story = {
+  args: {
+    brand: <img src={DefaultLogo} alt="Logo" />, // Updated to use brand prop
+    navigation: <span>My Navbar</span>, // Updated to use navigation prop
+  },
+};
+
+export const WithCustomTextAndWithoutDivider: Story = {
+  args: {
+    brand: <img src={DefaultLogo} alt="Logo" />, // Updated to use brand prop
+    navigation: <span>Custom Navbar</span>, // Updated to use navigation prop
+    border: "none", // Added border prop to match the story's intent
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    brand: <img src={DefaultLogo} alt="Logo" />, // Updated to use brand prop
+    navigation: <span>My Navbar</span>, // Updated to use navigation prop
+    actions: <Button value="Connect Wallet" />, // Updated to use actions prop
+  },
+};
+
+export const WithCustomSizeAndColor: Story = {
+  args: {
+    brand: <img src={DefaultLogo} alt="Logo" />, // Updated to use brand prop
+    navigation: <span>Custom Size and Color Navbar</span>, // Updated to use navigation prop
+    className: "text-xl text-purple-700", // Added className for styling
+  },
+};

src/primitives/Navbar/GenericNavbar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+import { cn } from "@/lib/utils";
+
+const genericNavbarVariants = tv({
+  slots: {
+    base: "top-0 z-50 w-full transition-all duration-200",
+    container: "mx-auto h-full w-full px-4 sm:px-6 lg:px-8",
+    inner: "flex h-full items-center justify-between overflow-hidden",
+    brand: "flex items-center gap-4",
+    navigation: "hidden items-center justify-center md:flex",
+    actions: "flex items-center gap-4",
+    divider: "h-4 w-px bg-border",
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+      },
+      solid: {
+        base: "bg-background",
+      },
+      transparent: {
+        base: "bg-transparent",
+      },
+    },
+    size: {
+      default: {
+        base: "h-16",
+      },
+      sm: {
+        base: "h-14",
+      },
+      lg: {
+        base: "h-20",
+      },
+    },
+    border: {
+      default: {
+        base: "border-b",
+      },
+      none: {
+        base: "border-none",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    border: "default",
+  },
+});
+
+export interface GenericNavbarProps extends VariantProps<typeof genericNavbarVariants> {
+  brand?: React.ReactNode;
+  navigation?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function GenericNavbar({
+  variant,
+  size,
+  border,
+  brand,
+  navigation,
+  actions,
+  className,
+}: GenericNavbarProps) {
+  const {
+    base: baseSlot,
+    container,
+    inner,
+    brand: brandSlot,
+    navigation: navSlot,
+    actions: actionsSlot,
+  } = genericNavbarVariants({ variant, size, border });
+
+  return (
+    <nav className={cn(baseSlot(), className)}>
+      <div className={container()}>
+        <div className={inner()}>
+          <div className={brandSlot()}>{brand}</div>
+          <div className={navSlot()}>{navigation}</div>
+          <div className={actionsSlot()}>{actions}</div>
+        </div>
+      </div>
+    </nav>
+  );
+}

tailwind.config.ts

@@ -8,7 +8,11 @@ export default withTV({
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   darkMode: ["class", "[data-mode='dark']"],
   theme: {
-    colors,
+    colors: {
+      ...colors,
+      background: colors.grey[100],
+      border: colors.grey[900],
+    },
     extend: {
       borderWidth: {
         "1.5": "1.5px",