{
  "name": "droplit-components-datapushform",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/droplit/components/DataPushForm.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Card, CardContent } from \"../../ui/card.js\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../../ui/select.js\";\nimport { Textarea } from \"../../ui/textarea.js\";\nimport { DataPushButton } from \"./DataPushButton\";\n\nexport interface DataPushFormProps {\n\tonSuccess?: (result: {\n\t\ttxid: string;\n\t\tdata: string[];\n\t\ttemplate: string;\n\t}) => void;\n\tonError?: (error: Error) => void;\n\tbuttonText?: string;\n\tclassName?: string;\n}\n\nconst protocols = [\n\t{\n\t\tid: \"B_SOCIAL\",\n\t\tname: \"Social Protocol\",\n\t\tfields: [\"protocol\", \"action\", \"content\", \"timestamp\"],\n\t},\n\t{\n\t\tid: \"B_MARKET\",\n\t\tname: \"Market Protocol\",\n\t\tfields: [\"protocol\", \"action\", \"asset\", \"price\", \"currency\", \"description\"],\n\t},\n\t{\n\t\tid: \"B_ID\",\n\t\tname: \"Identity Protocol\",\n\t\tfields: [\"protocol\", \"action\", \"type\", \"value\", \"signature\"],\n\t},\n];\n\n/**\n * DataPushForm - Custom form for building and pushing protocol data to Bitcoin\n *\n * This component provides a flexible form interface for building structured\n * protocol data that gets pushed to the Bitcoin blockchain via droplit.\n * Uses DataPushButton internally for the actual push functionality.\n *\n * @example\n * ```tsx\n * <DataPushForm\n *   onSuccess={(result) => console.log('Data pushed:', result)}\n *   onError={(error) => console.error('Error:', error)}\n *   buttonText=\"Push My Data\"\n * />\n * ```\n */\nexport function DataPushForm({\n\tonSuccess,\n\tonError,\n\tbuttonText = \"Push Custom Data\",\n\tclassName = \"\",\n}: DataPushFormProps) {\n\tconst [selectedProtocol, setSelectedProtocol] = useState(protocols[0]);\n\tconst [formData, setFormData] = useState<Record<string, string>>({\n\t\tprotocol: \"B_SOCIAL\",\n\t\taction: \"POST\",\n\t\tcontent: \"\",\n\t\ttimestamp: \"\",\n\t});\n\n\tconst buildDataArray = (): string[] => {\n\t\tif (!selectedProtocol) return [];\n\t\treturn selectedProtocol.fields\n\t\t\t.map((field) => {\n\t\t\t\tif (field === \"timestamp\" && !formData[field]) {\n\t\t\t\t\treturn new Date().toISOString();\n\t\t\t\t}\n\t\t\t\treturn formData[field] || \"\";\n\t\t\t})\n\t\t\t.filter(Boolean);\n\t};\n\n\tconst handleFieldChange = (field: string, value: string) => {\n\t\tsetFormData((prev) => ({ ...prev, [field]: value }));\n\t};\n\n\tconst handleProtocolChange = (protocolId: string) => {\n\t\tconst protocol = protocols.find((p) => p.id === protocolId);\n\t\tif (protocol) {\n\t\t\tsetSelectedProtocol(protocol);\n\t\t\t// Reset form data with new protocol defaults\n\t\t\tconst newFormData: Record<string, string> = {\n\t\t\t\tprotocol: protocolId,\n\t\t\t};\n\n\t\t\t// Set some defaults based on protocol\n\t\t\tif (protocolId === \"B_SOCIAL\") {\n\t\t\t\tnewFormData.action = \"POST\";\n\t\t\t} else if (protocolId === \"B_MARKET\") {\n\t\t\t\tnewFormData.action = \"LIST\";\n\t\t\t\tnewFormData.currency = \"BSV\";\n\t\t\t} else if (protocolId === \"B_ID\") {\n\t\t\t\tnewFormData.action = \"ATTEST\";\n\t\t\t}\n\n\t\t\tsetFormData(newFormData);\n\t\t}\n\t};\n\n\tconst dataArray = buildDataArray();\n\tconst isDataValid = dataArray.length >= 2; // At least protocol and action\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-4\", className)}>\n\t\t\t<Card>\n\t\t\t\t<CardContent className=\"flex flex-col gap-3 p-6\">\n\t\t\t\t\t<h3 className=\"text-lg font-bold\">Custom Protocol Builder</h3>\n\n\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t<p className=\"text-sm font-medium\">Protocol</p>\n\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\tvalue={selectedProtocol?.id || \"\"}\n\t\t\t\t\t\t\tonValueChange={handleProtocolChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t{protocols.map((protocol) => (\n\t\t\t\t\t\t\t\t\t<SelectItem key={protocol.id} value={protocol.id}>\n\t\t\t\t\t\t\t\t\t\t{protocol.name}\n\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t</Select>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{selectedProtocol?.fields.map((field) => (\n\t\t\t\t\t\t<div key={field} className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t<p className=\"text-sm font-medium capitalize\">{field}</p>\n\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\tvalue={formData[field] || \"\"}\n\t\t\t\t\t\t\t\tonChange={(e) => handleFieldChange(field, e.target.value)}\n\t\t\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\t\t\tfield === \"timestamp\"\n\t\t\t\t\t\t\t\t\t\t? \"Auto-generated if empty\"\n\t\t\t\t\t\t\t\t\t\t: `Enter ${field}...`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trows={field === \"content\" || field === \"description\" ? 3 : 1}\n\t\t\t\t\t\t\t\tdisabled={field === \"protocol\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</CardContent>\n\t\t\t</Card>\n\n\t\t\t<DataPushButton\n\t\t\t\tdata={isDataValid ? dataArray : undefined}\n\t\t\t\tonSuccess={onSuccess}\n\t\t\t\tonError={onError}\n\t\t\t\tbuttonText={buttonText}\n\t\t\t\tshowPreview={true}\n\t\t\t\tshowTemplateSelector={false}\n\t\t\t\tdisabled={!isDataValid}\n\t\t\t/>\n\n\t\t\t{!isDataValid && (\n\t\t\t\t<p className=\"text-xs text-purple-600\">\n\t\t\t\t\tFill in at least the protocol and action fields to enable push\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/datapushform.tsx"
    }
  ]
}