@fayz-ai/plugin-forms 0.9.0 → 0.9.2

package/src/components/BuilderCanvas.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { useDroppable } from '@dnd-kit/core'
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { useTranslation } from '@fayz-ai/core'
-import type { FormFieldDef, FormFieldType } from '../types'
-import { BuilderField } from './BuilderField'
-import { FIELD_TYPES, DEFAULT_COL_SPAN } from './FieldPalette'
-
-interface BuilderCanvasProps {
-  fields: FormFieldDef[]
-  selectedFieldId: string | null
-  onSelectField: (field: FormFieldDef) => void
-  onRemoveField: (fieldId: string) => void
-  draggingFieldType: FormFieldType | null
-}
-
-function DropPreview({ fieldType }: { fieldType: FormFieldType }) {
-  const t = useTranslation()
-  const def = FIELD_TYPES.find((ft) => ft.type === fieldType)
-  if (!def) return null
-  const Icon = def.icon
-
-  return (
-    <div
-      className="flex items-center gap-2 rounded-lg border-2 border-dashed border-primary/40 bg-primary/5 p-3"
-      style={{ gridColumn: `span ${DEFAULT_COL_SPAN[fieldType] ?? 12}` }}
-    >
-      <Icon className="h-4 w-4 text-primary/50" />
-      <span className="text-sm text-primary/50 font-medium">
-        {t(`customForms.fieldType.${fieldType}`)}
-      </span>
-    </div>
-  )
-}
-
-export function BuilderCanvas({
-  fields,
-  selectedFieldId,
-  onSelectField,
-  onRemoveField,
-  draggingFieldType,
-}: BuilderCanvasProps) {
-  const t = useTranslation()
-  const { setNodeRef, isOver } = useDroppable({ id: 'builder-canvas' })
-
-  const sortedFields = [...fields].sort((a, b) => a.row - b.row || a.col - b.col)
-  const showPreview = isOver && draggingFieldType !== null
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={`flex-1 min-h-[400px] rounded-xl border-2 border-dashed p-4 transition-colors ${
-        isOver ? 'border-primary/50 bg-primary/5' : 'border-border bg-muted/20'
-      }`}
-      style={{
-        backgroundImage:
-          'repeating-linear-gradient(90deg, transparent, transparent calc(8.333% - 1px), hsl(var(--border) / 0.3) calc(8.333% - 1px), hsl(var(--border) / 0.3) 8.333%)',
-        backgroundSize: '100% 100%',
-      }}
-    >
-      {fields.length === 0 && !showPreview && (
-        <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-          {t('customForms.builder.emptyCanvas')}
-        </div>
-      )}
-
-      <SortableContext items={sortedFields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
-        <div
-          className="grid gap-3"
-          style={{ gridTemplateColumns: 'repeat(12, 1fr)' }}
-        >
-          {sortedFields.map((field) => (
-            <BuilderField
-              key={field.id}
-              field={field}
-              isSelected={field.id === selectedFieldId}
-              onSelect={onSelectField}
-              onRemove={onRemoveField}
-            />
-          ))}
-
-          {showPreview && <DropPreview fieldType={draggingFieldType!} />}
-        </div>
-      </SortableContext>
-    </div>
-  )
-}

package/src/components/BuilderField.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { GripVertical, X } from 'lucide-react'
-import { useTranslation } from '@fayz-ai/core'
-import type { FormFieldDef } from '../types'
-import { FIELD_TYPES } from './FieldPalette'
-
-interface BuilderFieldProps {
-  field: FormFieldDef
-  onSelect: (field: FormFieldDef) => void
-  onRemove: (fieldId: string) => void
-  isSelected: boolean
-}
-
-export function BuilderField({ field, onSelect, onRemove, isSelected }: BuilderFieldProps) {
-  const t = useTranslation()
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: field.id })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    gridColumn: `span ${field.colSpan}`,
-    opacity: isDragging ? 0.5 : 1,
-  }
-
-  const fieldTypeDef = FIELD_TYPES.find((ft) => ft.type === field.type)
-  const Icon = fieldTypeDef?.icon
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={`group relative flex items-start gap-2 rounded-lg border-2 bg-card p-3 transition-colors cursor-pointer ${
-        isSelected
-          ? 'border-primary ring-1 ring-primary/20'
-          : 'border-border hover:border-primary/30'
-      }`}
-      onClick={() => onSelect(field)}
-    >
-      {/* Drag handle */}
-      <button
-        {...attributes}
-        {...listeners}
-        className="mt-0.5 cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <GripVertical className="h-4 w-4" />
-      </button>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-1.5">
-          {Icon && <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />}
-          <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-            {t(`customForms.fieldType.${field.type}`)}
-          </span>
-        </div>
-        <p className="text-sm font-medium mt-0.5 truncate">{field.label}</p>
-        {field.required && (
-          <span className="text-[10px] text-destructive">*</span>
-        )}
-      </div>
-
-      {/* Remove button */}
-      <button
-        onClick={(e) => { e.stopPropagation(); onRemove(field.id) }}
-        className="absolute top-1.5 right-1.5 p-1 rounded-md opacity-0 group-hover:opacity-100 hover:bg-destructive/10 transition-opacity"
-      >
-        <X className="h-3 w-3 text-destructive" />
-      </button>
-    </div>
-  )
-}

