WIP: migrating PropertiesFormControl to shadcnui + tailwind

Author: GWSzeto

apps/dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "format": "biome format ./src --write",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx

@@ -20,7 +20,6 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { useMutation } from "@tanstack/react-query";
-import { PropertiesFormControl } from "components/contract-pages/forms/properties.shared";
 import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
@@ -33,6 +32,7 @@ import { ModuleCardUI, type ModuleCardUIProps } from "./module-card";
 import type { ModuleInstanceProps } from "./module-instance";
 import { AdvancedNFTMetadataFormGroup } from "./nft/AdvancedNFTMetadataFormGroup";
 import { NFTMediaFormGroup } from "./nft/NFTMediaFormGroup";
+import { PropertiesFormControl } from "./nft/PropertiesFormControl";
 
 export type UploadMetadataFormValues = NFTMetadataInputLimited & {
   supply: number;
@@ -181,12 +181,8 @@ function UploadMetadataNFTSection(props: {
                 )}
               />
 
-              {/* TODO - convert to shadcn + tailwind */}
               <PropertiesFormControl
-                watch={form.watch}
-                errors={form.formState.errors}
                 control={form.control}
-                register={form.register}
                 setValue={form.setValue}
               />
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/PropertiesFormControl.tsx

@@ -0,0 +1,111 @@
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { BanIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  type ArrayPath,
+  type FieldValues,
+  type UseFormReturn,
+  useFieldArray,
+} from "react-hook-form";
+
+type OptionalPropertiesInput = {
+  [key: string]: string | number;
+};
+
+interface IPropertyFieldValues extends FieldValues {
+  attributes?: OptionalPropertiesInput;
+}
+
+export function PropertiesFormControl<
+  TFieldValues extends IPropertyFieldValues,
+>({
+  form,
+}: {
+  form: UseFormReturn<TFieldValues>;
+}) {
+  const { fields, append, remove, replace } = useFieldArray({
+    control: form.control,
+    name: "attributes" as ArrayPath<TFieldValues>,
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-2">
+        <p>Attributes</p>
+        <Button
+          className="flex items-center gap-2"
+          variant="destructive"
+          size="sm"
+          // biome-ignore lint/suspicious/noExplicitAny: FIXME
+          onClick={() =>
+            form.setValue("attributes", [{ trait_type: "", value: "" } as any])
+          }
+        >
+          Reset
+          <BanIcon className="size-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {/* Addresses */}
+        {fields.map((fieldItem, index) => (
+          <div className="flex items-start gap-3" key={fieldItem.id}>
+            <FormField
+              control={form.control}
+              name={`attributes.${index}.trait_type`}
+              render={({ field }) => (
+                <FormItem className="grow">
+                  <FormControl>
+                    <Input placeholder="0x..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name={`attributes.${index}.value`}
+              render={({ field }) => (
+                <FormItem className="grow">
+                  <FormControl>
+                    <Input placeholder="0x..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button
+              variant="outline"
+              className="!text-destructive-text bg-background"
+              onClick={() => remove(index)}
+            >
+              <Trash2Icon className="size-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-row gap-2">
+        <Button
+          size="sm"
+          className="flex items-center gap-2"
+          onClick={() =>
+            // biome-ignore lint/suspicious/noExplicitAny: FIXME
+            append({ trait_type: undefined, value: undefined } as any)
+          }
+        >
+          <PlusIcon className="size-5" />
+          Add Row
+        </Button>
+      </div>
+    </div>
+  );
+}