@camstack/addon-admin-ui 0.1.1 → 0.1.3

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

@@ -1,732 +0,0 @@
-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
-  }
-}