{"_id":"@archelogic/form-builder","name":"@archelogic/form-builder","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@archelogic/form-builder","version":"1.0.0","description":"A powerful, reusable React form builder with JSON-driven configuration, Formik integration, and Yup validation","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build","type-check":"tsc --noEmit"},"keywords":["react","form","form-builder","formik","yup","material-ui","mui","json","dynamic-forms","validation","typescript"],"author":{"name":"LIMS Software"},"license":"MIT","repository":{"type":"git","url":"git+https://gitlab.com/lab-software/lims-form-builder.git"},"bugs":{"url":"https://gitlab.com/lab-software/lims-form-builder/-/issues"},"homepage":"https://gitlab.com/lab-software/lims-form-builder#readme","peerDependencies":{"@mui/material":"^7.0.0","@mui/x-date-pickers":"^8.0.0","dayjs":"^1.11.0","formik":"^2.4.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","yup":"^1.0.0"},"devDependencies":{"@types/react":"^19.1.16","@types/react-dom":"^19.1.9","tsup":"^8.0.0","typescript":"^5.9.0"},"engines":{"node":">=18.0.0"},"_id":"@archelogic/form-builder@1.0.0","gitHead":"1f98b4729835180ac484fdee7ab214a789e45d76","_nodeVersion":"22.14.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-0am5Zh0J/XWqCfU5G8GXl4aN9ZnS+fgfTWzP7VQmncHJugmJ+8dbeTU2CnlFzZjyoLMSw1e3NGFEpMEc2Hwijg==","shasum":"7efd8e87418ac45c2a13b287203eb6e5f5fd7aad","tarball":"https://registry.npmjs.org/@archelogic/form-builder/-/form-builder-1.0.0.tgz","fileCount":9,"unpackedSize":98914,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD6tH63qNXV1qUBRwMZU3VBOQ2QLW/o5rnMvytvVvYYbgIhAJlnZaZMU/1e0WM/lTy+H85Mx/rWIM7h50qu/4HPnJe/"}]},"_npmUser":{"name":"nareshkmr","email":"nareshkmr219@gmail.com"},"directories":{},"maintainers":[{"name":"nareshkmr","email":"nareshkmr219@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/form-builder_1.0.0_1760757879521_0.22563834814540962"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-18T03:24:39.427Z","1.0.0":"2025-10-18T03:24:39.724Z","modified":"2025-10-18T03:24:40.041Z"},"maintainers":[{"name":"nareshkmr","email":"nareshkmr219@gmail.com"}],"description":"A powerful, reusable React form builder with JSON-driven configuration, Formik integration, and Yup validation","homepage":"https://gitlab.com/lab-software/lims-form-builder#readme","keywords":["react","form","form-builder","formik","yup","material-ui","mui","json","dynamic-forms","validation","typescript"],"repository":{"type":"git","url":"git+https://gitlab.com/lab-software/lims-form-builder.git"},"author":{"name":"LIMS Software"},"bugs":{"url":"https://gitlab.com/lab-software/lims-form-builder/-/issues"},"license":"MIT","readme":"# @lims/form-builder\n\nA powerful, reusable React form builder that generates dynamic forms from JSON configurations with Formik integration and Yup validation.\n\n[![npm version](https://img.shields.io/npm/v/@lims/form-builder.svg)](https://www.npmjs.com/package/@lims/form-builder)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- **JSON-driven**: Define forms using JSON configuration\n- **Type-safe**: Full TypeScript support\n- **Validation**: Automatic Yup validation schema generation\n- **Responsive**: Built-in Material-UI Grid2 layout\n- **Field Types**: TextField, SelectField, AutocompleteField, DatePicker\n- **Conditional Rendering**: Show/hide fields based on other field values\n- **Tree-shakeable**: Optimized ESM and CJS builds\n- **React 18/19 Compatible**: Works with both React 18 and React 19\n\n## Installation\n\n```bash\nnpm install @lims/form-builder\n```\n\nor\n\n```bash\nyarn add @lims/form-builder\n```\n\nor\n\n```bash\npnpm add @lims/form-builder\n```\n\n### Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n```bash\nnpm install @mui/material @mui/x-date-pickers dayjs formik yup react react-dom\n```\n\n## Quick Start\n\n### 1. Basic Usage\n\n```tsx\nimport { FormBuilder, FormBuilderConfig } from '@lims/form-builder';\n\nconst formConfig: FormBuilderConfig = {\n  formConfig: {\n    formId: 'my-form',\n    submitLabel: 'Submit',\n    gridSpacing: 2\n  },\n  fields: [\n    {\n      uiComponentId: 'TextField',\n      name: 'email',\n      id: 'email',\n      label: 'Email Address',\n      type: 'email',\n      required: true,\n      validation: {\n        type: 'email',\n        rules: ['required', 'email']\n      }\n    }\n  ]\n};\n\nfunction MyForm() {\n  const handleSubmit = async (values: any) => {\n    console.log('Form values:', values);\n    // Process form data\n  };\n\n  return (\n    <FormBuilder\n      config={formConfig}\n      onSubmit={handleSubmit}\n      onCancel={() => console.log('Cancelled')}\n    />\n  );\n}\n```\n\n### 2. JSON Configuration Structure\n\n```json\n{\n  \"formConfig\": {\n    \"formId\": \"my-form\",\n    \"title\": \"My Form\",\n    \"submitLabel\": \"Submit\",\n    \"cancelLabel\": \"Cancel\",\n    \"showCancelButton\": true,\n    \"gridSpacing\": 2\n  },\n  \"fields\": [\n    {\n      \"uiComponentId\": \"TextField\",\n      \"name\": \"email\",\n      \"id\": \"email\",\n      \"label\": \"Email Address\",\n      \"placeholder\": \"Enter email\",\n      \"type\": \"email\",\n      \"required\": true,\n      \"defaultValue\": \"\",\n      \"fullWidth\": true,\n      \"variant\": \"outlined\",\n      \"size\": { \"xs\": 12, \"md\": 6 },\n      \"validation\": {\n        \"type\": \"email\",\n        \"rules\": [\"required\", \"email\"],\n        \"messages\": {\n          \"required\": \"Email is required\",\n          \"email\": \"Please enter a valid email\"\n        }\n      }\n    }\n  ]\n}\n```\n\n## Field Types\n\n### TextField\nStandard text input with support for various HTML input types.\n\n```json\n{\n  \"uiComponentId\": \"TextField\",\n  \"name\": \"username\",\n  \"label\": \"Username\",\n  \"type\": \"text\",\n  \"multiline\": false,\n  \"rows\": 1\n}\n```\n\n### SelectField\nDropdown selection field.\n\n```json\n{\n  \"uiComponentId\": \"SelectField\",\n  \"name\": \"country\",\n  \"label\": \"Country\",\n  \"options\": [\n    { \"label\": \"United States\", \"value\": \"us\" },\n    { \"label\": \"Canada\", \"value\": \"ca\" }\n  ]\n}\n```\n\n### AutocompleteField\nAutocomplete with search and multi-select support.\n\n```json\n{\n  \"uiComponentId\": \"AutocompleteField\",\n  \"name\": \"skills\",\n  \"label\": \"Skills\",\n  \"multiple\": true,\n  \"freeSolo\": false,\n  \"options\": [\n    { \"label\": \"JavaScript\", \"value\": \"js\" },\n    { \"label\": \"Python\", \"value\": \"py\" }\n  ]\n}\n```\n\n### DatePicker\nDate selection field.\n\n```json\n{\n  \"uiComponentId\": \"DatePicker\",\n  \"name\": \"birthDate\",\n  \"label\": \"Date of Birth\",\n  \"type\": \"date\",\n  \"minDate\": \"1900-01-01\",\n  \"maxDate\": \"2023-12-31\",\n  \"disableFuture\": true\n}\n```\n\n## Validation Rules\n\nThe form builder supports these validation rules:\n\n- `required` - Field is required\n- `min:X` - Minimum length/value\n- `max:X` - Maximum length/value\n- `email` - Must be valid email\n- `url` - Must be valid URL\n- `matches:pattern:flags` - Regex pattern matching\n- `oneOf:val1,val2` - Must be one of specified values\n- `length:X` - Exact length\n- `positive` - Must be positive number\n- `negative` - Must be negative number\n- `integer` - Must be integer\n\n### Example with Multiple Rules\n\n```json\n{\n  \"validation\": {\n    \"type\": \"string\",\n    \"rules\": [\"required\", \"min:3\", \"max:50\", \"matches:^[a-zA-Z]+$\"],\n    \"messages\": {\n      \"required\": \"This field is required\",\n      \"min\": \"Must be at least 3 characters\",\n      \"max\": \"Cannot exceed 50 characters\",\n      \"matches\": \"Only letters are allowed\"\n    }\n  }\n}\n```\n\n## Responsive Grid Sizing\n\nUse Material-UI Grid2 breakpoints for responsive layouts:\n\n```json\n{\n  \"size\": {\n    \"xs\": 12,   // Full width on mobile\n    \"sm\": 6,    // Half width on small screens\n    \"md\": 4,    // Third width on medium screens\n    \"lg\": 3     // Quarter width on large screens\n  }\n}\n```\n\n## Conditional Rendering\n\nShow/hide fields based on other field values:\n\n```json\n{\n  \"name\": \"otherCountry\",\n  \"label\": \"Specify Country\",\n  \"conditionalRender\": {\n    \"field\": \"country\",\n    \"operator\": \"equals\",\n    \"value\": \"other\"\n  }\n}\n```\n\n**Supported Operators:**\n- `equals` - Field value equals specified value\n- `notEquals` - Field value does not equal\n- `includes` - Array includes value\n- `notIncludes` - Array does not include value\n- `greaterThan` - Numeric comparison\n- `lessThan` - Numeric comparison\n\n## Advanced Usage\n\n### With Initial Values\n\n```tsx\n<FormBuilder\n  config={formConfig}\n  onSubmit={handleSubmit}\n  initialValues={{ email: 'user@example.com' }}\n  enableReinitialize={true}\n/>\n```\n\n### Programmatic Form Access\n\n```tsx\nimport { buildValidationSchema, buildInitialValues } from '@lims/form-builder';\n\nconst schema = buildValidationSchema(fields);\nconst initialValues = buildInitialValues(fields);\n```\n\n## API Reference\n\n### Components\n\n#### `FormBuilder`\n\nThe main component for rendering dynamic forms.\n\n**Props:**\n- `config: FormBuilderConfig` - Form configuration object\n- `onSubmit: (values: any) => void | Promise<void>` - Submit handler\n- `onCancel?: () => void` - Cancel handler (optional)\n- `initialValues?: { [key: string]: any }` - Initial form values (optional)\n- `enableReinitialize?: boolean` - Enable Formik reinitialization (default: false)\n\n#### Field Components\n\nIndividual field components are also exported if you need them separately:\n- `FormTextField`\n- `FormSelectField`\n- `FormAutocompleteField`\n- `FormDatePicker`\n\n### Type Definitions\n\nAll types are exported for TypeScript support:\n\n```tsx\nimport type {\n  FormBuilderConfig,\n  FormConfig,\n  FieldConfig,\n  ValidationRule,\n  OptionType,\n  GridSize,\n  ConditionalRender,\n  FieldType,\n  UIComponentType,\n  ValidationType\n} from '@lims/form-builder';\n```\n\n### Utility Functions\n\n#### `buildValidationSchema(fields: FieldConfig[])`\n\nGenerates a Yup validation schema from field configurations.\n\n#### `buildInitialValues(fields: FieldConfig[])`\n\nExtracts initial values from field configurations.\n\n## TypeScript Support\n\nThis package is written in TypeScript and includes type definitions. You get full IntelliSense and type checking out of the box.\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Support\n\nFor issues and questions, please use the [GitHub Issues](https://github.com/yourusername/form-builder/issues) page.\n","readmeFilename":"README.md","_rev":"1-c1d65d7f10ed95b2bc58fbf1ea7cbe59"}