From 1f42ad2a2dd58640485bc7cca1bc01a045a0d744 Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Thu, 29 May 2025 21:25:21 +0000
Subject: [PATCH] [Dashboard] migrate SelectOption to shadcn (#7194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrated the `SelectOption` component in the dashboard batch upload flow to use shadcn/ui primitives and Tailwind classes.

- Replaced Chakra `Tooltip`, `Flex`, and `Radio` usage with `ToolTipLabel` and Tailwind markup
- Switched to shadcn/ui `Card`
- Removed dependency on Chakra typography components
- Updated component props to extend HTML attributes

Fixes migration step towards removing Chakra.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `SelectOption` component to improve its structure and styling. It replaces the `Tooltip` from `@chakra-ui/react` with a custom `ToolTipLabel`, modifies the layout and styling, and enhances the handling of props.

### Detailed summary
- Changed `SelectOptionProps` to extend `React.HTMLAttributes<HTMLDivElement>`.
- Replaced `Tooltip` with `ToolTipLabel`.
- Updated the card styling and structure.
- Modified the layout for `Radio` to a custom implementation.
- Adjusted class names for better styling consistency.
- Changed the rendering of `name` and `description` to use HTML elements directly.

> ✨ 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

- **Refactor**
  - Updated the selection option component with custom UI elements and Tailwind CSS styling, removing dependencies on Chakra UI and previous component libraries.
  - Improved accessibility and styling for tooltips, cards, and selection indicators.
  - Maintained original functionality and interactions with a refreshed look and feel.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../lazy-mint-form/select-option.tsx          | 98 +++++++------------
 1 file changed, 38 insertions(+), 60 deletions(-)

diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
index 5eb8f1e6699..fe89f4c366d 100644
--- a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -1,10 +1,10 @@
+import { Card } from "@/components/ui/card";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { Flex, Radio, Tooltip } from "@chakra-ui/react";
 import { InfoIcon } from "lucide-react";
 import type { JSX, MouseEventHandler } from "react";
-import { Card, Heading, Text } from "tw-components";
 
-interface SelectOptionProps {
+interface SelectOptionProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string;
   description?: string;
   isActive?: boolean;
@@ -24,84 +24,62 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   disabledText,
   infoText,
   className,
-  ...stackProps
+  ...divProps
 }) => {
   return (
-    <Tooltip
+    <ToolTipLabel
       label={
-        disabled && (
-          <Card bgColor="backgroundHighlight">
-            <Text>{disabledText}</Text>
+        disabled ? (
+          <Card className="bg-muted p-3">
+            <p className="text-sm">{disabledText}</p>
           </Card>
-        )
+        ) : undefined
       }
-      bg="transparent"
-      boxShadow="none"
-      p={0}
-      shouldWrapChildren
     >
       <Card
         className={cn(
-          "flex flex-col gap-2 rounded-md p-5",
+          "flex flex-col gap-2 rounded-md p-5 md:w-[350px]",
           disabled
-            ? "pointer-events-none cursor-not-allowed"
+            ? "pointer-events-none cursor-not-allowed bg-muted"
             : "cursor-pointer",
+          isActive && "border-primary",
           className,
         )}
-        width={{ base: "inherit", md: "350px" }}
-        borderColor={isActive ? "primary.500" : undefined}
-        bgColor={disabled ? "backgroundHighlight" : undefined}
-        {...stackProps}
         onClick={onClick}
+        {...divProps}
       >
-        <Flex flexDirection="row" justifyContent="space-between">
-          <div className="flex flex-row items-start gap-0">
-            <Radio
-              cursor="pointer"
-              size="lg"
-              colorScheme="primary"
-              mt={0.5}
-              mr={2.5}
-              isChecked={isActive}
-              isDisabled={disabled}
-            />
+        <div className="flex flex-row justify-between">
+          <div className="flex flex-row items-start">
+            <div className="mt-0.5 mr-2.5 flex h-4 w-4 items-center justify-center rounded-full border border-inverted text-inverted">
+              {isActive && <div className="h-2 w-2 rounded-full bg-inverted" />}
+            </div>
             <div className="ml-4 flex flex-col gap-2 self-start">
-              <Heading
-                size="subtitle.sm"
-                fontWeight="700"
-                mb={0}
-                color={disabled ? "gray.600" : "inherit"}
+              <h4
+                className={cn(
+                  "font-semibold text-sm",
+                  disabled && "text-gray-600",
+                )}
               >
                 {name}
-              </Heading>
-              {description && (
-                <Text size="body.sm" mt="4px">
-                  {description}
-                </Text>
-              )}
+              </h4>
+              {description && <p className="mt-1 text-sm">{description}</p>}
             </div>
           </div>
           {infoText && (
-            <div className="flex flex-row">
-              <Tooltip
-                bg="transparent"
-                boxShadow="none"
-                p={0}
-                shouldWrapChildren
-                label={
-                  <Card bgColor="backgroundHighlight">
-                    <Text>{infoText}</Text>
-                  </Card>
-                }
-              >
-                <Flex alignItems="center">
-                  <InfoIcon className="size-4" />
-                </Flex>
-              </Tooltip>
-            </div>
+            <ToolTipLabel
+              label={
+                <Card className="bg-muted p-3">
+                  <p className="text-sm">{infoText}</p>
+                </Card>
+              }
+            >
+              <div className="flex items-center">
+                <InfoIcon className="size-4" />
+              </div>
+            </ToolTipLabel>
           )}
-        </Flex>
+        </div>
       </Card>
-    </Tooltip>
+    </ToolTipLabel>
   );
 };