Приглашение в команду с валидацией

Сделай форму приглашения в команду: поле почты с подсказкой под ним, выбор роли из списка, переключатель «отправить уведомление» и кнопка отправки. Пока почта не похожа на адрес, поле показывает ошибку и кнопка заблокирована. После отправки над формой появляется сообщение об успехе, которое можно закрыть.

invite-form__docs__claude-code__claude-opus-5__1 · 23.09.2026, 20:21:16 мск

Проверки пройдены
Доки · claude-opus-5 · Claude Code
Контекст до задачи~22 702
Токенов на прогон48 331
Цена$0.273
Ошибок компилятора0

Первый вызов модели получил 47 370 токенов входа, включая системный промпт Claude Code. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

Ошибок нет: все компоненты и пропсы существуют.

Линтер и покрытие

  • inline-styleСтроки 37, 41
    Инлайновые стили вместо классов и токенов библиотеки
Компоненты библиотеки

JxAlert, JxButton, JxInputField, JxSelect, JxSwitch

Ожидались JxInputField, JxSelect, JxSwitch, JxAlert, JxButton · покрытие 100%

Контекст

Доки (llms-full.txt, ~22548)

Вход 2 · выход 961 · из кэша 8 233 · в кэш 39 135 · 11 с

Рендер

Код компонента

tsx80 строк
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { useState, type FormEvent } from 'react';
import {
  JxAlert,
  JxButton,
  JxInputField,
  JxSelect,
  JxSwitch,
} from '@jinx-ui/react';

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const ROLES = [
  { value: 'viewer', label: 'Наблюдатель', meta: 'только чтение' },
  { value: 'editor', label: 'Редактор', meta: 'правит задачи' },
  { value: 'admin', label: 'Администратор', meta: 'полный доступ' },
];

export default function TeamInviteForm() {
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('editor');
  const [notify, setNotify] = useState(true);
  const [invited, setInvited] = useState<string | null>(null);

  const isValid = EMAIL_PATTERN.test(email.trim());
  const errorText = email.length > 0 && !isValid ? 'Укажите адрес вида name@company.com' : undefined;

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!isValid) return;
    setInvited(email.trim());
    setEmail('');
  };

  return (
    <form
      onSubmit={submit}
      style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '420px' }}
    >
      {invited && (
        <JxAlert intent="success" title="Приглашение отправлено">
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <span>{invited} получит доступ к команде.</span>
            <JxButton variant="ghost" size="sm" onClick={() => setInvited(null)}>
              Закрыть
            </JxButton>
          </div>
        </JxAlert>
      )}

      <JxInputField
        label="Почта"
        type="email"
        required
        placeholder="name@company.com"
        helperText="Приглашение придёт на этот адрес и будет действовать 7 дней."
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        errorText={errorText}
      />

      <JxSelect
        label="Роль"
        options={ROLES}
        value={role}
        onValueChange={setRole}
        placeholder="Выберите роль"
      />

      <JxSwitch
        label="Отправить уведомление"
        checked={notify}
        onChange={(event) => setNotify(event.target.checked)}
      />

      <JxButton type="submit" variant="primary" disabled={!isValid}>
        Отправить приглашение
      </JxButton>
    </form>
  );
}