From 40f62a1f832a8fd2ca9dd9ee964ecceaac3873a5 Mon Sep 17 00:00:00 2001
From: Nick Lionis <nikolaos@gitcoin.co>
Date: Thu, 23 Jan 2025 13:58:41 +0200
Subject: [PATCH] feat: exports changes (#123)

* fix: gitcoin-ui exports

* chore: improve select component

* fix: round dates validation
---
 package.json                                  | 23 ++++-
 src/client.ts                                 |  2 +-
 .../SelectFormController.tsx                  |  4 +-
 .../utils/validations/validateRoundDates.ts   |  6 +-
 .../ProgressModal/ProgressModal.stories.tsx   |  3 +-
 .../ProgressModal/ProgressModal.tsx           |  3 +-
 src/components/ProgressModal/index.ts         |  1 -
 src/components/ProgressModal/utils.ts         |  2 +-
 src/features/checker/apps/Checker.tsx         |  2 +-
 .../checker/hooks/usePerformOnChainReview.ts  |  3 +-
 .../SubmitFinalEvaluationModal.tsx            |  3 +-
 .../SubmitFinalEvaluationPage.tsx             |  2 +-
 .../checker/routers/CheckerRouter.tsx         |  2 +-
 src/index.ts                                  |  1 -
 src/primitives/Markdown/Markdown.tsx          |  6 +-
 src/primitives/Select/Label.tsx               | 18 ++++
 src/primitives/Select/Select.tsx              | 90 +++++++++++++++----
 src/types/index.ts                            |  1 +
 .../types.ts => types/progressModal.ts}       |  0
 vite.config.ts                                |  8 +-
 20 files changed, 143 insertions(+), 37 deletions(-)
 create mode 100644 src/primitives/Select/Label.tsx
 rename src/{components/ProgressModal/types.ts => types/progressModal.ts} (100%)

diff --git a/package.json b/package.json
index cb9a6755..3d9e536d 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,25 @@
       "import": "./dist/client.js",
       "require": "./dist/client.js"
     },
