{"_id":"@ashimkoirala/dynamicform-lib","_rev":"3-e5d2a77f109d3672e1026a7a21da8538","name":"@ashimkoirala/dynamicform-lib","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@ashimkoirala/dynamicform-lib","version":"1.0.0","keywords":["dynamicform","react"],"author":{"name":"AshimKoirala"},"license":"ISC","_id":"@ashimkoirala/dynamicform-lib@1.0.0","maintainers":[{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com"}],"dist":{"shasum":"7d37ca06aa953577f756fb0f6251dc1ff4d46871","tarball":"https://registry.npmjs.org/@ashimkoirala/dynamicform-lib/-/dynamicform-lib-1.0.0.tgz","fileCount":5,"integrity":"sha512-aUGLY4SrtO/nUmE/Tkh3Igt5prgdZYPEo8GpOrqIARKNwMQAL0IzC2LNg/5gVlz3krT3CyYynBMH1hnIpDzIyA==","signatures":[{"sig":"MEYCIQDDIaVQOV8SJ6b0LhtWxLBK3WdwAJiZe3yGNPuwlopwmAIhAMSKPeUv+EsW9e1jF+6HFshrCwVE/PrpewjroVJJSbTJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20963},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsup src/index.ts --format cjs,esm --dts --out-dir dist"},"_npmUser":{"name":"ashimkoirala","actor":{"name":"ashimkoirala","type":"user","email":"ashimkoirala01@gmail.com"},"email":"ashimkoirala01@gmail.com"},"_npmVersion":"10.9.2","description":"DynamicForm renders forms from a JSON or Zod schema, supports validation, conditional fields, and is optimized for fast iteration and content-driven apps.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","vite":"^7.0.3","postcss":"^8.5.6","typescript":"^5.8.3","tailwindcss":"^4.1.11","@types/react":"^18.0.0","autoprefixer":"^10.4.21","@types/react-dom":"^18.0.0","@hookform/resolvers":"^2.9.11"},"peerDependencies":{"zod":"^3.0.0","clsx":"^1.0.0","react":"^18.0.0","react-dom":"^18.0.0","react-hook-form":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dynamicform-lib_1.0.0_1752042704359_0.030018184897520728","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ashimkoirala/dynamicform-lib","version":"1.0.1","keywords":["dynamicform","react"],"author":{"name":"AshimKoirala"},"license":"ISC","_id":"@ashimkoirala/dynamicform-lib@1.0.1","maintainers":[{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com"}],"dist":{"shasum":"8a42b95c76cd5401805b73c02116e2bee1403f52","tarball":"https://registry.npmjs.org/@ashimkoirala/dynamicform-lib/-/dynamicform-lib-1.0.1.tgz","fileCount":5,"integrity":"sha512-b/RjOpcCXAjfW5cdXbDFGwzP0Vhw5BsbAAGQ760m7D5TY86NCCfDnds3Nn3wsOVd84VcMKgAMfW6nYwVpH/jEQ==","signatures":[{"sig":"MEUCICmpiQ4hkC+dam3ZS4MsPjihJ1SYp2/AAc8pGH1GWAdvAiEAozkaUUS3YOJWhvKg8svaBf7wFn1A3qma4N1Up6TCFEw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20956},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsup src/index.ts --format cjs,esm --dts --out-dir dist"},"_npmUser":{"name":"ashimkoirala","actor":{"name":"ashimkoirala","type":"user","email":"ashimkoirala01@gmail.com"},"email":"ashimkoirala01@gmail.com"},"_npmVersion":"10.9.2","description":"DynamicForm renders forms from a JSON or Zod schema, supports validation, conditional fields, and is optimized for fast iteration and content-driven apps.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","vite":"^7.0.3","postcss":"^8.5.6","typescript":"^5.8.3","tailwindcss":"^4.1.11","@types/react":"^18.0.0","autoprefixer":"^10.4.21","@types/react-dom":"^18.0.0","@hookform/resolvers":"^2.9.11"},"peerDependencies":{"zod":"^3.0.0","clsx":"^1.0.0","react":"^18.0.0","react-dom":"^18.0.0","react-hook-form":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dynamicform-lib_1.0.1_1752044082289_0.0864195853718921","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ashimkoirala/dynamicform-lib","version":"1.1.0","description":"DynamicForm renders forms from a JSON or Zod schema, supports validation, conditional fields, and is optimized for fast iteration and content-driven apps.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsup src/index.ts --format cjs,esm --dts --out-dir dist"},"keywords":["dynamicform","react"],"author":{"name":"AshimKoirala"},"license":"ISC","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","zod":"^3.0.0","react-hook-form":"^7.0.0","clsx":"^1.0.0"},"devDependencies":{"@hookform/resolvers":"^2.9.11","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","autoprefixer":"^10.4.21","postcss":"^8.5.6","tailwindcss":"^4.1.11","tsup":"^8.5.0","typescript":"^5.8.3","vite":"^7.0.3"},"_id":"@ashimkoirala/dynamicform-lib@1.1.0","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-UWpfjo7wRe7I1KmGQd1Bu0CRhZsBktDSfViI2ZjSU4i780BD7g+7Kw5W+pTJNqLgJo+WHN0yS2F9YZuwwPHQVg==","shasum":"25754addfd247444c3f674e88a47fbd322330454","tarball":"https://registry.npmjs.org/@ashimkoirala/dynamicform-lib/-/dynamicform-lib-1.1.0.tgz","fileCount":6,"unpackedSize":29248,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBDy3oU9h5XiZeJ6VLDGmDor5LxZYJ2xt+DMcEbPGW+wAiEAlxak3es1DbmjONORdVRxKRKLl5G6hGVX2QY+okq+DTY="}]},"_npmUser":{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com","actor":{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dynamicform-lib_1.1.0_1752047884364_0.9798582149369002"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-09T06:31:44.233Z","modified":"2025-07-09T07:58:04.696Z","1.0.0":"2025-07-09T06:31:44.541Z","1.0.1":"2025-07-09T06:54:42.464Z","1.1.0":"2025-07-09T07:58:04.517Z"},"author":{"name":"AshimKoirala"},"license":"ISC","keywords":["dynamicform","react"],"description":"DynamicForm renders forms from a JSON or Zod schema, supports validation, conditional fields, and is optimized for fast iteration and content-driven apps.","maintainers":[{"name":"ashimkoirala","email":"ashimkoirala01@gmail.com"}],"readme":"# 📦 @ashimkoirala/dynamicform-lib\r\n\r\nA flexible React + TypeScript component library to render dynamic forms from a JSON or Zod schema. It supports validation, conditional logic, preview mode, multi-step wizards, and full accessibility. Perfect for content-driven apps and admin panels.\r\n\r\n---\r\n\r\n## 🚀 Installation\r\n\r\nInstall via npm or yarn:\r\n\r\n```bash\r\nnpm install @ashimkoirala/dynamicform-lib\r\n# or\r\nyarn add @ashimkoirala/dynamicform-lib\r\n\r\n```\r\n\r\n## ✨ Usage Example\r\nA simple example using a form schema and Zod validation:\r\n\r\n\r\n```bash\r\nimport { DynamicForm } from \"@ashimkoirala/dynamicform-lib\";\r\nimport { z } from \"zod\";\r\n\r\nconst formSchema = [\r\n  { type: \"text\", label: \"Name\", key: \"name\", required: true },\r\n  { type: \"email\", label: \"Email\", key: \"email\" },\r\n  { type: \"select\", label: \"Gender\", key: \"gender\", options: [\"Male\", \"Female\"] },\r\n  { type: \"textarea\", label: \"Message\", key: \"message\" }\r\n];\r\n\r\nconst validationSchema = z.object({\r\n  name: z.string().min(2, \"Name is required\"),\r\n  email: z.string().email(\"Invalid email\").optional(),\r\n  gender: z.enum([\"Male\", \"Female\"]),\r\n  message: z.string().min(5, \"Too short\").optional()\r\n});\r\n\r\nexport default function ContactForm() {\r\n  const handleFormSubmit = (data) => {\r\n    console.log(\"Form data:\", data);\r\n  };\r\n\r\n  return (\r\n    <DynamicForm\r\n      schema={formSchema}\r\n      zodSchema={validationSchema}\r\n      onSubmit={handleFormSubmit}\r\n    />\r\n  );\r\n}\r\n\r\n\r\n```\r\n\r\n## 🎨 Props\r\n\r\n| Prop                     | Type                       | Description                       |\r\n|--------------------------|----------------------------|---------------------------------|\r\n| `schema`                 | `FieldSchema[]`            | JSON schema to define fields     |\r\n| `zodSchema`              | `ZodSchema<T>` (optional)  | Schema for validation            |\r\n| `onSubmit`               | `(data: T) => void`        | Callback on submit              |\r\n| `preview`                | `boolean` (optional)       | Show JSON preview of form data  |\r\n| `step`, `stepCount`      | `number`                   | For multi-step forms             |\r\n| `components`             | `FieldComponentMap`        | Override specific field renderers|\r\n| `fieldClassName`         | `string`                   | Wrapper for each field           |\r\n| `labelClassName`         | `string`                   | Style for `<label>`              |\r\n| `inputClassName`         | `string`                   | Style for input, select, textarea|\r\n| `errorClassName`         | `string`                   | Error message class              |\r\n| `checkboxWrapperClassName` | `string`                 | Wrapper around checkbox/switch  |\r\n| `checkboxLabelClassName` | `string`                   | Label style for checkbox/switch |\r\n| `submitButtonClassName`  | `string`                   | Submit button styling            |\r\n| `submitButtonText`       | `string`                   | Submit button text               |\r\n\r\n\r\n\r\n## 🧩 Field Schema Structure\r\nEach field in the schema should follow this structure:\r\n\r\n```bash\r\ntype FieldType = \"text\" | \"textarea\" | \"email\" | \"select\" | \"switch\" | \"checkbox\" | \"file\" | \"number\";\r\n\r\ninterface FieldSchema {\r\n  type: FieldType;\r\n  label: string;\r\n  key: string;\r\n  required?: boolean;\r\n  options?: string[];\r\n  conditional?: { key: string; value: any };\r\n}\r\n\r\n```\r\n\r\n\r\n## 🎨 Style Customization via Props\r\nCustomize your form UI using className props:\r\n\r\n```bash\r\n<DynamicForm\r\n  schema={formSchema}\r\n  zodSchema={validationSchema}\r\n  onSubmit={handleFormSubmit}\r\n  fieldClassName=\"mb-6\"\r\n  labelClassName=\"block mb-2 text-sm font-semibold text-gray-700\"\r\n  inputClassName=\"w-full border border-gray-300 rounded-md px-3 py-2\"\r\n  errorClassName=\"mt-1 text-sm text-red-600\"\r\n  checkboxWrapperClassName=\"flex items-center mb-6\"\r\n  checkboxLabelClassName=\"ml-2 text-gray-700 font-medium\"\r\n  submitButtonClassName=\"w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-md\"\r\n  submitButtonText=\"Send Message\"\r\n/>\r\n\r\n```\r\n\r\n## 🧠 Conditional Fields\r\nFields can appear based on other field values:\r\n\r\n```bash\r\nconst formSchema = [\r\n  { type: \"text\", label: \"Name\", key: \"name\" },\r\n  {\r\n    type: \"text\",\r\n    label: \"Referral Code\",\r\n    key: \"referral\",\r\n    conditional: { key: \"name\", value: \"admin\" }\r\n  }\r\n];\r\n\r\n```\r\nIf name === \"admin\", the \"Referral Code\" field appears.\r\n\r\n## 🧭 Multi-Step Support\r\n\r\n```bash\r\n<DynamicForm\r\n  schema={stepSchemas[currentStep]}\r\n  step={currentStep}\r\n  stepCount={stepSchemas.length}\r\n  onSubmit={handleStepSubmit}\r\n/>\r\n```\r\nUse step and stepCount to handle wizard-style forms.\r\n\r\n## 👓 Preview Mode\r\n\r\n``` bash\r\n<DynamicForm\r\n  preview={true}\r\n  schema={formSchema}\r\n  zodSchema={validationSchema}\r\n  onSubmit={() => {}}\r\n/>\r\n```\r\nThis renders a read-only JSON output of current values.\r\n\r\n## 🧪 Custom Field Components\r\nYou can override default inputs with your own custom components via the `components` prop.\r\n\r\n## 📜 License\r\nMIT\r\n\r\n## 👨‍💻 Author\r\nMade with 💙 by [Ashim Koirala](https://github.com/ashimkoirala)\r\n","readmeFilename":"README.md"}