@fayz-ai/plugin-forms 0.9.0-next.1 → 0.9.1

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

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