@fayz-ai/plugin-forms 0.1.1

package/dist/views/TemplateListView.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CustomFormsStore } from '../store';
+import type { CustomFormsConfig } from '../config';
+import type { FormTemplate } from '../types';
+interface TemplateListViewProps {
+    store: CustomFormsStore;
+    config: CustomFormsConfig;
+    onEdit: (template: FormTemplate) => void;
+    onNew: () => void;
+}
+export declare function TemplateListView({ store, config, onEdit, onNew }: TemplateListViewProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=TemplateListView.d.ts.map

package/dist/views/TemplateListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateListView.d.ts","sourceRoot":"","sources":["../../src/views/TemplateListView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAQ/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAA;AAE9D,UAAU,qBAAqB;IAC7B,KAAK,EAAE,gBAAgB,CAAA;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,MAAM,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAUD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,qBAAqB,qBAuIvF"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@fayz-ai/plugin-forms",
+  "version": "0.1.1",
+  "description": "Fayz SDK — plugin-forms plugin",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.400.0",
+    "zustand": "^4.5.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@fayz-ai/ui": "^0.1.6",
+    "@fayz-ai/core": "^0.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "tsup": "^8.2.0",
+    "typescript": "^5.5.0",
+    "@types/react-dom": "^18.3.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "fayz",
+    "fayz-plugin",
+    "fayz-sdk"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/CustomFormsContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react'
+import type { CustomFormsConfig } from './config'
+import type { CustomFormsDataProvider } from './data/types'
+import type { CustomFormsStore } from './store'
+
+export interface CustomFormsContextValue {
+  config: CustomFormsConfig
+  provider: CustomFormsDataProvider
+  store: CustomFormsStore
+}
+
+const Ctx = createContext<CustomFormsContextValue | null>(null)
+
+export function CustomFormsProvider({
+  value,
+  children,
+}: {
+  value: CustomFormsContextValue
+  children: React.ReactNode
+}) {
+  return React.createElement(Ctx.Provider, { value }, children)
+}
+
+export function useCustomFormsContext(): CustomFormsContextValue {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useCustomFormsContext must be used within CustomFormsProvider')
+  return ctx
+}

package/src/components/AddDocumentDropdown.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useCallback, useRef } from 'react'
+import { Plus, ChevronDown } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownLabel,
+  DropdownSeparator,
+} from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getAllDocumentTypes, type DocumentTypeOption } from '../document-types'
+
+interface AddDocumentDropdownProps {
+  personId: string
+  onSelect: (option: DocumentTypeOption) => void
+}
+
+export function AddDocumentDropdown({ personId, onSelect }: AddDocumentDropdownProps) {
+  const t = useTranslation()
+  const [options, setOptions] = useState<DocumentTypeOption[]>([])
+  const [loaded, setLoaded] = useState(false)
+  const loadingRef = useRef(false)
+
+  const handleOpen = useCallback((open: boolean) => {
+    if (!open || loaded || loadingRef.current) return
+    loadingRef.current = true
+    getAllDocumentTypes(personId).then((opts) => {
+      setOptions(opts)
+      setLoaded(true)
+      loadingRef.current = false
+    })
+  }, [personId, loaded])
+
+  // Group options by group label
+  const groups: Array<{ label: string; items: DocumentTypeOption[] }> = []
+  for (const opt of options) {
+    let group = groups.find((g) => g.label === opt.group)
+    if (!group) {
+      group = { label: opt.group, items: [] }
+      groups.push(group)
+    }
+    group.items.push(opt)
+  }
+
+  return (
+    <Dropdown onOpenChange={handleOpen}>
+      <DropdownTrigger asChild>
+        <Button size="sm" className="h-8">
+          <Plus className="h-3.5 w-3.5 mr-1" />
+          {t('customForms.addDocument')}
+          <ChevronDown className="h-3 w-3 ml-1 opacity-50" />
+        </Button>
+      </DropdownTrigger>
+      <DropdownContent align="end" className="w-56">
+        {groups.map((group, gi) => (
+          <React.Fragment key={group.label}>
+            {gi > 0 && <DropdownSeparator />}
+            <DropdownLabel className="text-[10px] uppercase tracking-wider">
+              {group.label}
+            </DropdownLabel>
+            {group.items.map((opt) => {
+              const Icon = opt.icon
+              return (
+                <DropdownItem key={opt.id} onClick={() => onSelect(opt)} className="gap-2">
+                  <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">{opt.label}</p>
+                    {opt.description && (
+                      <p className="text-[10px] text-muted-foreground truncate">{opt.description}</p>
+                    )}
+                  </div>
+                </DropdownItem>
+              )
+            })}
+          </React.Fragment>
+        ))}
+        {!loaded && (
+          <div className="flex items-center justify-center py-3">
+            <div className="h-4 w-4 border-2 border-primary border-t-transparent animate-spin rounded-full" />
+          </div>
+        )}
+        {loaded && options.length === 0 && (
+          <div className="px-2 py-3 text-center text-xs text-muted-foreground">
+            {t('customForms.noTemplates')}
+          </div>
+        )}
+      </DropdownContent>
+    </Dropdown>
+  )
+}

package/src/components/BuilderCanvas.tsx

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,134 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { ArrowLeft, Save, Loader2 } from 'lucide-react'
+import { Button, useSaveBar } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { CustomFormsDataProvider } from '../data/types'
+import type { CustomFormsStore } from '../store'
+import type { FormTemplate, FormDocument } from '../types'
+import { FormRenderer } from './FormRenderer'
+
+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
+  provider: CustomFormsDataProvider
+  store: CustomFormsStore
+  onSaved: () => void
+  onBack: () => void
+}
+
+export function DocumentFormDialog({
+  template: initialTemplate,
+  existingDocument,
+  personId,
+  personName,
+  provider,
+  store,
+  onSaved,
+  onBack,
+}: DocumentFormDialogProps) {
+  const t = useTranslation()
+  const [template, setTemplate] = useState<FormTemplate | null>(initialTemplate)
+  const [data, setData] = useState<Record<string, unknown>>(existingDocument?.data ?? {})
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (existingDocument && !template) {
+      provider.getTemplateById(existingDocument.templateId).then(setTemplate)
+    }
+  }, [existingDocument, template, provider])
+
+  const handleSave = useCallback(
+    async (status: 'draft' | 'completed') => {
+      if (!template) 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,
+          })
+        }
+        onSaved()
+      } finally {
+        setSaving(false)
+      }
+    },
+    [template, existingDocument, data, personId, personName, store, onSaved],
+  )
+
+  // Dirty detection — snapshot editable field values once template is ready
+  const snapshot = React.useRef<string | null>(null)
+  useEffect(() => {
+    if (template && snapshot.current === null) snapshot.current = JSON.stringify(data)
+  }, [template])
+  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 */}
+      <div className="rounded-xl border p-4">
+        <FormRenderer
+          schema={template.schema}
+          data={data}
+          onChange={setData}
+        />
+      </div>
+
+      {/* Secondary action — primary "Save & Complete" lives in the floating SaveBar */}
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" size="sm" onClick={() => handleSave('draft')} disabled={saving}>
+          {saving ? <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> : <Save className="h-3.5 w-3.5 mr-1.5" />}
+          {t('customForms.saveAsDraft')}
+        </Button>
+      </div>
+    </div>
+  )
+}