Antd Zod Bridge

A powerful TypeScript library that seamlessly integrates Zod validation with Ant Design form components for React, providing type-safe form handling with minimal boilerplate.

📘 Read this document in Russian

🚀 Features

• 🔗 Seamless Integration – Direct mapping between Zod schemas and Ant Design components
• 📝 Type Safety – Full TypeScript support with automatic type inference
• 🎨 Consistent UI – Pre-styled components following Ant Design patterns
• 🔍 Smart Validation – Built-in validation with custom error messages
• 🧩 Modular – Use individual components or a complete form solution
• 🎯 Accessibility – WCAG-compliant with proper label associations
• 🎭 Auto Styling – Styles are injected automatically with no need for manual CSS imports
• 🌙 Dark Mode – Full support for both light and dark themes out of the box
• 🧪 Well Tested – Comprehensive test coverage with Vitest
• 🌐 i18n-Ready – Supports localization with Russian locale included

📦 Installation

npm i @ssortia/antd-zod-bridge

⚡ Quick Start

import { z } from 'zod';
import { ZodForm, TextField, NumberField, SelectField } from '@ssortia/antd-zod-bridge';

const schema = z.object({
  name: z.string().min(1, "Name is required"),
  age: z.number().min(18, "You must be at least 18"),
  role: z.enum(['admin', 'user'])
});

function MyForm() {
  const handleSubmit = (data: z.infer<typeof schema>) => {
    console.log(data);
  };

  return (
    <ZodForm schema={schema} onSubmit={handleSubmit}>
      <TextField 
        name="name" 
        label="Name" 
        placeholder="Enter your name"
        required 
      />

      <NumberField 
        name="age" 
        label="Age" 
        min={0}
        max={120}
        required 
      />

      <SelectField 
        name="role" 
        label="Role" 
        options={[
          { label: 'Administrator', value: 'admin' },
          { label: 'User', value: 'user' }
        ]}
        required 
      />

      <button type="submit">Submit</button>
    </ZodForm>
  );
}

📚 Available Components

| Component | Description | Key Features | |------------------|--------------------------------------|----------------------------------------------------------------| | ZodForm | Main form component with validation | Integration with react-hook-form, automatic validation | | TextField | Single-line text input field | Prefix/suffix, char counter, length restriction | | PasswordField | Password input field | Toggle visibility, built-in icon | | NumberField | Numeric input field | Increment/decrement buttons, formatting, precision | | TextAreaField | Multiline text input | Autosize, character count, max rows | | SelectField | Dropdown select | Search, multi-select, grouped options | | RadioField | Radio button group | Horizontal/vertical layout, option disabling | | CheckboxField | Checkbox input | JSX label support, checked/unchecked state | | DateField | Date picker | Localization, time picker, date limits | | ListField | Dynamic list | Add/remove items, nested form support | | PhoneField | Phone number input | Auto-masking for Russian format | | BaseField | Base field component | Foundation for custom validated fields |

🛠 Development

This project uses a pnpm workspace:

# Install dependencies
pnpm install

# Build the library
pnpm --filter ui build

# Run the playground for testing
pnpm --filter playground dev

🗂 Project Structure

packages/
├── ui/             # Main component library
│   ├── src/
│   │   ├── ZodForm.tsx       # Core form component
│   │   ├── BaseField.tsx     # Base field component
│   │   ├── TextField.tsx     # Text input
│   │   ├── SelectField.tsx   # Dropdown select
│   │   └── ...               # Other form components
└── playground/     # Playground for testing components