@fayz-ai/plugin-forms 0.9.0 → 0.9.2

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

package/src/config.ts

@@ -1,43 +0,0 @@
-import type { PluginRegistryDef, PluginScope, VerticalId } from '@fayz-ai/core'
-import type { CustomFormsDataProvider } from './data/types'
-
-export interface CustomFormsPluginOptions {
-  scope?: PluginScope
-  verticalId?: VerticalId
-  dataProvider?: CustomFormsDataProvider
-  navSection?: 'main' | 'secondary' | 'settings'
-  navPosition?: number
-  labels?: Partial<CustomFormsLabels>
-  /** App-owned registries shown inside Forms & Documents settings. */
-  settingsRegistries?: PluginRegistryDef[]
-}
-
-export interface CustomFormsLabels {
-  pageTitle: string
-  settingsLabel: string
-  settingsSubtitle: string
-  templates: string
-  documents: string
-  newTemplate: string
-  addDocument: string
-}
-
-export interface CustomFormsConfig {
-  labels: CustomFormsLabels
-}
-
-const DEFAULT_LABELS: CustomFormsLabels = {
-  pageTitle: 'Custom Forms',
-  settingsLabel: 'Forms & Documents',
-  settingsSubtitle: 'Create and manage custom forms for your business',
-  templates: 'Templates',
-  documents: 'Documents',
-  newTemplate: 'New Template',
-  addDocument: 'Add Document',
-}
-
-export function resolveConfig(options?: CustomFormsPluginOptions): CustomFormsConfig {
-  return {
-    labels: { ...DEFAULT_LABELS, ...options?.labels },
-  }
-}

package/src/data/index.ts

@@ -1,3 +0,0 @@
-export type { CustomFormsDataProvider } from './types'
-export { createMockFormsProvider } from './mock'
-export { createSupabaseFormsProvider } from './supabase'

package/src/data/mock.ts