-    "./hooks": {
-      "types": "./dist/hooks.d.ts",
-      "import": "./dist/hooks.js",
-      "require": "./dist/hooks.js"
+    "./hooks/useCredentialVerification": {
+      "types": "./dist/use-credential-verification.d.ts",
+      "import": "./dist/use-credential-verification.js",
+      "require": "./dist/use-credential-verification.js"
+    },
+    "./hooks/useIndexedDB": {
+      "types": "./dist/use-indexed-db.d.ts",
+      "import": "./dist/use-indexed-db.js",
+      "require": "./dist/use-indexed-db.js"
+    },
+    "./hooks/usePersistForm": {
+      "types": "./dist/use-persist-form.d.ts",
+      "import": "./dist/use-persist-form.js",
+      "require": "./dist/use-persist-form.js"
+    },
+    "./hooks/useToast": {
+      "types": "./dist/use-toast.d.ts",
+      "import": "./dist/use-toast.js",
+      "require": "./dist/use-toast.js"
     },
     "./icons": {
       "types": "./dist/icons.d.ts",
diff --git a/src/client.ts b/src/client.ts
index b127d9ad..5eb24709 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -1,8 +1,8 @@
 export * from "./primitives/Accordion";
-export * from "./primitives/Markdown";
 export * from "./primitives/MarkdownEditor";
 export * from "./components/Form";
 export * from "./components/GenericProgressForm";
 export * from "./components/MultipleSelect";
 export * from "./features/pool/components/PoolList";
 export * from "./features/program/components/ProgramList";
+export * from "./components/ProgressModal";
diff --git a/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx b/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx
index 574b2e86..10031bba 100644
--- a/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx
+++ b/src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx
@@ -12,6 +12,7 @@ export interface SelectFormControllerProps extends SelectProps {
 export const SelectFormController: React.FC<any> = ({
   name,
   options,
+  defaultValue,
   placeholder,
   className,
   size,
@@ -26,7 +27,8 @@ export const SelectFormController: React.FC<any> = ({
       render={({ field }) => (
         <Select
           options={options}
-          defaultValue={field.value}
+          defaultValue={defaultValue}
+          value={field.value}
           onValueChange={field.onChange}
           placeholder={placeholder}
           className={className}
diff --git a/src/components/Form/utils/validations/validateRoundDates.ts b/src/components/Form/utils/validations/validateRoundDates.ts
index 9eca9728..2dc0457c 100644
--- a/src/components/Form/utils/validations/validateRoundDates.ts
+++ b/src/components/Form/utils/validations/validateRoundDates.ts
@@ -86,11 +86,11 @@ export const validateRoundDates = (data: RoundDatesData, ctx: z.RefinementCtx) =
     });
   }
 
-  // Ensure application dates are within round dates
-  if (roundStart && appStart && appStart < roundStart) {
+  // Ensure application dates are before round dates
+  if (roundStart && appStart && appStart > roundStart) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
-      message: "Application start date must not be before the round start date",
+      message: "Application start date must not be after the round start date",
       path: ["applications", "start"],
     });
   }
diff --git a/src/components/ProgressModal/ProgressModal.stories.tsx b/src/components/ProgressModal/ProgressModal.stories.tsx
index 897452e5..ca7d87aa 100644
--- a/src/components/ProgressModal/ProgressModal.stories.tsx
+++ b/src/components/ProgressModal/ProgressModal.stories.tsx
@@ -2,8 +2,9 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { ProgressStatus, Step } from "@/types";
+
 import { ProgressModal } from "./ProgressModal";
-import { ProgressStatus, Step } from "./types";
 
 const meta: Meta<typeof ProgressModal> = {
   title: "Components/ProgressModal",
diff --git a/src/components/ProgressModal/ProgressModal.tsx b/src/components/ProgressModal/ProgressModal.tsx
index 9a6f48d8..1a2cb59d 100644
--- a/src/components/ProgressModal/ProgressModal.tsx
+++ b/src/components/ProgressModal/ProgressModal.tsx
@@ -3,10 +3,9 @@
 import { Check, X } from "lucide-react";
 
 import { Modal } from "@/primitives/Modal";
+import { ProgressStatus, Step } from "@/types";
 import { Dialog, DialogHeader, DialogTitle, DialogDescription } from "@/ui-shadcn/dialog";
 
-import { ProgressStatus, Step } from "./types";
-
 export interface ProgressModalProps {
   steps: Step[];
   isOpen?: boolean;
diff --git a/src/components/ProgressModal/index.ts b/src/components/ProgressModal/index.ts
index dc2a1066..da52dd75 100644
--- a/src/components/ProgressModal/index.ts
+++ b/src/components/ProgressModal/index.ts
@@ -1,3 +1,2 @@
 export * from "./ProgressModal";
 export * from "./utils";
-export * from "./types";
diff --git a/src/components/ProgressModal/utils.ts b/src/components/ProgressModal/utils.ts
index 0a254e3e..e53531ba 100644
--- a/src/components/ProgressModal/utils.ts
+++ b/src/components/ProgressModal/utils.ts
@@ -1,4 +1,4 @@
-import { Step, ProgressStatus } from "./types";
+import { ProgressStatus, Step } from "@/types";
 
 export const getOnchainEvaluationProgressSteps = ({
   contractUpdatingStatus,
diff --git a/src/features/checker/apps/Checker.tsx b/src/features/checker/apps/Checker.tsx
index 81b68d16..4be514e0 100644
--- a/src/features/checker/apps/Checker.tsx
+++ b/src/features/checker/apps/Checker.tsx
@@ -2,7 +2,7 @@
 
 import { Hex } from "viem";
 
-import { Step } from "@/components/ProgressModal";
+import { Step } from "@/types";
 
 import { CheckerRouter } from "~checker/routers";
 import { CheckerProvider } from "~checker/store";
diff --git a/src/features/checker/hooks/usePerformOnChainReview.ts b/src/features/checker/hooks/usePerformOnChainReview.ts
index a720dfb4..1823b7b3 100644
--- a/src/features/checker/hooks/usePerformOnChainReview.ts
+++ b/src/features/checker/hooks/usePerformOnChainReview.ts
@@ -4,7 +4,8 @@ import { useState, useEffect, useMemo } from "react";
 
 import { useMutation } from "@tanstack/react-query";
 
-import { ProgressStatus, getOnchainEvaluationProgressSteps } from "@/components/ProgressModal";
+import { getOnchainEvaluationProgressSteps } from "@/components/ProgressModal";
+import { ProgressStatus } from "@/types";
 
 import { ReviewBody } from "../types";
 
diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationModal.tsx b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationModal.tsx
index e155c1d0..db532b44 100644
--- a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationModal.tsx
+++ b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationModal.tsx
@@ -2,9 +2,10 @@
 
 import { Check, X } from "lucide-react";
 
-import { ProgressModal, Step } from "@/components/ProgressModal";
+import { ProgressModal } from "@/components/ProgressModal";
 import { Button } from "@/primitives/Button";
 import { Modal } from "@/primitives/Modal";
+import { Step } from "@/types";
 import { Dialog, DialogHeader, DialogTitle } from "@/ui-shadcn/dialog";
 
 export interface SubmitFinalEvaluationModalProps {
diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
index 4b181867..0cb8ce19 100644
--- a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
+++ b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
@@ -5,11 +5,11 @@ import { useState, useMemo, useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { match } from "ts-pattern";
 
-import { Step } from "@/components/ProgressModal";
 import { useToast } from "@/hooks/useToast";
 import { Button } from "@/primitives/Button";
 import { Icon, IconType } from "@/primitives/Icon";
 import { StatCardGroup } from "@/primitives/StatCardGroup";
+import { Step } from "@/types";
 
 import { ProjectEvaluationList } from "~checker/components";
 import { useGetApplicationsFinalEvaluationPage } from "~checker/hooks";
diff --git a/src/features/checker/routers/CheckerRouter.tsx b/src/features/checker/routers/CheckerRouter.tsx
index c2a8f442..62c220a7 100644
--- a/src/features/checker/routers/CheckerRouter.tsx
+++ b/src/features/checker/routers/CheckerRouter.tsx
@@ -5,8 +5,8 @@ import { useEffect } from "react";
 import { match, P } from "ts-pattern";
 import { Hex } from "viem";
 
-import { Step } from "@/components/ProgressModal";
 import { useCheckerContext } from "@/features/checker/store/hooks/useCheckerContext";
+import { Step } from "@/types";
 
 import { useInitialize } from "~checker/hooks";
 import {
diff --git a/src/index.ts b/src/index.ts
index dadb770e..6356bc2e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,7 +27,6 @@ export * from "./primitives/Checkbox";
 
 export * from "./components/CreateButton";
 export * from "./components/IconLabel";
-export * from "./components/ProgressModal";
 export * from "./components/RadioGroupList";
 export * from "./components/SideNav";
 export * from "./components/Toaster";
diff --git a/src/primitives/Markdown/Markdown.tsx b/src/primitives/Markdown/Markdown.tsx
index ecaeeb37..231fa52f 100644
--- a/src/primitives/Markdown/Markdown.tsx
+++ b/src/primitives/Markdown/Markdown.tsx
@@ -2,7 +2,9 @@
 
 import MarkdownPreview from "@uiw/react-markdown-preview";
 
-export const Markdown = ({ children }: { children: string }) => {
+import { withSSR } from "@/lib/withSSR";
+
+const MarkdownComponent = ({ children }: { children: string }) => {
   return (
     <MarkdownPreview
       source={children}
@@ -12,3 +14,5 @@ export const Markdown = ({ children }: { children: string }) => {
     />
   );
 };
+
+export const Markdown = withSSR(MarkdownComponent);
diff --git a/src/primitives/Select/Label.tsx b/src/primitives/Select/Label.tsx
new file mode 100644
index 00000000..0775f6a5
--- /dev/null
+++ b/src/primitives/Select/Label.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+
+export interface LabelProps {
+  icon?: React.ReactNode;
+  label: string;
+  className?: string;
+  iconPosition?: "left" | "right";
+}
+
+export const Label = ({ icon, label, className, iconPosition }: LabelProps) => {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {icon && iconPosition === "left" && icon}
+      <p className={className}>{label}</p>
+      {icon && iconPosition === "right" && icon}
+    </div>
+  );
+};
diff --git a/src/primitives/Select/Select.tsx b/src/primitives/Select/Select.tsx
index 38cc2c75..bfdfbaea 100644
--- a/src/primitives/Select/Select.tsx
+++ b/src/primitives/Select/Select.tsx
@@ -5,6 +5,7 @@ import * as React from "react";
 import { SelectGroup } from "@radix-ui/react-select";
 import { tv } from "tailwind-variants";
 
+import { cn } from "@/lib/utils";
 import { IconType } from "@/primitives/Icon";
 import {
   Select as ShadcnSelect,
@@ -13,9 +14,10 @@ import {
   SelectLabel,
   SelectItem,
   SelectSeparator,
-  SelectValue,
 } from "@/ui-shadcn/select";
 
+import { Label } from "./Label";
+
 export interface SelectProps {
   options: {
     groupLabel?: string;
@@ -30,6 +32,7 @@ export interface SelectProps {
   }[];
   placeholder?: React.ReactNode;
   onValueChange?: (value: string) => void;
+  value?: string;
   defaultValue?: string;
   variant?: "default" | "outlined" | "filled";
   size?: "sm" | "md" | "lg";
@@ -38,16 +41,47 @@ export interface SelectProps {
 
 const selectStyles = tv({
   base: "h-10 rounded-md border text-sm",
+  slots: {
+    trigger: "h-10 rounded-md border text-sm",
+    item: "",
+    label: "",
+  },
   variants: {
     variant: {
-      default: "border-transparent bg-white ",
-      outlined: "border-transparent bg-transparent",
-      filled: "bg-grey-200",
+      default: {
+        trigger: "border-transparent bg-white ",
+        content: "",
+        item: "",
+        label: "",
+      },
+      outlined: {
+        trigger: "border-transparent bg-transparent",
+        item: "",
+        label: "",
+      },
+      filled: {
+        trigger: " bg-grey-200 text-grey-900",
+        content: "",
+        item: "",
+        label: "",
+      },
     },
     size: {
-      sm: "h-8 text-xs",
-      md: "h-10 text-sm",
-      lg: "h-12 text-base",
+      sm: {
+        trigger: "h-8 gap-1 text-xs",
+        item: "h-8 text-xs",
+        label: "text-xs",
+      },
+      md: {
+        trigger: "h-10 px-3 py-2 text-sm",
+        item: "text-sm",
+        label: "text-sm",
+      },
+      lg: {
+        trigger: "h-12 gap-2 text-base",
+        item: "text-base",
+        label: "",
+      },
     },
   },
   defaultVariants: {
@@ -56,33 +90,59 @@ const selectStyles = tv({
   },
 });
 
+export const getSelectedItem = (
+  options: SelectProps["options"],
+  value?: string,
+  defaultValue?: string,
+  onValueChange?: (value: string) => void,
+) => {
+  const itemValue = value || defaultValue;
+  const item = options
+    .find((option) => option.items.find((item) => item.value === itemValue))
+    ?.items.find((item) => item.value === itemValue);
+  if (item) {
+    onValueChange?.(item.value);
+  }
+  return item;
+};
+
 export const Select = ({
   options,
   placeholder = "Select an option",
   onValueChange,
   defaultValue,
+  value,
   variant,
   size,
   className,
 }: SelectProps) => {
+  const item = getSelectedItem(options, value, defaultValue, onValueChange);
+  const { trigger, item: selectItem, label } = selectStyles({ variant, size, className });
   return (
-    <ShadcnSelect defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger className={selectStyles({ variant, size, className })}>
-        <SelectValue placeholder={defaultValue ?? placeholder} />
+    <ShadcnSelect
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      value={value || defaultValue}
+    >
+      <SelectTrigger className={cn(trigger(), className)}>
+        {item ? <Label {...item} /> : placeholder}
       </SelectTrigger>
       <SelectContent>
         {options.map((group, index) => (
           <React.Fragment key={index}>
             {group.groupLabel && (
               <SelectGroup>
-                <SelectLabel>{group.groupLabel}</SelectLabel>
+                <SelectLabel className={label()}>{group.groupLabel}</SelectLabel>
               </SelectGroup>
             )}
             {group.items.map((item) => (
-              <SelectItem key={item.value} value={item.value} className="flex items-center gap-2">
-                {item.icon && item.iconPosition === "left" && item.icon}
-                {item.label}
-                {item.icon && item.iconPosition === "right" && item.icon}
+              <SelectItem key={item.value} value={item.value}>
+                <Label
+                  label={item.label}
+                  icon={item.icon}
+                  iconPosition={item.iconPosition}
+                  className={selectItem()}
+                />
               </SelectItem>
             ))}
             {group.separator && <SelectSeparator />}
diff --git a/src/types/index.ts b/src/types/index.ts
index 663d7e30..a5d05636 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -3,3 +3,4 @@ export * from "./indexedDB";
 export * from "./markdown";
 export * from "./onClickProps";
 export * from "./pool";
+export * from "./progressModal";
diff --git a/src/components/ProgressModal/types.ts b/src/types/progressModal.ts
similarity index 100%
rename from src/components/ProgressModal/types.ts
rename to src/types/progressModal.ts
diff --git a/vite.config.ts b/vite.config.ts
index 92e41857..f377d71f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,13 +14,19 @@ export default defineConfig({
       entry: {
         index: resolve(__dirname, "./src/index.ts"),
         client: resolve(__dirname, "./src/client.ts"),
-        hooks: resolve(__dirname, "./src/hooks/index.ts"),
         icons: resolve(__dirname, "./src/assets/icons/index.ts"),
         lib: resolve(__dirname, "./src/lib/index.ts"),
         logos: resolve(__dirname, "./src/assets/logos/index.ts"),
         mocks: resolve(__dirname, "./src/mocks/handlers.ts"),
         types: resolve(__dirname, "./src/types/index.ts"),
         theme: resolve(__dirname, "./src/theme/index.ts"),
+        "use-credential-verification": resolve(
+          __dirname,
+          "./src/hooks/useCredentialVerification.ts",
+        ),
+        "use-indexed-db": resolve(__dirname, "./src/hooks/useIndexedDB.ts"),
+        "use-persist-form": resolve(__dirname, "./src/hooks/usePersistForm.ts"),
+        "use-toast": resolve(__dirname, "./src/hooks/useToast.ts"),
 
         // features
         application: resolve(__dirname, "./src/features/application/index.ts"),