feat(explorer): textarea string fields (#3746)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

Author: karooolis

.changeset/tame-gorillas-draw.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+String fields in the "Interact" tab now support multiline values.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/content/FunctionInput.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../../../../../components/ui/Form";
 import { Input } from "../../../../../../../components/ui/Input";
+import { Textarea } from "../../../../../../../components/ui/Textarea";
 import { useEnsAddress } from "./useEnsAddress";
 
 type Props = {
@@ -23,6 +24,21 @@ const getInputPlaceholder = (input: AbiParameter): string => {
   return `[${componentsString}]`;
 };
 
+type TextFieldProps = {
+  fieldType: string;
+  className?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+
+function TextField({ fieldType, ...props }: TextFieldProps) {
+  if (fieldType === "string") {
+    return <Textarea {...props} />;
+  }
+  return <Input {...props} />;
+}
+
 export function FunctionInput({ input, index }: Props) {
   const form = useFormContext();
   const currentValue = form.watch(`inputs.${index}`);
@@ -60,15 +76,18 @@ export function FunctionInput({ input, index }: Props) {
       name={`inputs.${index}`}
       render={({ field }) => (
         <FormItem className="flex flex-col gap-2">
-          <div className="flex items-start gap-4">
-            {input.name && <FormLabel className="shrink-0 pt-2 font-mono text-sm opacity-70">{input.name}</FormLabel>}
+          <div className="flex items-center gap-4">
+            {input.name && <FormLabel className="shrink-0 font-mono text-sm opacity-70">{input.name}</FormLabel>}
             <div className="flex-1">
               <FormControl>
-                <Input
+                <TextField
+                  className="font-mono text-sm"
                   placeholder={getInputPlaceholder(input)}
+                  fieldType={input.type}
                   value={field.value}
-                  onChange={(evt) => handleChange(evt.target.value)}
-                  className="font-mono text-sm"
+                  onChange={(evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                    handleChange(evt.target.value)
+                  }
                 />
               </FormControl>
               <FormMessage />

packages/explorer/src/components/ui/Textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "../../utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full",
+          "px-3 py-2",
+          "rounded-md border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "bg-background text-base",
+          "text-base md:text-sm",
+          "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:outline-none",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };