Skip to content

refactor(grid-view): migrate GridView from Flow to TypeScript - #4734

Open
bonchevskyi wants to merge 1 commit into
box:masterfrom
bonchevskyi:refactor/flow-to-ts-grid-view
Open

refactor(grid-view): migrate GridView from Flow to TypeScript#4734
bonchevskyi wants to merge 1 commit into
box:masterfrom
bonchevskyi:refactor/flow-to-ts-grid-view

Conversation

@bonchevskyi

@bonchevskyi bonchevskyi commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Convert GridView component to TypeScript

This PR converts src/components/grid-view from JavaScript with Flow to TypeScript.

Changes

  • Converted GridView.js and GridViewSlot.js to TypeScript with exported props interfaces
  • Added index.ts, re-exporting GridView, GridViewSlider, and their public types
  • Converted GridView.test.js to GridView.test.tsx
  • Created .js.flow files for backward compatibility
  • Added GridView exports to src/components/index.ts

Testing

  • Ran tests for src/components/grid-view; all 5 tests and 1 snapshot pass
  • yarn lint:ts, ESLint, and Flow checks pass
  • Storybook production build completed successfully

Summary by CodeRabbit

  • New Features

    • Added a virtualized grid view for efficiently displaying collection items in configurable columns.
    • Added selectable grid slots with custom content rendering and responsive sizing.
    • Added support for scrolling directly to a selected row.
    • Exposed the grid view through the component library’s public exports.
  • Documentation

    • Added clarifying documentation for grid slider properties.

@bonchevskyi
bonchevskyi requested a review from a team as a code owner July 31, 2026 14:03
@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c59e9f88-1150-427e-9676-a02d4f412f7e

📥 Commits

Reviewing files that changed from the base of the PR and between f06c7b7 and 758c6b1.

⛔ Files ignored due to path filters (1)
  • src/components/grid-view/__tests__/__snapshots__/GridView.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (8)
  • src/components/grid-view/GridView.js.flow
  • src/components/grid-view/GridView.tsx
  • src/components/grid-view/GridViewSlider.tsx
  • src/components/grid-view/GridViewSlot.js.flow
  • src/components/grid-view/GridViewSlot.tsx
  • src/components/grid-view/__tests__/GridView.test.tsx
  • src/components/grid-view/index.ts
  • src/components/index.ts
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/components/grid-view/index.ts
  • src/components/grid-view/tests/GridView.test.tsx
  • src/components/grid-view/GridView.tsx
  • src/components/grid-view/GridViewSlider.tsx
  • src/components/grid-view/GridViewSlot.js.flow
  • src/components/grid-view/GridView.js.flow
  • src/components/index.ts
  • src/components/grid-view/GridViewSlot.tsx

Walkthrough

Added a virtualized GridView with dynamic row measurement, configurable columns, selection-aware slots, optional row scrolling, Flow compatibility, TypeScript contracts, and public barrel exports.

Changes

GridView component

Layer / File(s) Summary
Slot rendering contract
src/components/grid-view/GridViewSlot.*
GridViewSlot renders width-constrained content, applies selected-state styling, and calls slotRenderer with the slot index.
Virtualized grid implementation
src/components/grid-view/GridView.*
GridView renders collection items in configurable columns through Table, measures row heights, clears caches when dimensions change, and supports optional scrolling.
Public integration and validation
src/components/grid-view/index.ts, src/components/index.ts, src/components/grid-view/GridViewSlider.tsx, src/components/grid-view/__tests__/GridView.test.tsx
The component and types are exported through both barrels. Slider props include documentation comments. The render test uses typed fixtures and Jest mocks.

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

Sequence Diagram(s)

sequenceDiagram
  participant GridView
  participant Table
  participant CellMeasurer
  participant GridViewSlot
  participant slotRenderer
  GridView->>Table: Render virtualized rows
  Table->>CellMeasurer: Measure row height
  Table->>GridViewSlot: Pass slot index, selection, and width
  GridViewSlot->>slotRenderer: Render slot content
  slotRenderer-->>GridViewSlot: Return slot element
