refactor(thumbnail-card): migrate ThumbnailCard from Flow to TypeScript

[bonchevskyi]

Convert ThumbnailCard component to TypeScript

This PR converts src/components/thumbnail-card from JavaScript with Flow to TypeScript.

Changes

• Converted ThumbnailCard.js, ThumbnailCardDetails.js, and ThumbnailCardThumbnail.js to .tsx with exported ThumbnailCardProps, ThumbnailCardDetailsProps, and ThumbnailCardThumbnailProps interfaces
• Converted index.js to index.ts, re-exporting the component and ThumbnailCardProps
• Converted ThumbnailCard.stories.js to ThumbnailCard.stories.tsx
• Converted __tests__/*.test.js to *.test.tsx
• Created .js.flow files for backward compatibility

Testing

• Ran tests for src/components/thumbnail-card; all 13 pass with snapshots matching previous output
• yarn lint:ts and flow check pass
• Manually verified in Storybook (Components/ThumbnailCard) that behavior is unchanged

Summary by CodeRabbit

• New Features

  • Added a reusable thumbnail card for displaying an image, title, subtitle, icon, and optional actions.
  • Supports hover highlighting and custom styling.
  • Provides keyboard interaction and accessible button/link semantics.
  • Displays a tooltip when titles are truncated.
  • Supports flexible thumbnail and action content.

• Refactor

  • Added TypeScript support and public exports for the thumbnail card components.

[coderabbitai]

Walkthrough

Added TypeScript implementations for ThumbnailCard, ThumbnailCardDetails, and ThumbnailCardThumbnail. Added Flow compatibility modules, typed barrel exports, and updated test setup.

Changes

ThumbnailCard composition

Layer / File(s)	Summary
Typed card composition and exports src/components/thumbnail-card/ThumbnailCard.tsx, src/components/thumbnail-card/ThumbnailCardThumbnail.tsx, src/components/thumbnail-card/index.ts	Defines typed props, renders thumbnail and details content, applies hover classes, forwards HTML attributes, and sets conditional button semantics.
Flow compatibility modules src/components/thumbnail-card/*.js.flow, src/components/thumbnail-card/index.js.flow	Adds Flow-compatible component implementations and a default barrel export.
Details rendering src/components/thumbnail-card/ThumbnailCardDetails.tsx, src/components/thumbnail-card/ThumbnailCardDetails.js.flow	Renders optional icon, subtitle, and action content. The title enables tooltips when text overflows and forwards keyboard handling.
Tests and stories src/components/thumbnail-card/__tests__/*, src/components/thumbnail-card/ThumbnailCard.stories.tsx	Removes Flow annotations, adds Enzyme shallow imports, and uses a Jest mock for the keyboard interaction test.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• box/box-ui-elements#4727: Uses the same Flow-to-TypeScript migration structure.
• box/box-ui-elements#4757: Migrates a separate component with matching compatibility, export, story, and test updates.
• box/box-ui-elements#4760: Applies the same TypeScript migration pattern to another component.

Suggested labels: ready-to-merge

Suggested reviewers: tjiang-box, jpan-box, vitali-usik

Poem

I’m a rabbit with cards in a neat little row,
Typed thumbnails now render and glow.
Details hold titles, icons, and more,
Tooltips appear when words overflow.
Hop, hop—Flow paths remain at the door!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the migration of ThumbnailCard from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration, lists the main changes, and reports testing and verification results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/thumbnail-card/ThumbnailCard.tsx (1)

18-19: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Use keyboard-event handler types for onKeyDown.

This onKeyDown is registered on the title <div>, but the prop is typed as () => void. Change every thumbnail-card onKeyDown declaration to the keyboard-event handler type for the HTMLDivElement so callers can access event.key, preventDefault(), and propagation methods.

• TypeScript files: React.KeyboardEventHandler<HTMLDivElement>
• Flow files: import SyntheticKeyboardEvent<HTMLDivElement> from react and use that type.

</verification Result>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/thumbnail-card/ThumbnailCard.tsx` around lines 18 - 19, Update
every thumbnail-card onKeyDown declaration to use the appropriate keyboard event
handler type: use React.KeyboardEventHandler<HTMLDivElement> in
ThumbnailCard.tsx and both ThumbnailCardDetails.tsx declarations, and import and
use SyntheticKeyboardEvent<HTMLDivElement> in ThumbnailCard.js.flow and both
ThumbnailCardDetails.js.flow declarations. Ensure handlers receive the keyboard
event while preserving existing behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/thumbnail-card/ThumbnailCard.tsx`:
- Around line 18-19: Update every thumbnail-card onKeyDown declaration to use
the appropriate keyboard event handler type: use
React.KeyboardEventHandler<HTMLDivElement> in ThumbnailCard.tsx and both
ThumbnailCardDetails.tsx declarations, and import and use
SyntheticKeyboardEvent<HTMLDivElement> in ThumbnailCard.js.flow and both
ThumbnailCardDetails.js.flow declarations. Ensure handlers receive the keyboard
event while preserving existing behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fa248e1d-5fc2-4e51-9a25-7f86cdc41114

📥 Commits

Reviewing files that changed from the base of the PR and between 84b90a7 and a06d9b1.

⛔ Files ignored due to path filters (2)

• src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.tsx.snap is excluded by !**/*.snap
• src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCardThumbnail.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (12)

