Dashboard: Migrate Claim condition components from chakra to tailwind, UI improvements (#7731)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the user interface and functionality of the claim conditions forms in the dashboard application. It includes updates to component structures, styling improvements, and the introduction of new features for better user experience.

### Detailed summary
- Removed unused CSV files from the assets.
- Updated `variant` prop in `tx-button` to include "outline".
- Adjusted styles in `drop-zone` for improved layout.
- Enhanced text styles in `price-preview` and `claim-conditions` components.
- Replaced `CustomFormControl` with `FormFieldSetup` for better form handling.
- Added new components for displaying and managing claim conditions.
- Improved error handling and user feedback in various input components.
- Refactored `ClaimPriceInput` and other input components to streamline functionality.
- Introduced a new `SnapshotDataTable` for better display of CSV data.
- Enhanced snapshot upload functionality with clearer requirements and examples.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added support for an "outline" button style variant in transaction buttons.

* **Refactor**
  * Replaced Chakra UI components with a custom UI library and Tailwind CSS across claim conditions forms and related components.
  * Simplified and reorganized the layout of claim conditions phases, downloadable code blocks, and snapshot upload views for improved clarity and usability.
  * Updated CSV upload and data table experience with enhanced error display and a new code example download feature.

* **Style**
  * Improved spacing, typography, and overall visual consistency throughout claim conditions and related dashboard components.

* **Chores**
  * Removed unused or redundant components and files related to previous form controls and CSV tables.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/public/assets/examples/snapshot-with-maxclaimable.csv

@@ -1,5 +1,5 @@
 "use client";
-import { ArrowDownToLineIcon } from "lucide-react";
+import { ArrowDownToLineIcon, FileTextIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { handleDownload } from "../download-file-button";
@@ -10,27 +10,36 @@ export function DownloadableCode(props: {
   fileNameWithExtension: string;
 }) {
   return (
-    <div className="!my-3 relative">
-      <CodeClient
-        code={props.code}
-        lang={props.lang}
-        scrollableClassName="max-h-[300px] bg-background"
-      />
-
-      <Button
-        className="absolute top-3.5 right-14 mt-[1px] h-auto bg-background p-2"
-        onClick={() => {
-          handleDownload({
-            fileContent: props.code,
-            fileFormat: props.lang === "csv" ? "text/csv" : "application/json",
-            fileNameWithExtension: props.fileNameWithExtension,
-          });
-        }}
-        size="sm"
-        variant="outline"
-      >
-        <ArrowDownToLineIcon className="size-3" />
-      </Button>
+    <div className="!my-5 bg-card">
+      <p className="text-sm text-muted-foreground border border-b-0 px-4 py-3 pr-3.5 rounded-lg rounded-b-none flex items-center justify-between">
+        <span className="flex items-center gap-1.5">
+          <FileTextIcon className="size-3.5" />
+          {props.fileNameWithExtension}
+        </span>
+        <Button
+          className="h-auto bg-background p-2"
+          onClick={() => {
+            handleDownload({
+              fileContent: props.code,
+              fileFormat:
+                props.lang === "csv" ? "text/csv" : "application/json",
+              fileNameWithExtension: props.fileNameWithExtension,
+            });
+          }}
+          size="sm"
+          variant="outline"
+        >
+          <ArrowDownToLineIcon className="size-3" />
+        </Button>
+      </p>
+      <div className="relative">
+        <CodeClient
+          code={props.code}
+          lang={props.lang}
+          scrollableClassName="max-h-[300px] bg-background bg-card"
+          className="rounded-t-none"
+        />
+      </div>
     </div>
   );
 }

apps/dashboard/public/assets/examples/snapshot-with-overrides.csv

@@ -26,7 +26,7 @@ export function DropZone(props: {
   return (
     <div
       className={cn(
-        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border",
+        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border px-4",
         props.isError &&
           "border-red-500 bg-red-200/30 text-red-500 hover:border-red-600 dark:border-red-900 dark:bg-red-900/30 dark:hover:border-red-800",
         props.className,

apps/dashboard/public/assets/examples/snapshot.csv

@@ -28,7 +28,7 @@ type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
   transactionCount: number | undefined; // support for unknown number of tx count
   isPending: boolean;
   txChainID: number;
-  variant?: "destructive" | "primary" | "default";
+  variant?: "destructive" | "primary" | "default" | "outline";
   isLoggedIn: boolean;
   checkBalance?: boolean;
   client: ThirdwebClient;

apps/dashboard/src/@/components/blocks/code/downloadable-code.tsx

@@ -1,47 +1,40 @@
-import { Box, Flex } from "@chakra-ui/react";
 import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { CurrencySelector } from "@/components/blocks/CurrencySelector";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { cn } from "@/lib/utils";
 import { PriceInput } from "../../price-input";
 import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
 
 /**
  * Allows the user to select how much they want to charge to claim each NFT
  */
 export const ClaimPriceInput = (props: { contractChainId: number }) => {
-  const {
-    formDisabled,
-    isErc20,
-    form,
-    phaseIndex,
-    field,
-    isColumn,
-    claimConditionType,
-  } = useClaimConditionsFormContext();
+  const { formDisabled, isErc20, form, phaseIndex, field, claimConditionType } =
+    useClaimConditionsFormContext();
 
   if (claimConditionType === "creator") {
     return null;
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.price`, form.formState).error
+          ?.message
       }
       label={`How much do you want to charge to claim each ${
         isErc20 ? "token" : "NFT"
       }?`}
     >
-      <Flex flexDir={{ base: "column", md: "row" }} gap={2}>
-        <Box minW="70px" w={{ base: "100%", md: "50%" }}>
-          <PriceInput
-            onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
-            value={field.price?.toString() || ""}
-            w="full"
-          />
-        </Box>
-        <Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
+      <div className={cn("flex flex-col md:flex-row gap-3")}>
+        <PriceInput
+          onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
+          value={field.price?.toString() || ""}
+          disabled={formDisabled}
+          className="max-w-48"
+        />
+        <div className="grow max-w-md">
           <CurrencySelector
             contractChainId={props.contractChainId}
             isDisabled={formDisabled}
@@ -53,8 +46,8 @@ export const ClaimPriceInput = (props: { contractChainId: number }) => {
             }
             value={field?.currencyAddress || NATIVE_TOKEN_ADDRESS}
           />
-        </Box>
-      </Flex>
-    </CustomFormControl>
+        </div>
+      </div>
+    </FormFieldSetup>
   );
 };

apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx

@@ -1,8 +1,15 @@
-import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
-import { useClaimConditionsFormContext } from "..";
-import { CustomFormControl } from "../common";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useClaimConditionsFormContext } from "../index";
 
 /**
  * Allows the user to
@@ -19,12 +26,11 @@ export const ClaimerSelection = () => {
     isErc20,
     setOpenSnapshotIndex: setOpenIndex,
     isAdmin,
-    isColumn,
     claimConditionType,
   } = useClaimConditionsFormContext();
 
-  const handleClaimerChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const val = e.currentTarget.value as "any" | "specific" | "overrides";
+  const handleClaimerChange = (value: string) => {
+    const val = value as "any" | "specific" | "overrides";
 
     if (val === "any") {
       form.setValue(`phases.${phaseIndex}.snapshot`, undefined);
@@ -80,79 +86,69 @@ export const ClaimerSelection = () => {
         : `Who can claim ${isErc20 ? "tokens" : "NFTs"} during this phase?`;
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
-      error={
+    <FormFieldSetup
+      errorMessage={
         form.getFieldState(`phases.${phaseIndex}.snapshot`, form.formState)
-          .error
+          ?.error?.message
       }
       helperText={helperText}
       label={label}
+      isRequired={false}
     >
-      <Flex direction={{ base: "column", md: "row" }} gap={4}>
+      <div className="flex flex-col md:flex-row gap-4">
         {claimConditionType === "overrides" ||
         claimConditionType === "specific" ? null : (
           <Select
-            isDisabled={formDisabled}
-            onChange={handleClaimerChange}
+            disabled={formDisabled}
+            onValueChange={handleClaimerChange}
             value={dropType}
-            w={{ base: "100%", md: "50%" }}
           >
-            <option value="any">Any wallet</option>
-            <option value="overrides">Any wallet (with overrides)</option>
-            <option value="specific">Only specific wallets</option>
+            <SelectTrigger className="w-full md:w-1/2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="any">Any wallet</SelectItem>
+              <SelectItem value="overrides">
+                Any wallet (with overrides)
+              </SelectItem>
+              <SelectItem value="specific">Only specific wallets</SelectItem>
+            </SelectContent>
           </Select>
         )}
 
         {/* Edit or See Snapshot */}
         {field.snapshot ? (
-          <Flex
-            direction={{
-              base: "column",
-              md: isColumn ? "column" : "row",
-            }}
-            gap={1.5}
-          >
+          <div className="flex items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
               className="gap-2 rounded-md"
               disabled={disabledSnapshotButton}
               onClick={() => setOpenIndex(phaseIndex)}
-              variant="primary"
+              size="sm"
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
               <UploadIcon className="size-4" />
             </Button>
 
-            <Flex
-              _light={{
-                color: field.snapshot?.length === 0 ? "red.500" : "green.500",
-              }}
-              align="center"
-              color={field.snapshot?.length === 0 ? "red.400" : "green.400"}
-              direction="row"
-              gap={2}
-              justify="center"
-              ml={2}
-              opacity={disabledSnapshotButton ? 0.5 : 1}
+            <div
+              className={cn(
+                "flex gap-2 items-center",
+                field.snapshot?.length === 0
+                  ? "text-muted-foreground"
+                  : "text-green-600 dark:text-green-500",
+                disabledSnapshotButton ? "opacity-50" : "",
+              )}
             >
-              <p>
-                ●{" "}
-                <strong>
-                  {field.snapshot?.length} address
-                  {field.snapshot?.length === 1 ? "" : "es"}
-                </strong>{" "}
-                in snapshot
-              </p>
-            </Flex>
-          </Flex>
-        ) : (
-          <Box
-            display={{ base: "none", md: "block" }}
-            w={{ base: "100%", md: "50%" }}
-          />
-        )}
-      </Flex>
-    </CustomFormControl>
+              <div className="size-2 bg-current rounded-full" />
+              <span className="text-sm">
+                {field.snapshot?.length}{" "}
+                {field.snapshot?.length === 1 ? "address" : "addresses"} in
+                snapshot
+              </span>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </FormFieldSetup>
   );
 };

apps/dashboard/src/@/components/tx-button/index.tsx

@@ -1,6 +1,6 @@
 import { useActiveAccount } from "thirdweb/react";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Input } from "@/components/ui/input";
-import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -14,17 +14,17 @@ interface CreatorInputProps {
 export const CreatorInput: React.FC<CreatorInputProps> = ({
   creatorAddress,
 }) => {
-  const { formDisabled, claimConditionType, isAdmin } =
-    useClaimConditionsFormContext();
+  const { claimConditionType, isAdmin } = useClaimConditionsFormContext();
   const walletAddress = useActiveAccount()?.address;
 
   if (claimConditionType !== "creator") {
     return null;
   }
 
   return (
-    <CustomFormControl
-      disabled={formDisabled}
+    <FormFieldSetup
+      isRequired={false}
+      errorMessage={undefined}
       helperText={
         <>
           This wallet address will be able to indefinitely claim.{" "}
@@ -34,7 +34,12 @@ export const CreatorInput: React.FC<CreatorInputProps> = ({
       }
       label="Creator address"
     >
-      <Input disabled readOnly value={creatorAddress || walletAddress} />
-    </CustomFormControl>
+      <Input
+        disabled
+        readOnly
+        value={creatorAddress || walletAddress}
+        className="disabled:opacity-100 max-w-sm"
+      />
+    </FormFieldSetup>
   );
 };