Loading

Possibly related PRs

  • box/box-ui-elements#4731: Migrates another React component from Flow to TypeScript and updates component barrel exports.

Suggested labels: ready-to-merge

Suggested reviewers: tjiang-box, vitali-usik

Poem

A rabbit arranges each slot in a row,
Measured heights keep the grid in flow.
Columns expand, selections shine,
Exports keep each piece in line.
“Hop!” says the grid, “the view is ready.” 🐇

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'refactor(grid-view): migrate GridView from Flow to TypeScript' directly and clearly summarizes the main change in the PR—converting the GridView component from Flow typing to TypeScript.
Description check ✅ Passed The PR description thoroughly documents the conversion work, lists all changed files, explains the testing that was performed, and confirms all checks pass. It aligns with the repository's collaborative workflow guidelines.
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

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

@bonchevskyi
bonchevskyi force-pushed the refactor/flow-to-ts-grid-view branch from f06c7b7 to 758c6b1 Compare July 31, 2026 14:08

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/grid-view/GridView.js.flow (1)

1-114: 📐 Maintainability & Code Quality | 🔵 Trivial

Manual sync risk between .tsx and .js.flow.

This file duplicates the full GridView.tsx implementation in Flow syntax for backward compatibility. Nothing enforces parity between the two files. Future changes to GridView.tsx (for example, the componentDidUpdate guard or cellRenderer logic) require a matching manual edit here, or the Flow-typed consumer surface silently drifts from the TypeScript implementation.

Consider adding a lint rule, code comment pointing to the canonical source, or a CI check that fails when one file changes without the other, to reduce the chance of divergence.

🤖 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/grid-view/GridView.js.flow` around lines 1 - 114, Add an
explicit parity safeguard for the duplicated GridView implementation: identify
GridView.tsx as the canonical source near the GridView class and add either a
lint/CI check or an equivalent repository-supported mechanism that fails when
GridView.tsx changes without GridView.js.flow. Ensure future updates to symbols
such as componentDidUpdate and cellRenderer cannot silently diverge between the
two files.
🤖 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.

Inline comments:
In `@src/components/grid-view/__tests__/GridView.test.tsx`:
- Line 8: Update the collection fixture in GridView tests to cast it explicitly
as Collection, avoiding the readonly tuple produced by as const being assigned
to the mutable Collection.items array. Preserve the existing fixture values and
test behavior.

In `@src/components/grid-view/GridView.tsx`:
- Around line 17-31: Remove the catch-all string index signature from
GridViewProps in src/components/grid-view/GridView.tsx lines 17-31, unless an
existing caller intentionally spreads extra props onto GridView. Also remove the
index signature from GridViewSlotProps in
src/components/grid-view/GridViewSlot.tsx lines 5-15, since GridView passes only
declared props to GridViewSlot.

---

Nitpick comments:
In `@src/components/grid-view/GridView.js.flow`:
- Around line 1-114: Add an explicit parity safeguard for the duplicated
GridView implementation: identify GridView.tsx as the canonical source near the
GridView class and add either a lint/CI check or an equivalent
repository-supported mechanism that fails when GridView.tsx changes without
GridView.js.flow. Ensure future updates to symbols such as componentDidUpdate
and cellRenderer cannot silently diverge between the two files.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a776f272-3703-482a-b58f-3a5927a38d2c

📥 Commits

Reviewing files that changed from the base of the PR and between 336205d and f06c7b7.

⛔ Files ignored due to path filters (1)
  • src/components/grid-view/__tests__/__snapshots__/GridView.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (8)
  • src/components/grid-view/GridView.js.flow
  • src/components/grid-view/GridView.tsx
  • src/components/grid-view/GridViewSlider.tsx
  • src/components/grid-view/GridViewSlot.js.flow
  • src/components/grid-view/GridViewSlot.tsx
  • src/components/grid-view/__tests__/GridView.test.tsx
  • src/components/grid-view/index.ts
  • src/components/index.ts

Comment thread src/components/grid-view/__tests__/GridView.test.tsx
Comment thread src/components/grid-view/GridView.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant