feat: add ScriptParameterField — all 7 field types

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-13 02:09:35 -04:00
parent 86a9d3b977
commit cb51940cdb
1 changed files with 151 additions and 0 deletions
--- a/frontend/src/components/scripts/ScriptParameterField.tsx
+++ b/frontend/src/components/scripts/ScriptParameterField.tsx
@@ -0,0 +1,151 @@
+import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
+import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
+import type { ScriptParameter } from '@/types'
+
+interface Props {
+  param: ScriptParameter
+  value: string
+  error: string | undefined
+  disabled: boolean
+}
+
+export function ScriptParameterField({ param, value, error, disabled }: Props) {
+  const setParamValue = useScriptGeneratorStore(s => s.setParamValue)
+  const [showPassword, setShowPassword] = useState(false)
+
+  const id = `param-${param.key}`
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setParamValue(param.key, e.target.value)
+  }
+
+  const handleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setParamValue(param.key, e.target.checked ? 'true' : 'false')
+  }
+
+  let input: React.ReactNode
+
+  if (param.type === 'text' || param.type === 'multi_text' || param.type === 'number') {
+    input = (
+      <Input
+        id={id}
+        type={param.type === 'number' ? 'number' : 'text'}
+        value={value}
+        onChange={handleChange}
+        placeholder={
+          param.type === 'multi_text'
+            ? 'Comma-separated values'
+            : (param.placeholder ?? undefined)
+        }
+        disabled={disabled}
+        error={error}
+      />
+    )
+  } else if (param.type === 'password') {
+    input = (
+      <div className="relative">
+        <Input
+          id={id}
+          type={showPassword ? 'text' : 'password'}
+          value={value}
+          onChange={handleChange}
+          placeholder={param.placeholder ?? undefined}
+          disabled={disabled}
+          error={error}
+        />
+        <button
+          type="button"
+          onClick={() => setShowPassword(v => !v)}
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          tabIndex={-1}
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+        >
+          {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
+        </button>
+      </div>
+    )
+  } else if (param.type === 'textarea') {
+    input = (
+      <Textarea
+        id={id}
+        value={value}
+        onChange={handleChange}
+        placeholder={param.placeholder ?? undefined}
+        disabled={disabled}
+        error={error}
+        rows={4}
+      />
+    )
+  } else if (param.type === 'select') {
+    input = (
+      <>
+        <select
+          id={id}
+          value={value}
+          onChange={handleChange}
+          disabled={disabled}
+          className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="">Select…</option>
+          {(param.options ?? []).map(opt => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        {error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
+      </>
+    )
+  } else if (param.type === 'boolean') {
+    input = (
+      <>
+        <div className="flex items-center gap-2">
+          <input
+            id={id}
+            type="checkbox"
+            checked={value === 'true'}
+            onChange={handleCheckbox}
+            disabled={disabled}
+            className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          <label htmlFor={id} className="text-sm text-foreground">
+            {param.label}
+          </label>
+        </div>
+        {error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
+      </>
+    )
+  } else {
+    // Fallback for unknown types
+    input = (
+      <Input
+        id={id}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        error={error}
+      />
+    )
+  }
+
+  // Boolean renders its own label inline; all others show the label above
+  const showTopLabel = param.type !== 'boolean'
+
+  return (
+    <div className="flex flex-col gap-1">
+      {showTopLabel && (
+        <label htmlFor={id} className="text-sm font-medium text-foreground">
+          {param.label}
+          {param.required && <span className="text-red-400 ml-0.5">*</span>}
+        </label>
+      )}
+      {input}
+      {param.help_text && (
+        <p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
+      )}
+    </div>
+  )
+}