TRI-19 CardStatic: AI-Ready — forwardRef, тесты, stories, AI.md - #614
Conversation
## Что сделано - `CardStatic` переведён с `React.FC` на `forwardRef`: `ref` ведёт на корневой `<div>` — тот же элемент, который получает `className`, `...rest` и `data-tx`. Статики `Content` / `Media` сохранены через `Object.assign`, `displayName` прежний. Изменение аддитивное: раньше переданный компоненту `ref` терялся. - Публичный API не менялся: имена и типы props, значения `ECardTheme` / `ECardRoundingSize` / `ECardContentPaddingSize` и barrel-экспорты `src/components/Card/index.ts` прежние. Общий с `CardAction` код (`types.ts`, `enums.ts`, `utils.ts`, `styles/`, части `CardContent` / `CardMedia`) не затронут. - Unit-тесты `CardStatic`: 8 → 12 — тема по умолчанию, проброс `ref` на реальный DOM-узел, рендер `Media`, `displayName` и композиция частей. - Stories: починены три pre-existing ошибки типов в `Playground` — `paddingSize` является prop'ом `CardStatic.Content`, а не `ICardProps`, поэтому введён тип `PlaygroundArgs` (как в `CardAction`); контролы разнесены по категориям `Props` / `Settings`, исправлена опечатка `desciption`, добавлена story `VisualTests`. Story ids не переименованы. - Добавлен `src/components/Card/CardStatic-ai.md`; в `docs/ai/ROADMAP.md` у CardStatic закрыты все три колонки Фазы 1. - Release notes `stories/release-notes/v1/1.46.0.mdx`: секция **CardStatic**. ## Как проверить - `npx eslint src/components/Card stories/Cards` — 0 ошибок, 0 warnings. - `npx tsc --noEmit` — относительно `main` 44 → 41 ошибки: ушли ровно три ошибки `stories/Cards/CardStatic.stories.tsx`, новых не добавилось. - `npx vitest run src/components/Card` — 36 тестов зелёные (CardStatic 12, CardAction 24). - `npm run syncAiMdTokens -- --check src/components/Card/CardStatic-ai.md` — блок `tokens:` в актуальном формате. - Baseline-скриншоты новой story `VisualTests` генерирует workflow «Update Visual Snapshots»; существующие четыре story не менялись, orphan-скриншотов не возникает. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013a4FBVbFTzwjn1KYP9GHs6
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Essentials Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: 4 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour. Walkthrough
ChangesCardStatic API и проверки
Storybook-примеры
Документация и публикационные материалы
Priority: ⬇️ Low Estimated code review effort: 2 (Simple) | ~15 minutes Change: Bug fix Merge Risk: ⚪ Minimal · up to The documented ref behavior matches the implementation and tests, with no unresolved merge-blocking concerns. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
🚀 Storybook Preview:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Ревью «с чистого листа» по гайдам репозитория. Основное — чисто: перевод на forwardRef сделан аддитивно, ref ведёт на тот же корневой <div>, который получает className, ...rest и data-tx, порядок {...rest} → ref → data-tx совпадает с CardAction; паттерн Object.assign(..., {...} satisfies IComposition) уже есть в репозитории (TabsExtendedContent), displayName сохранён, barrel src/components/Card/index.ts, имена props и значения ECardTheme / ECardRoundingSize / ECardContentPaddingSize не тронуты — breaking changes не вижу. React 18-only API не используется, hardcoded-цветов и конкатенации className нет. Проверил локально: npx vitest run src/components/Card — 36 зелёных (CardStatic 12), npx eslint src/components/Card stories/Cards — чисто, npx tsc --noEmit — 41 ошибка и ни одной в src/components/Card или stories/Cards/CardStatic.stories.tsx (на main было 44, три ушедшие — как раз починенные paddingSize), npm run syncAiMdTokens -- --check — формат в порядке. CardStatic-ai.md сверил с кодом и LESS: радиусы 8/16/24, padding 16/24, overflow: hidden на корне, отступы Header/Footer 16px, утверждение про React.FC без forwardRef у CardMedia / CardContent и про перекрытие фона токенами Card.Action_* — всё соответствует исходникам. Story ids не переименованы, orphan-скриншотов не возникает, related с CardAction двусторонний.
Счёт: 0 blocker'ов в коде, 0 warning, 4 nit. Единственное, что реально блокирует мерж, — не сгенерированные baseline'ы cards-cardstatic--visual-tests--{xs,xl}.png (docs/ai/stories-guide.md, чек-лист скриншот-тестов); проблема инфраструктурная (диспатч workflow из облачной сессии отдаёт 403), нужен ручной прогон «Update Visual Snapshots» на ветке до мержа. Отдельно отмечу для протокола, а не как замечание к этому PR: CardStatic.Content / CardStatic.Media остаются React.FC без forwardRef — это осознанно задокументировано в «Инвариантах» AI.md и совпадает с состоянием CardAction, но общесемейная задача на Card-части, похоже, нигде не заведена; стоит её создать, чтобы ✅ в ROADMAP не выглядели закрывающими этот пробел.
Generated by Claude Code
Правки по замечаниям ревью PR #614 (nit, без изменений публичного API и поведения компонента): - "renders Media inside the card" проверяет вложенность Media в карточку через toContainElement, а не только присутствие в документе. - "exposes displayName and compound components" сравнивает displayName каждой составной части вместо toBeDefined() — теперь тест поймает перепутанные местами Content и Media. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013a4FBVbFTzwjn1KYP9GHs6
Статус проверок и что осталось человекуVisual regression tests — красный, и это не регрессия. В прогоне на Починить это из облачной сессии не получилось. Диспатч workflow «Update Visual Snapshots» отдаёт Локально baseline не генерировал сознательно: skill Что нужно от человека: запустить «Update Visual Snapshots» на ветке Остальные проверки на По замечаниям ревьюПоправлено в
Замечание по формулировке записи в Замечание про Generated by Claude Code |
|
🚀 Storybook Preview:
|
По замечанию ревьюера: из записи убрано перечисление неизменившегося («набор props, статики и разметка прежние») — docs/ai/commits.md § «Главное правило» просит этого не делать, а следующий буллет уже говорит то же одной фразой. Изменение только в тексте release notes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013a4FBVbFTzwjn1KYP9GHs6
|
🚀 Storybook Preview:
|
По замечанию ревьюера. В main вышел релиз 1.46.0 (коммит 01bbc95), поэтому запись про CardStatic перенесена из stories/release-notes/v1/1.46.0.mdx в заготовку следующей версии stories/release-notes/v1/1.47.0.mdx. Файл 1.46.0.mdx приведён обратно в состояние main — этот PR его больше не трогает. Текст записи не менялся. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013a4FBVbFTzwjn1KYP9GHs6
|
🚀 Storybook Preview:
|
4 participants
Что сделано
CardStaticпереведён сReact.FCнаforwardRef:refведёт на корневой<div>— тот же элемент, который получаетclassName,...restиdata-tx.Статики
Content/Mediaсохранены черезObject.assign,displayNameпрежний. Изменение аддитивное: раньше переданный компоненту
refтерялся.ECardTheme/ECardRoundingSize/ECardContentPaddingSizeи barrel-экспортыsrc/components/Card/index.tsпрежние. Общий сCardActionкод(
types.ts,enums.ts,utils.ts,styles/, частиCardContent/CardMedia) не затронут.CardStatic: 8 → 12 — тема по умолчанию, пробросrefнареальный DOM-узел, рендер
Media,displayNameи композиция частей.Playground—paddingSizeявляется prop'омCardStatic.Content, а неICardProps,поэтому введён тип
PlaygroundArgs(как вCardAction); контролы разнесеныпо категориям
Props/Settings, исправлена опечаткаdesciption,добавлена story
VisualTests. Story ids не переименованы.src/components/Card/CardStatic-ai.md; вdocs/ai/ROADMAP.mdу CardStatic закрыты все три колонки Фазы 1.
stories/release-notes/v1/1.46.0.mdx: секция CardStatic.Как проверить
npx eslint src/components/Card stories/Cards— 0 ошибок, 0 warnings.npx tsc --noEmit— относительноmain44 → 41 ошибки: ушли ровно триошибки
stories/Cards/CardStatic.stories.tsx, новых не добавилось.npx vitest run src/components/Card— 36 тестов зелёные (CardStatic 12,CardAction 24).
npm run syncAiMdTokens -- --check src/components/Card/CardStatic-ai.md—блок
tokens:в актуальном формате.VisualTestsгенерирует workflow«Update Visual Snapshots»; существующие четыре story не менялись,
orphan-скриншотов не возникает.
Co-Authored-By: Claude Opus 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_013a4FBVbFTzwjn1KYP9GHs6
Summary by CodeRabbit
Новые возможности
CardStaticтеперь поддерживает передачуrefна корневой элемент карточки.Документация
CardStatic.refв release notes версии 1.47.0.