@enerjisaformlibrary/formbuilder-react 1.0.5 → 1.0.7

package/README.md

@@ -36,19 +36,6 @@ function App() {
 }
 ```
 
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `initialForm` | `FormSchema` | - | Initial form data to load |
-| `onChange` | `(form: FormSchema) => void` | - | Called when form changes |
-| `onSave` | `(form: FormSchema) => void` | - | Called when save is triggered |
-| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
-| `showToolbar` | `boolean` | `true` | Show/hide toolbar |
-| `showComponentLibrary` | `boolean` | `true` | Show/hide component library |
-| `showPropertiesPanel` | `boolean` | `true` | Show/hide properties panel |
-| `className` | `string` | - | Additional CSS class |
-
 ## Features
 
 - 20+ field types (input, textarea, dropdown, checkbox, radio, date, file, signature, rating, etc.)
@@ -61,41 +48,6 @@ function App() {
 - Responsive grid system (12-column)
 - Dark/Light theme support
 
-## Individual Components
-
-You can also import individual components:
-
-```tsx
-import {
-  FormCanvas,
-  PropertiesPanel,
-  ComponentLibrary,
-  Toolbar,
-  useFormStore
-} from '@enerjisaformlibrary/formbuilder-react';
-```
-
-## Getting Form JSON
-
-```tsx
-import { useFormStore } from '@enerjisaformlibrary/formbuilder-react';
-
-function SaveButton() {
-  const form = useFormStore((state) => state.form);
-  
-  const handleSave = () => {
-    const formJson = JSON.stringify(form, null, 2);
-    // Send to your API
-    fetch('/api/forms', {
-      method: 'POST',
-      body: formJson
-    });
-  };
-
-  return <button onClick={handleSave}>Save Form</button>;
-}
-```
-
 ## License
 
 MIT

package/index.cjs

@@ -28550,24 +28550,54 @@ function FormBuilder({ initialForm, onSave, onChange, className = '', theme = 'l
     }));
     const handleDragStart = (event) => {
         const { active } = event;
+        console.log('[FormBuilder] Drag started:', {
+            id: active.id,
+            data: active.data.current
+        });
         setActiveId(active.id);
         if (active.data.current?.type) {
             setActiveType(active.data.current.type);
         }
     };
-    const handleDragOver = (_event) => {
+    const handleDragOver = (event) => {
+        console.log('[FormBuilder] Drag over:', {
+            activeId: event.active.id,
+            overId: event.over?.id,
+            overData: event.over?.data.current
+        });
     };
     const handleDragEnd = (event) => {
         const { active, over } = event;
+        console.log('[FormBuilder] Drag ended:', {
+            activeId: active.id,
+            activeData: active.data.current,
+            overId: over?.id,
+            overData: over?.data.current
+        });
         setActiveId(null);
         setActiveType(null);
-        if (!over)
+        if (!over) {
+            console.log('[FormBuilder] No drop target (over is null)');
             return;
+        }
         const activeData = active.data.current;
         const overData = over.data.current;
-        if (activeData?.isNew && activeData?.fieldType) {
-            const fieldType = activeData.fieldType;
-            if (overData?.isCanvas || overData?.columnId) {
+        // Check for library item (using actual data structure from ComponentLibrary)
+        const isLibraryItem = activeData?.isLibraryItem;
+        const fieldType = activeData?.componentType || activeData?.type;
+        const isCanvas = overData?.type === 'canvas';
+        const isColumn = overData?.type === 'column' || overData?.columnId;
+        console.log('[FormBuilder] Checking conditions:', {
+            isLibraryItem,
+            fieldType,
+            isCanvas,
+            isColumn,
+            activeData,
+            overData
+        });
+        if (isLibraryItem && fieldType) {
+            if (isCanvas || isColumn) {
+                console.log('[FormBuilder] Adding field:', fieldType);
                 addRowWithField({
                     type: fieldType,
                     props: {
@@ -28579,6 +28609,12 @@ function FormBuilder({ initialForm, onSave, onChange, className = '', theme = 'l
                     customStyle: {},
                 });
             }
+            else {
+                console.log('[FormBuilder] Drop target not canvas or column');
+            }
+        }
+        else {
+            console.log('[FormBuilder] Not a library item drag');
         }
     };
     return (jsxRuntime.jsx(TooltipProvider, { children: jsxRuntime.jsxs("div", { className: `formbuilder-container ${theme} ${className}`, children: [jsxRuntime.jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [showToolbar && (jsxRuntime.jsx(Toolbar, { onOpenJsonViewer: () => setJsonViewerOpen(true) })), jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [showComponentLibrary && (jsxRuntime.jsx(ComponentLibrary, {})), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntime.jsx(FormCanvas, {}) }), showPropertiesPanel && (jsxRuntime.jsx(PropertiesPanel, {}))] })] }), jsxRuntime.jsx(DragOverlay, { children: activeId && activeType && (jsxRuntime.jsx(DragOverlayContent, { type: activeType })) })] }), jsxRuntime.jsx(JsonViewerModal, { isOpen: jsonViewerOpen, onClose: () => setJsonViewerOpen(false), schema: form })] }) }));