@fayz-ai/plugin-forms 0.9.0 → 0.9.2

package/src/components/FormBuilder.tsx

@@ -1,427 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import {
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  PointerSensor,
-  pointerWithin,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core'
-import { arrayMove } from '@dnd-kit/sortable'
-import { snapCenterToCursor } from '@dnd-kit/modifiers'
-import { ArrowLeft, Eye, Pencil, Printer } from 'lucide-react'
-import { Button, useSaveBar, toast } from '@fayz-ai/ui'
-import { Input } from '@fayz-ai/ui'
-import { Card, CardContent } from '@fayz-ai/ui'
-import { Badge } from '@fayz-ai/ui'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useLimitGuard, invalidateLimit, useAgentSurface, type AgentSurfaceContribution } from '@fayz-ai/saas'
-import type { CustomFormsStore } from '../store'
-import type { CustomFormsDataProvider } from '../data/types'
-import type { CustomFormsConfig } from '../config'
-import type { FormFieldDef, FormSchema, TemplateCategory } from '../types'
-import { FieldPalette, FIELD_TYPES, DEFAULT_COL_SPAN } from './FieldPalette'
-import { BuilderCanvas } from './BuilderCanvas'
-import { FieldConfigDrawer } from './FieldConfigDialog'
-import { createPortal } from 'react-dom'
-import { FormRenderer } from './FormRenderer'
-import { buildPrintHtml } from '../lib/print'
-import { FORM_BUILDER_INSTRUCTIONS } from '../agent-tools'
-
-const TEMPLATE_CATEGORIES: TemplateCategory[] = ['anamnesis', 'evolution', 'report', 'contract', 'general']
-
-interface FormBuilderProps {
-  templateId?: string
-  store: CustomFormsStore
-  provider: CustomFormsDataProvider
-  config: CustomFormsConfig
-  onBack: () => void
-}
-
-export function FormBuilder({ templateId, store, provider, config, onBack }: FormBuilderProps) {
-  const t = useTranslation()
-  const guardTemplates = useLimitGuard('form_templates')
-
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [category, setCategory] = useState<TemplateCategory>('general')
-  const [fields, setFields] = useState<FormFieldDef[]>([])
-  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [showPreview, setShowPreview] = useState(false)
-  const [previewMode, setPreviewMode] = useState<'editor' | 'print'>('editor')
-  const [previewData, setPreviewData] = useState<Record<string, unknown>>({})
-  const [draggingFieldType, setDraggingFieldType] = useState<import('../types').FormFieldType | null>(null)
-  const [templateName, setTemplateName] = useState<string | null>(null)
-
-  // Load existing template
-  useEffect(() => {
-    if (!templateId) return
-    let cancelled = false
-    provider.getTemplateById(templateId).then((tpl) => {
-      if (cancelled || !tpl) return
-      setName(tpl.name)
-      setTemplateName(tpl.name)
-      setDescription(tpl.description ?? '')
-      setCategory(tpl.category)
-      setFields(tpl.schema.fields)
-    })
-    return () => { cancelled = true }
-  }, [templateId, provider])
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-  )
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    const data = event.active.data.current
-    if (data?.source === 'palette') {
-      setDraggingFieldType(data.fieldType)
-    }
-  }, [])
-
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    setDraggingFieldType(null)
-    const { active, over } = event
-
-    // Dropped from palette onto canvas
-    if (active.data.current?.source === 'palette' && over) {
-      const fieldType = active.data.current.fieldType
-      const typeDef = FIELD_TYPES.find((ft) => ft.type === fieldType)
-      if (!typeDef) return
-
-      const newField: FormFieldDef = {
-        id: crypto.randomUUID(),
-        type: fieldType,
-        label: t(`customForms.fieldType.${fieldType}`),
-        col: 0,
-        row: fields.length,
-        colSpan: DEFAULT_COL_SPAN[fieldType] ?? 12,
-      }
-
-      if (['select', 'radio', 'tags'].includes(fieldType)) {
-        newField.options = [
-          { label: 'Option 1', value: 'option_1' },
-          { label: 'Option 2', value: 'option_2' },
-        ]
-      }
-
-      setFields((prev) => [...prev, newField])
-      return
-    }
-
-    // Reorder within canvas
-    if (active.id !== over?.id && over) {
-      setFields((prev) => {
-        const oldIndex = prev.findIndex((f) => f.id === active.id)
-        const newIndex = prev.findIndex((f) => f.id === over.id)
-        if (oldIndex === -1 || newIndex === -1) return prev
-        const reordered = arrayMove(prev, oldIndex, newIndex)
-        return reordered.map((f, i) => ({ ...f, row: i }))
-      })
-    }
-  }, [fields, t])
-
-  const handleSelectField = useCallback((field: FormFieldDef) => {
-    setSelectedFieldId(field.id)
-  }, [])
-
-  const handleRemoveField = useCallback((fieldId: string) => {
-    setFields((prev) => prev.filter((f) => f.id !== fieldId).map((f, i) => ({ ...f, row: i })))
-    if (selectedFieldId === fieldId) setSelectedFieldId(null)
-  }, [selectedFieldId])
-
-  const handleFieldUpdate = useCallback((updated: FormFieldDef) => {
-    setFields((prev) => prev.map((f) => (f.id === updated.id ? updated : f)))
-  }, [])
-
-  // --- Assistant surface: publish WHAT THE USER IS EDITING as context --------
-  // The build action is the server-plane createOrUpdateForm tool (a pool RPC),
-  // which works from any page. This surface only tells the model which template
-  // is open and its current fields+ids, so "add an allergies field to THIS
-  // form" resolves to the right templateId. No client-side mutation here.
-  const surfaceStateRef = React.useRef({ templateId, name, description, category, fields })
-  surfaceStateRef.current = { templateId, name, description, category, fields }
-
-  const agentSurface = React.useMemo<AgentSurfaceContribution>(
-    () => ({
-      id: 'custom_forms.builder',
-      pluginId: 'custom_forms',
-      instructions: FORM_BUILDER_INSTRUCTIONS,
-      describe: () => {
-        const o = surfaceStateRef.current
-        return {
-          title: `Construtor de formulário — ${o.name?.trim() || 'novo modelo'}`,
-          state: {
-            // Pass this as `templateId` to createOrUpdateForm when editing THIS
-            // form. Null = an unsaved new form (create, then it gets an id).
-            templateId: o.templateId ?? null,
-            unsaved: !o.templateId,
-            name: o.name ?? '',
-            category: o.category ?? 'general',
-            description: o.description ?? '',
-            fieldCount: o.fields.length,
-            fields: o.fields.map((f) => ({
-              id: f.id,
-              type: f.type,
-              label: f.label,
-              required: !!f.required,
-              ...(f.options?.length ? { options: f.options.map((x) => x.label) } : {}),
-            })),
-          },
-        }
-      },
-    }),
-    [],
-  )
-  useAgentSurface(agentSurface)
-  // ---------------------------------------------------------------------------
-
-  const handleFieldConfigSave = useCallback((updated: FormFieldDef) => {
-    handleFieldUpdate(updated)
-    setSelectedFieldId(null)
-  }, [handleFieldUpdate])
-
-  const handleSave = useCallback(async () => {
-    if (!name.trim()) { toast.error(t('common.formIncomplete')); return }
-    // Plan quantity guard (client-side, before the provider call) — only on
-    // create. Opens the global UpgradeModal and aborts when the cap is reached.
-    if (!templateId && (await guardTemplates()) === 'blocked') return
-    setSaving(true)
-    try {
-      const schema: FormSchema = { fields, layout: { columns: 12 } }
-
-      if (templateId) {
-        await store.getState().updateTemplate(templateId, { name, description, category, schema })
-      } else {
-        await store.getState().createTemplate({ name, description, category, schema })
-        invalidateLimit('form_templates')
-      }
-      onBack()
-    } finally {
-      setSaving(false)
-    }
-  }, [templateId, name, description, category, fields, store, onBack, guardTemplates])
-
-  // Dirty detection — snapshot editable fields once async load settles
-  const currentFields = { name, description, category, fields }
-  const snapshot = React.useRef<string | null>(null)
-  const loaded = !templateId || templateName !== null
-  useEffect(() => {
-    if (loaded && snapshot.current === null) snapshot.current = JSON.stringify(currentFields)
-  }, [loaded])
-  const dirty = snapshot.current !== null && JSON.stringify(currentFields) !== snapshot.current
-
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void handleSave() },
-    onDiscard: () => onBack(),
-    saveLabel: t('customForms.builder.save'),
-  })
-
-  const selectedField = selectedFieldId
-    ? fields.find((f) => f.id === selectedFieldId) ?? null
-    : null
-
-  const isNew = !templateId
-  const breadcrumbLabel = isNew
-    ? t('customForms.newTemplate')
-    : templateName ?? t('customForms.editTemplate')
-
-  return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-1.5 text-sm">
-        <button
-          onClick={onBack}
-          className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          {t('customForms.templates')}
-        </button>
-        <span className="text-muted-foreground">/</span>
-        <span className="font-medium">{breadcrumbLabel}</span>
-      </div>
-
-      {/* Form meta — card layout matching CRUD form */}
-      <Card>
-        <CardContent className="p-5 space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <label className="text-sm font-medium">
-                {t('customForms.templateName')} <span className="text-destructive">*</span>
-              </label>
-              <Input
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder={t('customForms.templateName')}
-                className="h-9 text-sm"
-                autoFocus={isNew}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <label className="text-sm font-medium">{t('customForms.templateCategory')}</label>
-              <Select value={category} onValueChange={(v) => setCategory(v as TemplateCategory)}>
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {TEMPLATE_CATEGORIES.map((cat) => (
-                    <SelectItem key={cat} value={cat}>
-                      {t(`customForms.category.${cat}`)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium">{t('customForms.templateDescription')}</label>
-            <Input
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder={t('customForms.templateDescription')}
-              className="h-9 text-sm"
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Builder section header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h3 className="text-sm font-semibold">{t('customForms.builder.fields')}</h3>
-          <Badge variant="secondary" className="text-[10px]">
-            {t('customForms.builder.fieldCount', { count: String(fields.length) })}
-          </Badge>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-9"
-            disabled={fields.length === 0}
-            onClick={() => { setPreviewData({}); setPreviewMode('editor'); setShowPreview(true) }}
-          >
-            <Eye className="h-3.5 w-3.5 mr-1.5" />
-            Preview
-          </Button>
-        </div>
-      </div>
-
-      {/* Builder body — drag palette + canvas */}
-      <DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <div className="flex gap-4">
-          <FieldPalette />
-          <BuilderCanvas
-            fields={fields}
-            selectedFieldId={selectedFieldId}
-            onSelectField={handleSelectField}
-            onRemoveField={handleRemoveField}
-            draggingFieldType={draggingFieldType}
-          />
-        </div>
-
-        <DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
-          {draggingFieldType ? (
-            <div className="flex items-center gap-2 px-3 py-2 rounded-lg border bg-card shadow-xl text-sm font-medium opacity-90 pointer-events-none">
-              {(() => {
-                const def = FIELD_TYPES.find((ft) => ft.type === draggingFieldType)
-                if (!def) return null
-                const Icon = def.icon
-                return (
-                  <>
-                    <Icon className="h-4 w-4 text-primary" />
-                    {t(`customForms.fieldType.${draggingFieldType}`)}
-                  </>
-                )
-              })()}
-            </div>
-          ) : null}
-        </DragOverlay>
-      </DndContext>
-
-      {/* Field config drawer (right side) */}
-      <FieldConfigDrawer
-        field={selectedField}
-        onSave={handleFieldConfigSave}
-        onUpdate={handleFieldUpdate}
-        onClose={() => setSelectedFieldId(null)}
-      />
-
-      {/* Preview — A4 paper overlay (portaled to body) */}
-      {showPreview && createPortal(
-        <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/60 overflow-y-auto py-10 px-4" onClick={() => setShowPreview(false)}>
-          <div
-            className="relative w-full max-w-3xl bg-white rounded-modal shadow-lg"
-            style={{ minHeight: '80vh' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Toggle Editor ⟷ Impressão (centered) + close, on a sticky top bar. */}
-            <div className="sticky top-0 z-10 flex items-center justify-center border-b bg-white/95 backdrop-blur px-4 py-2.5 rounded-t-modal">
-              <div className="inline-flex rounded-lg border p-0.5 text-xs">
-                <button
-                  onClick={() => setPreviewMode('editor')}
-                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'editor' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
-                >
-                  <Pencil className="h-3.5 w-3.5" />
-                  {t('customForms.preview.editor')}
-                </button>
-                <button
-                  onClick={() => setPreviewMode('print')}
-                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-md font-medium transition-colors ${previewMode === 'print' ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:text-neutral-800'}`}
-                >
-                  <Printer className="h-3.5 w-3.5" />
-                  {t('customForms.preview.print')}
-                </button>
-              </div>
-              <button
-                onClick={() => setShowPreview(false)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
-              >
-                <span className="text-lg">✕</span>
-              </button>
-            </div>
-
-            {previewMode === 'editor' ? (
-              /* Editor — fillable form (same renderer used on the person's ficha) */
-              <div className="px-10 py-8 sm:px-14 sm:py-10 text-neutral-900">
-                <h1 className="text-2xl font-bold mb-1">{name || t('customForms.newTemplate')}</h1>
-                {description && <p className="text-sm text-neutral-500 mb-8">{description}</p>}
-                {!description && <div className="mb-8" />}
-
-                <FormRenderer
-                  schema={{ fields, layout: { columns: 12 } }}
-                  data={previewData}
-                  onChange={setPreviewData}
-                />
-              </div>
-            ) : (
-              /* Impressão — exact print/PDF output rendered in an isolated iframe */
-              <iframe
-                title="print-preview"
-                className="w-full rounded-b-modal"
-                style={{ height: '75vh', border: 'none' }}
-                srcDoc={buildPrintHtml(
-                  { id: 'preview', name: name || t('customForms.newTemplate'), schema: { fields, layout: { columns: 12 } } } as any,
-                  { title: name || t('customForms.newTemplate'), createdAt: new Date().toISOString(), status: 'draft', data: previewData } as any,
-                )}
-              />
-            )}
-          </div>
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}

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