@fayz-ai/plugin-forms 0.9.0 → 0.9.1

package/src/components/FormRenderer.tsx

@@ -1,256 +0,0 @@
-import React, { useCallback } from 'react'
-import { Input } from '@fayz-ai/ui'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@fayz-ai/ui'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { FormFieldDef, FormSchema } from '../types'
-
-interface FormRendererProps {
-  schema: FormSchema
-  data: Record<string, unknown>
-  onChange: (data: Record<string, unknown>) => void
-  readOnly?: boolean
-}
-
-function FieldRenderer({
-  field,
-  value,
-  onChange,
-  readOnly,
-}: {
-  field: FormFieldDef
-  value: unknown
-  onChange: (value: unknown) => void
-  readOnly?: boolean
-}) {
-  const t = useTranslation()
-
-  switch (field.type) {
-    case 'title':
-      return (
-        <h3 className="text-base font-semibold pt-2 pb-1 border-b">
-          {field.label}
-        </h3>
-      )
-
-    case 'text':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <Input
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={field.placeholder}
-            className="h-9 text-sm"
-            readOnly={readOnly}
-          />
-        </div>
-      )
-
-    case 'memo':
-    case 'richtext':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <textarea
-            value={(value as string) ?? ''}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
-            placeholder={field.placeholder}
-            className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[100px]"
-            readOnly={readOnly}
-          />
-        </div>
-      )
-
-    case 'date':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <Input
-            type="date"
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            className="h-9 text-sm"
-            readOnly={readOnly}
-          />
-        </div>
-      )
-
-    case 'select':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          {readOnly ? (
-            <p className="text-sm py-1">{(value as string) ?? '-'}</p>
-          ) : (
-            <Select value={(value as string) ?? ''} onValueChange={onChange}>
-              <SelectTrigger className="h-9 text-sm">
-                <SelectValue placeholder={field.placeholder ?? '...'} />
-              </SelectTrigger>
-              <SelectContent>
-                {(field.options ?? []).map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-        </div>
-      )
-
-    case 'radio':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <div className="space-y-1">
-            {(field.options ?? []).map((opt) => (
-              <label key={opt.value} className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="radio"
-                  name={field.id}
-                  value={opt.value}
-                  checked={value === opt.value}
-                  onChange={() => onChange(opt.value)}
-                  disabled={readOnly}
-                  className="text-primary"
-                />
-                <span className="text-sm">{opt.label}</span>
-              </label>
-            ))}
-          </div>
-        </div>
-      )
-
-    case 'tags': {
-      const selectedTags = Array.isArray(value) ? (value as string[]) : []
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <div className="flex flex-wrap gap-1.5">
-            {(field.options ?? []).map((opt) => {
-              const active = selectedTags.includes(opt.value)
-              return (
-                <Badge
-                  key={opt.value}
-                  variant={active ? 'default' : 'outline'}
-                  className={`cursor-pointer text-xs ${readOnly ? 'pointer-events-none' : ''}`}
-                  onClick={() => {
-                    if (readOnly) return
-                    onChange(
-                      active
-                        ? selectedTags.filter((t) => t !== opt.value)
-                        : [...selectedTags, opt.value],
-                    )
-                  }}
-                >
-                  {opt.label}
-                </Badge>
-              )
-            })}
-          </div>
-        </div>
-      )
-    }
-
-    case 'checkbox':
-      return (
-        <label className="flex items-center gap-2 cursor-pointer py-1">
-          <input
-            type="checkbox"
-            checked={!!value}
-            onChange={(e) => onChange(e.target.checked)}
-            disabled={readOnly}
-            className="rounded border-input"
-          />
-          <span className="text-sm font-medium">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </span>
-        </label>
-      )
-
-    case 'image':
-    case 'gallery':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <div className="flex items-center justify-center rounded-lg border-2 border-dashed py-8 text-sm text-muted-foreground">
-            {field.type === 'gallery' ? 'Gallery upload' : 'Image upload'} — v2
-          </div>
-        </div>
-      )
-
-    case 'budget':
-      return (
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium block">
-            {field.label}
-            {field.required && <span className="text-destructive ml-0.5">*</span>}
-          </label>
-          <div className="flex items-center justify-center rounded-lg border-2 border-dashed py-8 text-sm text-muted-foreground">
-            Budget / line items — v2
-          </div>
-        </div>
-      )
-
-    default:
-      return null
-  }
-}
-
-export function FormRenderer({ schema, data, onChange, readOnly }: FormRendererProps) {
-  const sortedFields = [...schema.fields].sort((a, b) => a.row - b.row || a.col - b.col)
-
-  const handleFieldChange = useCallback(
-    (fieldId: string, value: unknown) => {
-      onChange({ ...data, [fieldId]: value })
-    },
-    [data, onChange],
-  )
-
-  return (
-    <div
-      className="grid gap-x-4 gap-y-3"
-      style={{ gridTemplateColumns: 'repeat(12, 1fr)' }}
-    >
-      {sortedFields.map((field) => (
-        <div key={field.id} style={{ gridColumn: `span ${field.colSpan}` }}>
-          <FieldRenderer
-            field={field}
-            value={data[field.id]}
-            onChange={(v) => handleFieldChange(field.id, v)}
-            readOnly={readOnly}
-          />
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/FormViewer.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { ArrowLeft, Pencil, Printer } from 'lucide-react'
-import { Button } from '@fayz-ai/ui'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { FormDocument, FormTemplate } from '../types'
-import { FormRenderer } from './FormRenderer'
-import { printDocument } from '../lib/print'
-
-interface FormViewerProps {
-  document: FormDocument
-  provider: CustomFormsDataProvider
-  onBack: () => void
-  onEdit?: (doc: FormDocument) => void
-}
-
-const STATUS_COLORS: Record<string, 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',
-}
-
-export function FormViewer({ document: doc, provider, onBack, onEdit }: FormViewerProps) {
-  const t = useTranslation()
-  const [template, setTemplate] = useState<FormTemplate | null>(null)
-
-  useEffect(() => {
-    if (!doc.templateId) return
-    const timer = setTimeout(() => {
-      provider.getTemplateById(doc.templateId).then(setTemplate)
-    }, 50)
-    return () => clearTimeout(timer)
-  }, [doc.templateId, provider])
-
-  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 truncate">
-            {doc.title ?? template.name}
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            {new Date(doc.createdAt).toLocaleDateString()}
-          </p>
-        </div>
-        <Badge variant="secondary" className={`text-[10px] ${STATUS_COLORS[doc.status] ?? ''}`}>
-          {t(`customForms.status.${doc.status}`)}
-        </Badge>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8"
-          onClick={() => printDocument(template, doc)}
-        >
-          <Printer className="h-3 w-3 mr-1" />
-          {t('customForms.printPdf')}
-        </Button>
-        {onEdit && doc.status === 'draft' && (
-          <Button variant="outline" size="sm" className="h-8" onClick={() => onEdit(doc)}>
-            <Pencil className="h-3 w-3 mr-1" />
-            {t('common.edit')}
-          </Button>
-        )}
-      </div>
-
-      {/* Form content (read-only) */}
-      <div className="rounded-xl border p-4">
-        <FormRenderer
-          schema={template.schema}
-          data={doc.data}
-          onChange={() => {}}
-          readOnly
-        />
-      </div>
-    </div>
-  )
-}

package/src/components/PersonDocumentsWidget.tsx

@@ -1,229 +0,0 @@
-import React, { useState, useCallback, useRef } from 'react'
-import { ArrowLeft, Image as ImageIcon, Paperclip } from 'lucide-react'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useLimitGuard, invalidateLimit } from '@fayz-ai/saas'
-import type { CustomFormsConfig } from '../config'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { CustomFormsStore } from '../store'
-import type { FormDocument, FormTemplate } from '../types'
-import type { DocumentTypeOption } from '../document-types'
-import { DocumentList } from './DocumentList'
-import { DocumentFormDialog } from './DocumentFormDialog'
-import { FormViewer } from './FormViewer'
-import { AddDocumentDropdown } from './AddDocumentDropdown'
-
-interface PersonDocumentsWidgetProps {
-  item: { id: string; name?: string; [key: string]: any }
-  config: CustomFormsConfig
-  provider: CustomFormsDataProvider
-  store: CustomFormsStore
-}
-
-type WidgetView =
-  | { type: 'list' }
-  | { type: 'fill'; template: FormTemplate }
-  | { type: 'view'; document: FormDocument }
-  | { type: 'edit'; document: FormDocument }
-
-export function PersonDocumentsWidget({ item, config, provider, store }: PersonDocumentsWidgetProps) {
-  const t = useTranslation()
-  const guardDocuments = useLimitGuard('documents_month')
-  const [view, setView] = useState<WidgetView>({ type: 'list' })
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [pendingFileAccept, setPendingFileAccept] = useState<string>('*/*')
-
-  const handleDocTypeSelect = useCallback(async (option: DocumentTypeOption) => {
-    // Form template
-    if (option.id.startsWith('template:')) {
-      const templateId = option.id.replace('template:', '')
-      const template = await provider.getTemplateById(templateId)
-      if (template) {
-        setView({ type: 'fill', template })
-      }
-      return
-    }
-
-    // Image — open file picker for images
-    if (option.id === 'core:image') {
-      setPendingFileAccept('image/*')
-      setTimeout(() => fileInputRef.current?.click(), 0)
-      return
-    }
-
-    // Attachment — open file picker for any file
-    if (option.id === 'core:attachment') {
-      setPendingFileAccept('*/*')
-      setTimeout(() => fileInputRef.current?.click(), 0)
-      return
-    }
-  }, [provider])
-
-  const handleFiles = useCallback(async (files: File[]) => {
-    // Plan monthly-quota guard (client-side, before the provider call) — count
-    // the whole batch. Opens the global UpgradeModal and aborts when the cap
-    // would be exceeded.
-    if ((await guardDocuments(files.length)) === 'blocked') return
-    for (const file of files) {
-      const isImage = file.type.startsWith('image/')
-      await store.getState().createDocument({
-        kind: isImage ? 'image' : 'attachment',
-        personId: item.id,
-        title: file.name,
-        fileName: file.name,
-        fileSize: file.size,
-        mimeType: file.type,
-        status: 'completed',
-      })
-    }
-    invalidateLimit('documents_month')
-  }, [store, item.id, guardDocuments])
-
-  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files ?? [])
-    if (files.length > 0) handleFiles(files)
-    e.target.value = ''
-  }, [handleFiles])
-
-  const handleViewDoc = useCallback((doc: FormDocument) => {
-    setView({ type: 'view', document: doc })
-  }, [])
-
-  const handleEditDoc = useCallback((doc: FormDocument) => {
-    setView({ type: 'edit', document: doc })
-  }, [])
-
-  const handleBack = useCallback(() => {
-    setView({ type: 'list' })
-  }, [])
-
-  const handleSaved = useCallback(() => {
-    setView({ type: 'list' })
-  }, [])
-
-  // Fill form
-  if (view.type === 'fill') {
-    return (
-      <DocumentFormDialog
-        template={view.template}
-        personId={item.id}
-        personName={item.name}
-        person={item}
-        provider={provider}
-        store={store}
-        onSaved={handleSaved}
-        onBack={handleBack}
-      />
-    )
-  }
-
-  // View document — route by kind
-  if (view.type === 'view') {
-    const doc = view.document
-    const isForm = doc.kind === 'form' || (!doc.kind && doc.templateId)
-
-    if (!isForm) {
-      // File document (image/attachment) — simple preview
-      return (
-        <FileDocumentViewer document={doc} onBack={handleBack} />
-      )
-    }
-
-    return (
-      <FormViewer
-        document={doc}
-        provider={provider}
-        onBack={handleBack}
-        onEdit={handleEditDoc}
-      />
-    )
-  }
-
-  // Edit document — only for form docs
-  if (view.type === 'edit') {
-    return (
-      <DocumentFormDialog
-        template={null}
-        existingDocument={view.document}
-        personId={item.id}
-        personName={item.name}
-        person={item}
-        provider={provider}
-        store={store}
-        onSaved={handleSaved}
-        onBack={handleBack}
-      />
-    )
-  }
-
-  // Default: list with dropdown + drag zone
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold">{t('customForms.documents')}</h3>
-        <AddDocumentDropdown personId={item.id} onSelect={handleDocTypeSelect} />
-      </div>
-      <DocumentList
-        personId={item.id}
-        provider={provider}
-        store={store}
-        onView={handleViewDoc}
-        onFileDrop={handleFiles}
-      />
-      {/* Hidden file input for image/attachment upload */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        className="hidden"
-        accept={pendingFileAccept}
-        multiple
-        onChange={handleFileInputChange}
-      />
-    </div>
-  )
-}
-
-function FileDocumentViewer({ document: doc, onBack }: { document: FormDocument; onBack: () => void }) {
-  const isImage = doc.kind === 'image' || doc.mimeType?.startsWith('image/')
-  const Icon = isImage ? ImageIcon : Paperclip
-
-  return (
-    <div className="space-y-4">
-      <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 truncate">{doc.title ?? doc.fileName ?? 'Document'}</h3>
-          <p className="text-xs text-muted-foreground">
-            {new Date(doc.createdAt).toLocaleDateString()}
-          </p>
-        </div>
-        <Badge variant="secondary" className="text-[10px] bg-success/15 text-success">
-          {doc.status === 'completed' ? 'Finalizado' : doc.status}
-        </Badge>
-      </div>
-
-      <div className="rounded-xl border p-6 flex flex-col items-center gap-4">
-        {isImage && doc.fileUrl ? (
-          <img src={doc.fileUrl} alt={doc.fileName ?? ''} className="max-w-full max-h-[500px] rounded-lg object-contain" />
-        ) : (
-          <div className="flex flex-col items-center gap-3 py-8">
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-              <Icon className="h-7 w-7 text-muted-foreground" />
-            </div>
-            <p className="text-sm font-medium">{doc.fileName ?? doc.title ?? 'Arquivo'}</p>
-            {doc.fileSize && (
-              <p className="text-xs text-muted-foreground">
-                {(doc.fileSize / 1024).toFixed(1)} KB
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/TemplateSelector.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { FileText, Search } from 'lucide-react'
-import { Input } from '@fayz-ai/ui'
-import { Badge } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { FormTemplate } from '../types'
-
-interface TemplateSelectorProps {
-  provider: CustomFormsDataProvider
-  onSelect: (template: FormTemplate) => void
-  onClose: () => void
-}
-
-export function TemplateSelector({ provider, onSelect, onClose }: TemplateSelectorProps) {
-  const t = useTranslation()
-  const [templates, setTemplates] = useState<FormTemplate[]>([])
-  const [search, setSearch] = useState('')
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setLoading(true)
-    provider
-      .getTemplates({ search: search || undefined })
-      .then((result) => setTemplates(result.data))
-      .finally(() => setLoading(false))
-  }, [provider, search])
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div
-        className="bg-card rounded-xl border shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="p-4 border-b">
-          <h3 className="font-semibold text-sm mb-3">{t('customForms.selectTemplate')}</h3>
-          <div className="relative">
-            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-            <Input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder={t('common.search')}
-              className="h-9 pl-8 text-sm"
-              autoFocus
-            />
-          </div>
-        </div>
-
-        {/* List */}
-        <div className="flex-1 overflow-y-auto p-2">
-          {loading && (
-            <div className="flex items-center justify-center py-8">
-              <div className="h-5 w-5 border-2 border-primary border-t-transparent animate-spin rounded-full" />
-            </div>
-          )}
-
-          {!loading && templates.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <FileText className="h-8 w-8 text-muted-foreground/50 mb-2" />
-              <p className="text-sm text-muted-foreground">{t('customForms.noTemplates')}</p>
-            </div>
-          )}
-
-          {templates.map((tpl) => (
-            <button
-              key={tpl.id}
-              onClick={() => onSelect(tpl)}
-              className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg hover:bg-muted transition-colors text-left"
-            >
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0">
-                <FileText className="h-4 w-4 text-primary" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium truncate">{tpl.name}</p>
-                <div className="flex items-center gap-2 mt-0.5">
-                  <Badge variant="secondary" className="text-[10px]">
-                    {t(`customForms.category.${tpl.category}`)}
-                  </Badge>
-                  <span className="text-[10px] text-muted-foreground">
-                    {tpl.schema.fields.length} {t('customForms.builder.fields').toLowerCase()}
-                  </span>
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}