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

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

invite-form__docs-rules__claude-code__claude-opus-5__1 · 23.09.2026, 21:57:46 мск

Проверки пройдены
Доки + правила · claude-opus-5 · Claude Code
Контекст до задачи~23 785
Токенов на прогон50 518
Цена$0.295
Ошибок компилятора0

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

Компилятор

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

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

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

JxAlert, JxButton, JxInputField, JxSelect, JxSwitch

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

Контекст

Доки (llms-full.txt, ~22548) · Правила (jinx-ui, ~1083)

Вход 2 · выход 1 443 · из кэша 8 233 · в кэш 40 840 · 16 с

Рендер

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

tsx84 строки
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
81
82
83
84
import { useState, type FormEvent } from 'react';
import { JxAlert, JxButton, JxInputField, JxSelect, JxSwitch } from '@jinx-ui/react';

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

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

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

  const isValid = EMAIL_RE.test(email.trim());
  const errorText = touched && !isValid ? 'Укажите адрес вида name@example.com' : undefined;

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

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '420px' }}>
      {sent && (
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <JxAlert intent="success" title="Приглашение отправлено">
              {notify ? `Мы написали на ${sent}.` : `Адрес ${sent} добавлен без уведомления.`}
            </JxAlert>
          </div>
          <JxButton variant="ghost" size="sm" iconOnly aria-label="Закрыть сообщение" onClick={() => setSent(null)}>
            ✕
          </JxButton>
        </div>
      )}

      <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <JxInputField
          label="Электронная почта"
          type="email"
          required
          autoComplete="email"
          placeholder="name@example.com"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          onBlur={() => setTouched(true)}
          helperText="Приглашение действует 7 дней"
          errorText={errorText}
        />

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

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

        <div style={{ display: 'flex', gap: '8px' }}>
          <JxButton type="submit" variant="primary" disabled={!isValid}>
            Отправить приглашение
          </JxButton>
        </div>
      </form>
    </div>
  );
}