package/src/components/DocumentFormDialog.tsx

@@ -1,155 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { ArrowLeft } from 'lucide-react'
-import { useSaveBar } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useLimitGuard, invalidateLimit } from '@fayz-ai/saas'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { CustomFormsStore } from '../store'
-import type { FormTemplate, FormDocument } from '../types'
-import { FormRenderer } from './FormRenderer'
-import { prefillFromPerson } from '../lib/person-fields'
-
-function generateTitle(templateName: string, personName?: string): string {
-  const date = new Date().toLocaleDateString()
-  return personName
-    ? `${templateName} — ${personName} — ${date}`
-    : `${templateName} — ${date}`
-}
-
-interface DocumentFormDialogProps {
-  template: FormTemplate | null
-  existingDocument?: FormDocument
-  personId: string
-  personName?: string
-  /** Full person record — mapped fields are pre-filled from it on new documents. */
-  person?: Record<string, unknown>
-  provider: CustomFormsDataProvider
-  store: CustomFormsStore
-  onSaved: () => void
-  onBack: () => void
-}
-
-export function DocumentFormDialog({
-  template: initialTemplate,
-  existingDocument,
-  personId,
-  personName,
-  person,
-  provider,
-  store,
-  onSaved,
-  onBack,
-}: DocumentFormDialogProps) {
-  const t = useTranslation()
-  const guardDocuments = useLimitGuard('documents_month')
-  const [template, setTemplate] = useState<FormTemplate | null>(initialTemplate)
-  const [data, setData] = useState<Record<string, unknown>>(() =>
-    existingDocument
-      ? existingDocument.data
-      : prefillFromPerson(initialTemplate?.schema, person),
-  )
-  const [saving, setSaving] = useState(false)
-
-  useEffect(() => {
-    if (existingDocument && !template) {
-      provider.getTemplateById(existingDocument.templateId).then(setTemplate)
-    }
-  }, [existingDocument, template, provider])
-
-  // When creating from a template that arrives asynchronously, apply prefill
-  // once the schema is known (guarded so it never clobbers user edits).
-  const prefilled = React.useRef(!!initialTemplate || !!existingDocument)
-  useEffect(() => {
-    if (prefilled.current || !template || existingDocument) return
-    prefilled.current = true
-    setData((prev) => prefillFromPerson(template.schema, person, prev))
-  }, [template, existingDocument, person])
-
-  const handleSave = useCallback(
-    async (status: 'draft' | 'completed') => {
-      if (!template) return
-      // Plan monthly-quota guard (client-side, before the provider call) — only
-      // on create. Opens the global UpgradeModal and aborts when the cap is hit.
-      if (!existingDocument && (await guardDocuments()) === 'blocked') return
-      setSaving(true)
-      try {
-        const autoTitle = generateTitle(template.name, personName)
-        if (existingDocument) {
-          await store.getState().updateDocument(existingDocument.id, { data, status })
-        } else {
-          await store.getState().createDocument({
-            templateId: template.id,
-            personId,
-            title: autoTitle,
-            data,
-            status,
-          })
-          invalidateLimit('documents_month')
-        }
-        onSaved()
-      } finally {
-        setSaving(false)
-      }
-    },
-    [template, existingDocument, data, personId, personName, store, onSaved, guardDocuments],
-  )
-
-  // Dirty detection drives the floating SaveBar. The baseline is the document's
-  // ORIGINAL saved data (empty for a brand-new document), so a new document that
-  // arrives pre-filled from the person's record counts as dirty immediately and
-  // the floating "unsaved changes" bar shows right away.
-  const snapshot = React.useRef<string | null>(null)
-  useEffect(() => {
-    if (template && snapshot.current === null) {
-      snapshot.current = JSON.stringify(existingDocument?.data ?? {})
-    }
-  }, [template, existingDocument])
-  const dirty = snapshot.current !== null && JSON.stringify(data) !== snapshot.current
-
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void handleSave('completed') },
-    onDiscard: () => onBack(),
-    saveLabel: t('customForms.saveAndComplete'),
-  })
-
-  if (!template) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <div className="h-5 w-5 border-2 border-primary border-t-transparent animate-spin rounded-full" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onBack}
-          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-        </button>
-        <div className="flex-1 min-w-0">
-          <h3 className="font-semibold text-sm">{template.name}</h3>
-          <p className="text-xs text-muted-foreground">
-            {personName && <span>{personName} &middot; </span>}
-            {new Date().toLocaleDateString()}
-          </p>
-        </div>
-      </div>
-
-      {/* Form fields — saving is driven entirely by the floating SaveBar
-          (unsaved-changes bar), matching the rest of the CRUD detail UX. */}
-      <div className="rounded-xl border p-4">
-        <FormRenderer
-          schema={template.schema}
-          data={data}
-          onChange={setData}
-        />
-      </div>
-    </div>
-  )
-}