@@ -1,193 +0,0 @@
-import type { CustomFormsDataProvider } from './types'
-import type {
-  FormTemplate,
-  FormDocument,
-  DocumentFile,
-  TemplateQuery,
-  DocumentQuery,
-  PaginatedResult,
-  CreateTemplateInput,
-  UpdateTemplateInput,
-  CreateDocumentInput,
-  UpdateDocumentInput,
-} from '../types'
-
-function uuid() {
-  return crypto.randomUUID()
-}
-
-function now() {
-  return new Date().toISOString()
-}
-
-export function createMockFormsProvider(): CustomFormsDataProvider {
-  const templates: FormTemplate[] = []
-  const documents: FormDocument[] = []
-  const files: DocumentFile[] = []
-
-  return {
-    // ── Templates ──────────────────────────────────────────
-    async getTemplates(query: TemplateQuery): Promise<PaginatedResult<FormTemplate>> {
-      let filtered = templates.filter((t) => !t.isDeleted && t.isCurrent)
-      if (query.category) {
-        filtered = filtered.filter((t) => t.category === query.category)
-      }
-      if (query.search) {
-        const s = query.search.toLowerCase()
-        filtered = filtered.filter((t) => t.name.toLowerCase().includes(s))
-      }
-      const page = query.page ?? 1
-      const pageSize = query.pageSize ?? 25
-      const start = (page - 1) * pageSize
-      return { data: filtered.slice(start, start + pageSize), total: filtered.length }
-    },
-
-    async getTemplateById(id: string): Promise<FormTemplate | null> {
-      return templates.find((t) => t.id === id && !t.isDeleted) ?? null
-    },
-
-    async createTemplate(input: CreateTemplateInput): Promise<FormTemplate> {
-      const template: FormTemplate = {
-        id: uuid(),
-        tenantId: 'mock-tenant',
-        name: input.name,
-        description: input.description,
-        category: input.category,
-        version: 1,
-        isCurrent: true,
-        schema: input.schema,
-        specialty: input.specialty,
-        tags: input.tags ?? [],
-        metadata: input.metadata ?? {},
-        isActive: true,
-        isDeleted: false,
-        createdAt: now(),
-        updatedAt: now(),
-      }
-      templates.push(template)
-      return template
-    },
-
-    async updateTemplate(id: string, input: UpdateTemplateInput): Promise<FormTemplate> {
-      const idx = templates.findIndex((t) => t.id === id)
-      if (idx === -1) throw new Error('Template not found')
-      const existing = templates[idx]
-      const updated: FormTemplate = {
-        ...existing,
-        ...input,
-        tags: input.tags ?? existing.tags,
-        metadata: input.metadata ?? existing.metadata,
-        schema: input.schema ?? existing.schema,
-        updatedAt: now(),
-      }
-      templates[idx] = updated
-      return updated
-    },
-
-    async deleteTemplate(id: string): Promise<void> {
-      const idx = templates.findIndex((t) => t.id === id)
-      if (idx !== -1) templates[idx] = { ...templates[idx], isDeleted: true }
-    },
-
-    // ── Documents ──────────────────────────────────────────
-    async getDocuments(query: DocumentQuery): Promise<PaginatedResult<FormDocument>> {
-      let filtered = documents.filter((d) => !d.isDeleted)
-      if (query.personId) {
-        filtered = filtered.filter((d) => d.personId === query.personId)
-      }
-      if (query.templateId) {
-        filtered = filtered.filter((d) => d.templateId === query.templateId)
-      }
-      if (query.status) {
-        const statuses = Array.isArray(query.status) ? query.status : [query.status]
-        filtered = filtered.filter((d) => statuses.includes(d.status))
-      }
-      if (query.search) {
-        const s = query.search.toLowerCase()
-        filtered = filtered.filter(
-          (d) =>
-            d.title?.toLowerCase().includes(s) ||
-            d.templateName?.toLowerCase().includes(s),
-        )
-      }
-      filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
-      const page = query.page ?? 1
-      const pageSize = query.pageSize ?? 25
-      const start = (page - 1) * pageSize
-      return { data: filtered.slice(start, start + pageSize), total: filtered.length }
-    },
-
-    async getDocumentById(id: string): Promise<FormDocument | null> {
-      return documents.find((d) => d.id === id && !d.isDeleted) ?? null
-    },
-
-    async createDocument(input: CreateDocumentInput): Promise<FormDocument> {
-      const template = templates.find((t) => t.id === input.templateId)
-      const doc: FormDocument = {
-        id: uuid(),
-        tenantId: 'mock-tenant',
-        templateId: input.templateId ?? '',
-        templateName: template?.name,
-        templateCategory: template?.category,
-        personId: input.personId,
-        title: input.title,
-        data: input.data ?? {},
-        kind: input.kind ?? (input.templateId ? 'form' : 'attachment'),
-        status: input.status ?? 'draft',
-        metadata: {},
-        isDeleted: false,
-        createdAt: now(),
-        updatedAt: now(),
-      }
-      documents.push(doc)
-      return doc
-    },
-
-    async updateDocument(id: string, input: UpdateDocumentInput): Promise<FormDocument> {
-      const idx = documents.findIndex((d) => d.id === id)
-      if (idx === -1) throw new Error('Document not found')
-      const existing = documents[idx]
-      const updated: FormDocument = {
-        ...existing,
-        ...input,
-        data: input.data ?? existing.data,
-        updatedAt: now(),
-      }
-      documents[idx] = updated
-      return updated
-    },
-
-    async deleteDocument(id: string): Promise<void> {
-      const idx = documents.findIndex((d) => d.id === id)
-      if (idx !== -1) documents[idx] = { ...documents[idx], isDeleted: true }
-    },
-
-    // ── Files ──────────────────────────────────────────────
-    async getDocumentFiles(documentId: string): Promise<DocumentFile[]> {
-      return files.filter((f) => f.documentId === documentId)
-    },
-
-    async uploadFile(documentId: string, fieldKey: string, file: File): Promise<DocumentFile> {
-      const docFile: DocumentFile = {
-        id: uuid(),
-        tenantId: 'mock-tenant',
-        documentId,
-        fieldKey,
-        fileUrl: URL.createObjectURL(file),
-        fileName: file.name,
-        fileSize: file.size,
-        mimeType: file.type,
-        sortOrder: files.filter((f) => f.documentId === documentId && f.fieldKey === fieldKey).length,
-        metadata: {},
-        createdAt: now(),
-      }
-      files.push(docFile)
-      return docFile
-    },
-
-    async deleteFile(fileId: string): Promise<void> {
-      const idx = files.findIndex((f) => f.id === fileId)
-      if (idx !== -1) files.splice(idx, 1)
-    },
-  }
-}