• src/components/thumbnail-card/ThumbnailCard.js.flow
• src/components/thumbnail-card/ThumbnailCard.stories.tsx
• src/components/thumbnail-card/ThumbnailCard.tsx
• src/components/thumbnail-card/ThumbnailCardDetails.js.flow
• src/components/thumbnail-card/ThumbnailCardDetails.tsx
• src/components/thumbnail-card/ThumbnailCardThumbnail.js.flow
• src/components/thumbnail-card/ThumbnailCardThumbnail.tsx
• src/components/thumbnail-card/__tests__/ThumbnailCard.test.tsx
• src/components/thumbnail-card/__tests__/ThumbnailCardDetails.test.tsx
• src/components/thumbnail-card/__tests__/ThumbnailCardThumbnail.test.tsx
• src/components/thumbnail-card/index.js.flow
• src/components/thumbnail-card/index.ts

💤 Files with no reviewable changes (2)

• src/components/thumbnail-card/ThumbnailCard.stories.tsx
• src/components/thumbnail-card/tests/ThumbnailCardDetails.test.tsx

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-11 15:14 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ❌ Checks failed · in-place
• 🚫 Left the queue — 2026-08-11 15:26 UTC · at 8fdb28682d9eeb101c2c3527e6a9c29923a9b695

This pull request spent 12 minutes 14 seconds in the queue, with no time running CI.

Waiting for any of

• check-neutral = lint_test_build
• check-skipped = lint_test_build
• check-success = lint_test_build

All conditions

• any of [🛡 GitHub branch protection]:
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
  • check-success = lint_test_build
• github-review-approved [🛡 GitHub branch protection]
  • refactor(thumbnail-card): migrate ThumbnailCard from Flow to TypeScript #4762
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request

Reason

The merge conditions cannot be satisfied due to failing checks

Failing checks:

• 🟠 lint_test_build (job log)

Hint

You may have to fix your CI before adding the pull request to the queue again.
If you update this pull request, to fix the CI, it will automatically be requeued once the queue conditions match again.
If you think this was a flaky issue instead, you can requeue the pull request, without updating it, by posting a @mergifyio queue comment.

Requeued — the merge queue status continues in this comment ↓.

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-11 16:50 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks skipped · PR is already up-to-date
• ✅ Merged — 2026-08-11 16:51 UTC · at 38e7e9b47585aea2a26a00edd13477a6c590cc92 · squash

This pull request spent 28 seconds in the queue, including 5 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(thumbnail-card): migrate ThumbnailCard from Flow to TypeScript #4762
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request