Откуда брать данные, с какого-то api или брать моковые данные?
Редактирование сделать отдельным эндпоинтом или модальным окном?
Какие данные есть у пользователя (username, email и пр.)?
Поиск должен быть мгновенный или по enter?
По каким данным проводить поиск?
Нужна ли сортировка по каким-то признакам пользователей?
После редактирования когда отдавать данные на сервер или оставлять их только локально для разработки?
Промпт:
"senior frontend-разработчик на React + TypeScript. Создай компонент страницы пользователей со следующим функционалом:
Технологии: React (функциональные компоненты), TypeScript, React Hook Form (или Formik), Zod (для валидации), любой CSS-фреймворк (Tailwind / Material UI / Ant Design).
Требования:
- Список пользователей — таблица с колонками: ID, Имя, Email, Роль, Действия (кнопка 'Редактировать').
- Поиск — поле ввода, фильтрация списка по имени или email (без учёта регистра).
- Форма редактирования — модальное окно, открывается по кнопке в строке. Поля: name (текст, обязательное), email (обязательное, валидация email), role (select: Admin, User, Moderator). Кнопки 'Сохранить' и 'Отмена'.
- Валидация — на клиенте с помощью Zod. При ошибках показывать сообщения под полями.
- Состояния — загрузка данных (спиннер), ошибка загрузки (с кнопкой повтора), пустое состояние (нет пользователей).
- Хранение данных — пока используем моковый массив внутри сервиса (имитация API). Сохранение после редактирования обновляет локальный список.
- Код должен быть: типизирован, разделён на логические компоненты (UserTable, UserSearch, UserEditModal), готов к подключению реального API (сервисный слой абстрагирован).
Напиши полный код всех файлов (App, компоненты, хук, типы, валидацию) в одном ответе."
Критерии приёмки:
- При загрузке страницы отображается таблица с моковыми пользователями (минимум 3 записи).
- Поле поиска фильтрует список по имени или email без перезагрузки страницы.
- Поиск срабатывает через 300 мс после остановки ввода.
- Кнопка 'Редактировать' открывает модальное окно с предзаполненными данными пользователя.
- Все поля формы редактирования имеют валидацию (обязательность и формат email).
- При невалидных данных кнопка 'Сохранить' неактивна или показывает ошибки, сохранение не происходит.
- После успешного сохранения модальное окно закрывается, таблица обновляется с новыми данными.
- Кнопка 'Отмена' закрывает модалку без изменений.
- Во время загрузки/сохранения отображается индикатор.
- При ошибке сети (имитируем) показывается сообщение и кнопка 'Повторить'.
- При пустом результате поиска показывается сообщение 'Пользователи не найдены'.
- Приложение корректно работает в Chrome и Firefox.
Тест-кейсы:
- Ввод в поиск 'alice' → остаются только пользователи с 'alice' в имени или email
- Очистка поиска → таблица показывает всех пользователей
- Нажать 'Редактировать' → модалка открыта, поля заполнены
- Изменить имя → сохранить → модалка закрыта, в таблице новое имя
- Отменить редактирование → модалка закрыта, данные в таблице не изменились
