[CL-REACT-DOCTOR-LB] refactor(Lightbox): чистим 9 react-doctor warnings + smoke-test #104

Merged

andrei merged 2 commits from feature/claude-lightbox-warnings-cleanup into master 2026-05-21 11:08:16 +00:00

Conversation 0 Commits 2 Files changed 17 +292 -148

andrei commented 2026-05-21 10:29:01 +00:00

Owner

Copy link

Что сделано

• framer-motion: переходим на LazyMotion + m (rule use-lazy-motion)
• Tailwind 4 size-shorthand: h-9 w-9 → size-9, h-10 w-10 → size-10 (rule design-no-redundant-size-axes ×3)
• a11y: добавили role="toolbar" + onKeyDown на верхний бар, role="tablist" на дот-индикаторы (rules click-events-have-key-events ×2 + no-static-element-interactions ×2)
• Стабильный ключ для дотов: image URL вместо array index (rule no-array-index-as-key, 1 из 2)
• Новый тест app/src/components/shared/__tests__/Lightbox.test.tsx (11 кейсов): counter, навигация, role-атрибуты, size-классы, body scroll lock, dot ключи
• Мок framer-motion в app/src/__tests__/setup.ts расширен на m, LazyMotion, domAnimation (Rule E)

Зачем

Phase 2 react-doctor hygiene после wire-up PR #102. Из 14 warnings на app/src/components/shared/Lightbox.tsx закрываем 9. GitNexus impact analysis: LOW risk, 0 upstream callers — pure internal refactor, никаких поведенческих изменений.

До	После
14 warnings	5 warnings
0 errors	0 errors

План тестирования

• cd app && npx tsc --noEmit — clean
• cd app && npx eslint src/components/shared/Lightbox.tsx --max-warnings 0 — clean
• cd app && npx vitest run src/components/shared/__tests__/Lightbox.test.tsx — 11/11 PASS
• cd app && npx react-doctor . --offline --lint -y --json -> Lightbox 14 -> 5 warnings, app-wide errors = 0 (CI gate --fail-on error остаётся green)
• CI: 8 Forgejo jobs + React Doctor self-scan на этом PR должны быть green

Где могу ошибаться

• 3× prefer-use-effect-event оставлены как warnings — API экспериментальный (experimental_useEffectEvent), включать в production не готов. Можно вернуться когда React 19.x стабилизирует.
• 1× no-derived-useState (scaleRef pattern) оставлен — намеренный для избежания stale closure внутри setTimeout в handleImageClick
• 1× no-array-index-as-key остался — возможно второе срабатывание не на дотах, требует follow-up scan / patch
• LazyMotion применён локально внутри Lightbox.tsx. Долгосрочно правильнее обернуть весь app в main.tsx для bundle savings глобально — отдельный PR (touches protected file)
• Lightbox.test.tsx использует mocked framer-motion (через setup.ts), real DOM behavior анимаций не покрывается
• Worktree pnpm install не активировал husky -> pre-push hooks возможно не сработали локально, рассчитываю на CI

## Что сделано - `framer-motion`: переходим на `LazyMotion` + `m` (rule `use-lazy-motion`) - Tailwind 4 size-shorthand: `h-9 w-9` → `size-9`, `h-10 w-10` → `size-10` (rule `design-no-redundant-size-axes` ×3) - a11y: добавили `role="toolbar"` + `onKeyDown` на верхний бар, `role="tablist"` на дот-индикаторы (rules `click-events-have-key-events` ×2 + `no-static-element-interactions` ×2) - Стабильный ключ для дотов: image URL вместо array index (rule `no-array-index-as-key`, 1 из 2) - Новый тест `app/src/components/shared/__tests__/Lightbox.test.tsx` (11 кейсов): counter, навигация, role-атрибуты, size-классы, body scroll lock, dot ключи - Мок `framer-motion` в `app/src/__tests__/setup.ts` расширен на `m`, `LazyMotion`, `domAnimation` (Rule E) ## Зачем Phase 2 react-doctor hygiene после wire-up PR #102. Из 14 warnings на `app/src/components/shared/Lightbox.tsx` закрываем 9. GitNexus impact analysis: **LOW** risk, **0 upstream callers** — pure internal refactor, никаких поведенческих изменений. | До | После | |---|---| | 14 warnings | 5 warnings | | 0 errors | 0 errors | ## План тестирования - `cd app && npx tsc --noEmit` — clean - `cd app && npx eslint src/components/shared/Lightbox.tsx --max-warnings 0` — clean - `cd app && npx vitest run src/components/shared/__tests__/Lightbox.test.tsx` — **11/11 PASS** - `cd app && npx react-doctor . --offline --lint -y --json` -> Lightbox 14 -> 5 warnings, app-wide errors = 0 (CI gate `--fail-on error` остаётся green) - CI: 8 Forgejo jobs + React Doctor self-scan на этом PR должны быть green ## Где могу ошибаться - 3× `prefer-use-effect-event` оставлены как warnings — API экспериментальный (`experimental_useEffectEvent`), включать в production не готов. Можно вернуться когда React 19.x стабилизирует. - 1× `no-derived-useState` (scaleRef pattern) оставлен — намеренный для избежания stale closure внутри `setTimeout` в `handleImageClick` - 1× `no-array-index-as-key` остался — возможно второе срабатывание не на дотах, требует follow-up scan / patch - `LazyMotion` применён локально внутри `Lightbox.tsx`. Долгосрочно правильнее обернуть весь app в `main.tsx` для bundle savings глобально — отдельный PR (touches protected file) - Lightbox.test.tsx использует mocked framer-motion (через setup.ts), real DOM behavior анимаций не покрывается - Worktree pnpm install не активировал husky -> pre-push hooks возможно не сработали локально, рассчитываю на CI

