{"id":24108269,"url":"https://github.com/paxcode-it/zod-to-fields","last_synced_at":"2025-05-12T19:42:13.827Z","repository":{"id":196166147,"uuid":"694607178","full_name":"paxcode-it/zod-to-fields","owner":"paxcode-it","description":"Turn your Zod schemas into configurable field arrays for easy integration with HTML, React, Vue, and more.","archived":false,"fork":false,"pushed_at":"2024-06-30T15:59:01.000Z","size":239,"stargazers_count":22,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T19:14:48.881Z","etag":null,"topics":["dynamic-fields","field-generator","react","schema","svelte","type-safe","validation","vue","zod"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paxcode-it.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-21T10:36:15.000Z","updated_at":"2024-12-24T08:36:49.000Z","dependencies_parsed_at":"2023-09-22T04:21:37.844Z","dependency_job_id":"d997e265-297d-4c02-bfb8-219e1a19c8f9","html_url":"https://github.com/paxcode-it/zod-to-fields","commit_stats":{"total_commits":25,"total_committers":4,"mean_commits":6.25,"dds":0.36,"last_synced_commit":"085598373a238e26d6811c2a5673ceac4ac87b5a"},"previous_names":["wojtekkrol/zod-to-fields","paxcode-it/zod-to-fields"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paxcode-it%2Fzod-to-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paxcode-it%2Fzod-to-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paxcode-it%2Fzod-to-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paxcode-it%2Fzod-to-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paxcode-it","download_url":"https://codeload.github.com/paxcode-it/zod-to-fields/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253809517,"owners_count":21967737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-fields","field-generator","react","schema","svelte","type-safe","validation","vue","zod"],"created_at":"2025-01-10T23:26:52.873Z","updated_at":"2025-05-12T19:42:13.803Z","avatar_url":"https://github.com/paxcode-it.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n    Zod To Fields\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"zod-to-fields.svg\" alt=\"Logo\" height=\"300\" /\u003e\n\u003c/p\u003e\n\n\u003e **\u003cp align=\"center\"\u003e\n\u003e Automate your form field generation with type safety.\n\u003e \u003c/br\u003e \u003c/br\u003e\n\u003e Zod To Fields is a utility that effortlessly creates form fields from Zod schemas, ensuring TypeScript type safety and developer-friendly code completion.\u003c/p\u003e**\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/zod-to-fields\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/l/zod-to-fields.svg\" alt=\"License\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codecov.io/gh/wojtekKrol/zod-to-fields\"\u003e\n        \u003cimg src=\"https://img.shields.io/codecov/c/github/wojtekKrol/zod-to-fields.svg\" alt=\"Coverage\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://npmjs.org/package/zod-to-fields\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dm/zod-to-fields.svg\" alt=\"Downloads\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://npmjs.org/package/zod-to-fields\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/zod-to-fields.svg\" alt=\"Version\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wojtekKrol/zod-to-fields/actions?query=branch:main\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/wojtekKrol/zod-to-fields/CI.yml.svg?branch=main\" alt=\"Status\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## 📚 Table of Contents\n\n1. [Introduction](#introduction)\n2. [Features](#features)\n3. [Installation](#installation)\n4. [Usage](#usage)\n   - [Basic Example](#basic-example)\n   - [Advanced Usage](#advanced-usage)\n5. [API Reference](#api-reference)\n6. [Examples](#examples)\n7. [Contributing](#contributing)\n8. [License](#license)\n\n## 📑 Introduction\n\nThis library helps you convert Zod schemas to form fields, reducing boilerplate code and enforcing type safety.\n\n## ⭐ Features\n\n### 🛡️ Strong Type Safety with Zod and TypeScript\n\nEradicate runtime errors and ensure robust code with our TypeScript-based utility that flawlessly integrates with Zod schemas. Enjoy the benefits of type inference and static type checking in your form fields.\n\n### 🧠 Intelligent Code Completion and Intellisense\n\nDeveloper-friendly is our middle name! With strong typing, your IDE will become your best friend, providing invaluable code completion and Intellisense suggestions, making your development process faster and error-free.\n\n#### 🎓 Example for Code Completion\n\nWith a Zod schema like this:\n\n```typescript\nconst schema = z.object({\n  name: z.string(),\n  age: z.number(),\n  isActive: z.boolean(),\n})\n```\n\nThe function `createOptions` will offer real-time attribute suggestions based on your Zod schema types.\n\n```typescript\nconst options = createOptions(schema)({\n  // IDE suggestions here\n})\n```\n\n## 💻 Installation\n\nEnsure you have the power of Zod To Fields in your project by installing it via your preferred package manager:\n\n```bash\n# With npm\nnpm install zod-to-fields\n\n# With Yarn\nyarn add zod-to-fields\n\n# With Pnpm\npnpm install zod-to-fields\n```\n\n\u003e **🔔 Note**: This package is optimized for ECMAScript modules (ESM). Ensure your environment supports ESM imports.\n\n## 🚀 Usage\n\n### 🌱 Basic Example\n\nGenerate form fields effortlessly:\n\n```typescript\nimport { z } from 'zod'\nimport { ztf } from 'zod-to-fields'\n\nconst schema = z.object({\n  name: z.string(),\n  age: z.number(),\n  isActive: z.boolean(),\n})\n\nconst options = ztf.createOptions(schema)({\n  name: { label: 'Full Name' },\n  age: { label: 'Your Age', type: 'number' },\n  isActive: { label: 'Active Status', type: 'checkbox' },\n})\n\nconst formFields = ztf.generateFields(schema, options)\n```\n\n## 🧙 Advanced Usage\n\n### Nested Schemas\n\nFor nested schemas, you can define a Zod schema as follows:\n\n```typescript\nconst schema = z.object({\n  name: z.string(),\n  lastName: z.string(),\n  isAdult: z.boolean(),\n  phoneNumber: z.string(),\n  currency: z.enum(['USD', 'EUR', 'GBP']),\n  colors: z.nativeEnum(Colors),\n  email: z.string(),\n  address: z.object({\n    location: z.object({\n      longitude: z.number(),\n      latitude: z.number(),\n    }),\n    street: z.string(),\n    city: z.string(),\n    zip: z.string(),\n  }),\n})\n```\n\n### Enums and Native Enums\n\nThe library also supports Zod's enum and nativeEnum types,\nallowing you to use either string-based or native TypeScript enums as options in your form fields.\n\n## 📖 API Reference\n\n### `createOptions`\n\n```typescript\n/**\n * Creates and manages field options based on a Zod schema.\n * @param initialSchema The initial Zod schema.\n * @returns An object containing methods for manipulating field options.\n */\n```\n\n#### Usage\n\n```typescript\nconst options = createOptions(schema)\n```\n\n#### Parameters\n\n- `initialSchema`: Your Zod schema object.\n\n#### Returns\n\n- `withFieldOptions`: Method for setting field options.\n- `build`: Method for building the final options object.\n\n### `withFieldOptions`\n\n```typescript\n/**\n * Merges the provided field options with existing options.\n * @param fieldOptions The field options to merge.\n * @returns An object containing methods for further manipulation or to build the options. Chainable.\n */\n```\n\n#### Usage\n\n```typescript\nconst { withFieldOptions, build } = createOptions(schema)\nwithFieldOptions({\n  /* field options */\n}).build()\n```\n\n#### Parameters\n\n- `fieldOptions`: Object containing the attributes you want to customize.\n\n#### Returns\n\n- Chainable methods for further manipulation.\n\n#### Type Behavior\n\n- `z.string()` will generate field options of type `InputStringFieldOptions`, which is narrowed to allow string types like `text`, `password`, etc. You can override these settings with any other property which is a subset of `Partial\u003cInputHTMLAttributes\u003cHTMLInputElement\u003e\u003e`.\n\n- `z.enum()` and `z.nativeEnum()` will generate field options of type `InputEnumFieldOptions`, allowing you to specify options either as a select dropdown or as radio buttons.\n\n### `build`\n\n```typescript\n/**\n * Builds the final options object.\n * @returns The built options object.\n */\n```\n\n#### Usage\n\n```typescript\nconst { build } = createOptions(schema).withFieldOptions({\n  /* field options */\n})\nconst finalOptions = build()\n```\n\n## 📂 Examples\n\nRefer to the `/examples` folder for real-world scenarios and advanced usage.\n\n## 🤝 Contributing\n\nWe love community contributions! For guidelines on how to contribute, please see [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## 📜 License\n\nThis project is under the MIT License. See the [LICENSE](LICENSE) file for more details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaxcode-it%2Fzod-to-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaxcode-it%2Fzod-to-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaxcode-it%2Fzod-to-fields/lists"}