{"_id":"@braine/form-builder1","_rev":"2-0e0277ab70fe8a39f0b1144af4f78c25","name":"@braine/form-builder1","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@braine/form-builder1","version":"1.0.0","keywords":["react","form-builder","drag-and-drop","typescript","forms"],"author":{"name":"Your Name"},"license":"MIT","_id":"@braine/form-builder1@1.0.0","maintainers":[{"name":"braine","email":"piyas.braine@gmail.com"}],"homepage":"https://github.com/your-org/form-builder#readme","bugs":{"url":"https://github.com/your-org/form-builder/issues"},"dist":{"shasum":"628aaa33352af098fd74fd74deaf48fcb5a6173d","tarball":"https://registry.npmjs.org/@braine/form-builder1/-/form-builder1-1.0.0.tgz","fileCount":8,"integrity":"sha512-MIhRSzIA8sLaraUUdLhtocitU5MOZl/ra4ZWS3qL3B42H6Has6am/RQGQ6Re4jjfs0TAaFi9TIgIFP2iJpPVwA==","signatures":[{"sig":"MEYCIQDQd46CbdGHlzjygJfAUa9wSAqmgV/Rjdmwfrb7BKkvnAIhAIglladBAIwKRX0SOmHkfitOgoSNekKFtr/pfN5vIotm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":354532},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite","lint":"eslint .","build":"tsc && vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"braine","email":"piyas.braine@gmail.com"},"repository":{"url":"git+https://github.com/your-org/form-builder.git","type":"git"},"_npmVersion":"10.8.2","description":"A full-featured form builder for React applications","directories":{},"_nodeVersion":"20.19.0","dependencies":{"zod":"^3.22.4","uuid":"^9.0.1","react":"^18.3.1","zustand":"^4.4.7","react-dom":"^18.3.1","lucide-react":"^0.344.0","@dnd-kit/core":"^6.1.0","react-hook-form":"^7.48.2","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@hookform/resolvers":"^3.3.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","@eslint/js":"^9.9.1","typescript":"^5.5.3","@types/uuid":"^9.0.7","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.6.4","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/form-builder1_1.0.0_1753427145048_0.10337840438245549","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@braine/form-builder1","version":"1.0.1","description":"A full-featured form builder for React applications","main":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"dev":"vite","build":"tsc && vite build","build:lib":"vite build --mode lib","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@braine/form-builder1":"^1.0.0","@dnd-kit/core":"^6.1.0","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@hookform/resolvers":"^3.3.2","lucide-react":"^0.344.0","path":"^0.12.7","react":"^18.3.1","react-dom":"^18.3.1","react-hook-form":"^7.48.2","uuid":"^9.0.1","zod":"^3.22.4","zustand":"^4.4.7"},"devDependencies":{"@eslint/js":"^9.9.1","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","@types/uuid":"^9.0.7","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.18","eslint":"^9.9.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11","globals":"^15.9.0","postcss":"^8.4.35","tailwindcss":"^3.4.1","typescript":"^5.5.3","typescript-eslint":"^8.3.0","vite":"^5.4.2","vite-plugin-dts":"^3.6.4"},"keywords":["react","form-builder","drag-and-drop","typescript","forms"],"author":{"name":"Your Name"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/your-org/form-builder.git"},"_id":"@braine/form-builder1@1.0.1","bugs":{"url":"https://github.com/your-org/form-builder/issues"},"homepage":"https://github.com/your-org/form-builder#readme","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-eKCJisAc3TmELHqPJtto6P5cFsQF+bJSDhEgbMArHLkDo3HPlbxjLqXLmE4VshZMwREQTFH61zE2v/1RhaqGpA==","shasum":"d6cc6eb375f78c3bceafaa50d475a76506b4b4eb","tarball":"https://registry.npmjs.org/@braine/form-builder1/-/form-builder1-1.0.1.tgz","fileCount":20,"unpackedSize":361079,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCOv8Hkqg1eKXsiqKD3CxbTfXwQShZ+G5San3msJ7NS3QIhAIBcIhz9d0+oWKYANvx0ID535K6scut0Cjk6J6VeUsPh"}]},"_npmUser":{"name":"braine","email":"piyas.braine@gmail.com"},"directories":{},"maintainers":[{"name":"braine","email":"piyas.braine@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/form-builder1_1.0.1_1753427522262_0.3289970885975433"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-25T07:05:44.886Z","modified":"2025-07-25T07:12:02.694Z","1.0.0":"2025-07-25T07:05:45.228Z","1.0.1":"2025-07-25T07:12:02.516Z"},"bugs":{"url":"https://github.com/your-org/form-builder/issues"},"author":{"name":"Your Name"},"license":"MIT","homepage":"https://github.com/your-org/form-builder#readme","keywords":["react","form-builder","drag-and-drop","typescript","forms"],"repository":{"type":"git","url":"git+https://github.com/your-org/form-builder.git"},"description":"A full-featured form builder for React applications","maintainers":[{"name":"braine","email":"piyas.braine@gmail.com"}],"readme":"# Form Builder Package\n\nA comprehensive, production-ready form builder for React applications with drag-and-drop functionality, conditional logic, multi-page support, and extensive field types.\n\n## Features\n\n### 🚀 Core Capabilities\n- **Drag & Drop Interface**: Intuitive form building with visual field arrangement\n- **Multi-Page Forms**: Support for complex forms with pagination and navigation\n- **Conditional Logic**: Show/hide fields based on user responses with visual logic builder\n- **Rich Field Types**: 20+ field types including text, choice, file upload, interactive elements\n- **Schema Export/Import**: JSON-based form definitions for easy portability\n- **Form Validation**: Built-in validation rules with custom error messages\n- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile devices\n\n### 📋 Supported Field Types\n\n#### Basic Fields\n- Short Text, Long Text (Textarea), Number, Email, Phone, Password, URL\n- Date, Time, Color Picker\n- Slider/Range, Star Rating\n\n#### Choice Fields  \n- Dropdown (Select), Multi-Select, Radio Buttons, Checkboxes, Toggle Switch\n\n#### File & Media\n- File Upload, Image Upload\n\n#### Interactive Elements\n- Signature Field, Drawing Pad, Star Rating, Slider\n\n#### Layout & Control\n- Section Headers, Paragraph Text, Page Breaks\n\n### 🧠 Smart Features\n- **Conditional Logic Engine**: IF-THEN rules with multiple operators\n- **Form Validation**: Required fields, min/max length, pattern matching\n- **Multi-Page Navigation**: Previous/Next with progress tracking\n- **Auto-Save**: Optional localStorage persistence\n- **Theme Support**: Light/dark mode ready\n- **TypeScript**: Full type safety throughout\n\n## Installation\n\n```bash\nnpm install @your-org/form-builder\n# or\nyarn add @your-org/form-builder\n```\n\n## Quick Start\n\n### Form Builder (Editor)\n\n```tsx\nimport React from 'react';\nimport { FormBuilder } from '@your-org/form-builder';\n\nfunction App() {\n  const handleExport = (schema) => {\n    console.log('Form Schema:', schema);\n    // Save to database or file\n  };\n\n  const handleSchemaChange = (schema) => {\n    // Real-time schema updates\n    console.log('Schema updated:', schema);\n  };\n\n  return (\n    <FormBuilder \n      onExport={handleExport}\n      onSchemaChange={handleSchemaChange}\n    />\n  );\n}\n```\n\n### Form Renderer (Display)\n\n```tsx\nimport React from 'react';\nimport { FormRenderer } from '@your-org/form-builder';\n\nfunction MyForm({ formSchema }) {\n  const handleSubmit = (formData) => {\n    console.log('Form submitted:', formData);\n    // Process form submission\n  };\n\n  const handlePageChange = (pageIndex) => {\n    console.log('User navigated to page:', pageIndex);\n  };\n\n  return (\n    <FormRenderer\n      schema={formSchema}\n      onSubmit={handleSubmit}\n      onPageChange={handlePageChange}\n      initialValues={{}} // Pre-populate form\n    />\n  );\n}\n```\n\n## API Reference\n\n### FormBuilder Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `initialSchema` | `FormSchema` | Pre-load existing form schema |\n| `onSchemaChange` | `(schema: FormSchema) => void` | Real-time schema updates |\n| `onExport` | `(schema: FormSchema) => void` | Handle schema export |\n| `className` | `string` | Additional CSS classes |\n\n### FormRenderer Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `schema` | `FormSchema` | Form schema to render |\n| `onSubmit` | `(values: Record<string, any>) => void` | Form submission handler |\n| `onPageChange` | `(pageIndex: number) => void` | Page navigation callback |\n| `initialValues` | `Record<string, any>` | Pre-populate form fields |\n| `className` | `string` | Additional CSS classes |\n\n### FormSchema Structure\n\n```typescript\ninterface FormSchema {\n  id: string;\n  title: string;\n  description?: string;\n  pages: FormPage[];\n  fields: Record<string, FormField>;\n  settings: FormSettings;\n  version: string;\n  createdAt: string;\n  updatedAt: string;\n}\n```\n\n## Field Types & Configuration\n\n### Text Fields\n```typescript\n{\n  type: 'text' | 'textarea' | 'email' | 'phone' | 'password' | 'url',\n  label: 'Field Label',\n  placeholder: 'Enter text...',\n  required: true,\n  validation: [\n    { type: 'required', message: 'This field is required' },\n    { type: 'minLength', value: 3, message: 'Minimum 3 characters' }\n  ]\n}\n```\n\n### Choice Fields\n```typescript\n{\n  type: 'select' | 'radio' | 'checkbox',\n  label: 'Choose Options',\n  options: [\n    { id: '1', label: 'Option 1', value: 'option1' },\n    { id: '2', label: 'Option 2', value: 'option2' }\n  ]\n}\n```\n\n### Interactive Fields\n```typescript\n{\n  type: 'slider',\n  label: 'Rate this',\n  settings: {\n    min: 0,\n    max: 100,\n    step: 1\n  }\n}\n```\n\n## Conditional Logic\n\n### Basic Conditions\n```typescript\n{\n  conditionalLogic: [{\n    id: 'logic1',\n    operator: 'AND',\n    conditions: [{\n      fieldId: 'user_type',\n      operator: 'equals',\n      value: 'premium'\n    }],\n    actions: [{\n      type: 'show',\n      targetFieldId: 'premium_features'\n    }]\n  }]\n}\n```\n\n### Supported Operators\n- `equals`, `notEquals`\n- `contains`, `notContains`  \n- `greaterThan`, `lessThan`\n- `isEmpty`, `isNotEmpty`\n\n### Available Actions\n- `show` / `hide` - Control field visibility\n- `enable` / `disable` - Control field interaction\n- `setValue` - Set field values programmatically\n\n## Multi-Page Forms\n\n### Page Configuration\n```typescript\n{\n  pages: [\n    {\n      id: 'page1',\n      title: 'Personal Information',\n      description: 'Tell us about yourself',\n      fields: ['name', 'email', 'phone']\n    },\n    {\n      id: 'page2', \n      title: 'Preferences',\n      description: 'Your preferences',\n      fields: ['interests', 'notifications']\n    }\n  ]\n}\n```\n\n### Navigation Settings\n```typescript\n{\n  settings: {\n    navigation: {\n      showProgress: true,      // Show progress bar\n      allowBackward: true      // Allow previous page navigation\n    }\n  }\n}\n```\n\n## Advanced Usage\n\n### Custom Validation\n```typescript\nconst customValidation = {\n  type: 'pattern',\n  value: '^[A-Z]{2}[0-9]{4}$',\n  message: 'Format must be XX0000'\n};\n```\n\n### Form State Management\n```typescript\nimport { useFormBuilderStore, useFormStore } from '@your-org/form-builder';\n\nfunction CustomComponent() {\n  const { schema, updateField } = useFormBuilderStore();\n  const { formValues, updateFormValue } = useFormStore();\n  \n  // Access and modify form state\n}\n```\n\n### Styling & Theming\n\nThe package uses Tailwind CSS for styling. You can customize the appearance by:\n\n1. **CSS Custom Properties**: Override color schemes\n2. **Tailwind Configuration**: Extend default theme\n3. **Custom CSS Classes**: Use the `className` prop\n\n```css\n/* Custom theme variables */\n:root {\n  --form-primary: #3B82F6;\n  --form-secondary: #10B981;\n  --form-background: #F9FAFB;\n}\n```\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```typescript\nimport type { \n  FormSchema, \n  FormField, \n  ConditionalLogic,\n  ValidationRule \n} from '@your-org/form-builder';\n```\n\n## Browser Support\n\n- Chrome 80+\n- Firefox 75+\n- Safari 13+\n- Edge 80+\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Changelog\n\n### v1.0.0\n- Initial release with full form builder functionality\n- Drag & drop interface\n- Multi-page support\n- Conditional logic engine\n- 20+ field types\n- TypeScript support\n- Comprehensive validation system","readmeFilename":"README.md"}