package/src/components/DocumentList.tsx

@@ -1,254 +0,0 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react'
-import { FileText, Archive, Eye, Upload, Image as ImageIcon, Paperclip } from 'lucide-react'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { CustomFormsStore } from '../store'
-import type { FormDocument, DocumentStatus } from '../types'
-
-interface DocumentListProps {
-  personId: string
-  provider: CustomFormsDataProvider
-  store: CustomFormsStore
-  onView: (doc: FormDocument) => void
-  onFileDrop?: (files: File[]) => void
-}
-
-const STATUS_COLORS: Record<DocumentStatus, string> = {
-  draft: 'bg-warning-soft text-warning-soft-foreground',
-  completed: 'bg-success-soft text-success-soft-foreground',
-  signed: 'bg-info-soft text-info-soft-foreground',
-  archived: 'bg-muted text-muted-foreground',
-}
-
-const KIND_ICONS: Record<string, React.ElementType> = {
-  form: FileText,
-  image: ImageIcon,
-  attachment: Paperclip,
-  prescription: FileText,
-  contract: FileText,
-}
-
-function formatDateLabel(dateStr: string): string {
-  const date = new Date(dateStr)
-  const now = new Date()
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-  const docDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
-  const diffDays = Math.round((today.getTime() - docDate.getTime()) / (1000 * 60 * 60 * 24))
-
-  if (diffDays === 0) return 'Hoje'
-  if (diffDays === 1) return 'Ontem'
-  if (diffDays < 7) return `${diffDays} dias atrás`
-  return date.toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })
-}
-
-function groupByDate(docs: FormDocument[]): Array<{ date: string; label: string; items: FormDocument[] }> {
-  const groups: Map<string, FormDocument[]> = new Map()
-  for (const doc of docs) {
-    const dateKey = doc.createdAt.slice(0, 10)
-    if (!groups.has(dateKey)) groups.set(dateKey, [])
-    groups.get(dateKey)!.push(doc)
-  }
-  return Array.from(groups.entries())
-    .sort(([a], [b]) => b.localeCompare(a))
-    .map(([date, items]) => ({
-      date,
-      label: formatDateLabel(date),
-      items,
-    }))
-}
-
-export function DocumentList({ personId, provider, store, onView, onFileDrop }: DocumentListProps) {
-  const t = useTranslation()
-  const [documents, setDocuments] = useState<FormDocument[]>([])
-  const [loading, setLoading] = useState(true)
-  const [isDragOver, setIsDragOver] = useState(false)
-  const dragCounter = useRef(0)
-
-  const fetchDocs = useCallback(async () => {
-    setLoading(true)
-    try {
-      const result = await provider.getDocuments({ personId })
-      // Archived docs are kept (not deleted) but drop out of the active list.
-      setDocuments(result.data.filter((d) => d.status !== 'archived'))
-    } finally {
-      setLoading(false)
-    }
-  }, [personId, provider])
-
-  useEffect(() => {
-    const timer = setTimeout(() => fetchDocs(), 50)
-    return () => clearTimeout(timer)
-  }, [fetchDocs])
-
-  useEffect(() => {
-    const unsub = store.subscribe(() => fetchDocs())
-    return unsub
-  }, [store, fetchDocs])
-
-  // Archive, not delete: a filled document is a record of what was signed —
-  // it is moved out of the active list, never destroyed.
-  const handleArchive = useCallback(async (doc: FormDocument) => {
-    if (!window.confirm(t('customForms.archiveDocumentConfirm'))) return
-    await provider.updateDocument(doc.id, { status: 'archived' })
-    setDocuments((prev) => prev.filter((d) => d.id !== doc.id))
-  }, [provider, t])
-
-  // Drag and drop handlers
-  const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    dragCounter.current++
-    setIsDragOver(true)
-  }, [])
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    dragCounter.current--
-    if (dragCounter.current === 0) setIsDragOver(false)
-  }, [])
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-  }, [])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    dragCounter.current = 0
-    setIsDragOver(false)
-    const files = Array.from(e.dataTransfer.files)
-    if (files.length > 0 && onFileDrop) {
-      onFileDrop(files)
-    }
-  }, [onFileDrop])
-
-  const groups = groupByDate(documents)
-
-  if (loading) {
-    return (
-      <div className="space-y-4 py-4">
-        {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className="flex items-center gap-3">
-            <div className="h-9 w-9 rounded-lg bg-muted animate-pulse shrink-0" />
-            <div className="flex-1 space-y-1.5">
-              <div className="h-3.5 w-2/3 bg-muted animate-pulse rounded" />
-              <div className="h-2.5 w-1/3 bg-muted animate-pulse rounded" />
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={`relative min-h-[200px] rounded-xl border-2 border-dashed transition-colors ${
-        isDragOver
-          ? 'border-primary bg-primary/5'
-          : documents.length === 0
-            ? 'border-border'
-            : 'border-transparent'
-      }`}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-    >
-      {/* Drag overlay */}
-      {isDragOver && (
-        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-xl bg-primary/5">
-          <Upload className="h-8 w-8 text-primary/50 mb-2" />
-          <p className="text-sm font-medium text-primary/70">Solte os arquivos aqui</p>
-        </div>
-      )}
-
-      {/* Empty state */}
-      {documents.length === 0 && !isDragOver && (
-        <div className="flex flex-col items-center justify-center py-12 text-center">
-          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-3">
-            <FileText className="h-5 w-5 text-muted-foreground" />
-          </div>
-          <p className="text-sm font-medium">{t('customForms.noDocuments')}</p>
-          <p className="text-xs text-muted-foreground mt-1 max-w-xs">
-            {t('customForms.noDocumentsDescription')}
-          </p>
-          <p className="text-[10px] text-muted-foreground mt-3 flex items-center gap-1">
-            <Upload className="h-3 w-3" />
-            Arraste arquivos para cá
-          </p>
-        </div>
-      )}
-
-      {/* Timeline */}
-      {groups.length > 0 && (
-        <div className="space-y-5 py-2">
-          {groups.map((group) => (
-            <div key={group.date}>
-              {/* Date header */}
-              <div className="flex items-center gap-2 mb-2">
-                <div className="h-px flex-1 bg-border" />
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-1">
-                  {group.label}
-                </span>
-                <div className="h-px flex-1 bg-border" />
-              </div>
-
-              {/* Documents for this date */}
-              <div className="space-y-1.5">
-                {group.items.map((doc) => {
-                  const Icon = KIND_ICONS[doc.kind ?? 'form'] ?? FileText
-                  const time = new Date(doc.createdAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
-
-                  return (
-                    <div
-                      key={doc.id}
-                      className="group flex items-center gap-3 rounded-lg p-2.5 hover:bg-muted/50 cursor-pointer transition-colors"
-                      onClick={() => onView(doc)}
-                    >
-                      {/* Icon */}
-                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 shrink-0">
-                        <Icon className="h-4 w-4 text-primary" />
-                      </div>
-
-                      {/* Content */}
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium truncate">
-                          {doc.title ?? doc.templateName ?? 'Documento'}
-                        </p>
-                        <div className="flex items-center gap-1.5 mt-0.5">
-                          {doc.templateName && (
-                            <span className="text-[10px] text-muted-foreground">{doc.templateName}</span>
-                          )}
-                          <span className="text-[10px] text-muted-foreground">{time}</span>
-                        </div>
-                      </div>
-
-                      {/* Status + actions */}
-                      <Badge variant="secondary" className={`text-[10px] shrink-0 ${STATUS_COLORS[doc.status] ?? ''}`}>
-                        {t(`customForms.status.${doc.status}`)}
-                      </Badge>
-                      <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <button
-                          onClick={(e) => { e.stopPropagation(); onView(doc) }}
-                          className="p-1.5 rounded-md hover:bg-muted"
-                        >
-                          <Eye className="h-3.5 w-3.5 text-muted-foreground" />
-                        </button>
-                        <button
-                          onClick={(e) => { e.stopPropagation(); handleArchive(doc) }}
-                          className="p-1.5 rounded-md hover:bg-muted"
-                          title={t('customForms.archive')}
-                        >
-                          <Archive className="h-3.5 w-3.5 text-muted-foreground" />
-                        </button>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}