@fayz-ai/plugin-forms 0.9.0 → 0.9.1

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>
-  )
-}

package/src/components/FormBuilder.tsx

@@ -1,427 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import {
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  PointerSensor,
-  pointerWithin,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core'
-import { arrayMove } from '@dnd-kit/sortable'
-import { snapCenterToCursor } from '@dnd-kit/modifiers'
-import { ArrowLeft, Eye, Pencil, Printer } from 'lucide-react'
-import { Button, useSaveBar, toast } from '@fayz-ai/ui'
-import { Input } from '@fayz-ai/ui'
-import { Card, CardContent } from '@fayz-ai/ui'
-import { Badge } from '@fayz-ai/ui'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useLimitGuard, invalidateLimit, useAgentSurface, type AgentSurfaceContribution } from '@fayz-ai/saas'
-import type { CustomFormsStore } from '../store'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { CustomFormsConfig } from '../config'
-import type { FormFieldDef, FormSchema, TemplateCategory } from '../types'
-import { FieldPalette, FIELD_TYPES, DEFAULT_COL_SPAN } from './FieldPalette'
-import { BuilderCanvas } from './BuilderCanvas'
-import { FieldConfigDrawer } from './FieldConfigDialog'
-import { createPortal } from 'react-dom'
-import { FormRenderer } from './FormRenderer'
-import { buildPrintHtml } from '../lib/print'
-import { FORM_BUILDER_INSTRUCTIONS } from '../agent-tools'
-
-const TEMPLATE_CATEGORIES: TemplateCategory[] = ['anamnesis', 'evolution', 'report', 'contract', 'general']
-
-interface FormBuilderProps {
-  templateId?: string
-  store: CustomFormsStore
-  provider: CustomFormsDataProvider
-  config: CustomFormsConfig
-  onBack: () => void
-}
-
-export function FormBuilder({ templateId, store, provider, config, onBack }: FormBuilderProps) {
-  const t = useTranslation()
-  const guardTemplates = useLimitGuard('form_templates')
-
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [category, setCategory] = useState<TemplateCategory>('general')
-  const [fields, setFields] = useState<FormFieldDef[]>([])
-  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [showPreview, setShowPreview] = useState(false)
-  const [previewMode, setPreviewMode] = useState<'editor' | 'print'>('editor')
-  const [previewData, setPreviewData] = useState<Record<string, unknown>>({})
-  const [draggingFieldType, setDraggingFieldType] = useState<import('../types').FormFieldType | null>(null)
-  const [templateName, setTemplateName] = useState<string | null>(null)
-
-  // Load existing template
-  useEffect(() => {
-    if (!templateId) return
-    let cancelled = false
-    provider.getTemplateById(templateId).then((tpl) => {
-      if (cancelled || !tpl) return
-      setName(tpl.name)
-      setTemplateName(tpl.name)
-      setDescription(tpl.description ?? '')
-      setCategory(tpl.category)
-      setFields(tpl.schema.fields)
-    })
-    return () => { cancelled = true }
-  }, [templateId, provider])
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-  )
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    const data = event.active.data.current
-    if (data?.source === 'palette') {
-      setDraggingFieldType(data.fieldType)
-    }
-  }, [])
-
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    setDraggingFieldType(null)
-    const { active, over } = event
-
-    // Dropped from palette onto canvas
-    if (active.data.current?.source === 'palette' && over) {
-      const fieldType = active.data.current.fieldType
-      const typeDef = FIELD_TYPES.find((ft) => ft.type === fieldType)
-      if (!typeDef) return
-
-      const newField: FormFieldDef = {
-        id: crypto.randomUUID(),
-        type: fieldType,
-        label: t(`customForms.fieldType.${fieldType}`),
-        col: 0,
-        row: fields.length,
-        colSpan: DEFAULT_COL_SPAN[fieldType] ?? 12,
-      }
-
-      if (['select', 'radio', 'tags'].includes(fieldType)) {
-        newField.options = [
-          { label: 'Option 1', value: 'option_1' },
-          { label: 'Option 2', value: 'option_2' },
-        ]
-      }
-
-      setFields((prev) => [...prev, newField])
-      return
-    }
-
-    // Reorder within canvas
-    if (active.id !== over?.id && over) {
-      setFields((prev) => {
-        const oldIndex = prev.findIndex((f) => f.id === active.id)
-        const newIndex = prev.findIndex((f) => f.id === over.id)
-        if (oldIndex === -1 || newIndex === -1) return prev
-        const reordered = arrayMove(prev, oldIndex, newIndex)
-        return reordered.map((f, i) => ({ ...f, row: i }))
-      })
-    }
-  }, [fields, t])
-
-  const handleSelectField = useCallback((field: FormFieldDef) => {
-    setSelectedFieldId(field.id)
-  }, [])
-
-  const handleRemoveField = useCallback((fieldId: string) => {
-    setFields((prev) => prev.filter((f) => f.id !== fieldId).map((f, i) => ({ ...f, row: i })))
-    if (selectedFieldId === fieldId) setSelectedFieldId(null)
-  }, [selectedFieldId])
-
-  const handleFieldUpdate = useCallback((updated: FormFieldDef) => {
-    setFields((prev) => prev.map((f) => (f.id === updated.id ? updated : f)))
-  }, [])
-
-  // --- Assistant surface: publish WHAT THE USER IS EDITING as context --------
-  // The build action is the server-plane createOrUpdateForm tool (a pool RPC),
-  // which works from any page. This surface only tells the model which template
-  // is open and its current fields+ids, so "add an allergies field to THIS
-  // form" resolves to the right templateId. No client-side mutation here.
-  const surfaceStateRef = React.useRef({ templateId, name, description, category, fields })
-  surfaceStateRef.current = { templateId, name, description, category, fields }
-
-  const agentSurface = React.useMemo<AgentSurfaceContribution>(
-    () => ({
-      id: 'custom_forms.builder',
-      pluginId: 'custom_forms',
-      instructions: FORM_BUILDER_INSTRUCTIONS,
-      describe: () => {
-        const o = surfaceStateRef.current
-        return {
-          title: `Construtor de formulário — ${o.name?.trim() || 'novo modelo'}`,
-          state: {
-            // Pass this as `templateId` to createOrUpdateForm when editing THIS
-            // form. Null = an unsaved new form (create, then it gets an id).
-            templateId: o.templateId ?? null,
-            unsaved: !o.templateId,
-            name: o.name ?? '',
-            category: o.category ?? 'general',
-            description: o.description ?? '',
-            fieldCount: o.fields.length,
-            fields: o.fields.map((f) => ({
-              id: f.id,
-              type: f.type,
-              label: f.label,
-              required: !!f.required,
-              ...(f.options?.length ? { options: f.options.map((x) => x.label) } : {}),
-            })),
-          },
-        }
-      },
-    }),
-    [],
-  )
-  useAgentSurface(agentSurface)
-  // ---------------------------------------------------------------------------
-
-  const handleFieldConfigSave = useCallback((updated: FormFieldDef) => {
-    handleFieldUpdate(updated)
-    setSelectedFieldId(null)
-  }, [handleFieldUpdate])
-
-  const handleSave = useCallback(async () => {
-    if (!name.trim()) { toast.error(t('common.formIncomplete')); return }
-    // Plan quantity guard (client-side, before the provider call) — only on
-    // create. Opens the global UpgradeModal and aborts when the cap is reached.
-    if (!templateId && (await guardTemplates()) === 'blocked') return
-    setSaving(true)
-    try {
-      const schema: FormSchema = { fields, layout: { columns: 12 } }
-
-      if (templateId) {
-        await store.getState().updateTemplate(templateId, { name, description, category, schema })
-      } else {
-        await store.getState().createTemplate({ name, description, category, schema })
-        invalidateLimit('form_templates')
-      }
-      onBack()
-    } finally {
-      setSaving(false)
-    }
-  }, [templateId, name, description, category, fields, store, onBack, guardTemplates])
-
-  // Dirty detection — snapshot editable fields once async load settles
-  const currentFields = { name, description, category, fields }
-  const snapshot = React.useRef<string | null>(null)
-  const loaded = !templateId || templateName !== null
-  useEffect(() => {
-    if (loaded && snapshot.current === null) snapshot.current = JSON.stringify(currentFields)
-  }, [loaded])
-  const dirty = snapshot.current !== null && JSON.stringify(currentFields) !== snapshot.current
-
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void handleSave() },
-    onDiscard: () => onBack(),
-    saveLabel: t('customForms.builder.save'),
-  })
-
-  const selectedField = selectedFieldId
-    ? fields.find((f) => f.id === selectedFieldId) ?? null
-    : null
-
-  const isNew = !templateId
-  const breadcrumbLabel = isNew
-    ? t('customForms.newTemplate')
-    : templateName ?? t('customForms.editTemplate')
-
-  return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-1.5 text-sm">
-        <button
-          onClick={onBack}
-          className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          {t('customForms.templates')}
-        </button>
-        <span className="text-muted-foreground">/</span>
-        <span className="font-medium">{breadcrumbLabel}</span>
-      </div>
-
-      {/* Form meta — card layout matching CRUD form */}
-      <Card>
-        <CardContent className="p-5 space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <label className="text-sm font-medium">
-                {t('customForms.templateName')} <span className="text-destructive">*</span>
-              </label>
-              <Input
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder={t('customForms.templateName')}
-                className="h-9 text-sm"
-                autoFocus={isNew}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <label className="text-sm font-medium">{t('customForms.templateCategory')}</label>
-              <Select value={category} onValueChange={(v) => setCategory(v as TemplateCategory)}>
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {TEMPLATE_CATEGORIES.map((cat) => (
-                    <SelectItem key={cat} value={cat}>
-                      {t(`customForms.category.${cat}`)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium">{t('customForms.templateDescription')}</label>
-            <Input
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder={t('customForms.templateDescription')}
-              className="h-9 text-sm"
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Builder section header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h3 className="text-sm font-semibold">{t('customForms.builder.fields')}</h3>
-          <Badge variant="secondary" className="text-[10px]">
-            {t('customForms.builder.fieldCount', { count: String(fields.length) })}
-          </Badge>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-9"
-            disabled={fields.length === 0}
-            onClick={() => { setPreviewData({}); setPreviewMode('editor'); setShowPreview(true) }}
-          >
-            <Eye className="h-3.5 w-3.5 mr-1.5" />
-            Preview
-          </Button>
-        </div>
-      </div>
-
-      {/* Builder body — drag palette + canvas */}
-      <DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <div className="flex gap-4">
-          <FieldPalette />
-          <BuilderCanvas
-            fields={fields}
-            selectedFieldId={selectedFieldId}
-            onSelectField={handleSelectField}
-            onRemoveField={handleRemoveField}
-            draggingFieldType={draggingFieldType}
-          />
-        </div>
-
-        <DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
-          {draggingFieldType ? (
-            <div className="flex items-center gap-2 px-3 py-2 rounded-lg border bg-card shadow-xl text-sm font-medium opacity-90 pointer-events-none">
-              {(() => {
-                const def = FIELD_TYPES.find((ft) => ft.type === draggingFieldType)
-                if (!def) return null
-                const Icon = def.icon
-                return (
-                  <>
-                    <Icon className="h-4 w-4 text-primary" />
-                    {t(`customForms.fieldType.${draggingFieldType}`)}
-                  </>
-                )
-              })()}
-            </div>
-          ) : null}
-        </DragOverlay>
-      </DndContext>
-
-      {/* Field config drawer (right side) */}
-      <FieldConfigDrawer
-        field={selectedField}
-        onSave={handleFieldConfigSave}
-        onUpdate={handleFieldUpdate}
-        onClose={() => setSelectedFieldId(null)}
-      />
-
-      {/* Preview — A4 paper overlay (portaled to body) */}
-      {showPreview && createPortal(
-        <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/60 overflow-y-auto py-10 px-4" onClick={() => setShowPreview(false)}>
-          <div
-            className="relative w-full max-w-3xl bg-white rounded-modal shadow-lg"
-            style={{ minHeight: '80vh' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Toggle Editor ⟷ Impressão (centered) + close, on a sticky top bar. */}
-            <div className="sticky top-0 z-10 flex items-center justify-center border-b bg-white/95 backdrop-blur px-4 py-2.5 rounded-t-modal">
-              <div className="inline-flex rounded-lg border p-0.5 text-xs">
-                <button
-                  onClick={() => setPreviewMode('editor')}
-                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'editor' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
-                >
-                  <Pencil className="h-3.5 w-3.5" />
-                  {t('customForms.preview.editor')}
-                </button>
-                <button
-                  onClick={() => setPreviewMode('print')}
-                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'print' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
-                >
-                  <Printer className="h-3.5 w-3.5" />
-                  {t('customForms.preview.print')}
-                </button>
-              </div>
-              <button
-                onClick={() => setShowPreview(false)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
-              >
-                <span className="text-lg">✕</span>
-              </button>
-            </div>
-
-            {previewMode === 'editor' ? (
-              /* Editor — fillable form (same renderer used on the person's ficha) */
-              <div className="px-10 py-8 sm:px-14 sm:py-10 text-neutral-900">
-                <h1 className="text-2xl font-bold mb-1">{name || t('customForms.newTemplate')}</h1>
-                {description && <p className="text-sm text-neutral-500 mb-8">{description}</p>}
-                {!description && <div className="mb-8" />}
-
-                <FormRenderer
-                  schema={{ fields, layout: { columns: 12 } }}
-                  data={previewData}
-                  onChange={setPreviewData}
-                />
-              </div>
-            ) : (
-              /* Impressão — exact print/PDF output rendered in an isolated iframe */
-              <iframe
-                title="print-preview"
-                className="w-full rounded-b-modal"
-                style={{ height: '75vh', border: 'none' }}
-                srcDoc={buildPrintHtml(
-                  { id: 'preview', name: name || t('customForms.newTemplate'), schema: { fields, layout: { columns: 12 } } } as any,
-                  { title: name || t('customForms.newTemplate'), createdAt: new Date().toISOString(), status: 'draft', data: previewData } as any,
-                )}
-              />
-            )}
-          </div>
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}