@enerjisaformlibrary/formbuilder-react 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,6 @@
 # @enerjisaformlibrary/formbuilder-react
 
-Dynamic drag-and-drop form builder React components with 20+ field types, conditional logic, multi-step forms, and custom styling.
+Standalone drag-and-drop form builder React component with CSS included. No additional dependencies required!
 
 ## Installation
 
@@ -8,75 +8,93 @@ Dynamic drag-and-drop form builder React components with 20+ field types, condit
 npm install @enerjisaformlibrary/formbuilder-react
 ```
 
-## Peer Dependencies
-
-This package requires the following peer dependencies:
-
-```bash
-npm install react react-dom @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities zustand zod lucide-react nanoid framer-motion class-variance-authority clsx tailwind-merge date-fns qrcode.react
-```
-
 ## Usage
 
 ```tsx
-import {
-  FormCanvas,
-  PropertiesPanel,
-  ComponentLibrary,
-  Toolbar,
-  useFormStore,
-  FormSchema
-} from '@enerjisaformlibrary/formbuilder-react';
+import { FormBuilder, useFormStore } from '@enerjisaformlibrary/formbuilder-react';
+import '@enerjisaformlibrary/formbuilder-react/styles.css';
 
-function FormBuilder() {
-  const { form, setForm } = useFormStore();
+function App() {
+  const handleChange = (form) => {
+    console.log('Form changed:', form);
+  };
 
-  const handleSave = () => {
-    const formJson = JSON.stringify(form);
-    // Save to your database
+  const handleSave = (form) => {
+    // Save form JSON to your database
+    console.log('Save form:', JSON.stringify(form));
   };
 
   return (
-    <div className="flex h-screen">
-      <ComponentLibrary />
-      <FormCanvas />
-      <PropertiesPanel />
+    <div style={{ height: '100vh' }}>
+      <FormBuilder 
+        onChange={handleChange}
+        onSave={handleSave}
+        theme="light"
+      />
     </div>
   );
 }
 ```
 
+## 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.)
-- Drag-and-drop interface with dnd-kit
+- Drag-and-drop interface
 - Multi-step wizard forms
 - Conditional logic (show/hide/enable/disable fields)
 - Custom styling per field
 - Form versioning
 - JSON export/import
 - Responsive grid system (12-column)
-- Unified sizing system (compact, normal, comfortable)
-
-## Exports
-
-### Components
-- `FormCanvas` - Main canvas for form editing
-- `CanvasField` - Individual field renderer
-- `PropertiesPanel` - Field properties editor
-- `ComponentLibrary` - Draggable component palette
-- `Toolbar` - Save, preview, settings toolbar
-- `JsonViewerModal` - JSON export viewer
-
-### Store
-- `useFormStore` - Zustand store for form state
-
-### Types
-- `FormSchema` - Form schema type
-- `FormField` - Field type
-- `FormRow` - Row type
-- `FormColumn` - Column type
-- All validation and conditional logic types
+- 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