@camstack/addon-admin-ui 0.1.1

package/src/components/form-builder/FormField.tsx

@@ -0,0 +1,732 @@
+import { useState, useCallback, useRef } from 'react'
+import { Eye, EyeOff, X } from 'lucide-react'
+import type {
+  ConfigField,
+  ConfigGroupField,
+  ConfigInfoField,
+  ConfigMultiSelectField,
+  ConfigNumberField,
+  ConfigBooleanField,
+  ConfigSelectField,
+  ConfigColorField,
+  ConfigTextAreaField,
+  ConfigSliderField,
+  ConfigTagsField,
+  ConfigPasswordField,
+  ConfigTextField,
+  ConfigModelSelectorField,
+} from '../../types/config-ui'
+import { ModelSelector } from './ModelSelector'
+import type { TranslationFn } from './FormBuilder'
+import { resolveLabel } from './FormBuilder'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface FormFieldProps {
+  field: ConfigField
+  values: Record<string, unknown>
+  onChange: (key: string, value: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const INPUT_CLASS =
+  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed'
+
+const LABEL_CLASS = 'block text-xs font-medium text-foreground mb-1'
+const DESC_CLASS = 'text-[10px] text-foreground-subtle mt-0.5'
+
+function FieldWrapper({
+  label,
+  description,
+  required,
+  span,
+  children,
+  translationFn,
+}: {
+  label?: string
+  description?: string
+  required?: boolean
+  span?: number
+  children: React.ReactNode
+  translationFn?: TranslationFn
+}) {
+  const colSpanClass =
+    span === 2
+      ? 'col-span-2'
+      : span === 3
+      ? 'col-span-3'
+      : span === 4
+      ? 'col-span-4'
+      : 'col-span-1'
+
+  const resolvedLabel = resolveLabel(label, translationFn)
+  const resolvedDescription = resolveLabel(description, translationFn)
+
+  return (
+    <div className={colSpanClass}>
+      {resolvedLabel !== undefined && (
+        <label className={LABEL_CLASS}>
+          {resolvedLabel}
+          {required && <span className="text-danger ml-0.5">*</span>}
+        </label>
+      )}
+      {children}
+      {resolvedDescription && <p className={DESC_CLASS}>{resolvedDescription}</p>}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Field renderers
+// ---------------------------------------------------------------------------
+
+function TextField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigTextField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <input
+        type={field.inputType ?? 'text'}
+        className={INPUT_CLASS}
+        value={value === undefined || value === null ? '' : String(value)}
+        placeholder={field.placeholder}
+        maxLength={field.maxLength}
+        pattern={field.pattern}
+        disabled={disabled || field.disabled}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </FieldWrapper>
+  )
+}
+
+function NumberField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigNumberField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="flex items-center gap-1">
+        <input
+          type="number"
+          className={INPUT_CLASS}
+          value={value === undefined || value === null ? '' : String(value)}
+          placeholder={field.placeholder}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          disabled={disabled || field.disabled}
+          onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+        />
+        {field.unit && (
+          <span className="text-xs text-foreground-subtle whitespace-nowrap">{field.unit}</span>
+        )}
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function BooleanField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigBooleanField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const checked = Boolean(value)
+  const isDisabled = disabled || field.disabled
+
+  if (field.style === 'checkbox') {
+    return (
+      <FieldWrapper label={undefined} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+        <label className="flex items-center gap-2 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            className="h-3.5 w-3.5 rounded border-border accent-primary"
+            checked={checked}
+            disabled={isDisabled}
+            onChange={(e) => onChange(e.target.checked)}
+          />
+          <span className="text-xs font-medium text-foreground">{resolveLabel(field.label, translationFn)}</span>
+          {field.required && <span className="text-danger">*</span>}
+        </label>
+      </FieldWrapper>
+    )
+  }
+
+  // Default: toggle switch
+  return (
+    <FieldWrapper label={undefined} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="flex items-center justify-between">
+        <span className={LABEL_CLASS + ' mb-0'}>
+          {resolveLabel(field.label, translationFn)}
+          {field.required && <span className="text-danger ml-0.5">*</span>}
+        </span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={checked}
+          disabled={isDisabled}
+          onClick={() => !isDisabled && onChange(!checked)}
+          className={[
+            'relative inline-flex h-4 w-8 shrink-0 items-center rounded-full transition-colors duration-150',
+            checked ? 'bg-primary' : 'bg-foreground-subtle/30',
+            isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+          ].join(' ')}
+        >
+          <span
+            className={[
+              'inline-block h-3 w-3 rounded-full bg-white shadow transition-transform duration-150',
+              checked ? 'translate-x-4' : 'translate-x-0.5',
+            ].join(' ')}
+          />
+        </button>
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function SelectField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigSelectField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <select
+        className={INPUT_CLASS}
+        value={value === undefined || value === null ? '' : String(value)}
+        disabled={disabled || field.disabled}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {!field.required && <option value="">— Select —</option>}
+        {field.options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </FieldWrapper>
+  )
+}
+
+function MultiSelectField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigMultiSelectField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const selected = Array.isArray(value) ? (value as string[]) : []
+
+  const toggle = (optValue: string) => {
+    if (selected.includes(optValue)) {
+      onChange(selected.filter((v) => v !== optValue))
+    } else {
+      if (field.maxItems !== undefined && selected.length >= field.maxItems) return
+      onChange([...selected, optValue])
+    }
+  }
+
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="flex flex-wrap gap-2">
+        {field.options.map((opt) => {
+          const checked = selected.includes(opt.value)
+          return (
+            <label
+              key={opt.value}
+              className={[
+                'flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs cursor-pointer select-none transition-colors',
+                checked
+                  ? 'border-primary bg-primary/10 text-primary'
+                  : 'border-border bg-background text-foreground hover:bg-surface',
+                (disabled || field.disabled) ? 'opacity-50 cursor-not-allowed' : '',
+              ].join(' ')}
+            >
+              <input
+                type="checkbox"
+                className="sr-only"
+                checked={checked}
+                disabled={disabled || field.disabled}
+                onChange={() => toggle(opt.value)}
+              />
+              {opt.label}
+            </label>
+          )
+        })}
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function PasswordField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigPasswordField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const [show, setShow] = useState(false)
+  const showToggle = field.showToggle !== false
+
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="relative">
+        <input
+          type={show ? 'text' : 'password'}
+          className={INPUT_CLASS + (showToggle ? ' pr-9' : '')}
+          value={value === undefined || value === null ? '' : String(value)}
+          placeholder={field.placeholder}
+          disabled={disabled || field.disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {showToggle && (
+          <button
+            type="button"
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground"
+            tabIndex={-1}
+            onClick={() => setShow((s) => !s)}
+          >
+            {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+          </button>
+        )}
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function TextAreaField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigTextAreaField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <textarea
+        className={INPUT_CLASS + ' resize-y min-h-[60px]'}
+        value={value === undefined || value === null ? '' : String(value)}
+        placeholder={field.placeholder}
+        rows={field.rows ?? 3}
+        maxLength={field.maxLength}
+        disabled={disabled || field.disabled}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </FieldWrapper>
+  )
+}
+
+function SliderField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigSliderField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const numVal = value === undefined || value === null ? field.min : Number(value)
+  const showValue = field.showValue !== false
+
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="flex items-center gap-3">
+        <input
+          type="range"
+          className="flex-1 h-1 accent-primary cursor-pointer disabled:opacity-50"
+          min={field.min}
+          max={field.max}
+          step={field.step ?? 1}
+          value={numVal}
+          disabled={disabled || field.disabled}
+          onChange={(e) => onChange(Number(e.target.value))}
+        />
+        {showValue && (
+          <span className="text-xs text-foreground tabular-nums min-w-[2.5rem] text-right">
+            {numVal}
+            {field.unit ? ` ${field.unit}` : ''}
+          </span>
+        )}
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function TagsField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigTagsField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const tags = Array.isArray(value) ? (value as string[]) : []
+  const [input, setInput] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const addTag = useCallback(
+    (tag: string) => {
+      const trimmed = tag.trim()
+      if (!trimmed || tags.includes(trimmed)) return
+      if (field.maxTags !== undefined && tags.length >= field.maxTags) return
+      onChange([...tags, trimmed])
+      setInput('')
+    },
+    [tags, field.maxTags, onChange],
+  )
+
+  const removeTag = (tag: string) => onChange(tags.filter((t) => t !== tag))
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault()
+      addTag(input)
+    } else if (e.key === 'Backspace' && input === '' && tags.length > 0) {
+      removeTag(tags[tags.length - 1]!)
+    }
+  }
+
+  const isDisabled = disabled || field.disabled
+
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div
+        className={[
+          'flex flex-wrap gap-1.5 rounded-md border border-border bg-background px-2 py-1.5 min-h-[38px] cursor-text',
+          'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/30',
+          isDisabled ? 'opacity-50 cursor-not-allowed' : '',
+        ].join(' ')}
+        onClick={() => !isDisabled && inputRef.current?.focus()}
+      >
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-1.5 py-0.5 text-xs text-primary"
+          >
+            {tag}
+            {!isDisabled && (
+              <button type="button" onClick={() => removeTag(tag)} className="hover:text-danger">
+                <X className="h-2.5 w-2.5" />
+              </button>
+            )}
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          type="text"
+          className="flex-1 min-w-[80px] bg-transparent text-sm text-foreground outline-none placeholder:text-foreground-disabled"
+          value={input}
+          placeholder={tags.length === 0 ? (field.placeholder ?? 'Add tags…') : ''}
+          disabled={isDisabled}
+          list={`tags-suggestions-${field.key}`}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={() => { if (input.trim()) addTag(input) }}
+        />
+        {field.suggestions && (
+          <datalist id={`tags-suggestions-${field.key}`}>
+            {field.suggestions.map((s) => (
+              <option key={s} value={s} />
+            ))}
+          </datalist>
+        )}
+      </div>
+    </FieldWrapper>
+  )
+}
+
+function ColorField({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigColorField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const strVal = value === undefined || value === null ? '#000000' : String(value)
+
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <div className="flex items-center gap-2">
+        <input
+          type="color"
+          className="h-9 w-9 rounded-md border border-border bg-background cursor-pointer p-0.5 disabled:opacity-50"
+          value={strVal}
+          disabled={disabled || field.disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        <input
+          type="text"
+          className={INPUT_CLASS + ' flex-1 font-mono'}
+          value={strVal}
+          placeholder="#000000"
+          disabled={disabled || field.disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </div>
+      {field.presets && field.presets.length > 0 && (
+        <div className="flex gap-1.5 mt-1.5">
+          {field.presets.map((preset) => (
+            <button
+              key={preset}
+              type="button"
+              className="h-5 w-5 rounded-md border border-border hover:scale-110 transition-transform disabled:opacity-50"
+              style={{ backgroundColor: preset }}
+              disabled={disabled || field.disabled}
+              title={preset}
+              onClick={() => onChange(preset)}
+            />
+          ))}
+        </div>
+      )}
+    </FieldWrapper>
+  )
+}
+
+function GroupField({
+  field,
+  values,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigGroupField
+  values: Record<string, unknown>
+  onChange: (key: string, value: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  const [collapsed, setCollapsed] = useState(field.defaultCollapsed ?? false)
+  const isAccordion = field.style === 'accordion'
+
+  const colSpanClass =
+    field.span === 2
+      ? 'col-span-2'
+      : field.span === 3
+      ? 'col-span-3'
+      : field.span === 4
+      ? 'col-span-4'
+      : 'col-span-1'
+
+  return (
+    <div className={colSpanClass}>
+      <div className="rounded-lg border border-border bg-surface/50 overflow-hidden">
+        <div
+          className={[
+            'px-3 py-2 flex items-center justify-between',
+            isAccordion ? 'cursor-pointer hover:bg-surface' : '',
+          ].join(' ')}
+          onClick={isAccordion ? () => setCollapsed((c) => !c) : undefined}
+        >
+          <span className="text-xs font-semibold text-foreground">{resolveLabel(field.label, translationFn)}</span>
+          {isAccordion && (
+            <span className="text-foreground-subtle text-xs">{collapsed ? '▸' : '▾'}</span>
+          )}
+        </div>
+        {!collapsed && (
+          <div className="px-3 pb-3 grid grid-cols-2 gap-x-4 gap-y-3">
+            {field.fields.map((subField) => (
+              <FormField
+                key={subField.key}
+                field={subField}
+                values={values}
+                onChange={onChange}
+                disabled={disabled}
+                translationFn={translationFn}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ModelSelectorFieldRenderer({
+  field,
+  value,
+  onChange,
+  disabled,
+  translationFn,
+}: {
+  field: ConfigModelSelectorField
+  value: unknown
+  onChange: (v: unknown) => void
+  disabled?: boolean
+  translationFn?: TranslationFn
+}) {
+  return (
+    <FieldWrapper label={field.label} description={field.description} required={field.required} span={field.span} translationFn={translationFn}>
+      <ModelSelector field={field} value={value} onChange={onChange} disabled={disabled} />
+    </FieldWrapper>
+  )
+}
+
+function SeparatorField({ span }: { span?: number }) {
+  const colSpanClass =
+    span === 2
+      ? 'col-span-2'
+      : span === 3
+      ? 'col-span-3'
+      : span === 4
+      ? 'col-span-4'
+      : 'col-span-full'
+
+  return (
+    <div className={colSpanClass}>
+      <hr className="border-border" />
+    </div>
+  )
+}
+
+const INFO_VARIANT_STYLES: Record<string, { border: string; bg: string; text: string }> = {
+  info: { border: 'border-info', bg: 'bg-info/5', text: 'text-info' },
+  warning: { border: 'border-warning', bg: 'bg-warning/5', text: 'text-warning' },
+  success: { border: 'border-success', bg: 'bg-success/5', text: 'text-success' },
+  danger: { border: 'border-danger', bg: 'bg-danger/5', text: 'text-danger' },
+}
+
+function InfoBox({ field }: { field: ConfigInfoField }) {
+  const variant = field.variant ?? 'info'
+  const styles = INFO_VARIANT_STYLES[variant] ?? INFO_VARIANT_STYLES['info']!
+
+  return (
+    <div className="col-span-full">
+      <div className={`rounded-md border-l-4 px-3 py-2.5 ${styles.border} ${styles.bg}`}>
+        {field.label && (
+          <p className={`text-xs font-semibold mb-0.5 ${styles.text}`}>{field.label}</p>
+        )}
+        <p className="text-xs text-foreground-subtle leading-relaxed">{field.content}</p>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main FormField component
+// ---------------------------------------------------------------------------
+
+export function FormField({ field, values, onChange, disabled, translationFn }: FormFieldProps) {
+  // Evaluate showWhen condition
+  if ('showWhen' in field && field.showWhen) {
+    const condition = field.showWhen
+    const condVal = values[condition.field]
+
+    let visible = true
+    if (condition.equals !== undefined) visible = condVal === condition.equals
+    else if (condition.notEquals !== undefined) visible = condVal !== condition.notEquals
+    else if (condition.in !== undefined) visible = condition.in.includes(condVal)
+    else if (condition.notIn !== undefined) visible = !condition.notIn.includes(condVal)
+
+    if (!visible) return null
+  }
+
+  const value = values[field.key]
+  const handleChange = (v: unknown) => onChange(field.key, v)
+
+  switch (field.type) {
+    case 'text':
+      return <TextField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'number':
+      return <NumberField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'boolean':
+      return <BooleanField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'select':
+      return <SelectField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'multiselect':
+      return <MultiSelectField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'password':
+      return <PasswordField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'textarea':
+      return <TextAreaField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'slider':
+      return <SliderField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'tags':
+      return <TagsField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'color':
+      return <ColorField field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    case 'group':
+      return <GroupField field={field} values={values} onChange={onChange} disabled={disabled} translationFn={translationFn} />
+    case 'separator':
+      return <SeparatorField />
+    case 'info':
+      return <InfoBox field={field} />
+    case 'model-selector':
+      return <ModelSelectorFieldRenderer field={field} value={value} onChange={handleChange} disabled={disabled} translationFn={translationFn} />
+    default:
+      return null
+  }
+}