From 97b892602447fe2f29b0b15846157a44542d28cc Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Wed, 28 May 2025 15:47:22 +0000
Subject: [PATCH] [Dashboard] migrate external links form (#7156)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- refactor contract publish resources inputs
- use shadcn/ui Button, Input, and Separator
- apply tailwind classes

## Testing
- `pnpm biome check --apply apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx`
- `pnpm test` *(fails: spawn anvil ENOENT)*

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the UI components in the `ExternalLinksFieldset` and `ExternalLinksInput` files to improve the styling and structure using custom components instead of those from `tw-components` and `@chakra-ui/react`.

### Detailed summary
- Replaced `Heading` and `Text` with custom HTML elements in `ExternalLinksFieldset`.
- Updated button styles in `ExternalLinksFieldset` to use `variant="outline"` and added a `className`.
- Refactored `ExternalLinksInput` to use custom components (`Button`, `Input`, `Label`, `Separator`) instead of Chakra UI components.
- Changed layout structure in `ExternalLinksInput` to use `div` elements with flexbox for better styling.
- Added error message handling below input fields in `ExternalLinksInput`.

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

- **Style**
  - Updated form and button components to use new UI primitives and Tailwind CSS classes for a refreshed appearance.
  - Improved accessibility by linking input labels and error messages with appropriate HTML attributes.

- **Refactor**
  - Replaced Chakra UI components with custom or alternative UI components, maintaining existing functionality and validation logic.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../external-links-fieldset.tsx               | 14 +--
 .../external-links-input.tsx                  | 98 +++++++++----------
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
index 0ab9343d530..8d3df4685ba 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
@@ -1,7 +1,7 @@
+import { Button } from "@/components/ui/button";
 import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
-import { Button, Heading, Text } from "tw-components";
 import { ExternalLinksInput } from "./external-links-input";
 
 export const ExternalLinksFieldset = () => {
@@ -29,8 +29,10 @@ export const ExternalLinksFieldset = () => {
   return (
     <fieldset className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <Heading size="title.md">Resources</Heading>
-        <Text>Provide links to docs, usage guides etc. for the contract.</Text>
+        <h3 className="font-semibold text-xl tracking-tight">Resources</h3>
+        <p className="text-muted-foreground">
+          Provide links to docs, usage guides etc. for the contract.
+        </p>
       </div>
       <div className="flex flex-col gap-4">
         {fields.map((item, index) => (
@@ -40,9 +42,8 @@ export const ExternalLinksFieldset = () => {
           <Button
             type="button"
             size="sm"
-            colorScheme="primary"
-            borderRadius="md"
-            leftIcon={<PlusIcon className="size-5" />}
+            variant="outline"
+            className="gap-2"
             onClick={() =>
               append({
                 name: "",
@@ -50,6 +51,7 @@ export const ExternalLinksFieldset = () => {
               })
             }
           >
+            <PlusIcon className="size-5" />
             Add Resource
           </Button>
         </div>
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
index a102b23ab79..1bed8c27734 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
@@ -1,13 +1,9 @@
-import {
-  Divider,
-  Flex,
-  FormControl,
-  IconButton,
-  Input,
-} from "@chakra-ui/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { TrashIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
-import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface ExternalLinksInputProps {
   index: number;
@@ -21,38 +17,35 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
   const form = useFormContext();
 
   return (
-    <Flex flexDir="column" gap={2}>
-      <Flex
-        w="full"
-        gap={{ base: 4, md: 2 }}
-        flexDir={{ base: "column", md: "row" }}
-      >
-        <FormControl
-          as={Flex}
-          flexDir="column"
-          gap={1}
-          isInvalid={
-            !!form.getFieldState(`externalLinks.${index}.name`, form.formState)
-              .error
-          }
-        >
-          <FormLabel textTransform="capitalize">Resource Name</FormLabel>
+    <div className="flex flex-col gap-2">
+      <div className="flex w-full flex-col gap-4 md:flex-row md:gap-2">
+        <div className="flex flex-1 flex-col gap-1">
+          <Label htmlFor={`externalLinks.${index}.name`} className="capitalize">
+            Resource Name
+          </Label>
           <Input
+            id={`externalLinks.${index}.name`}
             placeholder="Resource name"
             {...form.register(`externalLinks.${index}.name`)}
           />
-        </FormControl>
-        <FormControl
-          as={Flex}
-          flexDir="column"
-          gap={1}
-          isInvalid={
-            !!form.getFieldState(`externalLinks.${index}.url`, form.formState)
-              .error
-          }
-        >
-          <FormLabel textTransform="capitalize">Link</FormLabel>
+          {form.getFieldState(`externalLinks.${index}.name`, form.formState)
+            .error?.message && (
+            <p className="text-destructive-text text-sm">
+              {
+                form.getFieldState(
+                  `externalLinks.${index}.name`,
+                  form.formState,
+                ).error?.message
+              }
+            </p>
+          )}
+        </div>
+        <div className="flex flex-1 flex-col gap-1">
+          <Label htmlFor={`externalLinks.${index}.url`} className="capitalize">
+            Link
+          </Label>
           <Input
+            id={`externalLinks.${index}.url`}
             placeholder="Provide URL to the resource page"
             {...form.register(`externalLinks.${index}.url`, {
               required: true,
@@ -64,21 +57,28 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
               },
             })}
           />
-          <FormErrorMessage>
-            {
-              form.getFieldState(`externalLinks.${index}.url`, form.formState)
-                .error?.message
-            }
-          </FormErrorMessage>
-        </FormControl>
-        <IconButton
-          icon={<TrashIcon className="size-5" />}
+          {form.getFieldState(`externalLinks.${index}.url`, form.formState)
+            .error?.message && (
+            <p className="text-destructive-text text-sm">
+              {
+                form.getFieldState(`externalLinks.${index}.url`, form.formState)
+                  .error?.message
+              }
+            </p>
+          )}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
           aria-label="Remove row"
           onClick={() => remove(index)}
-          alignSelf="end"
-        />
-      </Flex>
-      <Divider />
-    </Flex>
+          className="self-end"
+        >
+          <TrashIcon className="size-5" />
+          <span className="sr-only">Remove row</span>
+        </Button>
+      </div>
+      <Separator />
+    </div>
   );
 };