form-builder

This repository contains a small form-builder app built with React, TypeScript and Vite. The app renders forms from JSON schemas and includes schema-driven validation, accessible error UI, and modular field components.

Key tech:

• React 19 + TypeScript
• Vite (dev server + build)
• TanStack Router for routing
• Vitest for tests

Recommended package manager: pnpm

---

Quick start

Open a PowerShell terminal in the project root and run:

pnpm install
pnpm dev

The dev server runs via Vite (default port configured in package.json is 3000). To build for production:

pnpm build
pnpm serve   # preview the production build (vite preview)

Run tests with:

pnpm test

Formatting and linting:

pnpm format
pnpm lint
pnpm check

Note: scripts are defined in package.json (dev, build, serve, test, lint, format, check).

---

Project layout (important files)

• src/main.tsx — application entry
• src/routes/ — file-based routes (TanStack Router)
• src/components/form/FormBuilder.tsx — main dynamic form renderer
• src/components/form/index.module.css — form styles
• src/components/fields/ — individual field components (text, textarea, select, radio, checkbox, switch, multiselect)
• src/Types/formSchemas.ts — example form schemas and rule examples
• src/utils/ and src/validators/ — helpers and schema-driven validation logic

If you're looking to add or modify fields, check src/components/fields and the FieldRenderer that decides which field component to render.

---

Form schemas & validation

Forms are defined by JSON-like schemas (see src/Types/formSchemas.ts). Individual fields may include a rules object for validation. The validator module reads field.rules and applies registered validators, returning messages defined in the schema when available.

Examples:

• required, minLength, maxLength, pattern, min, max, and custom validators are supported.

Validation messages are shown inline and include an accessible error icon and role="alert" for screen readers.

---

Accessibility

Error UI and labels are implemented with accessibility in mind:

• Field-level errors are rendered in a container with role="alert" and aria-live="assertive".
• Checkbox, radio and other input labels are associated with inputs using id/htmlFor so clicking the label toggles the control.

---

Adding a new route

This project uses file-based routing. Add a new file under src/routes/ and export a route as shown in the project examples. See TanStack Router docs for details.

Adding a new field type

1. Create a new field component in src/components/fields/.
2. Export it from src/components/fields/index.ts.
3. Update FieldRenderer.tsx to handle the new renderer type (or extend the factory mapping).

---

Troubleshooting

• If the dev server port is already in use, either stop the process using it or run Vite with a different port:

pnpm dev -- --port 4000

• If TypeScript complains about missing types after adding libraries, run pnpm add -D @types/your-library when available or update tsconfig.json paths.

---

Contributing

Small, focused PRs are easiest to review. If you plan larger changes (new validation features, async validators, or a visual redesign), open an issue first so we can discuss the approach.

---