feat: exports changes (#123)

* fix: gitcoin-ui exports

* chore: improve select component

* fix: round dates validation

Author: nijoe1

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",

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";

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}

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"],
     });
   }

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",

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;

src/components/ProgressModal/index.ts

@@ -1,3 +1,2 @@
 export * from "./ProgressModal";
 export * from "./utils";
-export * from "./types";

src/components/ProgressModal/utils.ts

@@ -1,4 +1,4 @@
-import { Step, ProgressStatus } from "./types";
+import { ProgressStatus, Step } from "@/types";
 
 export const getOnchainEvaluationProgressSteps = ({
   contractUpdatingStatus,

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";

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";
 

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 {

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";

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 {

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";

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);

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>
+  );
+};

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 />}

src/types/index.ts

@@ -3,3 +3,4 @@ export * from "./indexedDB";
 export * from "./markdown";
 export * from "./onClickProps";
 export * from "./pool";
+export * from "./progressModal";

src/components/ProgressModal/types.ts src/types/progressModal.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"),