feat: add textarea component

Author: jaaydenh

site/src/DynamicForm.tsx

@@ -20,6 +20,7 @@ import ReactJson from 'react-json-view';
 import { RadioGroup, RadioGroupItem } from "./components/ui/radio-group"
 import { Label } from "./components/Label/Label";
 import { Checkbox } from "./components/Checkbox/Checkbox";
+import { Textarea } from "./components/Textarea/Textarea";
 
 export function DynamicForm() {
   const serverAddress = "localhost:8100";
@@ -366,6 +367,31 @@ export function DynamicForm() {
                 />
               </div>
               )
+              case "textarea":
+                return (
+                  <div key={param.name} className="flex flex-col gap-2 items-center">
+                  <div className="flex items-center justify-between gap-2">
+                    <label>
+                      {param.display_name || param.name}
+                      {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
+                    </label>
+                  </div>
+                  {param.description && <div className="text-sm">{param.description}</div>}
+                  <Controller
+                  name={param.name}
+                  control={methods.control}
+                  render={({ field }) => (
+                    <div className="w-[300px]">
+                      <Textarea
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        disabled={(param.form_type_metadata as { disabled?: boolean })?.disabled}
+                      />
+                    </div>
+                  )}
+                />
+                </div>
+                )
       }
     }
 

site/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-content-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

testdata/formtypes/main.tf

@@ -79,13 +79,23 @@ data "coder_parameter" "string_without_opts" {
   icon         = "/emojis/0031-fe0f-20e3.png"
 }
 
+data "coder_parameter" "textarea_without_opts" {
+  name         = "textarea"
+  display_name = "String"
+  description  = "Textarea"
+  type         = "string"
+  form_type    = "textarea"
+  order        = 4
+  icon         = "/emojis/0031-fe0f-20e3.png"
+}
+
 data "coder_parameter" "bool_with_opts" {
   // should be 'radio'
   name         = "bool_with_opts"
   display_name = "Bool"
   description  = "Bool with options"
   type         = "bool"
-  order        = 4
+  order        = 5
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = false
 
@@ -108,7 +118,7 @@ data "coder_parameter" "bool_without_opts" {
   display_name = "Bool"
   description  = "Bool without options"
   type         = "bool"
-  order        = 5
+  order        = 6
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = false
 }
@@ -119,7 +129,7 @@ data "coder_parameter" "bool_without_opts_switch" {
   description  = "Bool without options, but it is a switch"
   type         = "bool"
   form_type    = "switch"
-  order        = 6
+  order        = 7
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = false
 }
@@ -130,7 +140,7 @@ data "coder_parameter" "list_string_options" {
   display_name = "List(String)"
   description  = "list(string) with options"
   type         = "list(string)"
-  order        = 7
+  order        = 8
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = jsonencode(["purple", "blue", "green", "red", "orange"])
 
@@ -159,7 +169,7 @@ data "coder_parameter" "list_string_without_options" {
   display_name = "List(String)"
   description  = "list(string) with options"
   type         = "list(string)"
-  order        = 8
+  order        = 9
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = jsonencode(["purple", "blue", "green", "red", "orange"])
   // You could send jsonencode(["airplane", "car", "school"])
@@ -172,7 +182,7 @@ data "coder_parameter" "list_string_multi_select_options" {
   description  = "list(string) with options"
   type         = "list(string)"
   form_type    = "multi-select"
-  order        = 8
+  order        = 10
   icon         = "/emojis/0031-fe0f-20e3.png"
   default      = jsonencode(["blue", "green", "red"])