andrei added 1 commit 2026-05-21 10:29:01 +00:00

[CL-REACT-DOCTOR-LB] refactor(app/Lightbox): чистим 9 react-doctor warnings + smoke-test ... f1c34ebc05

## Что сделано
- `framer-motion`: переходим на `LazyMotion` + `m` (rule use-lazy-motion)
- Tailwind 4 size-shorthand: `h-9 w-9` → `size-9`, `h-10 w-10` → `size-10` (rule design-no-redundant-size-axes ×3)
- a11y: добавили `role="toolbar"` + `onKeyDown` на верхний бар и `role="tablist"` на дот-индикаторы (rule click-events-have-key-events ×2 + no-static-element-interactions ×2)
- Стабильный ключ для дотов: image URL вместо array index (rule no-array-index-as-key, 1 из 2)
- Тест `app/src/components/shared/__tests__/Lightbox.test.tsx` (11 кейсов: counter, навигация, role-атрибуты, size-классы, body scroll lock, dot ключи)
- Мок `framer-motion` в `app/src/__tests__/setup.ts` расширен на `m`, `LazyMotion`, `domAnimation` (Rule E)

## Зачем
Phase 2 react-doctor hygiene после wire-up PR #102. Из 14 warnings на Lightbox.tsx закрываем 9. GitNexus impact: LOW, 0 upstream callers — pure internal refactor, никаких поведенческих изменений.

## План тестирования
- `cd app && npx tsc --noEmit` — clean
- `cd app && npx eslint src --max-warnings 0` — clean (на изменённых файлах)
- `cd app && npx vitest run src/components/shared/__tests__/Lightbox.test.tsx` — 11/11 PASS
- `cd app && npx react-doctor . --offline --lint -y --json` → Lightbox diagnostics 14 → 5, app-wide errors 0 (CI gate остаётся green)

## Где могу ошибаться
- 3× `prefer-use-effect-event` оставлены как warnings — API экспериментальный (`experimental_useEffectEvent`), включать в production не готов
- 1× `no-derived-useState` (scaleRef pattern) оставлен — намеренный для избежания stale closure внутри setTimeout
- 1× `no-array-index-as-key` остался — возможно второе срабатывание не на дотах, требует follow-up scan
- LazyMotion применён локально внутри Lightbox.tsx. Долгосрочно правильнее обернуть весь app в main.tsx — отдельный PR
- Lightbox.test.tsx использует mock'ed framer-motion (через setup.ts), real DOM behavior не тестируется

andrei referenced this pull request from a commit 2026-05-21 10:42:22 +00:00

[CL-REACT-DOCTOR-LB] i18n(common): добавляем aria.lightboxToolbar + aria.lightboxDots на 14 языков

andrei added 1 commit 2026-05-21 10:42:23 +00:00

[CL-REACT-DOCTOR-LB] i18n(common): добавляем aria.lightboxToolbar + aria.lightboxDots на 14 языков ... cb4fc0d282

## Что сделано
Добавил 2 новых i18n ключа в `aria` namespace `common.json` для всех 14 локалей (ar, de, en, es, fr, hi, id, it, ja, ko, pt, ru, tr, zh):
- `aria.lightboxToolbar` — aria-label для toolbar (верхний бар Lightbox)
- `aria.lightboxDots` — aria-label для tablist (дот-индикаторы)

## Зачем
Fix CI / App fail на PR #104: i18n usage check FAILED — missing keys в EN. Lightbox.tsx использует эти ключи через `t('common:aria.lightboxToolbar')` после a11y refactor.

## План тестирования
- `cd app && npm run i18n:check` — 0 missing across 13 languages
- `cd app && npm run test:i18n-usage` — Total keys checked: 8331, Missing: 0

## Где могу ошибаться
- Переводы non-en сгенерированы без native speakers, могут потребовать coverage review
- Скрипт i18n:check репортит 13 languages, но common.json есть на 14 (вероятно ar или tr фильтруется на etoile fallback) — не блокер

andrei merged commit d57ddc8a43 into master 2026-05-21 11:08:16 +00:00

andrei deleted branch feature/claude-lightbox-warnings-cleanup 2026-05-21 11:08:17 +00:00

andrei referenced this pull request from a commit 2026-05-21 11:08:17 +00:00

[CL-REACT-DOCTOR-LB] refactor(Lightbox): чистим 9 react-doctor warnings + smoke-test (#104)

andrei referenced this pull request from a commit 2026-05-21 12:22:59 +00:00

[CL-REACT-DOCTOR-REBAL] refactor(AiRebalancingModal): чистим 11 react-doctor warnings + smoke-test

andrei referenced this pull request 2026-05-21 12:23:41 +00:00

[CL-REACT-DOCTOR-REBAL] refactor(AiRebalancingModal): чистим 11 react-doctor warnings + smoke-test #111

andrei referenced this pull request from a commit 2026-05-21 13:32:12 +00:00

[CL-REACT-DOCTOR-COMPLIANCE] refactor(AdminComplianceDashboard): чистим 19 react-doctor warnings + smoke-test

andrei referenced this pull request 2026-05-21 13:32:52 +00:00

[CL-REACT-DOCTOR-COMPLIANCE] refactor(AdminComplianceDashboard): чистим 19 react-doctor warnings + smoke-test #113

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

europa-tech-srl/europatech!104

No description provided.