From 67007058420490e2c4c8eb4eb86b0e724432a872 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 01:25:04 +0000
Subject: [PATCH] Add component binding dialog hook

---
 .../molecules/ComponentBindingDialog.tsx      | 20 ++++------
 src/hooks/use-component-binding-dialog.ts     | 40 +++++++++++++++++++
 2 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/use-component-binding-dialog.ts

diff --git a/src/components/molecules/ComponentBindingDialog.tsx b/src/components/molecules/ComponentBindingDialog.tsx
index 7b8fb9e..344660b 100644
--- a/src/components/molecules/ComponentBindingDialog.tsx
+++ b/src/components/molecules/ComponentBindingDialog.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { BindingEditor } from '@/components/molecules/BindingEditor'
 import { DataSource, UIComponent } from '@/types/json-ui'
 import { Link } from '@phosphor-icons/react'
+import { useComponentBindingDialog } from '@/hooks/use-component-binding-dialog'
 
 interface ComponentBindingDialogProps {
   open: boolean
@@ -21,18 +21,12 @@ export function ComponentBindingDialog({
   onOpenChange,
   onSave,
 }: ComponentBindingDialogProps) {
-  const [editingComponent, setEditingComponent] = useState<UIComponent | null>(component)
-
-  const handleSave = () => {
-    if (!editingComponent) return
-    onSave(editingComponent)
-    onOpenChange(false)
-  }
-
-  const updateBindings = (bindings: Record<string, any>) => {
-    if (!editingComponent) return
-    setEditingComponent({ ...editingComponent, bindings })
-  }
+  const { editingComponent, handleSave, updateBindings } = useComponentBindingDialog({
+    component,
+    open,
+    onOpenChange,
+    onSave,
+  })
 
   if (!editingComponent) return null
 
diff --git a/src/hooks/use-component-binding-dialog.ts b/src/hooks/use-component-binding-dialog.ts
new file mode 100644
index 0000000..148c651
--- /dev/null
+++ b/src/hooks/use-component-binding-dialog.ts
@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react'
+import { UIComponent } from '@/types/json-ui'
+
+interface UseComponentBindingDialogOptions {
+  component: UIComponent | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSave: (component: UIComponent) => void
+}
+
+export function useComponentBindingDialog({
+  component,
+  open,
+  onOpenChange,
+  onSave,
+}: UseComponentBindingDialogOptions) {
+  const [editingComponent, setEditingComponent] = useState<UIComponent | null>(component)
+
+  useEffect(() => {
+    if (open) {
+      setEditingComponent(component)
+    }
+  }, [component, open])
+
+  const updateBindings = useCallback((bindings: Record<string, any>) => {
+    setEditingComponent(prev => (prev ? { ...prev, bindings } : prev))
+  }, [])
+
+  const handleSave = useCallback(() => {
+    if (!editingComponent) return
+    onSave(editingComponent)
+    onOpenChange(false)
+  }, [editingComponent, onOpenChange, onSave])
+
+  return {
+    editingComponent,
+    handleSave,
+    updateBindings,
+  }
+}