Головна/React і Next.js/Блупринти/Дизайн-системи & UI/Многошаговый визард сложных форм с React Hook Form, Zod и Server Actions
До карток розділу «Дизайн-системи & UI»
Дизайн-системи & UI(ТЗ 4 из 10)
ТЗ: Многошаговый визард сложных форм с React Hook Form, Zod и Server Actions
Дизайн-системи & UI1 шагов • +5 XP

ТЗ: Многошаговый визард сложных форм с React Hook Form, Zod и Server Actions

Коммерческая спецификация создания сложного пошагового опросника: валидация в реальном времени, сохранение черновика при перезагрузке, обработка файловых вложений и типизированная отправка на сервер.

~10 ч работыReact Hook Form v7Zod v3Server ActionsSession Storage RecoveryTailwind CSS v4
+5 XP за шаг
Выполнено 0 из 1 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

ТЗ заказчика (исходный бриф):

Форма должна быть максимально дружелюбной: подсвечивать ошибки только после взаимодействия, не терять заполненные данные при случайном закрытии вкладки и мгновенно валидировать ИНН и ОГРН.
Ключевые требования:
  • •Пошаговая валидация каждого шага отдельной Zod-подсхемой
  • •Автосохранение черновика в sessionStorage с дебаунсом 500 мс
  • •Динамическое добавление полей (useFieldArray)
  • •Серверная валидация загружаемых сканов документов (PDF/JPG до 10 МБ)
Ограничения проекта:
  • •Не перезагружать страницу при переходе между шагами
  • •Сохранять состояние валидности шагов в верхнем Stepper индикаторе
Критерии приёмки (KPI):
  • Конверсия прохождения формы > 65%
  • Время валидации шага < 16ms (60 FPS)

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 1

Композиция Zod-схем по шагам и типизация формы

~30 минСредний

Практическое руководство:

Разбить общую схему заявки на изолированные схемы шагов (Step 1: Компания, Step 2: Техника, Step 3: Документы), объединив их в единый тип.

Важные технические нюансы и подводные камни:

Используйте discriminatedUnion для динамических шагов, зависящих от типа оборудования.

Архитектурная база (Почему выбрано такое решение):

Декомпозиция схем позволяет валидировать только активный шаг перед переходом на следующий без ложных срабатываний по еще не открытым полям.

Совет эксперта (Best Practice):

Экспортируйте отдельные типы шагов для строгой типизации пропсов каждого подкомпонента шага.

Ожидаемый артефакт этапа:

Файл схем валидации с композицией Zod.

TYPESCRIPT
// lib/schemas/leasingWizard.ts
import { z } from 'zod'

export const StepCompanySchema = z.object({
  inn: z.string().regex(/^\d{10}(\d{2})?$/, 'ИНН должен содержать 10 или 12 цифр'),
  companyName: z.string().min(3, 'Название компании слишком короткое'),
  annualRevenue: z.coerce.number().min(1000000, 'Минимальная выручка для лизинга — 1 млн ₽')
})

export const StepEquipmentSchema = z.object({
  equipmentType: z.enum(['truck', 'construction', 'medical', 'it']),
  cost: z.coerce.number().min(500000, 'Минимальная стоимость техники — 500 000 ₽'),
  advancePercent: z.coerce.number().min(10).max(50, 'Аванс от 10% до 50%')
})

export const FullWizardSchema = StepCompanySchema.merge(StepEquipmentSchema)
export type WizardFormData = z.infer<typeof FullWizardSchema>

Типичные грабли на этом ТЗ

1 антипаттерна

Что сдаём клиенту (Deliverables)

Чек-лист сдачи
Многошаговая форма с независимой валидацией
Система автосохранения черновиков в sessionStorage
Серверная валидация файлов в Server Actions

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами