@fayz-ai/plugin-forms 0.9.0 → 0.9.2

package/src/components/FieldConfigDialog.tsx

@@ -1,243 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Plus, Trash2 } from 'lucide-react'
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetBody,
-  SheetFooter,
-} from '@fayz-ai/ui'
-import { Button } from '@fayz-ai/ui'
-import { Input } from '@fayz-ai/ui'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { FormFieldDef } from '../types'
-import { FIELD_TYPES } from './FieldPalette'
-import { PERSON_FIELD_OPTIONS } from '../lib/person-fields'
-
-/** Field types that can be auto-filled from a person record. */
-const MAPPABLE_TYPES = ['text', 'memo', 'richtext', 'date']
-const MAP_NONE = '__none__'
-
-const SIZE_OPTIONS = [
-  { span: 3,  label: '1/4' },
-  { span: 4,  label: '1/3' },
-  { span: 6,  label: '1/2' },
-  { span: 8,  label: '2/3' },
-  { span: 9,  label: '3/4' },
-  { span: 12, label: 'Full' },
-]
-
-interface FieldConfigDrawerProps {
-  field: FormFieldDef | null
-  onSave: (updated: FormFieldDef) => void
-  /** Live update without closing — used for visual changes like colSpan */
-  onUpdate?: (updated: FormFieldDef) => void
-  onClose: () => void
-}
-
-export function FieldConfigDrawer({ field, onSave, onUpdate, onClose }: FieldConfigDrawerProps) {
-  const t = useTranslation()
-  const [label, setLabel] = useState('')
-  const [placeholder, setPlaceholder] = useState('')
-  const [required, setRequired] = useState(false)
-  const [colSpan, setColSpan] = useState(12)
-  const [options, setOptions] = useState<Array<{ label: string; value: string }>>([])
-  const [map, setMap] = useState<string>('')
-
-  // Sync state when field changes
-  useEffect(() => {
-    if (!field) return
-    setLabel(field.label)
-    setPlaceholder(field.placeholder ?? '')
-    setRequired(field.required ?? false)
-    setColSpan(field.colSpan)
-    setOptions(field.options ?? [])
-    setMap(field.map ?? '')
-  }, [field?.id])
-
-  if (!field) return null
-
-  const hasOptions = ['select', 'radio', 'tags'].includes(field.type)
-  const canMap = MAPPABLE_TYPES.includes(field.type)
-  const fieldTypeDef = FIELD_TYPES.find((ft) => ft.type === field.type)
-  const Icon = fieldTypeDef?.icon
-
-  const handleSave = () => {
-    onSave({
-      ...field,
-      label,
-      placeholder: placeholder || undefined,
-      required,
-      colSpan: Math.max(1, Math.min(12, colSpan)),
-      options: hasOptions ? options.filter((o) => o.label.trim()) : field.options,
-      map: canMap && map ? map : undefined,
-    })
-  }
-
-  const addOption = () => {
-    setOptions([...options, { label: '', value: '' }])
-  }
-
-  const updateOption = (index: number, newLabel: string) => {
-    const updated = [...options]
-    updated[index] = { label: newLabel, value: newLabel.toLowerCase().replace(/\s+/g, '_') }
-    setOptions(updated)
-  }
-
-  const removeOption = (index: number) => {
-    setOptions(options.filter((_, i) => i !== index))
-  }
-
-  return (
-    <Sheet open={!!field} onOpenChange={(open) => { if (!open) onClose() }}>
-      <SheetContent className="w-80 sm:w-96" overlay="none">
-        <SheetHeader>
-          <SheetTitle className="flex items-center gap-2 text-sm">
-            {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-            {t(`customForms.fieldType.${field.type}`)}
-          </SheetTitle>
-        </SheetHeader>
-
-        <SheetBody className="space-y-4 py-4">
-          {/* Label */}
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium">{t('customForms.builder.fieldLabel')}</label>
-            <Input
-              value={label}
-              onChange={(e) => setLabel(e.target.value)}
-              className="h-9 text-sm"
-              autoFocus
-            />
-          </div>
-
-          {/* Placeholder */}
-          {!['title', 'checkbox', 'image', 'gallery'].includes(field.type) && (
-            <div className="space-y-1.5">
-              <label className="text-xs font-medium">{t('customForms.builder.fieldPlaceholder')}</label>
-              <Input
-                value={placeholder}
-                onChange={(e) => setPlaceholder(e.target.value)}
-                className="h-9 text-sm"
-              />
-            </div>
-          )}
-
-          {/* Column span — visual skeleton selector */}
-          <div className="space-y-2">
-            <label className="text-xs font-medium">{t('customForms.builder.colSpan')}</label>
-            <div className="grid grid-cols-3 gap-2">
-              {SIZE_OPTIONS.map((opt) => (
-                <button
-                  key={opt.span}
-                  onClick={() => {
-                    setColSpan(opt.span)
-                    if (onUpdate && field) {
-                      onUpdate({ ...field, colSpan: opt.span })
-                    }
-                  }}
-                  className={`group relative rounded-lg border-2 p-2 transition-all ${
-                    colSpan === opt.span
-                      ? 'border-primary bg-primary/5'
-                      : 'border-border hover:border-primary/30'
-                  }`}
-                >
-                  {/* Mini 12-col skeleton preview */}
-                  <div className="flex gap-px h-3 mb-1.5">
-                    <div
-                      className={`rounded-sm ${colSpan === opt.span ? 'bg-primary/60' : 'bg-muted-foreground/30 group-hover:bg-primary/30'}`}
-                      style={{ width: `${(opt.span / 12) * 100}%` }}
-                    />
-                    {opt.span < 12 && (
-                      <div
-                        className="rounded-sm bg-muted/60"
-                        style={{ width: `${((12 - opt.span) / 12) * 100}%` }}
-                      />
-                    )}
-                  </div>
-                  <span className={`text-[10px] font-medium ${colSpan === opt.span ? 'text-primary' : 'text-muted-foreground'}`}>
-                    {opt.label}
-                  </span>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Required */}
-          {field.type !== 'title' && (
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={required}
-                onChange={(e) => setRequired(e.target.checked)}
-                className="rounded border-input accent-primary"
-              />
-              <span className="text-sm">{t('customForms.builder.fieldRequired')}</span>
-            </label>
-          )}
-
-          {/* Auto-fill from person record */}
-          {canMap && (
-            <div className="space-y-1.5">
-              <label className="text-xs font-medium">{t('customForms.builder.mapToPerson')}</label>
-              <Select
-                value={map || MAP_NONE}
-                onValueChange={(v) => setMap(v === MAP_NONE ? '' : v)}
-              >
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={MAP_NONE}>{t('customForms.builder.mapNone')}</SelectItem>
-                  {PERSON_FIELD_OPTIONS.map((opt) => (
-                    <SelectItem key={opt.value} value={opt.value}>
-                      {t(opt.labelKey)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-[10px] text-muted-foreground">{t('customForms.builder.mapHint')}</p>
-            </div>
-          )}
-
-          {/* Options */}
-          {hasOptions && (
-            <div className="space-y-2">
-              <label className="text-xs font-medium">{t('customForms.builder.fieldOptions')}</label>
-              {options.map((opt, i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <Input
-                    value={opt.label}
-                    onChange={(e) => updateOption(i, e.target.value)}
-                    placeholder={`Option ${i + 1}`}
-                    className="h-8 text-sm flex-1"
-                  />
-                  <button onClick={() => removeOption(i)} className="p-1 hover:bg-destructive/10 rounded">
-                    <Trash2 className="h-3.5 w-3.5 text-destructive" />
-                  </button>
-                </div>
-              ))}
-              <Button variant="outline" size="sm" onClick={addOption} className="h-8 text-xs w-full">
-                <Plus className="h-3 w-3 mr-1" />
-                {t('customForms.builder.addOption')}
-              </Button>
-            </div>
-          )}
-        </SheetBody>
-
-        <SheetFooter className="pt-4 border-t">
-          <Button size="sm" onClick={handleSave} className="w-full">
-            OK
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  )
-}

package/src/components/FieldPalette.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { useDraggable } from '@dnd-kit/core'
-import {
-  Heading, Type, AlignLeft, FileEdit, CalendarDays,
-  ChevronDown, CircleDot, Tags, CheckSquare,
-  Image, GalleryHorizontalEnd, Receipt,
-} from 'lucide-react'
-import { useTranslation } from '@fayz-ai/core'
-import type { FormFieldType } from '../types'
-
-export interface FieldTypeItem {
-  type: FormFieldType
-  icon: React.ElementType
-}
-
-export const DEFAULT_COL_SPAN: Record<string, number> = {
-  title:    12,
-  memo:     12,
-  richtext: 12,
-  gallery:  12,
-  budget:   12,
-  image:    6,
-  text:     6,
-  date:     4,
-  select:   6,
-  radio:    6,
-  tags:     8,
-  checkbox: 4,
-}
-
-export const FIELD_TYPES: FieldTypeItem[] = [
-  { type: 'title', icon: Heading },
-  { type: 'text', icon: Type },
-  { type: 'memo', icon: AlignLeft },
-  { type: 'richtext', icon: FileEdit },
-  { type: 'date', icon: CalendarDays },
-  { type: 'select', icon: ChevronDown },
-  { type: 'radio', icon: CircleDot },
-  { type: 'tags', icon: Tags },
-  { type: 'checkbox', icon: CheckSquare },
-  { type: 'image', icon: Image },
-  { type: 'gallery', icon: GalleryHorizontalEnd },
-  { type: 'budget', icon: Receipt },
-]
-
-function DraggableFieldType({ item }: { item: FieldTypeItem }) {
-  const t = useTranslation()
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: `palette-${item.type}`,
-    data: { source: 'palette', fieldType: item.type },
-  })
-
-  const Icon = item.icon
-
-  return (
-    <button
-      ref={setNodeRef}
-      {...listeners}
-      {...attributes}
-      className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg border bg-card text-sm font-medium transition-all hover:shadow-sm hover:border-primary/30 cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-30' : ''}`}
-    >
-      <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
-      <span className="truncate">{t(`customForms.fieldType.${item.type}`)}</span>
-    </button>
-  )
-}
-
-export function FieldPalette() {
-  const t = useTranslation()
-
-  return (
-    <div className="w-44 shrink-0 space-y-1.5">
-      <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-1 mb-2">
-        {t('customForms.builder.fields')}
-      </p>
-      {FIELD_TYPES.map((item) => (
-        <DraggableFieldType key={item.type} item={item} />
-      ))}
-    </div>
-  )
-}