\r\n```\r\n\r\n## Custom Components\r\n\r\nYou can provide custom components for specific use cases:\r\n\r\n```typescript\r\nconst services: FormServices = {\r\n // Custom select component (e.g., searchable select)\r\n SelectComponent: MyCustomSelectComponent,\r\n \r\n // Custom file display component\r\n FileDisplayComponent: MyFileDisplayComponent,\r\n \r\n // Custom CKEditor display component\r\n CKEditorDisplayComponent: MyCKEditorDisplayComponent,\r\n};\r\n```\r\n\r\n## Examples\r\n\r\n### Basic Form\r\n\r\n```tsx\r\nconst schema: FormSchema = {\r\n title: 'Contact Form',\r\n name: 'contact',\r\n sections: [\r\n {\r\n id: 'contact-info',\r\n title: 'Contact Information',\r\n fields: [\r\n { type: 'text', name: 'name', label: 'Name', required: true },\r\n { type: 'email', name: 'email', label: 'Email', required: true },\r\n { type: 'text', name: 'phone', label: 'Phone' },\r\n ],\r\n },\r\n ],\r\n};\r\n```\r\n\r\n### Form with Stepper\r\n\r\n```tsx\r\nconst schema: FormSchema = {\r\n title: 'Multi-Step Form',\r\n name: 'multistep',\r\n settings: {\r\n sectionDisplayMode: 'stepper',\r\n },\r\n sections: [\r\n {\r\n id: 'step1',\r\n title: 'Step 1',\r\n fields: [/* fields */],\r\n },\r\n {\r\n id: 'step2',\r\n title: 'Step 2',\r\n fields: [/* fields */],\r\n },\r\n ],\r\n};\r\n```\r\n\r\n### Form with Grid Layout\r\n\r\n```tsx\r\nconst schema: FormSchema = {\r\n title: 'Grid Form',\r\n name: 'grid-form',\r\n settings: {\r\n fieldsPerRow: 2, // 1, 2, or 3 columns\r\n },\r\n sections: [\r\n {\r\n id: 'grid-section',\r\n title: 'Grid Section',\r\n fields: [/* fields will be displayed in 2 columns */],\r\n },\r\n ],\r\n};\r\n```\r\n\r\n## Building\r\n\r\nTo build the package:\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThis will generate:\r\n- `dist/index.js` - CommonJS build\r\n- `dist/index.esm.js` - ES Module build\r\n- `dist/index.d.ts` - TypeScript definitions\r\n\r\n### Build Commands\r\n\r\n```bash\r\n# Standard build\r\nnpm run build\r\n\r\n# Clean build (removes dist first)\r\nnpm run build:clean\r\n\r\n# Watch mode (development)\r\nnpm run dev\r\n# or\r\nnpm run build:watch\r\n\r\n# Type check only\r\nnpm run lint:check\r\n```\r\n\r\n## Publishing\r\n\r\n### Quick Publish\r\n\r\n```bash\r\n# Patch version (1.0.0 -> 1.0.1) + build + publish\r\nnpm run publish:patch\r\n\r\n# Minor version (1.0.0 -> 1.1.0) + build + publish\r\nnpm run publish:minor\r\n\r\n# Major version (1.0.0 -> 2.0.0) + build + publish\r\nnpm run publish:major\r\n```\r\n\r\n### Publish with Tags\r\n\r\n```bash\r\n# Publish as beta\r\nnpm run publish:beta\r\n\r\n# Publish as next\r\nnpm run publish:next\r\n\r\n# Publish as public (for scoped packages)\r\nnpm run publish:public\r\n```\r\n\r\n### Dry Run (Test)\r\n\r\n```bash\r\nnpm run publish:dry-run\r\n```\r\n\r\n### Interactive Publish Scripts\r\n\r\n**Linux/Mac:**\r\n```bash\r\nchmod +x scripts/publish.sh\r\n./scripts/publish.sh\r\n```\r\n\r\n**Windows:**\r\n```powershell\r\n.\\scripts\\publish.ps1\r\n```\r\n\r\n### Manual Publish Steps\r\n\r\n1. **Bump version** (if needed):\r\n ```bash\r\n npm run version:patch # or :minor or :major\r\n ```\r\n\r\n2. **Build**:\r\n ```bash\r\n npm run build\r\n ```\r\n\r\n3. **Publish**:\r\n ```bash\r\n npm publish --access public\r\n ```\r\n\r\nFor detailed publishing instructions, see [PUBLISH_GUIDE.md](./PUBLISH_GUIDE.md).\r\n\r\n## Development\r\n\r\n```bash\r\n# Install dependencies\r\nnpm install\r\n\r\n# Build in watch mode\r\nnpm run dev\r\n\r\n# Build for production\r\nnpm run build\r\n\r\n# Type check\r\nnpm run lint:check\r\n```\r\n\r\n## CKEditor Setup\r\n\r\nCKEditor is required for the `ckeditor` field type. The package includes the CKEditor build file.\r\n\r\n### Setup Methods\r\n\r\n#### Method 1: HTML Script Tag (Recommended)\r\n\r\nAdd to your `index.html` or main HTML file:\r\n\r\n```html\r\n\r\n```\r\n\r\nMake sure the file is accessible at `/lib/ckeditor/ckeditor.js` (or copy it to your public directory).\r\n\r\n#### Method 2: Copy to Public Directory\r\n\r\nIf using Vite, Create React App, or similar:\r\n\r\n```bash\r\n# Copy CKEditor to your public directory\r\ncp node_modules/@aatulwork/customform-renderer/lib/ckeditor/ckeditor.js public/lib/ckeditor/ckeditor.js\r\n```\r\n\r\nThen include in HTML:\r\n```html\r\n\r\n```\r\n\r\n#### Method 3: Dynamic Loading\r\n\r\nUse the provided hook to load CKEditor dynamically:\r\n\r\n```tsx\r\nimport { useCKEditor } from '@aatulwork/customform-renderer';\r\n\r\nfunction App() {\r\n const { isReady, isLoading, error } = useCKEditor({\r\n scriptPath: '/lib/ckeditor/ckeditor.js',\r\n autoLoad: true,\r\n });\r\n\r\n if (isLoading) {\r\n return Loading editor...
;\r\n }\r\n\r\n if (error) {\r\n return Error loading editor: {error.message}
;\r\n }\r\n\r\n return ;\r\n}\r\n```\r\n\r\n#### Method 4: Custom Script Path\r\n\r\nIf CKEditor is hosted elsewhere:\r\n\r\n```tsx\r\nconst services: FormServices = {\r\n ckEditorScriptPath: 'https://cdn.example.com/ckeditor.js',\r\n // ... other services\r\n};\r\n```\r\n\r\n### CKEditor Utilities\r\n\r\n```tsx\r\nimport {\r\n loadCKEditor,\r\n isCKEditorAvailable,\r\n waitForCKEditor,\r\n useCKEditor,\r\n} from '@aatulwork/customform-renderer';\r\n\r\n// Check if available\r\nif (isCKEditorAvailable()) {\r\n // CKEditor is ready\r\n}\r\n\r\n// Load manually\r\nawait loadCKEditor('/lib/ckeditor/ckeditor.js');\r\n\r\n// Wait for it to become available\r\nawait waitForCKEditor(10000); // 10 second timeout\r\n\r\n// React hook\r\nconst { isReady, isLoading, error, load } = useCKEditor();\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n","readmeFilename":"README.md"}